/* Start:/bitrix/templates/mirage/fonts/HelveticaNeueCyr.css?15002932443607*/ @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Roman.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Roman.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Roman.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Roman.svg#HelveticaNeueCyr') format('svg'); font-weight:normal; font-style:normal; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Bold.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Bold.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Bold.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Bold.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Bold.svg#HelveticaNeueCyr') format('svg'); font-weight:bold; font-style:normal; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Italic.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Italic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Italic.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Italic.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Italic.svg#HelveticaNeueCyr') format('svg'); font-weight:normal; font-style:italic; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BoldItalic.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BoldItalic.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BoldItalic.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BoldItalic.svg#HelveticaNeueCyr') format('svg'); font-weight:bold; font-style:italic; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Black.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Black.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Black.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Black.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Black.svg#HelveticaNeueCyr') format('svg'); font-weight:900; font-style:normal; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BlackItalic.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BlackItalic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BlackItalic.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BlackItalic.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-BlackItalic.svg#HelveticaNeueCyr') format('svg'); font-weight:900; font-style:italic; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Light.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Light.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Light.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Light.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Light.svg#HelveticaNeueCyr') format('svg'); font-weight:200; font-style:normal; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-LightItalic.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-LightItalic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-LightItalic.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-LightItalic.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-LightItalic.svg#HelveticaNeueCyr') format('svg'); font-weight:200; font-style:italic; } @font-face { font-family:'HelveticaNeueCyr'; src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Medium.eot'); src:url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Medium.woff') format('woff'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Medium.ttf') format('truetype'), url('/bitrix/templates/mirage/fonts/HelveticaNeueCyr-Medium.svg#HelveticaNeueCyr') format('svg'); font-weight:500; font-style:normal; } /* End */ /* Start:/bitrix/templates/mirage/fonts/OpenSans.css?14891369411804*/ @font-face { font-family:'Open Sans'; font-style:normal; font-weight:400; src:url('/bitrix/templates/mirage/fonts/OpenSans-Regular.eot'); src:url('/bitrix/templates/mirage/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/OpenSans-Regular.woff') format('woff'), url('/bitrix/templates/mirage/fonts/OpenSans-Regular.ttf') format('truetype'); } @font-face { font-family:'Open Sans'; font-style:italic; font-weight:400; src:url('/bitrix/templates/mirage/fonts/OpenSans-Italic.eot'); src:url('/bitrix/templates/mirage/fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/OpenSans-Italic.woff') format('woff'), url('/bitrix/templates/mirage/fonts/OpenSans-Italic.ttf') format('truetype'); } @font-face { font-family:'Open Sans'; font-style:normal; font-weight:500; src:url('/bitrix/templates/mirage/fonts/OpenSans-SemiBold.eot'); src:url('/bitrix/templates/mirage/fonts/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/OpenSans-SemiBold.woff') format('woff'), url('/bitrix/templates/mirage/fonts/OpenSans-SemiBold.ttf') format('truetype'); } @font-face { font-family:'Open Sans'; font-style:italic; font-weight:500; src:url('/bitrix/templates/mirage/fonts/OpenSans-SemiBoldItalic.eot'); src:url('/bitrix/templates/mirage/fonts/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/OpenSans-SemiBoldItalic.woff') format('woff'), url('/bitrix/templates/mirage/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family:'Open Sans'; font-style:normal; font-weight:700; src:url('/bitrix/templates/mirage/fonts/OpenSans-Bold.eot'); src:url('/bitrix/templates/mirage/fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/OpenSans-Bold.woff') format('woff'), url('/bitrix/templates/mirage/fonts/OpenSans-Bold.ttf') format('truetype'); } @font-face { font-family:'Open Sans'; font-style:italic; font-weight:700; src:url('/bitrix/templates/mirage/fonts/OpenSans-BoldItalic.eot'); src:url('/bitrix/templates/mirage/fonts/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/bitrix/templates/mirage/fonts/OpenSans-BoldItalic.woff') format('woff'), url('/bitrix/templates/mirage/fonts/OpenSans-BoldItalic.ttf') format('truetype'); } /* End */ /* Start:/bitrix/templates/mirage/owl.carousel/owl.carousel.css?14891369494112*/ /** * Owl Carousel v2.2.0 * Copyright 2013-2016 David Deutsch * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE) */ /* * Owl Carousel - Core */ .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-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .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 { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; 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 - 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 { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item img.owl-lazy { -webkit-transform-style: preserve-3d; 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/mirage/owl.carousel/owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: -webkit-transform 100ms ease; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); transform: 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; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /* End */ /* Start:/bitrix/templates/mirage/owl.carousel/animate.css?148170204672259*/ @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/mirage/jquery.fly/style.css?14939643292696*/ /* -------------------------------- fly-... -------------------------------- */ div.fly-heap { background-color:#FFC956; padding:40px 40px 30px 40px; max-width:360px; font-size:16px; font-weight:bold; } .fly-heap h2 { margin:-5px 0 0 0; padding:0; font-size:30px; line-height:30px; font-weight:500; color:black; } .fly-heap table { border-collapse:collapse; } div.fly-body { padding:30px 40px 40px 40px; max-width:360px; font-size:16px; } .fly-body .btn-dark { padding:8px 36px 9px 36px; } @media (max-width:425px) { div.fly-heap { padding:20px 20px 15px 20px; } div.fly-body { padding:15px 20px 20px 20px; } } @media (max-width:360px) { div.fly-heap { padding:15px 10px 10px 10px; } div.fly-body { padding:10px 10px 15px 10px; } } /* -------------------------------- 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:19; 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:50%; width:90%; height:100%; z-index:20; border-spacing:0; margin-left: -45%; } table.flyform.fixed { position:absolute; height:auto; } table.flyform.show { display:table; } .flyform table.center { float:center; position:relative; background-color:white; font-size:16px; text-align:left; width: 70%; -moz-box-shadow:0px 1px 10px rbga(0,0,0,0.5); -webkit-box-shadow:0px 1px 10px rbga(0,0,0,0.5); box-shadow:0px 1px 10px rbga(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=315,strength=1), progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135,strength=3); } .flyform div.close { float:right; right:0; position:absolute; z-index:10; } .flyform div.close div { position:relative; left:-5px; top:5px; width:30px; height:30px; background:url(/bitrix/templates/mirage/jquery.fly/close.png) center center no-repeat; cursor:pointer; } @media(max-width: 980px){ table.flyform{ width: 100%; left: 0; margin-left: 0; } } @media(max-width: 580px){ .flyform div.close div{ width:15px; height:15px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; top: 10px; right: 10px; } } /* End */ /* Start:/bitrix/templates/mirage/styles.css?15006227003061*/ *{ outline: none; } body,table { font-family:'Open Sans', sans-serif; font-size:16px; } textarea,input { font-family:'Open Sans', sans-serif; font-size:16px; outline:0; -webkit-appearance: none; } select{ -webkit-appearance: none; } textarea.input, input.input { background-color:white; } input.input:-moz-read-only { background-color:#efefef; } input.input:read-only { background-color:#efefef; } textarea.input:focus, input.input:focus { border-color:#484c4f; } a { text-decoration:underline; color:#4a4542; } a:hover { color:#4a4542; text-decoration:none; } img,iframe { border:0; vertical-align:bottom; } b,strong { color:black; } 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: 'Times New Roman', sans-serif; font-size: 36px; font-style: italic; color: #000000; font-weight: normal; padding: 35px 0 20px; margin: 0; } h2, .h2 { font-family: 'Times New Roman', sans-serif; font-size: 30px; font-style: italic; color: #000000; font-weight: normal; margin: 35px 0 30px; } h3, .h3 { font-family:'Open Sans'; font-size:14px; font-weight:bold; line-height:16px; margin:20px 0; text-transform:uppercase; } ul{ padding-left: 19px; } /* ---------------------------------- 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%;} } /* ---------------------------------- table ---------------------------------- */ .table-row { position:relative; } .table-c1of2, .table-c1of4, .table-c2of4 { float:left; } div.table-c1of2:first-child, div.table-c1of4:first-child, div.table-c2of4:first-child { margin-left:0!important; } div.table-c1of2, div.table-c2of4 { width:48%; margin-left:4%; } div.table-c1of4 { width:23%; margin-left:2.6%; } div.table-c3of4 { width:74%; margin-left:2.6%; } div.table-c1of5 { width:18.4%; margin-left:2%; } div.table-c2of5 { width:38.8%; margin-left:2%; } div.table-c3of5 { width:59.2%; margin-left:2%; } /* End */ /* Start:/bitrix/templates/mirage/template_styles.css?1760976510112582*/ html { width:100%; height:100%; } body { background-color:#f5f5f3; width:100%; height:100%; margin:0; padding:0; color:#000; } body.noscroll{ overflow: hidden !important; height: 100%; position: fixed } .clear{ clear: both; } div.wrap{ width: 100%; max-width: 1600px; margin: 0 auto; position: relative; } div.container{ margin: 0 6.25%; position: relative; } div.container:after{ content: ''; display: block; clear: both; } .mobile{ display: none; } .tablet{ display: none; } .header-phone-number a:hover { text-decoration: none !important; } @media (min-width: 1024px) { a[href^="tel"] { cursor: default !important; } } @media(max-width: 1580px){ div.container{ margin: 0 4%; } } @media(max-width: 990px){ .tablet{ display: block; } } @media(max-width: 580px){ .mobile{ display: block; } } @media(max-width: 780px){ div.container{ margin: 0 25px; } } @media(max-width: 480px){ body, table{ font-size: 14px; } h1, .h1{ font-size: 26px; padding: 15px 0; } h2, .h2{ font-size: 18px; margin: 10px 0; } } /* ---------------------------- buttons ------------------------- */ .btn{ display: inline-block; font-size: 12px; font-weight: 500; color: #fff; border: none; cursor: pointer; text-decoration: none; padding: 10px 12px; background: #4c4c49; } .btn:hover{ background-color: #9d9994; color: #fff; } .btn-big{ font-size: 18px; padding: 10px 20px; } /* ---------------------------- catalog-labels ----------------- */ .label-sklad{ background-color: #909090; } .label-spec{ background-color: #cf5e52; } .label-new{ background-color: #509456; } div.catalog-action-list span{ display: inline-block; font-size: 12px; font-weight: 500; text-transform: uppercase; color: #fff; height: 22px; line-height: 22px; padding: 0 10px; margin-top: 5px; } /* ---------------------------- popup --------------------------- */ div.popup-block{ display: none; } .flyform .popup-block{ display: block; } div.popup-form{ width: 400px; padding: 40px 30px 20px; box-sizing: border-box; } .popup-form input[type="text"], .popup-form input[type="email"], .popup-form select{ padding: 6px 10px 6px 11px; border: 1px solid #d0ccca; font-size: 16px; line-height: 24px; box-sizing: border-box; width: 100%; background: transparent; position: relative; z-index: 2; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; margin: 0 0 10px; } .popup-form select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 6px; background: transparent url(/bitrix/templates/supergres/images/select-arrow-style.png) no-repeat 97% 50%; border-radius: 0; line-height: 22px; } .popup-form .errors{ display: none; color: red; margin: 10px 0; } .popup-form .success{ display: none; margin: 10px 0; font-weight: bold; } .popup-label{ display: inline-block; margin-bottom: 10px; } @media(max-width: 480px){ div.popup-form{ width: 300px; padding: 20px; } .popup-label{ font-size: 14px; } } /* ---------------------------- header ------------------------- */ div.header{ background: #fff; padding: 20px 0; color: #000; border-bottom: 1px solid #dbdbdb; position: relative; z-index: 10; box-sizing: border-box; } .header div.container{ height: 100%; } div.header:after{ display: block; content: ''; clear: both; } .header a{ text-decoration: none; } .header a:hover{ text-decoration: underline; } div.header-logo{ float: left; max-width: 252px; } a.header-min-logo{ display: none; padding: 6px 10px; float: left; } .header-min-logo img{ max-width: 100%; width: 110px; } div.header-center{ float: left; margin-left: 4.5%; } div.header-slogan{ font-size: 18px; line-height: 100%; font-family: 'Times New Roman', sans-serif; color: #a2a2a2; font-style: italic; } div.header-menu{ margin-top: 15px; margin-left: -25px; } .header-menu a{ font-family:'HelveticaNeueCyr'; font-size: 19px; color: #000; margin-right: 7px; padding: 8px 25px 30px 0; display: inline-block; text-decoration: none; border: 1px solid #fff; border-bottom: none; line-height: 18px; font-weight: 900; letter-spacing: -0.38px; } .header-menu a:last-child{ margin-right: 0; padding-right: 0; } .header-menu a:hover{ text-decoration: none; color: #9d9994; } a.header-menu-subopen, a.header-menu-collection{ /*background: #fff url(/bitrix/templates/mirage/./images/sandwich.png) no-repeat 25px 10px;*/ /*padding-left: 50px;*/ } a.header-menu-subopen, a.header-menu-collection { background: #fff url(/bitrix/templates/mirage/./images/sandwich.png) no-repeat 12px 10px; padding-left: 40px; } a.header-menu-subopen:hover, a.header-menu-collection:hover{ background-image: url(/bitrix/templates/mirage/./images/sandwich_hover.png); } .header-menu-collection.active, a.header-menu-subopen.active{ margin-bottom: -1px; padding-bottom: 31px; border-color: #dbdbdb; } div.header-phone{ float: left; margin-left: 2.5%; margin-top: -4px; } div.header-phone-number{ font-family: 'Open Sans', sans-serif; font-size: 19px; } div.header-block-time{ font-size: 13px; position: relative; } div.header-calls, div.header-works{ position: absolute; right: 0; width: 100%; height: 18px; text-align: right; } div.header-works{ top: 30px; } div.header-time-button{ display: inline-block; height: 20px; padding: 0; font-size: 11px; color: #717171; } .header-time-button span, .header-time-button b{ display:block; } .header-calls.active .header-time-button span, .header-calls.active .header-time-button b{ color:#4d9452; } a.header-time-button.opened{ position: absolute; top: 0; right: 0; z-index: 15; } div.header-time-dialog{ z-index: 1; position: absolute; top: -5px; left: -15px; width: 100%; padding: 25px 15px 15px; background: #fff; border: 1px solid #d8d8d8; box-sizing: border-box; display: none; min-width: 200px; text-align: left; } div.header-time-item{ margin-top: 10px; } div.header-calls-title{ line-height: 20px; font-size: 13px; } div.header-calls-time{ font-size: 18px; } div.header-works-title a{ font-size: 18px; } div.header-works-time span{ display: inline-block; width: 50px; color: #949494; } div.header-right{ position: absolute; bottom: 0; right: 0; width: 20%; } div.header-search{ position: relative; } div.header-search-open{ display: none; width: 28px; height: 30px; background: url(/bitrix/templates/mirage/images/search-btn.png) no-repeat 50% 50%; position: relative; z-index: 3; cursor: pointer; } input.header-search-input{ background: #fff; height: 30px; padding: 0 28px 0 7px; border: 1px solid #d8d8d8; width: 100%; box-sizing: border-box; } input.header-search-btn{ position: absolute; top: 0; right: 0; width: 28px; height: 30px; background: url(/bitrix/templates/mirage/./images/search-btn.png) no-repeat 50% 50%; border: none; padding: 0; cursor: pointer; z-index: 3; } div.header-search{ margin-bottom: 15px; } div.header-search-result{ position: absolute; display: none; right: 0; top: 35px; width: 500px; background: #fff; z-index: 20; border: 1px solid #d8d8d8; box-sizing: border-box; text-align: left; } div.header-search-result-title{ background: #4c4c49; font-size: 16px; font-weight: bold; color: #fff; padding: 20px; } .header-search-type ul{ padding-left: 0; list-style-type: none; margin: 0; } .header-search-type ul li{ display: block; padding: 0 15px; padding: 10px 20px; margin: 0; background: #f8f6f5; } .header-search-type ul li:nth-child(odd){ background: #fff; } a.header-cart-link{ display: block; background: #cf1b1b; font-size: 15px; color: #fff; text-align: right; padding-right: 20px; height: 58px; line-height: 58px; } a.header-cart-link:hover{ text-decoration: none; background-color: #9d9994; } span.header-cart-link-label{ display: inline-block; margin-right: 5px; } span.header-cart-link-count{ display: inline-block; margin-right: 5px; font-family: 'HelveticaNeueCyr'; font-size: 16px; } span.header-cart-link-count:before{ content: '('; display: inline-block; } span.header-cart-link-count:after{ content: ')'; display: inline-block; } a.header-page-up{ display: none; width: 38px; height: 40px; background: #4c4c49 url(/bitrix/templates/mirage/images/page-up-arrow.png) no-repeat 50% 50%; } a.header-page-up:hover{ background-color: #f7e6d0; } @media(max-width: 1580px) { div.header-phone { margin-left:4.5%; } div.header-right { width:18%; } } @media(max-width: 1480px) { div.header-center{ margin-left: 3.5%; } div.header-menu{ margin-left: -15px; } .header-menu a{ padding: 8px 10px 30px 0; margin-right: 8px; font-size: 16px; } a.header-menu-collection, a.header-menu-subopen{ background-position: 15px 10px; padding-left: 40px; } div.header-logo{ width: 210px; } div.header-logo img{ max-width: 100%; } } @media(max-width: 1280px){ div.header-right { width:16%; } a.header-cart-link{ padding: 0; text-align: center; } div.header-search{ text-align: right; height: 30px; } div.header-search-open{ display: inline-block; } input.header-search-input{ position: absolute; top: 0; right: 0; border-width: 0; padding-left: 0; width: 1px; z-index: 2; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; } input.header-search-btn{ display: none; } div.search-open input.header-search-input{ width: 300px; border-width: 1px; padding-left: 7px; } div.search-open input.header-search-btn{ display: block; } div.search-open div.header-search-open{ z-index: 1; } } @media(max-width: 1280px){ div.header-slogan{ font-size: 16px; } div.header-menu{ margin-top: 23px; margin-left: -10px; } a.header-menu-subopen{ background-position:10px 11px; padding-left: 40px; } } @media(max-width: 1210px){ a.header-cart-link{ width: 58px; height: 58px; background: #cf1b1b url(/bitrix/templates/mirage/images/small-cart-white.svg) no-repeat 50% 50%; padding: 0; position: relative; line-height: normal; float: right; text-align: right; } span.header-cart-link-label, span.header-cart-link-price{ display: none; } } @media(max-width: 1080px){ div.header-right{ width: auto; } span.header-cart-link-count{ position: absolute; top: 7px; right: 5px; font-size: 14px; line-height: normal; } span.header-cart-link-count:before{ content: ''; display: none; } span.header-cart-link-count:after{ content: ''; display: none; } div.header-menu{ display: none; } div.header-cart{ float: right; } div.header-right:after{ content: ''; display: block; clear: both; } div.header{ border: none; padding-top: 25px; height: 150px; } } @media(max-width: 1080px){ div.header-logo{ float: none; } div.header-center{ float: none; margin: 0; padding: 10px 0; width: 210px; } div.header-slogan{ font-size: 14px; background-position: left 3px; background-size: 25px; -webkit-background-size: 25px; -moz-background-size: 25px; padding-left: 0; } div.header-phone{ position: absolute; top: 0; left: 220px; margin-top: 0; } } @media(max-width: 580px){ div.header .container{ position: static; } div.header{ padding: 15px 0 0; overflow: hidden; } div.header-search{ display: none; } div.header-phone{ display: none; } div.header-center{ padding: 13px 120px 13px 0; width: auto; } } @media (min-width: 768px) { div.header-phone { top: auto; bottom: 0; left: 200px; width: 160px; min-width: 0; padding-right: 0 !important; text-align: right; } div.header-phone-number { font-size: 18px; margin-top: 5px; } a.header-time-button { font-size: 12px; } div.header-block-time { position: absolute; bottom: 0; left: 100%; width: 165px; max-width: none; margin: 0 !important; } .mobile-menu-button, a.header-cart-link { width: 50px !important; height: 40px !important; line-height: 40px !important; } div.header-calls, div.header-works { position: relative; right: auto; top: auto; } div.header-calls { height: auto; } div.header-works { height: 16px; } } @media (min-width: 1081px) { div.header-logo { width: 200px; } div.header-center { width: 450px; margin-left: 3%; } .header-menu a { margin-right: 5px; } a.header-menu-collection, a.header-menu-subopen, a.header-menu-subopen { padding-left: 30px; background-position: 6px 10px; } div.header { height: 145px; padding: 20px 0; } div.header-phone { position: relative; left: auto; width: 160px; margin-top: -10px; padding-bottom: 50px; } div.header-phone-number { margin-top: 0; font-size: 16px; text-align: right; } div.header-block-time { top: auto; bottom: 0; left: auto; right: 0; width: 190px; max-width: 190px; } div.header-time-button { display: block; height: auto; } .header-time-button span, .header-time-button b { display: inline-block; } div.header-time-dialog { left: auto; right: -15px; } div.menu-catalog-title { margin-bottom: 20px !important; } div.menu-catalog-inner, div.menu-collection-inner { margin: 39px 0 0 !important; } .header-menu-collection.active, a.header-menu-subopen.active { padding-bottom: 43px; } } @media (min-width: 1081px) { .mobile-menu-button, a.header-cart-link { width: auto !important; } div.header-right { width: 170px !important; } div.header-phone { width: 170px; } } @media (min-width: 1211px) { div.header-phone { width: auto; } } @media (min-width: 1440px) { div.header { height: 130px; padding: 20px 0 0; } div.header-right { width: 15%; } div.header-phone { margin: 0 0 0 3.5%; padding: 0 180px 0 0 !important; } div.header-phone-number { font-size: 18px; margin-bottom: 5px; } div.header-block-time { right: 0; bottom: auto; top: 50%; margin-top: -23px !important; } div.header-works { margin-top: 5px; } a.header-cart-link { height: 40px; line-height: 40px; } div.header-right { bottom: auto; } div.header-search { margin-bottom: 14px; } div.header-menu { margin-top: 25px; } .header-menu a { padding-bottom: 20px; } .header-menu-collection.active, a.header-menu-subopen.active { padding-bottom: 21px; } a.menu-catalog-close { top: 55px !important; } div.menu-catalog-inner, .menu-collection-inner { padding-top: 55px !important; } } @media (min-width: 1481px) { div.header-center { width: 520px; margin-left: 4%; } div.menu-catalog, div.menu-collection { top: 169px !important; } div.menu-catalog-inner, div.menu-collection-inner { margin-top: 0 !important; } .header-menu-collection.active, a.header-menu-subopen.active { padding-bottom: 22px; } } /* ----------------------- breadcrumb ------------------------ */ div.breadcrumb{ position: absolute; left: 0; bottom: -39px; height: 38px; line-height: 37px; z-index: 3; } div.breadcrumb:after{ content: ''; display: block; clear: both; } .breadcrumb a, .breadcrumb span{ display: block; background-color: rgba(0, 0, 0, 0.75); font-size: 14px; color: #fff; padding: 0 30px 0 18px; float: left; vertical-align: middle; } .breadcrumb a{ padding-left: 30px; margin-right: 1px; position: relative; } .breadcrumb a:before{ content: ''; display: block; position: absolute; width: 4px; height: 8px; background: url(/bitrix/templates/mirage/./images/breadcrumb-arrow.png) no-repeat; top: 50%; margin-top: -4px; left: 18px; } .breadcrumb a:hover{ text-decoration: none; background-color: #5b5b5b; } @media(max-width: 980px){ .breadcrumb a, .breadcrumb span{ font-size: 12px; padding: 0 5px; } .breadcrumb a { padding-left: 15px; } .breadcrumb a:before{ left: 5px; } } @media(max-width: 580px){ div.breadcrumb{ display: none; } } /* ----------------------- header-min ------------------------ */ div.header-min{ position: fixed; top: 0; left: 0; right: 0; width: 100%; height: auto; background: #000; padding: 0; border: none; } .header-min div.header-logo, .header-min div.header-center, .header-min div.header-phone, .header-min div.header-search, .header-min div.mobile-menu-button { display: none; } .header-min a.header-cart-link{ margin-top: 0; padding: 0 15px; height: 40px; line-height: 38px; vertical-align: middle; white-space: nowrap; } .header-min a.header-cart-link-noempty{ background-position: 50% 14px; } .header-min span.header-cart-link-count{ line-height: normal; top: 3px; } .header-min a.header-page-up{ display: block; float: left; } .header-min div.breadcrumb{ position: static; } .header-min .breadcrumb a, .header-min .breadcrumb span{ background: #000; border-right: 1px solid #666; } .header-min .breadcrumb a{ margin-right: 0; } .header-min .breadcrumb a:hover{ background-color: #5b5b5b; } .header-logo img { max-width: 100%; } @media(max-width: 1080px){ .header-min a.header-cart-link { padding: 0; } } @media(max-width: 580px){ .header-min div.container{ margin: 0; } .header-min a.header-cart-link{ width: 38px; background-size: 60% auto; -webkit-background-size: 60% auto; -moz-background-size: 60% auto; } .header-min a.header-cart-link-noempty{ background-position: 50% 16px; } .header-min span.header-cart-link-count{ right: 2px; top: 3px; } .header-min a.header-min-logo{ display: block } } /* ----------------------- menu-catalog ---------------------- */ div.menu-catalog{ position: absolute; left: 0; right: 0; width: 100%; top: 125px; display: none; z-index: 10; } div.menu-catalog a{ text-decoration: none; } div.menu-catalog a:hover{ text-decoration: underline; } div.menu-catalog-inner, .menu-collection-inner{ padding: 35px 6.25% 50px; background: #fff; position: relative; display: none; } div.menu-catalog-inner.active, div.menu-collection-inner.active{ display: block; } .menu-collection-inner:after, div.menu-catalog-inner:after{ content: ''; clear: both; display: block; } div.menu-catalog-left{ float: left; width: 65.8%; margin-right: 1.5%; } div.menu-catalog-center{ float: left; width: 37%; } div.menu-catalog-right{ float: left; width: 20%; margin: 35px 0 0 3%; } div.menu-catalog-title{ font-size: 15px; color: #000; margin-bottom: 15px; } div.menu-catalog-area{ margin-left: -2%; padding: 6px 0; } div.menu-catalog-area:after{ content: ''; display: block; clear: both; } a.menu-catalog-area-item{ width: 23%; margin: 0 0 22px 2%; font-size: 18px; vertical-align: top; float: left; line-height: 18px; } a.menu-catalog-area-item:nth-child(1){ width: 48%; } .menu-catalog-area-item span.item-image{ display: block; margin-bottom: 5px; } a.menu-catalog-area-item:nth-child(1) span.item-image{ max-height: 250px; } a.menu-catalog-area-item:nth-child(1) span.item-image img{ max-width: none; } a.menu-catalog-area-item:nth-child(3){ float: right; } a.menu-catalog-area-item:nth-child(3) span.item-image img{ max-width: none; height: 250px; } a.menu-catalog-area-item:nth-child(3) span.item-image{ max-height: 250px; } a.menu-catalog-area-item:nth-child(5){ clear: left; } .menu-catalog-area-item span.item-image{ max-height: 100px; overflow: hidden; } .menu-catalog-area-item span.item-image img{ max-width: 100%; min-height: 100px; } a.menu-catalog-area-item span.item-desc{ font-family:'HelveticaNeueCyr'; font-size: 15px; font-weight: bold; line-height: 18px; } .texture-items-wrap{ margin-top: 7px; position: relative; } .texture-items-wrap a.texture-item{ width: 26%; min-width: 96px; margin-right: 1.3%; font-size: 16px; line-height: 64px; height: 70px; position: relative; margin-top: 5px; text-align: center; text-decoration: none; color:#fff; } .texture-title{ font-size: 15px; } .texture-item img{ position: absolute; width: 100%; height: 68px; overflow: hidden; text-align: center; left: 0; } .texture-item__name { vertical-align: middle; position: relative; z-index: 1; } .menu-catalog-right__texture-wrap{ margin-top: 25px; } .menu-catalog-right__sections-wrap{ padding: 4px 6px 13px; background-color: #f5f5f3; } .menu-catalog-collections{ width: 37%; float: left; } .menu-catalog-collections-right{ width: 62%; float: right; } div.menu-catalog-collections:after{ content: ''; clear: both; display: block; } .menu-catalog-collections div.col{ float: left; width: 31.33%; margin-left: 2%; }.menu-catalog-collections div.col:first-child{ margin-left: 0; } .menu-catalog-collections a.menu-collections-right__sections-item, .menu-catalog-collections a{ font-family:'HelveticaNeueCyr'; font-size: 15px; font-weight: 500; color: #5c5c5c; display: block; margin-top: 11px; line-height: 20px; text-transform: uppercase; } .menu-catalog-collections-right a.menu-collections-right__sections-item{ float: left; margin-right: 20px; max-width: 273px; overflow: hidden; } .menu-catalog-collections a:first-child{ margin-top: 0; } a.menu-catalog-collections-opt, a.menu-catalog-collections-all{ font-family:'HelveticaNeueCyr'; font-size: 15px; line-height: 20px; color: #000; font-weight: 900; margin-left: 20px; display: inline-block; } a.menu-catalog-collections-opt:before, a.menu-catalog-collections-all:before{ content: ''; display: inline-block; width: 8px; height: 14px; vertical-align: middle; background: url(/bitrix/templates/mirage/./images/grey-arrow-right.png) no-repeat; margin-right: 5px; } a.menu-catalog-collections-opt:before{ margin-right: 8px; } div.menu-catalog-right a.menu-catalog-collections-opt{ width: 80%; display: block; margin-left: 0; font-size: 15px; margin-top: 23px; padding-left: 5px; } div.menu-catalog-right { float: left; width: 32.7%; margin: 42px 0 0 0; box-sizing: border-box; padding: 0px 0px 20px; } div.menu-catalog-right a{ font-size: 18px; line-height: 120%; color: #423c36; display: inline-block; margin-top: 5px; width: 48%; margin-right: 2%; float: left; box-sizing: border-box; overflow: hidden; } .menu-catalog-right__special{ width: 80%; margin-top: 15px; } div.menu-catalog-right__special a{ width: auto; padding: 5px 10px; color:#fff; } .menu-catalog-right a.menu-catalog-right-opt{ font-size: 14px; line-height: 20px; color: #000; font-weight: 500; margin-top: 25px; padding: 0; display: block; } a.menu-catalog-close{ display: block; position: absolute; width: 24px; height: 24px; top: 35px; right: 6.25%; background: url(/bitrix/templates/mirage/images/menu-catalog-close.png) no-repeat; z-index: 1; } .sections-item__name{ display: block; font-size: 15px; margin-top: 7px; font-weight: bold; } .sections-item__img{ width: auto; max-height: 176px; } a.mobile-collection, div.menu-catalog-main{ display: none; } div.menu-catalog-overlay{ display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.55); z-index: 3; } @media(min-width: 981px){ div.menu-catalog .container{ margin: 0; } } @media(max-width: 1600px){ div.menu-catalog-inner{ margin: 0; } } @media(max-width: 1580px){ div.menu-catalog-inner{ padding-left: 4%; padding-right: 4%; } a.menu-catalog-close{ right: 4%; } } @media(max-width: 1180px){ .texture-items-wrap a.texture-item{ min-width: 96px; font-size: 14px; } } @media(max-width: 1080px){ .menu-catalog-collections-right{ margin-top: 25px; width: 100%; } .menu-catalog-collections-right a.menu-collections-right__sections-item{ margin-top: 25px; } .sections-item__name{ color:#fff; } .menu-collections-right__sections-item{ margin-top: 25px; } div.menu-catalog-inner, .menu-collection-inner{ display: block; background:none; margin-top: 0; padding: 20px 0 50px; } .menu-catalog-collections{ width: 100%; } .menu-collection-inner div.col{ width: 49%; } .menu-catalog-right__sections-wrap{ background-color: #000; } .texture-items-wrap a.texture-item{ width: 46.7%; float: left; margin-right: 3.3%; line-height: 64px; height: 70px; position: relative; margin-top: 5px; text-align: center; text-decoration: none; color: #fff; } a.menu-catalog-area-item:nth-child(3){ float: none; } .menu-catalog-area-item span.item-image{ margin-bottom: 5px; } a.menu-catalog-area-item{ width: 48%; margin-bottom: 15px; font-size: 14px; } .menu-catalog-collections a{ font-size: 14px; color:#fff; } div.menu-catalog-right a{ font-size: 14px; } div.menu-catalog{ display: block !important; position: fixed; right: -340px; left: auto; /*top: 125px;*/ top: 0; width: 100%; height: 100%; box-sizing: border-box; padding-top: 150px; background-color: black; width: 320px; -webkit-box-shadow: 3px 11px 20px 1px rgba(0,0,0,0.7); -moz-box-shadow: 3px 11px 20px 1px rgba(0,0,0,0.7); box-shadow: 3px 11px 20px 1px rgba(0,0,0,0.7); -webkit-transition: right 0.5s ease; -moz-transition: right 0.5s ease; -o-transition: right 0.5s ease; transition: right 0.5s ease; box-sizing: border-box; z-index: 9; color: #fff; overflow: auto; } div.menu-catalog a:hover{ text-decoration: none; } .menu-catalog div.container{ margin: 0 25px; } div.menu-catalog.active{ right: 0; } div.menu-catalog-inner{ background: none; padding: 30px 0 40px; } a.mobile-collection{ display: block; font-size: 15px; color: #fff; } div.menu-catalog-title{ display: none; } div.menu-catalog-left, div.menu-catalog-center, div.menu-catalog-right{ float: none; width: auto; margin: 15px 0 0; padding-top: 15px; border-top: 1px solid #838383; } div.menu-catalog-area{ margin-left: 0; } a.menu-catalog-area-item{ display: block; float: none; width: auto; padding: 5px 0; margin: 0; } a.menu-catalog-area-item span.item-image{ display: none; color: #fff; } a.menu-catalog-area-item span.item-desc{ display: inline-block; font-size: 15px; line-height: 18px; color: #fff; } div.menu-catalog-center{ display: none; } div.menu-catalog-right a, .menu-catalog-right a.menu-catalog-right-opt{ display: block; float: none; width: auto; margin: 0; padding: 5px 0; background: none; font-size: 15px; color: #fff; font-weight: normal; } a.menu-catalog-close{ display: none; } div.menu-catalog-main{ display: block; } .menu-catalog-main a{ display: block; font-size: 15px; color: #fff; margin: 15px 0 0; padding-top: 15px; border-top: 1px solid #838383; } .menu-catalog-main a.nomobile{ display: none; } } @media(max-width: 480px){ div.menu-catalog{ width: 100%; right: -480px; } } /* ----------------------- mobile-menu ------------------------ */ .mobile-menu-button{ display: none; width: 58px; height: 58px; position: relative; float: left; background: #000; } .cmn-toggle-switch { top: 50%; left: 50%; margin-top: -10px; margin-left: -13px; display:none; position:absolute; overflow:hidden; padding:0; width:26px; height:20px; 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:#000; } .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:9px; left:0px; right:10px; height:3px; background:#fff; width: 32px; } .cmn-toggle-switch span::before, .cmn-toggle-switch span::after { position:absolute; display:block; left:0px; width: 26px; height:3px; background-color:#fff; content:""; } .cmn-toggle-switch span::before{top:-6px;} .cmn-toggle-switch span::after{bottom:-6px;} .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; } div.mobile-menu{ display: none; } div.mobile-menu-phone-number{ padding-top: 25px; font-family: 'HelveticaNeueCyr'; font-size: 20px; } div.mobile-menu-phone-number a{ color: #fff; text-decoration: none; } div.mobile-menu-search{ position: relative; margin-top: 25px; } input.mobile-menu-search-input{ background: #242424; height: 34px; padding: 0 28px 0 7px; border: 1px solid #838383; width: 100%; box-sizing: border-box; color: #fff; } input.mobile-menu-search-btn{ position: absolute; top: 0; right: 0; width: 28px; height: 30px; background: url(/bitrix/templates/mirage/./images/white-search-btn.png) no-repeat 50% 50%; border: none; padding: 0; cursor: pointer; z-index: 3; } @media(max-width: 1080px){ .mobile-menu-button{ display: block; } .cmn-toggle-switch{ display:block; } } @media(max-width: 580px){ div.mobile-menu{ display: block; } } /* ----------------------- content ------------------------ */ div.content{ background: #fff; padding-bottom: 70px; padding-top: 38px; } div.content img{ max-width: 100%; } div.content p{ margin: 5px 0 20px; line-height: 24px; } div.index-content{ padding-top: 0 !important; } div.index-content h1{ font-family: 'Times New Roman', sans-serif; font-size: 38px; font-style: italic; color: #000; text-align: center; } div.index-content h2{ font-family: 'Times New Roman', sans-serif; font-size: 38px; font-style: italic; color: #000; margin: 20px 0; text-align: center; } @media(max-width: 580px){ div.content{ padding: 0 0 30px; } } @media(max-width: 480px){ div.index-content h1, div.index-content h2{ font-size: 20px; margin: 10px 0; } div.content{ padding: 0 0 30px; } div.index-content{ padding-top: 0; } } /* ----------------------- index-slider ---------------------- */ div.index-top-carousel{ position: relative; } div.index-slider{ margin-bottom: 60px; } a.index-slider-item{ display: block; position: relative; height: 48vw; max-height: 764px; min-height: 500px; text-decoration: none; } div.index-slider-pict{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; z-index: 2; } div.index-slider-info{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; color: #fff; z-index: 3; padding: 0 11.25%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-direction: column; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; box-sizing: border-box; text-align: center; } div.index-slide-label{ font-family: 'Times New Roman', sans-serif; font-size: 48px; font-style: italic; text-transform: lowercase; line-height: 100%; } div.index-slider-name, div.collection-slider-name{ font-family: 'HelveticaNeueCyr'; font-size: 121px; font-weight: 900; text-transform: uppercase; letter-spacing: -.38px; } div.index-slider-price{ padding:7px 15px; text-align: center; font-family: 'HelveticaNeueCyr'; font-size: 16px; color: #fff; background: rgba(0, 0, 0, 0.5); margin-top: 5px; } .index-slider-price big{ font-size: 24px; font-weight: 900; } .index-slider.owl-carousel .owl-nav .owl-prev, .index-slider.owl-carousel .owl-nav .owl-next { position:absolute; width:40px; height:100%; top:0; text-indent:-999px; overflow:hidden; } .index-slider.owl-carousel .owl-nav .owl-prev { left:0; padding-left: 6.25%; } .index-slider.owl-carousel .owl-nav .owl-next { right:0; padding-right: 6.25%; } .index-slider.owl-carousel .owl-nav .owl-prev:before, .index-slider.owl-carousel .owl-nav .owl-next:before { display:block; content:''; width:40px; height:40px; position:absolute; top:50%; text-indent:-1000px; overflow:hidden; border-radius:50%; margin-top: -20px; } .index-slider.owl-carousel .owl-nav .owl-prev:before { right:0px; background:url(/bitrix/templates/mirage/images/slider_arrow-left.png) 45% 50% no-repeat; background-color: rgba(255,255,255,0.95); } .index-slider.owl-carousel .owl-nav .owl-next:before { left:0px; background:url(/bitrix/templates/mirage/images/slider_arrow-right.png) 50% 50% no-repeat; background-color: rgba(255,255,255,0.95); } .index-slider.owl-carousel .owl-nav .owl-prev:hover:before{ background:rgba(0,0,0,0.75) url(/bitrix/templates/mirage/images/slider_arrow-left_hover.png) 45% 50% no-repeat; } .index-slider.owl-carousel .owl-nav .owl-next:hover:before{ background:rgba(0,0,0,0.75) url(/bitrix/templates/mirage/images/slider_arrow-right_hover.png) 50% 50% no-repeat; } .index-slider.owl-carousel .owl-item .index-slider-pict{ transition: 0s linear; -webkit-transform: scale(1); transform: scale(1); } .index-slider.owl-carousel .owl-item.active .index-slider-pict{ transition: 75s ease-out; -webkit-transform: scale(1.5); transform: scale(1.5); } div.index-slider-nav{ position: absolute; left: 10px; right: 10px; bottom: 15px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } a.index-slider-nav-item{ font-family:'HelveticaNeueCyr'; display: inline-block; font-size: 16px; color: #fff; margin-left: 15px; padding: 5px 15px; text-decoration: none; } a.index-slider-nav-item:first-child{ margin-left: 0; } a.index-slider-nav-item.active{ background: rgba(0,0,0,0.4); } a.index-down-page{ position: absolute; width: 50px; height: 50px; background: url(/bitrix/templates/mirage/./images/white-arrow-bottom.png) no-repeat 50% 50%; z-index: 5; bottom: 10px; right: 6.25%; margin-right: -13px; } @media(max-width: 1600px){ div.index-slide-label{ font-size: 3.5vw; } div.index-slider-name, div.collection-slider-name{ font-size: 5vw; } } @media(max-width: 1580px){ a.index-down-page{ right: 4%; } .index-slider.owl-carousel .owl-nav .owl-prev{ padding-left: 4%; } .index-slider.owl-carousel .owl-nav .owl-next{ padding-right: 4%; } } @media(max-width: 1280px){ div.index-slider{ margin-bottom: 40px; } a.index-slider-item{ height: 44vw; max-height: 620px; min-height: 350px; } a.index-slider-nav-item{ font-size: 14px; margin-left: 10px; padding: 5px; } } @media(max-width: 980px){ div.index-slide-label{ font-size: 34px; } div.index-slider-name, div.collection-slider-name{ font-size: 46px; } div.index-slider-price big{ font-size: 18px; } div.index-slider-example{ display: none; } div.index-slider-nav{ display: none; } } @media(max-width: 780px){ a.index-down-page{ right: 25px; } div.index-slider{ margin-bottom: 30px; } a.index-slider-item{ height: 350px; } div.index-slide-label{ font-size: 32px; } div.index-slider-name, div.collection-slider-name{ font-size: 42px; } .index-slider.owl-carousel .owl-nav .owl-prev{ padding-left: 25px; } .index-slider.owl-carousel .owl-nav .owl-next{ padding-right: 25px; } div.index-slider-info{ padding: 0 95px; } } @media(max-width: 580px){ a.index-down-page{ display: none; } div.index-slider{ margin-bottom: 25px; } a.index-slider-item{ height: auto; max-height: none; min-height: 0; } .index-slider.owl-carousel .owl-nav .owl-prev, .index-slider.owl-carousel .owl-nav .owl-next { height: 260px; } .index-slider.owl-carousel .owl-nav .owl-prev { padding-left: 10px; } .index-slider.owl-carousel .owl-nav .owl-next { padding-right: 10px; } .index-slider.owl-carousel .owl-nav .owl-prev:before, .index-slider.owl-carousel .owl-nav .owl-prev:hover:before { background:url(/bitrix/templates/mirage/images/mobile-slider-left.png) 45% 50% no-repeat; background-color: none; } .index-slider.owl-carousel .owl-nav .owl-next:before, .index-slider.owl-carousel .owl-nav .owl-next:hover:before { background:url(/bitrix/templates/mirage/images/mobile-slider-right.png) 50% 50% no-repeat; background-color: none; } div.index-slider-pict{ position: static; height: 260px; } div.index-slider-info{ position: static; height: auto; margin: 15px auto; padding: 0; color: #4c4c49; display: block; text-align: center; } div.index-slide-label{ font-size: 20px; padding-left: 20px; background: url(/bitrix/templates/mirage/images/grey-arrow-right.png) no-repeat 0 50%; } div.index-slider-name, div.collection-slider-name{ font-size: 20px; padding: 10px; } div.index-slider-price{ display: none; } } /* --- widescreen (1280 x 720) ---*/ @media(max-height: 760px) and (min-width: 1281px){ a.index-slider-item{ height: 35vw; min-height: 500px; } } @media(max-height: 760px) and (min-width: 981px) and (max-width: 1280px){ a.index-slider-item{ height: 42vw; min-height: 400px; } } @media(max-height: 600px) and (min-width: 981px){ a.index-slider-item{ height: 30vw; min-height: 250px; } div.index-slider-example { display: none; } } /* --- end wide screen ---*/ /* ----------------------- index-slider-example ---------------------------- */ div.index-slider-example{ width: 183px; height: 183px; line-height: 183px; border: 1px solid #edd0ae; /*-webkit-perspective: 300px; -moz-perspective: 300px; -ms-perspective: 300px; perspective: 300px;*/ text-align: center; } .index-slider-example div.cube{ width: 120px; /*max-width: 120px;*/ height: 120px; position: relative; /*-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(90deg); -o-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg);*/ vertical-align: middle; display: inline-block; } /*.index-slider-example.animate{ -webkit-animation: test 3s cubic-bezier(0.170, 0.435, 0.835, 0.565) backwards; -moz-animation: test 3s cubic-bezier(0.170, 0.435, 0.835, 0.565) backwards; animation: test 3s cubic-bezier(0.170, 0.435, 0.835, 0.565) backwards; } .index-slider-example.noanimate{ -webkit-animation: none !important; -moz-animation: none !important; animation: none !important; } .index-slider-example .cube.animate, .index-slider-example .cube.animate-again { -webkit-animation: rotate 3s cubic-bezier(0.170, 0.435, 0.835, 0.565) backwards; -moz-animation: rotate 3s cubic-bezier(0.170, 0.435, 0.835, 0.565) backwards; animation: rotate 3s cubic-bezier(0.170, 0.435, 0.835, 0.565) backwards; } .index-slider-example .cube.noanimate{ -webkit-animation: none !important; -moz-animation: none !important; animation: none !important; } .index-slider-example div.side{ width: 100%; height: 100%; position: absolute; } .index-slider-example div.left, .index-slider-example div.right{ width:4px; background: #c5b5aa; top: 0; bottom: 0; height: auto; overflow: hidden; display: none; } .index-slider-example div.right{ right: 0; } .index-slider-example div.left{ left: 0; } .index-slider-example div.left { -webkit-transform: translateX(-50%) rotateY(90deg); -o-transform: translateX(-50%) rotateY(90deg); -moz-transform: translateX(-50%) rotateY(90deg); -ms-transform: translateX(-50%) rotateY(90deg); transform: translateX(-50%) rotateY(90deg); } .index-slider-example div.right { -webkit-transform: translateX(50%) rotateY(90deg); -o-transform: translateX(50%) rotateY(90deg); -moz-transform: translateX(50%) rotateY(90deg); -ms-transform: translateX(50%) rotateY(90deg); transform: translateX(50%) rotateY(90deg); } .index-slider-example div.front{ -webkit-transform: translateZ(-2px); -o-transform: translateZ(-2px); -moz-transform: translateZ(-2px); -ms-transform: none !important; transform: translateZ(-2px); }*/ .index-slider-example div.front { width: 100%; height: 100%; line-height: 120px; } .index-slider-example div.front img{ display: none; /*vertical-align: top; max-width: 120px; max-height: 120px;*/ vertical-align: middle; } .index-slider-example div.front img.active{ display: inline-block; } @-webkit-keyframes rotate{ from{ -webkit-transform: rotateY(90deg); } to{ -webkit-transform: rotateY(270deg); } } @-moz-keyframes rotate{ from{ -moz-transform: rotateY(90deg); } to{ -moz-transform: rotateY(270deg); } } @keyframes rotate{ from{ -webkit-transform: perspective(300px) rotateY(90deg); transform: perspective(300px) rotateY(90deg); -ms-transform: rotateY(90deg); } to{ -webkit-transform: perspective(300px) rotateY(270deg); transform: perspective(300px) rotateY(270deg); -ms-transform: rotateY(270deg); } } /* ----------------------- index-text ---------------------------- */ div.index-text{ margin-top: 25px; } div.index-text:after{ content: ''; display: block; clear: both; } div.index-text-col{ float: left; width: 48%; margin-left: 4%; line-height: 24px; } div.index-text-col:first-child{ margin-left: 0; } .index-text-col-full{ width: 100%; margin-top: 25px; } @media(max-width: 780px){ div.index-text-col{ float: none; width: auto; margin-left: 0; margin-top: 15px; } div.index-text-col:first-child{ margin-top: 0; } } @media(max-width: 480px){ div.index-text{ margin-top: 10px; } } /* ----------------------- index-collection ---------------------------- */ div.index-collection{ background: #413f3e; padding: 50px 0; margin-top: 60px; } div.index-collection-title{ font-family: 'Times New Roman', sans-serif; font-size: 28px; color: #fff; font-style: italic; margin-bottom: 40px; text-align: center; } a.index-collection-all{ font-family:'HelveticaNeueCyr'; font-weight: 900; font-size: 18px; color: #fff; text-decoration: none; margin-left: 25px; } a.index-collection-all:before { content: ''; display: inline-block; width: 13px; height: 18px; vertical-align: middle; background: url(/bitrix/templates/mirage/images/white-arrow-right.png) no-repeat; margin-right: 7px; } a.index-collection-all:hover{ text-decoration: underline; } div.index-collection-slider{ padding: 0 55px; box-sizing: border-box; } a.index-collection-slider-item{ display: block; text-decoration: none; color: #000; } .index-collection-slider-item img{ max-width: 100%; } a.index-collection-slider-item:hover span.index-collection-item-name{ color: #ca662a; } div.index-collection-item-desc{ margin-top: 15px; text-align: center; } span.index-collection-item-name{ display: inline-block; font-family: 'HelveticaNeueCyr'; font-size: 30px; font-weight: 900; color: #fff; } span.index-collection-item-price{ display: inline-block; font-family: 'HelveticaNeueCyr'; font-size: 16px; margin-left: 10px; color: #9d9994; } .index-collection-item-price big{ font-size: 24px; font-weight: 900; } .index-collection-slider.owl-carousel .owl-nav .owl-prev, .index-collection-slider.owl-carousel .owl-nav .owl-next { position:absolute; width:40px; height:40px; top:35%; text-indent:-999px; overflow:hidden; border-radius:50%; } .index-collection-slider.owl-carousel .owl-nav .owl-prev { left:0; background:url(/bitrix/templates/mirage/images/slider_arrow-left.png) 45% 50% no-repeat; background-color: rgba(255,255,255,0.95); } .index-collection-slider.owl-carousel .owl-nav .owl-next { right:0; background:url(/bitrix/templates/mirage/images/slider_arrow-right.png) 50% 50% no-repeat; background-color: rgba(255,255,255,0.95); } .index-collection-slider.owl-carousel .owl-nav .owl-prev:hover{ background:rgba(0,0,0,0.75) url(/bitrix/templates/mirage/images/slider_arrow-left_hover.png) 45% 50% no-repeat; } .index-collection-slider.owl-carousel .owl-nav .owl-next:hover{ background:rgba(0,0,0,0.75) url(/bitrix/templates/mirage/images/slider_arrow-right_hover.png) 50% 50% no-repeat; } @media(max-width: 1280px){ div.index-collection{ margin-top: 40px; padding: 40px 0; } } @media(max-width: 1080px) and (min-width: 781px){ span.index-collection-item-price{ display: block; margin: 0; } .index-collection-slider.owl-carousel .owl-nav .owl-prev, .index-collection-slider.owl-carousel .owl-nav .owl-next { top: 28%; } } @media(max-width: 780px){ div.index-collection{ margin-top: 30px; padding: 30px 0; } } @media(max-width: 580px){ div.index-collection{ margin-top: 25px; padding: 10px 0; } .index-collection div.container{ margin: 0; } div.index-collection-title{ padding: 0 25px; margin-bottom: 15px; } a.index-collection-all{ display: block; margin: 10px 0 0; font-size: 14px; } a.index-collection-all:before{ width: 8px; height: 13px; background-size: 8px auto; -webkit-background-size: 8px auto; -moz-background-size: 8px auto; } div.index-collection-slider{ padding: 0; } .index-collection-slider.owl-carousel .owl-nav .owl-prev, .index-collection-slider.owl-carousel .owl-nav .owl-next { height: 260px; top: 0; margin-top: 0; } .index-collection-slider.owl-carousel .owl-nav .owl-prev, .index-collection-slider.owl-carousel .owl-nav .owl-prev:hover { padding-left: 10px; background:url(/bitrix/templates/mirage/images/mobile-slider-left.png) 45% 50% no-repeat; background-color: none; } .index-collection-slider.owl-carousel .owl-nav .owl-next, .index-collection-slider.owl-carousel .owl-nav .owl-next:hover { padding-right: 10px; background:url(/bitrix/templates/mirage/images/mobile-slider-right.png) 50% 50% no-repeat; background-color: none; } div.index-collection-image{ overflow: hidden; } div.index-collection-image img{ height: 260px; max-width: none; width: auto !important; } div.index-collection-item-desc{ padding: 0 25px; } span.index-collection-item-price{ display: block; margin: 0; } } @media(max-width: 480px){ div.index-collection-title{ font-size: 18px; } } /* ----------------------- index-variants ---------------------------- */ div.index-variants{ line-height: 24px; color: #82827b; margin-top: 55px; } div.index-variants-title{ font-family: 'Times New Roman', sans-serif; font-size: 38px; font-style: italic; color: #000; margin: 40px 0 35px; text-align: center; } div.index-variants-columns{ margin: 70px 0 30px; } div.index-variants-columns:after{ content: ''; display: block; clear: both; } div.index-variants-col{ float: left; margin-left: 6.5%; width: 29%; text-align: center; } div.index-variants-col:first-child{ margin-left: 0; } div.index-variants h2{ font-size: 22px; font-weight: bold; margin: 25px 0 15px; min-height: 48px; font-style: normal; font-family: 'HelveticaNeueCyr', sans-serif; color: #000; } div.index-variants-text{ text-align: center; font-size: 16px; } @media(max-width: 1280px){ div.index-variants{ margin-top: 40px; } div.index-variants-columns{ margin: 40px 0; } } @media(max-width: 880px){ div.index-variants-col{ float: none; width: auto; margin: 0 0 30px; border-bottom: 1px solid #d8d8d8; padding-bottom: 15px; } div.index-variants h2{ min-height: auto; } } @media(max-width: 780px){ div.index-variants{ margin-top: 30px; } div.index-variants-columns{ margin: 30px 0; } } @media(max-width: 580px){ div.index-variants{ margin-top: 25px; } } @media(max-width: 480px){ div.index-variants-title{ font-size: 20px; margin: 10px 0; } div.index-variants-columns{ margin-top: 25px; } div.index-variants h2{ font-size: 16px; margin: 15px 0 0; padding-right: 20px; background: url(/bitrix/templates/mirage/images/grey-arrow-bottom.png) no-repeat 100% 50%; cursor: pointer; min-height: auto; } div.index-variants h2.active{ background: url(/bitrix/templates/mirage/images/grey-arrow-top.png) no-repeat 100% 50%; } div.index-variants-text{ display: none; margin-top: 10px; } } /* --------------------------- ctalog-type-description ----------------- */ div.catalog-type-description{ margin: 20px 0; } div.bigsize-desc-image{ margin: 30px 0; margin-left: -2%; } div.bigsize-desc-image:after{ content: ''; display: block; clear: both; } div.bigsize-desc-col{ float: left; width: 23%; margin-left: 2%; } div.bigsize-desc-col img{ max-width: none; width: 100%; } div.bigsize-desc-info{ margin-bottom: 10px; } div.bigsize-desc-info:after{ content: ''; display: block; clear: both; } div.bigsize-desc-title{ font-size: 12px; font-weight: 500; float: left; width: 75%; vertical-align: top; height: 40px; } div.bigsize-desc-info img{ float: left; width: 25%; display: block; } @media(max-width: 1080px){ div.bigsize-desc-col{ width: 48%; margin-bottom: 30px; } div.bigsize-desc-title{ font-size: 14px; } } @media(max-width: 680px){ div.bigsize-desc-col{ float: none; width: auto; margin-bottom: 20px; margin-left: 0; } div.bigsize-desc-image{ margin-left: 0; } div.bigsize-desc-title{ height: auto; } } /* --------------------------- catalog-list --------------------------- */ div.catalog-list{ width: 100%; margin-top: 25px; /*border: 1px solid #d8d8d8;*/ border-top: none; display: table; table-layout: fixed; border-collapse: collapse; } div.catalog-list-row{ display: table-row; } div.catalog-list-item{ display: table-cell; width: 50%; border: 1px solid #d8d8d8; padding: 2.5%; color: #000; } .single-item:after{ width: 50%; content: ""; display:table-cell; border:0; } div.catalog-list-item:hover{ background: #f3f3f3; } a.catalog-list-item-name{ display: inline-block; font-family: 'HelveticaNeueCyr'; font-size: 38px; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #000; } a.catalog-list-item-name:hover{ color: #ca662a; } div.catalog-list-item-price{ display: inline-block; font-size: 13px; font-weight: 500; margin-left: 10px; } div.catalog-list-item-price big{ font-size: 24px; white-space: nowrap; } div.catalog-list-item-action{ min-height: 27px; } div.catalog-list-slider{ margin-top: 10px; } a.catalog-list-slider-item{ text-decoration: none; } .catalog-list-slider-item img{ max-width: 100%; display: none; } .catalog-list-slider-item:first-child img{ display: block; } .catalog-list-slider.owl-carousel .owl-nav{ display: none; } .catalog-list-item:hover .catalog-list-slider.owl-carousel .owl-nav{ display: block; } .catalog-list-slider.owl-carousel .owl-nav.disabled{ display: none !important; } .catalog-list-slider.owl-carousel .owl-nav .owl-prev, .catalog-list-slider.owl-carousel .owl-nav .owl-next { position:absolute; width:40px; height:40px; top:50%; text-indent:-999px; overflow:hidden; border-radius:50%; margin-top: -20px; } .catalog-list-slider.owl-carousel .owl-nav .owl-prev { left:10px; background:url(/bitrix/templates/mirage/images/slider_arrow-left_hover.png) 45% 50% no-repeat; background-color: rgba(0,0,0,0.55); } .catalog-list-slider.owl-carousel .owl-nav .owl-next { right:10px; background:url(/bitrix/templates/mirage/images/slider_arrow-right_hover.png) 50% 50% no-repeat; background-color: rgba(0,0,0,0.55); } .catalog-list-slider.owl-carousel .owl-nav .owl-prev:hover{ background-color:rgba(0,0,0,0.95); } .catalog-list-slider.owl-carousel .owl-nav .owl-next:hover{ background-color:rgba(0,0,0,0.95); } div.catalog-list-example-item{ display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; margin-top: 5px; } .catalog-list-example-item img{ vertical-align: middle; max-width: 100%; } div.catalog-desc{ margin-top: 80px; } @media(max-width: 1280px){ a.catalog-list-item-name{ font-size: 30px; } div.catalog-desc{ margin-top: 40px; } } @media(max-width: 1080px){ div.catalog-list-item-price{ display: block; margin-left: 0; } } @media(max-width: 980px){ div.catalog-list{ padding: 15px; } a.catalog-list-item-name{ font-size: 24px; } div.catalog-list-item-price big{ font-size: 20px; } div.catalog-list-item:hover{ background: none; } .catalog-list-slider.owl-carousel .owl-nav{ display: block; } .catalog-list-slider.owl-carousel .owl-nav .owl-prev, .catalog-list-slider.owl-carousel .owl-nav .owl-next{ width: 30px; height: 30px; margin-top: -15px; } } @media(max-width: 780px){ div.catalog-desc{ margin-top: 30px; } .catalog-list-slider.owl-carousel .owl-nav .owl-prev, .catalog-list-slider.owl-carousel .owl-nav .owl-prev:hover { padding-left: 10px; background:url(/bitrix/templates/mirage/images/mobile-slider-left.png) 45% 50% no-repeat; background-color: none; } .catalog-list-slider.owl-carousel .owl-nav .owl-next, .catalog-list-slider.owl-carousel .owl-nav .owl-next:hover { padding-right: 10px; background:url(/bitrix/templates/mirage/images/mobile-slider-right.png) 50% 50% no-repeat; background-color: none; } } @media(max-width: 580px){ div.catalog-list, div.catalog-list-row{ display: block; padding: 0; border: none; } div.catalog-list-item{ display: block; width: auto; border: none; border-top: 1px solid #d8d8d8; padding: 20px 0; } a.catalog-list-item-name{ font-size: 26px; } div.catalog-list-item-price big{ font-size: 22px; } div.catalog-desc{ margin-top: 25px; } a.catalog-list-slider-item{ text-align: center; } } @media(max-width: 480px){ /*a.catalog-list-slider-item img{ max-width: none; width: auto !important; height: 170px; }*/ } /* ------------------------- collection page ------------------- */ div.collection-top-desc{ margin-top: -38px; position: relative; } .collection-slider .container{ height: 100%; } div.collection-slider{ height: 45vw; max-height: 400px; overflow: hidden; } div.collection-slider-item{ display: block; position: relative; height: 45vw; max-height: 400px; /*max-height: 630px; min-height: 450px;*/ text-decoration: none; } div.collection-slider-item img { height: 100%; width: auto !important; } /*.owl-item .collection-slider-item{ transition: 0s linear; -webkit-transform: scale(1); transform: scale(1); } .owl-item.active .collection-slider-item{ transition: 75s ease-out; -webkit-transform: scale(1.5); transform: scale(1.5); }*/ div.collection-slider-pict{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; z-index: 2; } .collection-slider.owl-carousel .owl-nav .owl-prev, .collection-slider.owl-carousel .owl-nav .owl-next { position:absolute; width:40px; height:100%; top:0; text-indent:-999px; overflow:hidden; } .collection-slider.owl-carousel .owl-nav .owl-prev { left:0; padding-left: 6.25%; } .collection-slider.owl-carousel .owl-nav .owl-next { right:0; padding-right: 6.25%; } .collection-slider.owl-carousel .owl-nav .owl-prev:before, .collection-slider.owl-carousel .owl-nav .owl-next:before { display:block; content:''; width:40px; height:40px; position:absolute; top:50%; text-indent:-1000px; overflow:hidden; border-radius:50%; margin-top: -20px; } .collection-slider.owl-carousel .owl-nav .owl-prev:before { right:0px; background:url(/bitrix/templates/mirage/images/slider_arrow-left.png) 45% 50% no-repeat; background-color: rgba(255,255,255,0.95); } .collection-slider.owl-carousel .owl-nav .owl-next:before { left:0px; background:url(/bitrix/templates/mirage/images/slider_arrow-right.png) 50% 50% no-repeat; background-color: rgba(255,255,255,0.95); } .collection-slider.owl-carousel .owl-nav .owl-prev:hover:before{ background:rgba(0,0,0,0.75) url(/bitrix/templates/mirage/images/slider_arrow-left_hover.png) 45% 50% no-repeat; } .collection-slider.owl-carousel .owl-nav .owl-next:hover:before{ background:rgba(0,0,0,0.75) url(/bitrix/templates/mirage/images/slider_arrow-right_hover.png) 50% 50% no-repeat; } .collection-slider.owl-carousel .owl-dots{ z-index: 1; position: relative; width: 100%; position: absolute; bottom: 25px; left: 0; height: 14px; text-align: center; } .collection-slider.owl-carousel .owl-dot{ display: inline-block; width: 14px; height: 14px; border: 1px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin: 0 5px; } .collection-slider.owl-carousel .owl-dot.active{ background-color: #fff; } div.collection-slider-info{ position: absolute; display: block; text-decoration: none; width: 64vw; height: 8vw; top: 50%; left: 50%; margin-top: -4vw; margin-left: -32vw; color: #fff; z-index: 3; box-sizing: border-box; text-align: center; } div.collection-slider-label{ font-family: 'Georgia', 'Times New Roman', sans-serif; font-size: 24px; font-style: italic; } .collection-slider-info h1{ font-family: 'HelveticaNeueCyr'; font-size: 80px; font-weight: bold; text-transform: uppercase; padding: 0; margin: 0; color: #fff; font-style: normal; } div.collection-filter{ margin-top: 20px; } div.collection-filter-list{ font-size: 15px; color: #7b7876; } span.collection-filter-label{ display: inline-block; margin-right: 15px; } .collection-filter-list label { display: inline-block; margin: 10px 15px 0 0; border-right: 1px solid #7b7876; text-decoration: none; padding-right: 15px; color: #4a4542; cursor: pointer; } .collection-filter-list label:last-child{ border-right: none; } input.collection-sort-inpt{ display: none; } .collection-sort-inpt + span{ border-bottom: 1px dashed #7b7876; } .collection-sort-inpt:checked + span{ font-weight: 500; border-bottom-color: #fff; } .collection-filter-list label:hover span{ border-bottom-color: #fff; } div.collection-filter-btn a{ font-size: 16px; text-decoration: none; } div.collection-filter-btn a:hover{ text-decoration: underline; } div.collection-filter-btn a.collection-filter-hide{ display: none; } div.collection-list{ margin-top: 40px; box-sizing: border-box; border-left: 1px solid #d8d8d8; border-top: 1px solid #d8d8d8; } div.collection-list:after{ content: ''; display: block; clear: both; } div.collection-list-item{ float: left; width: 25%; position: relative; min-height: 1px; } div.collection-list-item:nth-child(4n+1){ clear: both; } div.collection-list-item-empty{ height: 2px; background: #fff; margin-top: -1px; } div.collection-list-item-inner{ padding: 35px 20px 15px; border-right: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; box-sizing: border-box; } div.collection-list-item-size{ position: absolute; top: 15px; left: 20px; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #4b4b4b; font-weight: 500; } a.collection-list-item-pict{ position: relative; display: block; width: 100%; text-decoration: none; margin-top: 10px; height: 310px; line-height: 310px; text-align: center; } a.collection-list-item-pict:after{ content: ''; display: none; width: 34px; height: 34px; position: absolute; top: 50%; left: 50%; margin-top: -17px; margin-left: -17px; background: url(/bitrix/templates/mirage/images/icon-zoom.png) no-repeat center; z-index: 3; } .collection-list-item-pict img{ max-width: 100%; max-height: 100%; vertical-align: middle; } a.collection-list-item-name{ display: block; font-size: 15px; line-height: 20px; font-weight: 500; text-transform: uppercase; color: #7b7876; text-decoration: none; margin-top: 10px; height: 40px; overflow: hidden; } a.collection-list-item-name:hover{ text-decoration: underline; color: #000; } div.collection-list-item-info{ height: 83px; overflow: hidden; } .collection-list-item-price{ font-weight: 500; } .collection-list-item-price span{ display: inline-block; font-size: 12px; color: #000; } .collection-list-item-price span big{ font-size: 24px; white-space: nowrap; } .collection-list-item-price span.old-price{ color: #c5c5c5; margin-left: 15px; padding: 0 5px; position: relative; white-space: nowrap; font-weight: normal; } .collection-list-item-price span.old-price:before{ content: ''; display: block; border-top: 1px solid #c5c5c5; position: absolute; top: 50%; left: 0; right: 0; } div.collection-list-stock { font-size: 13px; line-height: 18px; color: #4a4542; font-weight: bold; height: 20px; } div.collection-list-item-more{ display: none; margin-top: 25px; font-size: 13px; line-height: 18px; color: #4a4542; } div.collection-list-item-btns{ margin-top: 15px; } a.item-incart{ display: none; background: #909090; color: #fff; } a.collection-list-item-call{ display: inline-block; margin-top: 25px; font-size: 14px; color: #b06026; text-decoration: none; } a.collection-list-item-call span{ border-bottom: 1px dashed #b06026; } a.collection-list-item-call:hover span{ border-bottom: none; padding-bottom: 1px; } a.collection-list-item-call:before{ content: ''; display: inline-block; background: url(/bitrix/templates/mirage/images/icon-phone.png) no-repeat center; width: 16px; height: 16px; margin-right: 10px; vertical-align: middle; } div.collection-list-item-action{ position: absolute; top: 80px; left: 0; z-index: 7; } div.collection-bottom-desc{ margin-top: 60px; font-size: 15px; line-height: 22px; color: #4a4542; } div.collection-bottom-nav{ height: 122px; background-repeat: no-repeat; background-position: left center; background-size: cover; -webkit-background-size: cover; padding: 40px 0; box-sizing: border-box; } a.collection-bottom-nav-next{ font-size: 17px; color: #fff; padding: 0 20px 0 64px; height:44px; line-height:44px; font-weight: normal; position: relative; display: inline-block; } a.collection-bottom-nav-next:before{ content: ''; position: absolute; left: 0; top: 0; display: block; width: 44px; height: 44px; background: #fff url(/bitrix/templates/mirage/images/slider_arrow-right.png) no-repeat center; } @media(min-width: 781px){ a.collection-list-item-pict:hover:after{ display: block; } div.collection-list-item:hover .collection-list-item-inner{ position: absolute; top: -1px; left: -1px; right: 0; background: #f3f3f3; border: 1px solid #d8d8d8; z-index: 8; } div.collection-list-item:hover .collection-list-item-more{ display: block; } div.collection-list-item:hover div.collection-list-item-info{ height: auto; } div.collection-list-item:hover a.collection-list-item-name{ height: auto; } } @media(max-width: 1580px){ a.collection-list-item-pict{ height: 20vw; line-height: 20vw; } .collection-slider.owl-carousel .owl-nav .owl-prev{ padding-left: 4%; } .collection-slider.owl-carousel .owl-nav .owl-next{ padding-right: 4%; } } @media(max-width: 1280px){ .collection-slider-info h1{ font-size: 60px; } .collection-list-item-price span big{ font-size: 20px; } div.collection-bottom-desc{ margin-top: 40px; } } @media(max-width: 1180px){ .collection-slider-info h1{ font-size: 45px; } } @media(max-width: 1080px){ div.collection-list-item{ width: 33.33%; } div.collection-list-item:nth-child(4n+1){ clear: none; } div.collection-list-item:nth-child(3n+1){ clear: both; } a.collection-list-item-pict{ height: 28vw; line-height: 28vw; } } @media(max-width: 980px){ div.collection-slider-item{ height: 42vw; max-height: 550px; min-height: 350px; } .collection-slider-info h1{ font-size: 35px; } div.collection-list-item-price{ margin-top: 5px; } } @media(max-width: 780px){ div.collection-list{ margin-top: 30px; } div.collection-list-item{ width: 50%; } div.collection-list-item:nth-child(3n+1){ clear: none; } div.collection-list-item:nth-child(2n+1){ clear: both; } a.collection-list-item-pict{ height: 41vw; line-height: 41vw; } div.collection-list-item-price big{ font-size: 22px; } .collection-list-item-price span.old-price{ margin-left: 5px; } div.collection-bottom-desc{ margin-top: 30px; } a.collection-bottom-nav-next{ font-size: 14px; padding: 0 10px 0 44px; height: 34px; line-height: 34px; } a.collection-bottom-nav-next:before{ width: 34px; height: 34px; } div.collection-list-item-more{ display: block; } .collection-slider.owl-carousel .owl-dots{ display: none; } .collection-slider.owl-carousel .owl-nav .owl-prev { padding-left: 10px; } .collection-slider.owl-carousel .owl-nav .owl-next { padding-right: 10px; } .collection-slider.owl-carousel .owl-nav .owl-prev:before, .collection-slider.owl-carousel .owl-nav .owl-prev:hover:before { background:url(/bitrix/templates/mirage/images/mobile-slider-left.png) 45% 50% no-repeat; background-color: none; } .collection-slider.owl-carousel .owl-nav .owl-next:before, .collection-slider.owl-carousel .owl-nav .owl-next:hover:before { background:url(/bitrix/templates/mirage/images/mobile-slider-right.png) 50% 50% no-repeat; background-color: none; } } @media(max-width: 580px){ div.collection-top-desc{ margin-top: 0; } div.collection-slider-item{ height: 350px; min-height: 0; } div.collection-slider-info{ position: static; color: #000; padding: 10px 25px; width: auto; height: auto; margin: 0; text-align: left; } div.collection-slider-info h1{ color: #000; font-size: 30px; margin-top: 5px; } div.collection-filter-list{ background: #f3f3f3; padding: 15px 25px; margin: 10px -25px 0; } .collection-filter-list label{ display: block; margin: 5px 0 0; border-right: 0; padding: 0; } span.collection-filter-list{ display: none; } div.collection-list{ margin-top: 15px; } div.collection-list-item:hover{ background: none; } div.collection-bottom-desc{ margin-top: 25px; } } @media(max-width: 480px){ div.collection-slider-item{ height: 200px; } div.collection-list-item{ float: none; width: auto; } div.collection-list-item-empty{ display: none; } a.collection-list-item-pict{ height: auto; line-height: normal; } div.collection-list-item-info{ height: auto; } div.collection-list-item-size{ position: static; margin-top: 10px; color: #c37719; font-weight: 500; font-size: 20px; height: auto; } div.collection-list-item-action{ position: static; margin-top: 10px; } div.collection-list-item-action br{ display: none; } a.collection-list-item-name{ height: auto; } div.collection-list{ border: none; } div.collection-list-item-inner{ padding: 20px 0 35px; border-right: none; } a.collection-list-item-pict{ margin-top: 0; } a.collection-list-item-name{ color: #000; font-size: 20px; } } /* -------------------------- catalog-element --------------------------- */ div.catalog-element{ margin-top: 80px; margin-bottom: -70px; } div.catalog-element-top:after{ content: ''; display: block; clear: right; } .catalog-element-top div.container:after{ display: none; content: none; } div.catalog-element-col-left{ float: left; width: 48%; margin-right: 4%; padding-bottom: 70px; text-align: center; } div.catalog-element-img{ width: 674px; height: 674px; position: relative; background-position: center; background-repeat: no-repeat; background-color: #fff; border: 1px solid #dbdbdb; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .flyform .catalog-element-img{ width: 26vw; height: 26vw; } .catalog-element-col-left img{ max-width: 100%; max-height: 100%; } div.catalog-element-col-right{ float: right; width: 48%; } div.catalog-element-count{ display: inline-block; padding: 0px 25px 25px; background: #f3f3f3; } .catalog-element-top .catalog-element-col:last-child{ float: right; } div.catalog-element-bottom{ margin-top: 30px; padding-bottom: 50px; } div.catalog-element-collection{ font-family: 'Times New Roman', sans-serif; font-size: 17px; color: #7b7876; font-style: italic; } .catalog-element h1, .catalog-element-title-link{ font-family: 'HelveticaNeueCyr', sans-serif; display: inline-block; font-size: 26px; line-height: 28px; color: #000; margin: 15px 100px 0 0; font-style: normal; font-weight: 500; text-decoration: none; padding-top: 0; } div.catalog-element-price{ display: inline-block; font-size: 18px; font-weight: 500; color: #000; } .catalog-element-price big{ font-size: 28px; white-space: nowrap; } div.catalog-element-old-price{ position: relative; color: #c5c5c5; display: inline-block; font-size: 18px; margin-left: 20px; } .catalog-element-old-price big{ font-size: 28px; white-space: nowrap; } .catalog-element-old-price:before{ content: ''; display: block; border-top: 1px solid #c5c5c5; position: absolute; top: 50%; left: 0; right: 0; } div.catalog-element-size{ margin-top: 20px; font-size: 20px; color: #c37719; font-weight: 500; } .catalog-element div.catalog-action-list{ margin-top: 15px; } div.catalog-element-params{ margin-top: 5px; } div.catalog-element-param span{ font-size: 14px; line-height: 18px; color: #000; font-weight: 500; } .catalog-element-avail span.catalog-element-param-value{ color: #6193dc; } div.catalog-element-count-info{ padding-top: 25px; font-size: 14px; color: #4a4542; } .catalog-element table.calculate-block{ display: table; margin-top: 20px; border: none; padding: 0; } .catalog-element table.calculate-block td{ vertical-align: middle; } td.catalog-calc-value{ width: 100px; height: 100px; background: #fff; text-align: center; font-size: 26px; } td.catalog-calc-value span{ display: block; } td.catalog-calc-value input{ border: 0; padding: 0; text-align: center; font-size: 26px; width: 100%; } span.catalog-calc-units{ font-size: 14px; color: #6e6a68; } a.catalog-calc-minus, a.catalog-calc-plus{ position: relative; display: inline-block; background: #000; color: #fff; font-size: 28px; font-weight: 500; height: 42px; width: 30px; text-align: center; text-decoration: none; } a.catalog-calc-minus{ margin: 0 15px 0 7px; } a.catalog-calc-minus:before{ content: ''; position: absolute; border: 21px solid transparent; border-right: 7px solid #000; top: 0; left: -28px; } a.catalog-calc-plus{ margin: 0 7px 0 15px; } a.catalog-calc-plus:before{ content: ''; position: absolute; border: 21px solid transparent; border-left: 7px solid #000; top: 0; right: -28px; } div.catalog-calc-value{ display: inline-block; width: 100px; height: 100px; line-height: 100px; } span.catalog-element-equal{ font-size: 24px; color: #959290; } span.catalog-note-label{ font-size: 21px; color: #959290; } div.catalog-element-total-price{ margin-top: 30px; font-size: 20px; color: #000; font-weight: 500; } .catalog-element-total-price big{ font-size: 40px; white-space: nowrap; } div.catalog-element-note{ position: relative; margin-top: 5px; font-size: 14px; line-height: 18px; color: #4a4542; padding-left: 15px; } .catalog-element-note:before{ content: '*'; position: absolute; top: 2px; left: 0; } div.catalog-element-btns{ margin-top: 20px; } .catalog-element-btns a.btn{ font-size: 18px; margin-right: 30px; padding: 10px 20px; } a.catalog-element-call{ display: inline-block; margin-top: 25px; font-size: 14px; color: #b06026; text-decoration: none; } a.catalog-element-call span{ border-bottom: 1px dashed #b06026; } a.catalog-element-call:hover span{ border-bottom: none; padding-bottom: 1px; } a.catalog-element-call:before{ content: ''; display: inline-block; background: url(/bitrix/templates/mirage/images/icon-phone.png) no-repeat center; width: 16px; height: 16px; margin-right: 10px; vertical-align: middle; } @media(max-width: 1480px){ div.catalog-element-img{ width: 43vw; height: 43vw; } } @media(max-width: 1280px){ div.catalog-element{ margin-top: 60px; } } @media(max-width: 980px){ div.catalog-element{ margin-top: 40px; } .catalog-element h1, .catalog-element-title-link{ margin-right: 0; display: block; } div.catalog-element-price{ display: block; margin-top: 10px; } td.catalog-calc-value, td.catalog-calc-value input{ font-size: 20px; } } @media(max-width: 800px){ div.catalog-element{ margin-top: 30px; } div.catalog-element-col-left{ float: none; width: auto; margin: 25px 0 0; padding: 0; } .catalog-element-col-left{ max-width: 400px; } div.catalog-element-col-right{ float: none; width: auto; } div.catalog-element-count{ display: block; } div.catalog-element-img, .flyform .catalog-element-img{ width: auto; height: auto; border: none; } span.catalog-element-img-wrap{ position: static; display: block; border: none; margin: 20px 0; } .catalog-element-img-inner span{ display: block; } div.catalog-element-old-price{ margin-left: 0; } } @media(max-width: 580px){ div.catalog-element{ margin-top: 25px; margin-bottom: -30px; } } @media(max-width: 480px){ .catalog-element h1, .catalog-element-title-link{ font-size: 20px; margin-top: 5px; } div.catalog-element-col-left{ margin: 15px 0 0; } div.catalog-element-price{ margin-top: 5px; } .catalog-element-price big{ font-size: 22px; } div.catalog-element-size{ margin-top: 10px; } .catalog-element div.catalog-action-list{ margin-top: 10px; } a.catalog-calc-minus, a.catalog-calc-plus{ height: 32px; width: 20px; font-size: 21px; } a.catalog-calc-minus{ margin: 0 5px; } a.catalog-calc-minus:before{ border: 16px solid transparent; border-right: 5px solid #000; left: -21px; } a.catalog-calc-plus{ margin: 0 5px; } a.catalog-calc-plus:before{ border: 16px solid transparent; border-left: 5px solid #000; right: -21px; } td.catalog-calc-value{ width: 70px; height: 70px; font-size: 20px; } } /* for ie 10 - 11 */ @media screen and (min-width:0\0) { div.content .catalog-element-col-left img{ max-width: 31vw; } .flyform .catalog-element-col-left img{ max-width: 26vw !important; } } /* -------------------------- catalog in flyform ------------------- */ .flyform div.catalog-element{ margin: 40px 0 0; } .flyform .catalog-element div.catalog-action-list{ margin: 0 0 10px; } .flyform div.catalog-element-col-left{ padding-bottom: 0; } .catalog-nav a{ position: absolute; width: 40px; height: 40px; top: 50%; margin-top: -20px; text-indent: -999px; overflow: hidden; border-radius: 50%; } a.catalog-nav-prev{ left: -51px; background: url(/bitrix/templates/mirage/images/slider_arrow-left.png) 45% 50% no-repeat; background-color: rgba(255,255,255,0.95); } a.catalog-nav-prev:hover{ background: rgba(0,0,0,0.75) url(/bitrix/templates/mirage/images/slider_arrow-left_hover.png) 45% 50% no-repeat; } a.catalog-nav-next{ right: -51px; background: url(/bitrix/templates/mirage/images/slider_arrow-right.png) 50% 50% no-repeat; background-color: rgba(255,255,255,0.95); } a.catalog-nav-next:hover{ background: rgba(0,0,0,0.75) url(/bitrix/templates/mirage/images/slider_arrow-right_hover.png) 50% 50% no-repeat; } @media(max-width: 980px){ div.catalog-nav{ display: none; } } /* -------------------------- cart-page ------------------------ */ /*div.cart-page{ background: #f8f6f5; }*/ div.cart-top-btn{ position: absolute; top: 45px; right: 0; } .cart-top-btn a{ display: inline-block; font-size: 14px; line-height: 100%; color: #000; text-decoration: none; margin-left: 25px; padding-left: 23px; } .cart-top-btn a u{ text-decoration: none; } .cart-top-btn a:hover u{ border-bottom: 1px dashed #000; } a.send-btn{ background: url(/bitrix/templates/mirage/images/mail.png) no-repeat left center; } a.print-btn{ background: url(/bitrix/templates/mirage/images/print.png) no-repeat left center; } a.clear-btn{ background: url(/bitrix/templates/mirage/images/cart-del.png) no-repeat left center; } .cart-list-row div.cart-item-cost{ text-align: center; font-size: 18px; white-space: nowrap; } .cart-list-row div.cart-item-calc .cart-list-cell{ border-right: 0; font-size: 18px; } .cart-item-img a{ display: block; height: 60px; line-height: 60px; text-decoration: none; } .cart-item-name a{ text-decoration: none; } .cart-item-name a:hover{ text-decoration: underline; } .cart-item-img img{ vertical-align: middle; } div.cart-mobile-param{ display: none; } div.cart-mobile-param{ font-size: 12px; line-height: 14px; color: #717171; margin-top: 5px; } div.cart-calc-op{ width: 19%; } div.cart-calc-square{ width: 16%; text-align: center; } div.cart-calc-value{ width: 20%; text-align: center; } div.cart-calc-equal{ width: 5%; text-align: center; min-height: 1px; } div.cart-calc-elm{ width: 16%; text-align: center; } span.cart-calc-units{ font-size: 14px; display: block; visibility: hidden; } .cart-calc-value input { border: 0; padding: 0; text-align: center; font-size: 18px; width: 100%; background: none; } .cart-list-row .calculate-quantity, .cart-list-row .cart-calc-value input{ margin-top: 20px; display: inline-block; } a.cart-calc-minus, a.cart-calc-plus{ position: relative; display: inline-block; background: #c4c4c4; color: #fff; font-size: 22px; font-weight: 500; height: 32px; width: 30px; text-align: center; text-decoration: none; } a.cart-calc-minus{ margin-left: 20px; margin-right: 5px; } a.cart-calc-minus:before { content: ''; position: absolute; border: 16px solid transparent; border-right: 7px solid #c4c4c4; top: 0; left: -23px; } a.cart-calc-plus{ float: right; margin-right: 20px; } a.cart-calc-plus:before { content: ''; position: absolute; border: 16px solid transparent; border-left: 7px solid #c4c4c4; top: 0; right: -23px; } div.cart-item-del{ text-align: center; width: 30px; } .cart-list-row:hover span.cart-calc-units{ visibility: visible; } .cart-list-row:hover a.cart-calc-minus, .cart-list-row:hover a.cart-calc-plus{ background: #6b6b6b; } .cart-list-row:hover a.cart-calc-plus:before{ border-left-color: #6b6b6b; } .cart-list-row:hover a.cart-calc-minus:before{ border-right-color: #6b6b6b; } .cart-list-row:hover a.cart-calc-minus:hover, .cart-list-row:hover a.cart-calc-plus:hover{ background: #c85b22; } .cart-list-row:hover a.cart-calc-plus:hover:before{ border-left-color: #c85b22; } .cart-list-row:hover a.cart-calc-minus:hover:before{ border-right-color: #c85b22; } .cart-item-del a{ display: inline-block; width: 30px; height: 14px; background: url(/bitrix/templates/mirage/images/cart-del.png) no-repeat center; text-decoration: none; } span.cart-item-cost{ white-space: nowrap; } div.cart-bottom-info{ margin-top: 40px; } .cart-bottom-info:after{ display: block; content: ''; clear: both; } div.cart-info{ font-size: 16px; color: #4a4542; position: relative; float: left; width: 70%; } div.cart-note{ width: 250px; float: right; position: relative; font-size: 14px; line-height: 18px; color: #4a4542; padding-left: 15px; } .cart-note:before { content: '*'; position: absolute; top: 2px; left: 0; } div.cart-form{ margin-top: 35px; color: #4a4542; } .cart-form:after{ display: block; content: ''; clear: both; } div.cart-form-left{ float: left; width: 48%; margin-right: 4%; margin-bottom: 20px; } div.cart-form-right{ float: left; width: 48%; max-width: 300px; } div.cart-form-fields{ display: table; width: 100%; } div.cart-form-fields-left{ display: table-cell; width: 48%; vertical-align: top; } div.cart-form-fields-center{ display: table-cell; width: 4%; } div.cart-form-fields-right{ display: table-cell; width: 48%; vertical-align: top; height: 100%; } div.cart-form-field{ position: relative; margin-top: 20px; background: #fff; } div.cart-form-field:first-child{ margin-top: 0; } .cart-form-fields-right .cart-form-field{ background: none; } span.cart-form-field-label{ position: absolute; margin: 14px 0 0 12px; font-size: 16px; line-height: 100%; } .cart-form-field.focus .cart-form-field-label { z-index:3; position:absolute; margin-top:4px; font-size:12px; color: #888; } span.cart-form-small-label{ z-index: 2; position: absolute; margin-top: 4px; margin-left: 11px; font-size: 12px; color: #888; } .cart-form input.cart-form-input, .cart-form select{ padding: 18px 10px 6px 11px; border: 1px solid #d0ccca; font-size: 16px; line-height: 24px; box-sizing: border-box; width: 100%; background: transparent; position: relative; z-index: 2; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; margin: 0; } .cart-form select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 6px; background: transparent url(/bitrix/templates/mirage/images/select-arrow-style.png) no-repeat 97% 50%; border-radius: 0; line-height: 22px; } .cart-form select::-ms-expand{ display: none; } .cart-form-field.error input.cart-form-input, .cart-form-field.error select{ border-color: red; } .cart-form-city{ display: none; } .cart-form-city input.cart-form-input{ padding: 12px 10px 12px 11px; } span.cart-noreq{ color: #aba6a3; } .cart-form textarea{ width: 100%; box-sizing: border-box; padding: 18px 10px 6px 11px; border: 1px solid #d0ccca; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .cart-form-fields-right textarea, .cart-form-fields-right .cart-form-textarea{ height: 100%; } label.cart-form-checkbox{ position: relative; display: inline-block; font-size: 16px; line-height: 24px; cursor: pointer; padding-left: 32px; } label.cart-form-checkbox:before{ content: ''; width: 22px; height: 22px; background: url(/bitrix/templates/mirage/./images/checkbox.png) left 0 no-repeat; position: absolute; top: 2px; left: 0; } label.cart-form-checkbox.checked:before{ background: url(/bitrix/templates/mirage/./images/checkbox_check.png) left 0 no-repeat; } .cart-form-checkbox input{ position: absolute; left: -25px; cursor: pointer; opacity: 0; } input.cart-form-submit{ margin-top: 40px; clear: both; display: block; } div.cart-weight-info{ margin-top: 50px; padding-left: 32px; } div.cart-weight-value{ font-size: 16px; font-weight: 500; color: #000; text-transform: uppercase; margin-top: 5px; padding-left: 20px; background: url(/bitrix/templates/mirage/images/weight.png) no-repeat left center; } div.cart-form-error{ margin: 20px 0; color: red; } @media(min-width: 581px){ div.cart-list{ display: table; border-collapse: collapse; padding: 0; width: 100%; } div.cart-list-head{ display: table-row; } div.cart-list-col{ display: table-cell; vertical-align: middle; height: 100%; } div.cart-list-row{ display: table-row; border-left: 1px solid #e2dfdf; } div.cart-list-row:nth-child(odd){ background: #fff; } div.cart-list-table{ display: table; width: 100%; height: 100%; padding: 0; border-collapse: collapse; } div.cart-list-cell{ vertical-align: middle; display: table-cell; border-right: 1px solid #f8e8d4; height: 100%; padding: 20px 10px; font-size: 14px; } .cart-list-head div.cart-list-col{ background: #4c4c49; font-weight: normal; font-size: 14px; color: #fff; text-align: center; border-right: 1px solid #f8e8d4; } .cart-list-head div.cart-list-cell{ padding: 8px 10px; height: 100%; } .cart-list-row div.cart-list-col{ border-top: 1px solid #e2dfdf; border-bottom: 1px solid #e2dfdf; border-right: 1px solid #e2dfdf; } .cart-list-row:hover div.cart-list-col{ border-top-style: double; border-bottom-style: double; border-top-color: #000; border-bottom-color: #000; } .cart-list-row div.cart-list-cell{ border-right: 1px solid #e2dfdf; } div.cart-item-num{ width: 2%; text-align: center; } div.cart-item-info{ width: 45%; } div.cart-item-img{ width: 78px; text-align: center; } div.cart-item-art{ width: 61px; text-align: center; } div.cart-item-size{ width: 100px; border-right: none; } .cart-list-row div.cart-item-cost{ border-right: none; } div.cart-item-price{ width: 23%; } div.cart-item-avail{ width: 55%; } div.cart-item-calc{ width: 25%; border-left: 1px solid #f8e8d4; border-right: 1px solid #f8e8d4; } .cart-item-calc div.cart-list-cell{ border-left: none; border-right: none; padding: 0; } } @media(max-width: 1080px){ div.cart-form-left{ width: 68%; } div.cart-form-right{ width: 28%; } } @media(max-width: 1000px){ div.cart-item-num{ display: none; } div.cart-item-img{ width: 50px; } div.cart-item-art{ display: none; } div.cart-mobile-param{ display: block; } a.cart-calc-minus, a.cart-calc-plus{ width: 22px; } } @media(max-width: 980px){ .cart-list-row div.cart-item-calc .cart-list-cell, .cart-list-row div.cart-item-cost, .cart-calc-value input{ font-size: 16px; } div.cart-bottom-info{ margin-top: 20px; } div.cart-info{ float: none; clear: both; width: 100%; padding-top: 20px; } } @media(max-width: 880px){ div.cart-item-size, div.cart-item-avail{ display: none; } div.cart-top-btn u{ display: none; } div.cart-item-calc{ width: 35%; } div.cart-item-price{ width: 20%; } div.cart-top-btn a{ width: 20px; height: 20px; padding-left: 0; background-position: right center; } a.print-btn{ display: none; } } @media(max-width: 780px){ div.cart-form-left{ float: none; width: auto; margin-right: 0; } div.cart-form-right{ float: none; width: auto; margin-top: 20px; max-width: none; } div.cart-weight-info{ margin-top: 20px; padding-left: 0; } input.cart-form-submit{ margin-top: 20px; } } @media(max-width: 580px){ div.cart-list-head{ display: none; } div.cart-list-row{ margin: 0 -25px; padding: 25px 25px 15px; border-top: 1px solid #000; position: relative; } div.cart-list-row:last-child{ border-bottom: 1px solid #000; } .cart-list-row div.cart-item-calc div.cart-list-table{ display: table-row; } .cart-list-row div.cart-item-calc .cart-list-cell{ display: table-cell; vertical-align: middle; } div.cart-item-img{ width: 80px; float: left; } .cart-item-img a{ float: left; width: 80px; height: 80px; line-height: auto; } .cart-item-img a img{ vertical-align: top; } div.cart-item-name{ margin-left: 80px; margin-right: 20px; } div.cart-item-info:after{ content: ''; display: block; clear: both; } div.cart-item-avail{ display: block; float: left; color: #717171; font-size: 12px; margin-top: 20px; } .cart-list-row div.cart-item-cost{ float: right; font-size: 18px; padding: 8px 10px; background: #f2d5b1; white-space: nowrap; margin-top: 10px; } .cart-list-row div.cart-item-cost:before{ display: inline-block; content: 'Цена:'; font-size: 14px; margin-right: 5px; } .cart-list-row div.cart-item-cost:after{ display: inline-block; content: 'p.'; } div.cart-item-price:after{ content: ''; display: block; clear: both; } div.cart-item-price{ width: auto; } div.cart-item-calc{ max-width: 320px; margin: 15px auto 0; width: 100%; } .cart-list-row div.cart-item-calc .cart-list-cell, .cart-calc-value input{ font-size: 18px; } span.cart-calc-units{ visibility: visible; } .cart-item-del a{ position: absolute; width: 13px; height: 14px; background: url(/bitrix/templates/mirage/images/cart-del.png) no-repeat center; text-decoration: none; top: 25px; right: 25px; } div.cart-mobile-avail{ display: none; } div.cart-info{ font-size: 14px; } div.cart-form-fields{ display: block; } div.cart-form-fields-left{ display: block; width: auto; } div.cart-form-fields-right{ display: none; } div.cart-form-fields-right{ display: block; width: auto; margin-top: 20px; } label.cart-form-checkbox{ font-size: 14px; } div.cart-calc-empty{ display: none !important; } } @media(max-width: 480px){ div.cart-top-btn{ top: 25px; } } /* ------------------------- catalog-call-form ---------------------- */ div.catalog-call-form{ display: none; width: 400px; padding: 40px 30px 20px; box-sizing: border-box; } div.catalog-call-form span{ display: block; margin-bottom: 20px; } .catalog-call-form input[type="text"], .catalog-call-form select{ padding: 6px 10px 6px 11px; border: 1px solid #d0ccca; font-size: 16px; line-height: 24px; box-sizing: border-box; width: 100%; background: transparent; position: relative; z-index: 2; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; margin: 0 0 10px; } .catalog-call-form select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 6px; background: transparent url(/bitrix/templates/mirage/images/select-arrow-style.png) no-repeat 97% 50%; border-radius: 0; line-height: 22px; } .catalog-call-form-city2{ display: none; } div.catalog-call-form-example{ margin-top: 20px; } div.catalog-call-form-example div{ display: table-cell; vertical-align: middle; } div.catalog-call-item-img{ width: 50px; height: 50px; border: 1px solid #ddd; } .catalog-call-item-img img{ display: block; width: auto; max-width: 50px; height: auto; max-height: 50px; margin: auto; } div.catalog-call-item-name{ font-size: 16px; padding-left: 10px; } .flyform div.catalog-call-form{ display: block; } .catalog-call-form .errors{ display: none; color: red; margin: 10px 0; } .catalog-call-form .success{ display: none; margin: 10px 0; font-weight: bold; } @media(max-width: 580px){ div.catalog-call-form{ width: 300px; padding: 20px; } } /* -------------------------- pager ---------------------------- */ div.pager{ margin-top: 20px; text-align: right; } .pager a, .pager span{ color: #000; font-size: 30px; text-decoration: none; padding: 5px 10px; } .pager a:hover{ color: #ca662a; } .pager span{ color: #f2d5b1; } /* --------------------------- about-top-image ------------------------ */ div.about-page { padding-top: 0; } .about-page h1 { font-weight:bold; } .about-heap-text { padding:40px 0 30px 0; font-family:'Times New Roman',sans-serif; font-style:italic; font-size:18px; } @media (max-width: 1580px) { } @media(max-width: 780px) { } @media(max-width: 580px) { } /* ----------------------------- about-text --------------------------- */ div.about-text{ margin-top: 50px; } div.about-text:after{ content: ''; display: block; clear: both; } div.about-text-col{ float: left; width: 48%; margin-right: 4%; margin-top: 25px; line-height: 24px; } div.about-text-col:last-child{ margin-right: 0; } @media(max-width: 1280px){ div.about-text{ margin-top: 40px; } } @media(max-width: 780px){ div.about-text{ margin-top: 30px; } div.about-text-col{ float: none; width: auto; margin-right: 0; margin-top: 15px; } div.about-text-col:first-child{ margin-top: 0; } } @media(max-width: 580px){ div.about-text{ margin-top: 25px; } } @media(max-width: 480px){ div.about-text{ margin-top: 10px; } } /* ----------------------- about-variants ---------------------------- */ div.about-variants{ line-height: 24px; color: #000; margin-top: 55px; } div.about-variants-columns{ margin-top: 70px; background: #f2eee9; padding: 50px 0; } div.about-variants-columns:after{ content: ''; display: block; clear: both; } div.about-variants-col{ float: left; margin-left: 6.5%; width: 29%; } div.about-variants-col:first-child{ margin-left: 0; } div.about-variants-title{ font-size: 17px; font-weight: 500; margin: 25px 0 10px; min-height: 48px; } @media(max-width: 1280px){ div.about-variants{ margin-top: 40px; } div.about-variants-columns{ margin-top: 40px; padding: 40px 0; } } @media(max-width: 880px){ div.about-variants-title{ min-height: auto; } div.about-variants-col{ float: none; width: auto; margin: 0 0 30px; border-bottom: 1px solid #d8d8d8; padding-bottom: 15px; } div.about-variants-col:last-child{ margin-bottom: 0; } } @media(max-width: 780px){ div.about-variants{ margin-top: 30px; } div.about-variants-columns{ margin-top: 30px; padding: 30px 0; } } @media(max-width: 580px){ div.about-variants{ margin-top: 25px; } div.about-variants-columns{ margin-top: 25px; } } @media(max-width: 480px){ div.about-variants-title{ font-size: 14px; } div.about-variants-columns{ margin-top: 25px; } div.about-variants-title{ margin: 15px 0 10px; padding-right: 20px; background: url(/bitrix/templates/mirage/images/grey-arrow-bottom.png) no-repeat 100% 10px; cursor: pointer; } div.about-variants-title.active{ background: url(/bitrix/templates/mirage/images/grey-arrow-top.png) no-repeat 100% 10px; } div.about-variants-text{ display: none; margin-top: 10px; } } /* ----------------------------- about-bottom ------------------------- */ div.about-bottom{ margin-top: 60px; } @media(max-width: 1280px){ div.about-bottom{ margin-top: 40px; } } @media(max-width: 780px){ div.about-bottom{ margin-top: 30px; } } @media(max-width: 580px){ div.about-bottom{ margin-top: 25px; } } /* ----------------------------- catalogue-list ------------------------ */ div.catalogue-list{ margin-top: 40px; box-sizing: border-box; border-left: 1px solid #d8d8d8; border-top: 1px solid #d8d8d8; } div.catalogue-list:after{ content: ''; display: block; clear: both; } div.catalogue-list-item{ float: left; width: 25%; position: relative; min-height: 1px; } div.catalogue-list-item:nth-child(4n+1){ clear: both; } div.catalogue-list-item-inner{ padding: 35px 20px 15px; border-right: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; box-sizing: border-box; } div.catalogue-list-item-link{ position: absolute; top: 15px; left: 20px; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #4b4b4b; } .catalogue-list-item-link:before{ content: ''; display: inline-block; width: 20px; height: 13px; background: url(/bitrix/templates/mirage/images/download-catalogue.png) 0 50% no-repeat; } .catalogue-list-item-link a{ display: inline-block; margin: 0 5px; } .catalogue-list-item-link{ text-transform: uppercase; } span.catalogue-list-item-size{ color: #717171; font-size: 12px; text-transform: normal; } a.catalogue-list-item-pict{ position: relative; display: block; width: 100%; text-decoration: none; margin-top: 10px; height: 310px; line-height: 310px; text-align: center; } a.catalogue-list-item-pict:after{ content: ''; display: none; width: 34px; height: 34px; position: absolute; top: 50%; left: 50%; margin-top: -17px; margin-left: -17px; background: url(/bitrix/templates/mirage/images/icon-zoom.png) no-repeat center; z-index: 3; } .catalogue-list-item-pict img{ max-width: 100%; max-height: 100%; vertical-align: middle; } .catalogue-list-item-name{ display: block; font-size: 16px; line-height: 20px; color: #7b7876; text-decoration: none; margin-top: 10px; height: 40px; overflow: hidden; text-align: center; } @media(max-width: 1580px){ a.catalogue-list-item-pict{ height: 20vw; line-height: 20vw; } } @media(max-width: 1080px){ div.catalogue-list-item{ width: 33.33%; } div.catalogue-list-item:nth-child(4n+1){ clear: none; } div.catalogue-list-item:nth-child(3n+1){ clear: both; } a.catalogue-list-item-pict{ height: 28vw; line-height: 28vw; } } @media(max-width: 780px){ div.catalogue-slider-info{ left: 25px; } div.catalogue-list{ margin-top: 30px; } div.catalogue-list-item{ width: 50%; } div.catalogue-list-item:nth-child(3n+1){ clear: none; } div.catalogue-list-item:nth-child(2n+1){ clear: both; } a.catalogue-list-item-pict{ height: 41vw; line-height: 41vw; } } @media(max-width: 580px){ div.catalogue-slider-info{ position: static; color: #000; padding: 10px 25px; } } @media(max-width: 480px){ div.catalogue-list-item{ float: none; width: auto; } a.catalogue-list-item-pict{ height: auto; line-height: normal; } div.catalogue-list-item-info{ height: auto; text-align: center; margin-top: 10px; } div.catalogue-list-item-link{ position: static; margin-top: 10px; height: auto; } a.catalogue-list-item-name{ height: auto; color: #000; font-size: 20px; } div.catalogue-list{ border: none; } div.catalogue-list-item-inner{ padding: 10px 0; border-right: none; } } /* ---------------------------- salon page ---------------------------- */ div.salon-list{ margin-left: -2%; margin-top: 40px; } div.salon-list:after{ content: ''; display: block; clear: both; } .salon-item-name:before{ content: ''; display: block; height: 78px; margin-top: -78px; } div.salon-list-item{ float: left; width: 48%; margin-left: 2%; margin-bottom: 50px; color: #000; } div.salon-item-name{ font-family: 'Georgia', 'Times New Roman', sans-serif; font-size: 30px; font-style: italic; } div.salon-item-info{ margin-top: 30px; } div.salon-info-row{ font-size: 16px; color: #4a4542; margin-bottom: 15px; } span.salon-item-label{ display: inline-block; padding-right: 5px; } div.salon-contacts-item{ display: inline-block; margin-right: 15px; } div.salon-contacts-item:last-child{ margin-right: 0; } div.salon-contacts-map{ width: 100%; height: 300px; } div.contacts-form{ margin-top: 60px; } div.contacts-form-title{ font-family: 'Georgia', 'Times New Roman', sans-serif; font-size: 30px; font-style: italic; color: #000; } div.contacts-form-info{ margin-top: 25px; } .contacts-form form{ margin-top: 25px; } @media(max-width: 1080px){ div.contacts-form{ width: 100% !important; } } @media(max-width: 980px){ div.salon-list{ margin-left: 0; } div.salon-list-item{ float: none; width: auto; margin-left: 0; } } @media(max-width: 480px){ div.salon-item-name{ font-size: 22px; } div.salon-item-info{ font-size: 14px; margin-top: 15px; } div.salon-list-item{ margin-bottom: 30px; } } /* ----------------------------- contacts-form ------------------------ */ div.contacts-form{ margin-top: 35px; } .contacts-form:after{ display: block; content: ''; clear: both; } div.contacts-form-fields{ display: table; width: 100%; } div.contacts-form-fields-left{ display: table-cell; width: 35%; vertical-align: top; } div.contacts-form-fields-center{ display: table-cell; width: 2%; } div.contacts-form-fields-right{ display: table-cell; width: 62%; vertical-align: top; height: 100%; } div.contacts-form-fields-columns{ margin-left: -2%; } div.contacts-form-fields-columns:after{ content: ''; display: block; clear: both; } div.contacts-form-field{ position: relative; margin-top: 20px; background: #fff; } div.contacts-form-field:first-child{ margin-top: 0; } .contacts-form-fields-columns div.contacts-form-field{ float: left; width: 48%; margin: 0 0 20px 2%; } .contacts-form-fields-right .contacts-form-field{ background: none; } span.contacts-form-field-label{ position: absolute; margin: 14px 0 0 12px; font-size: 16px; line-height: 100%; } .contacts-form-field.focus .contacts-form-field-label { z-index:3; position:absolute; margin-top:4px; font-size:12px; color: #888; } span.contacts-form-small-label{ z-index: 2; position: absolute; margin-top: 4px; margin-left: 11px; font-size: 12px; color: #888; } .contacts-form input.contacts-form-input, .contacts-form select{ padding: 18px 10px 6px 11px; border: 1px solid #d0ccca; font-size: 16px; line-height: 24px; box-sizing: border-box; width: 100%; background: transparent; position: relative; z-index: 2; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; margin: 0; } .contacts-form select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 6px; background: transparent url(/bitrix/templates/mirage/images/select-arrow-style.png) no-repeat 97% 50%; border-radius: 0; line-height: 22px; } .contacts-form select::-ms-expand{ display: none; } .contacts-form-field.error input.contacts-form-input, .contacts-form-field.error select{ border-color: red; } .contacts-form-city{ display: none; } .contacts-form-city input.contacts-form-input{ padding: 12px 10px 12px 11px; } span.contacts-noreq{ color: #aba6a3; } .contacts-form-fields-right textarea, .contacts-form-fields-right .contacts-form-textarea{ height: 100%; } .contacts-form textarea{ width: 100%; box-sizing: border-box; padding: 18px 10px 6px 11px; border: 1px solid #d0ccca; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } label.contacts-form-checkbox{ position: relative; display: inline-block; font-size: 16px; line-height: 24px; cursor: pointer; padding-left: 32px; } label.contacts-form-checkbox:before{ content: ''; width: 22px; height: 22px; background: url(/bitrix/templates/mirage/./images/checkbox.png) left 0 no-repeat; position: absolute; top: 2px; left: 0; } label.contacts-form-checkbox.checked:before{ background: url(/bitrix/templates/mirage/./images/checkbox_check.png) left 0 no-repeat; } .contacts-form-checkbox input{ position: absolute; left: -25px; cursor: pointer; opacity: 0; } input.contacts-form-submit{ margin-top: 30px; clear: both; display: block; } div.contacts-form-error{ margin: 20px 0; color: red; } div.contacts-form-result{ margin: 20px 0; } .contacts-form-result .errors{ display: none; color: red; margin: 10px 0; } .contacts-form-result .success{ display: none; margin: 10px 0; font-weight: bold; } .contacts-form .file input{ display: none; } .contacts-form div.file-desc{ display: inline-block; line-height: 20px; padding-left: 30px; background: url(/bitrix/templates/mirage/images/attach.png) 0 50% no-repeat; cursor: pointer; } .contacts-form div.file-desc b{ border-bottom: 1px dashed; } .contacts-form div.file-desc:hover b{ border-bottom-color: #fff; } @media(max-width: 1080px){ div.contacts-form-fields-left{ width: 49%; } div.contacts-form-fields-right{ width: 49%; } } @media(max-width: 980px){ .contacts-form-fields-columns div.contacts-form-field{ width: auto; float: none; } } @media(max-width: 780px){ input.contacts-form-submit{ margin-top: 20px; } } @media(max-width: 580px){ div.contacts-form-fields{ display: block; } div.contacts-form-fields-left{ display: block; width: auto; margin-right: 0; } div.contacts-form-fields-center{ display: none; } div.contacts-form-fields-right{ width: auto; display: block; margin-top: 20px; } label.contacts-form-checkbox{ font-size: 14px; } } /* ----------------------------- plitka-optom ------------------------- */ div.plitka-optom-top{ display: table; width: 100%; } div.plitka-optom-top-left, div.plitka-optom-top-right{ display: table-cell; width: 49%; vertical-align: top; } div.plitka-optom-top-right{ background: #e5e1db; padding: 40px; } div.plitka-optom-top-center{ display: table-cell; width: 2%; } .plitka-optom-top-right ul{ margin: 0; } div.plitka-optom-bottom{ margin-top: 50px; } .plitka-optom div.contacts-form-field{ margin-top: 0; margin-bottom: 20px; } .plitka-optom div.contacts-form-city.focus input{ padding: 18px 10px 6px 11px; } @media(max-width: 780px){ div.plitka-optom-top{ display: block; } div.plitka-optom-top-left, div.plitka-optom-top-right{ display: block; width: auto; } div.plitka-optom-top-right{ margin-top: 20px; padding: 20px; } div.plitka-optom-top-center{ display: none; } div.plitka-optom-bottom{ margin-top: 30px; } } /* ----------------------------- search page --------------------------- */ .search-page-subtitle{ font-size: 19px; font-weight: bold; margin: 20px 15px 20px 0; } div.search-page-collection a{ display: inline-block; margin-top: 10px; margin-right: 15px; } .search-page-form{ width: 40%; margin-bottom: 50px; position: relative; } input.search-page-inpt{ background: #fff; height: 30px; padding: 0 28px 0 7px; border: 1px solid #d8d8d8; box-sizing: border-box; width: 100%; } input.search-page-btn{ position: absolute; top: 0; right: 0; width: 28px; height: 30px; background: url(/bitrix/templates/mirage/images/search-btn.png) no-repeat 50% 50%; border: none; padding: 0; cursor: pointer; z-index: 3; text-indent: -9999px; } div.search-item-list{ margin-top: 0; } @media(max-width: 1080px){ .search-page-form{ width: 100%; } } @media(max-width: 480px){ .search-item-list .collection-list-item-info{ margin-top: 20px; } } div.page-404{ margin: 50px 0; text-align: center; } div.title-404{ font-size: 22px; font-weight: bold; margin-bottom: 15px; } /* ----------------------------- footer ------------------------------- */ div.footer{ background: #000; padding: 80px 0 50px; font-size: 14px; line-height: 18px; color: #949494; } .footer:after{ content: ''; display: block; clear: both; } .footer div.container{ position: relative; } div.footer-logo{ float: left; width: 17%; margin-right: 2%; } div.footer-logo img{ max-width: 100%; /*width: 200px;*/ margin-bottom: 20px; } div.footer-copyright{ margin-top: 0px; } div.footer-info{ float: left; width: 40%; } div.footer-company{ float: left; width: 48%; margin-right: 2%; } .footer-company a{ color: #fff; text-decoration: none; } .footer-company a:hover{ color: #cacaca; text-decoration: none; } .footer-company img{ display: block; margin-top: 12px; width: 95px; } div.footer-phone{ float: right; width: 48%; } div.footer-phone-number{ line-height: 20px; color: #fff; font-size: 24px; margin-bottom: 10px; font-weight: 500; } div.footer-phone-number a{ color: #fff; text-decoration: none; } a.footer-call-order{ font-size: 14px; color: #949494; text-decoration: none; } a.footer-call-order:hover{ text-decoration: none; color: #6b6b6b; } div.footer-menu{ float: left; width: 28%; } div.footer-menu:after{ content: ''; display: block; clear: both; } ul.footer-menu-col{ float: left; width: 48%; margin: 0 0 0 4%; padding: 0; list-style: none; } ul.footer-menu-type{ margin-left: 0; } ul.footer-menu-col li { padding: 0; margin: 0 0 7px; } ul.footer-menu-col li a{ display: inline-block; font-size: 14px; line-height: 120%; color: #cfcfcf; text-decoration: none; } ul.footer-menu-col li a:hover{ text-decoration: none; color: #8e8e8e; } div.footer-socials{ float: right; } .footer-socials a{ display: inline-block; width: 33px; height: 33px; margin-left: 20px; background-repeat: no-repeat; } .footer-socials a:first-child{ margin-left: 0; } .footer-socials a:hover{ opacity: 0.5; } .footer .cookie { position: relative; bottom: 0; margin-top: 10px; font-size: 12px; } @media(max-width: 1280px){ div.footer{ padding: 40px 0; } div.footer-logo{ width: 20%; margin-right: 2%; } div.footer-info{ width: 44%; margin-right: 2%; } div.footer-menu{ width: 32%; float: right; } div.footer-socials{ position: absolute; left: 0; bottom: 0; } div.footer-menu{ float: right; } } @media(max-width: 1180px){ div.footer-phone-number{ font-size: 23px; } } @media(max-width: 1080px){ .footer-menu-type{ display: none; } ul.footer-menu-col{ width: auto; float: none; margin: 0; } div.footer-info{ width: 54%; } div.footer-menu{ width: 22%; } div.footer-socials{ position: static; clear: both; padding: 10px 0 0; float: none; } } @media(max-width: 980px){ div.footer-logo{ width: 28%; } div.footer-info{ width: 40%; } div.footer-menu{ width: 28%; } div.footer-phone{ float: none; width: auto; } div.footer-company{ float: none; width: auto; margin-top: 20px; } } @media(max-width: 780px){ div.footer{ padding: 30px 0 50px; } } @media(max-width: 768px){ div.footer-menu{ display: block; width: 100%; margin-top: 20px; } ul.footer-menu-col li a{ font-size: 13px; } div.footer-logo{ width: 38%; } div.footer-info{ width: 60%; margin-right: 0; } } @media(max-width: 580px){ div.footer{ padding: 25px 0 50px; } div.footer-logo, div.footer-info{ float: none; width: auto; margin-right: 0; } div.footer-info{ margin-top: 15px; } div.footer-phone{ margin-top: 25px; } div.footer-socials{ position: static; padding-top: 25px; padding-bottom: 40px; float: none; } div.footer-copyright{ bottom: 0; } .footer .cookie{ position: static; } } /* *******************************************************************************/ .tabs {} .tabs .tags {} .tabs .tag { cursor: pointer; } .tabs .tag:hover {} .tabs .tag.active { cursor: default; } .tabs .panes {} .tabs .pane { display: none; } .tabs .pane.active { display: block; } .tabs.delivery {} .tabs.delivery .tag { position: relative; height: 40px; vertical-align: middle; color: #737373; text-align: center; text-decoration: none; /*font-size: 20px;*/ border-bottom: 1px dashed; } .tabs.delivery .tag + .tag { margin-left: 20px; } .tabs.delivery .tag.active { cursor: default; color: #000; border-bottom-color: #fff; } .tabs.delivery .tag.active:before { content: ''; display: block; position: absolute; top: 100%; width: 100%; height: 10px; /*background: url(/bitrix/templates/mirage/../img/tab-errow-down.png) 50% 0 no-repeat;*/ } .tabs.delivery .tag span { position: relative; height: 100%; display: inline-block; padding-left: 40px; } .tabs.delivery .tag[href="#pane-delivery"] span { height: 20px; line-height: 20px; /*background: url(/bitrix/templates/mirage/../img/icons/delivery.png) 0 0 no-repeat;*/ } .tabs.delivery .tag.active[href="#pane-delivery"] span { background-position: 0 -20px; } .tabs.delivery .tag[href="#pane-self"] span { height: 26px; line-height: 26px; /*background: url(/bitrix/templates/mirage/../img/icons/self.png) 0 0 no-repeat;*/ } .tabs.delivery .tag.active[href="#pane-self"] span { background-position: 0 -26px; } .tabs.delivery .tag[href="#pane-pay"] span { height: 24px; line-height: 24px; /*background: url(/bitrix/templates/mirage/../img/icons/pay.png) 0 0 no-repeat;*/ } .tabs.delivery .tag.active[href="#pane-pay"] span { background-position: 0 -24px; } .tabs.delivery .pane p:first-child { -webkit-margin-before: 1.33em; } .tabs.delivery .table-color { margin-bottom: 20px; } .tabs.delivery .table-color table { width: 100%; } .tabs.delivery .table-color thead td { width: 50%; padding: 10px; color: #fff; background: #4c4c49; } .tabs.delivery .table-color tbody td { padding: 5px 10px; } .tabs.delivery .tabs { margin-top: 30px; } #pane-photo, #pane-scheme { padding-top: 15px; } @media (min-width: 1024px) { .tabs.delivery .table-color thead td { width: auto; } .tabs.delivery .pane .table { display: table; width: 100%; } .tabs.delivery .pane .td { display: table-cell; padding-right: 20px; vertical-align: top; } .tabs.delivery .pane .td + .td { padding-left: 20px; padding-right: 0; } } .tabs.delivery h3 { color: #4c4c4c; } .contacts-form input[type=checkbox]{ width: auto; } /* End */ /* /bitrix/templates/mirage/fonts/HelveticaNeueCyr.css?15002932443607 */ /* /bitrix/templates/mirage/fonts/OpenSans.css?14891369411804 */ /* /bitrix/templates/mirage/owl.carousel/owl.carousel.css?14891369494112 */ /* /bitrix/templates/mirage/owl.carousel/animate.css?148170204672259 */ /* /bitrix/templates/mirage/jquery.fly/style.css?14939643292696 */ /* /bitrix/templates/mirage/styles.css?15006227003061 */ /* /bitrix/templates/mirage/template_styles.css?1760976510112582 */