@font-face {
  font-family: 'tt_supermolot_condensedBlkIt';
  src: url("../css/fonts/typetype_-_ttsupermolotcondensed-blackitalic-webfont.woff2") format("woff2"), url("../css/fonts/typetype_-_ttsupermolotcondensed-blackitalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tt_supermolot_condensedBdIt';
  src: url("../css/fonts/typetype_-_ttsupermolotcondensed-bolditalic-webfont.woff2") format("woff2"), url("../css/fonts/typetype_-_ttsupermolotcondensed-bolditalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
.hide {
  display: none;
}

html, body, #page-wrap, #preloader {
  overflow: hidden;
  height: 746px;
}

body {
  background: url(../assets/images/background.jpg) no-repeat scroll bottom center #40b4e4;
  background-size: cover;
}

#page-wrap {
  background: url(../assets/images/background.png) no-repeat scroll bottom center transparent;
  background-size: cover;
  position: relative;
}

#game {
  background: url(../assets/images/DTX10_Aristo_Rat.png) no-repeat scroll 95% 70% transparent;
  background-size: auto 65%;
  position: relative;
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}
#preloader {
  position: absolute;
  z-index: 9;
  width: 100%;
  margin: 0 auto;
  transition: all 500ms ease-in-out;
  opacity: 1;
}
#preloader.hidden {
  opacity: 0;
}
#preloader.hide {
  display: none;
}

.preloader {
  position: relative;
  width: 100%;
  height: 100%;
}

.preloader-light {
  opacity: 0;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.preloader-light-4 {
  background-image: url(../assets/images/lights-4.png);
}

.preloader-light-3 {
  background-image: url(../assets/images/lights-3.png);
}

.preloader-light-2 {
  background-image: url(../assets/images/lights-2.png);
}

.preloader-light-1 {
  background-image: url(../assets/images/lights-1.png);
}

.preloaded .preloader-light-4 {
  animation: 2000ms ease-in-out 400ms lights infinite forwards;
}

.preloaded .preloader-light-3 {
  animation: 2000ms ease-in-out 300ms lights infinite forwards;
}

.preloaded .preloader-light-2 {
  animation: 2000ms ease-in-out 200ms lights infinite forwards;
}

.preloaded .preloader-light-1 {
  animation: 2000ms ease-in-out 100ms lights infinite forwards;
}

.loaded .preloader-light {
  opacity: 1 !important;
}

.start-collections li.item0 {
  animation-delay: .1s;
}

.start-collections li.item1 {
  animation-delay: .3s;
}

.start-collections li.item2 {
  animation-delay: .6s;
}

.start-collections li.item3 {
  animation-delay: .9s;
}

.start-collections li.item4 {
  animation-delay: 1.2s;
}

.start-collections li.item5 {
  animation-delay: 1.5s;
}

.start-collections li.item6 {
  animation-delay: 1.8s;
}

.start-collections li.item7 {
  animation-delay: 2.1s;
}

.start-collections li.item8 {
  animation-delay: 2.4s;
}

.start-collections li.item9 {
  animation-delay: 2.7s;
}

@keyframes loading {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lights {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.preloader-icon {
  width: 109px;
  height: 18px;
  background: url(../assets/images/Elipse.png) no-repeat scroll 12px 0 transparent;
  position: absolute;
  z-index: 1;
  bottom: 70px;
  left: 50%;
  margin-left: -54px;
  padding-top: 100px;
  opacity: 0;
  transition: all 500ms ease-in-out;
}
.preloader-icon::before {
  content: " ";
  opacity: 0;
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 32px;
  width: 45px;
  height: 26px;
  background: url(../assets/images/arrow.png) no-repeat scroll 0 0 transparent;
}
.preloader-icon::after {
  content: " ";
  opacity: 0;
  position: absolute;
  z-index: 3;
  top: 36px;
  left: 32px;
  width: 45px;
  height: 26px;
  background: url(../assets/images/arrow.png) no-repeat scroll 0 0 transparent;
}
.preloader-icon span {
  background: url(../assets/images/CARGANDO.png) no-repeat scroll 50% 50% transparent;
  width: 109px;
  height: 18px;
  display: block;
  overflow: hidden;
  text-indent: -999px;
}

.preloaded .preloader-icon {
  opacity: 1;
}

.preloaded .preloader-icon::before {
  animation: 2000ms ease-in-out 200ms lights infinite forwards;
}

.preloaded .preloader-icon::after {
  animation: 2000ms ease-in-out 100ms lights infinite forwards;
}

.preloaded .preloader-icon span {
  animation: 2000ms ease-in-out loading infinite;
}

.start-jump {
  width: 1101px;
  height: 557px;
  display: block;
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-left: -354px;
  top: 15%;
}
.start-jump > div {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.start-jump .start-splash_1 {
  background: url(../assets/images/splash_1.png) no-repeat scroll 0 0 transparent;
  z-index: 10;
  animation-name: bounceInLeft;
  animation-iteration-count: 1;
  animation-duration: 1500ms;
  animation-delay: 0;
  animation-fill-mode: forwards;
}
.start-jump .start-splash_2 {
  background: url(../assets/images/splash_2.png) no-repeat scroll 0 0 transparent;
  z-index: 8;
  animation-name: bounceInLeft;
  animation-iteration-count: 1;
  animation-duration: 1500ms;
  animation-delay: 500ms;
  animation-fill-mode: forwards;
}
.start-jump .start-splash_3 {
  background: url(../assets/images/splash_3.png) no-repeat scroll 0 0 transparent;
  z-index: 9;
  animation-name: bounceInLeft;
  animation-iteration-count: 1;
  animation-duration: 1500ms;
  animation-delay: 1000ms;
  animation-fill-mode: forwards;
}
.start-jump .start-splash_4 {
  background: url(../assets/images/splash_4.png) no-repeat scroll 0 0 transparent;
  z-index: 7;
  animation-name: flash;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-delay: 3000ms;
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 0;
  }
  25%, 75% {
    opacity: 1;
  }
}
.mainContainer {
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  position: absolute;
  z-index: 10;
}

#sectionContainer, .section-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.section-wrap {
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}

.section-loaded .section-wrap {
  opacity: 1;
}

.flickity-prev-next-button:disabled {
  opacity: 0;
}

.start {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  height: 100%;
}
.start .container {
  position: relative;
  height: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.start-collections {
  position: absolute;
  bottom: 30px;
  width: 50%;
  /* margin-left: -25%; */
  left: 25%;
  z-index: 9;
}
.start-collections ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  width: 100%;
}
.start-collections ul li {
  cursor: pointer;
  width: 10%;
  opacity: 0;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}
.start-collections ul img {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: auto;
}

.main-navigation {
  position: absolute;
  height: 58px;
  width: 950px;
  top: 0;
  z-index: 500;
  left: 50%;
  margin-left: -475px;
  transition: all 500ms ease-in-out;
}
.main-navigation::before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  right: -30px;
  width: 719px;
  height: 48px;
  background: url(../assets/images/menuContainer.png) no-repeat scroll 0 0 transparent;
}

.quiz {
  background: url(../assets/images/trivia/bg.png) no-repeat scroll 44% 56% transparent;
  background-size: auto 79%;
  position: absolute;
  z-index: 10;
  margin-left: -960px;
  top: 0;
  left: 50%;
  width: 1920px;
  height: 100%;
}

.speedway {
  content: " ";
  position: absolute;
  z-index: 1;
  top: -5%;
  left: 50%;
  width: 1920px;
  height: 384px;
  margin-left: -960px;
  background: url(../assets/images/trivia/speedway.png) no-repeat scroll 50% 0 transparent;
  background-size: auto 100%;
  opacity: 0;
}

.animate .speedway {
  animation: 600ms ease-in-out 600ms fadeIn 1 forwards;
}

.borderCont {
  content: " ";
  position: absolute;
  z-index: 2;
  bottom: 1.5%;
  margin-left: -495px;
  width: 1024px;
  left: 50%;
  height: 169px;
  background: url(../assets/images/trivia/borderCont.png) no-repeat scroll 50% 100% transparent;
  background-size: auto 100%;
  opacity: 0;
}

.animate .borderCont {
  animation: 2000ms ease-in-out 2800ms bounceIn 1 forwards;
}

.main-navigation-menu {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
.main-navigation-menu li {
  background-image: url(../assets/images/menu.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  float: right;
  width: 285px;
  padding: 0;
  height: 58px;
  cursor: pointer;
  margin-left: -70px;
  list-style: none;
  display: block;
  position: relative;
  transition: background-image 500ms ease-in-out;
}
.main-navigation-menu li.current {
  background-position: 0 100%;
}
.main-navigation-menu li.current a span {
  font-family: 'tt_supermolot_condensedBlkIt';
  font-weight: 900;
  color: #002857;
}
.main-navigation-menu li.current::before {
  opacity: 1;
}
.main-navigation-menu li:last-child {
  margin-left: 0;
}
.main-navigation-menu li a {
  text-decoration: none;
  padding-top: 14px;
  font-size: 23px;
  font-style: italic;
  text-align: center;
  line-height: 43px;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.main-navigation-menu li a span {
  font-family: 'tt_supermolot_condensedBdIt';
  color: #fff;
  font-weight: 700;
}
.main-navigation-menu li:hover {
  animation: 1200ms ease-in-out tada 1;
}
.main-navigation-menu li:hover a {
  animation: 600ms ease-in-out 1200ms pulse infinite;
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.question .quiz-options::before {
  content: " ";
  position: absolute;
  z-index: 22;
  top: 60%;
  left: 50%;
  width: 123px;
  height: 117px;
  margin-left: -61px;
  margin-top: -59px;
  background-image: url(../assets/images/trivia/vs.png);
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  opacity: 0;
  animation: 1000ms ease-in-out 1000ms bounceIn 1 forwards;
}

.quiz-options {
  width: 100%;
  height: 65%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
}
.quiz-options .option {
  display: block;
  width: 50%;
  position: relative;
  height: 100%;
  transition: all 400ms ease-in-out;
  animation: 1000ms ease-in-out 400ms bounceInRight 1;
}
.quiz-options .option:first-child {
  animation: 1000ms ease-in-out 400ms bounceInLeft 1;
}
.quiz-options .option:first-child > img {
  left: initial;
  right: 15%;
}
.quiz-options .option::after {
  background: url(../assets/images/trivia/select.png) no-repeat scroll 50% 50% transparent;
  background-size: 100%;
  content: " ";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -6%;
  width: 115%;
  height: 100%;
  display: block;
  opacity: 0;
}
.quiz-options .option.option2::after {
  background: url(../assets/images/trivia/select2.png) no-repeat scroll 50% 50% transparent;
  background-size: 100%;
  left: initial;
  right: -6%;
}
.quiz-options .option.active::after {
  animation: 400ms ease-in-out bounceIn 1 forwards;
}
.quiz-options .option > img {
  position: absolute;
  top: 20%;
  left: 15%;
  width: auto;
  height: 65%;
  z-index: 101;
  display: block;
  cursor: pointer;
  /* transform: translateY(-50%); */
}
.quiz-options .option::before {
  content: " ";
  position: absolute;
  z-index: 22;
  bottom: 0;
  left: 6%;
  width: 69%;
  height: 0;
  padding-bottom: 13%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  display: block;
}

.quiz-options .option.street_beasts::before {
  background-image: url(../assets/images/trivia/collections/street_beasts/street_beasts.png);
}

.quiz-options .option.art_cars::before {
  background-image: url(../assets/images/trivia/collections/art_cars/art_cars.png);
}

.quiz-options .option.fright_cars::before {
  background-image: url(../assets/images/trivia/collections/fright_cars/fright_cars.png);
}

.quiz-options .option.legends_of_speed::before {
  background-image: url(../assets/images/trivia/collections/legends_of_speed/legends_of_speed.png);
}

.quiz-options .option.experimotors::before {
  background-image: url(../assets/images/trivia/collections/experimotors/experimotors.png);
}

.quiz-options .option.glow_wheels::before {
  background-image: url(../assets/images/trivia/collections/glow_wheels/glow_wheels.png);
}

.quiz-options .option.city_works::before {
  background-image: url(../assets/images/trivia/collections/city_works/city_works.png);
}

.quiz-options .option.rescue::before {
  background-image: url(../assets/images/trivia/collections/rescue/rescue.png);
}

.quiz-options .option.daredevils::before {
  background-image: url(../assets/images/trivia/collections/daredevils/daredevils.png);
}

.quiz-options .option.x_raycers::before {
  background-image: url(../assets/images/trivia/collections/x_raycers/x_raycers.png);
}

.quiz-wrap {
  width: 950px;
  height: 100%;
  position: absolute;
  padding-top: 115px;
  box-sizing: border-box;
  left: 50%;
  margin-left: -475px;
  z-index: 11;
}

.splash-text {
  width: 100%;
  height: 100%;
  background: url(../assets/images/trivia/title.png) no-repeat scroll 50% 45% transparent;
  background-size: 65%;
  opacity: 0;
}

.animate .splash-text {
  animation: 600ms ease-in-out 1200ms fadeIn 1 forwards;
}

.animate .btn-arrancar {
  animation: 1000ms ease-in-out 1800ms bounceInLeft 1 forwards;
}

.btn-arrancar {
  display: block;
  background: url(../assets/images/trivia/btnGo.png) no-repeat scroll 0 0 transparent;
  background-size: contain;
  position: absolute;
  top: 65%;
  left: 22%;
  width: 47%;
  height: auto;
  z-index: 11;
  opacity: 0;
  display: block;
  cursor: pointer;
  opacity: 0;
}
.btn-arrancar::before {
  content: " ";
  display: block;
  width: 100%;
  padding-bottom: 23%;
}
.btn-arrancar span {
  display: block;
  width: 49%;
  height: 44%;
  background: url(../assets/images/trivia/ARRANCAR.png) no-repeat scroll 0 0 transparent;
  background-size: contain;
  overflow: hidden;
  position: absolute;
  right: 11%;
  text-indent: -999px;
  top: 21%;
}
.btn-arrancar:hover span {
  animation: 800ms ease-in-out pulse infinite;
}

.quiz-single {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 1;
}
.quiz-single.ng-hide {
  opacity: 0;
}
.quiz-single.ng-hide-add, .quiz-single.ng-hide-remove {
  transition: opacity 400ms ease-in-out;
}
.quiz-single.ng-hide-remove-active {
  transition-delay: 400ms;
}
.quiz-single header {
  position: relative;
  width: 100%;
  padding-left: 29%;
  box-sizing: border-box;
  height: 20%;
  /* margin-top: 4%; */
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.quiz-single header h3 {
  color: #fff;
  font-size: 28px;
  line-height: 1.3;
  font-family: 'tt_supermolot_condensedBdIt';
  font-weight: 700;
  font-style: italic;
  margin: 0;
}
.quiz-single header span {
  background: #333e48;
  display: block;
  width: 70px;
  height: 70px;
  left: 18%;
  top: 50%;
  margin-top: -35px;
  border-radius: 50%;
  color: #fff;
  font-size: 40px;
  font-family: 'tt_supermolot_condensedBdIt';
  font-weight: 700;
  text-align: center;
  line-height: 70px;
  z-index: 1;
  position: absolute;
}

.quiz-single.result .preloader-icon {
  top: 40%;
  opacity: 1;
}
.quiz-single.result .preloader-icon::before {
  animation: 2000ms ease-in-out 200ms lights infinite forwards;
}
.quiz-single.result .preloader-icon::after {
  animation: 2000ms ease-in-out 100ms lights infinite forwards;
}
.quiz-single.result .preloader-icon span {
  animation: 2000ms ease-in-out loading infinite;
}
.quiz-single.result .result-h {
  opacity: 0;
}
.quiz-single.result header.quiz-result {
  padding-left: 40%;
}
.quiz-single.result header.quiz-result h4 {
  font-size: 40px;
  line-height: 1;
  margin: 0;
  color: #fff;
  font-family: 'tt_supermolot_condensedBdIt';
  font-weight: 700;
  font-style: italic;
}
.quiz-single.result header.quiz-result h5 {
  font-size: 20px;
  line-height: 1;
  margin: 0 0 5px 0;
  color: #fff;
  font-family: 'tt_supermolot_condensedBdIt';
  font-weight: 700;
  font-style: italic;
}
.quiz-single.result header.quiz-result::before {
  content: " ";
  position: absolute;
  z-index: 2;
  top: 15%;
  left: 35%;
  width: 30%;
  height: 0;
  padding-bottom: 10%;
  background-image: url(../assets/images/trivia/title.png);
  background-repeat: no-repeat;
  background-size: contain;
  transition: all  400ms ease-in-out;
}
.quiz-single.result .result-text {
  color: #fff;
  padding-left: 15%;
  padding-top: 10px;
  font-size: 28px;
  line-height: 1.3;
  font-family: 'tt_supermolot_condensedBdIt';
  font-weight: 700;
  font-style: italic;
  margin: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
}
.quiz-single.result .quiz-options {
  padding-top: 12%;
  box-sizing: border-box;
  position: relative;
  opacity: 0;
}
.quiz-single.result .quiz-options .option {
  padding: 0 6%;
  box-sizing: border-box;
}
.quiz-single.result .quiz-options .option::before {
  left: 9%;
  width: 63%;
}
.quiz-single.result .quiz-options:first-child .option {
  padding: 0 6% 0 8.42%;
}
.quiz-single.result .quiz-options::before {
  content: none;
  display: none;
}

.btn-collection-video {
  width: 16%;
  height: 0;
  padding-bottom: 13%;
  background: url(../assets/images/videos/ver_video.png) no-repeat scroll 0% 47% transparent;
  position: absolute;
  z-index: 23;
  box-sizing: border-box;
  bottom: 0;
  right: 14%;
  transition: background 500ms ease-in-out;
  display: block;
  background-size: contain;
}
.btn-collection-video:hover {
  background: url(../assets/images/videos/ver_video_hover.png) no-repeat scroll 0% 47% transparent;
  background-size: contain;
}

.quiz-single.result.show header.quiz-result::before {
  left: -5%;
}
.quiz-single.result.show .preloader-icon {
  display: none;
}
.quiz-single.result.show .result-h, .quiz-single.result.show .quiz-options {
  animation: 600ms ease-in-out 600ms fadeIn 1 forwards;
}

.quiz-single.result .quiz-options .option::after {
  content: none;
  display: none;
}

.quiz-collection-carousel {
  height: 75%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}
.quiz-collection-carousel .carousel-cell {
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
}
.quiz-collection-carousel .carousel-cell h3 {
  position: absolute;
  bottom: 0;
  z-index: 10;
  left: 0;
  display: block;
  text-align: center;
  color: #002857;
  font-size: 24px;
  font-style: italic;
  line-height: 1;
  padding: 0;
  width: 100%;
  font-family: 'tt_supermolot_condensedBdIt';
  font-weight: 700;
  margin: 0;
}
.quiz-collection-carousel .carousel-cell img {
  height: 87%;
  width: auto;
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 10;
}
.quiz-collection-carousel .flickity-prev-next-button {
  z-index: 999;
  width: 20px;
  height: 29px;
  background: none;
  border-radius: 0;
  padding: 0;
  top: 100%;
  transform: none;
  margin-top: -29px;
}
.quiz-collection-carousel .flickity-prev-next-button:disabled {
  opacity: 0.3;
}
.quiz-collection-carousel .flickity-prev-next-button:disabled::before {
  animation: none !important;
}
.quiz-collection-carousel .flickity-prev-next-button::before {
  content: " ";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/trivia/arrows.png);
  background-repeat: no-repeat;
  background-size: 200%;
}
.quiz-collection-carousel .flickity-prev-next-button:active, .quiz-collection-carousel .flickity-prev-next-button:focus {
  box-shadow: none;
  opacity: 1;
}
.quiz-collection-carousel .flickity-prev-next-button:hover::before {
  animation: 600ms ease-in-out pulse infinite;
}
.quiz-collection-carousel .flickity-prev-next-button svg {
  display: none;
}
.quiz-collection-carousel .flickity-prev-next-button.previous {
  left: 0;
}
.quiz-collection-carousel .flickity-prev-next-button.previous::before {
  background-position: 0 0;
}
.quiz-collection-carousel .flickity-prev-next-button.next {
  right: 0;
}
.quiz-collection-carousel .flickity-prev-next-button.next::before {
  background-position: 100% 0;
}

.buttons {
  position: absolute;
  bottom: 5%;
  width: 90%;
  left: 0;
  text-align: center;
}
.buttons a {
  display: inline-block;
  background: url(../assets/images/trivia/btnDown.png) no-repeat scroll 50% 50% transparent;
  width: 296px;
  height: 40px;
  color: #d1d5d8;
  font-size: 19px;
  font-weight: 900;
  text-align: center;
  line-height: 40px;
  font-family: 'tt_supermolot_condensedBlkIt';
  text-decoration: none;
}
.buttons a:hover {
  animation: 400ms ease-in-out pulse;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.15, 1.15, 1.15);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.preload .main-navigation-logo {
  width: 500px;
  height: 146px;
  top: 324px;
  left: 50%;
  margin-left: -250px;
}

.main-navigation-logo {
  width: 322px;
  height: 94px;
  position: absolute;
  left: -97px;
  top: 14px;
  z-index: 999;
  opacity: 1;
  transition: all 500ms ease-in-out;
}
.main-navigation-logo.bounceInDown {
  animation-name: bounceInDown;
  animation-iteration-count: 1;
  animation-duration: 2000ms;
  animation-delay: 0;
}
.main-navigation-logo.start-big {
  transform: scale(1.43) translateX(-14%) translateY(-95%);
}
.main-navigation-logo.start-big.final-top {
  transform: scale(0.65) translateX(-127%) translateY(-353%);
  cursor: pointer;
}

.collections-carousel {
  height: 85px;
  width: 716px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}
.collections-carousel .carousel-cell {
  width: 14.285%;
  height: 100%;
  text-align: center;
}
.collections-carousel .carousel-cell.current a {
  transform: scale(1.1);
}
.collections-carousel .carousel-cell a {
  width: 100%;
  height: 100%;
  display: block;
  transition: all 400ms ease-in-out;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-flow: row nowrap;
}
.collections-carousel .carousel-cell a:hover {
  transform: scale(1.1);
}
.collections-carousel .carousel-cell img {
  width: 90%;
  height: auto;
  display: inline-block;
  /* position: absolute; */
  object-fit: contain;
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translateY(-50%) translateX(-50%); */
}
.collections-carousel .flickity-prev-next-button {
  width: 37px;
  height: 40px;
  background: none;
  border-radius: 0;
  padding: 0;
}
.collections-carousel .flickity-prev-next-button:disabled {
  opacity: 0.3;
}
.collections-carousel .flickity-prev-next-button:disabled::before {
  animation: none !important;
}
.collections-carousel .flickity-prev-next-button::before {
  content: " ";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/videos/arrows.png);
  background-repeat: no-repeat;
  background-size: 200%;
}
.collections-carousel .flickity-prev-next-button:active, .collections-carousel .flickity-prev-next-button:focus {
  box-shadow: none;
  opacity: 1;
}
.collections-carousel .flickity-prev-next-button:hover::before {
  animation: 600ms ease-in-out pulse infinite;
}
.collections-carousel .flickity-prev-next-button svg {
  display: none;
}
.collections-carousel .flickity-prev-next-button.previous {
  left: -80px;
}
.collections-carousel .flickity-prev-next-button.previous::before {
  background-position: 0 0;
}
.collections-carousel .flickity-prev-next-button.next {
  right: -80px;
}
.collections-carousel .flickity-prev-next-button.next::before {
  background-position: 100% 0;
}

.collections-wrap {
  position: absolute;
  bottom: 15px;
  padding-bottom: 24px;
  left: 0;
  z-index: 9;
  width: 100%;
  background: url(../assets/images/videos/text.png) no-repeat scroll bottom center transparent;
}

.video-wrap {
  width: 860px;
  position: absolute;
  left: 50%;
  margin-left: -430px;
  top: 70px;
  z-index: 300;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  padding: 5px;
  background: #0d4786;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.game-wrap {
  width: 1100px;
  height: 609px;
  position: absolute;
  left: 50%;
  margin-left: -550px;
  top: 85px;
  z-index: 300;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  padding: 5px;
}
.game-wrap iframe {
  background: #000;
  width: 100%;
  height: 100%;
}

.hidden {
  opacity: 0;
}

.tooltipster-sidetip .tooltipster-box {
  background: #000;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #000;
}

.tooltipster-sidetip .tooltipster-content {
  color: #fff;
  font-size: 18px;
  font-family: 'tt_supermolot_condensedBdIt';
  font-weight: 700;
  font-style: italic;
}

.main-navigation-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  background: url(../assets/images/menuContainerMobile.jpg) no-repeat scroll 50% 50% #fff;
  background-size: cover;
}
.main-navigation-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 10%;
  padding-right: 5%;
}
.main-navigation-mobile ul li {
  width: 30%;
  height: 70%;
  display: block;
}
.main-navigation-mobile ul li a {
  display: block;
  height: 100%;
  text-align: center;
  width: 100%;
}
.main-navigation-mobile ul li img {
  display: inline-block;
  height: 100%;
}

.menu-mobile-toggle {
  display: none;
  background: url(../assets/images/iconMenu.png) no-repeat scroll 100% 0% transparent;
  background-size: contain;
  position: absolute;
  z-index: 310;
  top: 20px;
  right: 0%;
  width: 10%;
  /* opacity: 0; */
  height: auto;
  position: absolute;
}
.menu-mobile-toggle.close {
  background-image: url(../assets/images/iconMenuClose.png);
}
.menu-mobile-toggle::before {
  content: " ";
  display: block;
  padding-bottom: 44%;
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#confirmationModal {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 40;
  left: 0;
  top: 0;
}
#confirmationModal.ng-hide {
  opacity: 0;
}
#confirmationModal.ng-hide-add, #confirmationModal.ng-hide-remove {
  transition: opacity 400ms ease-in-out;
}
#confirmationModal.ng-hide-remove-active {
  transition-delay: 400ms;
}
#confirmationModal .modal-wrap {
  background: url(../assets/images/popupBg.png) no-repeat scroll 50% 50% transparent;
  background-size: contain;
  width: 88%;
  max-width: 100%;
  height: 66%;
  position: absolute;
  left: 6%;
  top: 17%;
  z-index: 41;
  opacity: 0;
  animation: 600ms ease-in-out 1200ms jackInTheBox 1 forwards;
}
#confirmationModal .modal-wrap h2 {
  font-family: 'tt_supermolot_condensedBdIt';
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  display: block;
  margin: 0;
  padding-top: 7%;
  text-align: center;
  font-style: italic;
}
#confirmationModal .modal-wrap h3 {
  font-family: 'tt_supermolot_condensedBdIt';
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  display: block;
  margin: 0;
  text-align: center;
  font-style: italic;
  padding: 5% 10% 0 10%;
}
#confirmationModal .modal-wrap a {
  text-align: center;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  width: 20%;
  position: absolute;
  height: 0;
  padding-bottom: 5%;
  bottom: 13%;
  text-decoration: none;
  color: #fff;
  display: block;
}
#confirmationModal .modal-wrap a span {
  display: none;
}
#confirmationModal .modal-wrap a:hover {
  animation: 600ms ease-in-out pulse infinite;
}
#confirmationModal .modal-wrap .acceptModal {
  background-image: url(../assets/images/btnAcept.png);
  right: 18%;
}
#confirmationModal .modal-wrap .cancelModal {
  background-image: url(../assets/images/btnCancel.png);
  left: 18%;
}

@media (max-width: 1230px) {
  .game-wrap {
    width: 900px;
    margin-left: -450px;
  }
}
@media screen and (max-width: 900px) and (orientation: portrait) {
  #game, #quiz, #videos {
    background: url(../assets/images/rotate.png) no-repeat scroll 50% 60% transparent !important;
    background-size: 90% auto !important;
  }

  .game-wrap, .quiz-wrap, .video-wrap, .loaded.menu-mobile-toggle, .collections-wrap {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  html, body, #page-wrap, #preloader {
    height: 100%;
  }

  .btn-collection-video {
    padding-bottom: 14%;
    background-position: 0% 35% !important;
  }

  .main-navigation-mobile {
    display: block;
  }
  .main-navigation-mobile.hide {
    display: none;
  }

  .quiz-options .option::after {
    background-size: 85%;
    background-position: 0% 38%;
    left: 0;
    width: 100%;
  }

  .quiz-options .option.option2::after {
    background-size: 85%;
    background-position: 70% 38%;
    right: 0;
    width: 100%;
  }

  #confirmationModal .modal-wrap {
    width: 480px;
    height: 200px;
    margin-top: -100px;
    top: 50%;
    left: 50%;
    margin-left: -240px;
  }
  #confirmationModal .modal-wrap h3 {
    padding-top: 20px;
    font-size: 14px;
  }
  #confirmationModal .modal-wrap h2 {
    padding-top: 30px;
    font-size: 32px;
  }
  #confirmationModal .modal-wrap a {
    width: 25%;
    padding-bottom: 7%;
  }

  .preload .main-navigation-logo {
    width: 86%;
    margin-left: -43%;
    top: 10%;
    margin-top: 0;
    height: auto;
  }
  .preload .main-navigation-logo.start-big {
    transform: none;
    top: 3%;
  }
  .preload .main-navigation-logo.start-big.final-top {
    top: 20px;
    left: 10px;
    margin: 0;
    width: 30%;
  }

  #page-wrap, .preloader-light {
    background-size: auto 80%;
  }

  body {
    background-image: url(../assets/images/background_mobile.jpg);
  }

  .preloader-icon {
    bottom: 10%;
  }

  .start-collections {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10% 8% 10%;
    bottom: 0;
    left: 0;
  }
  .start-collections ul {
    flex-wrap: wrap;
  }
  .start-collections ul li {
    width: 20%;
    padding-top: 5%;
  }

  .start-jump {
    width: 100%;
    top: 13%;
    height: 0;
    padding-bottom: 100%;
    margin-left: 0;
    left: 0;
  }
  .start-jump .start-splash_1 {
    background-size: auto 70%;
    background-position: -45% -50%;
  }
  .start-jump .start-splash_2, .start-jump .start-splash_3, .start-jump .start-splash_4 {
    background-size: 140% auto;
    background-position: 110% 110%;
  }

  .main-navigation, .speedway, .borderCont {
    display: none;
  }

  .quiz {
    width: 100%;
    left: 0;
    margin: 0;
  }
}
@media screen and (max-width: 900px) and (orientation: landscape) {
  .video-wrap {
    top: 2%;
    width: 60%;
    margin: 0;
    left: 20%;
  }

  .quiz {
    background: url(../assets/images/trivia/container.png) no-repeat scroll 50% 65% transparent;
    background-size: auto 85%;
  }

  .preload .main-navigation-logo.start-big.final-top {
    width: 20%;
  }

  .loaded.menu-mobile-toggle {
    display: block;
  }

  .speedway {
    display: block;
    width: 100%;
    left: 0;
    height: 200px;
    margin: 0;
    top: -70px;
    background-size: auto 100%;
    background-position: 58% 100%;
  }

  .quiz-single header h3 {
    font-size: 18px;
    line-height: 1.1;
  }

  .quiz-options .option.photo img {
    left: 18%;
  }

  .question .quiz-options::before {
    top: 40%;
    left: 43%;
    width: 15%;
    height: 0;
    padding-bottom: 15%;
    margin-left: 0;
    margin-top: 0;
    background-size: contain;
  }

  .quiz-options .option > img {
    height: 50%;
  }

  .quiz-single.result header.quiz-result {
    display: none;
    content: none;
  }

  .buttons {
    bottom: 3%;
    width: 100%;
  }

  .buttons a {
    width: 45%;
    /* padding-bottom: 6%; */
    background-size: contain;
    /* height: 0; */
  }

  .quiz-collection-carousel .flickity-prev-next-button {
    transform: scale(0.6);
  }

  .quiz-collection-carousel .carousel-cell img {
    height: 75%;
  }

  .quiz-options {
    height: 80%;
  }

  .quiz-collection-carousel .carousel-cell h3 {
    height: 25px;
    line-height: 25px;
  }

  .quiz-collection-carousel .carousel-cell h3 {
    font-size: 16px;
  }

  #game {
    background: none;
  }

  .quiz-wrap {
    padding-top: 0;
    width: 100%;
    margin: 0;
    left: 0;
  }

  .quiz-single header span {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 30px;
    left: 24%;
    margin-top: -20px;
  }

  .quiz-single header {
    padding-left: 33%;
    padding-right: 12%;
    padding-top: 1%;
  }

  .quiz-single.result .result-text {
    padding-left: 33%;
    padding-right: 12%;
    font-size: 18px;
    line-height: 1.1;
  }

  .quiz-options .option > img {
    left: 20%;
  }

  .quiz-options .option:first-child > img {
    left: initial;
    right: 20%;
  }

  .collections-wrap {
    background: none;
    padding: 0 10%;
    box-sizing: border-box;
    bottom: 0;
    height: 20%;
  }

  .quiz-single.result .quiz-options {
    padding-top: 80px;
  }

  .quiz-options .option::before {
    left: 15%;
    width: 70%;
    height: 0;
    padding-bottom: 14%;
    margin-left: 0;
  }

  .collections-carousel {
    width: 100%;
    height: 100%;
  }
  .collections-carousel .flickity-prev-next-button {
    width: 5%;
    height: 0;
    padding-bottom: 5.5%;
  }
  .collections-carousel .flickity-prev-next-button.previous {
    left: -5%;
  }
  .collections-carousel .flickity-prev-next-button.next {
    right: -5%;
  }

  .game-wrap {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    left: 0;
    top: 0;
    margin: 0;
  }

  .start-jump {
    padding: 0;
    height: 87%;
  }
  .start-jump .start-splash_1 {
    background-size: auto 85%;
    background-position: 47% -5%;
  }
  .start-jump .start-splash_2, .start-jump .start-splash_3, .start-jump .start-splash_4 {
    background-size: 75% auto;
    background-position: 52% -10%;
  }

  .preload .main-navigation-logo {
    width: 40%;
    margin-left: -20%;
    top: 20%;
  }
  .preload .main-navigation-logo.start-big {
    margin-left: -37%;
    top: 12%;
  }

  .start-collections {
    padding: 0 5% 2% 5%;
  }
  .start-collections ul {
    flex-wrap: nowrap;
  }
  .start-collections ul li {
    width: 10%;
    padding-top: 0;
  }
}

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