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

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

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

@font-face {
  font-family: 'Exo_bold';
  font-weight: bold;
  src: url("../fonts/Exo2-Bold.ttf"); }

@font-face {
  font-family: 'Exo_regular';
  font-weight: normal;
  src: url("../fonts/Exo2-Medium.ttf"); }

@font-face {
  font-family: 'Exo_light';
  font-weight: lighter;
  src: url("../fonts/Exo2-Light.ttf"); }

body {
  width: 100%; }
  body button {
    outline: 0; }

#modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5) no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  z-index: 10; }
  #modal .message {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    height: auto;
    width: auto;
    background: #fff;
    padding: 10px;
    border: 5px solid #ccc;
    -webkit-border-radius: 10px;
            border-radius: 10px; }
    #modal .message span {
      font-size: 20px;
      float: right;
      margin: 5px;
      color: #000;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s; }
    #modal .message span:hover {
      color: red;
      -webkit-transform: scale(1.3);
          -ms-transform: scale(1.3);
              transform: scale(1.3);
      -webkit-transition: all .2s;
      -o-transition: all .2s;
      transition: all .2s; }
    #modal .message h1 {
      font-family: Exo_bold;
      font-size: 40px;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 30px; }
    #modal .message p {
      font-family: 'Exo_regular';
      font-size: 20px; }
    #modal .message #result {
      font-family: 'Exo_regular';
      font-size: 40px; }
    #modal .message #message-length {
      font-family: 'Exo_regular';
      font-size: 40px; }
    #modal .message button {
      font-family: 'Exo_bold';
      font-size: 14px;
      color: #000;
      background: #11dce0;
      border: 5px solid black;
      -webkit-border-radius: 10px;
              border-radius: 10px;
      height: 50px;
      width: 150px;
      margin-top: 10px; }

.instruct {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7) no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  z-index: 10; }
  .instruct .message {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    height: auto;
    width: auto;
    background: #fff;
    padding: 10px;
    border: 5px solid #ccc;
    -webkit-border-radius: 10px;
            border-radius: 10px; }
  .instruct button {
    font-family: 'Exo_bold';
    font-size: 14px;
    color: #000;
    background: #11dce0;
    border: 5px solid black;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    height: 50px;
    width: 150px;
    margin-top: 10px;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s; }
  .instruct h1 {
    font-family: Exo_bold;
    font-size: 30px;
    color: #333; }
  .instruct p {
    font-family: Exo_regular;
    font-size: 20px;
    color: #000; }

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 99; }
  #preloader .dws-progress-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
    #preloader .dws-progress-bar .progress-percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      color: #2af7eb;
      font-size: 50px;
      font-weight: bold; }

header {
  position: relative;
  height: 100vh;
  background: url("../img/space.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  z-index: 0;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; }
  header .begining h1 {
    font-family: 'LobsterRegular';
    font-size: 70px;
    color: #11dce0;
    margin-top: 15vh;
    -webkit-animation: slideInUp 2s;
            animation: slideInUp 2s;
    -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s; }
  header .begining p {
    display: none;
    font-family: 'Pacifico-Regular';
    font-size: 30px;
    letter-spacing: 2px;
    color: #fff;
    margin-top: 10vh; }
  header .begining button {
    display: block;
    background: transparent;
    color: #fff;
    border: 5px solid #fff;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    padding: 20px;
    font-family: 'GloriaHallelujah';
    font-size: 30px;
    margin-top: 10vh;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
  header .begining button:hover {
    background: #fff;
    color: #000;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
  header .testing {
    display: none; }
    header .testing .question {
      width: 100%;
      -webkit-border-radius: 10px;
              border-radius: 10px;
      height: auto;
      width: 100%;
      margin-top: 10vh;
      margin-bottom: 5vh;
      overflow: hidden;
      background: #fff; }
      header .testing .question h3 {
        font-family: 'Exo_bold';
        font-size: 50px;
        font-weight: bold;
        color: #000;
        margin-top: 0;
        padding-top: 10px;
        padding-bottom: 10px; }
    header .testing button {
      background: transparent;
      border: 5px solid #fff;
      font-family: 'Exo_regular', Verdana, san-serif;
      font-size: 24px;
      color: #fff;
      -webkit-border-radius: 10px;
              border-radius: 10px;
      width: 100%;
      height: 10vh;
      margin-top: 5vh;
      text-shadow: 1px 0 2px #999;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s; }
    header .testing button:hover {
      background: #fff;
      color: #000;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s; }
    header .testing button:hover {
      background: transparent;
      color: #fff;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s; }
  header .aftertest {
    display: none;
    overflow: hidden; }
    header .aftertest-item {
      margin-top: 0;
      opacity: 1;
      -webkit-transition: all 1s ease-out;
      -o-transition: all 1s ease-out;
      transition: all 1s ease-out; }
      header .aftertest-item h1 {
        font-family: 'LobsterRegular';
        font-size: 70px;
        color: #11dce0; }
      header .aftertest-item span {
        font-size: 50px;
        display: block;
        text-align: center;
        color: #fff;
        margin-top: 0;
        opacity: 0;
        -webkit-transition: all .5s ease-in;
        -o-transition: all .5s ease-in;
        transition: all .5s ease-in; }

.tolearn {
  display: none; }
  .tolearn .skyeng {
    margin-bottom: 100px; }
  .tolearn h1 {
    font-family: 'LobsterRegular';
    font-size: 70px;
    margin-bottom: 50px; }
  .tolearn h2 {
    font-family: 'LobsterRegular';
    font-size: 50px; }
  .tolearn p {
    font-family: 'Pacifico-Regular';
    font-size: 25px; }
  .tolearn .duo img {
    max-height: 400px;
    max-width: 320px;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: -webkit-transform .2s ease-out;
    -o-transition: transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
  .tolearn .duo img:hover {
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-transition: -webkit-transform .5s ease-in;
    transition: -webkit-transform .5s ease-in;
    -o-transition: transform .5s ease-in;
    transition: transform .5s ease-in;
    transition: transform .5s ease-in, -webkit-transform .5s ease-in; }
  .tolearn .videowraper {
    margin-top: 10%;
    position: relative;
    padding-bottom: 51.25%;
    padding-top: 25px;
    height: 0;
    -webkit-perspective: 300px;
            perspective: 300px; }
    .tolearn .videowraper iframe {
      position: absolute;
      top: 0;
      left: -150%;
      height: 100%;
      width: 100%;
      -webkit-box-shadow: 3px 3px 20px 5px #000;
              box-shadow: 3px 3px 20px 5px #000;
      -webkit-transform: rotate3d(2, 8, 1, 0deg);
              transform: rotate3d(2, 8, 1, 0deg);
      -webkit-transition: all 1s ease-out;
      -o-transition: all 1s ease-out;
      transition: all 1s ease-out; }
    .tolearn .videowraper iframe:hover {
      -webkit-transition: -webkit-transform .5s ease-in;
      transition: -webkit-transform .5s ease-in;
      -o-transition: transform .5s ease-in;
      transition: transform .5s ease-in;
      transition: transform .5s ease-in, -webkit-transform .5s ease-in; }
  .tolearn .downloads {
    text-align: center;
    margin-bottom: 50px; }
    .tolearn .downloads a {
      position: relative;
      display: inline-block;
      height: 128px;
      width: 128px; }
    .tolearn .downloads .winds {
      margin-left: -40vw;
      opacity: 0; }
    .tolearn .downloads .itunes {
      opacity: 0; }
    .tolearn .downloads .android {
      position: absolute;
      top: 40vh;
      left: 0;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      opacity: 0;
      z-index: 0; }
    .tolearn .downloads img {
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      -webkit-transition: -webkit-transform .3s ease-out;
      transition: -webkit-transform .3s ease-out;
      -o-transition: transform .3s ease-out;
      transition: transform .3s ease-out;
      transition: transform .3s ease-out, -webkit-transform .3s ease-out; }
    .tolearn .downloads img:hover {
      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
              transform: scale(1.1);
      -webkit-transition: -webkit-transform .5s ease-in;
      transition: -webkit-transform .5s ease-in;
      -o-transition: transform .5s ease-in;
      transition: transform .5s ease-in;
      transition: transform .5s ease-in, -webkit-transform .5s ease-in; }
    .tolearn .downloads .android:hover {
      -webkit-transform: translateY(-50%) scale(1.1);
          -ms-transform: translateY(-50%) scale(1.1);
              transform: translateY(-50%) scale(1.1);
      -webkit-transition: -webkit-transform .5s ease-in;
      transition: -webkit-transform .5s ease-in;
      -o-transition: transform .5s ease-in;
      transition: transform .5s ease-in;
      transition: transform .5s ease-in, -webkit-transform .5s ease-in; }

.fenglish {
  background-image: -webkit-linear-gradient(135deg, transparent 50%, #F1D0CB 50%, #F1D0CB 60%, transparent 60%), -webkit-linear-gradient(135deg, #F1D0CB 10%, transparent 10%);
  background-image: -o-linear-gradient(135deg, transparent 50%, #F1D0CB 50%, #F1D0CB 60%, transparent 60%), -o-linear-gradient(135deg, #F1D0CB 10%, transparent 10%);
  background-image: linear-gradient(-45deg, transparent 50%, #F1D0CB 50%, #F1D0CB 60%, transparent 60%), linear-gradient(-45deg, #F1D0CB 10%, transparent 10%);
  background-color: #FCFAFB;
  -webkit-background-size: 1em 1em;
          background-size: 1em 1em;
  padding-bottom: 50px; }
  .fenglish a {
    display: block; }
  .fenglish img:hover {
    -webkit-animation: flash 1s;
            animation: flash 1s; }
  .fenglish h2 {
    font-family: 'LobsterRegular';
    font-size: 50px; }
  .fenglish p {
    font-family: 'Pacifico-Regular';
    font-size: 25px; }
  .fenglish img {
    margin-top: 50px;
    height: 200px;
    max-width: 300px; }

footer {
  padding-top: 10%;
  padding-bottom: 10%;
  background: #000; }
  footer h1 {
    font-family: 'LobsterRegular';
    font-size: 60px;
    color: #11dce0; }
  footer p {
    font-family: 'Pacifico-Regular';
    font-size: 20px;
    color: #aaa; }
  footer .center-block {
    height: 50px;
    width: 200px; }
    footer .center-block span {
      color: #fff;
      font-size: 50px;
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      -webkit-transition: all .2s ease-out;
      -o-transition: all .2s ease-out;
      transition: all .2s ease-out; }
    footer .center-block span:hover {
      color: #e2b216;
      font-size: 50px;
      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
              transform: scale(1.1);
      -webkit-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
      transition: all .3s ease-in; }

@-webkit-keyframes spinn {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  20% {
    -webkit-transform: rotate(72deg);
            transform: rotate(72deg); }
  40% {
    -webkit-transform: rotate(144deg);
            transform: rotate(144deg); }
  60% {
    -webkit-transform: rotate(216deg);
            transform: rotate(216deg); }
  80% {
    -webkit-transform: rotate(288deg);
            transform: rotate(288deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes spinn {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  20% {
    -webkit-transform: rotate(72deg);
            transform: rotate(72deg); }
  40% {
    -webkit-transform: rotate(144deg);
            transform: rotate(144deg); }
  60% {
    -webkit-transform: rotate(216deg);
            transform: rotate(216deg); }
  80% {
    -webkit-transform: rotate(288deg);
            transform: rotate(288deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }