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(../js/prettyPhoto/images/prettyPhoto/default/sprite.png) -78px -93px no-repeat } div.pp_default .pp_top .pp_middle { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite_x.png) top left repeat-x } div.pp_default .pp_top .pp_right { background: url(../js/prettyPhoto/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(../js/prettyPhoto/images/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y; padding-left: 13px } div.pp_default .pp_content_container .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite_y.png) top right repeat-y; padding-right: 13px } div.pp_default .pp_next:hover { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite_next.png) center right no-repeat; cursor: pointer } div.pp_default .pp_previous:hover { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite_prev.png) center left no-repeat; cursor: pointer } div.pp_default .pp_expand { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite.png) 0 -29px no-repeat; cursor: pointer; width: 28px; height: 28px } div.pp_default .pp_expand:hover { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite.png) 0 -56px no-repeat; cursor: pointer } div.pp_default .pp_contract { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite.png) 0 -84px no-repeat; cursor: pointer; width: 28px; height: 28px } div.pp_default .pp_contract:hover { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite.png) 0 -113px no-repeat; cursor: pointer } div.pp_default .pp_close { width: 30px; height: 30px; background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite.png) 2px 1px no-repeat; cursor: pointer } div.pp_default .pp_gallery ul li a { background: url(../js/prettyPhoto/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(../js/prettyPhoto/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(../js/prettyPhoto/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(../js/prettyPhoto/images/prettyPhoto/default/sprite.png) -78px -127px no-repeat } div.pp_default .pp_bottom .pp_middle { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite_x.png) bottom left repeat-x } div.pp_default .pp_bottom .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/default/sprite.png) -112px -127px no-repeat } div.pp_default .pp_loaderIcon { background: url(../js/prettyPhoto/images/prettyPhoto/default/loader.gif) center center no-repeat } div.light_rounded .pp_top .pp_left { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat } div.light_rounded .pp_top .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat } div.light_rounded .pp_next:hover { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer } div.light_rounded .pp_previous:hover { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer } div.light_rounded .pp_expand { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer } div.light_rounded .pp_expand:hover { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer } div.light_rounded .pp_contract { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer } div.light_rounded .pp_contract:hover { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer } div.light_rounded .pp_close { width: 75px; height: 22px; background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer } div.light_rounded .pp_nav .pp_play { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px } div.light_rounded .pp_nav .pp_pause { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px } div.light_rounded .pp_arrow_previous { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat } div.light_rounded .pp_arrow_next { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat } div.light_rounded .pp_bottom .pp_left { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat } div.light_rounded .pp_bottom .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat } div.dark_rounded .pp_top .pp_left { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat } div.dark_rounded .pp_top .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat } div.dark_rounded .pp_content_container .pp_left { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y } div.dark_rounded .pp_content_container .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y } div.dark_rounded .pp_next:hover { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer } div.dark_rounded .pp_previous:hover { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer } div.dark_rounded .pp_expand { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer } div.dark_rounded .pp_expand:hover { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer } div.dark_rounded .pp_contract { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer } div.dark_rounded .pp_contract:hover { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer } div.dark_rounded .pp_close { width: 75px; height: 22px; background: url(../js/prettyPhoto/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(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px } div.dark_rounded .pp_nav .pp_pause { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px } div.dark_rounded .pp_arrow_previous { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat } div.dark_rounded .pp_arrow_next { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat } div.dark_rounded .pp_bottom .pp_left { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat } div.dark_rounded .pp_bottom .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat } div.dark_rounded .pp_loaderIcon { background: url(../js/prettyPhoto/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(../js/prettyPhoto/images/prettyPhoto/dark_square/loader.gif) center center no-repeat } div.dark_square .pp_expand { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer } div.dark_square .pp_expand:hover { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer } div.dark_square .pp_contract { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer } div.dark_square .pp_contract:hover { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer } div.dark_square .pp_close { width: 75px; height: 22px; background: url(../js/prettyPhoto/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(../js/prettyPhoto/images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px } div.dark_square .pp_nav .pp_pause { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px } div.dark_square .pp_arrow_previous { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat } div.dark_square .pp_arrow_next { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat } div.dark_square .pp_next:hover { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer } div.dark_square .pp_previous:hover { background: url(../js/prettyPhoto/images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer } div.light_square .pp_expand { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer } div.light_square .pp_expand:hover { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer } div.light_square .pp_contract { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer } div.light_square .pp_contract:hover { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer } div.light_square .pp_close { width: 75px; height: 22px; background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer } div.light_square .pp_nav .pp_play { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px } div.light_square .pp_nav .pp_pause { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px } div.light_square .pp_arrow_previous { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat } div.light_square .pp_arrow_next { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat } div.light_square .pp_next:hover { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/btnNext.png) center right no-repeat; cursor: pointer } div.light_square .pp_previous:hover { background: url(../js/prettyPhoto/images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat; cursor: pointer } div.facebook .pp_top .pp_left { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat } div.facebook .pp_top .pp_middle { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x } div.facebook .pp_top .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat } div.facebook .pp_content_container .pp_left { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y } div.facebook .pp_content_container .pp_right { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y } div.facebook .pp_expand { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat; cursor: pointer } div.facebook .pp_expand:hover { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat; cursor: pointer } div.facebook .pp_contract { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat; cursor: pointer } div.facebook .pp_contract:hover { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat; cursor: pointer } div.facebook .pp_close { width: 22px; height: 22px; background: url(../js/prettyPhoto/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(../js/prettyPhoto/images/prettyPhoto/facebook/loader.gif) center center no-repeat } div.facebook .pp_arrow_previous { background: url(../js/prettyPhoto/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(../js/prettyPhoto/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(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat; height: 22px; width: 22px } div.facebook .pp_nav .pp_pause { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat; height: 22px; width: 22px } div.facebook .pp_next:hover { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/btnNext.png) center right no-repeat; cursor: pointer } div.facebook .pp_previous:hover { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat; cursor: pointer } div.facebook .pp_bottom .pp_left { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat } div.facebook .pp_bottom .pp_middle { background: url(../js/prettyPhoto/images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x } div.facebook .pp_bottom .pp_right { background: url(../js/prettyPhoto/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(../js/prettyPhoto/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(../js/prettyPhoto/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(../js/prettyPhoto/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(../js/prettyPhoto/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(../js/prettyPhoto/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; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; user-select: none; -webkit-touch-callout: none; 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 { } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; background: white; padding: 4rem; width: auto; max-width: 500px; margin: 20px auto; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } @charset "UTF-8"; /* Reset */ /* -------------------------------------------------------------------- */ 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; list-style-position: inside;} caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; } legend { color: #000; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } * { box-sizing: border-box; vertical-align: top; } @charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); :root { --color-red: #ed2a18; --color-white: #ffffff; --color-blue: #187e9a; --color-gray: #e8e8e8; --color-light-gray: #f1f4f6; --color-black: #000000; --button-color: var(--color-red); --button-text-color: white; --button-hover-color: var(--color-black); --button-hover-text-color: var(--color-white); --link-color: var(--color-red); --text-color: black; --background-color: var(--color-white); --heading-color: black; --span: 2rem; --span-small: calc(var(--span) / 2); --span-large: calc(var(--span) * 2); --span-x-large: calc(var(--span) * 4); --span-xx-large: calc(var(--span) * 6); --block-padding: calc(var(--span) * 3); --block-inner-padding: 6rem; --block-width-small: 110rem; --page-width: 1350px; --input-color: #f0f0f0; --input-border-color: var(--color-gray); --input-border: 1px solid var(--color-gray); --input-active-border: 1px solid var(--color-red); --input-padding: calc(var(--span-small) * 1.5) var(--span); --border-radius: 0; --shadow: 0 0 5px 0 #00000020; --font: 'PT Sans', sans-serif;; } /* Формы */ /* -------------------------------------------------------------------- */ .form .form-heading .comment { font-size: 90%; font-style: italic; } .form input:not([type="submit"]), .form textarea, .form select { width: 100%; } .form textarea { min-height: 10rem; } .form.-horizontal .container { display: flex; align-items: center; gap: 1rem; } .form.-horizontal .form-inputs { flex-grow: 1; } .form.-horizontal .form-input { margin-bottom: 0; flex-grow: 1; } body.-safari .form.-horizontal > * { margin: 0.5rem; } .form-inputs > *:not(:last-child) { margin-bottom: var(--span); } .form-inputs.-double { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); justify-content: center; gap: var(--span); } @media screen and (max-width: 640px) { .form-inputs.-double { display: flex; flex-flow: column; } .form .container { flex-wrap: wrap; justify-content: center; } } .form-inputs.-double > .form-input { margin:0; } .form-inputs.-double > .form-input.-double { grid-area: auto / auto / auto / span 2; } .form-buttons { margin-bottom: 0; } .form-buttons > * { margin:0; } .form-input.-required label::after { content: '*'; display: inline; color: var(--color-red); } .form-input.-error label { color: var(--color-red); } .form-input.-error input, .form-input.-error select, .form-input.-error textarea { --input-border: 2px solid var(--color-red); } .form .form-input { margin-bottom: var(--span); } .form .form-input label { font-weight: normal; margin-bottom: 0.5em; display: block; font-size: 90%; } .form .form-heading { margin-bottom: var(--span); } .form .form-input.-fancy { display: flex; margin-bottom: var(--span); border: var(--input-border); } .form .form-input.-fancy > * { margin-bottom: 0; border: none; } .form .form-input.-fancy label { width: 30%; min-width: 200px; background: #f7f7f7; padding: 0.5rem 1rem; font-size: 90%; text-align: right; } @media screen and (max-width: 640px) { .form .form-input.-fancy { flex-wrap: wrap; } .form .form-input.-fancy > * { flex-grow: 1; } } .ui-button, input[type="button"], input[type="submit"], button { gap: 1rem; 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: 1rem var(--span); border-radius: var(--border-radius); align-items: center; height: 6rem; background: var(--button-color); color: var(--button-text-color); outline: none; border: 0; position: relative; transition: 0.3s all; } .ui-button i { display: inline-block; width: 2rem; height: 2rem; background-position: center; background: var(--button-text-color); mask-repeat: no-repeat; -webkit-mask-repeat: margin-right: 0.5rem; } .ui-button:hover, input:hover[type="button"], input:hover[type="submit"], button:hover { background: black; color: white; } .ui-button.-mini { padding: 0.5rem 1rem; height: auto; } .ui-button.-black { --button-color: black; --button-text-color: white; } .ui-button.-black:hover { background: var(--color-red); --button-text-color: white; } .ui-button.-tag { padding: 3rem; background: white; color: black; } .ui-button.-hollow { background: white; border: 2px solid var(--input-border-color); color: var(--text-color); display: inline-flex; } .ui-button.-hollow i { background: black; } .ui-button.-hollow:hover { border-color: var(--color-red); color: black; } .ui-button.-hollow:hover i { background: var(--color-red); } .ui-button.-blue { --button-color: var(--color-blue); --button-text-color: white; } .ui-button.-blue:hover { -button-color: black; } .ui-button.-large { width: 100%; } .ui-button-lg { padding-left:0; background-color: #f0f0f0; color: black; height: 5rem; display: flex; align-items: center; gap: 1rem; padding: 0; padding-right: 1rem; } .ui-button-lg .icon { width: 5rem; height: 100%; background-color: var(--button-color); display: inline-flex; align-items: center; justify-content: center; margin-right:1rem; flex-grow: 0;} .ui-button-lg .icon i { width: 3rem; height: 3rem; background: var(--button-text-color); } .ui-button-lg .text { flex-grow: 1; text-align: center; } .ui-button-lg:hover { background: var(--button-color); color: var(--button-text-color); } .ui-button-lg.-black { --button-color: black; --button-text-color: white; } .ui-input, input[type="text"], input[type="checkbox"], input[type="password"], input[type="email"], select, textarea { min-height: 6rem; padding: var(--input-padding); font-size: 1.5rem; outline: 0; border-radius: var(--border-radius); border: 1px solid transparent; display: block; color: var(--color-black); overflow: hidden; background: var(--input-color); transition: all .3s; } .ui-input:focus, input:focus[type="text"], input:focus[type="checkbox"], input:focus[type="password"], input:focus[type="email"], select:focus, textarea:focus { border-color: var(--color-blue); box-shadow: var(--shadow); border:var(--input-active-border); } input[type="text"]:focus, input[type="checkbox"]:focus, select:focus, textarea:focus { background: white; box-shadow: var(--shadow); border: 1px solid #0005; } input[type="text"]::placeholder, textarea::placeholder { opacity: 0.4; font-style: italic; } input[type="checkbox"] { } textarea { min-height: 5rem; } /* Checkbox */ input[type="checkbox"] { cursor: pointer; width: 2rem; height: 2rem; appearance: none; -webkit-appearance: none; border: none; background: white; padding: 0; max-width: var(--span); position: relative; margin-right: 1rem; display: inline-block; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0; min-height: 1rem; } input[type="checkbox"]:checked::after { display: inline-block; content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: var(--color-red); } /* Select */ select { appearance: none; -webkit-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='1rem' width='1rem'%3E%3Ctext x='0' y='10' fill='black'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1.5rem 1.5rem; background-position: calc(100% - 1rem) center; background-clip: border-box;} select:focus { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='1rem' width='1rem'%3E%3Ctext x='0' y='10' fill='black'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1.5rem 1.5rem; background-position: calc(100% - 1rem) center; background-clip: border-box; } input:disabled, select:disabled, textarea:disabled { opacity: 0.7; } .vcap { display: flex; align-items: center; gap: 1rem; } .vcap input { border: 2px solid var(--color-red); display: flex; align-items: center; gap: 1em; margin-bottom: 0; } .vcap-input { display: flex; align-items: center; align-content: center; margin-bottom: 2rem; font-size: 1.5rem; } .vcap-input input { margin-bottom: 0; } .vcap-input label { margin-bottom: 0 !important; } .vcap-input label a { color: var(--link-color); text-decoration: underline; } .vcap-input.-error input { border: 2px solid var(--color-red); } /* Slider */ /* -------------------------------------------------------------------- */ .slider { display: block; position: relative; } .slick-list { display: block; position: relative; height: 100% !important;} .slick-track { display: block; height: 100%; display: flex; gap: 2rem; } .slick-slider { position: relative; } .slick-slider .slick-arrow { padding: 0; position: absolute !important; top: 50% !important; width: 5rem; height: 5rem; color: transparent !important; transform: translateY(-50%); z-index: 100; box-shadow: none; background: transparent; opacity: 0.5; transition: all .3s; --image: url(../img/icon-arrow-right.svg); } .slick-slider .slick-arrow:hover { opacity: 1; } .slick-slider .slick-arrow::after { content: ''; display: inline-block; width: 2rem; height: 4rem; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); mask: var(--image) center/contain no-repeat; -webkit-mask: var(--image) center/contain no-repeat; background: black; transition: .3s all; } .slick-slider .slick-arrow:hover::after { background: var(--color-red); } .slick-slider .slick-prev { position: absolute; left: -5rem; --image: url(../img/icon-arrow-left.svg); } .slick-slider .slick-next { position: absolute; right: -5rem; } .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: 2rem !important; height: 2rem !important; border-radius: 50%; border: 2px solid white; }.slick-slider .slick-dots li.slick-active button { background: #2d67b6; } @media screen and (max-width: 960px) { .slick-slider .slick-prev { left: 0.5rem; } .slick-slider .slick-next { right: 0.5rem; } } @media screen and (max-width: 960px) { .slick-track { gap: 0; } } /* HTML */ /* -------------------------------------------------------------------- */ html { height: 100%; font-size: 10px; } body { width: 100%; min-height: 100%; vertical-align: top; background: var(--background-color); color: var(--text-color); font-size: 1.7rem; font-family: var(--font); font-weight: 300; line-height: 1.4; } body > .container { overflow: hidden; } .ui-slider .slick-slide { display: block; } .ui-slider { margin-left: -2rem; margin-right: -2rem;} @media screen and (max-width: 640px) { .ui-slider { margin-left: 0; margin-right: 0;} } /* Main elements */ /* -------------------------------------------------------------------- */ img { display: inline-block; max-width: 100%; height: auto; } p { margin-bottom: 0.5em; } b { font-weight: bold; } a { text-decoration: none; color: inherit; } em { font-weight: bold; } strong { font-weight: bold;} /* Headings */ /* -------------------------------------------------------------------- */ h1, h2, h3, h4 { margin-bottom: 1em; line-height: 1.1; color: var(--heading-color); font-weight: normal; } h2:not(:first-child), h3:not(:first-child), h4:not(:first-child) { margin-top: 1em;} h1 { font-size: 4rem; font-weight: bold; } h2 { font-weight: bold; } h3 { font-size: 2.8rem; font-weight: bold; } h4 { font-size: 2rem; font-weight: bold; } h2 { font-size: 3.4rem; color: var(--heading-color); } h2 ~ h3 { margin-top: 0.5rem !important; font-size: 2.4rem; font-style: italic; } @media screen and (max-width: 640px) { h2 ~ h3 { text-align: center; margin-bottom: 4rem; } } /* Lists */ /* -------------------------------------------------------------------- */ ol > li::marker { display: inline; } ol > li::before, ul > li::before { display: inline-block; } ol > li > p { display: inline; } ul > li > p { display: inline; } .hidden { display: none !important; } .clearfix { clear: both; } a { color: var(--link-color); text-decoration: underline; } a:hover { color: black; text-decoration: none; } p { margin-bottom: 0.5em; } i { width: auto; height: auto; } em { font-weight: bold; font-style: normal; } strong { font-weight: bold; } /* Картинки */ /* -------------------------------------------------------------------- */ img.-full { width: 100%; height: auto; float: none; max-width: none; margin-left: 0; margin-right: 0; margin: 3rem 0;} img.-left { float: left; margin-right: var(--span); margin-bottom: var(--span); max-width: 50rem; height: auto; position: relative; } img.-right { float: right; margin-left: var(--span); margin-bottom: var(--span); max-width: 50rem; height: auto; position: relative; } img.-left.-small { max-width: 30rem; } img.-right.-small { max-width: 30rem; } img.-center { margin: 0 auto; max-height: 60rem; width: auto; display: block; margin:2rem auto; } img.-frame { border: 2px solid #00000020; box-shadow: var(--shadow); } @media screen and (max-width: 768px) { img.-left, img.-right { float: none; max-width: none; margin:0; margin-bottom: 2rem; width: 100%; } } /* Таблицы */ /* -------------------------------------------------------------------- */ table { width: 100%; border: 1px solid #c0c0c0; margin-bottom: 4rem; background: white; text-align: center; overflow: hidden; } table caption { display: none; } table td, table th { border: 1px solid #c0c0c0; padding: 2rem; text-align: center; } table th { background: #e1e1e1; color: black; font-size: 1.8rem; } table td { text-align: center; padding: 1rem 2rem; } table td strong { font-weight: bold;} @media screen and (max-width: 960px) { table { overflow: auto; max-width: 100%; } } i { --image: linear-gradient(transparent, transparent); display: inline-block; width: 2rem; height: 2rem; mask: var(--image) center / contain no-repeat; -webkit-mask: var(--image) center / contain no-repeat; background: black; } i[data-icon="phone"] { --image: url(../img/icon-phone-classic.png); } i[data-icon="close"] { --image: url(../img/ui-close.svg); } i[data-icon="more"] { --image: url(../img/icon-more.png); } i[data-icon="book"] { --image: url(../img/icon-book.png); } i[data-icon="download"] { --image: url(../img/icon-download.png); } i[data-icon="download-file"] { --image: url(../img/icons/download-file.png); } i[data-icon="email"] { --image: url(../img/icon-email.png); } i[data-icon="order"] { --image: url(../img/icon-order.png); } i[data-icon="delivery"] { --image: url(../img/icon-delivery.png); } i[data-icon="search"] { --image: url(../img/icon-search.png); } i[data-icon="arrow-right"] { --image: url(../img/icon-arrow-right.svg); } i[data-icon="arrow-left"] { --image: url(../img/icon-arrow-left.svg); } i[data-icon="arrow-up"] { --image: url(../img/icon-arrow-up.svg); } i[data-icon="arrow-down"] { --image: url(../img/icon-arrow-down.svg); } i[data-icon="slider-1"] { --image: url(../img/icon-slider-1.png); } i[data-icon="slider-2"] { --image: url(../img/icon-slider-2.png); } i[data-icon="slider-3"] { --image: url(../img/icon-slider-3.png); } i[data-icon="slider-4"] { --image: url(../img/icon-slider-4.png); } i[data-icon="more-link"] { --image: url(../img/icon-more.png); } i[data-icon="address"] { --image: url(../img/icon-address.png); } i[data-icon="page-22"] { --image: url(../img/icon-page-22.png); } i[data-icon="page-35"] { --image: url(../img/icon-page-35.png); } i[data-icon="page-40"] { --image: url(../img/icon-page-40.png); } i[data-icon="page-137"] { --image: url(../img/icon-page-137.png); } i[data-icon="specs-general"] { --image: url(../img/icon-specs-general.png); } i[data-icon="specs-chemical"] { --image: url(../img/icon-specs-chemical.png); } i[data-icon="specs-package"] { --image: url(../img/icon-specs-package.png); } i[data-icon="specs-physical"] { --image: url(../img/icon-specs-physical.png); } i[data-icon="specs-marks"] { --image: url(../img/icon-specs-marks.png); } i[data-icon="specs-transport"] { --image: url(../img/icon-specs-transport.png); } i[data-icon="delivery-railroad"] { --image: url(../img/icon-delivery-railroad.png); } i[data-icon="delivery-transport"] { --image: url(../img/icon-delivery-transport.png); } i[data-icon="view-cards"] { --image: url(../img/icon-view-cards.svg); } i[data-icon="view-table"] { --image: url(../img/icon-view-table.svg); } i[data-icon="link-buttons-usage"] { --image: url(../img/icon-link-buttons-usage.png); } i[data-icon="link-buttons-delivery"] { --image: url(../img/icon-link-buttons-delivery.png); } i[data-icon="link-buttons-similar"] { --image: url(../img/icon-link-buttons-similar.png); } i[data-icon="link-buttons-manufacturer"] { --image: url(../img/icon-link-buttons-manufacturer.png); } i[data-icon="usage-farmacevtika"] { --image: url(../img/icon-catalog-farmacy.png); } i[data-icon="usage-pischevaya-promyshlennost"] { --image: url(../img/icon-catalog-food.png); } i[data-icon="usage-stroitelstvo"] { --image: url(../img/icon-catalog-bulding.png); } i[data-icon="usage-himicheskaya-promyshlennost"] { --image: url(../img/icon-catalog-chemistry.png); } i[data-icon="usage-selskoe-hozyaystvo"] { --image: url(../img/icon-catalog-argiculture.png); } i[data-icon="usage-kremniyorganicheskaya-produkciya"] { --image: url(../img/icon-catalog-silicon.png); } i[data-icon="usage-metallurgiya"] { --image: url(../img/icon-catalog-metallurgiya.png); } i[data-icon="adv-services-1"] { --image: url(../img/icon-adv-services-1.png); } i[data-icon="adv-services-2"] { --image: url(../img/icon-adv-services-2.png); } i[data-icon="adv-services-3"] { --image: url(../img/icon-adv-services-3.png); } i[data-icon="adv-services-4"] { --image: url(../img/icon-adv-services-4.png); } i[data-icon="adv-services-5"] { --image: url(../img/icon-adv-services-5.png); } i[data-icon="adv-services-6"] { --image: url(../img/icon-adv-services-6.png); } i[data-icon="article-company-1"] { --image: url(../img/icon-article-company-1.png); } i[data-icon="article-company-2"] { --image: url(../img/icon-article-company-2.png); } i[data-icon="article-company-3"] { --image: url(../img/icon-article-company-3.png); } i[data-icon="article-company-4"] { --image: url(../img/icon-article-company-4.png); } i[data-icon="article-company-5"] { --image: url(../img/icon-article-company-5.png); } i[data-icon="article-company-6"] { --image: url(../img/icon-article-company-6.png); } i[data-icon="delivery-service-1"] { --image: url(../img/icon-delivery-service-1.png); } i[data-icon="delivery-service-2"] { --image: url(../img/icon-delivery-service-2.png); } i[data-icon="delivery-service-3"] { --image: url(../img/icon-delivery-service-3.png); } i[data-icon="delivery-service-4"] { --image: url(../img/icon-delivery-service-4.png); } i[data-icon="article-delivery-1"] { --image: url(../img/icon-article-delivery-1.png); } i[data-icon="article-delivery-2"] { --image: url(../img/icon-article-delivery-2.png); } i[data-icon="article-delivery-3"] { --image: url(../img/icon-article-delivery-3.png); } i[data-icon="article-delivery-4"] { --image: url(../img/icon-article-delivery-4.png); } i[data-icon="article-partners-1"] { --image: url(../img/icons/article-partners-1.png); } i[data-icon="article-partners-2"] { --image: url(../img/icons/article-partners-2.png); } i[data-icon="article-partners-3"] { --image: url(../img/icons/article-partners-3.png); } i[data-icon="article-partners-4"] { --image: url(../img/icons/article-partners-4.png); } i[data-icon="catalog-teaser-1"] { --image: url(../img/icons/catalog-teaser-1.png); } i[data-icon="catalog-teaser-2"] { --image: url(../img/icons/catalog-teaser-2.png); } i[data-icon="catalog-teaser-3"] { --image: url(../img/icons/catalog-teaser-3.png); } i[data-icon="catalog-teaser-4"] { --image: url(../img/icons/catalog-teaser-4.png); } i[data-icon="catalog-teaser-5"] { --image: url(../img/icons/catalog-teaser-5.png); } i[data-icon="catalog-teaser-6"] { --image: url(../img/icons/catalog-teaser-6.png); } i[data-icon="catalog-teaser-7"] { --image: url(../img/icons/catalog-teaser-7.png); } i[data-icon="catalog-teaser-8"] { --image: url(../img/icons/catalog-teaser-8.png); } i[data-icon="catalog-teaser-9"] { --image: url(../img/icons/catalog-teaser-9.png); } i[data-icon="catalog-teaser-10"] { --image: url(../img/icons/catalog-teaser-10.png); } i[data-icon="catalog-teaser-11"] { --image: url(../img/icons/catalog-teaser-11.png); } i[data-icon="catalog-teaser-12"] { --image: url(../img/icons/catalog-teaser-11.png); } .ui-tabs > nav { display: flex; flex-wrap: wrap; margin-bottom: 2px } .ui-tabs > nav a { display: inline-block; padding: 1rem 2rem; text-decoration: none; font-size: 1.6rem; cursor: pointer; flex-grow: 1; text-align: center; margin-right:0.5rem; background: var(--color-gray); } .ui-tabs > nav a:hover { background: var(--color-black); color: white; } .ui-tabs > nav a.active { background: var(--color-blue); color: white; } .ui-tabs > .content { } .ui-tabs > .content > * { display: none; padding: var(--span-large); border: 2px solid var(--color-gray); } .ui-tabs > .content > *.active { display: block; } .ui-links-group a { color: black; display: inline-block; padding: 0.5rem 1rem; background: #e0e0e0; font-size: 1.6rem; margin-right: 0.5rem; margin-bottom: 0.5rem; text-decoration: none; transition: .3s all; border-radius: 0.3rem; } .ui-links-group a:hover { color: white; background: black; } /* Панели */ /* -------------------------------------------------------------------- */ .ui-panel { padding: var(--span-large); box-shadow: var(--shadow); background: white; } .ui-panel.-gray { background: var(--color-light-gray); } .ui-panel.-blue { background: var(--color-blue); } .ui-panel.-white { --text-color: var(--color-black); background: var(--color-white); color: var(--text-color); --heading-color: black;} .ui-panel.-frameless { padding:0; overflow: hidden; } .ui-panel.-with-image { display: flex; align-items: center; min-height: 10rem; padding-right: 30rem; position: relative; overflow: hidden; } .ui-panel.-with-image > .image { width: 30rem; position: absolute; right:0; top: 0; bottom:0; } .ui-panel.-with-image > .image img { margin-bottom: 0; width: 100%; height: 100%; object-fit: cover; } @media screen and (max-width: 768px) { .ui-panel { padding: var(--span); } } .ui-center { text-align: center; } .ui-center.-panel { max-width: 60rem; margin:0 auto;} .ui-inline { display: flex; align-items: center; gap: 0.5rem; justify-content: center; } .slider .slick-slide {margin: 1rem; display: block; } /* Контейнеры для элементов */ /* -------------------------------------------------------------------- */ .ui-flex-container { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; } .ui-flex-container > * { flex-shrink: 0; } @media screen and (max-width: 768px) { .ui-flex-container { flex-wrap: wrap; } .ui-flex-container > * { flex-basis: 100%; } } .ui-container { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--span);} .ui-container.-small { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .ui-container.-smaller { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .ui-container.-normal { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } .ui-container.-wide { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); } @media screen and (max-width: 960px) { .ui-container { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));} } @media screen and (max-width: 640px) { .ui-container { display: flex; flex-flow: wrap; } .ui-container > * { flex-grow: 1; } } .ui-grid { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; justify-content: center; } .ui-grid.-narrow { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; grid-gap: 1rem; } .ui-grid.-narrower { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } .ui-grid.-wider { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } .ui-grid.-wide { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); } @media screen and (max-width: 960px) { .ui-grid.-narrower { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .ui-grid.-wider { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .ui-grid.-wide { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } } .ui-split-container { display: flex; gap: var(--span-large); } .ui-split-container > * { width: 48%; flex-grow: 1;} .ui-split-container.-center { align-items: center; } .ui-split-container.-proportion-2-1 > *:nth-child(1) { width: 64%; } .ui-split-container.-proportion-2-1 > *:nth-child(2) { width: 31%; } @media screen and (max-width: 768px) { .ui-split-container { flex-wrap: wrap; } .ui-split-container > * { width: auto; } } .side-image-container { display: flex; gap: 6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; } .side-image-container > * { flex-basis: 40rem; flex-grow: 1; } .side-image-container > .content { flex-grow: 2; } .side-image-container > .image { lign-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; } .side-image-container > .image img { max-height: 35rem; width: 100%; height: 100%; object-fit: cover; } .side-image-container > .image.-circle { flex-basis: auto; width: 50rem; height: 50rem; border-radius: 50%; overflow: hidden; flex-grow: 0; position: relative; } .side-image-container > .image.-circle::after { content: ''; display: block; position: absolute; left:0; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to top, #fffd, transparent); } .side-image-container > .image.-circle img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-height: none; } @media screen and (max-width: 768px) { .side-image-container > .image.-circle { width: 100%; height: auto; padding-top: 100%; } .side-image-container.-mobile-reverse { flex-direction: reverse; } } .side-container { display: flex; align-items: center; flex-wrap: wrap; gap: 4rem;} .side-container > .content { flex-basis: 30rem; flex-grow: 2; } .side-container > .side { flex-basis: 20%; flex-grow: 1; min-width: 20rem; align-self: center;} /* Адптивное меню */ /* -------------------------------------------------------------------- */ .ui-mobile-menu { display:none; position: fixed; top:0; left:0; width: 100%; height: auto; z-index: 200; max-height: 100%; overflow: auto; } .ui-mobile-menu .menu-main li ul { position: relative; color: white; background: transparent;} .ui-mobile-menu .menu-main li.active { background: none !important; color: white !important; } .ui-mobile-menu .menu-main li.active > a, .ui-mobile-menu .menu-main li.active > span { font-weight: bold; } .ui-mobile-menu .menu-main li.active > ul { margin-left: 2rem; padding-left: 0; background: #00000020; } .ui-mobile-menu .menu-main li ul li { border: none !important; } .ui-mobile-menu li { display: block; } .ui-mobile-menu li a, .ui-mobile-menu li span { display: block; padding: 0.5rem 0; } .ui-mobile-menu li:hover > a { text-decoration: underline; } .ui-mobile-menu > ul { display: none; background: var(--color-black); padding: 2rem 4rem; z-index: 100; overflow: auto; position: relative; } .ui-mobile-menu a { color: white; text-decoration: none; } .ui-mobile-menu.open::after { content: ''; display: block; top: 100%; height: 2rem; left:0; right:0; background: linear-gradient(#0003, transparent); } .ui-mobile-menu > ul > li > ul { display: none; padding: 1rem; margin: 0 -4rem; font-size: 90%; padding-left: 5rem; } .ui-mobile-menu > ul > li.active > ul { display: block; background: #00000020; border-bottom: 1px solid rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.3); } .ui-mobile-menu li.active > a { font-weight: bold; } .ui-mobile-menu li.active > ul { display: block; } .ui-mobile-menu .open-button { width: 100%; border-radius: 0; text-align: left; padding-left: 4rem; justify-content: start; background: var(--color-red); height: 5rem; } .ui-mobile-menu .open-button::after { transition: all .3s; display: block; content: ''; right: 4rem; top: 50%; transform: translateY(-50%); position: absolute; width: 1.5rem; height: 1.5rem; background: url(../img/icon-burger.png) no-repeat center; background-size: 1.5rem auto; } @media screen and (max-width: 768px) { body { padding-top: 5rem; } #header .navigation { display: none; } .ui-mobile-menu { display: block; } .ui-mobile-menu.open > ul { display: block; height: 100%; } .ui-mobile-menu.open .open-button { background: var(--color-blue); } .ui-mobile-menu.open .open-button::after { opacity: 1; background-image: url(../img/ui-close.svg); filter: invert(100%); } } .ui-section { margin-bottom: var(--span); clear: both; overflow: hidden; } .ui-section:last-child { margin-bottom: 0; } .message-queue { position: fixed; top: 50%; padding: 3rem; left: 50%; right: 0; background: rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%); max-width: 800px; border-radius: 1rem; z-index:100; } .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 #a6051b; } .message-queue .message strong { font-weight: bold; } .message-queue .message .large { font-size: 2.5rem;} .message-queue .message .large strong { color: #a6051b; } .message-queue .message.critical { border-left: 5px solid transparent; color: white; background: #a6051b; } .message-queue .message.warning { border-left: 5px solid #ffd376; } @media screen and (max-width: 640px) { .message-queue { padding: 1rem; bottom: 0; width: 100%; border-radius: 0; top: auto; transform: none; left:0; right:0; } .message-queue .message { padding: 0.5rem; } } /* Хлебные крошки */ /* -------------------------------------------------------------------- */ .breadcrumbs { font-size: 1.6rem; margin-bottom: 2rem; color: #666; display: flex; align-items: center; flex-wrap: wrap; } .breadcrumbs ul { display: inline-flex; align-items: center; flex-wrap: wrap; } .breadcrumbs li { padding: 0.5rem; position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; } .breadcrumbs::before { content:''; display: inline-block; width: 2.5rem; height: 2.5rem; --image: url('../img/icon-breadcrumbs.png'); mask: var(--image) center/contain no-repeat; -webkit-mask: var(--image) center/contain no-repeat; background: black; position: relative; margin-right: 0.75rem; } .breadcrumbs li::after { content:'/'; display: inline-block; margin:0 1rem; position: relative; opacity: 0.7; margin-left: 1rem; top: -0.2rem; } .breadcrumbs li:last-child::after { display: none; } .breadcrumbs > span { margin: 0.2rem 0.5rem; } .breadcrumbs span { color: black; } .breadcrumbs .divider { display: inline-block; height: 2rem; width: 1rem; color: gray;} .breadcrumbs a { color: var(--color-red); text-decoration: underline; } /* Page block */ /* -------------------------------------------------------------------- */ .page-block { padding: var(--block-padding); overflow: hidden; position: relative; color: var(--text-color); background: var(--background-color); --text-color: inherit; --background-color: transparent;} .page-block > .container { max-width: var(--page-width); margin: 0 auto; position: relative; } .page-block.-narrow { padding-top: var(--span); padding-bottom: var(--span); } .page-block.-promo > .container { display: flex; align-items: center; justify-content: center; min-height: 35vh; } @media screen and (max-width: 960px) { .page-block { --block-padding: calc(var(--span) * 3); } } @media screen and (max-width: 768px) { .page-block { --block-padding: var(--span-large) var(--span); } .page-block h2 { text-align: center; } } .page-block.-blue { --background-color: linear-gradient(var(--color-blue), #043448); --text-color: white; --heading-color: white; } /* Блок с внутренними */ .page-block:not(.-inset) { background: var(--background-color); } .page-block.-inset > .container { background: var(--background-color); color: var(--text-color); padding: var(--span-large); } @media screen and (max-width: 960px) { .page-block.-inset > .container { padding: var(-span-small); } } .page-block.-full { padding:0; } .page-block.-full > .container { max-width: none; } .page-block.-min-height { min-height: 35rem; display: flex; align-items: center; } .page-block.-min-height > .container { flex-grow: 1; } .block-heading { font-size: 3.8rem; text-align: center; color: var(--heading-color); margin:0 auto; margin-bottom: 1em; max-width: calc(var(--page-width) * 0.7); } .block-heading + .subheading { text-align: center; font-size: 2rem; font-weight: bold; max-width: 60rem; margin:0 auto; margin-top: -3rem !important; margin-bottom: 4rem; } @media screen and (max-width: 640px) { .block-heading { font-size: 3.2rem; } } .page-section:not(:last-child) { margin-bottom: 6rem; } @media screen and (max-width: 640px) { .page-section:not(:last-child) { margin-bottom: 4rem; } } /* Message box */ /* ----------------------------------------------------- */ .message-box { --text-color: var(--color-black); color: var(--text-color); --image: url("../img/icon-message-box-info.png"); clear: both; position: relative; display: flex; justify-content: flex-start; align-items: flex-start; padding: 4rem; padding-left: 12rem; text-align: left; margin: 3rem 0; flex-flow: column; min-height: 10rem; border-radius: var(--border-radius); min-height: 100px; border: 2px solid #e0e0e0; background: linear-gradient(45deg, #00000020, white 5rem); } .message-box::after { content:''; display: block; width: 4px; position: absolute; top:-2px; right:-2px; bottom:-2px; background: var(--color-red); } .message-box h2 { text-align: left; font-size: 2.4rem; margin-bottom: 1rem; margin-top: 0; } .message-box a { color: var(--text-color); text-decoration: underline; } .message-box > * { margin-bottom: 0.5rem;} .message-box > *:last-child { margin-bottom: 0; } .message-box::before { content: ''; display: block; position: absolute; top: 50%; bottom: 0; left: 2rem; width: 8rem; height:8rem; transform: translateY(-50%); background: var(--color-red); mask: var(--image) center / contain no-repeat; -webkit-mask: var(--image) center / contain no-repeat; } .message-box.-home { --image:url(../img/icon-mb-home.png); } .message-box.-alert { --image:url(../img/icon-mb-alert.png); } .message-box.-alert::before { background: var(--color-red); } .message-box.-alert::after { background: var(--color-red); } .message-box.-center { text-align: center; align-items: center; } .message-box.-center::before { display:none; } .message-box.-with-image { padding-left: 25rem; } .message-box.-with-image .image { position: absolute; left:0; top:0; height: 100%; width: 20rem; mask: linear-gradient(to left, transparent, white 2rem); } .message-box.-with-image .image img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; } @media screen and (max-width: 768px) { .message-box.-with-image .image { display: none; } .message-box.-with-image::before { display: none; } } @media screen and (max-width: 768px) { .message-box { padding: 2rem !important; } .message-box::before { display: none; } } /* Pagination */ /* ----------------------------------------------------- */ .pagination { display: flex; margin: 4rem 0; text-align: center; align-items: center; justify-content: center; flex-wrap: wrap; } .pagination .title { margin-right: 2rem; } .pagination ul { margin-bottom: 0; margin-left: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; grid-gap: 0.4rem; } .pagination li a { display: inline-flex; margin: 0.5rem 0.5rem; } .pagination li.active a { background: var(--color-red); color: #ffffff; } .pagination li { display: inline-flex; list-style-type: none; margin-bottom: 0; margin-left: 0; align-items: center; } .pagination li:not(.control) a { min-width: 30px; width: 30px; height: 30px; align-items: center; justify-content: center; text-decoration: none; } .pagination li:hover:not(.active):not(.control) a { background: #dddddd; } /* F.A.Q */ /* ----------------------------------------------------- */ #faq { position: relative; z-index: 10; overflow: visible; } #faq.page-block > .container { position: relative; } #faq.page-block > .container::after { content: ''; position: absolute; right:0; bottom: 0; height: 590px; width: 40%; background: url(../img/faq-bg-woman.png) bottom center / contain no-repeat; filter: drop-shadow(0 0 25px #ffffff50); } .faq-container { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); justify-content: center; margin-bottom: 4rem; gap: 2rem; } .faq-container .faq-item a { text-decoration: none; } .faq-container .faq-item { background: linear-gradient(210deg, #eee1, transparent 9rem), white; box-shadow: var(--shadow); align-items: center; padding: 1rem 2rem; gap: 2rem; align-self: stretch; display: flex; align-items: center; justify-content: center; flex-flow: column; position: relative; z-index: 1; } .faq-container .faq-item .answer { display: none; padding: 2rem; background: white; border-radius: 0 0 1rem 1rem; z-index: 10; width: 100%; z-index: 10; position: absolute; top: 100%; box-shadow: 0 5px 5px 0 #0002; } .faq-container .faq-item .question { font-weight: normal; width: 100%; display: block; padding: 2rem 0; padding-right: 7rem; position: relative; font-size: 2rem; color: var(--color-blue); cursor: pointer; z-index: 10; } .faq-container .faq-item .question::after { content:''; width: 2rem; height:1rem; background: var(--color-red); mask:url(../img/ui-arrow-down.svg) center / contain no-repeat; -webkit-mask:url(../img/ui-arrow-down.svg) center / contain no-repeat; position: absolute; right: 0; top: 50%; transform:translateY(-50%); } .faq-container .faq-item .question:hover::after { background: black; } .faq-container .faq-item:hover { box-shadow: 0 0 10px 0 #00000020; } .faq-container .faq-item.-active { background: linear-gradient(to top, #0002, transparent 2rem), white; border-left: 4px solid var(--color-red); position: relative; z-index: 50; } .faq-container .faq-item.-active .question { font-weight: bold; } .faq-container .faq-item.-active .answer { display: block; color: black; border-left: 4px solid var(--color-red); left: -4px; width: calc(100% + 4px);} .faq-container .faq-item.-active .question::after { transform: scaleY(-100%); background: black; } @media screen and (max-width: 960px) { #faq .ui-split-container .side { display: none; } .faq-container {} #faq.page-block > .container::after { display: none; } } @media screen and (max-width: 640px) { .faq-container { display: flex; flex-wrap: wrap; } .faq-container .faq-item { padding: 0rem; width: 100%; } .faq-container .faq-item .question::after { right: 2rem; width: 2rem; } .faq-container .faq-item .question { font-size: inherit; padding: 2rem; padding-right: 5rem; } .faq-container .faq-item .answer { padding: 2rem; } } /* Social icons */ /* ----------------------------------------------------- */ .social-icons { white-space: nowrap; display: flex; align-items: center; gap: 1rem 1.5rem;} .social-icons a { --image:linear-gradient(transparent, transpatent); width: 2.5rem; height: 2.5rem; border-radius: 50%; background: no-repeat center; position: relative; display: inline-flex; justify-content: center; align-items: center; transition: .3s all; gap: 0.5rem; grid-gap: 0.5rem; background: white; border-radius: 50%; } .social-icons a::after { content: ''; display: inline-block; width: 100%; height: 100%; transition: .3s; mask: var(--image) center/contain no-repeat; background: var(--color-red); -webkit-mask: var(--image) center/contain no-repeat; background: black; } .social-icons a.vk { --image: url(../img/icon-vk.png); } .social-icons a.telegram { --image: url(../img/icon-telegram.png); } .social-icons a.whatsapp { --image: url(../img/icon-whatsapp.png); } .social-icons a:hover::after { color: var(--color-red); } /* Tippy */ /* ----------------------------------------------------- */ .button-up {transition: opacity .3s ease;opacity: 0.6;background-color: #e0e0e0; height: 55px;width: 55px;bottom: 30px;right: 30px;cursor: pointer;display: none;position: fixed;z-index: 999; color: #fff;align-items: flex-end;justify-content: center;border-radius: 35px; user-select: none;} .button-up:before { content: "";position: absolute;top: 40%;width: 40%;height: 40%;border-left: 3px solid black;border-top: 3px solid black;transform: rotate(45deg); left: 27%;} .button-up:hover {opacity: 1;} /* Lists */ /* ----------------------------------------------------- */ .article ul li, .ui-list li { margin-bottom: 0.5rem; } .article ul, .ui-list { list-style-type: disc; margin-left: 1rem; list-style-type: disc; list-style-position: inside; margin-bottom: 2rem; overflow: hidden; } .article ol { list-style-type: decimal; margin-left: 1rem; list-style-position: inside; margin-bottom: 2rem; overflow: hidden; } .article ul > li:marker, .ui-list > li::marker { color: black; } .ui-list.-columns { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.5rem 2rem; grid-gap: 0.5rem 2rem; color: var(--color-blue); } .ui-list.-split { columns: 2; column-gap: 4rem;} .ui-list.-split li { } @media screen and (max-width: 768x) { .ui-list.-split { columns: 1} } /* Magnific popup */ /* ----------------------------------------------------- */ .mfp-content { --text-color: black; --heading-color: var(--color-red); color: black; padding: 4rem; overflow:hidden; background: white; display: inline-block; width: auto; max-width: 700px; z-index: 52; } .mfp-bg { z-index: 49;} .mfp-wrap { z-index: 50; } .mfp-content .ui-form { padding: 0; box-shadow: none; } .mfp-content input, .mfp-content select, .mfp-content textarea { background: #f0f0f0; } .mfp-content .form-buttons { display: flex; align-items: center; justify-content: center; margin-bottom: 0; margin-top: 1rem; } .mfp-content .vcap-input > label { font-weight: normal; } .mfp-content .vcap-input > label a:hover { text-decoration: none; } .mfp-content h2 { color: var(--color-red); text-align: center; font-size: 2.5rem; } .mfp-close { border-radius: 50%; width: 3.5rem; height: 3.5rem; right: 1rem; top: 1rem; line-height: 0; } .mfp-close:hover, .mfp-close:focus { color: white; } /* Tippy */ /* ----------------------------------------------------- */ .tippy-content { font-size: 1.5rem; padding: 2rem; } .tippy-box { background: #ffffffe0; color: black; border-radius: 1rem; } .tippy-arrow { color: #ffffffe0;} .articles-list > *:not(:last-child) { margin-bottom: var(--span); } #content { padding-top: var(--span-large); } #content > .container { display: grid; margin:0 auto; grid-template-columns: 325px auto; gap: var(--span); } @media screen and (max-width: 960px) { #content > .container { display: block; } #side { display: none; } } .up-button { transition: opacity .3s ease; opacity: 0.6; height: 55px;width: 55px; bottom: 3rem; right: 3rem; background: #276e92; cursor: pointer; display: none; position: fixed; z-index: 999; align-items: flex-end; justify-content: center; border-radius: 35px; user-select: none; } .up-button:before { content: ""; position: absolute; top: 60%; left: 50%; width: 40%; height: 40%; border-left: 3px solid white; border-top: 3px solid white; transform: translate(-50%,-50%) rotate(45deg); } .up-button:hover {opacity: 1;} .ui-link { font-size: 1.5rem; color: var(--text-color); display: inline-flex; align-items: center; gap: 0.5rem; } .ui-link i { background: var(--color-red); width: 2rem; height: 2rem; content: ''; display: inline-block; text-decoration: none; } /* Teasers */ /* ----------------------------------------------------- */ .ui-teaser-small { display: flex; align-items: center; } .ui-teaser-small .image { width: 5rem; height: 5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ui-teaser-small .image i { width: 4rem; height: 4rem; } .ui-teaser-small .content { margin-left: 1rem; flex-grow: 1; } .ui-teaser-mini { display: flex; align-items: center; border: 3px solid var(--color-red); min-height: 6rem; text-decoration: none; } .ui-teaser-mini.-inline { display: inline-flex; } .ui-teaser-mini .image { width: 6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-red); align-self: stretch; } .ui-teaser-mini .image i { width: 4rem; height: 4rem; background: white; } .ui-teaser-mini .content { padding: 0.5rem 1em; flex-grow: 1; line-height: 1.1; text-transform: uppercase; font-size: 1.5rem; font-weight: bold; } .ui-teaser-mini:hover { background: var(--color-red); color: white; } .ui-download-button { display: flex; justify-content: center; gap: 1rem; flex-direction: column; max-width: 14rem; align-items: center; text-align: center; font-size: 1.5rem; } .ui-download-button .image { display: inline-flex; width: 10rem; height: 10rem; flex-shrink: 0; justify-content: center; align-items: center; background: var(--color-red); border-radius: 50%; transition: .3s; } .ui-download-button .image i { width: 60%; height: 60%; background: white; transition: .3s; } .ui-download-button:hover .image { background: var(--color-light-gray); } .ui-download-button:hover .image i { background: var(--color-red); } .title-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .title-bar > * { flex-shrink:0; } .title-bar h2 { flex-grow: 1; margin: 0; } @media screen and (max-width: 960px) { .title-bar { justify-content: center; } } /* Gallery */ /* ----------------------------------------------------- */ .ui-gallery .gallery-item { display: block; position: relative; border: 3px solid white; box-shadow: 0 0 5px 0 #00000030; } .ui-gallery .gallery-item a { display: block; padding-top: 75%; position: relative; } .ui-gallery .gallery-item img { display: block; position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; } /* Cities selector */ /* ----------------------------------------------------- */ .cities-list { background: #fffe; color: black; position: fixed; left:0; top:0; width: 100%; z-index: 100; display: none; opacity: 0; } .cities-list-inner { position: relative; max-height: 60rem; overflow: auto; padding: var(--span-large); } .cities-list::after { content:''; position: absolute; left:0; bottom:0; right:0; height: 4rem; background: linear-gradient(transparent, #0003); } .cities-list .container { max-width: var(--page-width); margin:0 auto; position: relative; } .cities-list .cities { width: 100%; text-align: left; } .cities-list .city-wrapper { display: inline-block; width: 30rem; } .cities-list .city { display: inline-block; clear: both; padding: 0.5rem 1.5rem; } .cities-list .city:hover { background: #eee; } .cities-list .city.-current { background: var(--color-red); color: white; text-decoration:none; } .cities-list .city.-important { font-weight: bold; } .cities-list a { display: inline-block; padding: 0.5rem; font-size: 1.6rem; } .cities-list a:hover { color: var(--color-yellow); } .cities-list h2 { text-align: left; font-size: 2.6rem; margin-bottom: 3rem; } .cities-list .close-button { position: absolute; right: 0; top: 0; width: 4rem; height: 4rem; background: #eee; } .cities-list .close-button i { width: 2rem; height: 2rem; background: var(--color-red); flex-shrink:0; } .cities-list .close-button:hover { background: var(--color-red); } .cities-list .close-button:hover i { background: white; } /* Header block */ /* ===================================================== */ #header { overflow: visible; position: relative; z-index: 4; } #header > .container { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; justify-content: center; } #header .site-logo { display: inline-block; width: 15rem; background: url(../img/site-logo.svg) center/contain no-repeat; height: 9rem; } #header .middle { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; flex-basis: 50rem; } #header .middle .top { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; flex-basis: 100%; } #header .span { flex-grow: 1; } #header .social-icons { flex-grow: 1; } #header .search { flex-grow: 1; display: flex; } #header .search form { display: flex; align-items: center; flex-basis: 100%; position: relative; } #header .search input { min-height:4rem; height: 4rem; flex-basis: 100%; } #header .search button { min-height:4rem; height: 4rem; width: 4rem; padding: 0; background: transparent; position: absolute; right:0; top: 50%; transform: translate(0,-50%); } #header .search button i { background: var(--color-red); } #header .callback-button { transition: .3s; display: flex; align-items: center; gap: 1rem; margin-left: 1rem; text-decoration: none; color: black; } #header .callback-button i { width: 3rem; height:3rem; background: var(--color-red); position: realtive; } #header .callback-button:hover { text-decoration: underline; } #header .callback-button:hover i { background: black; } #header .phones { display: flex; flex-flow: column; align-items: end; gap: 1rem; line-height: 1; justify-content: center; flex-wrap: wrap !important; } #header .phone { margin-bottom: 0; display: flex; align-items: center; gap: 1rem; white-space: nowrap; } #header .phone a { color: black; text-decoration: none; font-size: 2.4rem; } #header .cities-selector { display: flex; align-items: center; gap: 1rem; flex-grow: 1; justify-content: center; } #header .cities-selector .title { font-weight: bold; } #header .cities-selector .city { text-decoration: underline; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; } #header .cities-selector .city i { width: 1rem; height: 1rem; } #header .cities-selector .city:hover { text-decoration: none; color: var(--color-red); } #header .cities-selector .city:hover i { background: var(--color-red); } #header .contact-buttons { display: flex; align-items: center; gap: 1rem 1.5rem; } #header .contact-buttons a { flex-shrink: 0; } #header .contact-buttons a.whatsapp { width: 3rem; height: 3rem; background: #58bb14; transition: .3; --image: url(../img/icon-whatsapp.png); mask: var(--image) center/contain no-repeat; -webkit-mask: var(--image) center/contain no-repeat; } #header .contact-buttons a.telegram { width: 3rem; height: 3rem; background: #039be5; transition: .3; --image: url(../img/icon-telegram.png); mask: var(--image) center/contain no-repeat; -webkit-mask: var(--image) center/contain no-repeat; } #header .contact-buttons a.whatsapp:hover, #header .contact-buttons a.telegram:hover { background: black; } #header .contacts { flex-basis: 34rem; display: flex; align-items: center; gap: 1rem; line-height: 1.1; } #header .contacts i { background: var(--color-red); width: 3rem; height: 3.5rem; flex-shrink: 0; } #header .email { margin-top: 1rem; } #header .email a { color: black; font-size: 1.5rem; flex-shrink: 0; } #header .navigation { flex-basis: 100%; display: flex; align-items: center; gap: 1rem 2rem; justify-content: center; flex-wrap: wrap; } #header .navigation .main-menu { flex-basis: 76rem; flex-shrink: 0;} @media screen and (max-width: 1280px) { #header .span { display: none; } } @media screen and (max-width: 1024px) { #header .search { flex-basis: 100%; } } @media screen and (max-width: 960px) { #header .search { flex-basis: auto; flex-grow: 0; } #header .phones { flex-flow: row; } #header .contacts { display: none; } #header > .container { gap: 2rem; } #header .site-logo { height: 6rem; } #header .cities-selector { font-size: 90%; } } /* Навигационное меню */ .main-menu { display: inline-flex; justify-content: start; font-size: 1.7rem; position: relative; width: 100%; gap: 1rem; text-transform: uppercase; border-left: 5px solid var(--color-red); } .main-menu > li { position: relative; display: flex; align-items: center; z-index: auto; flex-grow: 1; background: var(--color-white); color: var(--color-black); } .main-menu a { display: inline-flex; transition: all .3s; align-items: center; width: 100%; text-align: center; justify-content: center; color: black; text-decoration: none; font-weight: bold; white-space: nowrap; padding: 0 0.5rem} .main-menu > li > ul { display: none; position: absolute; left:0; top:99%; background: white; font-size: 1.4rem; min-width: 25rem; z-index: 10; border:1px solid #e0e0e0;} .main-menu > li > ul li a { padding: 1rem; display: block; text-align: left; padding-left: 2rem; border-bottom:1px solid #e0e0e0; } .main-menu > li:hover ul { display: block; } .main-menu li.active > a { color: var(--color-red); } .main-menu li:hover > a { background: var(--color-red); color: white; } .main-menu > li > a:hover { background: var(--color-red); color: white; } @media screen and (max-width: 960px) { .main-menu { justify-content: center; border-left: none; display: none; } .main-menu { flex-wrap: wrap; } .main-menu > li { flex-grow: 0; } #header .phones { flex-flow: row; } #header .callback-button { min-width: none; } } #cities-list.page-block { background: url(../img/cities-list-bg.jpg) center/cover no-repeat; } #cities-list { font-size: 1.5rem; } #cities-list a { display: inline-block; padding: 0.5rem; } #cities-list .ui-container { gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } #cities-list a:hover { background: var(--color-red); color: white; } /* Slider block */ /* ===================================================== */ #slider { background: #eaeaea; overflow: hidden; } #slider > .container { padding-top: 34%; position: relative; } #slider .ui-slider { position: absolute; left:0; top: 0; width: 100%; height: 100%; margin: 0 !important} #slider .slick-track::before, #slider .slick-track::after { display: none; } #slider .slick-track { width: 100% !important; } #slider .slick-slide { display: block; width: 100%; height: 100%; } #slider .slide { width: 100% !important; height: 100%; position: relative; margin:0 !important; padding: 0 var(--block-padding); } #slider .slide > .image { display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; z-index:0; } #slider .slide > .image img { width: 100%; height: 100%; object-fit: cover; } #slider .slide .content-wrapper { margin:0 auto; max-width: var(--page-width); height: 100%; display: flex; align-items: center; position: relative; z-index: 1; } #slider .slide .content-wrapper > .content { max-width: 60%; font-size: 1.6rem; } #slider .slide .content h1 { color: var(--color-red); font-size: 3.5rem; font-weight: bold; margin-bottom: 1rem; } #slider .slide .content h1 span { display: block; } #slider .slide .content-top { display: flex; gap: 2rem 3rem; align-items: center; } #slider .slide .spark img { height: 26rem; width: auto; } #slider.-narrow > .container { padding-top: 30%; } #slider .teasers-container { display: grid; gap: 2rem; grid-template-rows: auto; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); margin-top: 3rem; } #slider .ui-teaser-small { font-weight:bold; ; text-transform: uppercase; font-size: 1.4rem; border-right:1px solid #d0d0d0; } #slider .ui-teaser-small .image i { background: var(--color-red); } #slider .ui-teaser-small .content { padding-right: 2rem; } @media screen and (max-width: 1024px) { #slider > .container { padding-top: 50%; } #slider.-narrow > .container { padding-top: 30%; } #slider.-narrow .slide > .image { filter: none;} #slider .slide .content-wrapper > .content { max-width: none; } #slider .slide > .image { filter: blur(10px); } } @media screen and (max-width: 960px) { #slider .teasers-container { display: none; } } @media screen and (max-width: 640px) { #slider { display: none; } } /* About block */ /* ===================================================== */ #about { } #about > .container { display: flex; gap: 4rem; align-items: center; } #about > .container > * { flex-grow: 1; } #about .content { flex-basis: 60%; min-width: 60rem;} #about .search { padding-left: 4rem; border-left: 1px solid #e0e0e0; } #about .search input, #about .search select { margin-bottom: 1rem; width: 100%; } @media screen and (max-width: 1024px) { #about > .container { flex-wrap: wrap; } #about .search { padding:0; border:0; } #about .content { min-width: auto; } } /* Catalog categories block */ /* ===================================================== */ #catalog-categories { } #catalog-categories .ui-container { } @media screen and (max-width: 640px) {} .ui-category-card { position: relative; background: #f7f7f7} .ui-category-card .top { background: linear-gradient(210deg, #f4f4f4, transparent 30rem), #f1f1f1; display: flex; align-items: center; transition: .3s; } .ui-category-card .top .image { background: var(--color-red); width: 10rem; height: 11.5rem; flex-shrink: 0; transition: .3s; position: relative; } .ui-category-card .top .image i { background: white; position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; transform: translate(-50%,-50%); } .ui-category-card .top .text { padding: 2rem; display: flex; flex-flow: column; align-items: start; } .ui-category-card .top h2 { font-size: 2rem; color: black; font-weight: bold; margin-bottom: 1rem; } .ui-category-card .content { padding: 2rem; font-size: 1.5rem; } .ui-category-card .content ul { columns: 2; } .ui-category-card .content ul li { flex-basis: 15rem; flex-grow: 1; clear: both; display: inline-block; } .ui-category-card .content a { color: black; text-decoration: none; padding-left: 1rem; position: relative; display: flex; word-break: break-word;} .ui-category-card .content a:hover { color: var(--color-red); } .ui-category-card .content a::before { content: '-'; display: inline-block; position: absolute; left:0; top: 0em; height: 1em;} .ui-category-card .not-found { font-style: italic; opacity: 0.5; } .ui-category-card:hover .top .image { background: var(--color-blue); } .ui-category-card:hover .top { background: linear-gradient(210deg, #187e9a50, transparent 6rem), #f1f1f1; } .ui-category-card:hover .ui-link i { background: var(--color-blue); } /* Catalog categories block */ /* ===================================================== */ #catalog-categories-compact { background: url(../img/bg-catalog-categories-compact.jpg) center/cover no-repeat, #f4f4f4; } .ui-category-compact-card { position: relative; background: white; display: flex; align-items: } .ui-category-compact-card .teaser { background: var(--color-red); width: 18rem; min-height: 18rem; padding: 1rem; display: flex; align-items: center; justify-content: center; color: white; flex-flow: column; transition: .3s; flex-shrink: 0; } .ui-category-compact-card .teaser .image i { background: white; width: 8rem; height: 8rem; margin-bottom: 1rem; } .ui-category-compact-card .teaser .title { font-weight: bold; text-align: center; line-height: 1.1;} .ui-category-compact-card .content {display: flex; align-items: center; justify-content: center; padding: 2rem; font-size: 1.5rem; } .ui-category-compact-card .content a { color: black; text-decoration: none; padding-left: 1rem; position: relative; display: flex; word-break: break-word;} .ui-category-compact-card .content a::before { content: '-'; display: inline-block; position: absolute; left:0; top: 0em; height: 1em;} .ui-category-compact-card .content a:hover { color: var(--color-red); text-decoration: underline; } .ui-category-compact-card .not-found { font-style: italic; opacity: 0.5; } .ui-category-compact-card:hover .teaser { background: var(--color-blue); } .slider-card { position: relative; border: 3px solid white; box-shadow: 0 0 10px 0 #0002; } .slider-card .image { padding-top: 75%; position: relative; width: 100%; display: block; } .slider-card .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } @media screen and (max-width: 640px) { .-slider-card { max-width: 80vw; } } /* Catalog popular block (index page) */ /* ===================================================== */ #catalog-popular { } /* Delivery block (product page) */ /* ===================================================== */ #delivery { position: relative; } #delivery > .container { display: flex; align-items: center; gap: 4rem; } #delivery .side-image { flex-shrink: 0; flex-basis: 50%; height: 100%; min-height: 40rem; background: url(../img/bg-delivery.webp) center/contain no-repeat; } #delivery .delivery-form { margin-top: 4rem; } #delivery .delivery-form h2 { font-size: 2.6rem; margin-bottom: 1rem; } #delivery .delivery-form .content { display: flex; align-items: center; } #delivery .delivery-form input { border: 3px solid var(--color-red); background: url(../img/icon-phone-red.png) 1rem center/auto 4rem no-repeat, white; padding-left: 5rem; flex-grow: 1; } #delivery .delivery-form button { flex-shrink: 0; } @media screen and (max-width: 1024px) { #delivery .side-image { display: none; } } /* Similar products block */ /* ===================================================== */ #product-similar { } /* Delivery block (index page) */ /* ===================================================== */ #delivery-index { background: calc(100%) center/auto 80% no-repeat; position: relative; } #delivery-index > .container { display: flex; min-height: 60vh; align-items: center; } #delivery-index .content { width: 40%; } #delivery-index h2 { margin-bottom: 2rem; } #delivery-index .side-image { width: 50%; height: 100%; position: absolute; right:0; top: 50%; transform: translateY(-50%); background: left center/contain no-repeat; } #delivery-index .teasers { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; max-width: 35rem;} #delivery-index .ui-teaser-mini { flex-grow: 1; } @media screen and (max-width: 1024px) { #delivery-index .content { width: auto; } #delivery-index .side-image { display:none; } #delivery-index .teasers { max-width: none; } #delivery-index .ui-teaser-mini { flex-basis: 30rem; } } @media screen and (max-width: 960px) { #delivery-index { background-position: center center;} } /* Article block */ /* ===================================================== */ #article { padding-bottom: 4rem; padding-top: 2rem; overflow: visible; } /* Article block (products) */ /* ===================================================== */ #article.product { } #article.product .sub-title { margin-top: -2rem; font-style: italic; margin-bottom: 2rem; font-size: 2rem; } .ui-product-card { background: #f3f3f3; text-decoration: none; color: black; border-bottom: 2px solid #e0e0e0; transition: .3s; display: flex; flex-direction: column; } .ui-product-card .image { padding-top: 65%; position: relative; background: linear-gradient(to top, white, transparent 5rem); } .ui-product-card .image img { position: absolute; left:50%; top:50%; width: 80%; height: 80%; object-fit: contain; transform: translate(-50%,-50%); } .ui-product-card .content { padding: 2rem; text-align: center; transition: .3s; flex-grow: 1; } .ui-product-card .title { min-height:3em;} .ui-product-card .title .top-title { text-transform: uppercase; color: var(--color-red); font-weight: bold; display: flex; align-items: center; justify-content: center; transition: .3s; } .ui-product-card .title .sub-title { font-style: italic; opacity: 0.7; } .ui-product-card .description { font-size: 1.4rem; opacity: 0.8; } .ui-product-card .price { font-size: 2.6rem; margin-top: 2rem; display: inline-flex; align-items: center; gap: 1rem; justify-content: center; color: #444; } .ui-product-card .nds { opacity: 0.7; font-size: 2rem; } .ui-product-card .price strong { color: black; } .ui-product-card .price.-empty { font-size: 2.2rem; font-style: italic; padding: 0.5rem 2rem; background: white; border-bottom: 4px solid #ccc; } .ui-product-card .price.-available { font-size: 2.2rem; padding: 0.5rem 2rem; background: white; border-bottom: 4px solid #58bb14; margin-bottom: 1rem; } .ui-product-card:hover { text-decoration: none; } .ui-product-card:hover .title { text-decoration: underline; text-decoration-color: var(--color-red); } .ui-product-card:hover .price strong { color: var(--color-red); } .ui-product-card:hover .content { background: linear-gradient(45deg, #ed2a1840, transparent 10rem); } /* Info block */ /* ===================================================== */ #info .banner { flex-basis: 100%; margin-top: 4rem; } #info .banner img { width: 100%; } #info > .container { display: flex; flex-wrap: wrap; gap: 4rem; flex-wrap: wrap; } #info > .container > * { flex-grow: 1; } #info .news { flex-basis: 40rem; } #info .news .news-container { display: flex; flex-wrap: wrap; gap: 2rem; } #info .news .ui-news-card { flex-grow: 1; } #info .articles { flex-basis: 50rem; } #info .articles .articles-container { display: flex; flex-wrap: wrap; gap: 2rem;} #info .articles .ui-article-card { flex-grow: 1; } @media screen and (max-width: 640px) { #info .news .ui-news-card .image { display: none; } #info .articles .ui-article-card { display: block; } #info .articles .ui-article-card .image { display: none; } } .ui-news-card { background: #f6f6f6; padding: 4rem; font-size: 1.5rem; } .ui-news-card .date { display: inline-block; background: var(--color-red); padding: 0.5rem; font-weight: bold; margin-bottom: 1rem; font-size: 1.4rem; color: white;} .ui-news-card .title { color: var(--color-red); font-weight: bold; text-transform: uppercase; margin-bottom: 1rem; } .ui-news-card .ui-link { margin-top: 1rem;} .ui-article-card { background: #f6f6f6; display: grid; grid-template-columns: 20rem auto; font-size: 1.5rem; } .ui-article-card .image { width: 20rem; flex-shrink:0; height: 100%; background: #666; position: relative; } .ui-article-card .image img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; } .ui-article-card .content { padding: 4rem; } .ui-article-card .title { color: var(--color-red); font-weight: bold; text-transform: uppercase; margin-bottom: 1rem; } .ui-article-card .ui-link { margin-top: 1rem;} /* Contacts block */ /* ===================================================== */ #contacts {} #contacts .bottom-container { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; } #contacts .bottom-container > * { flex-basis: 30rem; flex-grow: 1; } #contacts .top-container { margin-bottom: 4rem; } #contacts .contacts-form { background: #f3f3f3; padding: 4rem; border-left: 5px solid var(--color-red); } #contacts .contacts-form { --input-color: white; } #contacts .content { padding: 4rem; border-right: 1px solid #e0e0e0; background: linear-gradient(210deg, #ed2a1820, transparent 10rem); align-self: stretch; display: flex; align-items: center; flex-wrap: wrap; align-content: center; } #contacts .content > * { flex-basis: 100%; } #contacts .content .top { opacity: 0.8; margin-bottom: 2rem; font-style: italic; } @media screen and (max-width: 1024px) { #contacts > .container { flex-wrap: wrap; gap: 0; flex-flow: wrap-reverse;} #contacts .content { border: 1px solid #e0e0e0; border-bottom: none; } #contacts > .container > * { flex-basis: 100%; } } /* Map block */ /* ===================================================== */ #map { background: #f0f0f0; position: relative; } #map > .container { display: flex; align-items: center; min-height: 50vh; } #map .map { position: absolute; left:0; top:0; width: 100%; height: 100%; } #map .map *[class*="ground-pane"] { filter: grayscale(100%); } #map .content { background: white; padding: 8rem 4rem; display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; } #map .contacts > *:not(:last-child) { margin-bottom: 2rem;} #map .contacts > * { position: relative; display: flex; padding-left: 5rem; align-items: center; } #map .contacts > * i { width: 3rem; height:3rem; position: absolute; left: 0; top: 50%; transform:translateY(-50%); background: var(--color-red); } #map .contacts .phone { margin-bottom: 1rem; } #map .contacts .phone a { color: black; font-size: 4rem; text-decoration: none; } #map .contacts p { margin-bottom: 0; } #map .contacts .comment { font-size: 1.5rem; font-style: italic; opacity: 0.8; } @media screen and (max-width: 960px) { #map .content { flex-basis: 100%; justify-content: center; padding: 2rem; } #map .contacts > * { justify-content: center; padding-left:0; text-align: center; } #map .contacts > * i { position: relative; top: 0; left:0; transform: none; margin-right: 1rem; } #map .contacts .phone a { font-size: 2rem; } } @media screen and (max-width: 640px) { #map .address i { display: none; } } /* Footer block */ /* ===================================================== */ #footer { } #footer .footer-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem 4rem; margin-top: 4rem; justify-content: center; } #footer .bottom-menu { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; flex-grow: 1; flex-basis: 40rem; } #footer .bottom-menu li { flex-grow: 1; } #footer .bottom-menu a { display: block; text-transform: uppercase; font-weight: bold; color: black; text-decoration: none; font-size: 1.6rem; } #footer .bottom-menu li.active a { color: var(--color-red); } #footer .spark img { height: 78px; width: auto; } #footer .search-bar { flex-basis: 30rem; } #footer .site-logo { flex-basis: 12rem; flex-shrink: 0; height: 8rem; background: url(../img/site-logo.svg) center/contain no-repeat; } #footer .copyrights { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; font-size: 1.4rem; font-style: italic; flex-basis: 30rem;} #footer .copyrights > * { flex-basis: 100%; } #footer .copyrights p { margin-bottom: 0; } #footer .copyrights .social-icons { margin-top: 1rem; } #footer .social-icons a.whatsapp::after { background: #58bb14; } #footer .social-icons a.telegram::after { background: #039be5; } #footer .social-icons a:hover::after { background: #ccc !important; } #footer .developer { font-size: 1.35rem; font-style: italic; display: block; color: #aaa; text-decoration: none; filter: saturate(100%); transition: .3s; } #footer .developer .logo { display: block; width: 20rem; height: 6rem; background: url(../img/logo-vebas.webp) center/contain no-repeat;} #footer .developer:hover { filter: saturate(0); } #footer .nav { display: flex; align-items: center; gap: 2rem 5rem; justify-content: center; flex-wrap: wrap; } @media screen and (max-width: 1024px) { #footer > .container { justify-content: center; } #footer .bottom-menu { flex-grow: 1; } #footer .nav { flex-basis: auto; } #footer .bottom-menu li { flex-grow: 0; } #footer .bottom-menu a { padding: 0.25rem; } #footer .copyrights { align-items: center; gap: 0.5rem; flex-basis: 40rem; flex-grow: 0; } #footer .copyrights > * { flex-basis: auto; } } @media screen and (max-width: 768px) { #footer .copyrights { text-align: center; justify-content: center; } } .search-bar { display: block; position: relative; } .search-bar input[type="text"] { width: 100%; border-left: 4px solid var(--color-red); min-height: 4rem; } .search-bar button { position: absolute; right: 0; top:0; height: 100%; width: 5rem; --button-color: transparent; --button-text-color: #ccc; } .catalog { margin-bottom: 4rem; } .catalog-filter { display: flex; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 4rem; } .catalog-filter .options { display: flex; align-items: center; gap: 1rem; flex-basis: 100%; font-size: 90%; flex-wrap: wrap; justify-content: start;} .catalog-filter .options .spacer { flex-grow: 1;} .catalog-filter .sort { display: flex; align-items: center; gap: 1rem; justify-content: center; } .catalog-filter .sort .clear { white-space: nowrap; } .catalog-filter select { min-height: 2rem; padding: 1rem 2rem; flex-basis: 38rem; } .catalog-filter .view { display: flex; justify-content: center; gap: 1rem 1rem; border-left: 1px solid #e0e0e0; padding-left: 1rem;} .catalog-filter .view i { background: #e0e0e0; } .catalog-filter .view a { display: inline-flex; align-items: center; gap: 1rem; height: 4rem; text-decoration: none; padding: 1rem 2rem;} .catalog-filter .view a.-active { background: #f0f0f0; } .catalog-filter .view a.-active i { background: var(--color-red); } .catalog-filter .view span { display: inline-block; } .catalog-filter .letters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex-grow: 1; } .catalog-filter .letters a { display: inline-block; padding: 0.5rem; transition: .3s; } .catalog-filter .letters a:hover { background: #f0f0f0;} .catalog-filter .letters a.-active { background: var(--color-red); color: white; text-decoration: none; } .catalog-filter .search form { display: flex; align-items: center; } .catalog-filter .search input { min-height:4rem; height: 4rem; } .catalog-filter .search button { min-height:4rem; height: 4rem; } @media screen and (max-width: 960px) { .catalog-filter .sort { flex-grow: 1; } .catalog-filter .view { flex-grow: 1; } .catalog-filter .options .spacer { display: none; } .catalog-filter .view span { display: none; } } .catalog.ui-container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .catalog-content { margin-bottom: 4rem; } .section-image-side { display: flex; align-items: center; gap: 4rem; } .section-image-side .image { width: 30rem; flex-shrink: 0; } .product .product-top { display: flex; gap: 4rem; align-items: top; margin-bottom: 2rem;} .product .product-image { background: #e0e0e0; width: 35rem; height: 35rem; position: relative; flex-shrink: 0; } .product .product-image img { position: absolute; left: 0; top:0; width: 100%; height: 100%; object-fit: contain; } .product .product-top-description { margin-bottom: 4rem; font-style: italic; opacity: 0.8; } .product .is-available { padding: 0.5rem 2rem; background: #eee; border-bottom: 4px solid #58bb14; margin-bottom: 1rem; } .product .product-files { margin-top: 2rem; } .product .product-files .title { font-weight: bold; } .product .product-files .files { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; } .product .product-files .file { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; background: #f5f5f5; padding: 1rem; transition: .3s; font-size: 1.6rem; border-left: 4px solid var(--color-red); } .product .product-files .file i { width: 2rem; height: 2rem; background: var(--color-red); transition: .3s; } .product .product-files .file:hover { color: white; background: var(--color-red); } .product .product-files .file:hover i { background: white; } .product .product-properties { flex-basis: 40rem; flex-grow: 1; } .product .product-properties .property { margin-bottom: 0.25em; } .product .product-properties .property .value > *:not(:last-child)::after { content: ','; color: black; } .product .product-document { text-align: center; background: white; box-shadow: 0 0 5px 0 #0003; padding: 2rem; } .product .product-document h3 { font-size: 1.7rem; } .product .product-description h2 { font-size: 2.5rem; text-transform: uppercase; margin-bottom: 4rem; border-left: 4px solid var(--color-red); padding-left: 1rem;} .product .product-usage .usage-section { display: flex; background: linear-gradient(45deg, #ed2a1850, transparent 10rem), #f5f5f5; } .product .product-usage .usage-section .text { padding:2rem; font-size: 95%; display: flex; align-items: center;} .product .product-usage .usage-section .side { flex-basis: 40%; flex-shrink: 0; border-right: 2px solid var(--color-red); } .product .product-usage .usage-section .image { position: relative; padding-top: 100%; } .product .product-usage .usage-section .image img { position: absolute; left: 0; top:0; width: 100%; height: 100%; object-fit: cover; } .product .product-usage-button { position: relative; top: 1rem; margin:0 auto; left: 50%; transform: translate(-50%, 0); padding: 1rem; height: 4rem;} .product .product-usage.-adaptive { -webkit-mask: linear-gradient(to top, #0000, #000f 5rem); mask: linear-gradient(to top, #0000, #000f 5rem); } .product .product-usage.-adaptive.-open { mask: none; -webkit-mask: none; } .product .product-usage-button.-open { top: -4rem; } @media screen and (max-width: 1024px) { .product .product-usage .usage-section .side {flex-basis: 20rem;} } @media screen and (max-width: 640px) { .product .product-usage .usage-section .side { display: none; } .product .product-usage { gap: 1rem; } .product .product-usage .usage-section { border-left: 2px solid var(--color-red); } } @media screen and (min-width: 640px) { .product .product-usage-button { display: none; } .product .product-usage.-adaptive { mask: none; -webkit-mask: none; } } .product .product-variants { margin: 4rem 0; } .product .product-variants > *:not(:last-child) { margin-bottom: 2rem; } .product .product-price { background: white; box-shadow: 0 0 5px 0 #0003; padding: 2rem; display: flex; flex-flow: column; gap: 1rem; align-items: center; justify-content: center; } .product .product-price .price { font-size: 2rem; display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; justify-content: center; } .product .product-price .price strong { font-size: 3.5rem; color: var(--color-red); line-height: 1; } .product .product-price .buttons { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .product .product-price .buttons > * { flex-basis: 10rem; flex-grow: 1; cursor: pointer; text-decoration: none; } .product .product-price .red { color: var(--color-red); } .product .product-top-base { display: flex; gap: 4rem; flex-wrap: wrap; align-items: center; margin-bottom: 2rem; } .product .product-top-base .product-top-main { flex-basis: 60%; flex-grow: 1; } .product .product-top-base .product-price { flex-shrink:0; white-space: nowrap; } .product .product-top-base .price-title { display: flex; align-items: center; } .product .product-top-base .price-title strong { font-size: 2rem; color: black; } .product .product-top-base .nds { font-size: 1.8rem; margin-top: -1rem; margin-bottom: 2rem; padding: 0.5rem 1rem; background: #f0f0f0;} .product .product-top-base .product-properties { flex-grow: 1; } .product .product-side-panel { flex-basis: 35rem; gap: 2rem; display: flex; align-items: center; flex-wrap: wrap; flex-grow: 1; } .product .product-top-base .product-price { flex-basis: 35rem; flex-grow: 1; } .product .product-top-base .product-document { flex-basis: 35rem; flex-grow: 1; } .product .product-specs { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 4rem; } .product .product-specs-tab { background: #f0f0f0; padding: 3rem 4rem; flex-basis: 40rem; flex-grow: 1; font-size: 1.6rem; line-height: 1.1; } .product .product-specs-tab .tab-title { color: var(--color-red); font-size: 2.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; } .product .product-specs-tab .tab-title i { width: 4rem; height: 4rem; background: var(--color-red); margin-right: 1rem; } .product .product-specs-tab .spec { margin-bottom: 0.7rem; } .product .product-specs-tab .spec .title { font-weight: bold; display: inline-block;} .product .product-specs-tab .spec .value { display: inline-block; } .product .product-specs-tab .spec > * { flex-basis: 50%; } @media screen and (min-width: 1024px) { } @media screen and (min-width: 960px) { .product .product-price .buttons > * { flex-basis: 30rem; } } @media screen and (max-width: 960px) { .product .product-top { flex-wrap: wrap; } .product .product-price .buttons { flex-wrap: wrap; } } @media screen and (max-width: 640px) { .product .product-top-base .product-price { flex-grow: 1; flex-shrink: initial; } } .product .link-buttons { margin-top: 6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); align-items: center; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: -2rem; padding-right: 1.5rem; } .product .link-buttons .ui-button { --button-color: #f0f0f0; --button-text-color: var(--color-red); min-height: 7rem; border-left: 4px solid var(--color-red); font-size: 1.6rem; justify-content: start; padding: 0; text-transform: uppercase; font-weight: bold; white-space: normal; display: flex; } .product .link-buttons .ui-button .icon { background: #fff7; display: flex; width: 6rem; align-items: center; justify-content: center; align-self: stretch; transition: .3s; flex-shrink: 0; } .product .link-buttons .ui-button .text { white-space: normal; flex-basis: 10rem; flex-grow: 1; padding: 1rem; } .product .link-buttons .ui-button i { width: 4rem; height: 4rem; transition: .3s; } .product .link-buttons .ui-button:hover .icon { background: var(--color-red); } .product .link-buttons .ui-button:hover i { background: white; } @media screen and (max-width: 640px) { .product .link-buttons .ui-button { height: auto; } .product .link-buttons { display: flex; flex-wrap: wrap; } } .ui-product-variant-card { border: 1px solid #e0e0e0; display: flex; align-items: center; align-items: stretch; transition: .3s; flex-wrap: wrap; } .ui-product-variant-card .image { height: 100%; min-height: 11rem; flex-shrink:0; flex-basis: 13rem; background: #f4f4f4; border-right: 5px solid var(--color-red); position: relative; } .ui-product-variant-card .image img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: contain;} .ui-product-variant-card .properties { padding: 1rem 2rem; border-right: 1px solid #e0e0e0; flex-basis:30rem; display: flex; align-items: center; flex-wrap: wrap; align-content: center; flex-grow: 1; } .ui-product-variant-card .properties .title { font-weight: bold; } .ui-product-variant-card .properties > * { flex-basis: 100%; } .ui-product-variant-card .price { font-size: 1.6rem; padding: 1rem 2rem; display: flex; align-items: center; justify-content: center; flex-grow: 1; gap: 1rem; } .ui-product-variant-card .price .value { font-size: 4rem; font-weight: normal; } .ui-product-variant-card .buttons { padding: 1rem 2rem; display: flex; align-items: center; justify-content: right; gap: 1rem; } .ui-product-variant-card:hover { border-color: var(--color-red); background: linear-gradient(210deg, #ed2a1850, transparent 10rem), white} .ui-product-variant-card:hover .properties { background: linear-gradient(45deg, #ed2a1850, transparent 10rem);} @media screen and (max-width: 960px) { .ui-product-variant-card .image { flex-grow: 1; } .ui-product-variant-card .buttons { border-top:1px solid #e0e0e0; flex-grow: 1; justify-content: center; flex-wrap: wrap; } } @media screen and (max-width: 640px) { .ui-product-variant-card .properties { text-align: center; } .ui-product-variant-card .buttons button { flex-grow: 1; } } .ui-product-table-card { border: 1px solid #e0e0e0; display: flex; align-items: center; align-items: stretch; transition: .3s; font-size: 1.5rem;} .ui-product-table-card:not(:last-child) { border-bottom: none; } .ui-product-table-card .image { flex-shrink:0; flex-basis: 10rem; background: #f4f4f4; position: relative; aling-self: stretch; } .ui-product-table-card .title { font-weight: bold; margin-bottom: 0.5rem;} .ui-product-table-card .image img { position: absolute; left:50%; top:50%; width: 80%; height: 80%; object-fit: contain; transform: translate(-50%,-50%); } .ui-product-table-card .properties { padding: 1rem 2rem; border-right: 1px solid #e0e0e0; display: flex; align-items: center; flex-wrap: wrap; align-content: center; flex-grow: 1; flex-basis: 70%;} .ui-product-table-card .properties > * { flex-basis: 100%; } .ui-product-table-card .info { display: flex; flex-wrap: wrap; align-items: center; padding: 1rem; gap: 1rem; flex-basis: 46rem;} .ui-product-table-card .price { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-basis:20rem; flex-shrink: 0; width: 20rem;} .ui-product-table-card .price .value { font-size: 3rem; font-weight: normal; } .ui-product-table-card .buttons { display: flex; align-items: center; justify-content: right; gap: 1rem; flex-shrink: 0; } @media screen and (max-width: 960px) { .ui-product-table-card .properties { padding-bottom: 0; border: none;} .ui-product-table-card { flex-wrap: wrap; text-align: center; } .ui-product-table-card .info { flex-basis: 30%; } .ui-product-table-card .info > * { flex-grow: 1; justify-content: center; } .ui-product-table-card .image { display: none;} .ui-product-table-card { justify-content: center; } } .catalog-quick-menu { margin-bottom: 4rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .catalog-quick-menu > * { display: inline-flex; height: 4rem; background: #f0f0f0; align-items: center; font-size: 1.5rem; } .catalog-quick-menu .title { background: var(--color-red); color: white; font-weight: bold; padding:0 1rem; cursor: pointer; } .catalog-quick-menu .title i { background: white; margin-left: 1rem; } .catalog-quick-menu { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; } .catalog-quick-menu a { display: block; display: flex; align-items: center; text-decoration: none; color: black;} .catalog-quick-menu a:hover { background: var(--color-red); color: white; } .catalog-quick-menu .item { display: inline-flex; padding-left: 1rem; padding-right: 1rem; border-left: 4px solid var(--color-red); } .catalog-quick-menu .item.-has-icon { padding-left: 0; } .catalog-quick-menu .item .icon { background: var(--color-red); margin-right: 1rem; height: 100%; width: 4rem; display: inline-flex; align-items: center; justify-content: center; } .catalog-quick-menu .item .icon i { background: white; width: 3rem; height: 3rem; } .catalog-quick-menu .close-button { padding: 0 1rem; color: #444; display: flex; align-items: center; display: none; cursor: pointer; } .catalog-quick-menu .close-button i { background: #666; width: 1.5rem; margin-right: 0.5rem; } .catalog-quick-menu .close-button:hover i { background: #fff; } .catalog-quick-menu.-open .close-button { display: inline-flex; } .catalog-categories-menu { margin-bottom: 2rem; } .catalog-categories-menu .categories { display: flex; gap: 0.5rem; flex-wrap: wrap; } .catalog-categories-menu .category-button { white-space: nowrap; background: #f5f5f5; padding: 0.5rem 1rem; position: relative; z-index:1; } .catalog-categories-menu .category-button.-has-children { padding-right: 3rem; } .catalog-categories-menu .category-button .down { content: ''; background: #e0e0e0; width: 2rem; display: inline-flex; position: absolute; right: 0; top:0; height: 100%; cursor: pointer; align-items: center; justify-content: center; } .catalog-categories-menu .category-button .down i { width: 1.2rem; background: var(--color-red); } .catalog-categories-menu .category-button > a { text-decoration: none; font-size: 90%; color: inherit; } .catalog-categories-menu .category-children { display: none; font-size: 1.5rem; border: 2px solid #e0e0e0; position: absolute; top: 95%; z-index: 5; left:0; background: #fff; min-width: 100%; box-shadow: 0 0 5px 0 #0003; max-height: 30rem; overflow-y: auto; scrollbar-width: thin; scroll-padding:0; } .catalog-categories-menu .category-children a { display: block; padding: 0.5rem 1rem; padding-right: 2rem; transition: .3s; white-space: nowrap; text-decoration: none; } .catalog-categories-menu .category-children a.-active { background: #f0f0f0; } .catalog-categories-menu .category-children a:hover { background: var(--color-red); color: white; } .catalog-categories-menu .category-button.-active { border-left: 8px solid var(--color-red); } .catalog-categories-menu .category-button.-open { z-index: 3; background: var(--color-red); color: white; } .catalog-categories-menu .category-button.-open .down { background: var(--color-red); } .catalog-categories-menu .category-button.-open .down i { background: white; --image: url(../img/icon-arrow-up.svg); } #catalog-categories-compact .catalog-quick-menu .title { background: var(--color-red); color: white; font-weight: bold; padding:0 1rem; cursor: pointer; } #catalog-categories-compact .catalog-quick-menu { margin-top:2rem;} #catalog-categories-compact .catalog-quick-menu > * { background: white; } #catalog-categories-compact .catalog-quick-menu a:hover { background: var(--color-red); color: white; } .ui-article-list-card { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; } .ui-article-list-card .image { flex-basis: 30rem; position: relative; } .ui-article-list-card .content { flex-basis: 30rem; flex-grow: 1; } .ui-article-list-card .text { margin-bottom: 1rem; } .ui-article-list-card h2 { font-size: 2rem; } .ui-article-list-card h2 a { text-decoration: none; } .content-block:not(:last-child) { margin-bottom: 2rem; } .page-id-214 .search { margin-bottom: 2rem; } .page-id-214 .search form { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .page-id-214 .search form > * { flex-grow: 1; } .page-id-214 .search form input { } .page-id-817 .ui-flex-container > * { flex-grow: 0; } .page-id-817 h3 { margin-top: 2rem; margin-bottom: 2rem; } .page-id-817 .ui-group h2 { font-size: 2rem;} .page-id-817 .ui-group .comment { font-style: italic; opacity:0.6; } .page-id-817 .ui-group img { max-height: 80px; } .ui-group { padding: 4rem; border: 1px solid #c0c0c0; margin-bottom: 2rem; } .ui-links { margin-bottom: 2rem; } .ui-links a { display: inline-block; padding: 1rem; background: #f0f0f0; transition: .3s;} .ui-links a:hover { background: var(--color-red); color: white; } .ui-teasers-container { display: flex; gap: 4rem 2rem; margin: 2rem 0; flex-wrap: wrap;} .ui-teasers-container > * { flex-basis: 32%; } @media screen and (max-width: 1024px) { .ui-teasers-container > * { flex-basis: 45%; } } @media screen and (max-width: 960px) { .ui-teasers-container { gap: 2rem; } .ui-teasers-container > * { flex-basis: 100%; } } .ui-round-teaser { display: flex; align-items: center; gap: 1em;} .ui-round-teaser .content { font-size: 1.5rem;} .ui-round-teaser .image { background: var(--color-red); width: 10rem; height: 10rem; border-radius: 50%; flex-shrink: 0; position: relative; } .ui-round-teaser .image i { background: white; position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; transform: translate(-50%,-50%); } .ui-round-teaser h3, .ui-round-teaser .title { font-weight: bold; font-size: 2rem; line-height: 1.2; margin-bottom: 1rem;} @media screen and (max-width: 960px) { .ui-round-teaser .image { width: 8rem; height: 8rem; } } .page-id-2 .top-heading { font-size: 3rem; margin-bottom: 2rem; line-height: 1.2;} .advantages-services { margin-top: 6rem; padding-top: 6rem; border-top: 1px solid #c0c0c0; } .text-italics { font-style: italic; opacity: 0.8;} .ui-text-card { padding: 4rem; border: 1px solid #c0c0c0; font-size: 1.5rem; } .ui-text-card h3 { font-size: 2rem; text-align: center; } .ui-flex-container { display: flex; gap: 4rem; align-items: start; } .ui-flex-container > * { flex-basis: 45%; flex-grow: 1; } @media screen and (max-width: 960px) { .ui-flex-container > * { flex-basis: 100%; } } .download-dpog { border-bottom: 3px solid #444; } .download-dpog .buttons { display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; } .download-dpog .buttons a { flex-basis: 20rem; } .ui-price-card { border: 1px solid #a0a0a0; } .ui-price-card .top { padding: 2rem; border-bottom: 1px solid #a0a0a0;} .ui-price-card .top .title { font-weight: bold; font-size: 2rem; height: 4rem;} .ui-price-card .top .price { display: flex; align-items: center; height: 7rem; gap: 1rem; } .ui-price-card .top .price strong { font-size: 3.4rem; } .ui-price-card .top .ui-button { height: 5rem; padding: 1rem; 2rem} .ui-price-card .content { font-size: 1.5rem; } .ui-price-card .content li { padding: 1.5rem 2rem; } .ui-price-card .content li:not(:last-child) { border-bottom: 1px solid #c0c0c0; } .ui-price-card.-active { background: var(--color-blue); color: white; } .ui-price-card.-active .top { border-color: white; } .ui-price-card.-active .content li:not(:last-child) { border-color: white; } .ui-price-card .top .ui-button { background: black; } .ui-service-card { font-size: 1.5rem; border: 1px solid #c0c0c0; display: flex; align-items: center; } .ui-service-card .image { flex-basis: 20rem; flex-shrink: 0; align-self: stretch; } .ui-service-card .image img { width: 100%; height: 100%; object-fit: cover;} .ui-service-card .title { font-size: 2.2rem; font-weight: bold; margin-bottom: 0.5em; } .ui-service-card .title a { text-decoration: none; color: black; } .ui-service-card .content { padding: 2rem; } .ui-service-card .content .ui-button { margin-top: 1rem; } .sec-class-card { display: flex; align-items: center; border: 1px solid #c0c0c0; padding: 2rem; gap: 1rem; } .sec-class-card img { flex-shrink:0; width: 70px; height: 70px; } #categories { background: #f0f0f0; } #categories .categories-list { display: flex; flex-wrap: wrap; gap: 2rem;} #categories .categories-list > * { flex-basis: 30rem; flex-grow: 1;} #categories .category .title { font-size: 1.8rem; font-weight: bold; color: black; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; transition: .3s; } #categories .category .title i { background: var(--color-red); width: 1.5rem; height: 1.5rem;} #categories .category .title:hover { color: var(--color-red); } #categories .category ul { font-size: 90%; margin-top: 1rem; display: block; } #categories .category ul li { display: inline-block; white-space: nowrap; margin-bottom: 0.25rem;} #categories .category ul li:not(:last-child)::after { content:','; } #categories .category { background: #fff8; padding: 2rem; border-bottom: 3px solid var(--color-red); } #categories h3 { margin-bottom: 0.5rem; font-style: normal; } #categories .metals-list { gap: 1rem; margin-top: 2rem; margin-bottom: 3rem; justify-content: center; } #categories .metal-teaser { background: white; display: flex; min-height: 4rem; align-items: center; text-decoration: none; color: black; transition: .3s; } #categories .metal-teaser .image { flex-basis: 4rem; flex-shrink:0; width: 4rem; height:100%; background: var(--color-red); position: relative; } #categories .metal-teaser .image img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: contain; object-} #categories .metal-teaser .content { padding: 1rem; height: 100%; } #categories .metal-teaser:hover { background: var(--color-red); color: white; } #categories .metal-teaser:hover .content { background: linear-gradient(to right, #fff4, transparent 1rem); } @media screen and (max-width: 768px) { #categories .metal-teaser { min-height: 3rem; padding: 0; flex-grow: 0; } #categories .metal-teaser .image { width: 3rem; height: 100%; flex-basis: 3rem; } #categories .categories-list ul { display: none; } #categories .categories-list > * { flex-basis: auto; } #categories .categories-list { gap: 1rem; justify-content: center; } #categories .category { padding: 1rem; flex-grow: 0; } #categories .category .title { font-size: 1.6rem; } } .warehouse-container { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 4rem 2rem; } .warehouse-card { } .warehouse-card .content { flex-grow: 1; background: #f5f5f5; padding: 2rem; border-left: 5px solid var(--color-red); min-height: 10rem; } .warehouse-card h3 { font-size: 1.6rem; margin-bottom: 0.5rem; } .warehouse-card .image { flex-basis: 40rem; display: block; } .warehouse-card .image img { max-height: 25rem; width: 100%; object-fit: cover; border: 1px solid #c0c0c0; border-top: none; } .button-card { display: flex; align-items: center; border: 1px solid #c0c0c0; text-decoration: none;} .button-card .title { font-size: 2rem; margin-bottom: 1rem; line-height: 1.1; text-decoration: none; } .button-card .image { background: var(--color-red); flex-basis: 12rem; align-self: stretch; min-height: 12rem; flex-shrink: 0; display: block; position: relative; } .button-card .image i { background: white; position: absolute; width: 70%; height: 70%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .button-card .content { padding: 2rem; } .page-template-5 #delivery .teasers { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 4rem; max-width: 60rem;} .page-template-5 #delivery .teasers .ui-teaser-mini { flex-grow: 1; flex-basis: 40%; text-decoration: none; transition: .3s; } .page-template-5 #delivery .teasers .ui-teaser-mini:hover { background: var(--color-red); color: white; } .page-template-5 #product-popular .block-heading { text-align: left; max-width: none; } #about-catalog > .container { display: flex; gap: 2rem; flex-wrap: wrap; } #about-catalog > .container > * { flex-basis: 40rem; flex-grow: 1; } #about-catalog .articles .title-bar { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; } #about-catalog .articles .title-bar h2 { flex-grow: 1; flex-basis: 45rem;} #about-catalog .about { padding: 4rem; background: url(../img/bg-about-catalog.webp) center/cover no-repeat; display: flex; justify-content: center; flex-direction: column; } #about-catalog .about .ui-button { margin-top: 1rem; } #about-catalog .ui-article-card { display: block; background: white; border: 3px solid #eee;} #about-catalog .ui-article-card:not(:last-child) { margin-bottom: 1rem; } @media screen and (max-width: 768px) { #about-catalog .about { text-align: center; } #about-catalog .articles .title-bar { } } .catalog-teaser { background: #f3f3f3; display: flex; align-items: center; border-bottom: 3px solid var(--color-red); color: black; text-decoration: none;} .catalog-teaser > * { align-self: stretch; } .catalog-teaser .image { width:8rem; height: 100%; min-height: 8rem; flex-shrink:0; background: var(--color-red); position: relative; } .catalog-teaser .image i { width: 100%; height: 100%; mask-size: 5rem 5rem; -webkit-mask-size: 5rem 5rem; background: white; } .catalog-teaser .content { padding: 1rem 2rem; transition: .3s; display: flex; align-items: center; flex-grow: 1; line-height: 1.2;} .catalog-teaser:hover .content { background: var(--color-red); color: white; } @media screen and (max-width: 768px) { #catalog-teasers .ui-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .catalog-teaser { font-size: 1.5rem; } .catalog-teaser .image { width: 6rem; min-height: 6rem; } .catalog-teaser .image i { mask-size: 4rem 4rem; -webkit-mask-size: 4rem 4rem; } } #preloader { display: none; } body > .container { opacity: 1; } .seo-tags-top { margin: 1rem 0 ; } .seo-tags-top .slick-slider .slick-arrow::after { width: 1rem; height: 2rem; } .seo-tags-top .slick-slider .slick-next { right: -4rem; } .seo-tags-top .slick-slider .slick-prev { left: -4rem; } .seo-tags-top .ui-slider { margin-left: 0; margin-right: 0; } .seo-tags-top .tag { display: inline-block; padding: 0.5rem 1rem; background: #f0f0f0; font-size: 1.5rem; text-decoration: none; } .category-banner { margin-bottom: 2rem; } .seo-tags-content { margin-bottom: 2rem; } .seo-tags-content .tags-container { display: flex; gap: 1rem; flex-wrap: wrap; } .seo-tags-content .tag a { text-decoration: none; font-size: 1.5rem; } .seo-tags-content .tag { display: inline-flex; background: #f0f0f0; padding: 1rem; text-decoration: none; border-left: 4px solid var(--color-red); } .openable-text { background: #f7f7f7; margin-bottom: 2rem; } .openable-text .intro { padding: 2rem 4rem; display: flex; align-items: center; border-left: 8px solid var(--color-red); cursor: pointer; padding-right: 7rem; position: relative; } .openable-text .intro::after { content: ''; display: block; width: 2rem; height: 2rem; position: absolute; right: 2rem; top: 50%; transform: translate(0, -50%); background: black; --mask: url(../img/icon-arrow-down.svg) center / contain no-repeat; mask: var(--mask); -webkit-mask: var(--mask); transition: .3s; transform-origin: center; } .openable-text .intro .title { font-size: 1.8rem; font-weight: bold; } .openable-text .details { max-height: 0; overflow: hidden; padding: 0 4rem; transition:.3s; } .openable-text.-open .details { max-height: 1000px; padding: 4rem; border-left: 2px solid var(--color-red); } .openable-text.-open .intro { background: linear-gradient(to top, #ed2a1830, transparent 4rem), #f7f7f7; } .openable-text.-open .intro::after { transform: translate(0, -50%) rotate(180deg); } .more-text { margin-bottom: 2rem; } .more-text .more-button { height: 4rem !important; } .more-text .details { max-height: 0; overflow: hidden; padding: 0 4rem; transition:.5s; border: 3px solid transparent; margin-top: -3px; } .more-text.-open .details { max-height: 3000px; padding: 4rem; border-color: var(--input-border-color); } .more-text.-open .more-button { border-color: var(--color-red) !important; } #-article .ui-slider { display: flex; align-items: center} #-article .ui-slider.-loaded .slider-card { max-height: none; max-width: none; } .columns-container { columns: 2; column-gap: 2rem; column-width: 27rem; } @media screen and (max-width: 768px) { .columns-container { columns: 1; } } .em-text { clear: both; position: relative; padding: 4rem; margin: 3rem 0; min-height: 10rem; border: 2px solid #e0e0e0; border-left: 5px solid var(--color-red); background: #fafafa; } .page-id-1194 h1 { margin-bottom: 0.5em; } .page-id-1194 .box-content { width: 100%; align-items: center; } .page-id-1194 .message-box.-download::before { display: none; } .page-id-1194 .message-box.-download { padding-left: 4rem; } .page-id-1194 .message-box.-download .columns-container { max-width: 60rem; }