div.pp_default .pp_top, div.pp_default .pp_top .pp_middle, div.pp_default .pp_top .pp_left, div.pp_default .pp_top .pp_right, div.pp_default .pp_bottom, div.pp_default .pp_bottom .pp_left, div.pp_default .pp_bottom .pp_middle, div.pp_default .pp_bottom .pp_right { height: 13px } div.pp_default .pp_top .pp_left { background: url(images/prettyPhoto/default/sprite.png) -78px -93px no-repeat } div.pp_default .pp_top .pp_middle { background: url(images/prettyPhoto/default/sprite_x.png) top left repeat-x } div.pp_default .pp_top .pp_right { background: url(images/prettyPhoto/default/sprite.png) -112px -93px no-repeat } div.pp_default .pp_content .ppt { color: #f8f8f8 } div.pp_default .pp_content_container .pp_left { background: url(images/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y; padding-left: 13px } div.pp_default .pp_content_container .pp_right { background: url(images/prettyPhoto/default/sprite_y.png) top right repeat-y; padding-right: 13px } div.pp_default .pp_next:hover { background: url(images/prettyPhoto/default/sprite_next.png) center right no-repeat; cursor: pointer } div.pp_default .pp_previous:hover { background: url(images/prettyPhoto/default/sprite_prev.png) center left no-repeat; cursor: pointer } div.pp_default .pp_expand { background: url(images/prettyPhoto/default/sprite.png) 0 -29px no-repeat; cursor: pointer; width: 28px; height: 28px } div.pp_default .pp_expand:hover { background: url(images/prettyPhoto/default/sprite.png) 0 -56px no-repeat; cursor: pointer } div.pp_default .pp_contract { background: url(images/prettyPhoto/default/sprite.png) 0 -84px no-repeat; cursor: pointer; width: 28px; height: 28px } div.pp_default .pp_contract:hover { background: url(images/prettyPhoto/default/sprite.png) 0 -113px no-repeat; cursor: pointer } div.pp_default .pp_close { width: 30px; height: 30px; background: url(images/prettyPhoto/default/sprite.png) 2px 1px no-repeat; cursor: pointer } div.pp_default .pp_gallery ul li a { background: url(images/prettyPhoto/default/default_thumb.png) center center #f8f8f8; border: 1px solid #aaa } div.pp_default .pp_social { margin-top: 7px } div.pp_default .pp_gallery a.pp_arrow_previous, div.pp_default .pp_gallery a.pp_arrow_next { position: static; left: auto } div.pp_default .pp_nav .pp_play, div.pp_default .pp_nav .pp_pause { background: url(images/prettyPhoto/default/sprite.png) -51px 1px no-repeat; height: 30px; width: 30px } div.pp_default .pp_nav .pp_pause { background-position: -51px -29px } div.pp_default a.pp_arrow_previous, div.pp_default a.pp_arrow_next { background: url(images/prettyPhoto/default/sprite.png) -31px -3px no-repeat; height: 20px; width: 20px; margin: 4px 0 0 } div.pp_default a.pp_arrow_next { left: 52px; background-position: -82px -3px } div.pp_default .pp_content_container .pp_details { margin-top: 5px } div.pp_default .pp_nav { clear: none; height: 30px; width: 110px; position: relative } div.pp_default .pp_nav .currentTextHolder { font-family: Georgia; font-style: italic; color: #999; font-size: 11px; left: 75px; line-height: 25px; position: absolute; top: 2px; margin: 0; padding: 0 0 0 10px } div.pp_default .pp_close:hover, div.pp_default .pp_nav .pp_play:hover, div.pp_default .pp_nav .pp_pause:hover, div.pp_default .pp_arrow_next:hover, div.pp_default .pp_arrow_previous:hover { opacity: 0.7 } div.pp_default .pp_description { font-size: 11px; font-weight: 700; line-height: 14px; margin: 5px 50px 5px 0 } div.pp_default .pp_bottom .pp_left { background: url(images/prettyPhoto/default/sprite.png) -78px -127px no-repeat } div.pp_default .pp_bottom .pp_middle { background: url(images/prettyPhoto/default/sprite_x.png) bottom left repeat-x } div.pp_default .pp_bottom .pp_right { background: url(images/prettyPhoto/default/sprite.png) -112px -127px no-repeat } div.pp_default .pp_loaderIcon { background: url(images/prettyPhoto/default/loader.gif) center center no-repeat } div.light_rounded .pp_top .pp_left { background: url(images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat } div.light_rounded .pp_top .pp_right { background: url(images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat } div.light_rounded .pp_next:hover { background: url(images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer } div.light_rounded .pp_previous:hover { background: url(images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer } div.light_rounded .pp_expand { background: url(images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer } div.light_rounded .pp_expand:hover { background: url(images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer } div.light_rounded .pp_contract { background: url(images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer } div.light_rounded .pp_contract:hover { background: url(images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer } div.light_rounded .pp_close { width: 75px; height: 22px; background: url(images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer } div.light_rounded .pp_nav .pp_play { background: url(images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px } div.light_rounded .pp_nav .pp_pause { background: url(images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px } div.light_rounded .pp_arrow_previous { background: url(images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat } div.light_rounded .pp_arrow_next { background: url(images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat } div.light_rounded .pp_bottom .pp_left { background: url(images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat } div.light_rounded .pp_bottom .pp_right { background: url(images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat } div.dark_rounded .pp_top .pp_left { background: url(images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat } div.dark_rounded .pp_top .pp_right { background: url(images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat } div.dark_rounded .pp_content_container .pp_left { background: url(images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y } div.dark_rounded .pp_content_container .pp_right { background: url(images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y } div.dark_rounded .pp_next:hover { background: url(images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer } div.dark_rounded .pp_previous:hover { background: url(images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer } div.dark_rounded .pp_expand { background: url(images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer } div.dark_rounded .pp_expand:hover { background: url(images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer } div.dark_rounded .pp_contract { background: url(images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer } div.dark_rounded .pp_contract:hover { background: url(images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer } div.dark_rounded .pp_close { width: 75px; height: 22px; background: url(images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer } div.dark_rounded .pp_description { margin-right: 85px; color: #fff } div.dark_rounded .pp_nav .pp_play { background: url(images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px } div.dark_rounded .pp_nav .pp_pause { background: url(images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px } div.dark_rounded .pp_arrow_previous { background: url(images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat } div.dark_rounded .pp_arrow_next { background: url(images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat } div.dark_rounded .pp_bottom .pp_left { background: url(images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat } div.dark_rounded .pp_bottom .pp_right { background: url(images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat } div.dark_rounded .pp_loaderIcon { background: url(images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat } div.dark_square .pp_left, div.dark_square .pp_middle, div.dark_square .pp_right, div.dark_square .pp_content { background: #000 } div.dark_square .pp_description { color: #fff; margin: 0 85px 0 0 } div.dark_square .pp_loaderIcon { background: url(images/prettyPhoto/dark_square/loader.gif) center center no-repeat } div.dark_square .pp_expand { background: url(images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer } div.dark_square .pp_expand:hover { background: url(images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer } div.dark_square .pp_contract { background: url(images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer } div.dark_square .pp_contract:hover { background: url(images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer } div.dark_square .pp_close { width: 75px; height: 22px; background: url(images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat; cursor: pointer } div.dark_square .pp_nav { clear: none } div.dark_square .pp_nav .pp_play { background: url(images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px } div.dark_square .pp_nav .pp_pause { background: url(images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px } div.dark_square .pp_arrow_previous { background: url(images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat } div.dark_square .pp_arrow_next { background: url(images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat } div.dark_square .pp_next:hover { background: url(images/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer } div.dark_square .pp_previous:hover { background: url(images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer } div.light_square .pp_expand { background: url(images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer } div.light_square .pp_expand:hover { background: url(images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer } div.light_square .pp_contract { background: url(images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer } div.light_square .pp_contract:hover { background: url(images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer } div.light_square .pp_close { width: 75px; height: 22px; background: url(images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer } div.light_square .pp_nav .pp_play { background: url(images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px } div.light_square .pp_nav .pp_pause { background: url(images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px } div.light_square .pp_arrow_previous { background: url(images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat } div.light_square .pp_arrow_next { background: url(images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat } div.light_square .pp_next:hover { background: url(images/prettyPhoto/light_square/btnNext.png) center right no-repeat; cursor: pointer } div.light_square .pp_previous:hover { background: url(images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat; cursor: pointer } div.facebook .pp_top .pp_left { background: url(images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat } div.facebook .pp_top .pp_middle { background: url(images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x } div.facebook .pp_top .pp_right { background: url(images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat } div.facebook .pp_content_container .pp_left { background: url(images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y } div.facebook .pp_content_container .pp_right { background: url(images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y } div.facebook .pp_expand { background: url(images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat; cursor: pointer } div.facebook .pp_expand:hover { background: url(images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat; cursor: pointer } div.facebook .pp_contract { background: url(images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat; cursor: pointer } div.facebook .pp_contract:hover { background: url(images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat; cursor: pointer } div.facebook .pp_close { width: 22px; height: 22px; background: url(images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat; cursor: pointer } div.facebook .pp_description { margin: 0 37px 0 0 } div.facebook .pp_loaderIcon { background: url(images/prettyPhoto/facebook/loader.gif) center center no-repeat } div.facebook .pp_arrow_previous { background: url(images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat; height: 22px; margin-top: 0; width: 22px } div.facebook .pp_arrow_previous.disabled { background-position: 0 -96px; cursor: default } div.facebook .pp_arrow_next { background: url(images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat; height: 22px; margin-top: 0; width: 22px } div.facebook .pp_arrow_next.disabled { background-position: -32px -96px; cursor: default } div.facebook .pp_nav { margin-top: 0 } div.facebook .pp_nav p { font-size: 15px; padding: 0 3px 0 4px } div.facebook .pp_nav .pp_play { background: url(images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat; height: 22px; width: 22px } div.facebook .pp_nav .pp_pause { background: url(images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat; height: 22px; width: 22px } div.facebook .pp_next:hover { background: url(images/prettyPhoto/facebook/btnNext.png) center right no-repeat; cursor: pointer } div.facebook .pp_previous:hover { background: url(images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat; cursor: pointer } div.facebook .pp_bottom .pp_left { background: url(images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat } div.facebook .pp_bottom .pp_middle { background: url(images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x } div.facebook .pp_bottom .pp_right { background: url(images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat } div.pp_pic_holder a:focus { outline: none } div.pp_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500 } div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000 } .pp_content { height: 40px; min-width: 40px } * html .pp_content { width: 40px } .pp_content_container { position: relative; text-align: left; width: 100% } .pp_content_container .pp_left { padding-left: 20px } .pp_content_container .pp_right { padding-right: 20px } .pp_content_container .pp_details { float: left; margin: 10px 0 2px } .pp_description { display: none; margin: 0 } .pp_social { float: left; margin: 0 } .pp_social .facebook { float: left; margin-left: 5px; width: 55px; overflow: hidden } .pp_social .twitter { float: left } .pp_nav { clear: right; float: left; margin: 3px 10px 0 0 } .pp_nav p { float: left; white-space: nowrap; margin: 2px 4px } .pp_nav .pp_play, .pp_nav .pp_pause { float: left; margin-right: 4px; text-indent: -10000px } a.pp_arrow_previous, a.pp_arrow_next { display: block; float: left; height: 15px; margin-top: 3px; overflow: hidden; text-indent: -10000px; width: 14px } .pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000 } .pp_gallery { display: none; left: 50%; margin-top: -50px; position: absolute; z-index: 10000 } .pp_gallery div { float: left; overflow: hidden; position: relative } .pp_gallery ul { float: left; height: 35px; position: relative; white-space: nowrap; margin: 0 0 0 5px; padding: 0 } .pp_gallery ul a { border: 1px rgba(0, 0, 0, 0.5) solid; display: block; float: left; height: 33px; overflow: hidden } .pp_gallery ul a img { border: 0 } .pp_gallery li { display: block; float: left; margin: 0 5px 0 0; padding: 0 } .pp_gallery li.default a { background: url(images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat; display: block; height: 33px; width: 50px } .pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next { margin-top: 7px !important } a.pp_next { background: url(images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: right; height: 100%; text-indent: -10000px; width: 49% } a.pp_previous { background: url(images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: left; height: 100%; text-indent: -10000px; width: 49% } a.pp_expand, a.pp_contract { cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000 } a.pp_close { position: absolute; right: 0; top: 0; display: block; line-height: 22px; text-indent: -10000px } .pp_loaderIcon { display: block; height: 24px; left: 50%; position: absolute; top: 50%; width: 24px; margin: -12px 0 0 -12px } #pp_full_res { line-height: 1 !important } #pp_full_res .pp_inline { text-align: left } #pp_full_res .pp_inline p { margin: 0 0 15px } div.ppt { color: #fff; display: none; font-size: 17px; z-index: 9999; margin: 0 0 5px 15px } div.pp_default .pp_content, div.light_rounded .pp_content { background-color: #fff } div.pp_default #pp_full_res .pp_inline, div.light_rounded .pp_content .ppt, div.light_rounded #pp_full_res .pp_inline, div.light_square .pp_content .ppt, div.light_square #pp_full_res .pp_inline, div.facebook .pp_content .ppt, div.facebook #pp_full_res .pp_inline { color: #000 } div.pp_default .pp_gallery ul li a:hover, div.pp_default .pp_gallery ul li.selected a, .pp_gallery ul a:hover, .pp_gallery li.selected a { border-color: #fff } div.pp_default .pp_details, div.light_rounded .pp_details, div.dark_rounded .pp_details, div.dark_square .pp_details, div.light_square .pp_details, div.facebook .pp_details { position: relative } div.light_rounded .pp_top .pp_middle, div.light_rounded .pp_content_container .pp_left, div.light_rounded .pp_content_container .pp_right, div.light_rounded .pp_bottom .pp_middle, div.light_square .pp_left, div.light_square .pp_middle, div.light_square .pp_right, div.light_square .pp_content, div.facebook .pp_content { background: #fff } div.light_rounded .pp_description, div.light_square .pp_description { margin-right: 85px } div.light_rounded .pp_gallery a.pp_arrow_previous, div.light_rounded .pp_gallery a.pp_arrow_next, div.dark_rounded .pp_gallery a.pp_arrow_previous, div.dark_rounded .pp_gallery a.pp_arrow_next, div.dark_square .pp_gallery a.pp_arrow_previous, div.dark_square .pp_gallery a.pp_arrow_next, div.light_square .pp_gallery a.pp_arrow_previous, div.light_square .pp_gallery a.pp_arrow_next { margin-top: 12px !important } div.light_rounded .pp_arrow_previous.disabled, div.dark_rounded .pp_arrow_previous.disabled, div.dark_square .pp_arrow_previous.disabled, div.light_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default } div.light_rounded .pp_arrow_next.disabled, div.dark_rounded .pp_arrow_next.disabled, div.dark_square .pp_arrow_next.disabled, div.light_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default } div.light_rounded .pp_loaderIcon, div.light_square .pp_loaderIcon { background: url(images/prettyPhoto/light_rounded/loader.gif) center center no-repeat } div.dark_rounded .pp_top .pp_middle, div.dark_rounded .pp_content, div.dark_rounded .pp_bottom .pp_middle { background: url(images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat } div.dark_rounded .currentTextHolder, div.dark_square .currentTextHolder { color: #c4c4c4 } div.dark_rounded #pp_full_res .pp_inline, div.dark_square #pp_full_res .pp_inline { color: #fff } .pp_top, .pp_bottom { height: 20px; position: relative } * html .pp_top, * html .pp_bottom { padding: 0 20px } .pp_top .pp_left, .pp_bottom .pp_left { height: 20px; left: 0; position: absolute; width: 20px } .pp_top .pp_middle, .pp_bottom .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px } * html .pp_top .pp_middle, * html .pp_bottom .pp_middle { left: 0; position: static } .pp_top .pp_right, .pp_bottom .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px } .pp_fade, .pp_gallery li.default a img { display: none } @media only screen and (max-device-width: 600px) { .pp_pic_holder.pp_default { width: 100% !important; left: 0 !important; overflow: hidden; } div.pp_default .pp_content_container .pp_left { padding-left: 0 !important; } div.pp_default .pp_content_container .pp_right { padding-right: 0 !important; } .pp_content { width: 100% !important; height: auto !important; } .pp_fade { width: 100% !important; height: 100% !important; } a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none !important; } #pp_full_res img { width: 100% !important; height: auto !important; } .pp_details { width: 94% !important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px !important; } a.pp_close { right: 10px !important; top: 10px !important; } }/*------------------------------- POPUP.CSS -------------------------------*/ .popup_back { height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 100; } .popup_cont { position: fixed; z-index: 102; background: rgba(0,0,0,0.4); } .preloader { z-index: 101; } /*--------------------- EDIT BELOW */ .popup_close { color: #888; cursor: pointer; position: absolute; padding: 5px; right: 5px; top: 0; } .popup_close:hover { color: #111; } .popup_back { cursor: pointer; background-color: #222; } div.popup { background: #fff; padding: 25px; box-shadow: 0 3px 10px #222; } .preloader { left: 50%; margin: -10px 0 0 -25px; position: fixed; top: 50%; }/* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @charset "UTF-8"; html { color: #000; background: #fff; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; } input, textarea, select { *font-size: 100%; } legend { color: #000; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .ui-small-padding { padding-top: 2rem; padding-bottom: 2rem; } .ui-large-padding { padding-top: 4rem; padding-bottom: 4rem; } .ui-link { color: rgba(255, 255, 255, 0.6); text-decoration: none; } * { box-sizing: border-box; vertical-align: top; } html { height: 100%; font-size: 10px; } body { width: 100%; min-height: 100%; vertical-align: top; font-size: 1.5rem; font-family: "Noto Sans", "Roboto", "Verdana", "Arial Narrow", sans-serif; font-weight: 200; color: #202020; } body > .container { overflow: hidden; } img { display: inline-block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } em { font-weight: bold; } strong { font-weight: normal; } hr { display: block; border: none; border-bottom: 1px solid #ccc; margin: 2rem 0; } h1, h2, h3, h4 { margin-bottom: 1em; line-height: 120%; } h1 { font-size: 3.6rem; font-family: "Noto Sans", "Roboto", "Verdana", "Arial Narrow", sans-serif; font-weight: 200; } h2 { font-size: 3rem; font-family: "Noto Sans", "Roboto", "Verdana", "Arial Narrow", sans-serif; font-weight: 200; } h3 { font-size: 2rem; } p { margin-bottom: 0.5em; } strong { font-weight: bold; } ol > li, ul > li { margin: 0; list-style-type: none; } i { display: inline-block; background-repeat: no-repeat; background-position: center; width: 2rem; height: 2rem; background-size: contain; } .hidden { display: none !important; } .clearfix { clear: both; } .ui-small-padding { padding-top: 2rem; padding-bottom: 2rem; } .ui-large-padding { padding-top: 4rem; padding-bottom: 4rem; } .ui-link { color: rgba(255, 255, 255, 0.6); text-decoration: none; } .ui-small-padding { padding-top: 2rem; padding-bottom: 2rem; } .ui-large-padding { padding-top: 4rem; padding-bottom: 4rem; } .ui-link { color: rgba(255, 255, 255, 0.6); text-decoration: none; } .ui-icon { display: inline-block; content: ''; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; background-position: center; background-repeat: no-repeat; background-size: contain; vertical-align: middle; } .ui-button, input[type="button"], input[type="submit"], button { display: inline-block; display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; cursor: pointer; text-decoration: none; white-space: nowrap; font-size: 1.6rem; margin: 0; padding: 1.2rem 3rem; border-radius: 0; background: #ffc127; color: #202020; outline: none; border: 0; position: relative; transition: 0.3s all; } .ui-button:hover, input:hover[type="button"], input:hover[type="submit"], button:hover { background: #202020; color: white; } .ui-button-white { display: inline-block; display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; cursor: pointer; text-decoration: none; white-space: nowrap; font-size: 1.6rem; margin: 0; padding: 1.2rem 3rem; border-radius: 0; background: #ffc127; color: #202020; outline: none; border: 0; position: relative; transition: 0.3s all; color: #202020; background-color: #ffffff; } .ui-button-white:hover { background: #202020; color: white; } .ui-button.-black { background: #000; color: #fff; } .ui-button.-black:hover { background: #ddd; color: #000; } .ui-button-black { display: inline-block; display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; cursor: pointer; text-decoration: none; white-space: nowrap; font-size: 1.6rem; margin: 0; padding: 1.2rem 3rem; border-radius: 0; background: #ffc127; color: #202020; outline: none; border: 0; position: relative; transition: 0.3s all; color: #ffffff; background-color: #202020; } .ui-button-black:hover { background: #202020; color: white; } .ui-input, input[type="text"], input[type="checkbox"], input[type="password"], input[type="email"], select, textarea { border: 1px solid #c4c4c4; padding: 1.2rem 2rem; font-size: 1.5rem; border-radius: 0; outline: 0; color: black; overflow: hidden; background: transparent; } .ui-input:focus, input:focus[type="text"], input:focus[type="checkbox"], input:focus[type="password"], input:focus[type="email"], select:focus, textarea:focus { background-color: white; color: #202020; border-color: #ffc127; } textarea { min-height: 85px; } input[type="checkbox"] { position: relative; width: 20px; height: 20px; margin-right: 10px; background-color: transparent; } input[type="checkbox"]:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 18px; height: 18px; background: white; border: 1px solid #cfc8bb; } input[type="checkbox"]:checked:after { content: ''; display: block; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; background: #ac9d7d; } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1.5rem 1rem; background-position: right center; background-clip: border-box; -moz-background-clip: border-box; -webkit-background-clip: border-box; } form { margin: 0 auto; } form h2 { font-size: 2rem; margin-bottom: 1rem; padding: 0; } form input[type="text"], form input[type="password"], form textarea { display: block; width: 100%; margin-bottom: 2rem; } form input[type="submit"], form input[type="button"] { display: inline-block; } form .form-input { display: block; width: 100%; margin-bottom: 2rem; } form .buttons { margin-top: 1rem; } form input.error { outline: 2px solid red; } form label { display: inline-block; margin-bottom: 0.5rem; font-size: 90%; opacity: 0.9; font-weight: bold; } form input[type="text"], form select, form textarea { width: 100%; } form .vcap-input { display: flex; align-items: center; align-content: center; margin-bottom: 1rem; } form .vcap-input input { margin-bottom: 0; } form .vcap-input label { margin-bottom: 0; } .breadcrumbs { margin-bottom: 2rem !important; position: relative; display: flex; flex-flow: row; align-items: center; color: #202020; } .breadcrumbs ul { margin-left: 0 !important; } .breadcrumbs li { display: inline-block; position: relative; } .breadcrumbs li a { display: inline-block; } .breadcrumbs li:not(:last-child):after { display: inline-block; content: ''; position: relative; right: 0; margin: 0 1.5rem; top: 50%; transform: translateY(-50%); display: inline-flex; width: 4px; height: 4px; background: #ffc127; align-content: center; } .breadcrumbs a.B_currentCrumb { color: #858585; } .breadcrumbs a { text-decoration: underline; } .breadcrumbs a:hover { text-decoration: none; } .gallery { display: block; margin-left: -1rem; margin-right: -1rem; } .gallery .gallery-item { display: inline-block; margin: 1rem; position: relative; } .gallery .gallery-item .image { display: block; width: 230px; height: 180px; position: relative; } .gallery .gallery-item img { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; } .gallery .gallery-preview { display: inline-block; margin: 1rem; position: relative; } .gallery .gallery-preview .image { width: 230px; height: 180px; position: relative; margin-bottom: 1rem; border-bottom: 2px solid #c6c6c6; } .gallery .gallery-preview img { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; } .gallery .gallery-preview .title { text-align: center; text-decoration: underline; } .gallery .gallery-preview a { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .gallery .gallery-preview:hover .image { border-bottom: 2px solid #ffc127; } .gallery .gallery-preview:hover .title { text-decoration: none; } .message-box { background: white; position: relative; border: 2px solid #fec127; display: flex; justify-content: flex-start; align-items: flex-start; padding: 2rem 4rem; padding-left: 16rem !important; text-align: left; margin: 2rem 0; flex-flow: column; } .message-box h2 { text-align: left; font-size: 2.4rem; margin-bottom: 1rem; margin-top: 0; } .message-box > *:last-child { padding-bottom: 0; } .message-box .text { overflow: hidden; } .message-box:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 14rem; background: url("../img/icon-message-box-info.png") center no-repeat; } .message-box:after { content: ''; display: block; position: absolute; left: 14rem; top: 0; bottom: 0; width: 1rem; background: linear-gradient(to right, #f0f0f0aa, transparent); } .message-box.home:before { background-image: url(../img/icon-message-box-home.png); } .message-box.alert { box-shadow: 0 2px 0 0 #fec127; } .message-box.alert:before { background-image: url(../img/icon-message-box-alert.png); background-color: #fec127; } .message-box.percent:before { background-image: url(../img/icon-message-box-percent.png); } .message-queue { position: fixed; bottom: 0; padding: 1rem; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); } .message-queue .message { margin: 0 auto; max-width: 700px; display: block; background: white; padding: 1rem; margin-bottom: 0.5rem; border-radius: 3px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); } .message-queue .message:last-child { margin-bottom: 0; } .message-queue .message.error { border-left: 5px solid #ffc127; } .message-queue .message.warning { border-left: 5px solid #ffc127; } .pagination { display: flex; margin: 4rem; text-align: center; align-items: center; justify-content: center; flex-wrap: wrap; } .pagination li a { display: inline-flex; margin: 0.5rem 0.5rem; } .pagination li.active a { background: #3f3f3f; color: #ffffff; } .pagination li { display: inline-flex; list-style-type: none; } .pagination li:not(.control) a { border-radius: 50%; min-width: 30px; width: 30px; height: 30px; align-items: center; justify-content: center; text-decoration: none; } .pagination li:hover:not(.active) a { background: #f4f4f4; } .partners-logos { display: flex; grid-gap: 2rem; flex-wrap: wrap; } .partners-logos > div { display: inline-block; max-width: 250px; position: relative; } .partners-logos div > a { display: block; position: relative; } .partners-logos img { height: 70px; max-width: 100%; } .protection-catalog { display: grid; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: 2rem; max-width: 1100px; margin: 0 auto; } .protection-catalog .card { text-align: center; } .protection-catalog .card img { margin-bottom: 0.5rem; } .cart-controls { display: flex; flex-flow: column; flex-wrap: nowrap; margin-bottom: 1rem; position: relative; grid-gap: 1rem; } .cart-controls input[type="text"] { width: 100%; text-align: center !important; } .cart-controls .number-input { position: relative; width: 100%; } .cart-controls .plus, .cart-controls .minus { top: 0; position: absolute; width: 2rem; height: 100%; cursor: pointer; font-size: 2rem; color: #888; display: flex; align-content: center; align-items: center; text-align: center; justify-content: center; } .cart-controls .plus { right: 5px; } .cart-controls .minus { left: 5px; } .shop-cart-controls > * { margin-bottom: 0.5rem; } .shop-cart-controls .buy-with-click { width: 100%; } .shop-cart-controls .buttons { display: flex; justify-content: center; align-items: center; } .shop-cart-controls .buttons a { display: inline-block; margin: 1rem; } .shop-filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -0.5rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #e0e0e0; } .shop-filters > * { display: inline-flex; align-items: center; margin: 0.5rem; flex-grow: 1; } .shop-filters .title { margin-right: 1rem; } .shop-filters .count { max-width: 200px; } .shop-filters .search { display: flex; align-items: center; } .shop-filters .search input[type="text"] { flex-grow: 1; max-width: 160px; } .shop-filters a.direction { display: inline-block; width: 2rem; height: 2rem; background: url(../img/icon-sort-desc.png) no-repeat center; } .shop-filters a.direction[data-value="1"] { background-image: url(../img/icon-sort-asc.png); } .slider { display: block; position: relative; } .slick-list { display: block; overflow: hidden; position: relative; margin-bottom: 2rem; } .slick-track { display: block; } .slick-slider { position: relative; } .slick-slider .slick-arrow { padding: 0; position: absolute !important; top: 50% !important; width: 4rem; height: 4rem; color: transparent !important; transform: translateY(-50%); z-index: 100; background: transparent; border-radius: 50%; box-shadow: none; } .slick-slider .slick-arrow:hover { background: #ffc127; box-shadow: none; } .slick-slider .slick-arrow:after { content: ''; display: inline-block; width: 3rem; height: 3rem; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: #ffc127; } .slick-slider .slick-arrow:hover:after { background-color: white; } .slick-slider .slick-prev { position: absolute; left: -6rem; } .slick-slider .slick-prev:after { mask: url(../img/icon-arrow-left.svg) center no-repeat; mask-size: 70%; -webkit-mask: url(../img/icon-arrow-left.svg) center no-repeat; -webkit-mask-size: 70%; } .slick-slider .slick-next { position: absolute; right: -6rem; } .slick-slider .slick-next:after { mask: url(../img/icon-arrow-right.svg) center no-repeat; mask-size: 70%; -webkit-mask: url(../img/icon-arrow-right.svg) center no-repeat; -webkit-mask-size: 70%; } .slick-slider .slick-dots { position: absolute; bottom: -1rem; left: 50%; white-space: nowrap; transform: translateX(-50%); } .slick-slider .slick-dots li { display: inline-block; margin: 0.2rem; } .slick-slider .slick-dots li button { display: inline-block; padding: 0; background: #ececec; color: transparent; width: 1.5rem !important; height: 1.5rem !important; border-radius: 50%; border: 2px solid white; } .slick-slider .slick-dots li.slick-active button { background: #ffc127; } @media screen and (max-width: 960px) { .slick-slider .slick-arrow { background-color: white; } .slick-slider .slick-prev { left: 1rem; } .slick-slider .slick-next { right: 1rem; } } .social-icons { white-space: nowrap; } .social-icons a { width: 3rem; height: 3rem; display: inline-block; border-radius: 50%; background-color: #ffc127; background-position: center; background-size: auto; background-repeat: no-repeat; margin-right: 0.4rem; position: relative; display: inline-flex; justify-content: center; align-items: center; transition: .3s all; } .social-icons a:hover { background: #202020; } .social-icons a:hover:after { filter: invert(100%); transition: .3s all; } .social-icons a:after { content: ''; display: inline-block; width: 1.5rem; height: 1.5rem; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 1; } .social-icons a.vk:after { background-image: url(../img/icon-social-vk.svg); } .social-icons a.twitter:after { background-image: url(../img/icon-social-twitter.svg); } .social-icons a.instagram:after { background-image: url(../img/icon-social-instagram.svg); } .social-icons a.facebook:after { background-image: url(../img/icon-social-facebook.svg); } .v-rating { display: inline-flex; align-items: center; justify-content: flex-start; overflow: hidden; } .v-rating .title { display: inline-block; margin-right: 0.5rem; } .v-rating .values { display: inline-block; white-space: nowrap; } .v-rating .values span { display: inline-block; width: 2rem; height: 2rem; background: url(../img/icon-rating.png) center no-repeat; margin: 0.2rem; cursor: pointer; } .v-rating .values span.active { display: inline-block; width: 2rem; height: 2rem; background: url(../img/icon-rating-active.png); } #side .menu .shop-menu ul { padding: 0rem; display: block; padding-left: 0rem; } .shop-menu { position: relative; } .shop-menu h2 { padding: 1.5rem 2rem; position: relative; padding-left: 5rem; } .shop-menu h2::after { display: inline-block; content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(transparent, #c0c0c0); } .shop-menu .show-more { background-color: #ffc127; position: absolute; right: 10px; transform: translate(100%, -25%); z-index: 100; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4); display: block; } .shop-menu .show-more:before { content: ''; display: block; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #ffc127 transparent transparent; transition: 0.3s all; } .shop-menu .show-more:hover { background-color: #202020; } .shop-menu .show-more:hover:before { border-right-color: #202020; } .shop-menu .menu-property { position: relative; padding-bottom: 2rem; } .shop-menu .menu-property::after { display: inline-block; content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #c0c0c0; } .shop-menu .menu-property > .title { padding: 1.5rem 2rem; position: relative; padding-left: 5rem; } .shop-menu .menu-property > .title::after { display: inline-block; content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(transparent, #c0c0c0); } .shop-menu .menu-property > .input { padding: 2rem; padding-bottom: 0; padding-left: 5rem; } .shop-menu.primary { overflow: hidden; } .shop-menu.primary ul { margin: 2rem; } .shop-menu.primary ul li { margin: 0; margin-bottom: 0.5rem; border-radius: 0; padding: 1rem 1rem; position: relative; padding-left: 4rem; } .shop-menu.primary ul li > a { position: relative; padding-left: 2rem; } .shop-menu.primary ul li > a::before { display: inline-block; content: ''; display: block; width: 0.5rem; height: 0.5rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #ffc127; } .shop-menu.primary ul li.active { background: #ffc127; color: white; } .shop-menu.primary ul li.active > a::before { background-color: white; } @media screen and (max-width: 960px) { .shop-menu.primary::after { display: none; } .shop-menu.primary { background: transparent; padding: 0; margin-bottom: 1rem; } .shop-menu.primary > * { padding: 0; } .shop-menu.primary h2 { display: none; } .shop-menu.primary ul { padding: 0rem; margin: 0; } .shop-menu.primary ul li { display: inline-block; } } @media screen and (max-width: 960px) { #side > .container > * { margin-bottom: 1rem; } .shop-menu > * { padding: 1rem; } .shop-menu > * > .title { font-size: 1.3rem; } .shop-menu > * > .title { margin-bottom: 1rem; } .shop-menu .ui-menu .title, .shop-menu .ui-multi-select .title, .shop-menu .ui-color .title, .shop-menu .ui-select .title { font-size: 1.5rem; } .shop-menu .menu-property { padding-bottom: 0; } .shop-menu .menu-property > .title { padding: 0.5rem; padding-left: 2rem; } .shop-menu .menu-property > .input { padding-top: 1rem; padding-bottom: 2rem; } .shop-menu li { display: inline-block; background: #f0f0f0; margin-bottom: 0.5rem; margin-right: 0.5rem; padding: 0.2rem; } .shop-menu h2 { font-size: 2rem; padding-top: 1rem; padding-bottom: 1rem; padding-left: 4rem; background-size: auto 2rem; } .shop-menu .show-more { right: 0; transform: none; position: fixed !important; left: 0; right: 0; bottom: 0; width: 100%; height: 6rem !important; top: auto !important; } .shop-menu .ui-menu li:not(:last-child) { border-bottom: none; } .shop-menu .ui-menu li > a { padding-left: 0; margin-bottom: 0; } .shop-menu ul.production-menu { padding: 1rem; } .shop-menu .ui-multi-select .title { margin-bottom: 0; position: relative; cursor: pointer; } .shop-menu .ui-multi-select .title::after { position: absolute; display: block; content: ''; right: 1rem; top: 50%; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #474747 transparent transparent transparent; transform: translateY(-50%); } .shop-menu .ui-multi-select.open .title::after { border-width: 0 5px 5px 5px; } .shop-menu .ui-menu .title { position: relative; cursor: pointer; } .shop-menu .ui-menu .title::after { position: absolute; display: block; content: ''; right: 1rem; top: 50%; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #474747 transparent transparent transparent; transform: translateY(-50%); } .shop-menu .ui-menu.open .title::after { border-width: 0 5px 5px 5px; } .shop-menu .ui-color .title { position: relative; cursor: pointer; } .shop-menu .ui-color .title::after { position: absolute; display: block; content: ''; right: 1rem; top: 50%; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #474747 transparent transparent transparent; transform: translateY(-50%); } .shop-menu .ui-color.open .title::after { border-width: 0 5px 5px 5px; } .shop-menu .ui-select .title { position: relative; cursor: pointer; } .shop-menu .ui-select .title::after { position: absolute; display: block; content: ''; right: 1rem; top: 50%; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #474747 transparent transparent transparent; transform: translateY(-50%); } .shop-menu .ui-select.open .title::after { border-width: 0 5px 5px 5px; } .shop-menu .ui-multi-select .input { display: none; } .shop-menu .ui-multi-select[data-value] .input { display: block; } .shop-menu .ui-multi-select.open .input { display: block; } .shop-menu .ui-multi-select.open > .title { margin-bottom: 1rem !important; } .shop-menu .ui-color .input { display: none; } .shop-menu .ui-color[data-value] .input { display: block; } .shop-menu .ui-color.open .input { display: block; } .shop-menu .ui-color.open > .title { margin-bottom: 1rem !important; } .shop-menu .ui-select .input { display: none; } .shop-menu .ui-select[data-value] .input { display: block; } .shop-menu .ui-select.open .input { display: block; } .shop-menu .ui-select.open > .title { margin-bottom: 1rem !important; } .shop-menu .ui-menu .input { display: none; } .shop-menu .ui-menu[data-value] .input { display: block; } .shop-menu .ui-menu.open .input { display: block; } .shop-menu .ui-menu.open > .title { margin-bottom: 1rem !important; } .shop-menu .ui-multi-select .input .option { display: inline-flex; margin-right: 1rem; } .shop-menu .ui-multi-select .input input { margin-right: 0.2rem; } } .ui-menu li { padding: 0.5rem 1rem; border-radius: 0; } .ui-menu li.active { background: #ffc127; color: #202020; } .ui-multi-select { position: relative; } .ui-multi-select .input { max-height: 200px; overflow: auto; } .ui-multi-select .input .option { margin-bottom: 0.2rem; display: flex; align-items: center; } .ui-multi-select .input input { margin-right: 0.5rem; } .ui-multi-select .input a { text-decoration: underline; } .ui-color .input { padding-bottom: 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); grid-gap: 0.2rem; } .ui-color .input div { display: inline-block; border-radius: 0; background: black; height: 30px; border: 3px solid #ffffff; } .ui-color .input div[data-value="белый"] { background: white; } .ui-color .input div[data-value="желтый"] { background: yellow; } .ui-color .input div[data-value="красный"] { background: red; } .ui-color .input div[data-value="синий"] { background: darkblue; } .ui-color .input div[data-value="зеленый"] { background: green; } .ui-color .input div[data-value="оранжевый"] { background: orange; } .ui-color .input div[data-value="серый"] { background: gray; } .ui-color .input div.selected { border-color: #ffc127; } .ui-select .input { margin-right: 2rem; } .ui-select select { width: 100%; background-color: white; } .article-preview { display: flex; flex-flow: row nowrap; margin-bottom: 2rem; } .article-preview .image { margin-right: 2rem; flex-basis: 200px; height: 200px; min-width: 200px; } .article-preview .image img { max-width: 120px; max-height: 1200px; object-fit: cover; } .article-preview h3 { font-weight: normal; font-size: 1.9rem; margin-bottom: 1rem; } .article-preview .more-link { display: inline-block; padding: 5px 10px; color: white; padding-left: 3rem; margin-top: 1rem; } .article-preview .ui-button { margin-top: 1rem; } .v-comments .comment-form { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #ccc; } .comment-preview { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px dashed #e0e0e0; } .comment-preview .heading { margin-bottom: 1rem; } .comment-preview .heading > * { display: inline-block; margin-right: 1rem; } .comment-preview .heading .name { font-weight: bold; } .comment-preview .heading .time { opacity: 0.8; font-style: italic; } .product-cart { border: 1px solid #dfdfdf; border-bottom-width: 5px; text-align: left; font-size: 1.4rem; position: relative; top: 0; transition: 0.2s all; display: flex; min-height: 200px; } .product-cart .cover { width: 20%; min-width: 200px; position: relative; } .product-cart .cover img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; object-fit: contain; width: 100%; height: 100%; } .product-cart .cover a { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .product-cart .info { padding: 2rem; display: flex; flex-flow: column; justify-content: center; align-items: flex-start; padding-left: 4rem; } .product-cart .info .title { font-size: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: -1rem; margin-bottom: 1rem; margin-top: 0; } .product-cart .info .title > * { margin: 1rem; } .product-cart .info .title .price strong { font-weight: normal; } .product-cart .info .description { margin-bottom: 1rem; } .product-cart .cart-controls { flex-flow: row; } .product-cart .cover:after { display: inline-block; content: ''; position: absolute; top: 50%; right: -10px; margin-top: -10px; transition: 0.2s all; width: 0; height: 0; border-style: solid; border-width: 15px 10px 15px 0; border-color: transparent #ffffff transparent transparent; } .product-cart:hover .cover:after { right: 0px; } .product-cart:hover .add-button:before { background-color: #ffc127; background-image: url(../img/icon-plus-white.svg); } .product-cart .delete-button { border-radius: 99rem; background: #eee; padding: 0.5rem 1rem; position: absolute; right: 2rem; top: 2.5rem; cursor: pointer; transition: 0.2s all; } .product-cart .delete-button:hover { background-color: #202020; color: white; } .vcart { display: block; margin-bottom: 2rem; } .vcart .product-cart { width: 100%; margin-bottom: 1rem; } .vcart .products-container { display: block; } .vcart .total { margin-top: 2rem; font-size: 2.2rem; } @media screen and (max-width: 640px) { .products-container { display: flex; grid-gap: 2rem; flex-wrap: wrap; } } .product-preview { font-size: 1.4rem; position: relative; top: 0; transition: 0.2s all; overflow: hidden; margin-bottom: 4rem; transition: 0.5s border-color; display: flex; align-items: center; justify-content: space-between; } .product-preview.in-cart .add-button { display: none; } .product-preview .cover { width: 300px; min-width: 300px; position: relative; } .product-preview .cover img { width: 100%; height: auto; max-height: 120px; object-fit: contain; display: inline-block; margin-bottom: 0; } .product-preview .cover a { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .product-preview .info { padding: 1rem; align-items: center; justify-content: center; margin-bottom: 1rem; width: 100%; } .product-preview .cart { width: 125px; min-width: 125px; } .product-preview .title { margin-bottom: 0.5rem; } .product-preview .title a { color: #ffc127; font-size: 1.8rem; } .product-preview .price { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; } .product-preview .price strong { font-size: 1.9em; font-weight: bold; margin-right: 0.5rem; color: #ffc127; } .product-preview:hover .add-button:before { background-image: url(../img/icon-plus-white.svg); } .product-preview:hover .add-button { background-color: #202020; color: white; text-decoration: none; } @media screen and (max-width: 640px) { .product-preview { flex-wrap: wrap; justify-content: center; display: inline-block; width: 48%; min-width: 220px; text-align: center; position: relative; flex-grow: 1; border: 1px solid #eee; padding: 1rem; margin-bottom: 0; } .product-preview .cover { width: 100%; min-width: auto; padding-top: 35%; position: relative; } .product-preview .cover img { display: block; position: absolute; height: 100%; width: 100%; object-fit: contain; top: 50%; bottom: 0; left: 50%; right: 0; transform: translate(-50%, -50%); } .product-preview .cart { width: 100%; } .product-preview .info { width: auto; } .product-preview .add-button { max-width: 150px; } } .product .side .v-rating { border: none; justify-content: center; display: flex; } .cart-controls { display: flex; flex-wrap: nowrap; margin-bottom: 1rem; position: relative; } .cart-controls input[type="text"] { width: 100%; text-align: center !important; } .cart-controls .number-input { position: relative; width: 100%; } .cart-controls .plus, .cart-controls .minus { top: 0; position: absolute; width: 2rem; height: 100%; cursor: pointer; font-size: 2rem; color: #888; display: flex; align-content: center; align-items: center; text-align: center; justify-content: center; } .cart-controls .plus { right: 5px; } .cart-controls .minus { left: 5px; } .v-cart-controls > * { margin-bottom: 0.5rem; } .v-cart-controls .buy-with-click { width: 100%; } .v-cart-controls .buttons { display: flex; justify-content: center; align-items: center; } .v-cart-controls .buttons a { display: inline-block; margin: 1rem; } .order-form { max-width: 600px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); padding: 4rem; text-align: center; margin: 0 auto; margin-bottom: 2rem; } .order-form h2 { font-weight: normal; margin-bottom: 2rem; } #article { overflow: hidden; } article.product { position: relative; } article.product .overview { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; } article.product .overview .price { white-space: nowrap; display: flex; align-items: center; margin-bottom: 1rem; } article.product .overview .price strong { font-size: 2.8rem; font-weight: normal; margin-right: 0.5rem; } article.product .overview img { margin-bottom: 0; } article.product .overview .info { flex-grow: 1; flex-basis: 150px; } article.product .overview .side { flex-basis: 200px; flex-grow: 0; } article.product .overview .side .ya-share2 { margin-bottom: 1rem; } article.product .overview .side .buy-with-click { width: 100%; } article.product .overview .specs { margin-bottom: 1rem; flex-basis: 200px; flex-grow: 1; color: rgba(0, 0, 0, 0.5); } article.product .overview .specs h2 { font-size: 2rem; color: black; } article.product .overview .specs strong { font-weight: normal; color: rgba(0, 0, 0, 0.8); } article.product .popup-buttons { margin-top: 1rem; } article.product .popup-buttons button { background: white; border: 2px solid #ffc127; color: #202020; margin-bottom: 1rem; font-size: 1.2rem; text-align: center; display: block; width: 100%; } article.product .gallery { overflow: hidden; flex-basis: 300px; position: relative; } article.product .thumbnails { display: block; max-width: 100%; min-height: 150px; position: relative; } article.product .thumbnails .slick-track { height: 100%; padding: 0.5rem; } article.product .thumbnails .slick-slide { width: auto !important; display: block; float: left; } article.product .thumbnails .slick-dots { z-index: 100; } article.product .thumbnails .image { border: 3px solid white; margin: 0.5rem; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); height: 150px; } article.product .thumbnails img { height: 100%; width: auto; } article.product .thumbnails a { display: block; height: 100%; } article.product .description { border-bottom: 1px solid #ccc; padding-bottom: 3rem; margin-bottom: 3rem; } article.product .description h2 { margin-bottom: 1rem; } .contact-form { position: relative; } .contact-form h2 { display: flex; align-items: center; justify-content: flex-start; } #about { padding-left: 10rem; padding-right: 10rem; overflow: hidden; overflow: hidden; position: relative; background: url(../img/portfolio-bg.jpg) repeat center; text-align: right; } #about > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #about { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #about { padding-right: 2rem; padding-left: 2rem; } } #about > .container::before { display: inline-block; content: ''; display: block; position: absolute; right: 60%; left: -300px; background: url(../img/about-bg.jpg) no-repeat center right/100% auto; top: 0; bottom: 0; mask: linear-gradient(to right, white, white 90%, transparent); -webkit-mask: linear-gradient(to right, white, white 90%, transparent); } #about .content { display: inline-block; width: 60%; position: relative; z-index: 50; text-align: left; } @media screen and (max-width: 960px) { #about > .container::before { display: none; } #about .content { width: 100%; } } #article article { width: 100%; margin-bottom: 3rem; display: block; position: relative; } article a { color: #3f3f3f; text-decoration: underline; } article a:hover { color: black; text-decoration: none; } article section { margin-bottom: 4rem; } article > .container > .ya-share2 { float: right; position: relative; top: 2px; } article h1 { margin-bottom: 0.5em; clear: both; text-align: left; } article h2 { text-align: left; margin-top: 2rem; } article h3 { clear: both; } article > h2:first-child { margin-top: 0; } article h1 + img { margin-top: 0; } article h1 + h2 { margin-top: 0; } article p + img { margin-top: 0; } article img { margin-bottom: 2rem; } article img.fullwidth { width: 100%; height: auto; float: none; max-width: none; margin-left: 0; margin-right: 0; } article img.float-left { float: left; margin-right: 2rem; max-width: 300px; height: auto; position: relative; } article img.float-right { float: right; margin-left: 2rem; max-width: 300px; height: auto; position: relative; } @media screen and (max-width: 640px) { article > img, article > p > img { float: none; margin: 0; max-width: none; width: 100%; height: auto; position: static; } } article ul, article ol { margin: 0; margin-bottom: 2rem; margin-left: 2rem; } article ul > li { list-style-type: circle; } article ol > li { list-style-type: decimal; } article ul > li, article ol > li { margin-bottom: 0.5em; margin-left: 2rem; } article table { width: 100%; border: 2px solid #ccc; margin-bottom: 4rem; } article table caption { display: none; } article table td, article table th { border: 1px solid #d4d4d4; } article table th { background: #eee; text-align: left; padding: 1.5rem; } article table td { padding: 1.5rem; text-align: left; position:relative;} article table td strong { color: #202020; font-size: 110%; } @media screen and (max-width: 640px) { article table th { padding: 0.3rem; } article table td { padding: 1rem 0.3rem; font-size: 1.3rem; } } article p { margin-bottom: 1rem; } article .quote { display: inline-block; max-width: 500px; margin-top: 2rem; display: flex; justify-content: flex-end; border: 1px solid #202020; padding: 3rem; } #before-after { padding-left: 10rem; padding-right: 10rem; overflow: hidden; background: url(../img/before-after-bg.jpg) repeat center; } #before-after > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #before-after { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #before-after { padding-right: 2rem; padding-left: 2rem; } } #before-after h2 { display: block; margin-left: auto; margin-right: auto; font-size: 3.6rem; text-align: center; max-width: 700px; position: relative; padding-top: 3rem; } #before-after h2:before { display: inline-block; content: ''; width: 150px; height: 3rem; background: url(../img/heading-decor.svg) no-repeat center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #before-after .projects-container { width: 100%; } #before-after .slick-list { widht: 100%; } #before-after .project { position: relative; display: block; white-space: nowrap; font-size: 0; } #before-after .project .before { display: inline-block; width: 50%; position: relative; white-space: normal; font-size: 1.5rem; } #before-after .project .before:after { display: inline-block; content: ''; padding: 1rem; display: inline-block; position: absolute; text-transform: uppercase; bottom: 2rem; content: 'до'; background-color: #222; color: white; right: 0; } #before-after .project .after { display: inline-block; width: 50%; position: relative; white-space: normal; font-size: 1.5rem; } #before-after .project .after:after { display: inline-block; content: ''; padding: 1rem; display: inline-block; position: absolute; text-transform: uppercase; bottom: 2rem; content: 'после'; background-color: white; color: #202020; left: 0; } #bottom { padding-left: 10rem; padding-right: 10rem; overflow: hidden; background: #f6f6f6; border-top: 20px solid #ffc127; } #bottom > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #bottom { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #bottom { padding-right: 2rem; padding-left: 2rem; } } #bottom .services { display: inline-block; width: 25%; } #bottom .services h2 { font-size: 1.6rem; margin-bottom: 1.5rem; text-transform: uppercase; font-weight: bold; } #bottom .services ul { position: relative; display: flex; justify-content: space-between; display: grid; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } #bottom .services ul li { font-size: 1.5rem; margin-bottom: 0.5em; } #bottom .services ul li a { text-decoration: underline; } #bottom .services ul li a:hover { text-decoration: underline; } @media screen and (max-width: 1024px) { #bottom .services { width: 100% !important; } #bottom .services ul { display: block; width: 100%; margin-bottom: 4rem; } #bottom .services ul li { display: inline-block; width: 250px; } } @media screen and (max-width: 640px) { #bottom .services { text-align: center; } #bottom .services ul li { width: auto; padding: 0.3rem; } } #bottom .products { display: inline-block; width: 74%; } #bottom .products h2 { font-size: 1.6rem; margin-bottom: 1.5rem; text-transform: uppercase; font-weight: bold; } #bottom .products ul { position: relative; display: flex; justify-content: space-between; display: grid; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } #bottom .products ul li { font-size: 1.5rem; margin-bottom: 0.5em; } #bottom .products ul li a { text-decoration: underline; } #bottom .products ul li a:hover { text-decoration: underline; } @media screen and (max-width: 1024px) { #bottom .products { width: 100% !important; } #bottom .products ul { display: block; width: 100%; margin-bottom: 4rem; } #bottom .products ul li { display: inline-block; width: 250px; } } @media screen and (max-width: 640px) { #bottom .products { text-align: center; } #bottom .products ul li { width: auto; padding: 0.3rem; } } #catalog-index { padding-left: 10rem; padding-right: 10rem; overflow: hidden; background: url(../img/content-bg.jpg) repeat-x center top; } #catalog-index > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #catalog-index { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #catalog-index { padding-right: 2rem; padding-left: 2rem; } } #catalog-index h2 { display: block; margin-left: auto; margin-right: auto; font-size: 3.6rem; text-align: center; max-width: 700px; position: relative; padding-top: 3rem; } #catalog-index h2:before { display: inline-block; content: ''; width: 150px; height: 3rem; background: url(../img/heading-decor.svg) no-repeat center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .catalog-teasers .catalog-container { position: relative; display: flex; justify-content: space-between; display: grid; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: 2rem; max-width: 1100px; margin: 0 auto; } .catalog-teasers .catalog-container .item { display: inline-block; text-align: center; position: relative; margin-bottom: 2rem; } .catalog-teasers .catalog-container .item .image { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; position: relative; display: inline-block; opacity: 0.6; margin-bottom: 1rem; transition: .3s all; } .catalog-teasers .catalog-container .item .image img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .catalog-teasers .catalog-container .item .title { display: inline-block; height: 4rem; width: auto; padding: 1rem 2rem; display: inline-flex; align-items: center; transition: .3s all; line-height: 1em; } .catalog-teasers .catalog-container .item .title:before { display: inline-block; content: ''; width: 2rem; height: 2rem; background: url(../img/icon-decor.svg) no-repeat center/contain; margin-right: 0.5rem; filter: contrast(12%) sepia(100%) brightness(150%) saturate(272%) hue-rotate(8deg); } .catalog-teasers .catalog-container .item:hover .image { opacity: 1; } .catalog-teasers .catalog-container .item:hover .title { background: #ffc127; } .catalog-teasers .catalog-container .item:hover .title:before { filter: none; } .catalog-teasers .catalog-container .item a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } @media screen and (max-width: 1024px) { .catalog-teasers .catalog-container { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .catalog-teasers .catalog-container .item .image { width: 140px; height: 140px; } } .v-shop-filters { display: grid; grid-gap: 1rem; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); align-items: center; justify-content: stretch; padding: 1rem 0; border-bottom: 1px solid #e9e9e9; margin-bottom: 2rem; margin-top: -2rem; } .v-shop-filters > * { display: flex; align-items: center; } .v-shop-filters > * .title { margin-right: 1rem; } .v-shop-filters .sort { flex-grow: 1; grid-area: auto / span 2; } .v-shop-filters .sort select { width: 100%; max-width: 200px; } .v-shop-filters .count select { width: 100%; max-width: 100px; } .v-shop-filters .search { justify-content: flex-end; position: relative; } .v-shop-filters .search input[type="text"] { width: 100%; } .v-shop-filters .search input[type="submit"] { display: block; width: 3.5rem; height: 3.5rem; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); color: transparent; border-radius: 50%; padding: 0; margin: 0; background: url(../img/icon-zoom.svg) no-repeat center/auto 2rem, transparent; } .v-shop-filters .search input[type="submit"]:hover { opacity: 0.5; } @media screen and (max-width: 640px) { .v-shop-filters { display: flex; flex-flow: wrap; grid-gap: 1rem; justify-content: space-between; } .v-shop-filters > * { width: 49%; } .v-shop-filters > .search { width: 100%; } } .v-shop-mini-cart { display: flex; align-items: center; min-height: 4rem; justify-content: space-between; padding-left: 5rem; background: url(../img/icon-cart.svg) left center no-repeat; background-size: 4rem auto; } .v-shop-mini-cart a.open-cart { display: inline-block; display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; cursor: pointer; text-decoration: none; white-space: nowrap; font-size: 1.6rem; margin: 0; padding: 1.2rem 3rem; border-radius: 0; background: #ffc127; color: #202020; outline: none; border: 0; position: relative; transition: 0.3s all; padding: 1rem 2rem; margin-left: 1rem; font-size: 1.3rem; } .v-shop-mini-cart a.open-cart:hover { background: #202020; color: white; } .v-shop-mini-cart .total { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: 1fr; grid-column-gap: 0.5rem; grid-row-gap: 0.1rem; } .v-shop-mini-cart .total .title { grid-area: 1 / 1 / auto / span 2; } .v-shop-mini-cart .total .count { grid-area: 2 / 1; display: flex; align-items: center; padding-right: 1.5rem; border-right: 1px solid #ececec; margin-right: 1rem; } .v-shop-mini-cart .total .price { grid-area: 2 / 2; display: flex; align-items: center; } .v-shop-mini-cart .total strong { font-weight: normal; font-size: 1.8rem; margin-right: 0.2em; } @media screen and (max-width: 1280px) { #catalog-index .product-preview:nth-child(n+9) { display: none; } } @media screen and (max-width: 1060px) { #catalog-index .product-preview:nth-child(n+7) { display: none; } } @media screen and (max-width: 960px) { #catalog-index > .container { padding-top: 0; } #catalog-index .v-shop-catalog { margin-top: 0; } } #contacts { padding-left: 10rem; padding-right: 10rem; overflow: hidden; background: url(../img/portfolio-bg.jpg) center repeat; position: relative; text-align: right; } #contacts > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #contacts { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #contacts { padding-right: 2rem; padding-left: 2rem; } } #contacts:before { display: inline-block; content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 40%; background: url(../img/about-bg.jpg) no-repeat right center/100%; -webkit-mask: linear-gradient(to right, white 80%, transparent); mask: linear-gradient(to right, white 80%, transparent); } #contacts .contact-form { display: inline-block; max-width: 400px; text-align: center; } #contacts .contact-form h2 { text-align: center; font-size: 3.6rem; display: block; margin-bottom: 3rem; } #contacts .contact-form .subheading { font-size: 2rem; margin-bottom: 1em; } @media screen and (max-width: 1024px) { #contacts .contact-form { width: 60%; } #contacts:before { right: 50%; } } @media screen and (max-width: 960px) { #contacts { text-align: center; } #contacts:before { opacity: 0.3; right: 0; } #contacts .contact-form { width: auto; max-width: 600px; margin: 0 auto; } } #content { padding-left: 10rem; padding-right: 10rem; overflow: hidden; background: linear-gradient(#f5f5f5, transparent 300px); } #content > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #content { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #content { padding-right: 2rem; padding-left: 2rem; } } #content > .container { display: grid; grid-template-columns: minmax(340px, 30%) auto; grid-template-rows: auto; grid-column-gap: 4rem; } #side { grid-area: 1 / 1; } #article { grid-area: 1 / 2; } #article > .container > * { margin-bottom: 2rem; } @media screen and (max-width: 960px) { #content > .container { display: flex; flex-flow: column; } #side > .container { display: block !important; } #side .banner { display: none; } } #faq { padding-left: 10rem; padding-right: 10rem; overflow: hidden; } #faq > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #faq { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #faq { padding-right: 2rem; padding-left: 2rem; } } #faq h2 { display: block; margin-left: auto; margin-right: auto; font-size: 3.6rem; text-align: center; max-width: 700px; position: relative; padding-top: 3rem; } #faq h2:before { display: inline-block; content: ''; width: 150px; height: 3rem; background: url(../img/heading-decor.svg) no-repeat center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #faq .faq-container { font-size: 0; display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 2rem; grid-row-gap: 4rem; white-space: nowrap; } #faq .faq-container .faq-preview { display: inline-block; width: 48%; font-size: 1.5rem; white-space: normal; } #faq .faq-container .faq-preview img { display: inline-block; width: 170px; height: 170px; border-radius: 50%; float: left; margin-right: 2rem; transition: .3s all; border: 5px solid transparent; } #faq .faq-container .faq-preview h3 { font-style: 1.8rem; font-weight: bold; margin-bottom: 1rem; } #faq .faq-container .faq-preview .read-more { font-size: 1.3rem; display: inline-flex; align-items: center; justify-content: flex-start; } #faq .faq-container .faq-preview .read-more:hover { text-decoration: underline; } #faq .faq-container .faq-preview .read-more:before { display: inline-block; content: ''; display: inline-block; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; background: url(../img/icon-arrow-more.svg) no-repeat center left/1.5rem auto; filter: contrast(12%) sepia(100%) brightness(150%) saturate(272%) hue-rotate(8deg); } #faq .faq-container .faq-preview .content { overflow: hidden; } #faq .faq-container .faq-preview:hover img { border-color: #ffc127; } @media screen and (max-width: 1024px) { #faq .faq-container .faq-preview { width: 100%; } } @media screen and (max-width: 500px) { #faq .faq-container .faq-preview img { display: none; } } .faq-list-item { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px dashed #c6c6c6; } .faq-list-item h2 { font-size: 2.2rem; font-weight: normal; } #features { padding-left: 10rem; padding-right: 10rem; overflow: hidden; } #features > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #features { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #features { padding-right: 2rem; padding-left: 2rem; } } #features h2 { display: block; margin-left: auto; margin-right: auto; font-size: 3.6rem; text-align: center; max-width: 700px; position: relative; padding-top: 3rem; } #features h2:before { display: inline-block; content: ''; width: 150px; height: 3rem; background: url(../img/heading-decor.svg) no-repeat center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #features .features-list { display: grid; grid-template-columns: 30% 40% 30%; grid-template-rows: repeat(4, auto); } #features .features-list:before { display: inline-block; content: ''; width: 100%; top: -2rem; bottom: -2rem; grid-column: 2; grid-row: 1 / span 3; background: url(../img/features-bg-window.png) no-repeat center/contain; } #features .feature { display: inline-block; font-size: 1.6rem; height: 11rem; position: relative; display: inline-flex; flex-flow: column; align-items: flex-start; justify-content: center; padding-left: 12rem; padding-bottom: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #e0e0e0; } #features .feature:before { display: inline-block; content: ''; width: 9rem; height: 9rem; border-radius: 50%; border: 4px solid #ffc127; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: no-repeat center / auto 60%; } #features .feature .heading { font-weight: bold; } #features .feature:nth-child(1) { grid-row: 1; grid-column: 1; } #features .feature:nth-child(1):before { background-image: url(../img/icon-features-1.svg); } #features .feature:nth-child(2) { grid-row: 2; grid-column: 1; } #features .feature:nth-child(2):before { background-image: url(../img/icon-features-2.svg); } #features .feature:nth-child(3) { grid-row: 3; grid-column: 1; } #features .feature:nth-child(3):before { background-image: url(../img/icon-features-3.svg); } #features .feature:nth-child(4) { grid-row: 1; grid-column: 3; } #features .feature:nth-child(4):before { background-image: url(../img/icon-features-4.svg); } #features .feature:nth-child(5) { grid-row: 2; grid-column: 3; } #features .feature:nth-child(5):before { background-image: url(../img/icon-features-5.svg); } #features .feature:nth-child(6) { grid-row: 3; grid-column: 3; } #features .feature:nth-child(6):before { background-image: url(../img/icon-features-6.svg); } @media screen and (max-width: 960px) { #features .feature { height: 9rem; padding-left: 9rem; font-size: 1.4rem; } #features .feature:before { width: 7rem; height: 7rem; } } @media screen and (max-width: 768px) { #features .features-list { display: block; } #features .feature { width: 49%; border: none; } #features .features-list:before { display: block; position: static; top: auto; bottom: auto; padding-top: 40%; max-width: 300px; margin: 0 auto; margin-bottom: 2rem; } } @media screen and (max-width: 600px) { #features .feature { width: 100%; display: block; max-width: 400px; margin-left: auto; margin-right: auto; } } #footer { padding-left: 10rem; padding-right: 10rem; overflow: hidden; } #footer > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #footer { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #footer { padding-right: 2rem; padding-left: 2rem; } } #footer > .container { display: grid; display: grid; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; padding-bottom: 3rem; } #footer .heading { color: #ffc127; font-weight: bold; font-size: 1.6rem; padding: 0; margin-bottom: 0.5rem; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; } #footer .social-icons { grid-row: 2; grid-column: 1; } #footer .heading:before { display: inline-block; content: ''; width: 2.5rem; height: 2.5rem; display: inline-block; margin-right: 1rem; background: no-repeat center / contain; } #footer .email .heading:before { background-image: url(../img/icon-contacts-email.svg); } #footer .whats-app .heading:before { background-image: url(../img/icon-contacts-email.svg); } #footer .phones .heading:before { background-image: url(../img/icon-contacts-phone.svg); } #footer .worktime .heading:before { background-image: url(../img/icon-contacts-time.svg); } #footer .skype .heading:before { background-image: url(../img/icon-contacts-skype.svg); } #footer .developer { background: url(../img/vebas-logo.png) center right no-repeat; padding-right: 145px; min-height: 38px; min-width: 300px; text-align: right; display: flex; align-items: center; max-width: 300px; } @media screen and (max-width: 640px) { #footer > .container { display: flex; justify-content: center; flex-wrap: wrap; } #footer > .container > * { width: 80%; max-width: 250px; margin-bottom: 3rem; } } #header { padding-left: 10rem; padding-right: 10rem; overflow: hidden; } #header > .container { max-width: 1200px; margin: 0 auto; padding: 2rem 0; } @media screen and (max-width: 960px) { #header { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #header { padding-right: 2rem; padding-left: 2rem; } } #header > .container { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(3, auto-fit); justify-content: space-between; align-items: center; align-items: center; grid-gap: 2rem; padding-top: 3rem; } #header .site-logo { position: relative; grid-row: 1 / span 2; grid-column: 2; display: inline-block; width: 366px; height: 116px; background: url(../img/site-logo.png) center no-repeat; } #header .site-logo a { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #header .address { grid-row: 1; grid-column: 1; max-width: 300px; } #header .social-icons { grid-row: 2; grid-column: 1; } #header .phones { grid-row: 1; grid-column: 3; justify-content: flex-end; font-size: 2.4rem; color: #ffc127; font-weight: normal; } #header .phones strong { font-weight: normal; color: #202020; } #header .order-callback { padding: 1rem; font-size: 1.2rem; margin-top: 0.5rem; min-width: 205px; } #header .worktime { grid-row: 2; grid-column: 3; max-width: 300px; justify-self: flex-start; font-size: 1.4rem; color: #222; } #header .worktime strong { font-weight: normal; color: black; } #header .experience { grid-row: 3; grid-column: 2; justify-self: center; position: relative; display: inline-block; justify-self: center; padding: 0.5rem 0; font-size: 1.3rem; font-style: italic; } #header .phones { padding-left: 4rem; position: relative; } #header .phones:before { display: inline-block; content: ''; width: 3rem; height: 2.5rem; display: inline-block; margin-right: 1rem; background: no-repeat center / contain; background-image: url("../img/icon-contacts-phone.svg"); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } #header .worktime { padding-left: 4rem; position: relative; } #header .worktime:before { display: inline-block; content: ''; width: 3rem; height: 2.5rem; display: inline-block; margin-right: 1rem; background: no-repeat center / contain; background-image: url("../img/icon-contacts-time.svg"); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } #header .address { padding-left: 4rem; position: relative; } #header .address:before { display: inline-block; content: ''; width: 3rem; height: 2.5rem; display: inline-block; margin-right: 1rem; background: no-repeat center / contain; background-image: url("../img/icon-contacts-location.svg"); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } #header .social-icons a { background-color: #eeeeee; } #header .social-icons a:hover { background-color: #202020; } #header .experience:before { content: ''; display: block; position: absolute; left: 0; right: 0; height: 1px; top: 0; background: linear-gradient(transparent, #dddcdc, transparent); } #header .experience:after { content: ''; display: block; position: absolute; left: 0; right: 0; height: 1px; bottom: 0; background: linear-gradient(transparent, #dddcdc, transparent); } @media screen and (max-width: 1024px) and (min-width: 640px) { #header > .container { grid-template-columns: repeat(2, auto); } #header .site-logo { grid-row: 1; grid-column: 1 / span 2; justify-self: center; } #header .address { grid-row: 2; grid-column: 1; justify-self: flex-end; padding-right: 4rem; padding-left: 0; text-align: right; } #header .address:before { right: 0; position: absolute; top: 50%; left: auto; margin-right: 0; } #header .social-icons { grid-row: 3; grid-column: 1; justify-self: flex-end; } #header .phones { grid-row: 2; grid-column: 2; justify-self: flex-start; } #header .worktime { grid-row: 3; grid-column: 2; justify-self: flex-start; } #header .experience { display: none; } } @media screen and (max-width: 640px) { #header > .container { display: flex; flex-flow: column; align-items: center; justify-content: center; } #header > .container > * { text-align: left; } } #how-we-work { padding-left: 10rem; padding-right: 10rem; overflow: hidden; } #how-we-work > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #how-we-work { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #how-we-work { padding-right: 2rem; padding-left: 2rem; } } #how-we-work h2 { display: block; margin-left: auto; margin-right: auto; font-size: 3.6rem; text-align: center; max-width: 700px; position: relative; padding-top: 3rem; } #how-we-work h2:before { display: inline-block; content: ''; width: 150px; height: 3rem; background: url(../img/heading-decor.svg) no-repeat center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #how-we-work .items-container { display: flex; flex-wrap: wrap; margin-left: -2rem; margin-right: -2rem; font-size: 0; counter-reset: items; white-space: nowrap; justify-content: flex-start; justify-self: center; margin-bottom: -4rem; display: grid; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); padding-left: 4rem; padding-right: 4rem; background: url(../img/dash-line.png) no-repeat left 80px/100% 230px; } #how-we-work .items-container .item { white-space: normal; display: inline-block; display: inline-flex; flex-flow: column; min-height: 100px; min-width: 350px; align-items: flex-start; padding: 2rem; padding-left: 155px; position: relative; justify-content: center; margin-bottom: 8rem; font-size: 1.5rem; counter-increment: items; padding-right: 4rem; } #how-we-work .items-container .item h3 { margin-bottom: 0.5rem; color: #ffc127; } #how-we-work .items-container .item:before { display: inline-block; content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-block; width: 145px; min-width: 145px; height: 145px; background: url(../img/how-we-work-1.svg) no-repeat center/100% auto; content: counter(items); font-size: 3rem; display: flex; align-items: center; justify-content: center; color: #ffc127; font-size: 5rem; font-weight: normal; } #how-we-work .items-container .item:nth-child(2):before { background-image: url(../img/how-we-work-2.svg); } #how-we-work .items-container .item:nth-child(3):before { background-image: url(../img/how-we-work-3.svg); } #how-we-work .items-container .item:nth-child(4):before { background-image: url(../img/how-we-work-4.svg); } #how-we-work .items-container .item:nth-child(5):before { background-image: url(../img/how-we-work-5.svg); } #how-we-work .items-container .item:not(:last-child)::after { display: inline-block; content: ''; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; display: block; background: url(../img/icon-arrow-next.svg) no-repeat center/auto 1.5rem; filter: contrast(12%) sepia(100%) brightness(150%) saturate(272%) hue-rotate(8deg); } @media screen and (max-width: 1280px) { #how-we-work .items-container { background: url(../img/dash-line.png) no-repeat left 80px/100% 230px, url(../img/dash-line.png) no-repeat left 300px/100% 230px; } } @media screen and (max-width: 960px) { #how-we-work .items-container { background: none; } #how-we-work .items-container .item { padding-left: 120px; margin-bottom: 2rem; min-width: auto; } #how-we-work .items-container .item:before { width: 100px; height: 100px; min-width: 100px; } #how-we-work .items-container .item::after { display: none !important; } } #install { padding-left: 10rem; padding-right: 10rem; overflow: hidden; overflow: hidden; position: relative; background: url(../img/portfolio-bg.jpg) repeat center; text-align: left; padding-top: 6rem; padding-bottom: 6rem; } #install > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #install { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #install { padding-right: 2rem; padding-left: 2rem; } } #install::before { display: inline-block; content: ''; background: linear-gradient(white, transparent); position: absolute; top: 0; height: 100px; left: 0; right: 0; } #install .content { display: inline-block; position: relative; z-index: 50; text-align: left; } #install .image { display: inline-block; width: 35rem; height: 35rem; border-radius: 50%; overflow: hidden; position: relative; min-width: 35rem; } #install .image img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; object-fit: cover; height: 100%; } #install > .container { display: flex; flex-wrap: nowrap; grid-gap: 4rem; justify-content: space-between; align-items: center; } @media screen and (max-width: 960px) { #install .image { display: none; } #install .content { width: 100%; } } #navigation { padding-left: 10rem; padding-right: 10rem; overflow: hidden; position: relative; z-index: 50; overflow: visible; } #navigation > .container { max-width: 1200px; margin: 0 auto; padding: 2rem 0; } @media screen and (max-width: 960px) { #navigation { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #navigation { padding-right: 2rem; padding-left: 2rem; } } #navigation > .container { display: flex; align-items: center; justify-content: center; padding-top: 0; } #navigation .main-menu { font-size: 0; text-align: center; } #navigation .main-menu li { display: inline-block; position: relative; font-size: 1.6rem; font-weight: bold; text-transform: uppercase; } #navigation .main-menu > li ul { display: none; position: absolute; top: 95%; left: 0; background: white; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3); border-bottom: 4px solid #ffc127; z-index: 1000; text-align: left; } #navigation .main-menu > li ul li { font-size: 1.3rem; padding: 0.5rem; white-space: nowrap; border-bottom: 1px solid #ececec; display: block; transition: .3s all; } #navigation .main-menu > li:hover ul { display: block; } #navigation .main-menu > li ul li a { padding: 0.5rem 1rem; color: #202020; transition: .3s all; } #navigation .main-menu > li ul li:hover a { padding: 0.5rem 1rem; color: #202020; color: #202020; } #navigation .main-menu > li ul li:hover { background: #ffc127; color: white; } #navigation .main-menu li:hover > a { color: #ffc127; } #navigation .main-menu li.active > a { color: #ffc127; } #navigation .main-menu li a { padding: 1.5rem 2rem; display: block; transition: .3s all; } #navigation .main-menu > li:not(:last-child):before { display: inline-block; content: ''; position: absolute; height: 4px; width: 4px; top: 50%; right: 0; transform: translateY(-50%); background-color: #ffc127; } @media screen and (max-width: 960px) { #navigation .main-menu > li:hover ul { display: none !important; } } #partners { padding-left: 10rem; padding-right: 10rem; overflow: hidden; } #partners > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #partners { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #partners { padding-right: 2rem; padding-left: 2rem; } } #partners .partner { margin: 2rem 4rem; } #portfolio { padding-left: 10rem; padding-right: 10rem; overflow: hidden; background: url(../img/portfolio-bg.jpg) repeat center; } #portfolio > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #portfolio { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #portfolio { padding-right: 2rem; padding-left: 2rem; } } #portfolio h2 { display: block; margin-left: auto; margin-right: auto; font-size: 3.6rem; text-align: center; max-width: 700px; } .portfolio-container .project-preview { margin: 1rem; } .portfolio-container .project-preview { text-align: center; position: relative; margin: 1rem; } .portfolio-container .project-preview img { display: block; width: 100%; } .portfolio-container .project-preview .title { height: 6rem; padding: 1rem; border-bottom: 1px solid #a1a1a1; font-size: 1.8rem; font-weight: normal; display: flex; align-items: center; justify-content: center; position: relative; } .portfolio-container .project-preview .title:before { display: inline-block; content: ''; width: 3rem; height: 2rem; display: inline-block; margin-right: 1rem; background: url(../img/icon-image.svg) no-repeat center/contain; filter: contrast(12%) sepia(100%) brightness(150%) saturate(272%) hue-rotate(8deg); } .portfolio-container .project-preview a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } portfolio-container .project-preview:hover .title { border-bottom: 4px solid #ffc127; } #side > .container { display: block; } #side > .container > * { margin-bottom: 2rem; } #side .banner { border-right: 1px solid #c0c0c0; } #side .banner img { width: 100%; height: auto; } #side .menu { border-right: 1px solid #c0c0c0; background: #f5f5f5; } #side .menu h2 { font-size: 2.6rem; font-family: "Noto Sans", "Roboto", "Verdana", "Arial Narrow", sans-serif; font-weight: 200; background: url(../img/icon-catalog.png) 1rem center no-repeat, #ffffff; color: #202020; padding: 2rem; margin-bottom: 0; border-bottom: 2px solid #ffc127; padding-left: 4rem; } #side .menu > ul { margin: 2rem 0; } #side .menu ul { padding: 2rem; display: block; padding-left: 4rem; font-weight: normal; } #side .menu ul li { display: block; padding: 0; padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; } #side .menu ul li:before { display: inline-block; content: ''; width: 5px; height: 5px; background: #bcbcbc; position: absolute; top: 0.7em; left: 0; transform: translateY(-50%); } #side .menu ul li ul { padding:0; padding-left: 0.5rem;} #side .menu ul li a { display: block; color: #202020; text-decoration: none; } #side .menu ul li.active > a { font-weight: bold; } #side .menu ul li.active:before { background: #ffc127; } #side .menu ul li a:hover { text-decoration: none; color: #ffc127; } @media screen and (max-width: 960px) { #side .menu { text-align: center; } #side .menu h2 { font-size: 2rem; } #side .menu > ul { margin: 1rem 0; } #side .menu ul { padding: 1rem; } #side .menu ul li { display: inline-block; padding: 1rem 0.5rem; font-size: 1.4rem; margin-bottom: 0; padding-left: 1rem; margin-right: 1rem; } } @media screen and (max-width: 960px) { #side .services-menu { display: none; } } .ui-menu { text-transform: uppercase; } .ui-menu li { font-size: 1.5rem; } .ui-menu li:not(:last-child) { border-bottom: 1px solid #e0e0e0; } .ui-menu li > a { padding: 0.2rem; padding-left: 1rem; text-decoration: none; } .ui-menu li.active { background: #ffc127; color: white; } .ui-menu li.active > a { color: white; } .ui-menu li.active > ul { display: block; } .services-menu { } .info-menu { text-transform: uppercase; } #technology { padding-left: 10rem; padding-right: 10rem; overflow: hidden; overflow: hidden; position: relative; background: url(../img/portfolio-bg.jpg) repeat center; text-align: left; } #technology > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #technology { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #technology { padding-right: 2rem; padding-left: 2rem; } } #technology .content { display: inline-block; width: 60%; position: relative; z-index: 50; text-align: left; } #technology > .container::before { display: inline-block; content: ''; display: block; position: absolute; left: 60%; right: -300px; background: url(../img/technology-bg.jpg) no-repeat center left/100% auto; top: 0; bottom: 0; mask: linear-gradient(to left, white, white 90%, transparent); -webkit-mask: linear-gradient(to left, white, white 90%, transparent); } @media screen and (max-width: 960px) { #technology > .container::before { display: none; } #technology .content { width: 100%; } } #windows-variants { padding-left: 10rem; padding-right: 10rem; overflow: hidden; background: url(../img/windows-variants-bg.jpg) repeat center; position: relative; } #windows-variants > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } @media screen and (max-width: 960px) { #windows-variants { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #windows-variants { padding-right: 2rem; padding-left: 2rem; } } #windows-variants > .container { padding-bottom: 1rem; } #windows-variants h2 { display: block; margin-left: auto; margin-right: auto; font-size: 3.6rem; text-align: center; max-width: 700px; position: relative; padding-top: 3rem; } #windows-variants h2:before { display: inline-block; content: ''; width: 150px; height: 3rem; background: url(../img/heading-decor.svg) no-repeat center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #windows-variants:before { display: inline-block; content: ''; background: linear-gradient(white, transparent); position: absolute; bottom: 0; height: 100px; left: 0; right: 0; } .variants-container { margin-right: -1rem; margin-left: -1rem; padding-bottom: 1rem; } .variants-container .slick-dots { bottom: -2rem; } .window-variant, .variants-container .variant { position: relative; text-align: center; margin: 1rem; } .window-variant img, .variants-container .variant img { display: inline-block !important; margin-bottom: 4rem; filter: drop-shadow(1px 1px 20px white); } .window-variant .info, .variants-container .variant .info { position: absolute; padding: 2rem; background: white; top: 50%; left: 0; min-width: 350px; text-align: left; transform: translateY(-50%); opacity: 0; box-shadow: 3px 3px 5px 0 #0002; z-index: 100; pointer-events: none; } .window-variant .info .heading, .variants-container .variant .info .heading { display: flex; flex-flow: row; justify-content: space-between; align-items: center; font-size: 1.8rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; grid-gap: 2rem; } .window-variant .info .option, .variants-container .variant .info .option { display: flex; flex-flow: row; justify-content: space-between; align-items: center; } .window-variant > .heading, .variants-container .variant > .heading { display: inline-block; border: 2px solid #8b8b8b; padding: 2rem 2rem; display: inline-flex; flex-flow: row; justify-content: space-between; align-items: center; font-size: 1.6rem; grid-gap: 1rem; } .window-variant > .heading h3, .variants-container .variant > .heading h3 { margin-bottom: 0; font-family: "Noto Sans", "Roboto", "Verdana", "Arial Narrow", sans-serif; font-weight: 200; font-size: inherit; } .window-variant > .heading .price strong, .variants-container .variant > .heading .price strong { color: #ffc127; font-weight: bold; } .window-variant:hover .info, .variants-container .variant:hover .info { opacity: 1; } .window-variant:hover > .heading, .variants-container .variant:hover > .heading { border-color: #ffc127; background: white; } .variant-info { padding: 2rem; background: white; min-width: 350px; text-align: left; box-shadow: 3px 3px 5px 0 #0002; z-index: 100; } .variant-info a.link { position: absolute; display: inline-block; display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; cursor: pointer; text-decoration: none; white-space: nowrap; font-size: 1.6rem; margin: 0; padding: 1.2rem 3rem; border-radius: 0; background: #ffc127; color: #202020; outline: none; border: 0; position: relative; transition: 0.3s all; padding: 1rem; font-size: 1.3rem; top: 0; right: 0; cursor: pointer; } .variant-info a.link:hover { background: #202020; color: white; } .variant-info a.link:hover { background: #202020; color: white; } .variant-info .heading { display: flex; flex-flow: row; justify-content: space-between; align-items: center; font-size: 1.8rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; grid-gap: 2rem; } .variant-info .option { display: flex; flex-flow: row; justify-content: space-between; align-items: center; } /* price form */ .price-form-modal { width: 100%; height: 100%; position: fixed; left: 0; z-index: 1000; display:none; background-color: rgba(0, 0, 0, 0.8); top: 0; } .price-form-modal .modal-form__layout { height: 100%; width: 100%; position: relative; z-index: 2; } .price-form-modal .modal-form__block { background-color: #fff; text-align: center; padding: 20px; position: relative; } .price-form-modal .modal-form__block .modal-form__block-row { width: 100%; margin: 20px 0; } .price-form-modal .modal-form__block .modal-form__block-row.inputs { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; } .price-form-modal .modal-form__block .modal-form__block-row.inputs input { width: 32%; padding: 10px; } .price-form-modal .modal-form__block .modal-form__block-row input { width: 100%; padding: 10px; } .price-form-modal .modal-form__block .modal-form__block-row textarea { width: 100%; padding: 10px; } .price-form-modal .modal-form__block .modal-form__block-row .title { font-size: 1.875em; color: #036c69; text-transform: uppercase; } .price-form-modal .modal-form__block .modal-form__block-row .subtitle { font-size: 1.4em; display: block; color: #036c69; } .price-form-modal .modal-form__block .modal-form__block-row .subtitle span { text-transform: uppercase; display: block; } .price-form-modal .modal-form__block .modal-form__block-row .note { font-size: 0.7em; color: #000; font-weight: bold; } .price-form-modal .modal-form__block .modal-form__block-row button { padding: 10px 25px; background-color: #036c69; color: #fff; text-transform: uppercase; margin: 0 auto; border: none; border-radius: 5px; } a.modal-close { font-weight: bold; position: absolute; right: 5%; } .modal-form-main { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /*end price form */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(246,200,17,1); } 100% { box-shadow: 0 0 0 20px rgba(246,200,17,0); } } @keyframes showTick { 0% { opacity: 0; transform: scale(2); } 100% { opacity: 1; transform: scale(1); } } .orange-selected, .orange-selected:hover { background: #f6c811; color: #000; } .orange-selected .download-file::before { filter:none;} input.chooseProd { position: absolute; opacity: 0; z-index: 1; width: 35px; height: 35px; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; } .checkProd { width: 30px; height: 30px; background: white; border: 1px solid black; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 3px 0 rgba(0,0,0,.5); } .checkOrder { animation: pulse 2s infinite; position: fixed; bottom: 5%; right: 5%; width: 55px; height: 55px; justify-content: center; border-radius: 100%; padding: 0; } .checkOrder svg { outline: none; fill: #187dbd; display: flex; margin: 0 auto; } input:checked.chooseProd + .checkProd:after { content: ""; animation: showTick .2s ease; background: url(../img/tick-orange.png) no-repeat; width: 25px; height: 25px; position: absolute; top: 2px; left: 2px; background-size: 50%; background-size: contain; } /*# sourceMappingURL=maps/style.css.map */ .ui-slider { position: relative; } .ui-slider.-mini .slick-list { position: relative; margin-bottom: 0; } .ui-slider.-mini.slick-initialized .slick-list { margin-left: 4rem; margin-right: 4rem; -mask: linear-gradient(to right, white 95%, transparent); -webkit-mask: linear-gradient(to right, white 95%, transparent); } .ui-slider.-mini.slick-slider .slick-arrow::after { width: 1.5rem; height: 1.5rem; background-size: contain; } .ui-slider.-mini { margin: 0; position: relative; } .ui-slider.-mini > button { width: 2.5rem; height: 2.5rem; background: #ffc127; } .ui-slider.-mini > button::after { background: black; } .ui-slider.-mini > button:hover { background: black; } .ui-slider.-mini > button:hover::after { background: white; } .ui-slider.-mini .slick-slide { margin: 0.5rem;} .ui-slider.-mini > button.slick-prev { left:0; } .ui-slider.-mini > button.slick-next { right:0; }.lozhement-slider .slick-track img { margin-bottom: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; max-height: 400px } .lozhement-slider .slick-prev { left: 0; } .lozhement-slider .slick-next { right: 0; } .lozhement-slider .slick-list { width: 90%; margin: 0 auto; } .tac {text-align: center;} .phones .phone { position: relative; } .whatsapp-phone { width: 25px; height: 25px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; } .whatsapp-phone path:first-child { fill: #4CAF50; } .whatsapp-phone path:last-child { fill: #FAFAFA; } .whatsapp-phone:hover path:first-child { fill: #3d8b40; } .page-id-599 .slick-list { width: 90%; } .page-id-599 .gallery { display: flex; justify-content: center; } .page-id-599 .slick-slider .slick-arrow:hover::after { background: #ffc127; } .page-id-599 .slick-slider .slick-next::after { right: 0; left: -110%; } .page-id-599 .slick-slider .slick-next:hover::after { left: -100%; } .page-id-599 .slick-slider .slick-prev::after { left: 210%; } .page-id-599 .slick-slider .slick-prev:hover::after { left: 200%; } /* Side menu */ #side .menu ul li { margin-bottom: 1rem} @media screen and (max-width: 640px) { #header .experience { display: none; } #header .worktime { display: none; } #header .phones { margin-left: -4rem; } #header .site-logo { background-size: contain; height: 70px; } #header .site-logo::after { bottom: -20px !important; } #header .address { padding-top: 2rem; } #navigation .main-menu li a { padding: 0.5rem 1rem; } #side .menu ul li { padding: 0.5rem; margin-bottom: 0.5rem; font-size: 1.3rem; } #side .menu ul li::before { display: none; } } @media screen and (max-width: 480px) { .tags-container { display: none !important; } .breadcrumbs { margin-bottom: 1rem !important; } } #header .site-logo { background-position: center top;} #header .site-logo:after { content: 'фасадный декор зданий'; display: block; position: absolute; bottom:-3px; left:0; right:0; text-align: center; font-size: 1.6rem;} .breadcrumbs li.B_lastCrumb { display: none; } #about a.read-more {padding-left: 2rem; background: url(../img/icon-arrow-right.svg) no-repeat left center / 1.5rem auto; display: block; } h2 { line-height: 1.1em; } #features h2+p { margin-bottom: 4rem !important; max-width: 600px; text-align: center; margin:0 auto; } #features .description { font-size: 90%; } #before-after { max-height: 600px; } #catalog-index h1 { text-align: center; position: relative; margin-top: 4rem;} #catalog-index h1::before { display: inline-block; content: ''; width: 150px; height: 3rem; background: url(../img/heading-decor.svg) no-repeat center/contain; position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); } /* Variants */ /* ------------------------------------ */ .window-variant:hover .info, .variants-container .variant:hover .info { display: none; opacity: 0; } #windows-variants { padding-left: 10rem; padding-right: 10rem; overflow: hidden; background: url(../img/windows-variants-bg.jpg) repeat center; position: relative; } #windows-variants > .container { max-width: 1200px; margin: 0 auto; padding: 4rem 0; } #windows-variants > .container { padding-bottom: 1rem; } #windows-variants h2 { display: block; margin-left: auto; margin-right: auto; font-size: 3.6rem; text-align: center; max-width: 700px; position: relative; padding-top: 3rem; } #windows-variants h2:before { display: inline-block; content: ''; width: 150px; height: 3rem; background: url(../img/heading-decor.svg) no-repeat center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #windows-variants .variants-container { margin-right: -1rem; margin-left: -1rem; } #windows-variants:before { display: inline-block; content: ''; background: linear-gradient(white, transparent); position: absolute; bottom: 0; height: 100px; left: 0; right: 0; } @media screen and (max-width: 960px) { #windows-variants { padding-right: 4rem; padding-left: 4rem; } } @media screen and (max-width: 768px) { #windows-variants { padding-right: 2rem; padding-left: 2rem; } } .variants-container .window-variant > .heading, .variants-container .variant > .heading { grid-gap: 0; } .window-variant > .heading h3, .variant > .heading h3 { margin-right: 1rem; } #windows-variants h2 a { border-bottom: 1px dashed black; } .pagination-custm { grid-column: 1/4; } .page-id-597 .variants-container, .page-id-598 .variants-container{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .page-id-597 .variants-container, .page-id-597 .variants-container .variant img { min-height: 250px; } .variants-container .door-variant img { min-height: 77%; } .variant-active { background: #da9b00; } article .variants-container { margin-bottom: 2rem; } .variants-container { display: flex; } .window-variant:last-child .info { left: auto; } .window-variant .option > * { white-space: nowrap; } .window-variant .info, .variants-container .variant .info { pointer-events: all; } .window-variant .heading > a { display: inline-block; background: #ffc127; padding: 0.5rem; font-size: 1.3rem; } .window-variant .heading > a:hover { display: inline-block; background: black; color: white; padding: 0.5rem; font-size: 1.3rem; } .window-variant .option .price { width: 50px; text-align: right; min-width: 50px;} .window-variant .option .id { width: 100%; text-align: right; padding-right: 1rem; } @media screen and (min-width: 1160px) and (max-width: 1220px) { .page-id-597 .variants-container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media screen and (min-width: 1020px) and (max-width: 1161px) { .page-id-597 .variants-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .page-id-597 .variants-container img { min-height: 220px; object-fit: cover; } .page-id-597 .window-variant > .heading { padding: 2rem .5rem; } } @media screen and (min-width: 960px) and (max-width: 1020px) { .page-id-597 .variants-container img { min-height: 270px; } } @media screen and (min-width: 590px) and (max-width: 700px) { .page-id-597 .variants-container { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } } .variants-container.fireplaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } @media screen and (max-width: 960px) { .variants-container .door-variant img { min-height: 75%; } } @media screen and (max-width: 640px) { .window-variant > .heading, .variants-container .variant > .heading { padding: 2rem 1.5rem; } } .botton-style { text-align: center; margin: 20px; } .botton-style a { display: inline-block; padding: 1.2rem 4.3rem; background: #ffc127; font-size: 1.3rem; text-decoration: none; } /* Zoom */ .zoom-image { display: inline-block; height: 300px; box-shadow: 0 0 5px 0 #0004; margin-right: 1rem; margin-left: 0.2rem; margin-bottom: 1rem; max-width: 300px;} .zoom-image img { display: block; width: auto; height: 100%; } /* Price slider */ .price-slider-container .slides{position:relative;margin:10px 0 0 0; width: 100%; padding-top: 68%; } .price-slider-container .slides div{ position:absolute; top:0;left:0;width:100%; bottom: 0; } .price-slider-container .slides div.house-1{background:url('/images/house-1.png') no-repeat 0 0 / 100% auto; } .price-slider-container .slides div.house-2{background:url('/images/house-2.png') no-repeat 0 0 / 100% auto; } .price-slider-container .slides div.house-3{background:url('/images/house-3.png') no-repeat 0 0 / 100% auto; } .price-slider-container .slides div.house-4{background:url('/images/house-4.png') no-repeat 0 0 / 100% auto; } .price-slider-container .slides div.house-5{background:url('/images/house-5.png') no-repeat 0 0 / 100% auto; } .price-slider-container #slide_wrap{position:relative;padding:20px 0px;width:100%;height:90px;//margin:0 auto;background:url("/images/bar-line.png") 0 20px repeat-x;background-size:100% 17px; padding-top:10px;} .price-slider-container .bar-line-scale{ position:absolute;left:20px; right: 540px; top:37px;background:url("/images/bar-line-scale.png") top center repeat-x;background-size:100% auto; width:97%;height:33px;z-index:50;} .price-slider-container .price-number{ position:absolute;left:0px;top:15px;width:30px;height:15px;cursor:pointer;z-index:150;} .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ display: block; top:-35px; width:34px; height:44px; background:url("/images/knob.png") 0 0 no-repeat;background-size:34px 44px;border:none;outline:none;cursor:pointer;} #slider.ui-slider { width: auto !important; width:95% !important; } .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{position:relative;left:3px;width:100%; height:50px;outline:none;border:none;background:none;z-index:100;} .ui-slider-horizontal .ui-slider-range-min { top:-20px;left:0px; height:7px;border-radius:3px; width: 100%;} .product-preview .description p { margin-bottom: 0; } .product-preview .price { white-space: nowrap; } .product .shop-properties .property { margin-bottom: 0.25rem;} .download-file { display: inline-flex; align-items: center;} .download-file:before { margin-right: 1rem; content:''; width: 3rem; height: 3rem; position: relative; background: url(../img/icon-download.svg) no-repeat center / auto 3rem; display: inline-block; filter: contrast(12%) sepia(100%) brightness(150%) saturate(272%) hue-rotate(8deg); } @media screen and (max-width: 640px){ .download-file:before {margin-right: 0.1rem; width: 5rem; height: 5rem;}} .shop-content-top { margin-bottom: 4rem;} #before-after .project > div { position: relative; padding-top: 30%; } #before-after .project img { position: absolute; top:0; left:0; bottom:0; right:0; width: 100%; height: 100%; object-fit: cover; } .montazh { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } .montazh span { font-size: 1.1rem; } .nl1 h3 { text-align: center; } .nr1 { background: url(../../../images/articles/img_montazh_1.jpg) no-repeat center; background-size: cover; } .nl2 { background: url(../../../images/articles/img_montazh_2.jpg) no-repeat center; background-size: cover; } .nl1, .nr2 { padding: 1.5rem; } .gardener p { font-size: 2rem; margin-bottom: 2rem; } .button-up {transition: opacity .3s ease;opacity: 0.6;background-color: #ffc127;height: 55px;width: 55px;bottom: 106px;left: 30px;cursor: pointer;display: hidden; position: fixed;z-index: 999;color: #fff;align-items: flex-end;justify-content: center;border-radius: 35px;-ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none;} .button-up:before { content: ""; position: absolute; top: 40%; width: 40%; height: 40%; border-left: 3px solid white; border-top: 3px solid white; transform: translateX(-50%) rotate(45deg); left: 50%; } .button-up:hover {opacity: 1;} img.imgLeft { float: left; margin: 2rem; margin-left:0; width: 300px; } img.imgRight { float: right; margin: 2rem; margin-right:0; width: 300px; } img.imgLeft:first-child, img.imgRight:first-child { margin-top:0; } .w30 {width: 30%;} .w25 { width: 25%; } /* feedback block */ .feedback { display: flex; align-content: center; flex-flow: column wrap; padding: 15px 0; border-bottom: 1px solid #000; } .feedback .feedback-content:before { content: ""; display: inline-block; width: 20px; height: 20px; background: url(../img/left-quote.png) no-repeat; background-size: contain; margin: 0 10px 5px 0; } .feedback .feedback-content { margin: 15px 0; font-size: 1.6rem;} .feedback .feedback-author { font-size: 1.4rem; font-style: italic; } /* feedback block end */ #bottom .products ul { columns: 2; display: block; } #bottom .products { width: 49%; } @media screen and (max-width: 1024px) { #bottom .products ul { columns: 3;} } #how-we-work .items-container .item { max-height: 13rem; } #how-we-work .items-container { background: url(../img/dash-line.png) no-repeat left 60px/100% 230px; } @media screen and (max-width: 1280px) { #how-we-work .items-container { background: url(../img/dash-line.png) no-repeat left 40px/100% 230px, url(../img/dash-line.png) no-repeat left 240px/100% 230px; } } @media screen and (max-width: 960px) { #how-we-work .items-container { background: none; } } @media screen and (max-width:640px) { .message-box { padding-left: 12rem !important; } .message-box:before { width: 10rem; background-size: 6rem auto;} .message-box:after { left: 10rem; } } @media screen and (min-width: 480px) and (max-width: 590px) { .page-id-597 .variants-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .page-id-597 .window-variant > .heading { padding: 2rem .5rem; } } .tippy-content { font-size: 1.4rem; padding: 2rem; } .tippy-content a { color: #ffc127; } .slick-gallery img { height: 180px; width: 180px; } .slick-gallery .slick-prev { left: 0; } .slick-gallery .slick-next { right: 0; } .slick-gallery .slick-track, .slick-gallery .slick-list { width: 80%; } .slick-gallery { display: flex !important; justify-content: center; } .variants-container.fireplaces img { height: 200px; object-fit: cover; margin-bottom:1rem; } .variants-container.fireplaces .info { width: 300px; min-width: auto; } .variants-container.fireplaces .slick-dots { margin-bottom: 0rem; } .page-id-677 article.article > * { margin-bottom: 4rem; } .page-id-677 .portfolio .project-preview { background: url(../img/portfolio-bg.jpg) repeat center; } .portfolio-container .project-preview img { margin-bottom: 0; } .portfolio-container { margin-left: -1rem; margin-right: -1rem; } .feedback-form h2 { font-size: 3rem; } .feedbacks-slider { margin-bottom: 4rem; } .feedbacks-slider .feedback { border-bottom: none; background: #f5f5f5; border-right: 1px solid #c0c0c0; padding: 2rem; display: flex !important; align-items: flex-start; flex-flow: column; justify-content: center; } .feedbacks-slider .slick-slider .slick-dots { bottom: 0; position: static; transform: none; text-align: center; margin-top: 1rem; } /* Tags */ /* ------------------------------------ */ .ui-slider.tags-container { display: flex; flex-flow: row wrap; margin-bottom: 2rem ; align-items: flex-start; } .tags-container .tag, .tags-container .tag-view-more { transition: all .3s; font-size: 1.3rem; margin: 0.3rem; display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; background: #ffc127;text-align: center; text-decoration: none; } .tags-container .tag-view-more { background: #000; cursor: pointer; color: white; animation: shake 1s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); animation-delay: 5s; } .tags-container .tag.hidden, .tags-container .tag-view-more.hidden { display: none; } .tags-container .tag:hover { background: black; color: white; transform: translate3d(0, 0, 0); animation-delay: 0s !important; } .tag-links-button { text-align: center; border-bottom: none; background: #f5f5f5; border-right: 1px solid #c0c0c0; padding: 2rem; font-size: 1.8rem; } .tag-links-button div { margin-bottom: 1rem; } .tag-links-button a { display: inline-block; } /* Media queries for IPad */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { #content { padding-right: 4rem; padding-left: 4rem; } #content > .container { display: flex; flex-flow: column; } .hidden { display: none !important; } #side .banner { display: none; } #side .services-menu { display: none; } #side .banner { display: none; } #side .menu { text-align: center; } .shop-menu .ui-menu[data-value] .input { display: block; } .shop-menu .menu-property > .input { padding-top: 1rem; padding-bottom: 2rem; } .shop-menu .ui-menu li:not(:last-child) { border-bottom: none; } #side .menu ul li { display: inline-block; padding: 1rem 0.5rem; padding-left: 0.5rem; font-size: 1.4rem; margin-bottom: 0; padding-left: 1rem; margin-right: 1rem; } } #special { padding: 0 10rem; } #special > .container { max-width: 1200px; margin: 0 auto; padding: 2rem 0; } #special .slide a { display: block; } .article-preview .image img { max-width: none; width: 100%; height: auto; } #special .slide img { width: 100%; height: auto;} @media screen and (max-width: 1024px) { .whatsapp-phone { right: -30px; } } @media screen and (max-width: 480px) { .page-id-599 .fireplaces .pagination { grid-column: 1/3; } .page-id-599 .fireplaces .pagination ul { margin-left: 0; } .page-id-599 .fireplaces .pagination ul li { margin-left: .5rem; } } /* Правки 2020.03.06 */ .article-preview { position: relative; } .article-preview .finished-tag { background: #cd1c1c; font-size: 1.8rem; color: white; padding: 1rem; position: absolute; right: 0; top: 2rem; display: inline-block; } .shop-filters a.direction { display: inline-block; background-color: #ffc127; padding: 1rem; margin-left: 0.5rem; height: 4.8rem; width: 3rem;} #header .worktime { grid-area: 2 / 1; } #header .social-icons { grid-area: 2 / 3; } #header .site-logo { position: relative; text-align: center; padding-bottom: 1rem;} #header .experience { position: absolute; bottom: -4rem; left: 50%; transform: translateX(-50%); } #header .phones { font-size: 2.2rem; } #header .order-callback { min-width: 190px; } #header > .container { padding-top: 1rem; grid-gap: 1.5rem; } #header .social-icons { text-align: center; } #header .whatsapp-phone { right: -27px; } #navigation .main-menu li a { padding: 0.75rem 2rem;} #windows-variants { text-align: center; padding-bottom: 2rem; } #windows-variants::before { display: none; } @media screen and (max-width: 1024px) { #header .worktime { grid-area : 3 / 2; } #header .social-icons { grid-area : auto; } } .variant > .heading { clear: both; } .variant a.order-variant { font-size: 1.6rem; margin: 0 auto; max-width: 150px; display: block; align-items: center; margin-top: 0.5rem; justify-content: center; padding: 0.5rem 1rem; background: #ffc127; text-align: center; text-decoration: none; transition: all .3s; } .window-variant > .heading, .variants-container .variant > .heading { padding: 1rem 2rem; } .variant a.order-variant:hover { background: black; color: white; } #article .catalog-teasers .catalog-container { grid-gap: 0.5rem; } #article .catalog-teasers h2 { text-align: center; } #article .catalog-teasers .catalog-container .item .image { width: 140px; height: 140px; } /* SOP */ .sop-teasers { margin: 4rem 0; background: linear-gradient(to right, #f5f5f5, white 200px); padding: 2rem; } .sop-teasers .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); grid-gap: 2rem; } .sop-teasers .sop-teaser { position: relative; display: flex; align-items: center; } .sop-teasers .sop-teaser .image { width: 80px; height:80px; min-width: 80px; margin-right: 2rem; position: relative; transition: all .3s; } .sop-teasers .sop-teaser .image img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .sop-teasers .sop-teaser .title { font-weight: bold; padding: 1rem; transition: all .3s;} .sop-teasers .sop-teaser:hover .title { background: #ffc127; } .sop-teasers .sop-teaser:hover .image { opacity: 0.8; } .sop-teasers .sop-teaser a { content: ''; display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; } #sop-index { padding-left: 10rem; padding-right: 10rem; overflow: hidden; text-align: center; background: linear-gradient(#f5f5f5, white 200px); padding-top: 4rem; padding-bottom: 4rem; } #sop-index .sop-teasers .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); grid-gap: 2rem; } #sop-index .sop-teasers { background: transparent; } #sop-index .sop-teasers .sop-teaser .image { width: 120px; height: 120px; min-width: 120px;} #sop-index .sop-teasers .sop-teaser { text-align: left; } @media screen and (max-width: 960px) { #sop-index { padding-right: 4rem; padding-left: 4rem;} } .services-menu > ul > li#id-789, .services-menu > ul > li#id-594, .services-menu > ul > li#id-55, .services-menu > ul > li#id-596, .services-menu > ul > li#id-597, .services-menu > ul > li#id-598, .services-menu > ul > li#id-599, .services-menu > ul > li#id-52, .services-menu > ul > li#id-49, .services-menu > ul > li#id-48, .services-menu > ul > li#id-788, .services-menu > ul > li#id-794, .services-menu > ul > li#id-795 { margin-left: 2rem; } .services-menu > ul > li#id-789 > a, .services-menu > ul > li#id-594 > a, .services-menu > ul > li#id-55 > a, .services-menu > ul > li#id-596 > a, .services-menu > ul > li#id-597 > a, .services-menu > ul > li#id-598 > a, .services-menu > ul > li#id-599 > a, .services-menu > ul > li#id-52 > a, .services-menu > ul > li#id-49 > a, .services-menu > ul > li#id-48 > a, .services-menu > ul > li#id-788 > a { text-transform: none; } .service-topics-list h2 { font-size: 2.2rem; margin-bottom: 2rem; margin-top:2rem; } .service-topics-list .topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 0.5rem; } .service-topics-list .topics a { min-height: 7rem; display: inline-block; display: inline-flex; padding: 1rem; border: 2px solid #fec127; text-decoration: none; align-items: center; font-size: 1.4rem; padding-left: 8rem; transition: all .3s; position: relative; } .service-topics-list .topics a:hover { background: #fec127; } .service-topics-list .topics a::before { content:''; position: absolute; top:0; left:0; width: 6rem; bottom:0; background: #fec127;} .service-topics-list .topics a::after { content:''; position: absolute; top: 0; left: 0rem; width: 6rem; bottom:0; background: white; mask: url(../img/icon-services-list-info.png) no-repeat center; -webkit-mask: url(../img/icon-services-list-info.png) no-repeat center; } .service-topics-list .topics a[data-icon=ask]::after { mask-image:url(../img/icon-services-list-ask.png); -webkit-mask-image:url(../img/icon-services-list-ask.png);} .service-topics-list .topics a[data-icon=expert]::after { mask-image:url(../img/icon-services-list-expert.png); -webkit-mask-image:url(../img/icon-services-list-expert.png);} .service-topics-list .topics a[data-icon=subscribe]::after { mask-image:url(../img/icon-services-list-subscribe.png); -webkit-mask-image:url(../img/icon-services-list-subscribe.png);} .service-topics-list .topics a[data-icon=photos]::after { mask-image:url(../img/icon-services-list-photos.png); -webkit-mask-image:url(../img/icon-services-list-photos.png);} .service-topics-list .topics a[data-icon=price]::after { mask-image:url(../img/icon-services-list-price.png); -webkit-mask-image:url(../img/icon-services-list-price.png);} .service-topics-list .topics a[data-icon=truck]::after { mask-image:url(../img/icon-services-list-truck.png); -webkit-mask-image:url(../img/icon-services-list-truck.png);} .faq { border: 3px solid #ffc127; padding: 2rem; font-size: 1.4rem; margin-top: 2rem; } .faq h2 { margin-bottom: 2rem; } .faq .question { margin-bottom: 1rem; position: relative; min-height: 2.5rem; display: flex; align-items: center;} .faq .question::before { content:''; display: block; width: 2.5rem; height: 2.5rem; background: url(../img/icon-question.png) no-repeat center, #f0f0f0; border-radius: 50%; min-width: 2.5rem; margin-right: 1rem; } .faq .question:hover::before { background: url(../img/icon-question.png) no-repeat center, #ffc127; } .faq .question .answer { display: none; } .faq .question .title { font-weight: bold; cursor: pointer; } .faq .question .title:hover { text-decoration: underline; } .faq-popup { font-size: 1.8rem; } .faq-popup h2 { font-size: 2.3rem; } .ui-compact { position: relative; padding-bottom: 5rem;} .ui-compact > .ui-compact-wrapper { max-height: 200px; -webkit-mask:linear-gradient(white 90%, transparent); mask:linear-gradient(white 90%, transparent); } .ui-compact::after { content: '';} .ui-compact.-is-open > .ui-compact-wrapper { max-height: none; mask: none; -webkit-mask: none; } .ui-compact > .open-button { position: absolute; bottom: 0; z-index: 10; left:50%; transform: translateX(-50%); } .popup { max-width: 650px !important; } .kontur-block { display: flex; } .kontur-block a:first-child { margin-right: 1rem; } #ny-banner { position: relative; display: flex; justify-content: center; } .contour-cutting-machine-block { display: flex; justify-content: center; position: relative; } .contour-cutting-machine-block:before { content: ""; display: block; width: 25%; height: 65px; position: absolute; left: 0; background: #eeeeee; bottom: 0; } #ny-banner:before { content: ""; display: block; position: absolute; width: 30%; height: 91px; left: -350px; background: #f6f6f6; bottom: 0; } .slick-track { display: flex; } .page-section { margin-bottom: 2rem; } .-align-center { text-align: center; } .overlay-visible { position: fixed; background: rgba(0,0,0,.5); width: 100%; display: block; height: 100%; top: 0; z-index: 999; cursor: pointer; } #buy-with-click-popup.open { position: fixed; z-index: 1000; background: white; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 3rem; } #buy-with-click-popup .close { display: inline-block; position: absolute; top: 1rem; right: 2rem; cursor: pointer; opacity: 0.7; transition: all .2s ease; } #buy-with-click-popup .close:hover { opacity: 1; } .tippy-content { text-align: center; } @media screen and (max-width: 980px) { .contour-cutting-machine-block:before { content: none; } #ny-banner:before { content: "none"; } }