body { background: #ffffff; font-size: 16px; font-weight: 300; color: #000; line-height: 1.2; font-family: 'Roboto'} *:focus { outline: none;} .anchor { cursor: pointer; } .container { max-width: 1360px;} header { position: fixed; width: 100%; top: 0; left: 0; right: 0; z-index: 100; padding: 30px 0;} header.affix { background: rgba(255,255,255,.5); padding: 15px 0;} header .navbar { padding: 0;} header .navbar .nav { margin-right: 20px;} header .navbar .nav:last-child { margin-right: 0px;} header.game { padding: 15px 30px; background: #000;} header.game .container { max-width: 100%;} header.game .btn { margin-right: 20px;} header.negative {} header.negative .logo { position: relative;} header.negative .logo img { position: relative;} header.negative .logo:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(../img/frulite-slim-white.png) center center/contain no-repeat; opacity: 1;} header.negative.affix .logo img { opacity: 1;} header.negative.affix .logo:after { opacity: 0;} header.negative .nav.nav-links .nav-item .nav-link { color: #fff;} header.negative .nav.nav-links .nav-item .nav-link:after { background: #fff;} header.negative.affix .nav.nav-links .nav-item .nav-link { color: #000;} header.negative.affix .nav.nav-links .nav-item .nav-link:after { background: #000;} footer { background: #a8a8a8; padding: 50px 0;} footer .logo { position: relative;} footer .logo img { position: absolute; top: -100px;} footer .nav.nav-links .nav-item .nav-text { font-weight: 400;} footer .nav.nav-links .nav-item .nav-link { font-weight: 400;} footer.contest { position: relative; padding: 80px 0 40px 0;} footer.contest .canoe { background: url(../img/canoe.png); width: 232px; height: 159px; position: absolute; right: 10%; top: -120px;} footer.contest .nav.nav-links .nav-item .nav-link { font-size: 14px;} main { position: relative;} main.game { background-size: cover;} main.game { overflow: hidden;} main.game .container { width:100%; max-width: 1100px; position: relative; z-index: 1; margin: 0;} .custom-btn { border: 0; background: transparent; outline: none; } .btn-disabled { visibility: hidden; opacity: 0; position: relative; z-index: -15; } article {} /* article.person { min-height: 100%;} */ article.person .field-image { margin-bottom: 40px; filter: blur(2px); height: 310px;} article.person .field-title { opacity: 0; transform: translateY(-50%) scale(1.1); transition-delay: 100ms; text-align: center; font-size: 20px; font-family: "Zona Black"; color: #fff; position: absolute; top: 50%; left: 0; right: 0;} article.person .field-name { opacity: 0; transform: translateY(50px); transition-delay: 100ms; text-align: center; font-size: 18px; color: #fff;} article.person .field-social { opacity: 0; transform: translateY(50px); transition-delay: 200ms; text-align: center; font-size: 16px; font-weight: bold; } article.person .field-social a { color: #fff; text-decoration: none; position: relative;} article.person .field-social a:after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0%; opacity: 0; height: 2px; background: #fff;} article.person .field-social a:hover:after { left: 0%; width: 100%; opacity: 1;} article.person.active .field-image, article.person:hover .field-image { filter: blur(0px);} article.person.active .field-title, article.person:hover .field-title { filter: blur(0px); transform: translateY(-50%) scale(1); opacity: 1;} article.person.active .field-name, article.person:hover .field-name { opacity: 1; transform: translateY(0px);} article.person.active .field-social, article.person:hover .field-social { opacity: 1; transform: translateY(0px);} article.person.person-round { border-radius: 50%; background: #000; width: 320px; height: 320px; margin: 0 auto; overflow: hidden; position: relative; box-shadow: 0px 0px 0px 0px #fff; cursor: pointer; min-height: unset;} article.person.person-round.active, article.person.person-round:hover { box-shadow: 0px 0px 0px 4px #fff } article.person.person-round .field-image { margin: 0 auto; position: absolute; left: 0; right: 0; bottom: 0;} article.person.person-round .field-name { position: absolute; bottom: 80px; left: 0; right: 0;} article.person.person-round .field-social { position: absolute; bottom: 60px; left: 0; right: 0;} article.person.person-slim { display: flex;} article.person.person-slim .field-image { margin-bottom: 0; margin-top: 40px; height: auto; width: 100%;} article.person.person-slim .field-image .img-fluid { max-width: unset; width: 100%;} article.person.person-slim .field-name { position: absolute; right:15px; top: 0px; transform: translateY(-50px); transition-delay: 200ms; } article.person.person-slim .field-social { position: absolute; right: 15px; top: 20px; transform: translateY(-50px); transition-delay: 100ms; } article.person.person-slim.active .field-name, article.person.person-slim:hover .field-name { opacity: 1; transform: translateY(0px);} article.person.person-slim.active .field-social, article.person.person-slim:hover .field-social { opacity: 1; transform: translateY(0px);} article.product { min-height: 100%; margin-left: auto; margin-right: auto; max-width: 370px;} article.product .field-image { position: relative; text-align: center; margin-bottom: 30px;} article.product .field-image .big { position: relative; z-index: 10;} article.product .field-image .small { height: 50%; position: absolute; left: 50%; bottom: 0; opacity: 0; transform: translateX(-100%); z-index: 9; transition-delay: 200ms;} article.product:hover .field-image .small { opacity: 1; transform: translateX(100%); } article.product .field-image .liter { background: url(../img/1liter.png); width: 82px; height: 137px; position: absolute; left: 50%; top: -25px; z-index: 11; opacity: 0; transform: rotate(35deg) translateX(-150%); } article.product:hover .field-image .liter { opacity: 1; transform: rotate(0deg) translateX(-150%);} article.product .field-image .milliliter { background: url(../img/330ml.png); width: 70px; height: 113px; position: absolute; right: 0; top: 35%; z-index: 10; opacity: 0; transform: rotate(-35deg) translateY(-100%); transition-delay: 200ms;} article.product:hover .field-image .milliliter { opacity: 1; transform: rotate(0deg);} article.product .field-title { text-align: center;} article.product .field-title h3 { font-size: 20px; font-family: "Zona Black"; margin: 0;} article.product .field-description { text-align: center; font-size: 16px; font-weight: 300; max-width: 270px; margin: 0 auto;} article.product.slim { position: relative; width: 220px; height: 220px; margin: 0 auto; max-width: unset; background: #000; border-radius: 50%; box-shadow: 0px 0px 0px 0px #fff;} article.product.slim .field-image { position: absolute; bottom: -15px; left: 25px; margin-bottom: 0;} article.product.slim .field-image img { width: 65px;} article.product.slim .field-title { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding-left: 100px;} article.product.slim .field-title h3 { font-size: 16px; font-weight: 500; color: #fff; text-align: left; font-family: Roboto;} article.product.slim.active, article.product.slim:hover { box-shadow: 0px 0px 0px 4px #fff; } article.product.slim:hover .field-image { -webkit-animation: wobble-hor-bottom 0.6s 2 ; animation: wobble-hor-bottom 0.6s 2 ; } article.history {} article.history .field-date { background: url(../img/date.png); width: 99px; height: 47px; font-size: 28px; font-family: "Zona Black"; color: #fff; margin-bottom: 10px;} article.history .field-description {} article.more {} article.more .field-more { text-align: center; padding-top: 15px;} article.more .field-more .icon { margin-right: 5px;} article.more .field-more a { color: #fff; font-size: 16px; text-decoration: none; position: relative;} article.more .field-more a:after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0%; opacity: 0; height: 2px; background: #fff;} article.more .field-more a:hover:after { left: 0%; width: 100%; opacity: 1;} article.price { margin-bottom: 20px;} article.price .field-title { font-size: 22px; font-family: "Zona Black"; max-width: 400px; margin-left: auto; margin-right: auto; margin-bottom: 20px;} article.price .field-description { font-size: 16px; max-width: 400px;margin-left: auto; margin-right: auto; } article.price .field-image {} article.price.wobble:hover .field-image { -webkit-animation: wobble-hor-bottom 0.6s 2 ; animation: wobble-hor-bottom 0.6s 2 ; } article.price.shake:hover .field-image { -webkit-animation: shake-horizontal 600ms cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-horizontal 600ms cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } article.price.pulse:hover .field-image { -webkit-animation: heartbeat 1200ms ease-in-out both; animation: heartbeat 1200ms ease-in-out both; } section {} section.section-panel { padding: 70px 0; position: relative; } section.section-panel .header { text-align: center; margin-bottom: 60px;} section.section-panel .header h2 { font-family: 'Zona Black'; font-size: 32px; margin: 0; position: relative; z-index: 0; } section.section-panel-green { background: linear-gradient(35deg, #26c11a 0%,#69c70d 100%);} section.section-panel-white { background-color: #fff;} section.section-panel-gray-light { background-color: #eaeaea;} section.section-panel-gray { background-color: #dbdbdb;} section.section-panel-yellow { background-color: #ecf32a;;} section.section-panel-black { background-color: #000; color: #fff;} section.section-panel-smudge { background-image: url(../img/smudge.png); background-position: center center; background-repeat: no-repeat; background-size: contain;} section.section-panel-frulite { padding-bottom: 110px;} section.section-panel-frulite:before { content: ''; position: absolute; left: 0; bottom: 0; background-image: url(../img/woman-peanaple.png); background-position: left bottom; background-repeat: no-repeat; width: 736px; height: 550px;} section.section-panel-frulite .header { margin-bottom: 210px;} section.section-panel-frulite h3 { font-size: 70px; color: #74d11d; font-family: "Zona Black"; position: absolute; margin: 0; max-width: 600px; bottom: 80%; left: -15%;} section.section-panel-frulite p { font-size: 24px; font-weight: 300; position: relative;} section.section-panel-contest {} section.section-panel-contest h3 { font-size: 30px; margin-bottom: 20px; margin-top: 70px; font-family: 'Zona Black';} section.section-panel-contest p { font-size: 26px; font-weight: 300; margin-bottom: 50px;} section.section-panel-video { padding-top: 160px; position: relative;} section.section-panel-video .container { position: relative; z-index: 15;} section.section-panel-video .parallax { z-index: 10;} section.section-panel-video h2 { margin-top: 20px; margin-bottom: 30px; position: relative; font-family: 'Zona Black'; font-size: 24px;} section.section-panel-video h2:before { content: ''; background: url(../img/hand-left.png); width: 24px; height: 17px; display: block; margin-right: 20px;} section.section-panel-video h2:after { content: ''; background: url(../img/hand-right.png); width: 24px; height: 17px; display: block; margin-left: 20px;} section.section-panel-video p { font-size: 22px; font-weight: 300; margin-bottom: 20px;} section.section-panel-video .video { padding: 30px; width: 100%; background: url(../img/video.png) center center/contain no-repeat transparent;} section.section-panel-history { overflow: hidden;} section.section-panel-history h2 { font-size: 70px; font-family: "Zona Black"; color: #eaeaea; margin: 0 100px 0 0; max-width: 500px;} section.section-panel-history .row {} section.section-panel-history .row.carousel:before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000;} /*section.section-panel-history .row .col { position: relative; width: 100%; height: 100%;}*/ /*section.section-panel-history .row .col article { position: absolute; left: 0; right: 0; top: 0; min-height: 200px; height: 200px !important; width: 100%;}*/ section.section-panel-history .row .flickity-viewport { height: 350px;} section.section-panel-history .row .col:before { content: ''; width: 14px; height: 14px; border-radius: 50%; display: block; background: #000; position: absolute; left: 14px; top: 50%; transform: translate(-50%, -50%); } section.section-panel-history .row .col:nth-child(odd) article { position: absolute; top: calc(50% + 25px); padding-bottom: 0; } section.section-panel-history .row .col:nth-child(even) article { position: absolute; bottom: calc(50% + 25px);padding-bottom: 0; } section.section-panel-contest { padding-top: 110px; padding-bottom: 70px;} section.section-panel-contact { padding-bottom: 110px; overflow: hidden;} section.section-panel-contact .container { max-width: 600px;} section.section-panel-contact .tarzan { background: url(../img/tarzan.png); width: 161px; height: 338px; position: absolute; left: 10%; top: -20px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; transform-origin: 50% 0%; } section.section-panel-products { padding-bottom: 140px; } section.section-panel-products .canoe { background: url(../img/canoe.png); width: 232px; height: 159px; position: absolute; right: 10%; top: -50px;} section.section-panel-winners { padding-top: 150px; padding-bottom: 100px; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative;} section.section-panel-winners .header { position: relative;} section.section-panel-winners .header h2 { margin-bottom: 30px; z-index: 2;} section.section-panel-winners .header h3 { font-size: 148px; color: #ebebeb; font-family: "Zona Black"; position: absolute; z-index: 0; margin: 0; top: 0%; left: 50%; transform: translateX(-50%);} section.section-panel-winners .header p { font-size: 20px; font-weight: 300; position: relative; z-index: 1;} section.section-panel-winners .container { max-width: 1090px;} section.section-panel-winners .tarzan { background: url(../img/tarzan.png); width: 161px; height: 338px; position: absolute; left: 10%; top: -20px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; transform-origin: 50% 0%; } section.section-panel-join { padding-bottom: 0; padding-top: 110px; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; position: relative;} section.section-panel-join .header {} section.section-panel-join .header h2 { font-size: 148px; color: #252525; margin-bottom: -120px;} section.section-panel-join .content { position: relative;} section.section-panel-join .content .car { position: absolute; left: 70px; bottom: -50px;} section.section-panel-join .content .light {position: absolute; left: 330px; bottom: -20px;} section.section-panel-join .content h3 { font-size: 30px; font-family: "Zona Black"; margin-bottom: 20px;} section.section-panel-join .content p { font-size: 22px; font-weight: 300; margin-bottom: 40px;} section.section-panel-join .content .btn { margin-bottom: 200px;} section.section-panel-join .footer { background: #ecf32a; padding:50px 0 30px 0;} section.section-panel-join .cat { position: absolute; right: 900px; top: 15px;} section.section-panel-join .rope { position: absolute; right: -100px; top: -100px;} section.section-panel-prices { padding-bottom: 0; padding-top: 110px;min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; position: relative;} section.section-panel-prices .header {} section.section-panel-prices .header h2 {} section.section-panel-prices .header h3 { font-size: 148px; font-family: "Zona Black"; color: #f9fe79; margin-bottom: -180px;} section.section-panel-prices .content {position: relative; padding: 40px 0;} section.section-panel-prices .content .roller { position: absolute; left: 0; bottom: -50px;} section.section-panel-prices .footer { background: #fff; padding:50px 0 30px 0; margin-top: auto; position: relative;} section.section-panel-prices .footer .roller { position: absolute; left: 0; top: -80px;} section.section-game { min-height: 100vh; align-items: center; justify-content: center; display: flex;} section.section-game .header { text-align: center; margin-bottom: 70px;} section.section-game .header h2 { font-size: 32px; font-family: "Zona Black"; margin: 0;} section.section-game .container { padding-top: 70px; padding-bottom: 50px; position: relative; z-index: 11;} section.section-game .taste { position: absolute; right: 250px; bottom: 40px; width: 50px; z-index: 10;} section.section-game .influencer { position: absolute; right: 40px; bottom: 0; width: 200px; z-index: 10;} section.section-game .selections { margin-bottom: 50px;} section.section-game .selections .col-auto { padding: 0 25px; position: relative;} section.section-game .selections .col-auto:first-child { padding-left: 0;} section.section-game .selections .col-auto:nth-child(2):before { content: ''; width: 50px; height: 2px; position: absolute; left: -25px; top: 50%; background: #000;} section.section-game .selections .col-auto:nth-child(2):after { content: ''; width: 50px; height: 2px; position: absolute; right: -25px; top: 50%; background: #000;} section.section-game .selections .col-auto:last-child { padding-right: 0;} section.section-game .selections .option { width: 80px; height: 80px; position: relative; overflow: hidden; background: #000; border-radius: 50%;} section.section-game .selections .option img { position: absolute; bottom: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%);} section.section-game.step-1 { background: url(../img/video_bg.jpg) center bottom/contain no-repeat #388dc4;} section.section-game.step-1 .container { max-width: 1400px; margin: 0;} section.section-game.step-2 .taste { right: 120px;} section.section-game.step-4 {} section.section-game.step-4 .container { max-width: 560px;} section.section-game.step-5 {} section.section-game.step-5 .container { max-width: 560px; text-align: center;} section.section-game.step-5 .header { margin: 0 0 40px 0;} section.section-game.step-5 .header h2 { font-size: 36px;} section.section-game.step-5 .header p { font-size: 16px;} section.section-game.step-5 .content p { font-size: 16px;} section.section-game .btn-next { margin-top: 110px; opacity: 0; visibility: hidden;} section.section-game .btn-next.active { opacity: 1; visibility: visible;} section.section-game:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 660px; background-position: left bottom; background-repeat: no-repeat;} section.section-game:after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 660px; background-position: right bottom; background-repeat: no-repeat;} section.section-game .ananas-karida-flying-cat { display: none; position: absolute; left: 150px; top: 150px; z-index: 10;} section.section-game .ananas-karida-flying-karida { display: none; position: absolute; right: 150px; top: 150px; z-index: 10;} section.section-game .banana-vyssino-banana { display: none; position: absolute; left: 150px; bottom: 8%; z-index: 10;} section.section-game .rasbery-aktinidio { display: none; position: absolute; left: 150px; top: 60px; z-index: 10;} section.section-game .karoto-frouta-rocket { display: none; position: absolute; left: 280px; top: 150px; z-index: 10;} section.section-game .mantarini-saguini-diver { display: none; position: absolute; right: 190px; top: 50%; z-index: 10;} section.section-game .mantarini-saguini-drawn { display: none; position: absolute; left: 190px; top: 10%; z-index: 10;} section.section-game .portokali-fraoula-banana-orange { display: none; position: absolute; left: 290px; top: 150px; z-index: 10;} section.section-game .aktinidio-fraoula-pinguin { display: none; position: absolute; left: 150px; top: 150px; z-index: 10;} section.section-game .rasberry-lemoni-penguin { display: none; position: absolute; left: 150px; top: 150px; z-index: 10;} section.section-game .rasberry-fraoula-blinking-1 { display: none; position: absolute; RIGHT: 410px; top: 150px; z-index: 10;} section.section-game .rasberry-fraoula-blinking-2 { display: none; position: absolute; left: 380px; top: 150px; z-index: 10;} section.section-game .rasberry-fraoula-blinking-3 { display: none; position: absolute; left: 290px; top: 150px; z-index: 10;} section.section-game .rasberry-fraoula-blinking-4 { display: none; position: absolute; right: 330px; top: 150px; z-index: 10;} main.game section.section-game {background-size: cover; background-repeat: no-repeat; background-position: center center; padding-top: 100px;} main.game section.section-game.step-1 {background: url(../img/Play_bg.jpg) center bottom / cover no-repeat #388dc4;} main.game section.section-game.step-1:before, main.game section.section-game.step-1:after { display: none;} main.game.ananas-karida .section-game {background-color: #93d552; background-image: url(../img/ananas_karida/bg_ananas.png);} main.game.ananas-karida .section-game:before { background-image: url(../img/ananas_karida/ananas_left.png);} main.game.ananas-karida .section-game:after { background-image: url(../img/ananas_karida/ananas_right.png);} main.game.ananas-karida .ananas-karida-flying-cat, main.game.ananas-karida .ananas-karida-flying-karida { display: block;} main.game.banana-vyssino .section-game {background-color: #af004a; background-image: url(../img/banana_vyssino/bg_banana.png);} main.game.banana-vyssino .section-game:before { background-image: url(../img/banana_vyssino/BANANA-VYSSINO_left.png);} main.game.banana-vyssino .section-game:after { background-image: url(../img/banana_vyssino/BANANA-VYSSINO_right.png);} main.game.banana-vyssino .banana-vyssino-banana { display: block;} main.game.rasberry-lemoni .section-game {background-color: #b1010e; background-image: url(../img/rasberry_lemoni/bg_rasberyy_lemo.png);} main.game.rasberry-lemoni .section-game:before { background-image: url(../img/rasberry_lemoni/rasberry-lemoni_left.png);} main.game.rasberry-lemoni .section-game:after { background-image: url(../img/rasberry_lemoni/rasberry-lemoni_right.png);} main.game.rasberry-lemoni .section-game .rasberry-lemoni-penguin { display: block; } main.game.portokali-fraoula-banana .section-game {background-color: #d10031; background-image: url(../img/froula_portokali_banana/bg_fraoul.png);} main.game.portokali-fraoula-banana .section-game:before { background-image: url(../img/froula_portokali_banana/fraoula-portokali-mpanana_left.png);} main.game.portokali-fraoula-banana .section-game:after { background-image: url(../img/froula_portokali_banana/fraoula-portokali-mpanana_right.png);} main.game.portokali-fraoula-banana .section-game .portokali-fraoula-banana-orange { display: block;} main.game.mantarini-saguini .section-game {background-color: #f5461f; background-image: url(../img/mantarini_sagkouini/bg_red.png);} main.game.mantarini-saguini .section-game:before { background-image: url(../img/mantarini_sagkouini/MANTARINI_SAGKOUINI_left.png);} main.game.mantarini-saguini .section-game:after { background-image: url(../img/mantarini_sagkouini/MANTARINI_SAGKOUINI_right.png);} main.game.mantarini-saguini .section-game .mantarini-saguini-diver { display: block;} main.game.mantarini-saguini .section-game .mantarini-saguini-drawn { display: block;} main.game.karoto-frouta .section-game {background-color: #018244; background-image: url(../img/karoto_frouta/bg_karoto.png);} main.game.karoto-frouta .section-game:before { background-image: url(../img/karoto_frouta/KAROTO-FROUTA_left.png);} main.game.karoto-frouta .section-game:after { background-image: url(../img/karoto_frouta/KAROTO-FROUTA_right.png);} main.game.karoto-frouta .section-game .karoto-frouta-rocket { display: block;} main.game.rasberry-fraoula .section-game {background-color: #b1010e; background-image: url(../img/rasberry-blueberry-strawberry/bg_rasberry-blueberry-strawberry.png);} main.game.rasberry-fraoula .section-game:before { background-image: url(../img/rasberry-blueberry-strawberry/rasberry-blueberry-strawberry_left.png);} main.game.rasberry-fraoula .section-game:after { background-image: url(../img/rasberry-blueberry-strawberry/rasberry-blueberry-strawberry_right.png);} main.game.rasberry-fraoula .section-game .rasberry-fraoula-blinking-1, main.game.rasberry-fraoula .section-game .rasberry-fraoula-blinking-2, main.game.rasberry-fraoula .section-game .rasberry-fraoula-blinking-3, main.game.rasberry-fraoula .section-game .rasberry-fraoula-blinking-4 { display: block;} main.game.aktinidio-fraoula .section-game {background-color: #b1010e; background-image: url(../img/rasberry-aktinidio/bg_rasberry-aktinidio.png);} main.game.aktinidio-fraoula .section-game:before { background-image: url(../img/rasberry-aktinidio/rasberry-aktinidio_left.png);} main.game.aktinidio-fraoula .section-game:after { background-image: url(../img/rasberry-aktinidio/rasberry-aktinidio_right.png);} main.game.aktinidio-fraoula .section-game .aktinidio-fraoula-pinguin { display: none; } main.game.aktinidio-fraoula .section-game .rasbery-aktinidio { display: block;} .parallax { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden;} .parallax .scene { position: relative; overflow: hidden; min-height: 100%;} .parallax .scene .layer { position: absolute; width: 100%; height: 100%; left: 0; top: 0;} .parallax .scene .layer.bg { background: url(../img/video_bg.jpg) center top no-repeat; background-size: contain; width: 100%; height: 100%; left: 0; top: 0; position: absolute !important;} .parallax .scene .layer .bannana { background: url(../img/banana.png) center top no-repeat; width: 293px; height: 181px; left: 150px; top: 350px; position: absolute;} .parallax .scene .layer .penguin { background: url(../img/penguin.png) center top no-repeat; width: 154px; height: 168px; left: 150px; top: 100px; position: absolute; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; transform-origin: 50% 0%; } .parallax .scene .layer .roller { background: url(../img/roller_woman.png) center top no-repeat; width: 281px; height: 132px; left: 0; top: 500px; position: absolute;} .parallax .scene .layer .car { background: url(../img/shoe_car.png) center top no-repeat; width: 333px; height: 156px; right: 60px; top: 500px; position: absolute;} .parallax .scene .layer .lights { background: url(../img/trafic_lights.png) center top no-repeat; width: 62px; height: 156px; right: 0; top: 400px; position: absolute; -webkit-transform-origin: 50% 90%; -moz-transform-origin: 50% 90%; transform-origin: 50% 90%; -webkit-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } html, body { height: 100%; } .pt-perspective { position: relative; width: 100%; height: 100%; -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; } .pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .pt-page-current { visibility: visible; z-index: 1;} .pt-page-ontop { z-index: 999;} .table { margin: 0;} .table tr {} .table tr td { font-size: 16px; padding: 5px 0; border-top: 0; border-bottom: 1px solid #cccccc;} .carousel {} .carousel:after { content: ''; display: none;} .carousel .col { min-height: 100%;} .carousel .flickity-viewport { width: 100%;} .carousel .flickity-page-dots { bottom: 0px; width: auto; left: 0; right: 0;} .carousel .flickity-page-dots .dot { width: 14px; height: 14px; border: 2px solid #fff; background: #000; opacity: 1; cursor: pointer; margin: 0 7px;} .carousel .flickity-page-dots .dot.is-selected { background: #fff; opacity: 1; border-color: #000;} .carousel .flickity-prev-next-button { padding: 0; background: none; width: 94px; height: 20px} .carousel .flickity-prev-next-button:focus, .carousel .flickity-prev-next-button:hover { box-shadow: none; background: none;} .carousel .flickity-prev-next-button:before { content: ''; display: block; background-size: contain; width: 94px; height: 20px;} .carousel .flickity-prev-next-button:hover:before { color: #0060AF;} .carousel .flickity-prev-next-button svg { display: none;} .carousel .flickity-prev-next-button.previous { left: -10px;} .carousel .flickity-prev-next-button.previous:before { background-image: url(../img/arrow-left.png); } .carousel .flickity-prev-next-button.next { right: -10px;} .carousel .flickity-prev-next-button.next:before { background-image: url(../img/arrow-right.png); } .carousel.carousel-contest:after {} .carousel.carousel-contest .flickity-page-dots { bottom: -30px; z-index: 10;} .carousel.carousel-join .flickity-page-dots { display: none;} .carousel.carousel-winners:after, .carousel.carousel-products:after, .carousel.carousel-history:after { content: 'flickity'; display: none; } .carousel.carousel-products .col { padding-top: 30px; padding-bottom: 30px;} .carousel.carousel-products { padding: 0 75px;} .carousel.carousel-contest .flickity-prev-next-button { width: 16px; height: 28px} .carousel.carousel-contest .flickity-prev-next-button:before { width: 16px; height: 28px} .carousel.carousel-contest .flickity-prev-next-button.previous:before { background-image: url(../img/arrow-white-left.png); } .carousel.carousel-contest .flickity-prev-next-button.next:before { background-image: url(../img/arrow-white-right.png); } .carousel.carousel-winners { padding: 0 135px;} .carousel.carousel-winners .flickity-prev-next-button { width: 16px; height: 28px} .carousel.carousel-winners .flickity-prev-next-button:before { width: 16px; height: 28px} .carousel.carousel-winners .flickity-prev-next-button.previous:before { background-image: url(../img/arrow-black-left.png); } .carousel.carousel-winners .flickity-prev-next-button.next:before { background-image: url(../img/arrow-black-right.png); } .carousel.carousel-winners .flickity-page-dots { bottom: -60px;} .carousel.carousel-join .flickity-prev-next-button.previous { left: 0;} .carousel.carousel-join .flickity-prev-next-button.previous:before { background-image: url(../img/arrow-white-left.png); } .carousel.carousel-join .flickity-prev-next-button.next { right: 0;} .carousel.carousel-join .flickity-prev-next-button.next:before { background-image: url(../img/arrow-white-right.png); } .game .carousel.carousel-contest .flickity-prev-next-button.previous:before { background-image: url(../img/arrow-black-left.png); } .game .carousel.carousel-contest .flickity-prev-next-button.next:before { background-image: url(../img/arrow-black-right.png); } .game .carousel.carousel-contest .flickity-page-dots { display: none;} .game .carousel.carousel-products { padding: 0 35px;} .game .carousel.carousel-products .flickity-prev-next-button { width: 16px; height: 28px} .game .carousel.carousel-products .flickity-prev-next-button:before { width: 16px; height: 28px} .game .carousel.carousel-products .flickity-prev-next-button.previous:before { background-image: url(../img/arrow-black-left.png); } .game .carousel.carousel-products .flickity-prev-next-button.next:before { background-image: url(../img/arrow-black-right.png); } .game .carousel.carousel-products .flickity-page-dots { display: none;} .nav.nav-icons {} .nav.nav-icons .nav-item { margin-right: 15px;} .nav.nav-icons .nav-item:last-child { margin-right: 0;} .nav.nav-icons .nav-item .nav-link { width: 34px; height: 34px; border: 1px solid #000; border-radius: 50%; padding: 0;} .nav.nav-icons .nav-item .nav-link:hover { box-shadow: 0px 0px 0px 1px #000;} .nav.nav-icons .nav-item .nav-link .icon { cursor: pointer;} .nav.nav-links .nav-item { padding-right: 20px; margin-right: 20px; position: relative;} .nav.nav-links .nav-item:after { content: ''; border-left: 1px solid #505050; border-right: 1px solid #656565; height: 14px; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); } .nav.nav-links .nav-item:last-child { padding-right: 0px; margin-right: 0px;} .nav.nav-links .nav-item:last-child:after { display: none;} .nav.nav-links .nav-item .nav-text { font-size: 16px; color: #000; font-weight: 500; padding: 0;} .nav.nav-links .nav-item .nav-link { font-size: 16px; color: #000; font-weight: 500; position: relative; padding: 0;} .nav.nav-links .nav-item .nav-link:after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0%; opacity: 0; height: 2px; background: #000;} .nav.nav-links .nav-item .nav-link:hover:after { left: 0%; width: 100%; opacity: 1;} /* .modal { background: rgba(0,0,0,.5);} .modal .modal-dialog { max-width: 1060px;} .modal .modal-content { background: rgba(0,0,0,.55); border-radius: 0; border: 0;} .modal .modal-content .modal-header { border-radius: 0; border: 0; padding: 20px; display: flex; justify-content: flex-end} .modal .modal-content .modal-header .close { margin: 0;} .modal .modal-content .modal-body { color: #fff; padding: 50px 25px; max-width: 800px; margin: 0 auto; width: 100%;} .modal .modal-content .modal-body h3 { font-size: 20px; font-weight: bold; margin-bottom: 30px;} .modal .modal-content .modal-body p { font-size: 16px; font-weight: 300;} .modal.fade .modal-dialog { -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.video .modal-content .modal-body { max-width: unset; padding: 0 25px 25px 25px;} */ @media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 756px; } } .form {} .form .form-group { margin-bottom: 15px; } .form .form-group label { font-size: 12px; font-weight: bold; color: #000; margin-bottom: 5px;} .form .form-group .form-control { border: 0; border-radius: 0; background: #fff; height: 40px; padding: 0 15px; color: #000; font-size: 16px;} .form .form-group .form-control:focus { box-shadow: none;} .form .form-group .form-control-select { background: #000; position: relative;} .form .form-group .form-control-select:after { content: ''; display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 0; height: 0; pointer-events: none; border-style: solid; border-width: 8px 5px 0 5px; border-color: #ffffff transparent transparent transparent;} .form .form-group .form-control-select .form-control { background: #000; color: #fff; padding-right: 30px; -webkit-appearance: textfield;} .form .form-group textarea.form-control { padding: 15px; min-height: 100px;} .form .form-group .form-radio {display: block;position: relative; font-size: 13px; font-weight: 300; padding-left: 30px; margin-bottom: 12px;cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; } .form .form-group .form-radio a { color: #000; text-decoration: underline;} .form .form-group .form-radio input { position: absolute; opacity: 0; cursor: pointer;} .form .form-group .form-radio .checkmark {position: absolute;top: 0;left: 0;height: 16px;width: 16px;background-color: #fff;border: 1px solid #707070;border-radius: 50%;} .form .form-group .form-radio:hover input ~ .checkmark {background-color: #000;} .form .form-group .form-radio input:checked ~ .checkmark { /*background-color: #0060AF;*/} .form .form-group .form-radio .checkmark:after {content: "";position: absolute;display: none;} .form .form-group .form-radio input:checked ~ .checkmark:after {display: block;} .form .form-group .form-radio .checkmark:after { top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #000;} .form .form-group .form-checkbox { display: block; position: relative; font-size: 13px; font-weight: 300; padding-left: 30px; margin-bottom: 12px;cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .form .form-group .form-checkbox a { color: #000; text-decoration: underline;} .form .form-group .form-checkbox input { position: absolute; opacity: 0; cursor: pointer;} .form .form-group .form-checkbox .checkmark {position: absolute;top: 0;left: 0;height: 16px;width: 16px;background-color: #fff;border: 1px solid #707070;border-radius: 0%;} .form .form-group .form-checkbox:hover input ~ .checkmark {background-color: #000;} .form .form-group .form-checkbox input:checked ~ .checkmark { /*background-color: #0060AF;*/} .form .form-group .form-checkbox .checkmark:after {content: "";position: absolute;display: none;} .form .form-group .form-checkbox input:checked ~ .checkmark:after {display: block;} .form .form-group .form-checkbox .checkmark:after { top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 0%; background: #000;} .icon {} .icon.icon-facebook { background: url(../img/facebook.png); width: 13px; height: 21px; } .icon.icon-instagram { background: url(../img/instagram.png); width: 20px; height: 20px; } .icon.icon-youtube { background: url(../img/youtube.png); width: 18px; height: 14px; } .icon.icon-play { background: url(../img/play.png); width: 32px; height: 32px; } .icon.icon-close { background: url(../img/close.png); width: 22px; height: 22px; } .icon.icon-back { background: url(../img/back.png); width: 13px; height: 19px;} .icon.icon-more { background: url(../img/more.png); width: 19px; height: 13px;} .btn { border: 0; border-radius: 0; box-shadow: none; font-size: 20px; line-height: 1.2; font-family: "Zona Black"; padding: 15px; min-width: 260px;} .btn:focus {box-shadow: none;} .btn.btn-black { background: #000; color: #FFF;} .btn.btn-white { background: #FFF; color: #000;} .btn.btn-icon { background: transparent; padding: 5px; display: inline-flex; align-items: center; justify-content: center; min-width: unset;} .btn.btn-200 { min-width: 200px;} .btn.btn-zoom {} .btn.btn-zoom:hover { opacity: .75; transform: scale(1.05); filter: blur(1px);} .btn.btn-opacity {} .btn.btn-opacity:hover { opacity: .75; } .btn.btn-disabled { opacity: 0 !important; pointer-events: none;} .btn.btn-primary { color: #fff; background: #0060AF; min-width: 130px; } .btn.btn-primary:active, .btn.btn-primary:focus, .btn.btn-primary:active:focus, .btn.btn-primary:hover { color: #fff; background: #00AEEF; box-shadow: none !important;} .btn.btn-plain { padding: 0; border: 0; background: transparent; line-height: 1;} .btn.btn-more { font-size: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center;} .btn.btn-more .icon { margin-top: 15px; position: relative;} .btn.btn-more:active .icon, .btn.btn-more:hover .icon { transform: translateY(10px);} .btn.btn-calendar { padding: 10px 20px; display: block; width: 100%; background: #002D53; border-bottom: 1px solid #fff;} .btn.btn-calendar:last-child { border-bottom: 0;} .btn.btn-calendar:active, .btn.btn-calendar:focus, .btn.btn-calendar:hover { background: #0060AF;} .btn.btn-calendar span { display: block;} .btn.btn-calendar .date { font-size: 36px; font-weight: bold; margin: 0 15px 0 0;} .btn.btn-calendar .title {font-size: 16px; font-weight: bold; text-align: left;} .btn.btn-calendar .time { font-size: 12px; text-align: left;} .btn.btn-calendar .room { font-size: 12px; text-align: left;} .btn.btn-calendar .icon { margin: 0 0 0 15px;} .img-zoom { overflow: hidden; display: block;} /*.img-zoom img { position: relative; transform: scale(1.1); filter: blur(1px)}*/ /*.img-zoom:hover img { transform: scale(1); filter: blur(0px)}*/ .img-zoom img { position: relative; transform: scale(1.1);} .img-zoom:hover img { transform: scale(1);} .img-round { border-radius: 100%;} /*.img-fluid { width: 100%;}*/ .animate, .animate:before, .animate:after { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .animate-medium, .animate-medium:before, .animate-medium:after { -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease } .animate-slow, .animate-slow:before, .animate-slow:after { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease } .rotate-in-2-tr-ccw { -webkit-animation: rotate-in-2-tr-ccw 1800ms ease infinite both; animation: rotate-in-2-tr-ccw 1800ms linear infinite both; } .bounce-in-left { -webkit-animation: bounce-in-left 1800ms linear infinite both; animation: bounce-in-left 1800ms linear both infinite; } .swing-1 { -webkit-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .swing-2 { -webkit-animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .swing-3 { -webkit-animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .swing-4 { -webkit-animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .swing-5 { -webkit-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .wave { -webkit-animation: wave 7.55556s 0.1s infinite linear; -moz-animation: wave 7.55556s 0.1s infinite linear; animation: wave 7.55556s 0.1s infinite linear; } .wobble-hor-top { -webkit-animation: wobble-hor-top 2s infinite both; animation: wobble-hor-top 2s infinite both; } .wobble-hor-bottom { -webkit-animation: wobble-hor-bottom 0.6s 2 ; animation: wobble-hor-bottom 0.6s 2 ; } .flicker-1 { -webkit-animation: flicker-1 2s linear infinite both; animation: flicker-1 2s linear infinite both; } .jump { -webkit-animation: jump 1.5s infinite linear; -moz-animation: jump 1.5s infinite linear; animation: jump 1.5s infinite linear; } .roller { -webkit-animation: roller 20s infinite linear; -moz-animation: roller 20s infinite linear; animation: roller 20s infinite linear; } .animated-car { -webkit-animation: car 7s infinite linear; -moz-animation: car 7s infinite linear; animation: car 7s infinite linear; } @-webkit-keyframes jump { 0% { top: 40%; } 50% { top: 53%; } 100% { top: 40%; } } @-webkit-keyframes roller { 0% { left: -5%; } 100% { left: 105%; } } @-webkit-keyframes car { 0% { left: -5%; } 100% { left: 105%; } } @-webkit-keyframes rotate-in-2-tr-ccw { 0% { -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 0; } 25% { -webkit-transform: rotate(20deg); transform: rotate(20deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 100% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 100% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 0; } } @keyframes rotate-in-2-tr-ccw { 0% { -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 0; } 25% { -webkit-transform: rotate(20deg); transform: rotate(20deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 100% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 100% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 0; } } @-webkit-keyframes bounce-in-left { 0% { -webkit-transform: translateX(-600px); transform: translateX(-600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-left { 0% { -webkit-transform: translateX(-600px); transform: translateX(-600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes swing { 0% { -webkit-transform: rotateZ(10deg); -moz-transform: rotateZ(10deg); transform: rotateZ(10deg); } 100% { -webkit-transform: rotateZ(-10deg); -moz-transform: rotateZ(-10deg); transform: rotateZ(-10deg); } } @-moz-keyframes swing { 0% { -webkit-transform: rotateZ(10deg); -moz-transform: rotateZ(10deg); transform: rotateZ(10deg); } 100% { -webkit-transform: rotateZ(-10deg); -moz-transform: rotateZ(-10deg); transform: rotateZ(-10deg); } } @-ms-keyframes swing { 0% { -webkit-transform: rotateZ(10deg); -moz-transform: rotateZ(10deg); transform: rotateZ(10deg); } 100% { -webkit-transform: rotateZ(-10deg); -moz-transform: rotateZ(-10deg); transform: rotateZ(-10deg); } } @keyframes swing { 0% { -webkit-transform: rotateZ(10deg); -moz-transform: rotateZ(10deg); transform: rotateZ(10deg); } 100% { -webkit-transform: rotateZ(-10deg); -moz-transform: rotateZ(-10deg); transform: rotateZ(-10deg); } } @-webkit-keyframes wave { 0% { -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } } @-moz-keyframes wave { 0% { -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } } @-ms-keyframes wave { 0% { -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } } @keyframes wave { 0% { -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } } @-webkit-keyframes lighthouse { 0% { -webkit-transform: translate3d(15%,0,0) rotateZ(10deg); -moz-transform: translate3d(15%,0,0) rotateZ(10deg); transform: translate3d(15%,0,0) rotateZ(10deg); } 100% { -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg); -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg); transform: translate3d(-15%,0,0) rotateZ(-10deg); } } @-moz-keyframes lighthouse { 0% { -webkit-transform: translate3d(15%,0,0) rotateZ(10deg); -moz-transform: translate3d(15%,0,0) rotateZ(10deg); transform: translate3d(15%,0,0) rotateZ(10deg); } 100% { -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg); -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg); transform: translate3d(-15%,0,0) rotateZ(-10deg); } } @-ms-keyframes lighthouse { 0% { -webkit-transform: translate3d(15%,0,0) rotateZ(10deg); -moz-transform: translate3d(15%,0,0) rotateZ(10deg); transform: translate3d(15%,0,0) rotateZ(10deg); } 100% { -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg); -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg); transform: translate3d(-15%,0,0) rotateZ(-10deg); } } @keyframes lighthouse { 0% { -webkit-transform: translate3d(15%,0,0) rotateZ(10deg); -moz-transform: translate3d(15%,0,0) rotateZ(10deg); transform: translate3d(15%,0,0) rotateZ(10deg); } 100% { -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg); -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg); transform: translate3d(-15%,0,0) rotateZ(-10deg); } } @-webkit-keyframes wobble-hor-bottom { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @keyframes wobble-hor-bottom { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @-webkit-keyframes flicker-1 { 0%, 100% { opacity: 1; } 41.99% { opacity: 1; } 42% { opacity: 0; } 43% { opacity: 0; } 43.01% { opacity: 1; } 47.99% { opacity: 1; } 48% { opacity: 0; } 49% { opacity: 0; } 49.01% { opacity: 1; } } @keyframes flicker-1 { 0%, 100% { opacity: 1; } 41.99% { opacity: 1; } 42% { opacity: 0; } 43% { opacity: 0; } 43.01% { opacity: 1; } 47.99% { opacity: 1; } 48% { opacity: 0; } 49% { opacity: 0; } 49.01% { opacity: 1; } } @keyframes wobble-hor-top { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(6deg); transform: translateX(-30px) rotate(6deg); } 30% { -webkit-transform: translateX(15px) rotate(-6deg); transform: translateX(15px) rotate(-6deg); } 45% { -webkit-transform: translateX(-15px) rotate(3.6deg); transform: translateX(-15px) rotate(3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(-2.4deg); transform: translateX(9px) rotate(-2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(1.2deg); transform: translateX(-6px) rotate(1.2deg); } } @-webkit-keyframes shake-horizontal { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 80% { -webkit-transform: translateX(8px); transform: translateX(8px); } 90% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } } @keyframes shake-horizontal { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 80% { -webkit-transform: translateX(8px); transform: translateX(8px); } 90% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } } @-webkit-keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .hamburger { display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } [aria-expanded="true"] .hamburger:hover { opacity: 0.7; } [aria-expanded="true"] .hamburger .hamburger-inner, [aria-expanded="true"] .hamburger .hamburger-inner::before, [aria-expanded="true"] .hamburger .hamburger-inner::after { background-color: #000; } .negative [aria-expanded="true"] .hamburger .hamburger-inner, .negative [aria-expanded="true"] .hamburger .hamburger-inner::before, .negative [aria-expanded="true"] .hamburger .hamburger-inner::after { } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .negative .hamburger-inner,.negative .hamburger-inner::before,.negative .hamburger-inner::after { background-color: #fff; } .negative.affix .hamburger-inner,.negative.affix .hamburger-inner::before,.negative.affix .hamburger-inner::after { background-color: #000; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } [aria-expanded="true"] .hamburger--squeeze .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } [aria-expanded="true"] .hamburger--squeeze .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } [aria-expanded="true"] .hamburger--squeeze .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } ::-webkit-scrollbar { width: 0px; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ display: none; }