/* Start:/bitrix/templates/toto/fonts/TriviaSlab.css?1645603692284*/ @font-face { font-family:'Trivia Slab'; font-style:normal; font-weight:500; src:url('/bitrix/templates/toto/fonts/TriviaSlab-Medium.otf') format('opentype'); } @font-face { font-family:'Trivia Slab'; font-style:normal; font-weight:700; src:url('/bitrix/templates/toto/fonts/TriviaSlab-Bold.otf') format('opentype'); } /* End */ /* Start:/bitrix/templates/toto/fonts/HelveticaNeueCyr.css?16456036883201*/ @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Roman.eot'); src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Roman.woff') format('woff'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Roman.woff2') format('woff2'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Roman.ttf') format('truetype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Roman.svg#HelveticaNeueCyr') format('svg'); font-weight:normal; font-style:normal; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Bold.eot'); src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Bold.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Bold.woff') format('woff'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Bold.woff2') format('woff2'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Bold.ttf') format('truetype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Bold.svg#HelveticaNeueCyr') format('svg'); font-weight:bold; font-style:normal; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Italic.eot'); src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Italic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Italic.woff') format('woff'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Italic.woff2') format('woff2'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Italic.ttf') format('truetype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Italic.svg#HelveticaNeueCyr') format('svg'); font-weight:normal; font-style:italic; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-BoldItalic.eot'); src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-BoldItalic.woff') format('woff'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-BoldItalic.woff2') format('woff2'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-BoldItalic.ttf') format('truetype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-BoldItalic.svg#HelveticaNeueCyr') format('svg'); font-weight:bold; font-style:italic; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Light.eot'); src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Light.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Light.woff') format('woff'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Light.woff2') format('woff2'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Light.ttf') format('truetype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Light.svg#HelveticaNeueCyr') format('svg'); font-weight:200; font-style:normal; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-LightItalic.eot'); src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-LightItalic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-LightItalic.woff') format('woff'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-LightItalic.woff2') format('woff2'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-LightItalic.ttf') format('truetype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-LightItalic.svg#HelveticaNeueCyr') format('svg'); font-weight:200; font-style:italic; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Medium.eot'); src:url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Medium.woff') format('woff'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Medium.woff2') format('woff2'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Medium.ttf') format('truetype'), url('/bitrix/templates/toto/fonts/HelveticaNeueCyr-Medium.svg#HelveticaNeueCyr') format('svg'); font-weight:500; font-style:normal; } /* End */ /* Start:/bitrix/templates/toto/fonts/Rouble.css?1645603692356*/ @font-face { font-family:'Rouble'; src:url('/bitrix/templates/toto/fonts/./Rouble.eot'); src:url('/bitrix/templates/toto/fonts/./Rouble.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/toto/fonts/./Rouble.woff') format('woff'), url('/bitrix/templates/toto/fonts/./Rouble.ttf') format('truetype'), url('/bitrix/templates/toto/fonts/./Rouble.svg#Rouble') format('svg'); font-weight:normal; font-style:normal; } r { font-family:'Rouble'; line-height:80%; } /* End */ /* Start:/bitrix/templates/toto/owl.carousel/owl.carousel.css?16456037044677*/ /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } /* * Core Owl Carousel CSS File */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index:1; } .owl-carousel .owl-item>img { display: block; width:100%; } .owl-carousel .owl-item img { max-width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("/bitrix/templates/toto/owl.carousel/owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -moz-transition: scale 100ms ease; -ms-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -moz-transition: scale(1.3, 1.3); -ms-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; } /* End */ /* Start:/bitrix/templates/toto/owl.carousel/animate.css?164560370372259*/ @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* End */ /* Start:/bitrix/templates/toto/css/flyform.css?16456036351386*/ /* -------------------------------- flyform -------------------------------- */ div.flyform-shadow { display:none; position:fixed; background-color:rgba(0,0,0,0.7); top:0; left:0; width:100%; height:100%; z-index:190; opacity:0; transition:opacity 500ms; -o-transition:opacity 500ms; -moz-transition:opacity 500ms; -webkit-transition:opacity 500ms; } div.flyform-shadow.show { opacity:1; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#AA000000', endColorstr='#AA000000'); } table.flyform { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2000; border-spacing:0; } table.flyform.fixed { position:absolute; height:auto; } table.flyform.show { display:table; } .flyform table.flyform-center { position:relative; background-color:white; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; text-align:left; font-size:16px; margin:0 auto; } .flyform div.inner{ background: none; margin: 0; } .flyform div.inner img{ max-width: 98%; height: auto; } .flyform div.close { position:absolute; right:0px; top:0px; width:44px; height:44px; background:url(/bitrix/templates/toto/css/../images/close.png) center center no-repeat; cursor:pointer; } @media (max-width: 460px){ .flyform div.inner img{ margin: 1%; } } /* End */ /* Start:/bitrix/templates/toto/styles.css?17338282603449*/ body,table { font-family:'HelveticaNeueCyr'; font-size:14px; } textarea,input { font-family:'HelveticaNeueCyr'; font-size:18px; color:black; outline:0; } input[type="submit"] { -webkit-appearance:none; -moz-appearance:none; appearance:none; } textarea.input, input.input { background-color:white; } input.input:-moz-read-only { background-color:#efefef; } input.input:read-only { background-color:#efefef; } a { text-decoration:underline; color:#ee3a42; transition:color 200ms; -moz-transition:color 200ms; -webkit-transition:color 200ms; } a:hover { color:red; text-decoration:none; } a.local { text-decoration:none; border-bottom:1px dashed #ee3a42; } a.local:hover { border-bottom:none; } img,iframe { border:0; vertical-align:bottom; } b,strong { color:white; } small,.small { font-size:12px; line-height:14px; } big,.big { font-size:18px } p,center,li { margin:5px 0 10px 0; } a b, a strong { color:#e9282e; } a b:hover, a strong:hover { color:red; } h1, .h1 { font-family:'Trivia Slab'; font-weight:500; font-size:34px; margin:20px 0; } h2, .h2 { font-family:'Trivia Slab'; font-size:30px; font-weight:500; margin:10px 0; } h3, .h3 { font-family:'Trivia Slab'; font-size:14px; font-weight:500; line-height:16px; margin:20px 0; text-transform:uppercase; } .btn-white { padding:9px 40px 9px 40px; background-color:white; font-size:33px; font-weight:500; color:black; text-transform:uppercase; vertical-align:middle; } input.btn-white { border:none; cursor:pointer; } input.btn-white:disabled { background-color:#999999; } a.btn-white { text-decoration:none; line-height:56px; } a.btn-white:hover { background-color:rgba(255,255,255,0.8); color:black; } .btn-border-black { padding:18px 40px 18px 40px; border:2px solid black; background-color:transparent; font-size:14px; color:black; vertical-align:middle; } input.btn-border-black { border:none; cursor:pointer; } input.btn-border-black:disabled { background-color:#999999; } a.btn-border-black { text-decoration:none; line-height:56px; } a.btn-border-black:hover { background-color:#edeff2; color:black; } .btn-border-white { padding:18px 40px 18px 40px; border:2px solid white; background-color:transparent; font-size:14px; color:white; vertical-align:middle; } input.btn-border-white { border:none; cursor:pointer; } input.btn-border-white:disabled { background-color:#999999; } a.btn-border-white { text-decoration:none; line-height:56px; } a.btn-border-white:hover { background-color:rgba(255,255,255,0.1); color:white; } /* ---------------------------------- cols ---------------------------------- */ .cols-row, div.cols-row { position:relative; display:block; } .cols-c1of1, div.cols-c1of1, .cols-c1of2, div.cols-c1of2, .cols-c1of4, div.cols-c1of4, .cols-c2of4, div.cols-c2of4 { display:block; float:left; } .cols-c1of1, div.cols-c1of1{width:100%;} .cols-c1of2, div.cols-c1of2, .cols-c2of4, div.cols-c2of4{width:50%;} .cols-c1of4, div.cols-c1of4{width:25%;} .cols-c3of4, div.cols-c3of4{width:75%;} .cols-c1of5, div.cols-c1of5{width:20%;} .cols-c2of5, div.cols-c2of5{width:40%;} .cols-c3of5, div.cols-c3of5{width:60%;} @media (max-width:768px) { .cols-c1of2, div.cols-c1of2, .cols-c2of4, div.cols-c2of4{width:100%;} .cols-c1of4, div.cols-c1of4{width:50%;} .cols-c3of4, div.cols-c3of4{width:100%;} } @media (max-width:480px) { .cols-c1of4, div.cols-c1of4{width:100%;} } /* End */ /* Start:/bitrix/templates/toto/template_styles.css?176099151274559*/ html { width:100%; height:100%; } body { background-color:white; width:100%; height:100%; margin:0; padding:0; } body,table { color:black; } h1, .h1 { color:black; } h2, .h2 { color:black; } h3, .h3 { color:black; } form { margin:0; padding:0; } div.wrap { margin:0 auto; width:94%; max-width:1400px; } div.wrap h1{ padding: 50px 4% 45px 4%; background-color: #F0F0F0; font-size: 36px; font-weight: 500; color: black; text-transform: uppercase; margin-bottom: 0; } div.container{ padding: 0 50px; margin: 60px 0 100px; } /* ---------------------------------- header ---------------------------------- */ div.header { height:160px; } .header div.wrap { position:relative; height:160px; border-bottom:1px solid #cecece; z-index: 10; } @media (min-width: 860px) { div.header, .header div.wrap { height: 130px; } } div.header-logo { float:left; margin-top:53px; width:215px; } div.header-center { float:left; margin-top:53px; } div.header-slogan { font-size:12px; color:#888888; } div.header-menu { margin-top:20px; font-family:'Trivia Slab'; font-size:15px; font-weight:500; text-transform:uppercase; } .header-menu a { margin-left:20px; text-decoration:none; color:black; } .header-menu a:first-child { margin-left:0; } .header-menu a:hover { text-decoration:underline; } .header-menu a.active { color:#888888; } .header-menu a.show { color:#b5a48a; } div.header-info { position:absolute; right:0; margin-top:25px; } div.header-phone { font-size:19px; font-weight:bold; font-family: Arial, sans-serif; color:black; float: right; margin-top: 3px; text-align: left; } .header-phone a{ color:black; } .header-phone .spb {} div.header-call { margin-top:8px; text-align:right; float: right; margin-right: 20px; } .show-room{ display: block; float: right; margin-left: 20px; background: #000; color: #fff; padding: 5px 10px; text-decoration: none; } .show-room:hover{ color: #fff; text-decoration: none; } .header-call a { color:#888989; text-decoration:none; } .header-call a:hover { text-decoration:underline; } div.index-header { width:100%; position:absolute; z-index:5; } .index-header div.wrap { border-color:white; } .index-header div.header-slogan { color:white; } .index-header .header-menu a.show { color:white; } .index-header .header-menu a.active { color:white; } .index-header .header-call a { color:black; } div.header-button { float:right; margin-top:53px; } .header.active div.header-block { background-color:white; position:fixed; left:0; top:0; width:100%; height:100%; z-index:10; -webkit-animation:menuer-show 0.1s ease 0s forwards; -moz-animation:menuer-show 0.1s ease 0s forwards; animation:menuer-show 0.1s ease 0s forwards; } @-webkit-keyframes menuer-show{ from{background-color:transparent;} to{background-color:white;} } @-moz-keyframes menuer-show{ from{background-color:transparent;} to{background-color:white;} } @keyframes menuer-show{ from{background-color:transparent;} to{background-color:white;} } .index-header.active .header-call a { color:#888989; } .index-header.active div.header-slogan { color:#888989; } .index-header.active div.wrap { border-color:#cecece; } .header div.header-search { position: fixed; top: 190px; left:3%; right:3%; height: 30px; opacity: 0; transform: translateY(50%); visibility: hidden; /*transition: all 200ms linear;*/ } .header.active div.header-search { opacity: 1; visibility: visible; transform: translateY(0); } .header-search form { position: relative; } .header-search input { /*width: 100%;*/ margin: 0; padding: 0 10px; height: 30px; box-sizing: border-box; } .header-search button[type="submit"] { position: absolute; top: 0; right: 0; height: 100%; padding: 4px 5px 2px; background: none; border: none; } .header.active div.header-menu { display:block; position:fixed; left:3%; right:3%; top:220px; bottom:10px; overflow:auto; margin-top:0; padding: 0 0 20px; } .header.active .header-menu a { display:block; margin-left:0; line-height:30px; -webkit-animation:links-show 0.5s ease 0s forwards; -moz-animation:links-show 0.5s ease 0s forwards; animation:links-show 0.5s ease 0s forwards; } .header.active .header-menu a.active { color:#888888; } .header.active .header-menu a.show { color:#b5a48a; } @-webkit-keyframes links-show{ from{opacity:0;margin-top:10px;} to{opacity:1;margin-top:0;} } @-moz-keyframes links-show{ from{opacity:0;margin-top:10px;} to{opacity:1;margin-top:0;} } @keyframes links-show{ from{opacity:0;margin-top:10px;} to{opacity:1;margin-top:0;} } .cmn-toggle-switch { display:none; position:relative; overflow:hidden; margin:0; padding:0; width:44px; height:44px; font-size:0; text-indent:-9999px; -webkit-appearance:none; -moz-appearance:none; appearance:none; box-shadow:none; border-radius:none; border:none; cursor:pointer; -webkit-transition:background 0.3s; transition:background 0.3s; background-color:black; float:right; } .cmn-toggle-switch:focus { outline: none; } .cmn-toggle-switch span { -webkit-transition: background 0 0.3s; transition: background 0 0.3s; } .cmn-toggle-switch span::before, .cmn-toggle-switch span::after { -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0; transition-delay: 0.3s, 0; } .cmn-toggle-switch span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, -webkit-transform; transition-property: top, transform; transition-property: top, transform, -webkit-transform; } .cmn-toggle-switch span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } /* active state, i.e. menu open */ .cmn-toggle-switch.active span { background: none; } .cmn-toggle-switch span { display:block; position:absolute; top:20px; left:10px; right:10px; height:3px; background:white; } .cmn-toggle-switch span::before, .cmn-toggle-switch span::after { position:absolute; display:block; left:0; width:100%; height:3px; background-color:#fff; content:""; } .cmn-toggle-switch span::before{top:-8px;} .cmn-toggle-switch span::after{bottom:-8px;} .cmn-toggle-switch.active span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .cmn-toggle-switch.active span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .cmn-toggle-switch.active span::before, .cmn-toggle-switch.active span::after { -webkit-transition-delay: 0, 0.3s; transition-delay: 0, 0.3s; } .search_tips { display: none; position: absolute; top: 39px; right: 0; left: 0; width: 100%; } .search_tips > div { padding: 15px 0; background: #fff; border: 1px solid #bbb; } .search_tips .header { margin: 0px 10px 10px; font-size: 22px; color: #444; } .search_tips ul { margin: 0 10px; padding: 0; list-style: none; } .search_tips ul li { display: flex; align-items: center; justify-content: flex-start; gap: 15px; } .search_tips li + li { margin-top: 15px; } .search_tips .img { display: flex; align-items: center; justify-content: center; width: 50px; height: 40px; border: 1px solid #ddd; text-align: center; } .search_tips .img img { display: block; max-width: 100%; max-height: 100%; } .search_tips a { color: #333; } .search_tips .img a { padding-left: 0; } .search_tips p { padding: 0 10px; } @media (min-width: 660px) { .search_tips {} } @media (max-width:1199px) { div.header-menu { margin-top:20px; } } @media (max-width:1299px) { div.header-menu{ font-size: 14px; } } @media (max-width:1199px) { .cmn-toggle-switch { display:block; } div.header-center { margin-right:20%; } div.header-menu { display:none; } div.header-info { float:left; position:static; margin:7px 10% 0 0; } div.header-phone { float:left; } div.header-call { float:left; margin-right:0; margin-left:20px; } } @media (max-width:768px) { div.header-center { margin-right:10%; } div.header-info { margin-right:0; } } @media (max-width:640px) { div.header-logo { margin-top:33px; } div.header-button { margin-top:33px; } div.header-center { padding-top:5px; margin-right:0; float:none; clear:left; } .show-room{ margin-left: 0; padding: 5px; } div.header-info{ float: none; } div.header-phone{ float: none; } div.header-call{ margin-left: 0; float: none; text-align: left; } div.header, .header div.wrap{ height: 180px; } } @media (max-width: 480px){ div.header-phone{ font-size: 14px; } } @media (min-width: 1024px) { .header div.header-search { top: 150px; } .header.active div.header-menu { top: 190px; } } @media (min-width: 1200px) { .header div.header-search { position: absolute; top: 80px; left: auto; right: 0; opacity: 1; transform: translateY(0); visibility: visible; z-index: 1; transition: all 300ms linear; } .header-search form { width: 100%; transition: all 300ms linear; } .header-search form button { cursor: pointer; } .header-search form input { transition: all 300ms linear; } .header-search input { float: right; } .header-search:not(.shown) input { width: 0px; opacity: 0; visibility: hidden; } .header div.header-search.shown { /*left: calc(3% + 215px);*/ width: calc(100% - 215px); } } /* ---------------------------------- compare ------------------------------------- */ .header-compare{ text-align: right; background: #dbc9bd; } .header-compare .inner{ width: 94%; margin: 0 auto; max-width: 1400px; vertical-align: middle; font-size: 14px; line-height: 26px; padding-top: 5px; height: 30px; } .header-compare .inner a{ color: #fff; font-weight: bold; text-transform: uppercase; padding-left: 20px; text-decoration: none; } @media (max-width: 1024px){ .header-compare, .catalog-element-detail-desc-button a.to-compare, .item-compare{ display: none; } } /* ---------------------------------- index-... ---------------------------------- */ div.index-slider { /*background-color:#9D7E67;*/ height:100%; min-height:100vh; position:relative; } .index-slider div.item { height:100%; } .index-slider div.item .item-pict{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position:center center; background-size:cover; z-index: 3; } .index-slider .item div.wrap { position: relative; padding-top:260px; z-index: 3; } .index-slider div.item-name { width:550px; font-size:48px; line-height:50px; font-weight:bold; color:white; text-transform:uppercase; } .index-slider div.item-link { margin-top:25px; } .index-slider .item-link a.btn-white { font-size:14px; font-weight:normal; line-height:29px; } .index-slider.owl-carousel .owl-stage-outer, .index-slider.owl-carousel .owl-stage, .index-slider.owl-carousel .owl-item { height:100%; min-height:100vh; } .index-slider.owl-carousel .owl-nav { display:none; } .index-slider.owl-carousel .owl-dots { z-index:1; position:relative; width:100%; margin-top:-60px; text-align:center; } .index-slider.owl-carousel .owl-dots .owl-dot { display:inline-block; width:20px; height:20px; margin:0 5px; background:url(/bitrix/templates/toto/./images/dots-grey.png) center -47px no-repeat; } .index-slider.owl-carousel .owl-dots .owl-dot.active { background-position:center 3px; } div.index-products { margin-top:50px; } div.index-products-list { margin-top:30px; } a.index-products-list-item { display:block; float:left; width:50%; height:350px; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; text-decoration:none; transition:background 1s; -moz-transition:background 1s; -webkit-transition:background 1s; } a.index-products-list-item:hover { background-size:auto 110%; } span.index-products-list-item-section { display:block; width:250px; margin:30px 0 0 5%; font-size:18px; font-weight:500; color:black; text-transform:uppercase; } span.index-products-list-item-name { display:block; margin:25px 0 0 5%; font-family:'Trivia Slab'; font-size:24px; font-weight:500; color:black; } .index-products-list-item-name span { padding:6px 12px; background-color:white; } span.index-products-list-item-cost { display:block; margin:5px 0 0 5%; font-family:'Trivia Slab'; font-size:24px; font-weight:700; color:#c8c8c8; } .index-products-list-item-cost span { padding:6px 12px; background-color:white; } .index-products-list-item-cost r { font-size:18px; font-weight:normal; } a.index-products-list-itm { display:block; float:left; width:calc(100% / 9); height:175px; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; color:white; text-decoration:none; transition:background 0.5s; -moz-transition:background 0.5s; -webkit-transition:background 0.5s; } span.index-products-list-itm-name { display:block; opacity:0; margin:25px 0 0 10px; font-size:13px; font-weight:bold; text-transform:uppercase; } a.index-products-list-itm:hover { background-size:auto 110%; } .index-products-list-itm:hover span.index-products-list-itm-name { opacity:1; } div.index-tech { margin-top:80px; margin-bottom:80px; } .index-tech h2 { margin-bottom:35px; } div.index-tech-list { float:left; width:44%; margin-right: 6%; } div.index-tech-video { float:left; width:50%; position: relative; } .index-tech-video video{ width: 100%; cursor: pointer; } .main-video{ position: absolute; z-index: 10; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-size: cover; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-image: url(/files/video/main/video1.jpg); cursor: pointer; } .main-video:after{ content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; background: url(/bitrix/templates/toto/./images/icon-play.png) center center no-repeat; background-size: auto 100%; } .video-player{ padding-bottom: 56.25%; } .video-player:after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; background: url(/bitrix/templates/toto/./images/icon-play.png) center center no-repeat; background-size: auto 100%; } .video-player.video-playing:after { display:none; } a.index-tech-list-item { display: inline-block; width:47%; margin-right:6%; margin-bottom: 25px; text-decoration:none; vertical-align: top; } a.index-tech-list-item:nth-child(2n){ margin-right: 0; } .index-tech-list-item-pic, .item-img{ position: relative; } .index-tech-list-item-pic .index-tech-list-item-icon, .item-icon{ position: absolute; bottom: 20px; left: 20px; width: 50px; height: 50px; background-repeat: no-repeat; background-size: cover; } .index-tech-list-item img { width:100%; } span.index-tech-list-item-name { display:block; font-size:15px; font-weight:bold; color:black; text-transform:uppercase; margin:18px 0 6px 0; } span.index-tech-list-item-desc { display:block; font-size:14px; color:#888888; } a.index-tech-list-item:hover span.index-tech-list-item-name { text-decoration:underline; } div.index-tech-images { margin-top:40px; } .index-tech-images img { margin-top:5px; opacity: .5; width: 50px; height: 50px; } div.index-tech-button { margin-top:40px; } @media (max-height: 450px){ .index-slider .item div.wrap{ padding-top: 170px; } } @media (max-width:1200px) { .index-slider div.item-name { width:50%; font-size:4vw; line-height:4.1vw; } } @media (max-width:1024px) { a.index-products-list-itm{ width: 25%; height: 20vw; background-size: 100% auto; } a.index-products-list-itm:hover{ background-size: 110% auto; } } @media (max-width: 780px){ div.index-tech-list { float: none; width: 100%; margin-bottom: 20px; margin-right: 0; } div.index-tech-video{ float: none; width: 100%; } span.index-products-list-itm-name{ opacity: 1; } a.index-products-list-itm, a.index-products-list-itm:hover{ background-size: cover; } a.index-products-list-item, a.index-products-list-item:hover{ background-size: cover; } .index-slider div.item-nomobile{ display: none; } } @media (max-width:640px) { a.index-products-list-item{ width: 100%; float: none; } span.index-products-list-item-section{ padding: 20px 0 0 5%; margin: 0; } a.index-products-list-itm{ width: 50%; height: 45vw; } } @media (max-width:480px) { a.index-products-list-itm{ width: 50%; height: 160px; background-size: cover; } a.index-tech-list-item{ width: 100%; margin-right: 0; margin-bottom: 25px; } span.index-tech-list-item-name{ margin-top: 10px; } div.index-slider, .index-slider.owl-carousel .owl-stage-outer, .index-slider.owl-carousel .owl-stage, .index-slider.owl-carousel .owl-item{ min-height: 300px; /*height: 300px;*/ } } @media (max-width:320px) { a.index-products-list-itm{ height: 42vw; } .index-slider .item div.wrap{ padding-top: 170px; } } /* ---------------------------------- index-techcenter ---------------------------------- */ div.index-techcenter { padding:80px 0; background-color:black; color:white; } div.index-techcenter-left { float:left; width:50%; } .index-techcenter h2 { margin:0; font-size:52px; color:white; } div.index-techcenter-plus { margin-top:40px; } .index-techcenter-plus div.item { float:left; width:30.6%; margin-left:4%; font-size:18px; font-weight:500; text-transform:uppercase; } .index-techcenter-plus div.item:first-child { margin-left:0; } div.index-techcenter-address { margin:120px 0 40px 0; background:url(/bitrix/templates/toto/./images/icon-map.png) left top no-repeat; padding-left:35px; font-size:15px; line-height:20px; } div.index-techcenter-right { float:left; width:50%; padding:0 50px; box-sizing:border-box; } div.index-techcenter-slider { } .index-techcenter-slider img { max-width:100%; } .index-techcenter-slider.owl-carousel .owl-dots { display:none; } .index-techcenter-slider.owl-carousel .owl-next { position:absolute; right:-40px; top:0; width:30px; height:100%; overflow:hidden; text-indent:-100px; background:url(/bitrix/templates/toto/./images/slider-arrows.png) right center no-repeat; } .index-techcenter-slider.owl-carousel .owl-prev { position:absolute; left:-40px; top:0; width:30px; height:100%; overflow:hidden; text-indent:-100px; background:url(/bitrix/templates/toto/./images/slider-arrows.png) left center no-repeat; } div.index-text { color:#888888; padding:60px 0; } div.index-text h1 { /*font-size:57px;*/ margin:0 0 40px 0; } div.index-text-left { float:left; width:48%; } div.index-text-right { float:left; width:48%; margin-left:4%; } @media (max-width: 1024px){ div.index-techcenter-right{ display: none; } div.index-techcenter-left{ width: 100%; float: none; } } @media (max-width: 780px){ .index-techcenter-plus div.item{ width: 100%; margin-left: 0; margin-bottom: 10px; float: none; } div.index-techcenter-address{ margin-top: 40px; } } @media (max-width: 480px){ div.index-techcenter{ padding: 30px 0; } .index-techcenter h2{ font-size: 30px; } .index-techcenter-plus div.item{ font-size: 16px; line-height: 24px; } div.index-text-left, div.index-text-right{ width: 100%; float: none; margin-left: 0; margin-bottom: 10px; } .index-text h1{ font-size: 36px; } div.index-text{ padding: 30px 0; } } /* ---------------------------------- breadcrumbs ---------------------------------- */ div.breadcrumbs { font-size:12px; color:#888888; padding:12px 0; } .breadcrumbs i { font-style:normal; margin:0 8px; } .breadcrumbs a { color:#888888; text-decoration:none; } .breadcrumbs a:hover { text-decoration:underline; } /* ---------------------------------- catalog ---------------------------------- */ div.catalog-name { padding:50px 4% 45px 4%; background-color:#F0F0F0; font-size:36px; font-weight:500; color:black; text-transform:uppercase; } div.catalog-sections { } a.catalog-sections-item { display:block; float:left; width:20%; height:350px; background-repeat:no-repeat; background-position:center center; background-size:auto 100%; text-decoration:none; transition:background 0.5s; -moz-transition:background 0.5s; -webkit-transition:background 0.5s; } a.catalog-sections-item.item-big { width:50%; height:700px; } a.catalog-sections-item.item-mid { width:50%; } span.catalog-sections-item-name { display:block; max-width:360px; padding:35px 0 0 10%; font-family:'Trivia Slab'; font-size:20px; font-weight:500; color:black; text-transform:uppercase; } .item-big span.catalog-sections-item-name { padding:50px 0 0 5%; } .item-mid span.catalog-sections-item-name { padding:40px 0 0 5%; } a.catalog-sections-item:hover { background-size:auto 110%; } div.catalog-tryout { margin-top:40px; padding:70px 20px 70px 0; background-color:#fafafa; border-top:1px solid #cecece; border-bottom:1px solid #cecece; } div.catalog-tryout-name { float:left; width:55%; padding:0 4%; box-sizing:border-box; font-family:'Trivia Slab'; font-size:50px; font-weight:500; color:black; } div.catalog-tryout-desc { float:left; width:45%; box-sizing:border-box; } div.catalog-tryout-desc-list { padding-top:10px; margin-bottom:40px; } div.catalog-tryout-desc-item { float:left; width:30.6%; margin-left:4%; font-size:15px; font-weight:500; color:black; } div.catalog-tryout-desc-item:first-child { margin-left:0; } .catalog-tryout-desc a.btn-border-black { padding:12px 30px; } a.in-compare{ color: #b28d69; } a.in-compare:hover{ color: #b28d69; } @media (max-width: 1024px){ span.catalog-sections-item-name{ font-size: 14px; } div.catalog-tryout-name, div.catalog-tryout-desc{ float: none; width: auto; padding: 0; } div.catalog-tryout-desc{ margin-top: 20px; } div.catalog-tryout{ padding: 70px 20px; } } @media (max-width: 780px){ a.catalog-sections-item.item-big { height: 47vw; } a.catalog-sections-item.item-mid{ height: 47vw; } a.catalog-sections-item{ width: 50%; height: 47vw; background-size: cover; } a.catalog-sections-item:hover{ background-size: cover; } div.catalog-tryout{ padding: 30px 20px; } } @media (max-width: 480px){ a.catalog-sections-item.item-big, a.catalog-sections-item.item-mid, a.catalog-sections-item{ width: 100%; height: 90vw; float: none; background-size: cover; } div.catalog-tryout-desc-item{ width: auto; float: none; margin: 0 0 15px; } div.catalog-tryout-name{ font-size: 30px; } div.catalog-tryout-desc-list{ margin-bottom: 20px; } } /* ---------------------------------- catalog-section ---------------------------------- */ div.catalog-section { border-right:1px solid #eaeaea; border-bottom:1px solid #eaeaea; box-sizing:border-box; margin-bottom:-41px; } div.catalog-section-item { float:left; width:25%; height:34vw; padding:1%; border-left:1px solid #eaeaea; border-top:1px solid #eaeaea; box-sizing:border-box; } .catalog-section-item div.item-compare { text-align:right; float: right; position: relative; top: 9px; } .catalog-section-item .item-new{ background: url(/bitrix/templates/toto/./images/new_ico.png) left top no-repeat; display: inline-block; min-width: 77px; min-height: 37px; padding-left: 47px; vertical-align: middle; line-height: 37px; font-weight: bold; font-size: 16px; margin-left: 10px; } .catalog-section-item .item-compare a.to-compare { padding:1px 25px 1px 0; background:url(/bitrix/templates/toto/./images/checkbox-compare-border.gif) right top no-repeat; font-size:13px; line-height:16px; color:#78736a; text-decoration:none; } .catalog-section-item .item-compare a.to-compare.active { background-position:right -50px; } .catalog-section-item a.item-link { display:block; text-decoration:none; } .catalog-section-item i.item-img { display:block; text-align:center; line-height:20vw; } .catalog-section-item i.item-img img { max-width:100%; max-height:20vw; vertical-align:middle; } .catalog-section-item span.item-name { display:block; margin-top:5px; font-size:1.1vw; font-weight:bold; color:#b28d69; text-align:center; text-transform:uppercase; } .catalog-section-item a.item-link:hover span.item-name { text-decoration:underline; } .catalog-section-item span.item-cost { display:block; margin-top:10px; font-size:2vw; font-weight:bold; color:#000; text-align:center; font-family: Arial, sans-serif; } .catalog-section-item span.item-cost r { font-size:1.5vw; font-weight:normal; } .catalog-section-item .action-cost{ margin-top: 12px; font-size: 1.5vw; text-align: center; font-family: Arial, sans-serif; color: #000; } .catalog-section-item .action-cost .item-eur-cost{ font-weight: bold; text-align: center; vertical-align: middle; } .catalog-section-item .action-cost .item-rub-cost { color: #ee3a42; font-size: 1.5vw; font-weight: bold; vertical-align: middle; } div.catalog-section-desc-avail { margin: 1vw 0; color:black; line-height: 24px; font-size:16px; font-weight:bold; text-align: center; } div.catalog-section-desc-avail div { display: inline-block; background: url(/bitrix/templates/toto/images/in-stock-label.png) no-repeat; padding-left: 30px; } div.catalog-section-desc-order{ margin: 1vw 0; color:white; line-height: 24px; font-size:16px; font-weight:bold; text-align: center; color: #999; } @media (min-width: 1700px){ .catalog-section-item span.item-name{ font-size: 19px; } .catalog-section-item i.item-img{ line-height: 280px; } .catalog-section-item i.item-img img{ max-height: 250px; } div.catalog-section-item{ max-height: 510px; } .catalog-section-item span.item-cost{ font-size: 35px; } div.catalog-section-desc-avail, div.catalog-section-desc-order{ margin: 12px 0; } } @media (min-width: 480px){ .catalog-section-item .item-head{ min-height: 37px; } } @media (max-width: 1380px){ .catalog-section-item i.item-img img{ max-height: 17vw; } } @media (max-width: 1200px){ div.catalog-section-item{ height: 32vw; } .catalog-section-item span.item-name{ font-size: 14px; } .catalog-section-item .action-cost{ font-size: 24px; } .catalog-section-item .action-cost .item-rub-cost{ font-size: 24px; } .catalog-section-item i.item-img{ line-height: 17vw; } .catalog-section-item i.item-img img{ max-height: 15vw; } div.catalog-section-desc-avail div{ font-size: 14px; background-size: 18px auto; line-height: 18px; padding-left: 24px; } div.catalog-section-desc-order{ font-size: 14px; } } @media (max-width: 1024px){ div.catalog-section-item{ width: 33.3%; } .catalog-section-item span.item-name{ font-size: 1.5vw; } } @media (max-width: 980px){ .catalog-section-item span.item-name{ font-size: 16px; margin-top: 15px; } div.catalog-section-item{ height: 35vw; } .catalog-section-item span.item-cost{ font-size: 20px; } .catalog-section-item span.item-cost r{ font-size: 18px; } .catalog-section-item .action-cost{ font-size: 20px; } .catalog-section-item .action-cost .item-rub-cost{ font-size: 20px; } } @media (max-width: 780px){ div.catalog-section-item{ width: 50%; height: 37vw; } .catalog-section-item span.item-name{ font-size: 14px; } .catalog-section-item .action-cost, .catalog-section-item span.item-cost{ font-size: 18px; } .catalog-section-item .action-cost .item-rub-cost{ font-size: 18px; } } @media (max-width: 680px){ div.catalog-section-item{ height: 45vw; } } @media (max-width: 480px){ div.catalog-section-item{ width: 100%; height: auto; padding: 20px 2%; } .catalog-section-item .item-head{ margin-bottom: 20px; } .catalog-section-item i.item-img{ line-height: 150px; } .catalog-section-item i.item-img img{ max-height: 200px; margin-bottom: 10px; } .catalog-section-item span.item-name{ font-size: 16px; margin: 20px 0; } div.catalog-name{ padding: 20px 4%; font-size: 22px; } .catalog-section-item span.item-cost{ font-size: 20px; } .catalog-section-item span.item-cost r{ font-size: 16px; } .catalog-section-item .action-cost{ font-size: 20px; line-height: 24px; } } /* ---------------------------------- catalog-element ---------------------------------- */ div.catalog-element-detail { background-color:#e0d6c7; position:relative; } div.catalog-element-detail-img { float:left; width:60%; height:48vw; max-height:630px; position:relative; } .catalog-element-detail-img div.item { background-position:center center; background-repeat:no-repeat; background-size:auto 100%; height:100%; } .catalog-element-detail-img img { width:100%; } .catalog-element-detail-img.owl-carousel .owl-stage-outer, .catalog-element-detail-img.owl-carousel .owl-stage, .catalog-element-detail-img.owl-carousel .owl-item { height:100%; } .catalog-element-detail-img.owl-carousel div.owl-nav { display:none; } .catalog-element-detail-img.owl-carousel .owl-dots { z-index:1; position:relative; width:100%; margin-top:-60px; text-align:center; } .catalog-element-detail-img.owl-carousel .owl-dots .owl-dot { display:inline-block; width:20px; height:20px; margin:0 5px; background:url(/bitrix/templates/toto/./images/dots-grey.png) center -47px no-repeat; } .catalog-element-detail-img.owl-carousel .owl-dots .owl-dot.active { background-position:center 3px; } div.catalog-element-detail-desc { float:left; width:40%; box-sizing:border-box; padding:20px 10px 0 30px; } div.catalog-element-detail-desc h1 { font-family:'HelveticaNeueCyr'; font-size:36px; font-weight:500; color:black; text-transform:uppercase; padding: 0; background: none; } div.catalog-element-detail-desc-text { color:#4c4e51; font-size:16px; line-height:24px; max-height: 200px; overflow: hidden; margin-top: 10px; } .catalog-element-detail-desc-text a { color:#000; border-color:#4c4e51; margin-right: 20px; } .catalog-element-detail-desc-text .go-video{ background: url(/bitrix/templates/toto/images/videoicon.png) no-repeat; padding-left: 25px; line-height: 24px; display: inline-block; border-bottom: none; } .catalog-element-detail-desc-text .go-video span{ border-bottom: 1px dashed #000; } .catalog-element-detail-desc-text .go-video:hover span{ border-bottom: none; } div.catalog-element-prop { color: #000; font-size:16px; line-height:20px; margin: 0; } .catalog-element-prop h3 { margin:15px 0; font-size:15px; font-weight:500; font-family: 'HelveticaNeueCyr'; } .catalog-element-prop h3:first-child { margin-top:0; } .catalog-element-prop div.prop-item { margin-top: 10px } .catalog-element-prop .prop-value { font-weight:bold; font-family: Arial, sans-serif; font-size: 14px; word-wrap: break-word; } div.catalog-element-detail-bottom { position:absolute; bottom:-10px; } div.catalog-element-detail-desc-avail { padding-bottom:10px; color:black; background: url(/bitrix/templates/toto/images/in-stock-label.png) no-repeat; padding-left: 30px; line-height: 24px; font-size:16px; font-weight:bold; } div.catalog-element-detail-desc-order{ padding-bottom:15px; color:white; line-height: 24px; font-size:16px; font-weight:bold; } div.catalog-element-detail-desc-cost { font-size:40px; font-family: Arial, sans-serif; line-height:50px; font-weight:bold; color:black; /*padding-bottom:30px;*/ } .catalog-element-detail .action-cost{ padding-bottom: 30px; font-size: 2.5vw; font-family: Arial, sans-serif; color: #000; } .catalog-element-detail .action-cost .item-eur-cost{ font-weight: bold; color: #000; text-align: center; vertical-align: middle; } .catalog-element-detail .action-cost .item-rub-cost { color: #ee3a42; font-size: 2.5vw; font-weight: bold; vertical-align: middle; } .catalog-element-detail .action-info{ color: #ee3a42; font-size: 1.3vw; } .catalog-element-detail-desc-cost r { font-size:44px; font-weight:normal; } .catalog-element-detail-desc-button{ margin-bottom: 30px; } .catalog-element-detail-desc-button a.btn-white { padding:9px 30px 9px 30px; } .catalog-element-detail-desc-button a.btn-border-white { margin-left:10px; padding:9px 20px 10px 20px; font-size:19px; font-weight:500; width: 150px; font-size: 14px; line-height: 16px; text-transform: uppercase; font-weight: bold; color:black; display: inline-block; text-align: center; } .catalog-element-detail-desc-button a.to-compare { padding-left:25px; background:url(/bitrix/templates/toto/./images/checkbox-compare.png) left top no-repeat; font-size:14px; line-height:16px; font-weight: bold; text-transform: uppercase; color:#000; text-decoration:none; /*margin-left: 15px;*/ } .catalog-element-detail-desc-button a.to-compare.active { background-position:left -50px; } div.catalog-element-detail-desc-call { height:110px; padding-top:30px; box-sizing:border-box; } .catalog-element-detail-desc-call a.local { border-color:black; font-size:19px; color:black; } div.catalog-element-tech h2 { margin:45px 0 40px 0; text-transform:uppercase; } .catalog-element-tech-slider a.item { padding:0 20px; text-decoration: none; display: block; } .catalog-element-tech-slider.owl-carousel .owl-item{ text-align: center; } .catalog-element-tech-slider.owl-carousel .owl-dots { display:none; } .catalog-element-tech-slider.owl-carousel .owl-prev { position:absolute; top:0; left:-20px; width:30px; height:100%; overflow:hidden; text-indent:-1000px; background:url(/bitrix/templates/toto/./images/slider-arrows-gray.png) left center no-repeat; } .catalog-element-tech-slider.owl-carousel .owl-next { position:absolute; top:0; right:-20px; width:30px; height:100%; overflow:hidden; text-indent:-1000px; background:url(/bitrix/templates/toto/./images/slider-arrows-gray.png) right center no-repeat; } .catalog-element-tech-slider.owl-carousel .owl-prev:hover, .catalog-element-tech-slider.owl-carousel .owl-next:hover{ opacity: .5 } .catalog-element-tech-slider div.item-name { margin-top:25px; font-size:15px; font-weight:bold; color:black; text-transform:uppercase; } .catalog-element-tech-slider div.item-desc { margin-top:10px; font-size:14px; color:#888888; } div.catalog-element-info { margin-top:70px; border:1px solid #cecece; border-bottom:none; display: table; width: 100%; } div.catalog-set-title{ margin: 45px 0 40px 0; text-align: center; text-transform: uppercase; font-family: 'Trivia Slab'; font-size: 30px; font-weight: 500; } div.catalog-element-info-row { display:table-row; } div.catalog-element-info-text { display:table-cell; width:75%; padding: 0 3% 20px; box-sizing:border-box; border-bottom:1px solid #cecece; font-size:15px; line-height:24px; color:#888888; } .catalog-element-info-name{ font-family: 'HelveticaNeueCyr'; font-size: 28px; font-weight: 500; color: black; text-transform: uppercase; margin: 40px 0; } .catalog-element-info-text h2 { margin:40px 0; font-size:24px; color:#010101; } .catalog-element-info-text h2:first-child { margin-top:0; } .catalog-element-info-text p { margin:10px 0 20px 0; } .catalog-element-info-text .catalog-element-set-name{ font-family:'Trivia Slab'; font-size: 24px; line-height: 30px; font-weight: bold; text-transform: uppercase; color: #000; margin-bottom: 40px; } .catalog-element-info-text .catalog-element-set-name a { text-decoration: underline; color: #000; } .catalog-element-info-text .catalog-element-set-name a:hover{ color: #000; text-decoration: none; } .catalog-element-info-text .catalog-element-set-name span { display: inline-block; margin-left: 15px; color: #cfc5b5; } .catalog-element-info-video video{ max-width: 100%; cursor: pointer; } .catalog-element-info-video .catalog-element-info-name{ margin-bottom: 40px; } .set-item-preview{ float: left; padding: 0 15px 10px 0; } div.catalog-element-info-tech { display:table-cell; width:25%; padding:40px 2% 20px 2%; border-left:1px solid #cecece; border-bottom:1px solid #cecece; background-color:#FFFAF2; font-size:14px; line-height:20px; color:#888888; } .catalog-element-info-tech h3 { margin:40px 0; font-size:15px; font-weight:500; color:#888888; } .catalog-element-info-tech h3:first-child { margin-top:0; } .catalog-element-info-tech div.item-value { margin-bottom:25px; font-weight:bold; color:#414141; } div.catalog-element-info-files { display:table-cell; width:25%; padding:40px 2% 20px 2%; border-left:1px solid #cecece; border-bottom:1px solid #cecece; background-color:#FAFAFA; } .catalog-element-info-files h3 { margin:40px 0; font-size:15px; font-weight:500; color:#888888; } .catalog-element-info-files h3:first-child { margin-top:0; } .catalog-element-info-files div.item { background:url(/bitrix/templates/toto/./images/ico-file.png) left 2px no-repeat; padding-left:23px; margin-bottom:25px; } .catalog-element-info-files div.item a { color:black; } div.catalog-element-info-line { display:table-row; } .catalog-element-info-line div.catalog-element-info-text, .catalog-element-info-line div.catalog-element-info-tech, .catalog-element-info-line div.catalog-element-info-files { padding:5px 0; background-color:white; } div.catalog-element-tryout { margin-top:50px; background-color:black; } div.catalog-element-tryout-left { float:left; width:25%; padding:30px 2%; box-sizing:border-box; color:white; } .catalog-element-tryout-left div.name { font-family:'Trivia Slab'; font-size:40px; font-weight:500; color:white; } .catalog-element-tryout-left div.link { margin-top:40px; padding-left:30px; background:url(/bitrix/templates/toto/./images/icon-check.png) left top no-repeat; font-size:15px; } .catalog-element-tryout-left div.link a { color:white; } div.catalog-element-tryout-img { float:left; width:25%; } .catalog-element-tryout-img img { width:100%; } div.catalog-element-tryout-right { float:left; width:50%; padding:40px 4% 0 4%; box-sizing:border-box; color:white; } div.catalog-element-tryout-list { margin-bottom:70px; } .catalog-element-tryout-list div.item { float:left; width:30.6%; margin-left:4%; font-size:15px; line-height:22px; font-weight:bold; text-transform:uppercase; } .catalog-element-tryout-list div.item:first-child { margin-left:0; } @media (max-width: 1400px){ div.catalog-element-detail-desc h1{ font-size: 28px; } div.catalog-element-detail-desc-cost{ font-size: 40px; line-height: 40px; } div.catalog-element-detail-desc-text { margin-top: 20px; } } @media (max-width: 1280px){ div.catalog-element-detail-desc h1{ font-size: 26px; } div.catalog-element-detail-desc-cost{ font-size: 35px; line-height: 40px; padding-bottom: 10px; } .catalog-element-detail .action-cost .item-eur-cost, .catalog-element-detail .action-cost .item-rub-cost, .catalog-element-detail .action-cost { font-size: 30px; line-height: 36px; } .catalog-element-detail .action-info{ font-size: 18px; line-height: 20px; } div.catalog-element-detail-desc-call{ height: auto; padding-top: 0; margin: 10px 0 20px; } .catalog-element-detail-desc-button a.btn-white{ font-size: 20px; line-height: 24px; padding: 9px 15px 9px 15px; } .catalog-element-detail-desc-button a.btn-border-white{ width: 100px; font-size: 13px; padding: 4px 15px 2px 15px; } div.catalog-element-detail-desc-avail{ padding-bottom: 5px; } div.catalog-element-detail-desc-text{ font-size: 15px; line-height: 20px; margin-top: 15px; } div.catalog-element-prop{ font-size: 15px; line-height: 20px; } div.catalog-element-detail-desc-text{ max-height: none; margin-bottom: 20px; } } @media (max-width: 1180px){ div.catalog-element-tryout-left{ width: 50%; } div.catalog-element-tryout-img{ width: 50%; text-align: center; } div.catalog-element-tryout-img img{ max-width: 100%; width: 50%; } div.catalog-element-tryout-right{ float: none; width: auto; clear: both; } div.catalog-element-detail-desc-text{ margin-bottom: 10px; } .catalog-element-prop div.prop-item{ margin-top: 5px; } div.catalog-element-detail-desc h1{ margin-top: 5px; } } @media (max-width: 980px){ div.catalog-element-detail-img{ float: none; width: auto; height: 68vw; } div.catalog-element-detail-desc{ float: none; width: auto; padding-top: 15px; } div.catalog-element-detail-bottom{ position: static; } .catalog-element-detail-img div.item{ background-size: cover; } .catalog-element-detail-desc-button a.btn-border-white{ width: auto; padding: 12px 15px 10px 15px; } /*div.catalog-element-detail-desc-text{ font-size: 18px; line-height: 26px; } div.catalog-element-prop{ font-size: 16px; line-height: 20px; }*/ } @media (max-width: 780px){ div.catalog-element-info-text{ display: block; width: auto; } div.catalog-element-info-tech{ display: block; width: auto; border-left: none; } div.catalog-element-info-files{ display: block; width: auto; border-left: none; } .catalog-element-info-line div.catalog-element-info-tech, .catalog-element-info-line div.catalog-element-info-files { display: none; } div.catalog-set-title{ margin: 20px 0; } .set-item-preview{ float: none; } div.catalog-element-tryout-left{ float: none; width: auto; } div.catalog-element-tryout-img{ float: none; width: auto; } div.catalog-element-tryout-img{ max-width: 100%; width: auto; } div.catalog-element-tryout-list{ margin-bottom: 30px; } .catalog-element-tryout-list div.item{ width: auto; float: none; margin: 15px 0 0; font-size: 16px; line-height: 24px; } .catalog-element-tryout-left div.name { font-size: 30px; } } @media (max-width: 480px){ .catalog-element-tech-slider.owl-carousel .owl-next{ right: -10px; } .catalog-element-tech-slider.owl-carousel .owl-prev{ left: -10px; } .catalog-element-detail-desc-button a{ display: block; text-align: center; } .catalog-element-detail-desc-button a.btn-border-white{ line-height: 22px; margin: 10px 0 0; } .catalog-element-info-text .catalog-element-set-name span{ margin-left: 0; } .catalog-element-detail-desc-button a.btn-border-white{ display: block; } } /* --------------------------- popup-form -------------------------------------- */ .popup{ width: 500px; } .popup-title{ font-size: 26px; line-height: 48px; text-transform: uppercase; padding: 30px 50px; font-family:'Trivia Slab'; font-weight: bold; } .popup-body{ background: #f3efea; font-size: 16px; line-height: 24px; color: #4c4e51; padding: 50px 50px 70px; } .popup select { width: 235px; height: 44px; margin-top: 25px; padding: 0 10px; color: #838383; font-size: 21px; border: none; outline: none !important; } .popup .input{ width: 215px; font-size: 21px; line-height: 24px; color: #838383; border: none; padding: 10px; margin-top: 25px; } .popup textarea.input{ width: 300px; height: 100px; } .popup .sbmt-btn{ width: 235px; font-size: 21px; line-height: 24px; color: #fff; display: block; margin-top: 15px; background: #595959; text-decoration: none; text-align: center; padding: 10px 0; border: none; cursor: pointer; -webkit-appearance: none; } .popup .result{ font-weight: bold; margin-bottom: 15px; font-size: 22px; line-height: 26px; } .pass-address{ padding: 0 50px 30px 25px; font-size: 14px; margin-left: 50px; line-height: 22px; background: url(/bitrix/templates/toto/images/loc-small.png) no-repeat top left; } .popup .item-info{ font-weight: bold; margin-bottom: 15px; font-size: 16px; line-height: 24px; padding: 0 50px 30px 50px; } .popup .item-info:after{ content: ''; display: block; clear: both; } .popup .item-info img{ float: left; width: 150px; } .popup .item-info-name{ margin-left: 165px; } .feedback .input.error{ border: 1px solid red; } a.feed-btn{ display: inline-block; margin: 10px 0; line-height: normal !important; } @media (max-width: 780px){ .popup{ width: 300px; } .popup-title{ font-size: 18px; line-height: 22px; padding: 20px; } .popup-body{ padding: 16px; font-size: 18px; line-height: 22px; } .popup .input{ width: 240px; font-size: 14px; line-height: 24px; padding: 5px; margin-top: 10px; } .popup textarea.input{ width: 240px; } .popup .sbmt-btn{ width: 260px; } .pass-address{ margin-left: 20px; } } /* -------------------------- service page --------------------------- */ .service-list:after{ display: block; content: ''; clear: both; } .service-list .service-item{ float: left; width: 25%; height: 350px; } .service-pic{ background-repeat: no-repeat; background-position: center center; background-size: cover; } .service-text{ background: #f0f0f0; text-align: center; vertical-align: middle; font-family: 'Trivia Slab'; font-weight: 500; text-transform: uppercase; line-height: 350px; } .service-text div{ display: inline-block; font-size: 20px; line-height: 24px; vertical-align: middle; } .service-bottom{ margin: 70px 0 150px; text-align: center; } .service-bottom .service-bottom-title{ font-size: 56px; line-height: 68px; font-weight: 500; font-family: 'Trivia Slab'; margin-bottom: 30px; } @media (max-width: 1080px){ .service-list .service-item{ height: 250px; } .service-text{ line-height: 250px; } .service-text div{ font-size: 18px; line-height: 22px; } } @media (max-width: 780px){ .service-list .service-item{ width: 50%; height: 320px; } .service-text{ line-height: 320px; } .service-bottom .service-bottom-title{ font-size: 46px; line-height: 58px; } } @media (max-width: 480px){ .service-list .service-item{ width: 50%; height: 150px; } .service-text{ line-height: 150px; } .service-text div{ font-size: 14px; line-height: 16px; padding: 10px; } .service-bottom .service-bottom-title{ font-size: 36px; line-height: 42px; } div.wrap h1{ font-size: 28px; line-height: 32px; line-height: 32px; } .service-bottom{ margin: 40px 0 70px; } } /* ------------------------- contacts -------------------------------- */ .contacts{ background: #fff; color: #000; margin-bottom: 70px; } .contacts:after{ content: ''; display: block; clear: both; } .contacts p{ margin-bottom: 30px; } .contacts .company{ font-family: 'Trivia Slab'; font-size: 28px; line-height: 34px; text-transform: uppercase; margin-bottom: 30px; font-weight: 500; } .contacts .company .red { color: #ff0101; } .contacts-left{ width: 49%; float: left; padding: 65px 50px; box-sizing: border-box; font-size: 16px; line-height: 26px; } .contacts-right{ width: 49%; margin-left: 2%; float: left; } .contacts .email{ color: #ff0101; } #mapContacts{ width: 100%; height: 500px; } #mapContacts [class$="ground-pane"] { filter:url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ -webkit-filter:grayscale(100%); /* Chrome 19+ & Safari 6+ */ } @media (max-width: 780px){ .contacts-left, .contacts-right{ width: auto; float: none; margin-left: 0; } .contacts-left{ padding: 25px 30px 0; margin-bottom: 20px; } #mapContacts{ height: 300px; } .contacts .company{ font-size: 24px; line-height: 30px; } } .cities_tabs { margin-bottom: 15px; padding-bottom: 15px; font-size: 12px; } .cities_tabs .item { display: inline-block; height: 30px; padding: 0 15px; line-height: 32px; text-decoration: none; text-transform: uppercase; border-radius: 5px; color: #fff; background: #000; } .cities_tabs a.item { color: #000; background: #fff; } .cities_tabs a.item:hover { text-decoration: underline; } .cities_tabs div.item { cursor: default; } @media (min-width: 375px) { .cities_tabs { font-size: 14px; } } .cities_tabs.tc { margin: -10px 0 0; padding: 0 4% 20px; background: #F0F0F0; } /* ------------------------ technologies --------------------------- */ .tech-information { padding:30px 0 30px 50px; background:url(/bitrix/templates/toto/./images/click.gif) left center no-repeat; font-size:15px; line-height:18px; font-weight:bold; text-transform:uppercase; } .tech-section-name{ padding: 30px 4% 25px 4%; background-color: #F0F0F0; font-size: 30px; font-weight: 500; color: black; text-transform: uppercase; } .tech-icon-pict{ text-align: center; } .tech-item-name{ text-align: center; position: relative; } .tech-section-item{ margin-bottom: 70px; position: relative; } .tech-section-item:after{ content: ''; display: block; clear: both; } .tech-item{ display: inline-block; width: 16.6%; margin-top: 50px; vertical-align: top; cursor: pointer; } .tech-item-inner{ padding: 0 15px; } .tech-item-desc{ display: none; background: #000; padding: 45px 60px 45px 45px; color: #fff; position: relative; margin-top: 30px; } .tech-line td, .compare .tech-line td{ /*display: none;*/ height: auto; } .tech-line .tech-item-desc{ max-width: 1400px; margin-top: 0; } .tech-item-desc .arr{ content: ''; position: absolute; top: -24px; border: 12px solid transparent; border-bottom: 12px solid #000; margin-left: -12px; } .tech-line .tech-item-desc .arr{ display: none; } .tech-item.active .tech-item-desc { display: block; } .item-desc-left{ float: left; width: 48%; margin-right: 2%; } .item-desc-rigth{ float: left; width: 48%; } .item-desc-full{ width: 70%; } .tech-item-video video{ max-width: 100%; width: 100%; margin-bottom: 45px; cursor: pointer; } .tech-item img{ margin-bottom: 25px; max-width: 92px; width: 100%; } .tech-item-name{ font-size: 15px; line-height: 18px; font-weight: bold; text-transform: uppercase; } .tech-desc-close{ position:absolute; right:25px; top:25px; width:34px; height:34px; background:url(/bitrix/templates/toto/images/desc-close.png) center center no-repeat; cursor:pointer; } .tech-item-info h2{ font-size: 30px; line-height: 38px; font-family:'Trivia Slab'; font-weight: 500; color: #fff; margin-bottom: 30px; } .tech-item-info{ font-size: 18px; line-height: 25px; } .tech-item-info p{ margin: 10px 0; } .tech-item-info img{ max-width: 100%; margin: 10px 15px 10px 0; height: auto; } @media (max-width: 1180px){ .tech-item{ width: 20%; } } @media (max-width: 980px){ .tech-item{ width: 25%; } } @media (max-width: 780px){ .tech-item{ width: 33.33%; } .tech-item-name{ font-size: 13px; } .item-desc-rigth, .item-desc-left{ float: none; width: auto; margin-right: 0; } } @media (max-width: 680px){ .tech-item{ width: 50%; } .tech-item img{ max-width: 50px; } .tech-item-info h2{ font-size: 24px; line-height: 28px; } .tech-item-info{ font-size: 14px; line-height: 22px; } .tech-item-video video{ margin: 30px 0 0; } /*.tech-item-video{ display: none; }*/ .tech-item-info h2{ padding-right: 50px; } } @media (max-width: 480px){ .tech-item-desc{ padding: 20px; } } /* ---------------------------------- about brend page ------------------------------------------- */ .about-top{ margin-bottom: 50px; } .about-top:after{ content: ''; display: block; clear: both; } .about-top-left{ float: left; width: 37%; margin-right: 3%; font-size: 19px; line-height: 24px; font-family:'HelveticaNeueCyr'; font-weight: 500; } .about-top-right{ float: left; width: 60%; font-size: 16px; line-height: 26px; } .about-top-left .about-submenu{ font-family:'Trivia Slab'; font-size: 33px; line-height: 37px; text-transform: uppercase; margin-bottom: 30px; font-weight: 500; } .about-img{ text-align: center; } .about-img img{ max-width: 100%; height: auto; } .about-clean{ margin-top: 70px; } .about-clean:after{ content: ''; display: block; clear: both; } .about-clean-left{ float: left; width: 37%; margin-right: 3%; font-family:'Trivia Slab'; font-size: 33px; line-height: 37px; text-transform: uppercase; font-weight: 500; } .about-clean-right{ float: left; width: 60%; font-size: 16px; line-height: 26px; } .about-concept-list{ margin-top: 50px; } .about-concept-list:after, .about-concept-left:after{ content: ''; display: block; clear: both; } .about-concept-left{ display: table-cell; width: 50%; font-size: 14px; line-height: 20px; vertical-align: top; } .about-concept-right{ display: table-cell; width: 50%; vertical-align: top; background: #f0f0f0; padding: 60px 4%; font-size: 18px; line-height: 28px; } .about-concept-left .about-concept-item{ float: left; width: 48%; margin-right: 2%; border-top: 6px solid #f0f0f0; padding-top: 15px; margin-bottom: 30px; } .about-concept-left .about-concept-item:nth-child(2n+1){ clear: both; } .about-concept-left .about-concept-item .item-title{ font-family:'Trivia Slab'; font-size: 18px; line-height: 24px; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; min-height: 50px; } .about-concept-right .about-concept-item .item-title{ font-family:'Trivia Slab'; font-size: 26px; line-height: 24px; text-transform: uppercase; font-weight: 500; margin-bottom: 40px; } @media (max-width: 980px){ .about-top-right, .about-top-left{ float: none; width: auto; margin-right: 0; } .about-clean-right, .about-clean-left{ float: none; width: auto; margin-right: 0; } .about-clean-left{ margin-bottom: 30px; } .about-concept-right, .about-concept-left{ width: auto; display: block; } } @media (max-width: 480px){ div.container{ padding: 0; margin: 30px; } .about-top-left .about-submenu, .about-clean-left{ font-size: 24px; line-height: 30px; } .about-top-right, .about-clean-right{ font-size: 16px; line-height: 22px; } .about-concept-left .about-concept-item{ float: none; width: auto; margin-left: 0; margin-bottom: 20px; } .about-concept-right .about-concept-item .item-title{ font-size: 18px; line-height: 28px; } .about-concept-left .about-concept-item .item-title{ min-height: auto; } .about-concept-right{ padding: 20px 15px; font-size: 16px; line-height: 22px; } } /* --------------------------------- news page ---------------------------------------- */ div.news-item{ position:relative; border-bottom: 1px solid #cecece; padding-bottom: 50px; margin-bottom: 50px; } div.news-item:last-child{ border-bottom: none; } div.news-img{ float:left; width:50%; height:48vw; max-height:700px; position:relative; } .news-img div.item { background-position:center center; background-repeat:no-repeat; background-size:auto 100%; height:100%; } .news-img img { width:100%; } .news-img.owl-carousel .owl-stage-outer, .news-img.owl-carousel .owl-stage, .news-img.owl-carousel .owl-item { height:100%; } .news-img.owl-carousel div.owl-nav { display:none; } .news-img.owl-carousel .owl-dots { z-index:1; position:relative; width:100%; margin-top:-60px; text-align:center; } .news-img.owl-carousel .owl-dots .owl-dot { display:inline-block; width:20px; height:20px; margin:0 5px; background:url(/bitrix/templates/toto/./images/dots-grey.png) center -47px no-repeat; } .news-img.owl-carousel .owl-dots .owl-dot.active { background-position:center 3px; } div.news-desc { float:left; width:50%; box-sizing:border-box; padding:50px 4% 0 4%; } div.news-desc h1 { font-family:'HelveticaNeueCyr'; font-size:36px; font-weight:500; color:black; text-transform:uppercase; padding: 0; background: none; margin-bottom: 40px; } div.news-desc-text { color:#4c4e51; font-size:16px; line-height:24px; } .news-desc .item-date{ font-size:16px; line-height:24px; font-weight: bold; margin: 10px 0; } @media (max-width: 980px){ div.news-img{ float: none; width: auto; height: 60vw; } div.news-desc{ float: none; width: auto; } .news-img div.item{ background-size: cover; } div.news-desc h1{ font-size: 22px; line-height: 28px; margin-bottom: 20px; } } /* --------------------------------- video page ---------------------------------------- */ div.video-link{ background: #F0F0F0; padding: 0 4% 50px; margin-top: -30px; } .video-link a{ font-size: 13px; color: #4c4e51; text-decoration: none; border-bottom: 1px dashed #4c4e51; margin-right: 15px; text-transform: uppercase; line-height: 26px; white-space: nowrap; } .video-link a.active{ color: #000; font-weight: bold; border-bottom: 1px solid #000; } .video-link a:hover{ border-bottom: 0; } div.video-item{ position:relative; border-top: 1px solid #cecece; margin-top: 50px; padding-top: 50px; margin-bottom: 50px; } .video-list > div.video-item:first-child{ border-top: none; padding-top: 0; } div.video-block{ float:left; width:50%; position:relative; } div.video-block video{ width: 100%; } div.video-desc { float:left; width:50%; box-sizing:border-box; padding:20px 4% 0 4%; } div.video-desc h1 { font-family:'HelveticaNeueCyr'; font-size:36px; font-weight:500; color:black; text-transform:uppercase; padding: 0; background: none; margin-bottom: 40px; } div.video-desc-text { color:#4c4e51; font-size:16px; line-height:24px; } @media (max-width: 980px){ div.video-block{ float: none; width: auto; } div.video-desc{ float: none; width: auto; } div.video-desc h1{ font-size: 22px; line-height: 28px; margin-bottom: 20px; } } @media(max-width: 480px){ div.video-link{ padding-bottom: 30px; } } .more_pager{ text-align: center; margin: 30px 0; } /* ---------------------------------- actions ---------------------------------*/ div.action-item{ position:relative; border-bottom: 1px solid #cecece; padding-bottom: 50px; } div.action-item:last-child{ border-bottom: none; } div.action-img{ float:left; width:50%; height:48vw; max-height:400px; position:relative; } .action-img div.item { background-position:center center; background-repeat:no-repeat; background-size:auto 100%; height:100%; } .action-img img { width:100%; } .action-item .action-video{ float:left; width:50%; position:relative; } .action-item .action-video video{ width: 100%; cursor: pointer; } .action-img.owl-carousel .owl-stage-outer, .action-img.owl-carousel .owl-stage, .action-img.owl-carousel .owl-item { height:100%; } .action-img.owl-carousel div.owl-nav { display:none; } .action-img.owl-carousel .owl-dots { z-index:1; position:relative; width:100%; margin-top:-60px; text-align:center; } .action-img.owl-carousel .owl-dots .owl-dot { display:inline-block; width:20px; height:20px; margin:0 5px; background:url(/bitrix/templates/toto/./images/dots-grey.png) center -47px no-repeat; } .action-img.owl-carousel .owl-dots .owl-dot.active { background-position:center 3px; } div.action-desc { float:left; width:50%; box-sizing:border-box; padding:50px 4% 0 4%; } div.action-desc h1 { font-family:'HelveticaNeueCyr'; font-size:36px; font-weight:500; color:black; text-transform:uppercase; padding: 0; background: none; margin-bottom: 40px; } div.action-desc-text { color:#4c4e51; font-size:16px; line-height:24px; } .action-desc .item-date{ font-size:16px; line-height:24px; font-weight: bold; margin: 10px 0; } @media (max-width: 980px){ div.action-img{ float: none; width: auto; height: 60vw; } .action-img div.item{ background-size: cover; } .action-item .action-video{ float: none; width: auto; } div.action-desc h1{ font-size: 22px; line-height: 28px; margin-bottom: 20px; } div.action-desc{ float: none; width: auto; padding: 20px; } } /* ---------------------------------- compare ------------------------------------ */ .compare__title{ font-size: 16px; line-height: 18px; color: #17709a; margin-bottom: 20px; } .items__remove { position: initial; } .items__remove-text { left:30px; } ul.compare-tags { margin:0 0 30px; padding:10px 0 0 0; } .compare-tags__link { text-decoration: none; color: #888989; font-size: 14px; line-height: 16px; border-bottom: 1px dashed #888989; } .compare-tags__link:hover { color: #888989; text-decoration: none; border-bottom: none; } .compare-tags__item { margin-right: 20px; display: inline-block; vertical-align: top; zoom: 1 !ie; display: inline !ie; } .compare-tags__item.active a{ padding: 7px 10px; background: #F0F0F0; border-radius: 5px; border-bottom: none; } .compare-tags__item.active:hover a{ border-bottom: none; } .compare-groups { display: table; font-size: 16px; } .compare-groups a { display: block; float: left; margin-right: 30px; line-height: 20px; color: #971780; } .compare-groups a.active { color: #999; cursor: default; } .compare { padding:30px 0; overflow-x:auto; } .compare table{ width: 100%; } .compare td { height: 62px; vertical-align: middle; text-align: center; width: auto; } .compare td.header{ width: 240px; padding-left: 10px; text-align: left; } .compare td.header .header-start{ width: 200px; } .compare td.header a{ text-decoration: none; color: #2e2e2e; } .compare .fixed { background: #fff; border-bottom: 1px solid #666; } .compare .fixed + table { margin-top: 375px !important; } .compare .headers { width: 260px; display:table-cell; vertical-align:top; position:relative; } .compare .headers > div { margin-top:270px; width: 260px; } .compare table { border-spacing: 0; border-collapse: collapse; } .compare .headers .title { margin-bottom: 30px; color: #b02597; font-size: 24px; text-transform: uppercase; } .compare .headers a { margin-right: 10px; color: #2e2e2e; border-bottom: 1px dashed; text-decoration: none; } .compare .headers a:hover { text-decoration: none; border-bottom: 0; } .compare .headers a.active { cursor: default; padding: 7px 10px; background:#F7F5F4; border-bottom: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .compare .offer{ position: relative; margin-right: 30px; width: 250px; } .compare .offer > div a { display: block; } .compare .offer table { border-spacing: 0; border-collapse: collapse; } .compare .offer .thumb { vertical-align: middle; width: 250px; height: 250px; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .compare .offer .thumb img { max-width: 100%; max-height: 95%; } .compare .offer .title { overflow: hidden; margin: 10px 0 10px 0; color: black; font-size: 16px; line-height:20px; text-decoration: underline; } .compare .item-cost { margin-bottom: 10px; font-size:24px; font-family: Arial, sans-serif; color:#000; font-weight: bold; } .compare tr.odd{ background: #F0F0F0; } .compare td.offer-cell{ width: 280px; } .compare td.compare-head-cell{ vertical-align: top; } .compare td.technology-desc{ text-align: left; } .favorites .items__separator { width: 92%; margin-left: 103px; } .favorites .items__prices-new { text-align: left; } .items__list_favorites .items__item { position: relative; } .items__remove { display: inline-block; vertical-align: top; zoom: 1 !ie; display: inline !ie; position: absolute; top:-25px; text-decoration: none; } .items__remove:before { content: ""; background: url(/bitrix/templates/toto/images/remove-square.png) 0 0 no-repeat; width: 21px; height: 20px; display: inline-block; vertical-align: top; zoom: 1 !ie; display: inline !ie; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .items__remove:hover .items__remove-text { opacity: 1; text-indent: 0px; text-decoration: underline; color: #888989; } .items__remove-text { display: inline-block; vertical-align: top; zoom: 1 !ie; display: inline !ie; position: absolute; top: 0px; color: #888989; opacity: 0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; font-size: 14px; line-height: 20px; text-indent: -60px; overflow: hidden; text-decoration: none; } .compare .technology .technology-item{ display: block; } .compare .technology .technology-item:hover{ text-decoration: underline; } .compare .technology .technology-img{ width: 50px; display: table-cell; vertical-align: middle; } .compare .technology .technology-name{ padding-left: 10px; display: table-cell; vertical-align: middle; } .compare .technology img{ width: 50px; height: 50px; margin: 5px 0; } .compare .technology a{ text-decoration: none; border-bottom: none; } .cmp-tech-title{ padding-top: 20px; font-size: 16px; font-weight: bold; } .cmp-tech-label{ color: #000; font-size: 14px; font-weight: bold; padding: 30px 0 30px 50px; background: url(/bitrix/templates/toto/./images/click.gif) left center no-repeat; } .params-selector td{ text-align: left; } .params-selector a{ text-decoration: none; color: #888989; font-size: 14px; line-height: 16px; margin-right: 20px; border-bottom: 1px dashed #888989 } .params-selector a.active{ padding: 7px 10px; background: #F0F0F0; border-radius: 5px; border-bottom: none; } .params-selector a:hover { color: #888989; border-bottom: none; } div.catalog-compare-avail { margin: 1vw 0; color:black; line-height: 24px; font-size:16px; font-weight:bold; text-align: center; } div.catalog-compare-avail div { display: inline-block; background: url(/bitrix/templates/toto/images/in-stock-label.png) no-repeat; padding-left: 30px; } div.catalog-compare-order{ margin: 1vw 0; color:white; line-height: 24px; font-size:16px; font-weight:bold; text-align: center; color: #999; } .compare-head-fix{ display: none; background: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 1; } .compare-head-fix:after{ content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 1rem; border-top: 1px solid #e6e6e6; background: linear-gradient(#e6e6e6,hsla(0,0%,100%,0)); } .compare-head-fix .wrap{ padding: 40px 0 20px; overflow: hidden; } .compare-head-fix .cost-line .header{ visibility: hidden; } .compare-head-fix .offer .thumb{ width: 100px; height: 100px; margin: 0 auto; } .compare-head-fix .offer .title{ font-size: 14px; } .compare-head-fix .catalog-compare-avail, .compare-head-fix .catalog-compare-order{ display: none; } .compare-head-fix td{ height: auto; } .compare-head-fix .cost-item{ font-size: 20px; } /* ---------------------------------- social-news ------------------------------- */ #social-news{ margin-top: 25px; } .newsroom { list-style-type: none; padding-left: 0; } .newsroom .wrap{ width: 100%; padding-bottom: 10px; padding-right: 10px; box-sizing: border-box; } .newsroom li{ display: block; float: left; width: 20%; margin: 0px; } .newsroom li.finish { width: 100%; } .newsroom li.finish p { border-radius: 4px; color: #BBBBBB; display: block; font-size: 2.5em; font-weight: bold; line-height: 1.2; min-height: 40px; overflow: hidden; padding: 15px 10px; text-align: center; } .newsroom li .lb { display: none; } .newsroom li .box { background:#f5ede1; position:relative; text-decoration:none; color: #81756a; cursor: pointer; display: block; line-height: 1.3em; overflow: hidden; -webkit-transition:background-color ease 0.2s; -moz-transition:background-color ease 0.2s; transition:background-color ease 0.2s; } .newsroom li .box:hover { text-decoration: none; background-color:#ebe3d6; } .newsroom li .box .socialBadge { width: 42px; height: 42px; padding: 0; position: absolute; bottom: 16px; right: 0; top: 5px; background: url("/bitrix/templates/toto/images/socials.svg") no-repeat -222px -210px; } .no-svg .newsroom li .box .socialBadge { background-image:url("/bitrix/templates/toto/images/social.svg"); } .newsroom li.facebook .box .socialBadge { background-position: 0px 0px; } .newsroom li.instagram .box .socialBadge { background-position:-264px -210px; } .newsroom li.youtube .box .socialBadge { background-position:-306px -210px; } .newsroom li.tumblr .box .socialBadge { background-position:-391px -210px; } .newsroom li .box .infoTxt { position:relative; background:#38a8e0; color:#fff; padding:10px 19.9% 10px 3%; line-height:1.16em; } .newsroom li.facebook .box .infoTxt { background-color:#333; } .newsroom li.instagram .box .infoTxt { background-color:rgba(49,97,152,.9); position:absolute; width:77%; bottom:0; left:0; } .newsroom li.youtube .box .infoTxt { background-color:#cc2a20; } .newsroom li.tumblr .box .infoTxt { background-color:#36465d; } .newsroom li .box .txt { display: block; font-weight: bold; min-height: 40px; padding: 15px 10px; } .newsroom li .box span.desc { display: block; font-weight: normal; min-height: 50px; padding-bottom: 10px; text-align: left; } .newsroom li .box span.title { display: block; font-weight: 400; font-size: 14px; } .newsroom li .box span.date { display: block; font-weight: 400; font-size: 14px; color:#999; } .newsroom .btn.animPlus { padding-left: 2.5em; text-transform: none; font-weight: 400; letter-spacing: normal; float: none; width: 130px; margin: 5em auto 0em; } .newsroom img{ border: medium none; display: block; margin: 0 auto; max-width: 100%; height: auto; outline: medium none; } div.social-news-parent{ margin-bottom: 40px; } .social-news-item{ width: 600px; } .social-news-item .head{ border-bottom: 1px solid #eee; left: 0; margin: 0; min-height: 40px; padding: 25px 45px 15px; top: 0; width: 100%; box-sizing: border-box; } .social-news-item .head h3{ font-size: 1.125em; line-height: 1.2; margin: 0; } .social-news-item .head .date{ font-size: 0.938em; } .social-news-item .embed { min-height: 470px; padding: 15px 45px; text-align: left; } .social-news-item .embed .btn{ background-color: transparent; color: black; vertical-align: middle; display: block; margin: 15px auto; text-align: center; } .social-news-item .embed .info{ padding: 10px 0px; } .socials-more { padding: 18px 40px 18px 40px; border: 2px solid black; background-color: transparent; font-size: 14px; color: black; vertical-align: middle; text-decoration: none; display: inline-block; } @media (max-width: 1200px){ .newsroom li{ width: 25%; } } @media (max-width: 980px){ .newsroom li{ width: 33.333%; } } @media (max-width: 767px){ .newsroom li{ width: 50%; } } @media (max-width: 480px){ .newsroom li{ width: 100%; } } /* ---------------------------------- footer ---------------------------------- */ div.footer { height:118px; border-top:1px solid #cecece; position: relative; } div.footer-logo { float:left; width:115px; margin-top:40px; } .footer-logo a { background:url(/bitrix/templates/toto/./images/toto.ru.png) left top no-repeat; background-size:100% auto; display:inline-block; width:90px; height:25px; } div.footer-info { float:left; margin-top:50px; font-size:13px; color:#636363; } .fb-ico{ width: 24px; height: 24px; background: url(/bitrix/templates/toto/images/fb.png) no-repeat center; display: inline-block; margin: -12px 15px 0; vertical-align: bottom; } .footer-info .link a { margin-left:15px; color:#636363; } .footer-cookie { clear: both; color: #636363; padding-bottom: 20px; } div.footer-right { float:right; } .footer-questions { margin-right:20px; font-size:12px; color:#636363; } .footer-phone { font-size:25px; font-weight:bold; color:black; font-family: Arial, sans-serif; -webkit-appearance: none; } @media (min-width: 481px) { .footer-phone { text-align: right; } } .footer-phone .spb { display: block; } .footer span.link { display: inline-block; margin-bottom: 20px; } div.socials-icon{ display: inline-block; margin-top: -12px; } .socials-icon a{ display: inline-block; width: 24px; height: 24px; margin-left: 10px; vertical-align: bottom; background-repeat: no-repeat; } @media(max-width: 1120px){ div.footer-info { clear:both; margin: 15px 0 30px; } } @media (max-width:990px) { div.footer-right { margin-top:18px; } .footer-questions { display:block; } .footer-phone { margin-top:5px; display:block; } } @media (max-width:768px) { div.footer { height:130px; } } @media(max-width: 680px){ div.socials-icon{ margin-top: 0; position: absolute; left: 120px; top: 40px; } } @media (max-width:480px) { div.socials-icon{ left: auto; right: 0; } div.footer-logo, div.footer-right{ float: none; } div.footer-right { margin-top:20px; text-align: center; } .footer-phone { font-size:20px; } } /* *******************************************************************************/ @media (max-width: 640px) { .dev .header div.wrap { height: 150px; } } @media (max-width: 1199px) { .dev div.header-info { margin: 10px 0; } .dev div.header-phone { display: none; } .dev .header.active div.header-phone { display: block; position: absolute; top: 160px; left: 0; width: 100%; margin-top: 0; } .dev .header.active div.header-phone div { line-height: 30px; } .dev .header.active div.header-menu { padding-top: 80px; } .dev div.header-center { padding-top: 10px; margin-right: 0; } .dev div.header-call { line-height: 26px; margin-top: 0; margin-left: 0; } .dev .index-slider div.item-name { line-height: 4.8vw; } } @media (min-width: 641px) { .dev .header div.wrap { height: 100px; } .dev div.header-logo { margin-top: 30px; } .dev div.header-center, .dev div.header-info { width: 300px; } .dev div.header-button { margin-top: 30px; } .dev div.header-center { margin-top: 30px; padding-top: 0; } .dev .index-slider .item div.wrap { padding-top: 240px; } } @media (min-width: 931px) { .dev div.header-slogan { line-height: 26px; } .dev div.header-center, .dev div.header-info { margin-top: 40px; } .dev div.header-info { width: 280px; padding-right: 20px; } } @media (min-width: 1200px) { .dev .header div.wrap { height: 130px; } .dev div.header-slogan { margin-top: 10px; } .dev div.header-center, .dev div.header-info { width: auto; } .dev div.header-center, .dev div.header-info { margin-top: 30px; } .dev div.header-info { padding-right: 0; } .dev div.header-menu { position: absolute; left: 0; bottom: 15px; display: flex; width: 100%; margin-top: 0; } .dev .header-menu-item { flex-grow: 1; text-align: center; } .dev div.header-call { line-height: 26px; margin-top: 0; } .dev div.header-phone { line-height: 26px; margin-top: 0; } } .checkbox{margin-top:20px} .popup-error{ color: #FF0000FF; font-size: 16px !important; } /* End */ /* /bitrix/templates/toto/fonts/TriviaSlab.css?1645603692284 */ /* /bitrix/templates/toto/fonts/HelveticaNeueCyr.css?16456036883201 */ /* /bitrix/templates/toto/fonts/Rouble.css?1645603692356 */ /* /bitrix/templates/toto/owl.carousel/owl.carousel.css?16456037044677 */ /* /bitrix/templates/toto/owl.carousel/animate.css?164560370372259 */ /* /bitrix/templates/toto/css/flyform.css?16456036351386 */ /* /bitrix/templates/toto/styles.css?17338282603449 */ /* /bitrix/templates/toto/template_styles.css?176099151274559 */