/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  margin: 0;
  padding: 0
}
:focus {
  outline: 0
}
img {
  border: none
}
html,body {
  -webkit-text-size-adjust: none
}
body {
  background: linear-gradient(to right, rgb(211, 149, 155), rgb(191, 230, 186));
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  color: #000000;
  min-width: 300px;
}
ol,ul {
  list-style: none
}
a {
  color: #fff
}
.wrap {
  position: relative;
  padding: 0 15px
}
.slogan-box {
  padding: 20px 0;
  text-align: center;
  max-width: 900px;
  margin: 0 auto
}
.slogan-box h3 {
  font-size: 50px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: normal;
  text-shadow: 3px 2px 3px rgba(255,255,255,.2), 2px 4px 4px #000000;
}
.pics {
  text-align: center
}
.pics img {
  margin: 10px;
  box-shadow: 0px 0px 12px 2px #696c4b;
  border-radius: 20px;
}
.step {
  display: none
}
.step:first-child {
  display: block
}
.question {
  text-align: center;
  padding: 10px 0 50px
}
.question h3 {
  font-size: 30px;
  font-weight: normal;
  margin-bottom: 25px;
}
.btn {
  min-width: 120px;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 30px;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  transition: all 0.1s ease 0s;
  background: #696c4b;
  margin: 5px;
  box-shadow: inset 0px -4px 1px rgba(0, 0, 0, 0.19), inset 0px 4px 1px rgba(255, 255, 255, .3);
}
.btn:hover {
  position: relative;
  background-color: #089182;
}
.final-step {
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: 30px;
  text-align: center
}
.final-step h3 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 15px;
  line-height: 1
}
.final-step ul {
  margin-bottom: 15px;
  text-align: left
}
.final-step ul li {
  font-size: 19px;
  margin-bottom: 5px;
  list-style: disc outside;
}
.terms {
  font-size: 14px;
  color: #b70000;
  margin-bottom: 15px;
}
@media (max-width: 770px) {
  body {
    font-size:18px
  }
  .pics img {
    width: 250px
  }
  .question h3 {
    font-size: 24px
  }
  .btn {
    font-size: 24px
  }
}
@media (max-width: 415px) {
  body {
    font-size:12px
  }
  .pics img {
    width: 130px;
    margin: 12px;
    border-width: 2px
  }
  .question h3 {
    font-size: 18px;
    margin-bottom: 10px
  }
  .final-step h3 {
    font-size: 18px
  }
  .final-step ul li {
    font-size: 12px
  }
  .terms {
    font-size: 11px
  }
}