@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf');
}

body {
  background-color: #fcfbfc;
  background-image: url("../img/background.png");
  background-repeat: no-repeat;
  background-position: top right;
}

.container {
  display: flex;
  flex-direction: row;
}

.play{
  flex: 1;
}

.play .mobile-case {
  position: relative;
  float: right;
  margin-top: 5vh;
  margin-right: 20px;
  background: url("../img/iphone_mock.png") no-repeat right top;
  width: 600px;
  height: 800px;
}

.play .iframeContainer{
  height: 664px;
  width: 317px;
  position: absolute;
  top: 48px;
  left: 196px;
  border-radius: 0 0 33px 33px;
  overflow: hidden;
}

.play .iframeContainer iframe {
  height: 100%;
  width: 100%;
  position: absolute;
}

.play #time{
  position: absolute;
  top: 34px;
  left: 218px;
  font-weight: bold;
  font-size: 13px;
  font-family: sans-serif;
}

.info {
  display:flex;
  flex-direction: column;
  width: 45%;
}

.info img.logo{
  width: 240px;
  margin-top: auto;
}

.info h1 {
	width: 295px;
	color: #354052;
	font-family: Poppins;
	font-size: 20px;
	font-weight: 500;
  line-height: 28px;
  margin-bottom: 70px;
}

.info .stores a{
  text-decoration: none;
}

.info .stores img.ios{
  height: 38px;
  margin-bottom: 9px;
}

.info .stores img.android{
  height: 56px;
  margin-left: -9px;
}

.info p {
	width: 205px;
	color: #76797E;
	font-family: Poppins;
	font-size: 14px;
	font-weight: 500;
  line-height: 28px;
  margin-bottom: 15vh;
}

/*NOT SUPPORTED*/
.not-supported {
  display: flex;
  justify-content: center;
}

.not-supported .container {
  margin-top: 20vh;

  justify-content: center;
  flex-wrap: wrap;
}

.not-supported-zap {
  display: flex;
}

.not-supported-zap img {
  display: flex;

  margin: 0px 120px 20px 120px;
  width: 143px;
  height: 136px;
}

.not-supported-info {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.not-supported-info h1 {
  color: #2ea2f8;
  font-family: Poppins;
  font-size: 28px;
  font-weight: bold;

  margin: 0;
}

.not-supported-info .subtitle {
  color: #000000;
  opacity: 0.65;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 300;

  margin-top: 0;
}

.not-supported-info .explanation {
  color: #000000;
  opacity: 0.65;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 300;
}

.not-supported-info .solution {
  color: #000000;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
}

.not-supported-info span {
  color: #2ea2f8;
}

.not-supported-info img {
  width: 164px;
  height: 27px;

  margin-top: 50px;
}