@font-face {

  font-family: 'latobold';

  src: url("../fonts/lato-bold-webfont.woff2") format("woff2"), url("../fonts/lato-bold-webfont.woff") format("woff");

  font-weight: normal;

  font-style: normal; }

@font-face {

  font-family: 'latolight';

  src: url("../fonts/lato-light-webfont.woff2") format("woff2"), url("../fonts/lato-light-webfont.woff") format("woff");

  font-weight: normal;

  font-style: normal; }

@font-face {

  font-family: 'latoregular';

  src: url("../fonts/lato-regular-webfont.woff2") format("woff2"), url("../fonts/lato-regular-webfont.woff") format("woff");

  font-weight: normal;

  font-style: normal; }

body {

  font-family: 'latoregular', sans-serif; }



.section-logo {

  background: #ffffff;

  padding-top: 25px; }



.all-section.step1 .section-spinner {

  height: 0; }

  .all-section.step1 .section-spinner .container-spinner {

    max-width: 0;

    opacity: 0;

    visibility: hidden; }

.all-section.step1 .section-result {

  opacity: 0;

  visibility: hidden; }

.all-section.step2 .section-spinner {

  height: 870px; }

  .all-section.step2 .section-spinner .container-spinner {

    max-width: 550px;

    height: 750px; }

    .all-section.step2 .section-spinner .container-spinner .box-spinner {

      max-width: 500px; }

      .all-section.step2 .section-spinner .container-spinner .box-spinner:after {

        position: absolute;

        content: '';

        width: 29px;

        height: 83px;

        bottom: -100px;

        left: 49%;

        background: url("../img/arrow.png") no-repeat;

        background-size: 100%;

        background-position: center center;

        opacity: 1;

        visibility: visible;

        -webkit-transition: all 2s ease-in-out;

        -moz-transition: all 2s ease-in-out;

        -o-transition: all 2s ease-in-out;

        transition: all 2s ease-in-out; }

.all-section.demo-start-spinner .section-spinner .container-spinner .box-spinner .spinner {

  -webkit-animation: spinnerdemo 2s linear infinite;

  -moz-animation: spinnerdemo 2s linear infinite;

  -ms-animation: spinnerdemo 2s linear infinite;

  -o-animation: spinnerdemo 2s linear infinite;

  animation: spinnerdemo 2s linear infinite; }



.all-section {

  max-width: 800px;

  width: 100%;

  height: 1366px;

  margin: 0 auto;

  background: #691832;

  overflow: hidden;

  min-height: 1100px;

  -webkit-transition: all 0.5s ease-out;

  -moz-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out; }

  .all-section .section-spinner {

    max-width: 800px;

    width: 100%;

    height: 950px;

    margin: 0 auto;

    margin-top: -5px;

    background: url("../img/bgf-light.png") no-repeat;

    background-size: 100%;

    background-position: center bottom;

    -webkit-transition: all 1s ease-in-out;

    -moz-transition: all 1s ease-in-out;

    -o-transition: all 1s ease-in-out;

    transition: all 1s ease-in-out; }

    .all-section .section-spinner .container-spinner {

      opacity: 1;

      visibility: visible;

      position: relative;

      max-width: 740px;

      width: 100%;

      height: 880px;

      background: url("../img/bg-spinner.png") no-repeat;

      background-position: center center;

      background-size: 100%;

      margin: 0 auto;

      -webkit-transition: all 1s ease-in-out;

      -moz-transition: all 1s ease-in-out;

      -o-transition: all 1s ease-in-out;

      transition: all 1s ease-in-out; }

      .all-section .section-spinner .container-spinner .box-spinner {

        position: absolute;

        transform: translate(-50%, -50%);

        top: 50%;

        left: 50%;

        max-width: 650px;

        width: 100%;

        height: 650px;

        margin: 0 auto;

        -webkit-transition: all 1s ease-out;

        -moz-transition: all 1s ease-out;

        -o-transition: all 1s ease-out;

        transition: all 1s ease-out; }

        .all-section .section-spinner .container-spinner .box-spinner:after {

          opacity: 0;

          visibility: hidden;

          height: 0;

          width: 0;

          -webkit-transition: all 1s ease;

          -moz-transition: all 1s ease;

          -o-transition: all 1s ease;

          transition: all 1s ease; }

        .all-section .section-spinner .container-spinner .box-spinner .spinner {

          display: block;

          max-width: 650px;

          width: 100%;

          height: 650px;

          margin: 0 auto;

          background: url("../img/spinner.png") no-repeat;

          background-size: 100%;

          background-position: center center;

          -webkit-transition: all 0.5s ease-out;

          -moz-transition: all 0.5s ease-out;

          -o-transition: all 0.5s ease-out;

          transition: all 0.5s ease-out; }

          .all-section .section-spinner .container-spinner .box-spinner .spinner.play-spinner {

            -webkit-animation: spinner 4s ease-out infinite;

            -moz-animation: spinner 4s ease-out infinite;

            -ms-animation: spinner 4s ease-out infinite;

            -o-animation: spinner 4s ease-out infinite;

            animation: spinner 4s ease-out infinite; }

          .all-section .section-spinner .container-spinner .box-spinner .spinner.stop-spinner {

            -webkit-transform: rotate(180deg);

            -moz-transform: rotate(180deg);

            -ms-transform: rotate(180deg);

            -o-transform: rotate(180deg);

            transform: rotate(180deg); }

  .all-section .container-result {

    visibility: hidden;

    opacity: 0;

    height: 0px;

    padding: 0 5px;

    -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out; }

    .all-section .container-result.active-result {

      visibility: visible;

      opacity: 1;

      height: auto;

      -webkit-transition: all 2s ease-out;

      -moz-transition: all 2s ease-out;

      -o-transition: all 2s ease-out;

      transition: all 2s ease-out; }

    .all-section .container-result .subtitle,

    .all-section .container-result a {

      font-size: 20px;

      text-align: center;

      color: #ffffff; }

    .all-section .container-result .title {

      color: #ffffff;

      font-size: 60px;

      text-align: center;

      font-family: 'latobold', sans-serif; }

    .all-section .container-result .subtitle span {

      font-family: 'latolight', sans-serif; }



@media screen and (max-width: 800px) {

  .section-logo {

    background: #ffffff;

    padding-top: 25px; }



  .all-section.step1 .section-spinner {

    height: 0; }

    .all-section.step1 .section-spinner .container-spinner {

      max-width: 0;

      opacity: 0;

      visibility: hidden; }

  .all-section.step1 .section-result {

    opacity: 0;

    visibility: hidden; }

  .all-section.step2 .section-spinner {

    height: 870px; }

    .all-section.step2 .section-spinner .container-spinner {

      max-width: 550px;

      height: 750px; }

      .all-section.step2 .section-spinner .container-spinner .box-spinner {

        max-width: 500px; }

        .all-section.step2 .section-spinner .container-spinner .box-spinner:after {

          position: absolute;

          content: '';

          width: 29px;

          height: 83px;

          bottom: -100px;

          left: 49%;

          background: url("../img/arrow.png") no-repeat;

          background-size: 100%;

          background-position: center center;

          opacity: 1;

          visibility: visible;

          -webkit-transition: all 2s ease-in-out;

          -moz-transition: all 2s ease-in-out;

          -o-transition: all 2s ease-in-out;

          transition: all 2s ease-in-out; }

  .all-section.demo-start-spinner .section-spinner .container-spinner .box-spinner .spinner {

    -webkit-animation: spinnerdemo 2s linear infinite;

    -moz-animation: spinnerdemo 2s linear infinite;

    -ms-animation: spinnerdemo 2s linear infinite;

    -o-animation: spinnerdemo 2s linear infinite;

    animation: spinnerdemo 2s linear infinite; }



  .all-section {

    max-width: 800px;

    width: 100%;

    height: 1366px;

    margin: 0 auto;

    background: #691832;

    overflow: hidden;

    min-height: 1100px;

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease-out;

    -o-transition: all 0.5s ease-out;

    transition: all 0.5s ease-out; }

    .all-section .section-spinner {

      max-width: 800px;

      width: 100%;

      height: 950px;

      margin: 0 auto;

      margin-top: -5px;

      background: url("../img/bgf-light.png") no-repeat;

      background-size: 100%;

      background-position: center bottom;

      -webkit-transition: all 1s ease-in-out;

      -moz-transition: all 1s ease-in-out;

      -o-transition: all 1s ease-in-out;

      transition: all 1s ease-in-out; }

      .all-section .section-spinner .container-spinner {

        opacity: 1;

        visibility: visible;

        position: relative;

        max-width: 740px;

        width: 100%;

        height: 880px;

        background: url("../img/bg-spinner.png") no-repeat;

        background-position: center center;

        background-size: 100%;

        margin: 0 auto;

        -webkit-transition: all 1s ease-in-out;

        -moz-transition: all 1s ease-in-out;

        -o-transition: all 1s ease-in-out;

        transition: all 1s ease-in-out; }

        .all-section .section-spinner .container-spinner .box-spinner {

          position: absolute;

          transform: translate(-50%, -50%);

          top: 50%;

          left: 50%;

          max-width: 650px;

          width: 100%;

          height: 650px;

          margin: 0 auto;

          -webkit-transition: all 1s ease-out;

          -moz-transition: all 1s ease-out;

          -o-transition: all 1s ease-out;

          transition: all 1s ease-out; }

          .all-section .section-spinner .container-spinner .box-spinner:after {

            opacity: 0;

            visibility: hidden;

            height: 0;

            width: 0;

            -webkit-transition: all 1s ease;

            -moz-transition: all 1s ease;

            -o-transition: all 1s ease;

            transition: all 1s ease; }

          .all-section .section-spinner .container-spinner .box-spinner .spinner {

            display: block;

            max-width: 650px;

            width: 100%;

            height: 650px;

            margin: 0 auto;

            background: url("../img/spinner.png") no-repeat;

            background-size: 100%;

            background-position: center center;

            -webkit-transition: all 0.5s ease-out;

            -moz-transition: all 0.5s ease-out;

            -o-transition: all 0.5s ease-out;

            transition: all 0.5s ease-out; }

            .all-section .section-spinner .container-spinner .box-spinner .spinner.play-spinner {

              -webkit-animation: spinner 4s ease-out infinite;

              -moz-animation: spinner 4s ease-out infinite;

              -ms-animation: spinner 4s ease-out infinite;

              -o-animation: spinner 4s ease-out infinite;

              animation: spinner 4s ease-out infinite; }

            .all-section .section-spinner .container-spinner .box-spinner .spinner.stop-spinner {

              -webkit-transform: rotate(180deg);

              -moz-transform: rotate(180deg);

              -ms-transform: rotate(180deg);

              -o-transform: rotate(180deg);

              transform: rotate(180deg); }

    .all-section .container-result {

      visibility: hidden;

      opacity: 0;

      height: 0px;

      padding: 0 5px;

      -webkit-transition: all 0.3s ease-out;

      -moz-transition: all 0.3s ease-out;

      -o-transition: all 0.3s ease-out;

      transition: all 0.3s ease-out; }

      .all-section .container-result.active-result {

        visibility: visible;

        opacity: 1;

        height: auto;

        -webkit-transition: all 2s ease-out;

        -moz-transition: all 2s ease-out;

        -o-transition: all 2s ease-out;

        transition: all 2s ease-out; }

      .all-section .container-result .subtitle,

      .all-section .container-result a {

        font-size: 20px;

        text-align: center;

        color: #ffffff; }

      .all-section .container-result .title {

        color: #ffffff;

        font-size: 60px;

        text-align: center;

        font-family: 'latobold', sans-serif; }

      .all-section .container-result .subtitle span {

        font-family: 'latolight', sans-serif; } }

@media screen and (max-width: 768px) {

  .section-logo {

    background: #ffffff;

    padding-top: 25px; }



  .all-section.step1 .section-spinner {

    height: 0; }

    .all-section.step1 .section-spinner .container-spinner {

      max-width: 0;

      opacity: 0;

      visibility: hidden; }

  .all-section.step1 .section-result {

    opacity: 0;

    visibility: hidden; }

  .all-section.step2 .section-spinner {

    height: 630px; }

    .all-section.step2 .section-spinner .container-spinner {

      max-width: 430px;

      height: 475px; }

      .all-section.step2 .section-spinner .container-spinner .box-spinner {

        max-width: 500px; }

        .all-section.step2 .section-spinner .container-spinner .box-spinner:after {

          position: absolute;

          content: '';

          width: 20px;

          height: 50px;

          bottom: 0px;

          left: 49%;

          background: url("../img/arrow.png") no-repeat;

          background-size: 100%;

          background-position: center center;

          opacity: 1;

          visibility: visible;

          -webkit-transition: all 2s ease-in-out;

          -moz-transition: all 2s ease-in-out;

          -o-transition: all 2s ease-in-out;

          transition: all 2s ease-in-out; }

  .all-section.demo-start-spinner .section-spinner .container-spinner .box-spinner .spinner {

    -webkit-animation: spinnerdemo 2s linear infinite;

    -moz-animation: spinnerdemo 2s linear infinite;

    -ms-animation: spinnerdemo 2s linear infinite;

    -o-animation: spinnerdemo 2s linear infinite;

    animation: spinnerdemo 2s linear infinite; }



  .all-section {

    max-width: 768px;

    width: 100%;

    height: 1366px;

    margin: 0 auto;

    min-height: 800px;

    background: #691832;

    overflow: hidden;

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease-out;

    -o-transition: all 0.5s ease-out;

    transition: all 0.5s ease-out; }

    .all-section .section-spinner {

      max-width: 768px;

      width: 100%;

      height: 700px;

      margin: 0 auto;

      margin-top: -5px;

      background: url("../img/bgf-light.png") no-repeat;

      background-size: 100%;

      background-position: center bottom;

      -webkit-transition: all 1s ease-in-out;

      -moz-transition: all 1s ease-in-out;

      -o-transition: all 1s ease-in-out;

      transition: all 1s ease-in-out; }

      .all-section .section-spinner .container-spinner {

        opacity: 1;

        visibility: visible;

        position: relative;

        max-width: 490px;

        width: 100%;

        height: 550px;

        background: url("../img/bg-spinner.png") no-repeat;

        background-position: center center;

        background-size: 100%;

        margin: 0 auto;

        -webkit-transition: all 1s ease-in-out;

        -moz-transition: all 1s ease-in-out;

        -o-transition: all 1s ease-in-out;

        transition: all 1s ease-in-out; }

        .all-section .section-spinner .container-spinner .box-spinner {

          position: absolute;

          transform: translate(-50%, -50%);

          top: 50%;

          left: 50%;

          max-width: 555px;

          width: 100%;

          height: 650px;

          margin: 0 auto;

          -webkit-transition: all 1s ease-out;

          -moz-transition: all 1s ease-out;

          -o-transition: all 1s ease-out;

          transition: all 1s ease-out; }

          .all-section .section-spinner .container-spinner .box-spinner:after {

            opacity: 0;

            visibility: hidden;

            height: 0;

            width: 0;

            -webkit-transition: all 1s ease;

            -moz-transition: all 1s ease;

            -o-transition: all 1s ease;

            transition: all 1s ease; }

          .all-section .section-spinner .container-spinner .box-spinner .spinner {

            display: block;

            max-width: 650px;

            width: 100%;

            height: 650px;

            margin: 0 auto;

            background: url("../img/spinner.png") no-repeat;

            background-size: 100%;

            background-position: center center;

            -webkit-transition: all 0.5s ease-out;

            -moz-transition: all 0.5s ease-out;

            -o-transition: all 0.5s ease-out;

            transition: all 0.5s ease-out; }

            .all-section .section-spinner .container-spinner .box-spinner .spinner.play-spinner {

              -webkit-animation: spinner 4s ease-out infinite;

              -moz-animation: spinner 4s ease-out infinite;

              -ms-animation: spinner 4s ease-out infinite;

              -o-animation: spinner 4s ease-out infinite;

              animation: spinner 4s ease-out infinite; }

            .all-section .section-spinner .container-spinner .box-spinner .spinner.stop-spinner {

              -webkit-transform: rotate(180deg);

              -moz-transform: rotate(180deg);

              -ms-transform: rotate(180deg);

              -o-transform: rotate(180deg);

              transform: rotate(180deg); }

    .all-section .container-result {

      visibility: hidden;

      opacity: 0;

      height: 0px;

      padding: 0 5px;

      -webkit-transition: all 0.3s ease-out;

      -moz-transition: all 0.3s ease-out;

      -o-transition: all 0.3s ease-out;

      transition: all 0.3s ease-out; }

      .all-section .container-result.active-result {

        visibility: visible;

        opacity: 1;

        height: auto;

        -webkit-transition: all 2s ease-out;

        -moz-transition: all 2s ease-out;

        -o-transition: all 2s ease-out;

        transition: all 2s ease-out; }

      .all-section .container-result .subtitle,

      .all-section .container-result a {

        font-size: 20px;

        text-align: center;

        color: #ffffff; }

      .all-section .container-result .title {

        color: #ffffff;

        font-size: 60px;

        text-align: center;

        font-family: 'latobold', sans-serif; }

      .all-section .container-result .subtitle span {

        font-family: 'latolight', sans-serif; } }

@keyframes spinner {

  from {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg); }

  to {

    -webkit-transform: rotate(3600deg);

    -moz-transform: rotate(3600deg);

    -ms-transform: rotate(3600deg);

    -o-transform: rotate(3780deg);

    transform: rotate(3780deg); } }

@keyframes spinnerdemo {

  from {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg); }

  to {

    -webkit-transform: rotate(3600deg);

    -moz-transform: rotate(3600deg);

    -ms-transform: rotate(3600deg);

    -o-transform: rotate(3600deg);

    transform: rotate(3600deg); } }



/*# sourceMappingURL=local.css.map */