@CHARSET "UTF-8";
@font-face {
    font-family: "InterstatePlBold";
    src: url("../fonts/interstatePlBold/InterstatePlBold.eot");
    src: url("../fonts/interstatePlBold/InterstatePlBold.eot") format("embedded-opentype"), url("../fonts/interstatePlBold/InterstatePlBold.woff2") format("woff2"), url("../fonts/interstatePlBold/InterstatePlBold.woff") format("woff"), url("../fonts/interstatePlBold/InterstatePlBold.ttf") format("truetype"), url("../fonts/interstatePlBold/InterstatePlBold.svg#InterstatePlBold") format("svg");
}

@font-face {
    font-family: "InterstatePlLight";
    src: url("../fonts/interstatePlLight/InterstatePlLight.eot");
    src: url("../fonts/interstatePlLight/InterstatePlLight.eot") format("embedded-opentype"), url("../fonts/interstatePlLight/InterstatePlLight.woff2") format("woff2"), url("../fonts/interstatePlLight/InterstatePlLight.woff") format("woff"), url("../fonts/interstatePlLight/InterstatePlLight.ttf") format("truetype"), url("../fonts/interstatePlLight/InterstatePlLight.svg#InterstatePlLight") format("svg");
}

@font-face {
    font-family: "InterstatePlRegular";
    src: url("../fonts/interstatePlRegular/InterstatePlRegular.eot");
    src: url("../fonts/interstatePlRegular/InterstatePlRegular.eot") format("embedded-opentype"), url("../fonts/interstatePlRegular/InterstatePlRegular.woff2") format("woff2"), url("../fonts/interstatePlRegular/InterstatePlRegular.woff") format("woff"), url("../fonts/interstatePlRegular/InterstatePlRegular.ttf") format("truetype"), url("../fonts/interstatePlRegular/InterstatePlRegular.svg#InterstatePlRegular") format("svg");
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "InterstatePlRegular";
    background: #00bdf2;
    overflow-x: hidden;
}

.btn:hover, .answer:hover {
    transform: scale(1.1);
}

.sms {
  display: none;
}

body>.background {
    background: url('../img/background.png') no-repeat;
    background-size: cover;
}

.container {
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -ms-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
}

.transition {
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -ms-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
}

.questions-indicators {
    z-index: 9999;
    top: 50%;
    transform: translateY(-50%);
    right: 40px;
    z-index: 99;
}

.questions-indicators li.active {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
}

.questions-indicators li.active .thinking {
    opacity: 1 !important;
    animation: thinking .7s ease-in-out infinite alternate;
    -webkit-animation: thinking .7s ease-in-out infinite alternate;
}

.questions-indicators li.active .yellow {
    opacity: 1 !important;
}

.questions-indicators li.active .white, .questions-indicators li.correct .white, .questions-indicators li.incorrect .white {
    opacity: 0 !important;
}

.questions-indicators li.active span, .questions-indicators li.correct span, .questions-indicators li.incorrect span {
    color: #ffffff;
}

.questions-indicators li.correct .green {
    opacity: 1 !important;
}

.questions-indicators li.incorrect .red {
    opacity: 1 !important;
}

.questions-indicators li {
    width: 31px;
    height: 46px;
    font-size: 14px;
}

.questions-indicators span {
    color: #2C3674;
    z-index: 1;
}

.questions-indicators div:not(:last-child) {
    height: 37px;
    opacity: 0;
}

.questions-indicators .show {
    opacity: 1 !important;
}

.questions-indicators div:last-child {
    width: 17px;
    height: 9px;
    top: initial;
    left: 50%;
    margin-left: -9px;
    bottom: 0;
}

.questions-indicators .thinking {
    width: 60px;
    height: 50px !important;
    margin-left: -15px;
    margin-top: -19px;
    background: url("../img/question-indicator/thinking.svg") no-repeat;
}

.questions-indicators .white {
    opacity: 1 !important;
    background: url("../img/question-indicator/white.svg") no-repeat;
}

.questions-indicators .green {
    background: url("../img/question-indicator/green.svg") no-repeat;
}

.questions-indicators .red {
    background: url("../img/question-indicator/red.svg") no-repeat;
}

.questions-indicators .yellow {
    background: url("../img/question-indicator/yellow.svg") no-repeat;
}

.questions-indicators .down {
    background: url("../img/question-indicator/down.svg") no-repeat;
}

.background {
    pointer-events: none;
    background-size: cover !important;
}

#start {
    font-family: "InterstatePlBold";
}

#start .background {
    background: url("../img/questions-backgrounds/1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain!important;
}

#start h2 {
    font-size: 48px;
}

#start h3 {
    font-size: 32px;
}

#start .gear {
    width: 75px;
    left: 30%;
    margin-top: 28px;
}

#start .padlock {
    width: 90px;
    left: 70%;
}

#question-1 .background {
    background: url("../img/questions-backgrounds/2.png") no-repeat;
}

.btn {
    width: 205px;
    height: 42px;
    display: block;
}

.modal {
    color: #000000;
}

.modal-content {
    border: none;
    border-radius: 0;
    background: none;
}

.modal-header, .modal-body {
    text-align: center;
    background: #ffffff;
    border-radius: 0;
    border: 0;
}

.modal-header {
    padding-top: 40px;
}

.modal-header h4 {
    font-size: 20px;
}

.modal-body {
    font-family: "InterstatePlLight", sans-serif;
    padding-bottom: 40px;
}

.btn {
    border: 0;
    border-radius: 0;
}

.btn>span, button {
    padding: 10px 0 7px 0;
    background: #ffa202;
}

.wrong {
    color: #b25063;
}

.correct {
    color: #4bb261;
}

.btn:not(button)::before {
    width: 205px;
    height: 45px;
    background: url('../img/shadows/btn.svg') no-repeat;
    content: "";
    position: absolute;
    top: 3px;
    left: 7px;
}

.question>div {
    font-size: 22px;
}

.question {
    margin-top: 200px;
    height: 125px;
    color: #000000;
}

.question .d-table-cell {
    z-index: 1;
}

.question::before {
    width: 100%;
    height: 100%;
    background: url('../img/shadows/question.svg') no-repeat;
    background-size: cover;
    content: "";
    position: absolute;
    top: 10px;
    left: 15px;
}

.question-numer {
    width: 220px;
    height: 54px;
    top: -27px;
    position: absolute;
    text-transform: uppercase;
    color: #ffffff;
    background: url('../img/shadows/question-number.svg') no-repeat;
    line-height: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.answer {
    cursor: pointer;
}

.answer .label {
    width: 90px;
    height: 45px;
    top: 18px;
    z-index: 1;
}

.answer .label>div:first-child {
    font-size: 35px;
    font-family: "InterstatePlBold";
    background: #5790DD;
    line-height: 45px;
    z-index: 1;
}

.answer .label::after {
    width: 100%;
    height: 100%;
    background: url('../img/shadows/answer-label.svg') no-repeat;
    background-size: cover;
    content: "";
    position: absolute;
    top: 5px;
    left: 6px;
}

#question-1 .content {
    width: 405px;
    height: 95px;
    margin-left: 15px;
}

#question-2 .content {
    width: 345px;
    height: 171px;
    margin-left: 15px;
}

#question-3 .content {
    width: 405px;
    height: 203px;
    margin-left: 15px;
}

#question-4 .content {
    width: 405px;
    height: 83px;
    margin-left: 15px;
}

#question-5 .content {
    width: 485px;
    height: 133px;
    margin-left: 15px;
}

#question-6 .content {
    width: 340px;
    height: 124px;
    margin-left: 15px;
}

.tip {
    height: 159px;
    width: 287px;
    z-index: 999;
    background: url("../img/tip.svg") no-repeat;
    background-size: contain;
    padding: 15px 15px 15px 50px;
    position: absolute;
    margin-left: -60px;
    margin-top: -10px;
    font-size: 13px !important;
    font-family: "InterstatePlRegular", sans-serif;
}

.tip span {
  color: #0000cc;
  text-decoration: underline;
}

#question-7 .content {
    width: 340px;
    height: 124px;
    margin-left: 15px;
}

#question-8 .content {
    width: 340px;
    height: 150px;
    margin-left: 15px;
}

#question-9 .content {
    width: 340px;
    height: 151px;
    margin-left: 15px;
}

#question-9 .tip {
    margin-left: -42px;
    margin-top: 7px;
}

.answer .select-border {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    border: 0 solid #FFA202;
}

.shadow {
    text-shadow: 0px 0px 1px rgba(0, 0, 0, .6);
}

.answer.selected .label>div {
    background: #FFA202;
}

.answer.selected .select-border {
    border: 5px solid #FFA202;
}

.transition {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

div[class*="col"] {
    z-index: 10;
}

/* ANIMATIONS */

#question-1 .background{
    background: url("../img/questions-backgrounds/2.png") no-repeat;
}

#question-1 .padlock {
    width: 75px;
    right: 20%;
    top:30%;
}

#question-1 .padlock_small {
    width: 35px;
    left: 26%;
    top: 56%;
}

#question-1 .padlock_blue {
    width: 100px;
    left: 20%;
    top:20%;
    animation-delay: 500ms;
    z-index: 8;
}

#question-1 .padlock_blue_small {
    width: 20px;
    left: 29%;
    bottom:40%;
    animation-delay: 1s;
}

#question-1 .gear {
    width: 75px;
    left: 20%;
    margin-top:100px;
    opacity: .8;
}

#question-1 .gear2 {
    width: 300px;
    right: 15%;
}

#question-1 .gear3 {
    top: 60%;
    width: 55px;
    left: 55%;
    opacity: .6;
}

#question-2 .background{
    background: url("../img/questions-backgrounds/3.png") no-repeat;
}

#question-2 .at {
    height: 80vh;
    pointer-events: none;
}

#question-2 .at {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: fixed;
}

#question-2 .gear{
    width: 75px;
    left: 25%;
    top: 67.5%;
}

#question-2 .gear2{
    width: 100px;
    right: 10%;
    top: 45%;
}

#question-3 .background{
    background: url("../img/questions-backgrounds/4.png") no-repeat;
}

#question-3 .gear{
    width: 75px;
    left: 25%;
    top: 67.5%;
}

#question-3 .gear2{
    width: 100px;
    right: 15%;
    top: 55%;
}

#question-3 .phone {
    width: 135px;
    left: 15%;
    top:30%;
}

#question-3 .phone2 {
    width: 75px;
    right: 20%;
    top:20%;
    animation-delay: 500ms;
}

#question-4 .background{
    background: url("../img/questions-backgrounds/5.png") no-repeat;
}

#question-4 .qm {
    width: 150px;
    left: 25%;
    top:55%;
    opacity: .5;
}

#question-4 .qm2 {
    width: 32px;
    left: 18%;
    top:40%;
    animation-delay: 740ms;
}

#question-4 .qm3 {
    width: 20px;
    left: 10%;
    top:35%;
    animation-delay: 800ms;
}

#question-4 .qm4 {
    width: 48px;
    left: 20%;
    top:18%;
    animation-delay: 1200ms;
}

#question-4 .qm5 {
    width: 132px;
    right: 15%;
    top:20%;
    animation-delay: 900ms;
}

#question-4 .qm6 {
    width: 40px;
    right: 30%;
    top:10%;
    animation-delay: 1600ms;
}

#question-4 .qm7 {
    width: 40px;
    right: 35%;
    bottom:40%;
    animation-delay: 2000ms;
}

#question-4 .qm8 {
    width: 30px;
    left: 40%;
    top:15%;
    animation-delay: 2100ms;
}

#question-4 .qm9 {
    width: 30px;
    left: 10%;
    bottom:30%;
    animation-delay: 240ms;
}

#question-4 .qm10 {
    width: 30px;
    right: 15%;
    bottom:35%;
    animation-delay: 3500ms;
}

#question-4 .gear {
    width: 100px;
    right: 30%;
    top: 67%;
}

#question-5 .background{
    background: url("../img/questions-backgrounds/6.png") no-repeat;
}

#question-5 .gear {
    width: 100px;
    right: 20%;
    top: 66%;
}

#question-5 .envelope {
    width: 120px;
    right: 15%;
    top: 20%;
}

#question-5 .message {
    width: 90px;
    left: 20%;
    top: 30%;
}

#question-6 .background{
    background: url("../img/questions-backgrounds/7.png") no-repeat;
}

#question-6 .gear {
    width: 100px;
    left: 8%;
    bottom: 29%;
}

#question-6 .gear2 {
    width: 500px;
    right: 20%;
    top: 35%;
    pointer-events: none;
}

#question-6 .card1 {
    width: 100px;
    right: 20%;
    top: 20%;
    animation-delay: 240ms;
}

#question-6 .card2 {
    width: 300px;
    left: 25%;
    top: 15%;
    opacity: .8;
}

#question-7 .background{
    background: url("../img/questions-backgrounds/8.png") no-repeat;
}

#question-7 .gear {
    width: 100px;
    right: 18%;
    top: 24%;
}

#question-7 .gear2 {
    width: 140px;
    left: 20%;
    bottom: 35%;
}

#question-7 .laptop {
    width: 160px;
    right: 25%;
    bottom: 24%;
}

#question-8 .background{
    background: url("../img/questions-backgrounds/9.png") no-repeat;
}

#question-8 .gear {
    width: 100px;
    right: 18%;
    bottom: 24%;
}

#question-8 .gear2 {
    width: 40px;
    right: 21.3%;
    top: 20%;
}

#question-8 .numbers {
    width: 100px;
    left: 20%;
    top: 30%;
}

#question-9 .background{
    background: url("../img/questions-backgrounds/10.png") no-repeat;
}

#question-9 .gear {
    width: 100px;
    left: 20%;
    bottom: 30%;
}

#question-9 .shield {
    width: 100px;
    right: 10%;
    top: 30%;
}

#question-9 .shield_white {
    width: 100px;
    left: 20%;
    top: 20%;
}

#score .background{
    background: url("../img/questions-backgrounds/11.png") no-repeat;
}

#score p, #score a {
    text-transform: none;
}

#score a {
    color: #ffffff;
    text-decoration: underline;
}

#score .score {
    font-size: 94px;
}

#score p.about {
    font-size: 14px;
}

#score .tryagain {
    font-size: 24px;
    cursor: pointer;
}

#score .padlock{
    width: 90px;
    left: 25%;
}

#score .gear{
    width: 75px;
    left: 70%;
    margin-top:28px;
}

.rack {
    height: 130vh;
    transform-origin: center;
    -webkit-animation: rotating 10s linear infinite;
    -moz-animation: rotating 10s linear infinite;
    -ms-animation: rotating 10s linear infinite;
    -o-animation: rotating 10s linear infinite;
    animation: rotating 10s linear infinite;
}

.oposite {
    -webkit-animation: rotating-o 10s linear infinite;
    -moz-animation: rotating-o 10s linear infinite;
    -ms-animation: rotating-o 10s linear infinite;
    -o-animation: rotating-o 10s linear infinite;
    animation: rotating-o 10s linear infinite;
}

.big_rack, .mid_rack, .small_rack {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
}

.mid {
    height: 61.5vh;
}

.small {
    height: 29vh;
    -webkit-animation: rotating 10s linear infinite;
    -moz-animation: rotating 10s linear infinite;
    -ms-animation: rotating 10s linear infinite;
    -o-animation: rotating 10s linear infinite;
    animation: rotating 10s linear infinite;
}

.info{
    width: 300px;
    line-height: 15px;
}

.btn-fade{
    opacity: 0;
}

@keyframes thinking {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        transform: scale(.8);
        -webkit-transform: scale(.8);
    }
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating-o {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@keyframes rotating-o {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) {

  #start h2 {
    font-size: 28px;
  }

  #start h3, .question > div {
    font-size: 16px;
  }

  #question-1 .content,
  #question-2 .content,
  #question-3 .content,
  #question-4 .content,
  #question-5 .content,
  #question-6 .content,
  #question-7 .content,
  #question-8 .content,
  #question-9 .content {
      width: 300px;
      height: auto;
      margin-left: 15px;
  }

  #question-1 .gear2,
  #question-1 .gear,
  #question-6 .gear2,
  #question-4 .gear,
  #start .big_rack,
  #start .mid_rack,
  #start .small_rack,
  #question-1 .padlock_blue_small,
  .tip {
    display: none;
  }

  .question {
    margin-top: 60px;
  }

  .container {
    position: relative;
    z-index: 500;
  }

  .sms {
    display: block;
  }

}