/* line 5, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

/* line 22, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1; }

/* line 24, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none; }

/* line 26, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* line 28, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

/* line 30, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none; }
  /* line 103, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

/* line 32, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none; }

/* line 116, ../../../../../Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

/* line 7, scss/partials/_main.scss */
html, body {
  margin: 0;
  width: 100%;
  height: 100%; }

/* line 14, scss/partials/_main.scss */
body {
  background-color: #000;
  font-family: "Ubuntu", sans-serif;
  color: #fff;
  font-size: 30px;
  line-height: 30px;
  font-weight: 300;
  overflow-x: hidden; }
  @media only screen and (max-width: 500px) {
    /* line 14, scss/partials/_main.scss */
    body {
      font-size: 16px; } }

/* line 32, scss/partials/_main.scss */
.hide {
  display: none; }

/* line 35, scss/partials/_main.scss */
strong, b, h1, h2, h3, h4, h5 {
  font-weight: 700; }

/* line 37, scss/partials/_main.scss */
.f-light {
  font-weight: 300; }

/* line 38, scss/partials/_main.scss */
.f-light-italic {
  font-weight: 300;
  font-style: italic; }

/* line 39, scss/partials/_main.scss */
.f-regular {
  font-weight: 400; }

/* line 40, scss/partials/_main.scss */
.f-medium {
  font-weight: 500; }

/* line 41, scss/partials/_main.scss */
.f-bold {
  font-weight: 700; }

/* line 43, scss/partials/_main.scss */
.f-left {
  float: left; }

/* line 44, scss/partials/_main.scss */
.f-right {
  float: right; }

/* line 45, scss/partials/_main.scss */
sup {
  font-size: 10px !important;
  line-height: 10px; }

/* line 47, scss/partials/_main.scss */
a {
  color: #fff;
  text-decoration: none; }
  /* line 51, scss/partials/_main.scss */
  a:hover {
    color: #fff; }

/* line 54, scss/partials/_main.scss */
h1 {
  font-size: 2em;
  margin-top: 0;
  font-weight: 700; }

/* line 59, scss/partials/_main.scss */
input {
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
  text-align: center;
  font-size: 32px;
  line-height: 32px;
  display: block;
  padding: 10px 0;
  width: 100%;
  border-radius: 50px;
  border: 0;
  color: #65655d; }
  @media only screen and (max-width: 600px) {
    /* line 59, scss/partials/_main.scss */
    input {
      font-size: 20px;
      line-height: 20px; } }

/* line 81, scss/partials/_main.scss */
label.error {
  display: none !important; }

/* line 82, scss/partials/_main.scss */
input.error, textarea.error {
  background: #ed1c24;
  color: #fff; }

/* line 88, scss/partials/_main.scss */
button {
  border: 0 !important;
  cursor: pointer; }

/* line 90, scss/partials/_main.scss */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #65655d;
  opacity: 1 !important; }

/* line 95, scss/partials/_main.scss */
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #65655d;
  opacity: 1 !important; }

/* line 100, scss/partials/_main.scss */
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #65655d;
  opacity: 1 !important; }

/* line 105, scss/partials/_main.scss */
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #65655d;
  opacity: 1 !important; }

/* line 111, scss/partials/_main.scss */
input.error::-webkit-input-placeholder, textarea.error::-webkit-input-placeholder {
  color: #fff;
  opacity: 1 !important; }

/* line 116, scss/partials/_main.scss */
input.error:-moz-placeholder, textarea.error:-moz-placeholder {
  color: #fff;
  opacity: 1 !important; }

/* line 121, scss/partials/_main.scss */
input.error::-moz-placeholder, textarea.error::-moz-placeholder {
  color: #fff;
  opacity: 1 !important; }

/* line 126, scss/partials/_main.scss */
input.error:-ms-input-placeholder, textarea.error:-ms-input-placeholder {
  color: #fff;
  opacity: 1 !important; }

/* line 131, scss/partials/_main.scss */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* line 138, scss/partials/_main.scss */
header.top-header {
  width: 100%;
  height: 60px;
  background-color: #ff7212;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999; }

/* line 151, scss/partials/_main.scss */
.middle {
  padding: 120px 0 0 0;
  position: relative;
  text-align: center; }

/* line 158, scss/partials/_main.scss */
.tit-course {
  width: 472px;
  height: 55px;
  background: url(../img/tit-english-course.png) no-repeat;
  display: block;
  margin: 0 auto;
  text-indent: -99999px; }
  @media only screen and (max-width: 600px) {
    /* line 158, scss/partials/_main.scss */
    .tit-course {
      width: 300px;
      height: 35px;
      background-size: 300px 35px; } }

/* line 175, scss/partials/_main.scss */
#feed {
  width: 100%;
  height: 100%;
  background: url(../img/bg-feed.jpg) no-repeat center center;
  background-size: cover; }
  /* line 182, scss/partials/_main.scss */
  #feed .txt1 {
    font-size: 36px;
    line-height: 40px;
    padding: 40px 0 0 0;
    text-transform: uppercase; }
  /* line 190, scss/partials/_main.scss */
  #feed .txt2 {
    font-size: 40px;
    line-height: 44px;
    padding: 80px 0 50px; }
  /* line 197, scss/partials/_main.scss */
  #feed .form {
    margin: 0 10%; }
    /* line 201, scss/partials/_main.scss */
    #feed .form .line {
      margin-bottom: 40px; }
    /* line 203, scss/partials/_main.scss */
    #feed .form .send-button {
      display: block;
      background-color: #ff7212;
      border-radius: 50px;
      padding: 15px 0;
      text-align: center; }
  @media only screen and (max-width: 600px) {
    /* line 215, scss/partials/_main.scss */
    #feed .txt1 {
      font-size: 20px;
      line-height: 24px;
      padding: 40px 10px 0 10px; }
    /* line 222, scss/partials/_main.scss */
    #feed .txt2 {
      font-size: 22px;
      line-height: 26px;
      padding: 40px 0 50px; }
    /* line 231, scss/partials/_main.scss */
    #feed .form .send-button {
      padding: 10px 0; } }
  @media only screen and (max-width: 800px) and (max-height: 800px) {
    /* line 175, scss/partials/_main.scss */
    #feed {
      height: auto;
      padding-bottom: 50px; } }

/* line 247, scss/partials/_main.scss */
#quizz {
  width: 100%;
  height: 100%;
  display: none; }
  /* line 253, scss/partials/_main.scss */
  #quizz .question {
    padding: 50px 10% 0 10%; }
    /* line 257, scss/partials/_main.scss */
    #quizz .question .tit {
      font-size: 30px;
      line-height: 34px; }
    /* line 259, scss/partials/_main.scss */
    #quizz .question .answers {
      padding: 40px 0;
      width: 100%; }
      /* line 264, scss/partials/_main.scss */
      #quizz .question .answers li {
        margin: 20px 0; }
        /* line 268, scss/partials/_main.scss */
        #quizz .question .answers li a {
          border: 1px solid #fff;
          font-size: 26px;
          line-height: 26px;
          border-radius: 50px;
          padding: 15px 30px;
          display: block;
          font-weight: 400;
          display: block;
          text-align: left;
          cursor: pointer; }
          /* line 281, scss/partials/_main.scss */
          #quizz .question .answers li a.wrong {
            border: 1px solid #ed1c24;
            background: #ed1c24 url(../img/ico-wrong.png) no-repeat 96% center; }
          /* line 287, scss/partials/_main.scss */
          #quizz .question .answers li a.success {
            border: 1px solid #39b54a;
            background: #39b54a url(../img/ico-success.png) no-repeat 96% center; }
          /* line 293, scss/partials/_main.scss */
          #quizz .question .answers li a.checked {
            background: url(../img/ico-success.png) no-repeat 96% center; }
    /* line 301, scss/partials/_main.scss */
    #quizz .question .buttons {
      width: 100%;
      display: flex;
      justify-content: space-between; }
      /* line 307, scss/partials/_main.scss */
      #quizz .question .buttons a {
        display: block;
        background-color: #57bab1;
        font-size: 26px;
        line-height: 26px;
        border-radius: 50px;
        padding: 15px 0;
        width: 40%;
        font-weight: 500; }
        /* line 318, scss/partials/_main.scss */
        #quizz .question .buttons a img {
          width: 40px;
          height: 40px; }
        /* line 320, scss/partials/_main.scss */
        #quizz .question .buttons a.loading {
          padding: 5px 0; }
  /* line 325, scss/partials/_main.scss */
  #quizz.bg-1 {
    background: url(../img/backgrounds/bg-1.jpg) no-repeat center top;
    background-size: cover; }
  /* line 326, scss/partials/_main.scss */
  #quizz.bg-2 {
    background: url(../img/backgrounds/bg-2.jpg) no-repeat center top;
    background-size: cover; }
  /* line 327, scss/partials/_main.scss */
  #quizz.bg-3 {
    background: url(../img/backgrounds/bg-3.jpg) no-repeat center top;
    background-size: cover; }
  /* line 328, scss/partials/_main.scss */
  #quizz.bg-4 {
    background: url(../img/backgrounds/bg-4.jpg) no-repeat center top;
    background-size: cover; }
  /* line 329, scss/partials/_main.scss */
  #quizz.bg-5 {
    background: url(../img/backgrounds/bg-5.jpg) no-repeat center top;
    background-size: cover; }
  /* line 330, scss/partials/_main.scss */
  #quizz.bg-6 {
    background: url(../img/backgrounds/bg-6.jpg) no-repeat center top;
    background-size: cover; }
  /* line 331, scss/partials/_main.scss */
  #quizz.bg-7 {
    background: url(../img/backgrounds/bg-7.jpg) no-repeat center top;
    background-size: cover; }
  /* line 332, scss/partials/_main.scss */
  #quizz.bg-8 {
    background: url(../img/backgrounds/bg-8.jpg) no-repeat center top;
    background-size: cover; }
  /* line 333, scss/partials/_main.scss */
  #quizz.bg-9 {
    background: url(../img/backgrounds/bg-9.jpg) no-repeat center top;
    background-size: cover; }
  /* line 334, scss/partials/_main.scss */
  #quizz.bg-10 {
    background: url(../img/backgrounds/bg-10.jpg) no-repeat center top;
    background-size: cover; }
  @media only screen and (max-width: 600px) {
    /* line 338, scss/partials/_main.scss */
    #quizz .question {
      padding: 50px 20px 0 20px; }
      /* line 341, scss/partials/_main.scss */
      #quizz .question .tit {
        font-size: 22px;
        line-height: 26px; }
      /* line 345, scss/partials/_main.scss */
      #quizz .question .answers li {
        margin: 20px 0; }
        /* line 349, scss/partials/_main.scss */
        #quizz .question .answers li a {
          font-size: 16px;
          line-height: 16px; }
          /* line 353, scss/partials/_main.scss */
          #quizz .question .answers li a.checked, #quizz .question .answers li a.success {
            background-size: 18px 14px; }
          /* line 354, scss/partials/_main.scss */
          #quizz .question .answers li a.wrong {
            background-size: 18px 18px; }
      /* line 361, scss/partials/_main.scss */
      #quizz .question .buttons a {
        font-size: 18px;
        line-height: 22px;
        padding: 10px 0; } }
  @media only screen and (max-width: 800px) and (max-height: 800px) {
    /* line 247, scss/partials/_main.scss */
    #quizz {
      height: auto;
      padding-bottom: 50px; } }

/* line 378, scss/partials/_main.scss */
#response {
  width: 100%;
  height: 100%; }
  /* line 383, scss/partials/_main.scss */
  #response .content {
    width: 100%;
    height: 100%; }
    /* line 388, scss/partials/_main.scss */
    #response .content .title {
      font-size: 72px;
      line-height: 70px;
      padding: 30px 0 30px; }
    /* line 389, scss/partials/_main.scss */
    #response .content .text {
      font-size: 30px;
      line-height: 38px;
      padding: 0 5% 50px 5%; }
    /* line 391, scss/partials/_main.scss */
    #response .content .restart-button {
      width: 250px;
      display: block;
      background-color: #ff7212;
      border-radius: 40px;
      padding: 10px 0;
      text-align: center;
      margin: 20px auto 0; }
    /* line 402, scss/partials/_main.scss */
    #response .content.response1 {
      background: url(../img/bg-response-1.jpg) no-repeat center top;
      background-size: cover; }
    /* line 403, scss/partials/_main.scss */
    #response .content.response2 {
      background: url(../img/bg-response-2.jpg) no-repeat center top;
      background-size: cover; }
    /* line 404, scss/partials/_main.scss */
    #response .content.response3 {
      background: url(../img/bg-response-3.jpg) no-repeat center top;
      background-size: cover; }
      /* line 406, scss/partials/_main.scss */
      #response .content.response3 .title {
        font-size: 70px;
        line-height: 73px;
        padding: 30px 5% 30px 5%; }
        /* line 410, scss/partials/_main.scss */
        #response .content.response3 .title .small {
          font-size: 50px;
          line-height: 50px;
          display: block;
          padding-top: 20px; }
  @media only screen and (max-width: 600px) {
    /* line 421, scss/partials/_main.scss */
    #response .content .title {
      font-size: 70px;
      line-height: 70px;
      padding: 50px 0 30px; }
    /* line 422, scss/partials/_main.scss */
    #response .content .text {
      font-size: 20px;
      line-height: 24px;
      padding: 0 5% 50px 5%; }
    /* line 424, scss/partials/_main.scss */
    #response .content .smile {
      width: 150px;
      height: auto; }
    /* line 432, scss/partials/_main.scss */
    #response .content.response3 .title {
      font-size: 80px;
      line-height: 80px;
      padding: 60px 20px 30px 20px; }
      /* line 436, scss/partials/_main.scss */
      #response .content.response3 .title .small {
        font-size: 35px;
        line-height: 38px;
        display: block;
        padding-top: 20px; } }
  @media only screen and (max-width: 800px) and (max-height: 800px) {
    /* line 378, scss/partials/_main.scss */
    #response {
      height: auto; }
      /* line 445, scss/partials/_main.scss */
      #response .content {
        padding-bottom: 50px; } }

/* line 449, scss/partials/_main.scss */
#quizz .question .answers li a.wrong {
  background: #ed1c24 url(../img/ico-wrong.png) no-repeat 96% center !important; }

/* line 453, scss/partials/_main.scss */
#quizz .question .answers li a.checked {
  box-shadow: inset 0px 0px 0px 3px yellow !important;
  border-color: yellow; }

/* line 458, scss/partials/_main.scss */
#quizz .question .answers li a.checked.success {
  background-color: #39b54a !important; }

@media only screen and (max-width: 767px) {
  /* line 466, scss/partials/_main.scss */
  #feed .form .line {
    margin-bottom: 20px; } }