#forms_block { opacity: 0; -webkit-transition: opacity ease-in-out .3s; -moz-transition: opacity ease-in-out .3s; -o-transition: opacity ease-in-out .3s; transition: opacity ease-in-out .3s; display: none;} #forms_block.active { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.6); opacity: 1; z-index: 150; display: block;} #forms_block.active .close_back{position: absolute; width: 100%; height: 100%; z-index: 151; cursor: pointer;} #forms_block.active .close_btn{width: .27rem; height: .27rem; position: absolute; top: 0; right: -.6rem; cursor: pointer; z-index: 2; background-size: 100%; background-repeat: no-repeat; background-image: url('../../../media/site/i_close.png');} #forms_block.active .forms_centr { /*overflow: hidden;*/ position: relative; margin: 0 auto; margin-top: 1.8rem; width: 4.3rem; padding: .96rem .3rem .3rem; height: auto; background-color: #fff; z-index: 152; } #forms_block h3{ font-size: .24rem; width: 100%; height: .66rem; line-height: .66rem; text-align: center; text-transform: uppercase; color: #fff; position: absolute; z-index: 151; left: 0; top: 0; background-color: #ef4423; letter-spacing: .01rem;} .forms_block div{width: 100%; height: auto; margin-bottom: .2rem;} .forms_block form{font-size: 0;} .forms_block label{ display: block; margin: 0 0 .05rem; color: #ef4423; font-weight: 400; font-size: .18rem;} .forms_block input, .forms_block textarea{ padding: 0 .22rem; font-size: .18rem; font-weight: 400; color: #ef4423; display: block; width: 100%; background-color: #fff; border: 1px solid #c4c4c4; border-radius: 0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .forms_block input:focus, #forms_block textarea:focus{ border: 1px solid #ef4423; } .forms_block input{ height: .5rem; line-height: .5rem; } .forms_block input[type=submit]{height: .5rem; line-height: .5rem; width: 2.26rem; text-align: center; font-size: .18rem; text-transform: uppercase; font-weight: 700; color: #fff; display: block; border:0; background-color: #ef4423; padding: 0; text-decoration: none; border-radius: .03rem; margin: 0 auto .05rem; letter-spacing: .01rem; cursor: pointer;} .forms_block input[type=submit]:hover{opacity: .9;} .forms_block textarea{ height: 1.1rem; line-height: 1.3; padding-top: .08rem;} .forms_block .police, .forms_block .police a{font-size: .18rem; font-weight: 400; color: #ef4423; } .forms_block .police{margin-bottom: .2rem;} .forms_block .police a{text-decoration: underline;} .forms_block div span{ font-size: 11px; position: relative; z-index: 1; display: block; position: relative; z-index: 1; color: #fff; } .forms_block div span.error{display: inline-block; background-color: #fdcaca; color: #7f6060; border-color: #ffc3c3; margin-top: .1rem; padding: .06rem; border-radius: .04rem;} .forms_block .addon { margin-top: 10px; display: block; width: 100%; font-size: .15rem; color: #da195a;} h3.g_info{font-size: 20px;}html { min-height: 100%; overflow-y: scroll; font-size: 100px; position: relative;} body { min-height:100%; max-width: 100%; padding: 0px; overflow: hidden; line-height: 1.3; -webkit-font-smoothing:antialiased; position: relative;background-color: #fff;} input, button, textarea{ -webkit-appearance: none !important; box-shadow: none; -webkit-box-shadow: none;-webkit-border-radius: 0px;-moz-border-radius: 0px; border-radius: 0px;} input:focus, button:focus, textarea:focus{outline: none;} header, main, footer{ position: relative; width: 100%; } * { margin: 0px; padding: 0px; -webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; font-weight: 400; font-family: 'Manrope', sans-serif; color: #fff; background-repeat: no-repeat;} /* font-weight: 400; font-family: 'Play', sans-serif; color: #fff; background-repeat: no-repeat;}*/ *, *:before, *:after { font-size: inherit; font-weight: inherit; box-sizing: border-box;} a, a:hover{text-decoration: none; cursor: pointer; color: #fff;} a:hover{color: #ef4423; text-decoration: none;} table{border-spacing: 0; border:0;} img{border:0;} a img{width: 100%; display: block;} h1, h2, h3, h4, h5, h6, p, li, a, span{margin-bottom: 0; font-weight: 400;line-height: 1.3; } p, dl, ol, ul, figure{margin-bottom: 0;} h2{ /*font-size: .36rem; */ font-size: 20px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: .02rem;} textarea:focus, input:focus, *:focus{ outline: none; } /*Статьи и описания товара*/ #tinymce{padding: 5px 10px 5px 5px;} /*text_main*/ #text_block *, #tinymce *{font-family: "Manrope"; font-weight: 400; line-height: 1.3; font-style: normal; color: #444; /*#text_block *, #tinymce *{font-family: "Play"; font-weight: 400; line-height: 1.3; font-style: normal; color: #444; */ text-align: left; font-size: .2rem; z-index: 1;} #text_block{position: relative; padding: 0 0 .3rem 0; overflow: hidden; } #text_block h1, #tinymce h1, #text_block h2, #tinymce h2, #text_block h3, #tinymce h3{font-family: "Manrope"; font-weight: 400; font-style: normal; text-align: left;} /*#text_block h1, #tinymce h1, #text_block h2, #tinymce h2, #text_block h3, #tinymce h3{font-family: "Play"; font-weight: 400; font-style: normal; text-align: left;}*/ #text_block h1{font-family: "Manrope"; font-size: .36rem; margin-bottom: .3rem; width: 100%; padding: 0 0 .5em 0; border-bottom: 1px solid #f0f0f0;} /*#text_block h1{font-family: "Play"; font-size: .36rem; margin-bottom: .3rem; width: 100%; padding: 0 0 .5em 0; border-bottom: 1px solid #f0f0f0;}*/ #text_block h2, #tinymce h2{ font-size: .3rem; padding-bottom: .15rem; text-transform: unset;} #text_block h3, #tinymce h3{ font-size: .25rem; padding-bottom: .1rem; } #text_block p, #tinymce p, #text_block div, #tinymce div, #text_block span, #tinymce span { padding: 0 0 .1rem; clear: both;} #text_block .small_text, #tinymce .small_text{font-size: .16rem; padding-bottom: .05rem; margin-bottom: 0; } #text_block a, #tinymce a{color: #ef4423; font-size: .2rem; font-family: 'Manrope'; font-style: normal; font-weight: 400; /*#text_block a, #tinymce a{color: #ef4423; font-size: .2rem; font-family: 'Play'; font-style: normal; font-weight: 400;*/ line-height: 1; text-decoration: underline;} #text_block a:hover, #tinymce a:hover, #text_block a:hover strong, #tinymce a:hover strong{text-decoration: none; color: #444; } #text_block strong, #tinymce strong{ font-weight: 700; } #text_block a strong, #tinymce a strong{font-weight: 700; color: #ef4423;} #text_block ol, #tinymce ol, #text_block ul, #tinymce ul{margin-bottom: 0; list-style: none;} #text_block ul li, #tinymce ul li{ list-style: none; display: inline-block; width: 100%; margin-bottom: .1rem; padding-left: .25rem; position: relative;} #text_block ul li:before, #tinymce ul li:before{content: ""; width: .1rem; height: .1rem; position: absolute; background-color: #ef4423; border-radius: 50%; top: .08rem; left: 0; } #text_block ol li, #tinymce ol li{ list-style-type: decimal; padding-left: .1rem; margin: 0 0 .1rem .2rem; position: relative; } #tinymce table, #text_block table{ width: 100%; border-collapse: collapse; margin-bottom: .2rem;} #tinymce table td, #text_block table td{border:1px solid #ef4423; padding: .05rem;} #tinymce table.no_border td, #text_block table.no_border td, #tinymce img.no_border, #text_block img.no_border{border:0;} #tinymce table.line td, #text_block table.line td{ position: relative; border-collapse:collapse; vertical-align: top; color: #26160f; width: auto; border:0;} #tinymce table.line tr:first-child td, #text_block table.line tr:first-child td{ background: #fff; border-bottom: 2px solid #ef4423; font-weight: 400;} #tinymce table.line tr:nth-child(even) td, #text_block table.line tr:nth-child(even) td { background-color: #e0dfdf; } #text_block div.descr{padding-bottom: 0;} #tinymce img, #text_block img{display: inline-block; padding: .15rem .2rem;} #tinymce img.photo_left, #tinymce img.photo_left50, #text_block img.photo_left, #text_block img.photo_left50{ float: left; padding-left: 0;} #tinymce img.photo_right, #tinymce img.photo_right50, #text_block img.photo_right, #text_block img.photo_right50{ float: right; padding-right: 0; } #tinymce img.photo_centr, #text_block img.photo_centr{display: block; margin: 0 auto;} #tinymce img.photo_left50, #tinymce img.photo_right50, #text_block img.photo_left50, #text_block img.photo_right50{ width: 50%;} #tinymce img.photo_width, #text_block img.photo_width{width: 100%; padding-left: 0; padding-right: 0;} /* Errors */ .xdebug-error{width: 5rem;} .xdebug-error *{font-size: .2rem;} /*.xdebug-error{display: none;} */ .error_site{font-size:.2rem; color:#444;background-color:rgb(245, 121, 0);margin-bottom:.2rem;} /*.error_site{display: none;}*/ /* Errors */ #text_block.red{background-color: #ef4423; overflow: visible; padding: 4rem 0 3rem;} #text_block.about .half{display: inline-block; vertical-align: top; width: 50%; position: relative;} #text_block.about .half:first-child:before{background-image: url('../../../media/site/about_white.jpg'); background-size: 100%; background-repeat: no-repeat; content:"";width: 9.5rem; height: 10rem; position: absolute; left: -2.43rem; top: -3.4rem; z-index: -1;} #text_block.about .half:last-child{padding-left: 1.5rem;} #text_block.about .half:last-child *{color: #fff !important;} #text_block.about .half ul{ padding-top: .1rem;} #text_block.about .half ul li:before, #tinymce ul li:before{display: none;} #text_block.about .half ul li{ line-height: .45rem; height: .45rem; margin-bottom: .07rem;background-size: .53rem; background-repeat: no-repeat; padding-left: .6rem; } #text_block.about .half ul li span{line-height: 1.1; vertical-align: middle;padding-bottom: 0; display: inline-block;} #text_block.about .half ul li:nth-child(1){background-image: url('../../../media/site/about_icon1.jpg');} #text_block.about .half ul li:nth-child(2){background-image: url('../../../media/site/about_icon2.jpg');} #text_block.about .half ul li:nth-child(3){background-image: url('../../../media/site/about_icon3.jpg');} #text_block.about .half ul li:nth-child(4){background-image: url('../../../media/site/about_icon4.jpg');} #text_block.about .half ul li:nth-child(5){background-image: url('../../../media/site/about_icon5.jpg');} #text_block.about .half ul li:nth-child(6){background-image: url('../../../media/site/about_icon6.jpg');} #text_block.about .half ul li:nth-child(7){background-image: url('../../../media/site/about_icon7.jpg');} #text_block.about .half ul li:nth-child(8){background-image: url('../../../media/site/about_icon8.jpg');} .center{width: 11.7rem; margin: 0 auto; position: relative; height: 100%; font-size: 0;} .btn, a.btn{ height: .5rem; line-height: .48rem; width: 2.9rem; text-align: center; font-size: .18rem; text-transform: uppercase; font-weight: 700; display: block; border:.01rem solid #ef4423; background-color: #ef4423; padding: 0; text-decoration: none; border-radius: 0;} .btn:hover, a.btn:not([href]):not([tabindex]):hover{ color: #ef4423; background-color: #fff; text-decoration: none;} .btn:focus{box-shadow:unset;} header{ background-color: #0e0d15; text-align: left; background-image: url('../../../media/site/top_back.png'); background-size: cover; background-repeat: no-repeat; background-position: top center;} header.index{height: 100vh;} header.usluga{height: 4.05rem;} #mobile_btn{display: none;} #sl_top_box{width: 100%; height: 100%;overflow: hidden;} #sl_top_box .slider{background-color: #000; width: 100%; height: 100%; position: relative; } .slider figure{display: inline-block; vertical-align: top;position: relative;} .slider .slick-list, .slider .slick-track{height: 100%;} #sl_top_box figure{width: 100%; height: 100%; } #sl_top_box figure .photo{width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top;} #sl_top_box figure .shadow{width: 100%; height: 100%; opacity: 0.8; position: absolute; z-index: 2; background-image: -moz-linear-gradient( 0deg, rgb(22,24,37) 0%, rgba(22,24,37,0) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(22,24,37) 0%, rgba(22,24,37,0) 100%); background-image: -ms-linear-gradient( 0deg, rgb(22,24,37) 0%, rgba(22,24,37,0) 100%); } #sl_top_box #sl_top_arrow_next{width: .41rem; height: .29rem; position: absolute; z-index: 5; top: 65%; right: .75rem; cursor: pointer; background-image: url('../../../media/site/i_arrow_next.png'); background-size: 100%; background-repeat: no-repeat;display: none;} #sl_top_box .slick-dots{width: 1.6rem; height: .17rem; position: absolute; top: 4.2rem; left: .75rem; font-size: 0; z-index: 5;} #sl_top_box .slick-dots li{width: .17rem; height: 100%; display: inline-block; vertical-align: top; margin-right: .15rem;} #sl_top_box .slick-dots li button{width: 100%; height: 100%; display: inline-block; font-size: 0; cursor: pointer; background-color: transparent; border:.03rem solid #fff; border-radius: 50%;} #sl_top_box .slick-dots li.slick-active button, #sl_top_box .slick-dots li button:hover{border:0; background-color: #ef4423;} #head{width: 100%; position: relative; top: 0; left: 0; height: 1.48rem; background-color:rgba(0,0,0,.4); z-index: 11;} .index #head{position: absolute;} #head .logo{position: absolute; left: .75rem; line-height: 1.3rem; font-size: .3rem; font-weight: 700; max-width: 5.6rem; height: 100%; height: 1.3rem; background-image: url('../../../media/site/logo3.svg'); background-size: 100%; width: 1.3rem; top: 0; bottom: 0; margin: auto; z-index: 30;} #head .right{width: 9rem; height: .46rem; position: absolute; top: .24rem; right: .75rem; z-index: 1;} /*#head .right .phone{position: absolute; right: 0; top: 0; font-size: .24rem; font-weight: 700; color: #fff; padding-left: .65rem; height: 100%;*/ #head .right .phone{position: absolute; right: 3.2rem; top: 0; font-size: .24rem; font-weight: 700; color: #fff; padding-left: .65rem; height: 100%; line-height: .46rem; letter-spacing: .01rem;} #head .right .phone:before{width: .39rem; height: .39rem; content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; background-image: url('../../../media/site/i_phone2.png'); background-size: 100%; background-repeat: no-repeat;} #search_panel{ position: absolute; right: 5.9rem; top: 0; width: 5.18rem; height: 100%; margin-right: .15rem; } /*#search_panel{ position: absolute; right: 2.5rem; top: 0; width: 5.18rem; height: 100%; margin-right: .15rem; }*/ #search_panel form{width: 100%; height: 100%; position: relative;} #search_panel input[type=text]{width: 100%; border: 0 !important; background-color: rgba(255,255,255,.2); !important;padding: 0 .2rem; height: 100%; color: #fff; font-size: .18rem; font-weight: 400; border-radius: .5rem; display: block;} #search_panel input[type=submit]{width: .22rem; height: .22rem; border: 0 !important; background-color:transparent !important;padding: 0; position: absolute; right: .2rem; top: 0; bottom: 0; margin: auto 0; background-image: url('../../../media/site/i_search_2.png');background-size: 100%; background-repeat: no-repeat; } #head nav{height: .44rem; width: 100%; position: absolute; bottom: .24rem; left: 0; z-index: 10; padding: 0 .75rem;} #head nav ul{width: 100%; height: 100%; text-align: right; font-size: 0;} #head nav ul li{list-style: none; height: 100%; width: auto; display: inline-block; margin-left: .4rem; position: relative;} #head nav ul li a{display: inline-block; position: relative; width: auto; height: 100%; line-height: .44rem; font-size: .17rem; color: #fff; font-weight: 700; text-transform: uppercase; text-decoration: none;} #head nav ul li:hover:before, #head nav ul li.active:before{content: ""; position: absolute;left: 0; bottom: 0; height: 3px; width: .6rem; background-color: #ef4423; max-width: 100%;} #head nav ul li ul.second{display: none;} #head nav ul li:hover ul.second{display: block; position: absolute; left: -.24rem; top: .44rem; background-color: rgba(0,0,0,.4); padding: .1rem .3rem .3rem; height: auto; width: auto; min-width: 115%;} #head nav ul li:hover ul.second li{display: block; text-align: left; margin-left: 0; height: .38rem;} #head nav ul li:hover ul.second li a{text-transform: none; white-space: nowrap;line-height: .38rem;} header h1, header .h1{font-size: .82rem; font-weight:700; position: absolute; left: .75rem; top: 2.25rem; line-height: 1; z-index: 10;} header h1 p, header .h1 p{font-size: .38rem; font-weight: 400; padding-top: .12rem;} #icon_top_box{width: 16rem; position: absolute; left: .75rem; bottom: 18%; font-size: 0; z-index: 10;} #icon_top_box .block{width: 4rem; display: inline-block; vertical-align: top;} #icon_top_box .block .img{width: 100%; height: .75rem; background-repeat: no-repeat;} #icon_top_box .block .img.car{background-image: url('../../../media/site/plus_1_2.png'); background-size: .79rem;} #icon_top_box .block .img.hands{background-image: url('../../../media/site/plus_2_2.png'); background-size: .78rem;} #icon_top_box .block .img.cal{background-image: url('../../../media/site/plus_3_2.png'); background-size: .63rem;} #icon_top_box .block .img.list{background-image: url('../../../media/site/plus_4_2.png'); background-size: .53rem;} #icon_top_box .block .text{font-size: .24rem; padding-top: 0.3rem;} #icon_top_box #icon_top_box_arrows{display: none;} #mouse{width: .32rem; height: .53rem; position: absolute; left: 0; right: 0; bottom: .7rem; margin: 0 auto; z-index: 10; background-image: url('../../../media/site/i_mouse.png'); background-size: 100%; background-repeat: no-repeat;} #h_shadow{ position: absolute; left: 0; bottom: 0; z-index: 9; width: 100%; height: .32rem; background-color: rgba(0,0,0,.4);} /*main*/ main{min-height: 5rem; min-height: 60vh;} main.red{background-color: #ef4423;} main.red .center{width: 14rem;} #cat_list_box{ width: 100%; position: relative; height: auto; padding: .55rem 0 .8rem; background-image: url('../../../media/site/cat_back.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center;} #cat_list_box h2{margin-bottom: .4rem;} #cat_list{width: 100%; margin-bottom: .3rem; font-size: 0;} #cat_list .cat_list{display: inline-block; width: 3.7rem; height: 2.65rem; vertical-align: top; margin-right: .3rem; margin-bottom: .33rem; position: relative;} #cat_list .cat_list.xml{height: auto; width: 33%; display: inline-block; text-align: center; margin-right: 0;} #cat_list .cat_list .content{display: flex; flex-direction: unset; justify-content: center; align-items: center; width: 100%; height: 100%;} #cat_list .cat_list:nth-child(3n){margin-right: 0;} #cat_list .cat_list .img{display: block; width: 100%; height: 100%; border-radius: .1rem; position: absolute; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center; } #cat_list .cat_list .name{ min-width: 1.54rem; max-width: 80%; overflow: hidden; z-index: 2; position: relative; background-color: #ef4423; font-size: 0; text-align: center; } #cat_list .cat_list.xml .name{width: 90%; display: inline-block;} #cat_list .cat_list .name span{font-size: .19rem; color: #fff; line-height: 2; letter-spacing: .01rem; font-weight: 700; text-transform: uppercase; padding: 0 .05rem; display: inline-block; text-align: center;} #cat_list .cat_list .name:hover{background-color: #000;} #cat_list .cat_list .name:hover span{color: #fff; } #cat_list_box .center>.btn{margin: 0 auto;} #cat_list_box p.search{ font-size: .18rem; color: #fff; font-weight: 400; } #examples_box h2, #sl_client_box h2{color: #161825;} #examples_box{width: 100%; position: relative; height: auto; padding: .65rem 0 .6rem;} #examples_box h2{margin-bottom: .7rem;} #examples{display: block; width: 100%; height: 6rem; overflow: hidden; font-size: 0; position: relative;} /*#examples .block{width: 16.66%; height: 3rem; display: inline-block;vertical-align: top; overflow: hidden; position: relative;} #examples .block .img{width: 101%; height: 100%; position: absolute; left: -1%; top: 0; right: 0; bottom: 0; background-size: cover;background-repeat: no-repeat; background-position: center; transition: transform 1s;} #examples .block .img:hover{ transform: scale(1.2); }*/ #examples figure{width: 16.66%; height: 6rem; display: inline-block;vertical-align: top; overflow: hidden; position: relative;} #examples .block{height: 50%; display: block; width: 100%;overflow: hidden;position: relative;} #examples .block .img{width: 101%; height: 100%; position: absolute; left: -1%; top: 0; right: 0; bottom: 0; background-size: cover;background-repeat: no-repeat; background-position: center; transition: transform 1s;} #examples .block .img:hover{ transform: scale(1.2); } #examples_box .arrow{position: absolute; width: 100%; height: .7rem; top: 0; bottom: 0; left: 0; right: 0; margin: auto 0;} #examples_box .arrow a{ width: .7rem; position: absolute; top: 0; background-color: #ef4423; height: 100%; z-index: 1; cursor: pointer; opacity: .8;} #examples_box .arrow a:hover{opacity: 1;} #examples_box .arrow a.prev{left: 0;} #examples_box .arrow a.next{right: 0; } #examples_box .arrow a:before{content: ""; width: .56rem; height: .39rem; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-repeat: no-repeat; background-size: 100%; } #examples_box .arrow a.prev:before{background-image: url('../../../media/site/i_arrow_w_prev.png');} #examples_box .arrow a.next:before{background-image: url('../../../media/site/i_arrow_w_next.png');} #sl_client_box{width: 100%; position: relative; height: auto; padding: 0 0 .9rem;} #sl_client_box h2{margin-bottom: .4rem;} #sl_client_box .center{padding: 0 1.05rem;} #sl_client_box .slider{ width: 100%; position: relative; overflow: hidden; z-index: 5;} #sl_client_box .slider_2_rows{ height: 2rem; } #sl_client_box .slider_1_rows{ height: 1rem; } #sl_client_box .slide{width: 2.7rem; height: .85rem; padding: 0 .2rem; position: relative;} #sl_client_box .slide .img{width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;} #sl_client_box .slide a.btn{display: none;} #sl_client_box .slide:hover a.btn{display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; width: 90%; font-size: .15rem; height: .34rem; line-height: .32rem; margin: auto;} #sl_client_box .slide:hover a.btn:hover{color: #fff; background-color: #ef4423;} #sl_client_box .slick-slide{display: inline-block;vertical-align: top; outline: none;} #sl_client_box #sl_client_arrows{width: 100%; height: .29rem; position: absolute; top: 0; bottom: 0; margin: auto 0; left: 0;} #sl_client_box #sl_client_arrows .arrow{width: .41rem; height: 100%; position: absolute; z-index: 5; cursor: pointer; background-size: 100%; background-repeat: no-repeat; z-index: 6;} #sl_client_box #sl_client_arrows .arrow.next{background-image: url('../../../media/site/i_arrow_red_next.png'); right: 0;} #sl_client_box #sl_client_arrows .arrow.prev{background-image: url('../../../media/site/i_arrow_red_prev.png'); left: 0;} #in_promo{width: 100%; height: 3.5rem; background-image: url('../../../media/site/in_back.png'); background-size: cover; background-repeat: no-repeat; background-position: center top;} #in_promo .text{padding-left: 4.5rem; padding-top: .45rem; text-align: left;} #in_promo .text h2{font-size: .42rem; font-weight: 400; text-align: left; text-transform: none;} #in_promo .text h2 p{font-size: .32rem; font-weight: 400; text-align: left;} #in_promo .text .btn{margin-top: 1.2rem; width: 2.5rem;} footer{width: 100%; position: relative; height: 6.95rem; background-color: #ef4423; font-size: 0; } #map{ width: 56%; position: absolute; left: 0; top: 0; height: 6.2rem; z-index: 1; color: #444;} #map *{color: #444;} #map_info{height: 6.2rem; width: 40%; float: right; position: relative; padding: .3rem .3rem 0 .65rem;} #map_info h2{text-align: left; font-size: .48rem; font-weight: 400; text-transform: none;line-height: 1;padding-bottom: .2rem;} #map_info a{text-align: left; font-size: .3rem; text-decoration: none; display: block; line-height: 1;padding-bottom: .1rem;} #map_info a:hover{color: #fff;} #map_info .address.first{padding-top: .15rem;} #map_info .address{text-align: left; font-weight: 400; font-size: .18rem; text-decoration: none;line-height: 1.25; padding-bottom: .2rem;} #map_info .legal{text-align: left; font-weight: 400; font-size: .18rem; text-decoration: none;line-height: 1.25; padding-top: .15rem;} #map_info .legal *, #map_info .address *{ text-align: left; font-weight: 400; font-size: .18rem; text-decoration: none;line-height: 1.25; padding-bottom: 0; margin-bottom: 0;} #map .ymaps-2-1-68-svg-icon{width: .34rem !important; height: .46rem !important; left: -.43rem !important; top: -.9rem !important; background-image: url('../../../media/site/i_baloon_2.png'); background-size:100%;} #bottom_line{width: 100%; height: .75rem; position: absolute; left: 0; bottom: 0; background-color: #161825;} #bottom_line .center{line-height: .75rem;} #add_info{font-size: .18rem; font-weight: 400; vertical-align: middle; display: inline-block;} #in_info{text-align: right; height: 100%;line-height: .75rem;} #in_info p{ font-size: .18rem; font-weight: 400; height: 100%; line-height: .75rem; display: inline-block; padding-right: .2rem; vertical-align: middle;} #in_info a{ width: 2.07rem; height: .36rem; display: inline-block; vertical-align: middle; background-image: url('../../../media/site/in.png'); background-size:100%; background-repeat: no-repeat;} .half{width: 50%; display: inline-block; vertical-align: top; height: 100%;} #f_menu a{font-size: .18rem; text-decoration: underline;} #popup_flag{width: 5rem; height: .64rem; background-color: #ef4423; border-radius: 0 .35rem 0 0; position: absolute; bottom: 0; left: 0; cursor: pointer;} #popup_flag p{font-size: .3rem; height: 100%; line-height: .6rem; font-weight: 400; padding-left: .28rem;} /* catalog ################################################################################################################*/ .breadcrumbs{width: 100%; position: relative; padding: .26rem 0;} .breadcrumbs li{display: inline-block; vertical-align: top; list-style: none;} .breadcrumbs li a, .breadcrumbs li span{font-size: .18rem; color: #8c8c8c; text-decoration: none; position: relative;} .breadcrumbs li a:hover{color: #ef4423; } .breadcrumbs span.arrow{font-size: .18rem; color: #8c8c8c; padding: 0 .1rem 0 .08rem; } #cat_list_box h1{font-size: .36rem; color: #fff; font-weight: 700; text-transform: uppercase; padding-bottom: .4rem;} /* CLIENT ################################################################################################################*/ #client_text{width: 100%; position: relative; padding: .3rem 0 0; font-size: 0;} #client_text .main_photo{width: 8.5rem; height: 8.3rem; display: inline-block; vertical-align: top; background-size: cover;background-position: center; background-repeat: no-repeat;} #client_text .text{width: 7rem; padding: 0 0 0 .3rem; display: inline-block; vertical-align: top;} #client_text .text .logo{width: 2.8rem; height: .9rem; margin-bottom: .55rem; background-size: contain;background-position: top left; background-repeat: no-repeat;} #client_text h1, #client_text .ash1{font-size: .3rem; font-weight: 700; color: #161825; text-align: left; text-transform: uppercase; letter-spacing: .03rem; padding-bottom: .22rem;} #client_text p{font-size: .18rem; font-weight: 400; color: #161825; text-align: justify; padding-bottom: .15rem; line-height: 1.35;} #client_text .btn_block{width: 100%; display: block; height: .5rem; position: relative; margin-top: .45rem;} #client_text .btn_block .btn{height: .5rem; line-height: .48rem; width: 2.9rem;} #client_text .btn_block .mail{width: 3rem; text-decoration: underline; position: absolute; top: 0; bottom: 0; margin: auto 0; padding-left: .4rem; color: #eb2e6e; font-size: .18rem; text-transform: uppercase; font-weight: 700; left: 3.5rem; line-height: .5rem; letter-spacing: .015rem;} #client_text .btn_block .mail:before{width: .29rem; height: .22rem; content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; background-image: url('../../../media/site/i_mail_2.png'); background-size: 100%; background-repeat: no-repeat;} #cat_photo{ width: 8.5rem; height: auto; display: inline-block; vertical-align: top; position: relative;} #big_photo{ width: 8.5rem; height: 8.3rem; text-align: center; display: inline-block;line-height: 8.3rem; } #big_photo figure{width: 100%; height: 100%; display: inline-block; vertical-align: middle; line-height: 1;} #big_photo figure>img{ max-height: 8.3rem !important; top: 0; bottom: 0; margin: auto 0 !important; position: absolute !important; left: 0;} #mini_photo{ width: calc( 100% + .3rem); overflow: hidden; height: auto; max-height: 1.6rem; position: relative; padding: 0; margin: .3rem 0 0 -.15rem; position: absolute; right: calc(-100% - .45rem); bottom: 0;} #mini_photo .mini_photo{display: inline-block; width: 20%; height: 1.45rem; padding: 0 .15rem; vertical-align: top; cursor: pointer; position: relative;} #mini_photo .mini_photo:before{content: ""; width: calc(100% - .3rem); height: 100%; border: .05rem solid transparent; position: absolute; box-sizing: border-box; z-index: 1; left: .15rem;} #mini_photo .mini_photo.mz-thumb-selected:before { border-color: #ef4423;} #mini_photo .mini_photo img{vertical-align: middle; max-width: 100%; max-height: 100%;} #mini_photo .mz-thumb-selected img{filter: grayscale(100%);-webkit-filter:grayscale(100%);} #mini_photo .arrow{position: absolute; width: 100%; height: .7rem; top: 0; bottom: 0; left: 0; right: 0; margin: auto 0;} #mini_photo .arrow a{ width: .7rem; position: absolute; top: 0; background-color: #ef4423; height: 100%; z-index: 1; cursor: pointer; opacity: .8;} #mini_photo .arrow a:hover{opacity: 1;} #mini_photo .arrow a.prev{left: .15rem;} #mini_photo .arrow a.next{right: .15rem; } #mini_photo .arrow a:before{content: ""; width: .56rem; height: .39rem; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-repeat: no-repeat; background-size: 100%; } #mini_photo .arrow a.prev:before{background-image: url('../../../media/site/i_arrow_w_prev.png');} #mini_photo .arrow a.next:before{background-image: url('../../../media/site/i_arrow_w_next.png');} #portf_box{width: 100%; position: relative; height: auto; padding: .55rem 0 .35rem;} #portf_box h2{margin-bottom: .4rem; color: #161825; letter-spacing: .03rem;} #portf_box .center{padding: 0 .45rem;} #portf_box .slider{ width: 100%; height: 3rem; position: relative; overflow: hidden; z-index: 5; text-align: center;} #portf_box .block{width: 33.33%; height: 3rem; padding: 0 .2rem; position: relative; display: inline-block;} #portf_box .block .img{width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;} #portf_box .slick-slide{display: inline-block;vertical-align: top; outline: none;} #portf_box #sl_portf_arrows{width: 100%; height: .29rem; position: absolute; top: 0; bottom: 0; margin: auto 0; left: 0;} #portf_box #sl_portf_arrows .arrow{width: .41rem; height: 100%; position: absolute; z-index: 5; cursor: pointer; background-size: 100%; background-repeat: no-repeat; z-index: 6;} #portf_box #sl_portf_arrows .arrow.next{background-image: url('../../../media/site/i_arrow_red_next.png'); right: 0;} #portf_box #sl_portf_arrows .arrow.prev{background-image: url('../../../media/site/i_arrow_red_prev.png'); left: 0;} /* USLUGA ################################################################################################################*/ header .breadcrumbs{padding:1.75rem 0 .3rem 0;} header .breadcrumbs span.arrow, header .breadcrumbs li a, header .breadcrumbs li span{color: #fff;} header .breadcrumbs li a:hover{color: #fff;} header .breadcrumbs li a:hover:before{content: ""; position: absolute;left: 0; bottom: -.03rem; height: 1px; width: 100%; background-color: #ef4423; } #cat_info h1{ font-size: .48rem; font-weight: 400; text-align: left; position: static; top: auto; left: auto; letter-spacing: .01rem;} #cat_info .btn{position: relative; margin-top: .35rem; letter-spacing: .02rem;} #cat_text{width: 100%; position: relative; padding: .3rem 0 .25rem;} #cat_text *{color: #161825;} #cat_text h2{padding-bottom: .33rem;} #cat_text h1{padding-bottom: .33rem; font-size: .50rem; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: .02rem;} #cat_text p{font-size: .18rem; padding-bottom: .23rem; letter-spacing: .01rem; line-height: 1.35; text-align: justify;} #client_text2{width: 100%; position: relative; padding: .3rem 0 0; font-size: 0;} #client_text2 .main_photo{width: 8.5rem; height: 8.3rem; display: inline-block; vertical-align: top; background-size: cover;background-position: center; background-repeat: no-repeat;} #client_text2 .text{width: 7rem; height: 8.3rem; line-height: 8.3rem; padding: 0 0 0 .3rem; display: inline-block; vertical-align: top;} #client_text2 .center_box{vertical-align: middle;width: 100%; height: auto; display: inline-block;} #client_text2 h1{font-size: .3rem; font-weight: 700; color: #161825; text-align: left; text-transform: uppercase; letter-spacing: .03rem; padding-bottom: .22rem;} #client_text2 p{font-size: .18rem; font-weight: 400; color: #161825; text-align: justify; padding-bottom: .15rem; line-height: 1.35;} #client_text2 .btn_block{width: 100%; display: block; height: .5rem; position: relative; margin-top: .45rem;} #client_text2 .btn_block .btn{height: .5rem; line-height: .48rem; width: 2.9rem;} #client_text2 .btn_block .mail{width: 3rem; text-decoration: underline; position: absolute; top: 0; bottom: 0; margin: auto 0; padding-left: .4rem; color: #eb2e6e; font-size: .18rem; text-transform: uppercase; font-weight: 700; left: 3.5rem; line-height: .5rem; letter-spacing: .015rem;} #client_text2 .btn_block .mail:before{width: .29rem; height: .22rem; content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; background-image: url('../../../media/site/i_mail.png'); background-size: 100%; background-repeat: no-repeat;} #cat_text ul, #cat_text ol, #cat_text table { font-size: .18rem; padding-bottom: .23rem; letter-spacing: .01rem; margin-left: 0.33rem; } #cat_text table { width: 100%; border-collapse: collapse; margin: 25px 0; min-width: 400px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } #cat_text table thead tr { background-color: #ef4423; color: #ffffff; text-align: left; } #cat_text table thead tr td { color: #ffffff; } #cat_text table th, #cat_text table td { padding: 12px 15px; } #cat_text table tbody tr { border-bottom: 1px solid #dddddd; } #cat_text table tbody tr:nth-of-type(even) { background-color: #f3f3f3; } #cat_text table tbody tr:last-of-type { border-bottom: 2px solid #ef4423; } #cat_text .btn { margin: auto; color: #fff; } #cat_text .btn:hover { color: #ef4423; } .accordion { box-sizing: border-box; display: flex; /* font-family: Arial, Helvetica, sans-serif;*/ overflow: hidden; width: 100%; } .accordion-select { cursor: pointer; margin: 0; opacity: 0; z-index: 1; } .accordion-title { position: relative; } .accordion-title:not(:nth-last-child(2))::after { border: 1px solid transparent; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; } .accordion-title span { bottom: 0px; box-sizing: border-box; display: block; position: absolute; white-space: nowrap; width: 100%; } .accordion-content { box-sizing: border-box; overflow: auto; position: relative; transition: margin 0.3s ease 0.1s; } .accordion-select:checked + .accordion-title + .accordion-content { margin-bottom: 0; margin-right: 0; } /* Generated styles starts here */ .accordion { border-color: #dedede; border-radius: 0px; border-style: solid; border-width: 1px; flex-direction: column; height: auto; } .accordion-title, .accordion-select { background-color: #ffffff; color: #7f8787; width: 100%; height: 55px; font-size: .18rem; } .accordion-select { margin-bottom: -55px; margin-right: -65px; } .accordion-title:not(:nth-last-child(2))::after { border-bottom-color: rgb(234, 234, 234); border-right-color: transparent; } .accordion-select:hover + .accordion-title, .accordion-select:checked + .accordion-title { background-color: #ffffff; } .accordion-title span { transform: rotate(0deg); -ms-writing-mode: lr-tb; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); padding-left: 28px; padding-right: 28px; line-height: 55px; } .accordion-content { background-color: #f7f7f7; color: #7f8787; height: 150px; margin-bottom: -150px; margin-right: 0; padding: 25px; width: 100%; } .our_team{ text-align: center!important; } .person{ width: 33%; display: inline-block; margin-bottom: 25px; } .personPhoto { width: 100%; max-width: 360px; } .personPhoto img{ width: 100%; padding: 0!important; } .personPhoto img:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.5); } .personText{ width: 100%; max-width: 360px; } .our_team .person .personText a{ text-decoration: none!important; color: #444!important; } .personText img{ padding: 0!important; } .our_team .person .personText p{ text-align: center!important; } .personText p.name{ font-weight: bold!important; font-size: 20px!important; } .personText p.job{ color: #ef4423!important; font-size: 16px!important; margin-bottom: 10px; } div.email, div.phone{ display: flex!important; justify-content: center!important; align-content: center!important; } .email p, .phone p{ padding: 3px!important; } @media screen and (max-width: 1400px){ .personText p.name{ font-size: 16px!important; } .personText p.job{ font-size: 14px!important; } } @media screen and (max-width: 1100px){ .personText p.job{ font-size: 13px!important; } } @media screen and (max-width: 920px){ .person{ width: 45%; } .personText p.name{ font-size: 18px!important; } .personText p.job{ font-size: 16px!important; } } @media screen and (max-width: 620px){ .personText p.job{ font-size: 13px!important; } } @media screen and (max-width: 480px){ .person{ width: 90%; margin: 0 auto 0 auto; } .personText p.job{ font-size: 16px!important; } } /* Style the buttons that are used to open and close the accordion panel */ .accordionFAQ { background-color: #ef4423; color: #fff!important; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .accordionFAQ:hover { background-color: #fb745a; } /* Style the accordion panel. Note: hidden by default */ .panelFAQ { padding: 0 18px; background-color: white; display: none; overflow: hidden; color: #000; } .panelFAQ p{ padding-left: 10px!important; } .footer_inst img{ width: 30px!important; display: inherit!important; float: right; margin: 10px; } #otzyvy{ width: 100%; margin: 10px; } #otzyvy a{ margin: 10px; } #subAbout{ display: none; } li.aboutMob{ display: none!important; } @media screen and (max-width: 1000px){ li.aboutMob{ display: block!important; } li.aboutDesctop{ display: none!important; } } p.inStock_text{ font-size: 20px; color: #27af05; text-decoration: underline; } @media only screen and (min-width: 1799px) and (max-width: 1849px) { html{font-size: 92px;} } @media only screen and (min-width: 1699px) and (max-width: 1799px) { html{font-size: 90px;} } @media only screen and (min-width: 1599px) and (max-width: 1699px) { html{font-size: 88px;} } @media only screen and (min-width: 1499px) and (max-width: 1599px) { html{font-size: 82px;} #head nav ul li:hover:before, #head nav ul li.active:before{ height: 2px; } } @media only screen and (min-width: 1399px) and (max-width: 1499px) { html{font-size: 77px;} #head nav ul li:hover:before, #head nav ul li.active:before{ height: 2px; } } @media only screen and (min-width: 1299px) and (max-width: 1399px) { html{font-size: 72px;} #head nav ul li:hover:before, #head nav ul li.active:before{ height: 2px; } } @media only screen and (min-width: 1199px) and (max-width: 1299px) { html{font-size: 67px;} #head nav ul li:hover:before, #head nav ul li.active:before{ height: 2px; } } @media only screen and (min-width: 1099px) and (max-width: 1199px) { html{font-size: 62px;} #head nav ul li:hover:before, #head nav ul li.active:before{ height: 2px; } } @media only screen and (min-width: 1001px) and (max-width: 1099px) { html{font-size: 55px;} #head nav ul li:hover:before, #head nav ul li.active:before{ height: 2px; } } @media only screen and (max-width: 1000px){ #text_block.about .half:first-child *{color: #fff !important;} #text_block.about .half, main.red .center{width: 100%;} #text_block.about .half:first-child{padding-top: 1rem;} #text_block.about .half:first-child:before{display: none;} #text_block.red{padding: 0;} #text_block.about .half:last-child, #text_block.about .half:first-child{padding-left: 1rem;margin-bottom: 1rem;} } @media only screen and (min-width: 899px) and (max-width: 1000px) { html{font-size: 100px;} } @media only screen and (max-width: 1000px) { #head .right .btn{display: none;} } @media only screen and (min-width: 769px) and (max-width: 1000px) { #mobile_btn{ position: absolute; top: 0; bottom: 0; margin: auto 0; right: .2rem; width: .3rem; height: .2rem; cursor: pointer; z-index: 20; display: block;} #mobile_btn span { display: block; position: absolute; width: 100%; opacity: 1; left: 0; height: 3px; background: #fff; margin: 0; top: 0;} #mobile_btn span:nth-child(2){ top: .08rem; } #mobile_btn span:nth-child(3) { top: .16rem; } #mobile_btn.active span{background-color: #fff;} #mobile_btn.active span:nth-child(1){transform: rotate(45deg); top: .18rem; left: .03rem;} #mobile_btn.active span:nth-child(3){transform: rotate(-45deg); top: .18rem; left: .03rem;} #mobile_btn.active span:nth-child(2){display: none;} #mobile_btn.active{ z-index: 22; top: -.2rem;} #head nav{display: none;} #head.active, #head.active .logo, #head.active .right{z-index: 202;} #top_nav.active{display: block;} #top_nav.active>ul{ /*position: fixed; width: 100%; height: 100vh; left: 0; top: 0; margin-left: 0; display: flex; line-height: unset; flex-direction: column; justify-content: center; background-color: #0f1e36; padding-top: .6rem;*/ /*position: fixed;*/ position: absolute; width: 100%; /*height: 100vh;*/ height: auto; left: 0; /*top: 0;*/ top: 68px; margin-left: 0; display: flex; line-height: unset; flex-direction: column; justify-content: center; background-color: #0f1e36; /*padding-top: 1.9rem;*/ } #top_nav.active>ul li{ width: 100%; display: block; text-align: center; padding: 0; margin: 0; line-height: .6rem; height: .6rem;} #top_nav.active>ul li a{ color: #fff; font-size: .18rem; width: 100%; text-align: center; line-height: .6rem;} #head #top_nav.active ul li:hover:before, #head #top_nav.active ul li.active:before {content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: .6rem; background-color: #da195a; max-width: 100%; right: 0; margin: 0 auto;} #head #top_nav.active ul li:hover ul.second{display: none;} .center{width: 8.3rem;} .btn, a.btn{width: 1.8rem; height: .3rem; line-height: .3rem; font-size: .12rem; } h2{font-size: .24rem; letter-spacing: .01rem;} #head{height: .75rem;} #head .logo{left: .2rem; font-size: .23rem; line-height: .75rem; width: .7rem; height: .7rem;} #head .right{ height: .35rem; top: .2rem; right: .2rem; width: 7rem;} #head .right .phone{right: .5rem; font-size: .18rem; letter-spacing: .01rem; line-height: .35rem; padding-left: .5rem;} #head .right .phone:before{width: .3rem; height: .3rem;} #search_panel{right: 2.45rem; width: 4rem;} #search_panel input[type=submit]{width: .18rem; height: .18rem; right: .1rem;} header h1{left: .2rem; font-size: .54rem; top: 1.75rem;} header h1 p{font-size: .28rem; padding-top: .08rem;} #sl_top_box .slick-dots{left: .2rem; height: .12rem; top: 3.05rem;} #sl_top_box .slick-dots li{width: .12rem; margin-right: .1rem;} #sl_top_box #sl_top_arrow_next{right: .2rem; width: .23rem; height: .17rem; top: 71%;} #mouse{width: .18rem; height: .3rem; bottom: .3rem;} #h_shadow{height: .16rem;} #icon_top_box{top: 4rem; left: .2rem; width: 8.8rem;} #icon_top_box .block{width: 2.2rem;} #icon_top_box .block .img{height: .45rem;} #icon_top_box .block .text{font-size: .14rem; padding-top: .12rem;} #icon_top_box .block .img.car{ background-size: .43rem;} #icon_top_box .block .img.hands{ background-size: .43rem;} #icon_top_box .block .img.cal{ background-size: .35rem;} #icon_top_box .block .img.list{ background-size: .3rem;} #cat_list_box{padding: .35rem 0 .35rem;} #cat_list_box h2{margin-bottom: .45rem;} #cat_list{margin-bottom: .2rem;} #cat_list .cat_list{width: 2.65rem; height: 1.4rem; margin-right: .17rem; margin-bottom: .16rem;} #cat_list .cat_list .btn{width: 1.1rem; height: .25rem; line-height: .25rem; font-size: .14rem;} #examples_box{padding: .2rem 0 .3rem;} #examples_box h2{margin-bottom: .2rem; } #examples{ height: 4.7rem;} #examples figure{width: 25%; height: 4.7rem;} /* #examples .block:nth-child(9), #examples .block:nth-child(10), #examples .block:nth-child(11), #examples .block:nth-child(12){display: none;}*/ #sl_client_box { padding: .25rem 0 0;} #sl_client_box .center{padding: 0 .55rem;} #in_promo{height: 2.9rem; background-image: url('../../../media/site/in_back1000.png');} #in_promo .text{padding-left: 2.65rem; padding-top: .4rem;} #in_promo .text h2{font-size: .36rem; line-height: 1;} #in_promo .text h2 p{font-size: .26rem;} #in_promo .text .btn{width: 2.1rem; font-size: .15rem; margin-top: 1.05rem; height: .4rem; line-height: .4rem;} footer{height: 5.5rem;} footer .center{width: 100%; padding: 0 .2rem;} #map{width: 67%; height: 4.9rem;} #map_info{width: 31.5%; height: 4.9rem; padding: .2rem 0 0 .2rem;} #map_info h2{font-size: .38rem;} #map_info a{font-size: .24rem;} #map_info .address{padding-bottom: .15rem;} #map_info .address, #map_info .legal, #add_info, #in_info p{font-size: .14rem;} #bottom_line{height: .6rem;} #bottom_line .center, #in_info, #in_info p{line-height: .6rem;} #in_info a{width: 1.6rem; height: .28rem;} #in_info p{right: 1.95rem;} #popup_flag{display: none;} #forms_block.active .forms_centr{margin-top: 1rem;} /* CATALOG ################################################################################################################*/ .breadcrumbs{padding: .2rem 0;} .breadcrumbs .center{width: 100%; padding: 0 .2rem;} #cat_list_box h1{text-align: center; font-size: .24rem; padding-bottom: .5rem;} /*#cat_list .cat_list .name{max-width: 1.1rem; }*/ #cat_list .cat_list .name span{font-size: .14rem;} /* CLIENT ################################################################################################################*/ #client_text{ padding: .1rem 0 0; } #client_text .main_photo{width: 49%; height: 55vh; } #client_text .text{width: 51%; padding: 0 .15rem 0 .35rem; } #client_text .text .logo{width: 2.2rem; height: .7rem; margin-bottom: .2rem;} #client_text h1{font-size: .24rem; letter-spacing: .02rem; } #client_text p{font-size: .14rem; padding-bottom: .15rem; letter-spacing: .01rem;} #client_text .btn_block{ height: .35rem; margin-top: .1rem;} #client_text .btn_block .btn{ height: .35rem; line-height: .33rem; width: 43%;} #client_text .btn_block .mail{width: 50%; padding-left: .3rem; font-size: .13rem; left: 51%; line-height: .35rem; letter-spacing: .01rem;} #client_text .btn_block .mail:before{width: .21rem; height: .16rem; } #portf_box{ padding: .4rem 0 .2rem;} #portf_box h2{margin-bottom: .35rem; letter-spacing: .02rem;} #portf_box .center{padding: 0 .4rem; width: 9rem} #portf_box .slider{ height: 2.3rem; } #portf_box .block{height: 2.3rem; padding: 0 .15rem;} #portf_box #sl_portf_arrows{ height: .32rem; } #portf_box #sl_portf_arrows .arrow{width: .24rem; } /* USLUGA ################################################################################################################*/ header.usluga { height: 2.7rem;} header.usluga .center.bottom{width: 100%; padding: 0 .2rem;} header .breadcrumbs{padding:.9rem 0 .25rem 0;} header.usluga .center.bottom .breadcrumbs .center{padding: 0;} #cat_info h1{ font-size: .3rem; letter-spacing: 0; font-weight: 700;} #cat_info .btn{ margin-top: .3rem; letter-spacing: .01rem; width: 1.9rem;} #cat_text{padding: .2rem 0 0;} #cat_text .center{width: 100%; padding: 0 .2rem;} #cat_text h2{padding-bottom: .2rem;} #cat_text p{font-size: .14rem; padding-bottom: .18rem; letter-spacing: 0;} #client_text2{ padding: .1rem 0 0; } #client_text2 .main_photo{width: 49%; height: 55vh; } #client_text2 .text{width: 51%; height: 55vh; line-height: 55vh; padding: 0 .15rem 0 .35rem; } #client_text2 h1{font-size: .24rem; letter-spacing: .02rem; } #client_text2 p{font-size: .14rem; padding-bottom: .15rem; letter-spacing: .01rem;} #client_text2 .btn_block{ height: .35rem; margin-top: .1rem;} #client_text2 .btn_block .btn{ height: .35rem; line-height: .33rem; width: 43%;} #client_text2 .btn_block .mail{width: 50%; padding-left: .3rem; font-size: .13rem; left: 51%; line-height: .35rem; letter-spacing: .01rem;} #client_text2 .btn_block .mail:before{width: .21rem; height: .16rem; } #mini_photo{position: relative; top: unset; right: unset;} } @media only screen and (min-width: 900px) and (max-width: 950px) { html{font-size: 95px;} } @media only screen and (min-width: 850px) and (max-width: 899px) { html{font-size: 90px;} } @media only screen and (min-width: 800px) and (max-width: 849px) { html{font-size: 85px;} } @media only screen and (min-width: 769px) and (max-width: 799px) { html{font-size: 80px;} } @media only screen and (orientation: portrait) and (min-width: 0px) and (max-width: 768px) { .center{width: 100%; padding: 0 .3rem;} .btn, a.btn{width: 4rem; height: .7rem; line-height: .7rem; font-size: .25rem;} #mini_photo{position: relative; top: unset; right: unset;} #cat_photo{width: 100%;} #big_photo{width: 100%; height: 95vw;} #mobile_btn{ position: absolute; top: .34rem; bottom: 0; margin: 0; right: .3rem; width: .54rem; height: .36rem; cursor: pointer; z-index: 20; display: block;} #mobile_btn span { display: block; position: absolute; width: 100%; opacity: 1; left: 0; height: .06rem; background: #fff; margin: 0; top: 0;} #mobile_btn span:nth-child(2){ top: .15rem; } #mobile_btn span:nth-child(3) { top: .3rem; } #mobile_btn.active span{background-color: #fff;} #mobile_btn.active span:nth-child(1){transform: rotate(45deg); top: .18rem; left: .03rem;} #mobile_btn.active span:nth-child(3){transform: rotate(-45deg); top: .18rem; left: .03rem;} #mobile_btn.active span:nth-child(2){display: none;} #mobile_btn.active{ z-index: 22; top: .32rem;} #head nav{display: none;} #head.active, #head.active .logo, #head.active .right{z-index: 202;} #top_nav.active{display: block;} #top_nav.active>ul{ /*position: fixed;*/ position: absolute; width: 100%; /*height: 100vh;*/ height: auto; left: 0; /*top: 0;*/ top: 25px; margin-left: 0; display: flex; line-height: unset; flex-direction: column; justify-content: center; background-color: #0f1e36; /*padding-top: 1.9rem;*/ } #top_nav.active>ul li{ width: 100%; display: block; text-align: center; padding: 0; margin: 0; line-height: 1rem; height: 1rem;} #top_nav.active>ul li a{ color: #fff; font-size: .36rem; width: 100%; text-align: center; line-height: 1rem;} #head #top_nav.active ul li:hover:before, #head #top_nav.active ul li.active:before {content: ""; position: absolute; left: 0; bottom: .1rem; height: .07rem; width: 1.3rem; background-color: #da195a; max-width: 100%; right: 0; margin: 0 auto;} #head #top_nav.active ul li:hover ul.second{display: none;} #head{height: 2rem;} #head .logo{font-size: .4rem; left: .3rem; line-height: 1; top: .1rem; width: .8rem; margin: 0;} #head .right{width: 100%; right: 0; top: 1.05rem; height: .62rem;} #search_panel{right: auto; left: .3rem; width: 46%;} #search_panel input[type=submit]{width: .31rem; height: .31rem; right: .3rem;} #head .right .phone{right: .3rem; font-size: .3rem; line-height: .62rem; letter-spacing: .02rem; padding-left: .65rem;} #head .right .phone:before{width: .54rem; height: .54rem;} header h1{font-size: .72rem; text-align: center; left: 0; top: 30%;} header h1 p{font-size: .38rem; text-align: center; width: 80%; margin: 0 auto;} #sl_top_box .slick-dots{width: 100%; left: 0; text-align: center; height: .22rem; top: 48%;} #sl_top_box .slick-dots li{margin-right: .1rem; margin-left: .1rem; width: .22rem;} #sl_top_box #sl_top_arrow_next{display: none !important;} #icon_top_box{top: auto; left: 0; width: 100%; bottom: 18%; max-height: 3rem; overflow: hidden;} #icon_top_box .block{width: 100%;} #icon_top_box .block .img{height: 2.2rem; background-position: center;} #icon_top_box .block .text{font-size: .36rem; padding-top: .12rem; text-align: center;} #icon_top_box .block .img.car{ background-size: 1.26rem;} #icon_top_box .block .img.hands{ background-size: 1.26rem;} #icon_top_box .block .img.cal{ background-size: 1.1rem;} #icon_top_box .block .img.list{ background-size: 1.1rem;} #icon_top_box .slick-slide{display: inline-block;vertical-align: top; outline: none;} #icon_top_box #icon_top_box_arrows{width: 100%; height: .39rem; position: absolute; top: 0; bottom: 0; margin: auto 0; left: 0; display: block;} #icon_top_box #icon_top_box_arrows .arrow{width: .56rem; height: 100%; position: absolute; z-index: 5; cursor: pointer; background-size: 100%; background-repeat: no-repeat; z-index: 6;} #icon_top_box #icon_top_box_arrows .arrow.next{background-image: url('../../../media/site/i_arrow_w_next.png'); right: .3rem;} #icon_top_box #icon_top_box_arrows .arrow.prev{background-image: url('../../../media/site/i_arrow_w_prev.png'); left: .3rem;} #mouse{display: none;} #h_shadow{height: .4rem;} #cat_list_box{ padding: .45rem 0 .65rem; background-image: url('../../../media/site/cat_back768.jpg');} #cat_list_box h2{margin-bottom: .65rem;} #cat_list{margin-bottom: .45rem;} #cat_list .cat_list{width: 100%; margin-right: 0; height: 3.8rem; margin-bottom: .3rem;} #cat_list .cat_list .btn{width: 2.95rem; height: .68rem; line-height: .68rem; font-size: .37rem;} #examples_box{padding: .45rem 0 0;} #examples_box h2{margin-bottom: .45rem;} #examples{ height: 100vw;} #examples figure{width: 50%; height: 100vw;} /*#examples .block:nth-child(9), #examples .block:nth-child(10), #examples .block:nth-child(11), #examples .block:nth-child(12){display: none;}*/ #sl_client_box { padding: .5rem 0 0;} #sl_client_box .center{padding: 0 1.1rem;} #sl_client_box .slide{padding: 0 .3rem;} #sl_client_box #sl_client_arrows .arrow.next{right: .3rem;} #sl_client_box #sl_client_arrows .arrow.prev{left: .3rem;} #in_promo{height: 4.28rem; background-image: url('../../../media/site/in_back768.png');} #in_promo .text{padding-left: 44%; padding-top: .5rem;} #in_promo .text h2{font-size: .4rem; line-height: 1;} #in_promo .text h2 p{font-size: .23rem;} #in_promo .text .btn{width: 2.5rem; font-size: .15rem; margin-top: 0; height: .5rem; line-height: .5rem; bottom: .3rem; position: absolute;} footer{height: auto;} footer .center{width: 100%; padding: 0 .3rem;} #map{width: 100%; height: 4.5rem; position: relative;} #map_info{width: 100%; height: auto; padding: .2rem 0 1.7rem .4rem; background-color: #ef4423; float: none;} #map_info h2{font-size: .76rem; padding-bottom: .4rem;} #map_info a{font-size: .44rem; padding-bottom: .3rem;} #map_info .address{padding-bottom: .3rem;} #map_info .address, #map_info .legal{font-size: .3rem;} #map .ymaps-2-1-68-svg-icon{width: .58rem !important; height: .78rem !important; left: -.43rem !important; top: -.9rem !important; background-image: url('../../../media/site/i_baloon.png'); background-size:100%;} #bottom_line{height: 1.1rem;} #bottom_line .center, #in_info, #in_info p{line-height: 1.1rem;} #in_info a{width: 2.07rem; height: .36rem;} #in_info p{right: 2.6rem;} #add_info, #in_info p{font-size: .2rem;} #popup_flag{display: none;} #forms_block.active .forms_centr{margin-top: 1rem; width: 83%; padding: 1.4rem .45rem .45rem;} #forms_block h3{height: .96rem; line-height: .96rem; font-size: .36rem;} #forms_block.active .close_btn{display: none;} #forms_block .forms_centr div{ margin-bottom: .25rem;} #forms_block input, #forms_block textarea{ padding: 0 .3rem; font-size: .26rem; } #forms_block input{ height: .75rem; line-height: .75rem; } #forms_block input[type=submit]{height: .75rem; line-height: .75rem; width: 3.3rem; font-size: .26rem; border-radius: .06rem; margin: 0 auto .05rem; letter-spacing: .02rem;} #forms_block .police, #forms_block .police a{font-size: .26rem; } #forms_block .police{margin-bottom: .42rem;} #forms_block div span{ font-size: .18rem; } #forms_block div span.error{ margin-top: .1rem; padding: .06rem; border-radius: .04rem;} /* CATALOG ################################################################################################################*/ .breadcrumbs{padding: .2rem 0;} .breadcrumbs li a, .breadcrumbs li span, .breadcrumbs span.arrow{font-size: .24rem;} #cat_list_box h1{text-align: center; font-size: .36rem; padding-bottom: .5rem;letter-spacing: .02rem;} #cat_list .cat_list .name{min-width: 3rem;} #cat_list .cat_list .name span{font-size: .38rem;} /* CLIENT ################################################################################################################*/ #client_text{ padding: .05rem 0 0; } #client_text .main_photo{width: 100%; height: 91vh; } #client_text .text{width: 100%; padding: .55rem .3rem 0 .3rem; } #client_text .text .logo{width: 2.8rem; height: .9rem; margin-bottom: .45rem;} #client_text h1{font-size: .4rem; letter-spacing: .03rem; } #client_text p{font-size: .3rem; padding-bottom: .25rem; letter-spacing: .02rem; line-height: 1.2;} #client_text .btn_block{ height: 1.7rem; margin-top: .2rem;} #client_text .btn_block .btn{ height: .7rem; line-height: .68rem; width: 57%;} #client_text .btn_block .mail{width: 100%; padding-left: .6rem; font-size: .25rem; left: 0; line-height: .7rem; letter-spacing: .02rem; top: .95rem; bottom: auto;} #client_text .btn_block .mail:before{width: .41rem; height: .31rem; } #portf_box{ padding: .4rem 0 .2rem;} #portf_box h2{margin-bottom: .35rem; letter-spacing: .02rem; width: 5rem; margin: auto; padding-bottom: .55rem;} #portf_box .center{padding: 0 1.45rem; width: 100%;} #portf_box .slider{ height: 4.45rem; } #portf_box .block{height: 4.45rem; padding: 0;} #portf_box #sl_portf_arrows .arrow.next{right: .3rem;} #portf_box #sl_portf_arrows .arrow.prev{left: .3rem;} /* USLUGA ################################################################################################################*/ header.usluga { height: 5.65rem;} header.usluga .center.bottom{width: 100%; padding: 0 .3rem;} header .breadcrumbs{padding: 2.2rem 0 .25rem 0;} header.usluga .center.bottom .breadcrumbs .center{padding: 0;} #cat_info h1{ font-size: .52rem; letter-spacing: 0; font-weight: 700;} #cat_info .btn{ margin-top: .5rem; letter-spacing: .01rem; width: 3.85rem; height: .7rem; line-height: .68rem;} #cat_text{padding: .35rem 0 0;} #cat_text .center{width: 100%; padding: 0 .2rem;} #cat_text h2{padding-bottom: .35rem; font-size: .4rem; letter-spacing: .03rem;} #cat_text p{font-size: .3rem; padding-bottom: .18rem; letter-spacing: .01rem; line-height: 1.2;} .usluga #portf_box{padding-bottom: .7rem;} #client_text2{ padding: .05rem 0 0; } #client_text2 .main_photo{width: 100%; height: 91vh; } #client_text2 .text{width: 100%; padding: .55rem .3rem 0 .3rem; height: auto; line-height: unset;} #client_text2 h1{font-size: .4rem; letter-spacing: .03rem; } #client_text2 p{font-size: .3rem; padding-bottom: .25rem; letter-spacing: .02rem; line-height: 1.2;} #client_text2 .btn_block{ height: 1.7rem; margin-top: .2rem;} #client_text2 .btn_block .btn{ height: .7rem; line-height: .68rem; width: 57%;} #client_text2 .btn_block .mail{width: 100%; padding-left: .6rem; font-size: .25rem; left: 0; line-height: .7rem; letter-spacing: .02rem; top: .95rem; bottom: auto;} #client_text2 .btn_block .mail:before{width: .41rem; height: .31rem; } } @media only screen and (orientation: portrait) and (min-width: 700px) and (max-width: 768px) { html{font-size: 100px;} #mobile_btn span{height: 6px;}} @media only screen and (orientation: portrait) and (min-width: 650px) and (max-width: 699px) { html{font-size: 91px;} #mobile_btn span{height: 6px;}} @media only screen and (orientation: portrait) and (min-width: 600px) and (max-width: 649px) { html{font-size: 84px;} #mobile_btn span{height: 5px;}} @media only screen and (orientation: portrait) and (min-width: 550px) and (max-width: 599px) { html{font-size: 78px;} #mobile_btn span{height: 5px;}} @media only screen and (orientation: portrait) and (min-width: 500px) and (max-width: 549px) { html{font-size: 72px;} #mobile_btn span{height: 5px;}} @media only screen and (orientation: portrait) and (min-width: 450px) and (max-width: 499px) { html{font-size: 66px;} #mobile_btn span{height: 4px;}} @media only screen and (orientation: portrait) and (min-width: 400px) and (max-width: 449px) { html{font-size: 60px;} #mobile_btn span{height: 4px;}} @media only screen and (orientation: portrait) and (min-width: 350px) and (max-width: 399px) { html{font-size: 54px;} #mobile_btn span{height: 3px;}} @media only screen and (orientation: portrait) and (min-width: 320px) and (max-width: 349px) { html{font-size: 44px;} #mobile_btn span{height: 3px;} #mobile_btn span:nth-child(2){top: 7px;} #mobile_btn span:nth-child(3){top: 14px;} }/* Magic Zoom Plus v5.2.5 Copyright 2017 Magic Toolbox Buy a license: https://www.magictoolbox.com/magiczoomplus/ License agreement: https://www.magictoolbox.com/license/ */ /** * Core styles */ @font-face { font-family: "magictoolbox-thin"; font-weight: normal; font-style: normal; src: url("fonts/magictoolbox-thin.eot?#iefix") format("embedded-opentype"), url("data:font/opentype;base64,AAEAAAANAIAAAwBQRkZUTXJLSEgAAAdAAAAAHEdERUYAKQAPAAAHIAAAAB5PUy8yAlYL4QAAAVgAAABWY21hcEAYY70AAAHUAAABSmdhc3D//wADAAAHGAAAAAhnbHlmMMVOJwAAAzQAAAGIaGVhZAmWUYMAAADcAAAANmhoZWEP9QamAAABFAAAACRobXR4L0EAQAAAAbAAAAAkbG9jYQGGAgAAAAMgAAAAFG1heHAAUAAcAAABOAAAACBuYW1l6MPgdAAABLwAAAH1cG9zdLaTuyIAAAa0AAAAZAABAAAAAQAAEWdxz18PPPUACwgAAAAAANDtg/MAAAAA0O2D8wAA/gIInAaeAAAACAACAAAAAAAAAAEAAAae/gIAuAibAAD//wicAAEAAAAAAAAAAAAAAAAAAAAJAAEAAAAJABkABQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQZeAZAABQAIBTMFmQAAAR4FMwWZAAAD1wBmAhIAAAAABQAAAAAAAAAAAAAAAAAAAAACAAAAAAAAUGZFZABAoAGgBgZm/mYAuAaeAf4AAAABAAAAAAAABAAAAAAAAAACqgAACJsAAAOlAAADpQAACJsAAAibAAAHfABAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAACgBv//AAAAAKAB//8AAGACAAEAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqACoAKgBMAGAAdACIAJwAxAAFAAAAAAQABZoAAgAFAAgACwAPAAATEQkBIQE3AREJASEDESERZgFd/uECuP6kPQFd/mYBXP1IpAQABNf77AIK/ZkCC1z99gQU/lICCvrNBZr6ZgABAAD+AgicBp4ACwAACQEHCQEnCQE3CQEXBHEEKyP71fvVIwQr+9UjBCsEKyMCUPvVIwQr+9UjBCsEKyP71QQrIwAAAAEAAP4CA6YGngAFAAARARcJAQcDixv8iQN1GwJQBE4X+8n7yRcAAAABAAD+AgOmBp4ABQAACQEnCQE3A6b8dxsDd/yHGwJQ+7IXBDcENxcAAQAAADcInAPdAAUAACUBNwkBFwRO+7IXBDcENxc3A4oa/IkDeRoAAAEAAAA3CJwD3QAFAAAJAQcJAScETgROF/vJ+8kXA938dxsDd/yHGwACAEAAQAHAAcAADQAYAAAlBycGIyImNDYyFhUUDwEWMzI2NCYiBhUUAcAXcSk3P1lZflkh1yc5OFBQcFBXF3EhWX5ZWT82KQInUHBQUDg5AAAADACWAAEAAAAAAAEAEQAkAAEAAAAAAAIABABAAAEAAAAAAAMALQChAAEAAAAAAAQAEQDzAAEAAAAAAAUACwEdAAEAAAAAAAYAEQFNAAMAAQQJAAEAIgAAAAMAAQQJAAIACAA2AAMAAQQJAAMAWgBFAAMAAQQJAAQAIgDPAAMAAQQJAAUAFgEFAAMAAQQJAAYAIgEpAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAFQAaABpAG4AAFRoaW4AAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAATQBhAGcAaQBjAFQAbwBvAGwAYgBvAHgALQBUAGgAaQBuACAAOgAgADIANwAtADEALQAyADAAMQA1AABGb250Rm9yZ2UgMi4wIDogTWFnaWNUb29sYm94LVRoaW4gOiAyNy0xLTIwMTUAAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAAAAAAIAAAAAAAD/mgBmAAAAAAAAAAAAAAAAAAAAAAAAAAAACQAAAAEAAgECAQMBBAEFAQYBBwd1bmlBMDAxB3VuaUEwMDIHdW5pQTAwMwd1bmlBMDA0B3VuaUEwMDUHdW5pQTAwNgAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAgAAQAEAAAAAgAAAAAAAAABAAAAANBwQGEAAAAA0O2D8wAAAADQ7YPz"); } .MagicZoom, .mz-figure, .mz-lens, .mz-zoom-window, .mz-loading, .mz-hint, .mz-expand .mz-expand-stage, .mz-expand .mz-expand-stage .mz-image-stage, .mz-expand .mz-image-stage > figure .mz-caption, .mz-thumb img, .mz-expand-thumbnails, .mz-expand-controls, .mz-button { -webkit-box-sizing: border-box; box-sizing: border-box; } .MagicZoom, .mz-figure { display: inline-block; outline: 0 !important; font-size: 0 !important; line-height: 100% !important; direction: ltr !important; position: relative; z-index: 1; margin: 0 auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .MagicZoom { -webkit-transform: translate3d(0,0,0); -ms-touch-action: pan-y; touch-action: pan-y; } figure.mz-figure { overflow: hidden; margin: 0 !important; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .MagicZoom img, .mz-figure img { border: 0 !important; margin: 0 !important; outline: 0 !important; padding: 0 !important; } .MagicZoom > img, .mz-figure > img { width: 100%; height: auto; } .ie8-magic .MagicZoom > img, .ie8-magic .mz-figure > img { width: 100%; max-width: none !important; } .mz-figure.mz-no-zoom.mz-no-expand, .mz-expand .mz-figure.mz-no-zoom { cursor: default !important; } .mz-figure.mz-active, .mz-expand { -ms-touch-action: none; touch-action: none; } .mz-lens, .mz-zoom-window { position: absolute !important; overflow: hidden !important; pointer-events: none !important; } .mz-lens img, .mz-zoom-window img { position: absolute !important; max-width: none !important; max-height: none !important; } .mz-lens img { -webkit-transition: none !important; transition: none !important; } .mz-zoom-window { z-index: 2000000000; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .mz-zoom-window.mz-magnifier { -webkit-mask-image: -webkit-radial-gradient(circle, white, black); -webkit-mask-clip: content; cursor: none; } .mz-figure.mz-active .mz-zoom-window.mz-magnifier { pointer-events: auto !important; cursor: inherit !important; } .mz-zoom-window.mz-magnifier.mz-expanded { z-index: 2147483647; } .mz-zoom-window img { width: auto; height: auto; left: -1000%; right: -1000%; top: -1000%; bottom: -1000%; margin: auto !important; -webkit-transition: none !important; transition: none !important; -webkit-transform-origin: 50% 50% !important; -ms-transform-origin: 50% 50% !important; transform-origin: 50% 50% !important; } .mz-zoom-window.mz-preview img { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; width: 100% !important; height: auto !important; -webkit-transform: none !important; transform: none !important; } .lt-ie9-magic .mz-zoom-window img { margin: 0 !important; } .mz-expand-controls { z-index: 2147483647; } .mz-fade { -webkit-transition: opacity .25s; transition: opacity .25s; } .mz-hidden { opacity: 0; } .mz-visible { opacity: 1; } .mobile-magic .mz-expand .mz-expand-bg { -webkit-transform-style: flat !important; transform-style: flat !important; } .mobile-magic .mz-expand .mz-image-stage > figure .mz-caption { display: none !important; } .mobile-magic .mz-expand-controls.mz-fade { transition: none !important; } .mobile-magic .mz-expand > .mz-zoom-window { top: 0 !important; left: 0 !important; } .mz-expanded-view-open, .mz-expanded-view-open body { overflow: hidden !important; } .mz-expanded-view-open body { height: auto !important; } /** * Main figure */ .mz-figure.mz-active { background: #fff; } .mz-figure.mz-no-zoom, .mz-figure.mz-click-zoom, .mz-figure.mz-active { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mz-figure.mz-active.mz-no-expand { cursor: crosshair; } .mz-figure.mz-active.mz-click-zoom.mz-no-expand { cursor: crosshair; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } .mz-figure.mz-active.mz-magnifier-zoom.mz-hover-zoom.mz-no-expand { cursor: none; } .mz-figure.mz-magnifier-zoom.mz-active { overflow: visible !important; } .mz-figure.mz-active > img { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(80%) opacity(60%); filter: grayscale(80%) opacity(60%); } .no-cssfilters-magic .mz-figure.mz-active > img { opacity: 0.6; } .lt-ie10-magic .mz-figure.mz-active > img { opacity: 1; filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1,opacity=0.6); } .mz-figure.mz-active.mz-inner-zoom, .lt-ie11-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom, .lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom > img { opacity: 0; } .lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom, .lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom > .mz-zoom-window { opacity: 1; } .lt-ie10-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom, .lt-ie10-magic .mz-figure.mz-active.mz-inner-zoom > img { filter: alpha(opacity=0); } .ie9-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom { background: transparent; } /** * Zoom lens */ .mz-lens { border: 1px solid #aaa; border-color: rgba(170,170,170,0.7); box-shadow: 0 0 5px rgba(0,0,0,.3); cursor: none; z-index: 10; opacity: 0; } .mz-figure.mz-active .mz-lens { opacity: 1; -webkit-transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s; transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s; } .mz-figure.mz-active.mz-magnifier-zoom .mz-lens { border-radius: 50%; opacity: 0; cursor: none; } /** * Zoom window */ .mz-zoom-window { background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .2); } .mz-zoom-window.mz-magnifier { border-radius: 100%; border: 0; background: rgba(255,255,255,.3); } .mz-zoom-window.mz-magnifier:before { content: ""; display: block; position: absolute; top: 0;bottom: 0; left: 0; right: 0; border-radius: 100%; border: 1px solid rgba(170,170,170,0.7); box-shadow: inset 0 0 20px 1px rgba(0,0,0,.3); background: transparent; z-index: 1; } .mz-zoom-window.mz-magnifier.mz-square, .mz-zoom-window.mz-magnifier.mz-square:before { border-radius: 0 !important; } .lt-ie9-magic .mz-zoom-window { border: 1px solid #e5e5e5; } .mz-zoom-window.mz-inner { border: none; box-shadow: none; } /* Caption in zoom window */ .mz-zoom-window .mz-caption { background: #777; color: #fff; font-size: 10pt; opacity: 0.8; position: absolute; top: 0; z-index: 150; padding: 3px; width: 100%; line-height: normal !important; text-align: center !important; } .lt-ie9-magic .mz-zoom-window .mz-caption { filter: alpha(opacity=80); } .mz-zoom-window.caption-bottom .mz-caption { top: auto; bottom: 0; } .mz-zoom-window.mz-expanded > .mz-caption { display: none; } /* Zoom window animations */ .mz-zoom-window.mz-deactivating, .mz-zoom-window.mz-activating { -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } .mz-zoom-window.mz-deactivating { -webkit-transition-duration: .25s, .25s, .25s; transition-duration: .25s, .25s, .25s; } .mz-zoom-window.mz-p-right, .mz-zoom-window.mz-p-left, .mz-zoom-window.mz-p-top, .mz-zoom-window.mz-p-bottom { opacity: 0; z-index: -100; } .mz-zoom-window.mz-p-right { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } .mz-zoom-window.mz-p-left { -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } .mz-zoom-window.mz-p-top { -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } .mz-zoom-window.mz-p-bottom { -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0); } /* Inner mode animation */ .mz-zoom-window > img { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mz-zoom-window.mz-p-inner.mz-deactivating > img, .mz-zoom-window.mz-p-inner.mz-activating > img { -webkit-transition: -webkit-transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9) !important; transition: transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9) !important; } /* Magnifier mode animation */ .mz-zoom-window.mz-p-magnifier { -webkit-transform: scale(.1); transform: scale(.1); } /* Preview mode animation */ .mz-zoom-window.mz-preview.mz-deactivating, .mz-zoom-window.mz-preview.mz-activating, .mz-zoom-window.mz-custom.mz-deactivating, .mz-zoom-window.mz-custom.mz-activating { -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } .mz-zoom-window.mz-preview.mz-deactivating, .mz-zoom-window.mz-custom.mz-deactivating { -webkit-transition-duration: .2s; transition-duration: .2s; } .mz-zoom-window.mz-p-preview, .mz-zoom-window.mz-p-custom { opacity: 0; } /** * Hint & Loading */ .mz-hint, .mz-loading { color: #eee; background: rgba(49,51,61,0.7); font: normal 12px/1.2em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif; text-decoration: none; text-align: center; direction: ltr; display: inline-block; margin: 0; position: absolute; z-index: 1000; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } /*.mz-hint { bottom: 8px; left: 0; right: 0; padding: 0 10%; background-color: transparent; -webkit-transition: opacity 0.25s ease, z-index 0.25s ease; transition: opacity 0.25s ease, z-index 0.25s ease; } .mz-hint-message { display: inline-block; background: rgba(49,51,61,0.7); border-radius: 2em; padding: .7em 1.1em; }*/ .mz-hint, .mz-hint-message{display: none;} .mz-hint-message:before { content: '\02295'; font-family: serif; font-size: 1.5em; speak: none; text-align: center; vertical-align: -2px; margin-right: 6px; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .mobile-magic .mz-hint-message:before { display: none; } .mz-hint-hidden { opacity: 0; z-index: -1; -webkit-transition-delay: .6s; transition-delay: .6s; } /* Hint in the expanded view on mobile */ .mz-expand .mz-hint { font-size: 18px; line-height: 1.1em; top: 50%; bottom: auto; margin: 0; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); } .mz-expand .mz-hint-message { padding: 1.1em; } .mz-expand .mz-hint-message:before { display: none; } .mz-expand .mz-hint-hidden { -webkit-transition-delay: 1s; transition-delay: 1s; opacity: 0; } /* Loading indicator */ .mz-loading { font-size: 0; border-radius: 100%; opacity: 0; padding: 0; width: 36px; height: 36px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .mz-loading:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 24px; height: 24px; margin: auto; text-indent: -9999em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 1); border-top-color: transparent; box-sizing: border-box; } .mz-loading.shown { opacity: 1; z-index: 1; -webkit-transition: opacity 0s; transition: opacity 0s; } .mz-loading.shown:after { -webkit-animation: spin-loading .9s infinite linear; animation: spin-loading .9s infinite linear; } @-webkit-keyframes spin-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .lt-ie10-magic .mz-loading { border-radius: 2em; font-size: 12px; padding: .7em 1.1em; width: auto; height: auto; } .lt-ie10-magic .mz-loading:after { content: 'Loading...'; text-indent: 0; border: none; position: relative; } .lt-ie9-magic .mz-loading { filter: alpha(opacity=0); right: 0; left: 0; width: 126px; margin: auto; } .lt-ie9-magic .mz-hint-message, .lt-ie9-magic .mz-loading.shown { background: transparent !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c31333D', EndColorStr='#7c31333D'); } .lt-ie9-magic .mz-hint-hidden { filter: alpha(opacity=0); } /** * Expanded view */ .mz-expand, .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > img, .mz-expand .mz-expand-bg > svg, .mz-expand .mz-expand-stage, .mz-expand .mz-expand-stage .mz-image-stage { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > img, .mz-expand .mz-expand-bg > svg { width: auto !important; height: auto !important; } .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > svg { min-width: 100% !important; min-height: 100% !important; } .mz-expand { background-color: rgba(0, 0, 0, 1); text-align: center; vertical-align: middle; display: block; overflow: hidden; z-index: 2100000000; position: fixed; width: auto; height: auto; -webkit-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-overflow-style: none; } /* Expanded view background */ .mz-expand .mz-expand-bg { display: inline-block; vertical-align: middle; margin: auto; z-index: -100; max-width: none !important; max-height: none !important; -webkit-transform: translate3d(0,0,0) scale(10) rotate(0.01deg); -ms-transform: translate(0,0) scale(10,10) rotate(0.01deg); transform: translate3d(0,0,0) scale(10) rotate(0.01deg); -webkit-perspective: 600px; perspective: 600px; background-repeat: no-repeat; background-size: cover; } .mz-expand .mz-expand-bg > img { margin: auto; filter: url("data:image/svg+xml;utf8,#blur"); -webkit-filter: blur(20px) brightness(60%); filter: blur(20px) brightness(60%); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mz-expand .mz-expand-bg > svg { margin: auto; opacity: .6; } [data-magic-ua=edge] .mz-expand .mz-expand-bg, .lt-ie10-magic .mz-expand .mz-expand-bg { display: none !important; } .lt-ie9-magic .mz-expand { background: #1f1f1f; } [data-magic-ua=edge] .mz-expand { background-color: rgba(31, 31, 31, .96); } /** Plain backgrounds: dark-bg, white-bg **/ .mz-expand.plain-bg .mz-expand-bg, .mz-expand.dark-bg .mz-expand-bg, .mz-expand.white-bg .mz-expand-bg { display: none !important; } .mz-expand.dark-bg { background-color: #1f1f1f; background-color: rgba(31, 31, 31, .96); } .mz-expand.white-bg { background-color: #fff; } /* Expanded view stage */ .mz-expand .mz-expand-stage { z-index: 2100000000; padding: 0; } .mz-expand .mz-expand-stage .mz-image-stage { z-index: 50; left: 120px; right: 120px; padding: 20px 0 40px 0; margin: 0; text-align: center; vertical-align: middle; -webkit-perspective: 600px; perspective: 600px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mz-expand .mz-expand-stage.with-thumbs .mz-image-stage { padding-bottom: 120px; } .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage { padding: 0 !important; left: 0; right: 0; } .mz-expand .mz-image-stage > figure:before, .mz-expand .mz-image-stage:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; font-size: 0; line-height: 100%; width: 0; } .mz-expand .mz-image-stage > figure { width: 100%; max-width: 100%; max-height: 100%; padding: 0; margin: 0; display: inline-block; vertical-align: middle; font-size: 0; line-height: 100%; position: relative; } .mz-expand .mz-figure { overflow: visible; max-width: 100% !important; } .mz-expand .mz-figure > img { max-width: 100%; width: auto; height: auto; } .mz-expand .mz-zoom-in .mz-image-stage > figure, .mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-activating, .mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active { width: 100%; height: 100%; } .mz-expand .mz-figure { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mz-expand .mz-figure.mz-active { cursor: crosshair; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } /* When inner zoom is always shown */ .mz-expand .mz-expand-stage.mz-zoom-in.mz-always-zoom .mz-image-stage > figure > figure > img { z-index: 1; position: absolute !important; top: -5000px !important; bottom: -5000px !important; left: -5000px !important; right: -5000px !important; margin: auto !important; } .lt-ie10-magic .mz-zoom-window.mz-expanded img { filter: alpha(opacity=100); } .lt-ie10-magic .mz-expand .mz-figure.mz-magnifier-zoom { overflow: hidden; filter: alpha(opacity=100); } /* Caption in expanded view */ .mz-expand .mz-caption { color: #fff; text-shadow: 0px 0px 46px #000; padding: 10px 4px; font: normal 10pt/1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: center; width: 100%; position: absolute; left: 0; opacity: 0; } .mz-expand .mz-caption.mz-show { -webkit-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; opacity: 1; } .mz-expand .mz-caption a { color: inherit; cursor: pointer; } .mz-expand.white-bg .mz-caption { color: #555; text-shadow: none; } .lt-ie9-magic .mz-expand .mz-caption { top: 100%; } .mz-expand .mz-zoom-window { box-shadow: none; background: transparent; } .lt-ie9-magic .mz-expand .mz-zoom-window { border: 0; } /* Expanded view on mobile */ .mobile-magic .mz-expand-stage .mz-expand-thumbnails, .mobile-magic .mz-expand-stage .mz-image-stage { left: 0px; right: 0px; } .mobile-magic .mz-expand .mz-expand-stage.with-thumbs { bottom: 0px; } .mobile-magic .mz-expand-stage .mz-image-stage { padding: 0; } .mobile-magic .mz-expand .mz-expand-stage.with-thumbs .mz-image-stage { padding: 5px 0 60px; } .mobile-magic .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage { padding-top: 0; } .mobile-magic .mz-expand .mz-expand-thumbnails { padding: 0; height: 60px; } /** * Buttons & Arrows */ .mz-expand-controls, button.mz-button { margin: 0 !important; padding: 0 !important; outline: 0 !important; } button.mz-button { color: #b4b4b4 !important; font: 900 34px/1 'magictoolbox-thin' !important; cursor: pointer; z-index: 90 !important; background-color: transparent !important; border: 1px solid rgba(180, 180, 180, 0) !important; border-radius: 100% !important; box-shadow: none !important; position: absolute !important; text-transform: none !important; text-align: center; speak: none; -webkit-font-smoothing: antialiased; width: 60px !important; height: 60px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; } button.mz-button:before { display: inline; position: static; color: inherit !important; font: inherit !important; -webkit-font-smoothing: inherit !important; } button.mz-button.mz-button-prev, button.mz-button.mz-button-next { margin: auto 10px !important; top: 0 !important; bottom: 0 !important; overflow: hidden !important; } button.mz-button.mz-button-prev { left: 0 !important; } button.mz-button.mz-button-next { right: 0 !important; } button.mz-button.mz-button-close { font-size: 26px !important; margin: 10px !important; top: 0 !important; right: 0 !important; z-index: 95 !important; } :root:not(.mobile-magic) button.mz-button { color: rgba(180, 180, 180, .75) !important; -webkit-transform: scale(.85) !important; transform: scale(.85) !important; -webkit-transition: color .25s, border-color .25s, -webkit-transform .25s !important; transition: color .25s, border-color .25s, transform .25s !important; } :root:not(.mobile-magic) button.mz-button:hover { color: rgba(180, 180, 180, 1) !important; border-color: rgba(180, 180, 180, .6) !important; -webkit-transform: scale(1) !important; transform: scale(1) !important; } .mobile-magic button.mz-button { -webkit-transition: -webkit-transform .1s !important; transition: transform .1s !important; } .mobile-magic button.mz-button:active { border-color: rgba(180, 180, 180, .6) !important; -webkit-transform: scale(.95) !important; transform: scale(.95) !important; } button.mz-button.mz-button-close:before { content: "\a001"; } button.mz-button.mz-button-prev:before { content: "\a002"; } button.mz-button.mz-button-next:before { content: "\a003"; } @media screen and (max-device-width: 767px) { button.mz-button-prev, button.mz-button-next { display: none !important; } .mobile-magic .mz-expand button.mz-button { width: 44px !important; height: 44px !important; font-size: 18px !important; color: rgba(255, 255, 255, 0.8) !important; background-color: rgba(49,51,61,0.3) !important; border-color: transparent !important; } } .lt-ie9-magic button.mz-button { border: 0; filter: alpha(opacity=75); } .lt-ie9-magic button.mz-button:hover { filter: alpha(opacity=100); } /** * Thumbnails */ /* Thumbnails on the page */ a[data-zoom-id], .mz-thumb, .mz-thumb:focus { display: inline-block; line-height: 0; outline: none; } a[data-zoom-id] img, .mz-thumb img { border: 0; box-shadow: 0 0 1px 0px rgba(0,0,0,0.3); box-sizing: border-box; } .mz-thumb:hover:not(.mz-thumb-selected) img { -webkit-filter: brightness(75%); filter: brightness(75%); } .mz-thumb-selected img { -webkit-filter: brightness(60%); filter: brightness(60%); } .no-cssfilters-magic .mz-thumb:hover, .no-cssfilters-magic .mz-thumb.mz-thumb-selected { background: #000; } .no-cssfilters-magic .mz-thumb:hover:not(.mz-thumb-selected) img { opacity: .75; filter: alpha(opacity=75); } .no-cssfilters-magic .mz-thumb-selected img { opacity: .6; filter: alpha(opacity=60); } .ie9-magic .mz-thumb img { box-shadow: 0 0 4px 0px rgba(0,0,0,0.3); } /* Thumbnails in expanded view */ .mz-expand-thumbnails { z-index: 50; position: absolute; bottom: 0; left: 65px; right: 65px; height: 80px; padding: 10px 0; box-sizing: border-box; } .mz-expand-thumbnails .magic-thumbs .magic-thumb { padding: 10px 2px; } .mz-expand-thumbnails .magic-thumb > img { cursor: pointer; height: 40px; box-shadow:0 0 5px 1px rgba(0,0,0,0.3); } .mz-expand-thumbnails .magic-thumb:not(.magic-thumb-selected) > img:hover { -webkit-filter: brightness(70%); filter: brightness(70%); } .mz-expand-thumbnails .magic-thumb-selected img { -webkit-filter: brightness(50%); filter: brightness(50%); } .mz-expand-thumbnails .magic-thumbs .magic-thumbs-button { box-shadow: none; } .mz-expand-thumbnails .magic-thumbs .magic-thumbs-button-disabled { opacity: 0; } .no-cssfilters-magic .mz-expand-thumbnails .magic-thumb:hover:not(.magic-thumb-selected) img { opacity: .7; filter: alpha(opacity=70); } .no-cssfilters-magic .mz-expand-thumbnails .magic-thumb-selected img { opacity: .5; filter: alpha(opacity=50); } /** Hide thumbnails in expanded view with .no-expand-thumbnails class **/ .mz-expand.no-expand-thumbnails .mz-expand-stage.with-thumbs .mz-image-stage { padding-bottom: 40px; } .mz-expand.no-expand-thumbnails .mz-expand-thumbnails { display: none; } .mobile-magic .mz-expand.no-expand-thumbnails .mz-expand-stage.with-thumbs .mz-image-stage { padding: 0; } .magic-thumbs, .magic-thumbs .magic-thumbs-wrapper, .magic-thumbs ul, .magic-thumbs li, .magic-thumbs li:before, .magic-thumbs li:after, .magic-thumbs li img, .magic-thumbs .magic-thumbs-button { margin: 0; padding: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .magic-thumbs { direction: ltr; overflow: visible; z-index: 100; position: relative; left: 0; top: 0; padding: 0 30px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -ms-touch-action: none; touch-action: none; } .magic-thumbs { width: 100%; height: 100%; white-space: nowrap; } .magic-thumbs.no-buttons { padding: 0 !important; } .magic-thumbs-wrapper { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; } .magic-thumbs ul { list-style: none; font-size: 0; display: inline-block; vertical-align: middle; height: 100%; position: relative; white-space: nowrap; } .magic-thumbs.no-buttons ul { left: 0 !important; padding: 0 !important; -webkit-transition: none !important; transition: none !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .magic-thumbs ul li { margin: 0 4px; height: 100%; width: auto; vertical-align: top; line-height: 0; display: inline-block; } .magic-thumbs ul li:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; } .magic-thumbs ul li > img { width: auto; height: auto; max-width: none !important; max-height: 100% !important; vertical-align: middle; } .ie8-magic .magic-thumbs ul li > img { max-width: none !important; max-height: none !important; } /* vertical */ .magic-thumbs.magic-thumbs-vertical { height: 100%; } .magic-thumbs-vertical { padding: 30px 0; } .magic-thumbs-vertical ul { height: auto; width: 100%; white-space: normal; } .magic-thumbs-vertical ul li { width: 100%; height: auto; } .magic-thumbs-vertical ul li { margin: 4px 0; } .magic-thumbs-vertical ul li > img { max-width: 100% !important; max-height: none !important; } .ie8-magic .magic-thumbs-vertical ul li > img { width: 100%; } /** * Buttons */ .magic-thumbs button.magic-thumbs-button { color: #b4b4b4 !important; font: 900 24px/1 'magictoolbox-thin' !important; cursor: pointer; z-index: 90 !important; background-repeat: no-repeat; background-color: transparent !important; background-image: none; border: 0; border-radius: 0; box-shadow: none !important; overflow: hidden; position: absolute; text-transform: none !important; speak: none; text-align: center; -webkit-font-smoothing: antialiased; width: 30px; height: 100%; top: 0; bottom: 0; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; } .magic-thumbs button.magic-thumbs-button:before { display: inline; position: static; color: inherit !important; font: inherit !important; -webkit-font-smoothing: inherit !important; } .magic-thumbs .magic-thumbs-button-prev { left: 0; } .magic-thumbs .magic-thumbs-button-next { right: 0; } .magic-thumbs .magic-thumbs-button-prev:before { content: "\a002"; } .magic-thumbs .magic-thumbs-button-next:before { content: "\a003"; } :root:not(.mobile-magic) .magic-thumbs button.magic-thumbs-button { color: rgba(180, 180, 180, .75) !important; -webkit-transform: scale(.85) !important; transform: scale(.85) !important; -webkit-transition: color .25s, -webkit-transform .25s !important; transition: color .25s, transform .25s !important; } :root:not(.mobile-magic) .magic-thumbs button.magic-thumbs-button:hover { color: rgba(180, 180, 180, 1) !important; -webkit-transform: scale(1) !important; transform: scale(1) !important; } /* Vertical buttons */ .magic-thumbs-vertical .magic-thumbs-button { width: 100%; height: 30px; left: 0; right: 0; top: auto; bottom: auto; } .magic-thumbs-vertical .magic-thumbs-button-prev { top: 0; } .magic-thumbs-vertical .magic-thumbs-button-next { bottom: 0; } .magic-thumbs-vertical .magic-thumbs-button-prev:before { content: "\a005"; } .magic-thumbs-vertical .magic-thumbs-button-next:before { content: "\a004"; } .magic-thumbs.no-buttons .magic-thumbs-button { display: none !important; } .magic-thumbs-button-disabled { opacity: 0.2; filter: alpha(opacity = 20); } .mz-expand a{ position: absolute; top: -150px;} .MagicZoom figure div a,.MagicZoom figure span a{display:none!important;font-size:0!important;z-index:-1!important;position:absolute} #mini_photo .mz-thumb-selected{border-color:#009acb}/* perfect-scrollbar v0.7.0 */ .ps{-ms-touch-action:auto;touch-action:auto;-ms-overflow-style:none}@supports (-ms-overflow-style: none){.ps{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps{overflow:auto !important}}.ps.ps--active-x>.ps__scrollbar-x-rail,.ps.ps--active-y>.ps__scrollbar-y-rail{display:block;background-color:rgba(255,255,255,.5); border-radius: 6px;}.ps.ps--in-scrolling.ps--x>.ps__scrollbar-x-rail{background-color:#eee;opacity:.9}.ps.ps--in-scrolling.ps--x>.ps__scrollbar-x-rail>.ps__scrollbar-x{background-color:#999;height:10px}.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail{background-color:#eee;opacity:.9}.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y{background-color:#999;width:7px}.ps>.ps__scrollbar-x-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;bottom:0px;height:13px}.ps>.ps__scrollbar-x-rail>.ps__scrollbar-x{position:absolute;background-color:#fff;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;bottom:3px;height:7px}.ps>.ps__scrollbar-x-rail:hover>.ps__scrollbar-x,.ps>.ps__scrollbar-x-rail:active>.ps__scrollbar-x{height:10px}.ps>.ps__scrollbar-y-rail{display:none;position:absolute;opacity:.6;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;right:7px;width:7px}.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y{position:absolute;background-color:#fff;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;right: 0px; width: 7px;} #big_menu_xml .first:hover .ps{overflow:hidden !important;} .ps:hover.ps--in-scrolling.ps--x>.ps__scrollbar-x-rail>.ps__scrollbar-x{background-color:#999;height:10px}.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail{background-color:#eee;opacity:.9}.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y{background-color:#999;width:11px}.ps:hover>.ps__scrollbar-x-rail,.ps:hover>.ps__scrollbar-y-rail{opacity:1}.ps:hover>.ps__scrollbar-x-rail:hover{background-color:#eee;opacity:.9} #group_blocks_popup .ps>.ps__scrollbar-y-rail{right: 7px;} #gifts_box{overflow: hidden; min-height: 600px;} .ejednevniki-i-bloknoty{background-image:url('../../../media/site/gifts/ejednevniki-i-bloknoty.png'); } .novyy-god{background-image:url('../../../media/site/gifts/novyy-god.png'); } .odejda{background-image:url('../../../media/site/gifts/odejda.png'); } .zonty{background-image:url('../../../media/site/gifts/zonty.png'); } .posuda{background-image:url('../../../media/site/gifts/posuda.png'); } .podarochnye-nabory{background-image:url('../../../media/site/gifts/podarochnye-nabory.png'); } .elektronika{background-image:url('../../../media/site/gifts/elektronika.png'); } .ruchki{background-image:url('../../../media/site/gifts/ruchki.png'); } .personalnye{background-image:url('../../../media/site/gifts/personalnye.png'); } .sumki{background-image:url('../../../media/site/gifts/sumki.png'); } .dom{background-image:url('../../../media/site/gifts/dom.png'); } .otdyh{background-image:url('../../../media/site/gifts/otdyh.png'); } .nagrady{background-image:url('../../../media/site/gifts/nagrady.png'); } .upakovka{background-image:url('../../../media/site/gifts/upakovka.png'); } .promo{background-image:url('../../../media/site/gifts/promo.png'); } .suveniry-k-prazdnikam{background-image:url('../../../media/site/gifts/suveniry-k-prazdnikam.png'); } #big_menu_xml .first:hover .ejednevniki-i-bloknoty, .active #mini_menu_xml .first .img.ejednevniki-i-bloknoty{background-image:url('../../../media/site/gifts/ejednevniki-i-bloknoty_a.png'); } #big_menu_xml .first:hover .novyy-god, .active #mini_menu_xml .first .img.novyy-god{background-image:url('../../../media/site/gifts/novyy-god_a.png'); } #big_menu_xml .first:hover .odejda, .active #mini_menu_xml .first .img.odejda{background-image:url('../../../media/site/gifts/odejda_a.png'); } #big_menu_xml .first:hover .zonty, .active #mini_menu_xml .first .img.zonty{background-image:url('../../../media/site/gifts/zonty_a.png'); } #big_menu_xml .first:hover .posuda, .active #mini_menu_xml .first .img.posuda{background-image:url('../../../media/site/gifts/posuda_a.png'); } #big_menu_xml .first:hover .podarochnye-nabory, .active #mini_menu_xml .first .img.podarochnye-nabory{background-image:url('../../../media/site/gifts/podarochnye-nabory_a.png'); } #big_menu_xml .first:hover .elektronika, .active #mini_menu_xml .first .img.elektronika{background-image:url('../../../media/site/gifts/elektronika_a.png'); } #big_menu_xml .first:hover .ruchki, .active #mini_menu_xml .first .img.ruchki{background-image:url('../../../media/site/gifts/ruchki_a.png'); } #big_menu_xml .first:hover .personalnye, .active #mini_menu_xml .first .img.personalnye{background-image:url('../../../media/site/gifts/personalnye_a.png'); } #big_menu_xml .first:hover .sumki, .active #mini_menu_xml .first .img.sumki{background-image:url('../../../media/site/gifts/sumki_a.png'); } #big_menu_xml .first:hover .dom, .active #mini_menu_xml .first .img.dom{background-image:url('../../../media/site/gifts/dom_a.png'); } #big_menu_xml .first:hover .otdyh, .active #mini_menu_xml .first .img.otdyh{background-image:url('../../../media/site/gifts/otdyh_a.png'); } #big_menu_xml .first:hover .nagrady, .active #mini_menu_xml .first .img.nagrady{background-image:url('../../../media/site/gifts/nagrady_a.png'); } #big_menu_xml .first:hover .upakovka, .active #mini_menu_xml .first .img.upakovka{background-image:url('../../../media/site/gifts/upakovka_a.png'); } #big_menu_xml .first:hover .promo, .active #mini_menu_xml .first .img.promo{background-image:url('../../../media/site/gifts/promo_a.png'); } #big_menu_xml .first:hover .suveniry-k-prazdnikam, .active #mini_menu_xml .first .img.suveniry-k-prazdnikam{background-image:url('../../../media/site/gifts/suveniry-k-prazdnikam_a.png'); } #big_menu_xml{background-image: url('../../../media/site/gifts/main.png'); background-size: cover; background-position: center; padding-bottom: 60px;} #big_menu_xml h1{font-size: 34px; text-align: center; color: #fff; padding: 55px 0 45px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;} #big_menu_xml .first{display: inline-block; vertical-align: top; width: 20%; height: 250px; position: relative;} #big_menu_xml .first .back{padding: 0 10px 0 20px; width: 120%;} #big_menu_xml .first .back>a{position: relative; display: block; margin-bottom: 2px; height: 65px;} #big_menu_xml .first .back>a .img{position: absolute; left: -5px; top: -5px;} #big_menu_xml .first .back>a .name{font-size: 18px; font-weight: 700; padding-left: 55px; display: inline-block; padding-right: 10px;} #big_menu_xml .second{width: 100%; padding-left: 10px; max-height: 370px; } #big_menu_xml .second .scrollbar{max-height: 370px; padding-right: 20px; position: relative;} #big_menu_xml .second a, #big_menu_xml .second p{font-size: 14px; padding-left: 1px; width: 100%; position: relative; line-height: 1.3; padding: 5px 10px; opacity: 0; display: block;} #big_menu_xml .second a:nth-child(1), #big_menu_xml .second a:nth-child(2), #big_menu_xml .second a:nth-child(3){opacity: 1;} #big_menu_xml .second a:before{content: ''; background-color: rgb(239, 68, 35); width: 04px; height: 04px; position: absolute; top: 8px; left: 0; border-radius: 50%;} #big_menu_xml .second p{color: #ef4423; display: inline; text-decoration: underline; opacity: 1; height: 0; padding: 0 10px;} #big_menu_xml .second .ps.ps--active-x>.ps__scrollbar-x-rail, #big_menu_xml .second .ps.ps--active-y>.ps__scrollbar-y-rail{display: none;} #big_menu_xml .first:hover .back{background-color: #ef4423; position: absolute; top: -40px; padding: 40px 0px 40px 20px; height: auto; border-radius: 5px; z-index: 2; } #big_menu_xml .first:hover .second .ps.ps--active-x>.ps__scrollbar-x-rail, #big_menu_xml .first:hover .second .ps.ps--active-y>.ps__scrollbar-y-rail{display: block;} #big_menu_xml .first:hover .second p{display: none; } #big_menu_xml .first:hover .second a{ opacity: 1;} #big_menu_xml .first:hover .second a:hover:after{content:'';position: absolute; left: 0; top: 0; width: 100%; height: 100%; border:1px solid #fff;} #big_menu_xml .first:hover .second a:hover{color: #fff;} #big_menu_xml .ejednevniki-i-bloknoty{ width: 36px; height: 50px; } #big_menu_xml .novyy-god{ width: 41px; height: 53px; } #big_menu_xml .odejda{ width: 45px; height: 48px; } #big_menu_xml .zonty{ width: 42px; height: 50px; } #big_menu_xml .posuda{ width: 51px; height: 44px; } #big_menu_xml .podarochnye-nabory{ width: 47px; height: 47px; } #big_menu_xml .elektronika{ width: 26px; height: 46px; } #big_menu_xml .ruchki{ width: 16px; height: 58px; } #big_menu_xml .personalnye{ width: 37px; height: 35px; } #big_menu_xml .sumki{ width: 33px; height: 41px; } #big_menu_xml .dom{ width: 46px; height: 38px; } #big_menu_xml .otdyh{ width: 48px; height: 48px; } #big_menu_xml .nagrady{ width: 36px; height: 37px; } #big_menu_xml .upakovka{ width: 39px; height: 41px; } #big_menu_xml .promo{ width: 40px; height: 47px; } #big_menu_xml .suveniry-k-prazdnikam{ width: 51px; height: 60px; } #filter_box{margin-bottom: 40px; text-align: center; font-size: 0;} .f_box{width: auto; display: inline-block; vertical-align: top; margin:0 15px 15px 0; background-color: #ef4423; height: 50px; position: relative;} .f_box:before{content: ""; width: 14px; height: 8px; position: absolute; right: 35px; top: 0; bottom: 0; margin: auto 0; background-image: url('../../../media/site/gifts/i_arrow_down.png'); background-size: 100%; background-repeat: no-repeat;} .f_box span{font-size: 18px; line-height: 50px; height: 100%; text-align: center; padding: 0 60px 0 46px; font-weight: 700; display: block;} .f_list{width: 300px; max-height: 520px; position: absolute; top: 50px; left: 0; display: none; padding: 20px 0 20px;} .f_list .back{width: 100%; height: calc(100% - 20px);background-color: #ef4423; text-align: left; border-radius: 10px; padding: 10px 0;position: absolute; left: 0; top: 10px;} .f_list a{font-size: 16px; color: #fff; display: block; width: 100%; line-height: 30px; padding-left: 40px; position: relative; text-align: left; white-space: nowrap; text-overflow: ellipsis; padding-right: 21px; overflow: hidden;} .f_list a:hover{background-color: #fff; color: #ef4423;} .f_box:hover .f_list, .f_box .f_list:hover{display: block; z-index: 2;} .f_list .scrollbar{overflow: hidden; height: 100%; position: relative; max-height: 480px;} #filter_box .f_btn, #filter_box .g_f_clear{font-size: 18px; line-height: 50px; height: 50px; text-align: center; padding: 0 60px 0 46px; font-weight: 700; display: inline-block; vertical-align: top; margin:0 15px 15px 0; background-color: #ef4423; position: relative;} #filter_box .f_btn:hover, #filter_box .g_f_clear:hover{color: #fff;} #filter_box .f_btn span{position: absolute; right: 10px; line-height: inherit; color: inherit; font-size: inherit; top: 0; font-weight: inherit;} #filter_box.other{text-align: left;} #filter_box.other .f_box{height: 34px; background-color: #b9b9b9; } #filter_box.other .f_box:hover{background-color: #ef4423;} #filter_box.other .f_box:before{right: 10px;} #filter_box.other .f_box span, #filter_box.other .f_btn, #filter_box.other .g_f_clear{line-height: 34px; text-align: left; padding: 0 34px 0 10px; min-width: 169px; font-size: 15px;} #filter_box.other .f_list{top: 34px;} #filter_box.other .f_btn, #filter_box.other .g_f_clear{height: 34px; } #filter_box.other .g_f_clear:before{content: ""; width: 14px; height: 14px; position: absolute; right: 5px; top: 0; bottom: 0; margin: auto 0; font-size: 20px; line-height: 8px; background-image: url('../../../media/site/gifts/i_close.png'); background-size: 100%; background-repeat: no-repeat;} #g_group_left { float: left; width: 20%; padding: 0px 30px 0 0px; font-size: 0;} #g_group_left a{ height: 60px; line-height: 58px; border: 1px solid #fff; margin-bottom: 1px; padding: 0 20px; display: block;} #g_group_left a span{font-size: 16px; color: #000; line-height: 1; display: inline-block; vertical-align: middle;} #g_group_left a:hover, #g_group_left a.active{border-color: #ef4423; } #g_group_left a:hover span, #g_group_left a.active span{ color: #ef4423; font-size: 18px; font-weight: 700;} #g_cat_list_box{padding-top: 60px;} #g_cat_list_box h2, #g_cat_list_box h1{text-align: left; float: left; width: 100%; margin-bottom: 30px; font-size: .36rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02rem;} #g_cat_list{float: left; width: 80%;} .g_cat_list{ width: 25%; height: 355px; padding-right: 30px; position: relative; display: inline-block; vertical-align: top; font-size: 15px; margin-bottom: 90px; } .g_cat_list .content{ width: 100%; box-sizing: border-box; display: block; height: 100%; overflow: hidden; position: relative;} .g_cat_list:hover{z-index: 1;} .g_cat_list:hover .content{width: calc(100% + 60px); height: calc(100% + 60px); margin: -30px auto auto -30px; padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,.2); } .g_cat_list .photo{width: 75%; background-size: contain; background-position: center; margin-bottom: 28px; display: inline-block;} .g_cat_list .photo, .g_sl_add_box{height: 145px;} .g_cat_list .name{text-transform: uppercase; font-size: 13px; color: #000; font-weight: 700; line-height: 1.3; height: 3.9em; overflow: hidden; margin-bottom: 30px;} .g_cat_list .price{text-align: center; font-size: 31px; color: #fff; background-color: #ef4423; border-radius: 3px; vertical-align: middle; width: 136px; height: 40px; line-height: 40px; letter-spacing: -.05em; margin-bottom: 12px;} .g_cat_list .price span{color: #fff; font-size: 13px; padding-left: 7px; vertical-align: bottom; letter-spacing: 0; padding-bottom: 8px; display: inline-block;} .g_cat_list .add{ font-size: 13px; color: #000; line-height: 1.2;} .g_center{width: 1150px; max-width: 90%; margin: 0 auto; font-size: 0;} .g_center h1, .g_center h2{color: #000;} #g_cat_list_box .site_paginator{ width: auto; display: inline-block; height: auto; margin-bottom: 40px; } #g_cat_list_box .site_paginator ul { margin: 0; background: none; width: 100%; height: 100%;} #g_cat_list_box .site_paginator ul li { display: inline-block; list-style-type: none; background: none; padding-right: 12px; width: auto; height: 100%; } #g_cat_list_box .site_paginator * { text-decoration: none !important; cursor: pointer; display: block; font-size: 20px;} #g_cat_list_box .site_paginator span{cursor: default;} #g_cat_list_box .site_paginator .arrow_prev , .site_paginator .arrow_next{margin-top: -1px;} #g_cat_list_box .site_paginator a, #g_cat_list_box .site_paginator span{color: #ef4423;} #g_cat_list_box .site_paginator .current{width: 30px; height: 30px; border-radius: 3px; background-color: #ef4423; color: #fff; text-align: center; line-height: 30px;} #g_cat_list_add_box{height: 70px; box-shadow: 0 0 40px hsla(202,14%,31%,.2); background: #ef4423; color: #fff; } #g_cat_list_add_box .g_center{ position: relative; display: flex; align-items: center; justify-content: center; height: 100%;} .g_cat_list_btn{ padding: 0; height: 100%; display: inline-block; vertical-align: top; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .g_cat_list_btn>p, #g_i_cart a{height: 100%; padding: 0 40px 0 40px; line-height: 70px; font-size: 22px; text-align: center; color: #fff; position: relative; display: block;} #g_cat_btn{ position: absolute; top: 0; bottom: 0; margin: auto 0; left: 0; width: 30px; height: 18px; cursor: pointer; z-index: 201; display: block;} #g_cat_btn i { display: block; position: absolute; width: 100%; opacity: 1; left: 0; height: 2px; background: #fff; margin: 0; top: 0; border-radius: 2px;} #g_cat_btn i:nth-child(2){ top: 8px; } #g_cat_btn i:nth-child(3) { top: 16px; } #g_cat_btn.active i{background-color: #fff;} #g_cat_btn.active i:nth-child(1){transform: rotate(45deg); top: .18rem; left: .03rem;} #g_cat_btn.active i:nth-child(3){transform: rotate(-45deg); top: .18rem; left: .03rem;} #g_cat_btn.active i:nth-child(2){display: none;} #g_cat_btn.active{ z-index: 201; top: -.2rem;} #g_i_filter>p:before{content: ""; position: absolute; width: 22px; height: 23px; top: 0; bottom: 0; margin: auto 0; left: 0; background-image: url('../../../media/site/gifts/i_filter.png'); background-size: 100%; background-repeat: no-repeat;} #g_i_search{flex:1;} #g_i_search>p{padding: 0 40px 0 0; display: inline-block; vertical-align: middle; width: 30%; text-align: right;} #g_i_search form{ display: inline-block; vertical-align: middle; height: 80%; border: 0; box-shadow: none; background: none; line-height: 70px; width: 50%;} #g_i_search form input[type=text] { width: 100%; height: 100%; padding: 0 25px; line-height: 70px; background: #fff; color: #ef4423; font-size: 19px; text-align:center; font-style: normal; font-weight: 500; border: 0; border-radius: 0; box-shadow: none; border-radius: 5px;} #g_i_search form input[type=submit]{position: absolute;right: 0; top: 0; width: 1px; height: 1px; border:0;box-shadow: none; opacity: 0;} #g_i_search.active{line-height: 69px;} #g_i_search.active>p{display: none;} #g_i_search.active form{width: 100%;} #g_i_search form input::placeholder{ font-size: 0 !important;} .g_search_text, .g_empty{width: 100%; font-size: 22px; color: #000; float: left; margin-bottom: 30px;} #g_i_cart>a{padding-left: 50px;} #g_i_cart>a>p{font-size: 22px; text-align: left; color: #fff; display: inline-block;vertical-align: middle; line-height: 1;} #g_i_cart>a>p span{ line-height: 1em; font-size: 14px; } #g_i_cart{width: 200px; } #g_i_cart>p:before, #g_i_cart>a>p:before{content: ""; position: absolute; width: 35px; height: 31px; top: 0; bottom: 0; margin: auto 0; left: 0; background-image: url('../../../media/site/gifts/i_cart.png'); background-size: 100%; background-repeat: no-repeat;} #g_i_cart em{position: absolute; top: 10px; left: 23px; z-index: 1; font-size: 11px; text-align: center; font-style: normal; background: #fff; border-radius: 20px; color: #ef4423; height: 20px; width: 20px; line-height: 20px;} #mini_menu_xml{width: 50vw; height: auto; left: 0; padding: 30px 0 0 30px; transition: opacity .2s; position: absolute; display: none; top: 80px; z-index: 2;} .active #mini_menu_xml{display: block; box-shadow: 0 20px 60px rgba(0,0,0,.2);} .active #mini_menu_xml .back{z-index: 1;position: absolute; width: 100%; height: 100%;background-color: #ef4423;border-radius: 10px; top: 0; left: 0;} #mini_menu_xml .first{ width: 33%; display: inline-block; padding: 0 30px 10px 0; vertical-align: top; position: relative; z-index: 1;} #mini_menu_xml .first:hover{z-index: 2;} #mini_menu_xml:after { content: ''; position: absolute; z-index: 101; left: 50%; bottom: -15px; transform: translateX(-10px); visibility: hidden; opacity: 0; transition: opacity .2s; border: 10px solid; border-color: transparent transparent #000 transparent;} #mini_menu_xml .first .img{background-size: contain; background-position: center left; background-repeat: no-repeat; display: inline-block; height: 20px; width: 17%; vertical-align: middle;} #mini_menu_xml .first a{padding-right: 20px; display: block; position: relative;z-index: 2; padding-bottom: 20px;} #mini_menu_xml .first .name{ font-size: 14px; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 83%; display: inline-block; vertical-align: middle;} #mini_menu_xml .second{width: 100%; padding: 10px; max-height: 300px; position: absolute; opacity: 0; top: 30px; left: 12%; background-color: #fff; border-radius: 5px; box-shadow: 0 15px 130px rgba(0,0,0,.4);} #mini_menu_xml .first:hover .second{opacity: 1; z-index: 4;} #mini_menu_xml .second .scrollbar { max-height: 280px; overflow-y: auto; padding-right: 20px; position: relative;} #mini_menu_xml .first:hover .second .scrollbar{ opacity: 1; height: auto; overflow: hidden;} #mini_menu_xml .second a{font-size: 14px; color: #ef4423; padding: 10px 0;} #mini_menu_xml .second .ps.ps--active-y>.ps__scrollbar-y-rail{background-color: rgba(244, 67, 54, .5); height: 280px;} #mini_menu_xml .second .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y{background-color: #ef4423;} #g_i_filter form{display: none; width: 200px; height: auto;padding: 30px 20px; background-color: #ef4423; border-radius: 5px; } #g_i_filter.active form{display: block; position: absolute;z-index: 4; top: 80px;} #g_i_filter form p{width: 100%; color: #fff; font-size: 16px; text-align: center;padding-bottom: 10px;} #g_i_filter form .g_form_block{display: flex;flex-direction: row; justify-content: space-between; } #g_i_filter form input[type=text]{height: 30px; border-width:0 0 1px 0; border-color: #fff; font-size: 16px; color: #fff; background-color: transparent;box-shadow: none; text-align: center; width: 100%; margin-bottom: 30px;} #g_i_filter form input[type=text].g_half{width: 40%; display: inline-block; vertical-align: top;} #g_i_filter form input[type=submit]{width: 100%; background-color: #fff; color: #ef4423; text-align: center;height: 40px; line-height: 40px; border-radius: 5px; border:0; font-size: 16px;} #g_i_filter form input::placeholder{font-weight: 400; font-size: 16px !important; color: #ecdede; font-style: normal;} #g_i_filter form input:focus, #g_i_filter form textarea:focus{outline: none;} .g_sl_add_box{ width: 25%; vertical-align: top; position: relative; padding: 20px 0; display: inline-block; position: absolute; right: 0; top: 0; z-index: 1;} .g_cat_list:hover .g_sl_add_box{right: 30px; top: 30px; width: 19%;} .g_sl_add {overflow: hidden;} /*.g_cat_list:hover .g_sl_add_box{width: calc(100% - 60px);}*/ .g_sl_add .g_add_photo{height: 50px; display: inline-block;vertical-align: top;width: 100%; padding: 5px;} .g_sl_add .g_add_photo a{width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; display: block;} /*.g_sl_add_box{position: absolute; height: 100%; width: 100%; top: 0; left: 0;}*/ .g_sl_add_box .slick-arrow{position: absolute; top: 0; bottom: 0; margin: auto; width: 7px; height: 11px; background-size: 100%; background-repeat: no-repeat; font-size: 0; border:0; background-color: transparent; display: none !important; opacity: 0;} .g_sl_add_box .slick-arrow.slick-next{background-image: url('../../../media/site/gifts/i_arrow_next.png'); top: 0;} .g_sl_add_box .slick-arrow.slick-prev{background-image: url('../../../media/site/gifts/i_arrow_prev.png'); bottom: 0;} /*CAT ITEM*/ #g_cat_item .flex{display: flex;position: relative;} #g_cat_item #cat_photo_box{width: 45%; margin: 0 5% 10% 0; display: inline-block; vertical-align: top;} #g_cat_item #cat_photo_box #g_big_photo img {max-width: 100%;} #g_big_photo{height: 500px; position: relative; display: block;} #g_big_photo figure { width: 100%; height: 100%; position: relative;} body main div div#g_cat_item div div#cat_photo_box a#g_big_photo > .mz-figure > img, #g_big_photo figure>img{ width: auto !important; top: 0; left: 0; bottom: 0; right: 0; position: absolute; max-width: 100% !important; max-height: 100% !important; height: auto !important;} #g_big_photo.MagicZoom img{cursor: url('../../../media/site/gifts/zoom.svg'),auto; } #g_mini_photo{ text-align: center; margin-top: 30px; position: relative; z-index: 100;} #g_mini_photo a{width: 70px; height: 70px; position: relative; border-radius: 6px; border:2px solid #f9f9f9; margin: 5px; padding: 5px;} #g_mini_photo a[data-zoom-id] img, #g_mini_photo .mz-thumb img{box-shadow: none;} #g_mini_photo .mz-thumb-selected img, #g_mini_photo .mz-thumb:hover:not(.mz-thumb-selected) img{filter: none;} #g_mini_photo a.mz-thumb-selected{box-shadow: 0 10px 30px rgba(0,0,0,.25);} #g_cat_item h1{font-size: 30px; text-align: left; text-transform: uppercase; font-weight: 700; margin-bottom: 1em;} #g_cat_item_text{flex: 1;} .g_info{color: #ef4423; font-size: 15px; padding: 1em 0;} #g_photo_links{width: 100%; display: block; margin-bottom: 20px;} #g_photo_links a{ position: relative; text-align: center; display: inline-block; line-height: 100%; vertical-align: middle; width: 40px; height: 35px; margin: 0 10px 10px 0; padding-bottom: 5px; background-size: contain; background-position: center;} #g_photo_links a:hover:before, #g_photo_links a.active:before{ content:""; width: 100%; height: 2px; background-color: #ef4423; position: absolute; bottom: -5px; left: 0; } #g_price_block>span{font-size: 15px; color: #8c8c8c; display: block;padding-bottom: 3px;} #g_price_block p{text-align: center; font-size: 40px; color: #fff; background-color: #ef4423; border-radius: 3px; vertical-align: middle; width: 215px; height: 55px; line-height: 55px; letter-spacing: -.05em; margin-bottom: 20px;} #g_price_block p>span{color: #fff; font-size: 17px; padding-left: 5px; vertical-align: bottom; letter-spacing: 0; padding-bottom: 10px; display: inline-block;} #g_buy_tbl{margin: 0 0 30px 0; width: 100%;} #g_buy_tbl *{font-size: 18px; color: #000;} #g_buy_tbl th{ height: 2em; line-height: 2em; font-size: 18px; text-transform: uppercase; font-weight: 700; text-align: left;border-bottom: 1px solid #000;} #g_buy_tbl td{padding: 5px 0; position: relative;} #g_buy_tbl tr:first-child td{padding-top: 20px;} #g_buy_tbl tr:last-child td{padding-bottom:20px;} #g_buy_tbl tr td input{border: none; border-bottom: 2px solid #e27762; width: 6em; text-align: center; padding: 2px 0; display: inline-block;} #g_buy_tbl tr td .way{display: block; font-size: .7em; opacity: .7; cursor: default;} #g_buy_tbl .tip-hover .tip, #basket_box .tip-hover .tip { box-sizing: border-box; display: none; min-width: 210px; box-shadow: 0 0 15px hsla(202,14%,31%,.5); border-radius: 5px; background-color: #43525a; color: #fff; padding: 15px; text-align: center; position: absolute; left: 2em; margin-left: 15px; z-index: 100; top: -25px; pointer-events: none;} #g_buy_tbl .tip-hover:hover .tip, #basket_box .tip-hover:hover .tip { display: block; } #g_buy_tbl .tip-hover .tip:before, #basket_box .tip-hover .tip:before { content: ""; display: block; position: absolute; right: 100%; top: 1.2em; border: 10px solid; border-color: transparent #43525a transparent transparent;} #g_buy_tbl .tip-hover .tip-header, #basket_box .tip-hover .tip-header {padding: 0 0 5px 0; color: #fff; margin: 0; font-size: 15px; } #g_buy_tbl .tip-hover .tip table, #basket_box .tip-hover .tip table { width: 100%!important; } #g_buy_tbl .tip-hover .tip table td, #g_buy_tbl .tip-hover .tip table th, #basket_box .tip-hover .tip table td, #basket_box .tip-hover .tip table th { background-color: #43525a!important; color: #fff!important; text-align: center!important; border: none!important; padding: 2px!important; white-space: nowrap; } #g_buy_tbl .tip-hover .tip table th, #g_buy_tbl .tip-hover .tip td b, #basket_box .tip-hover .tip table th, #basket_box .tip-hover .tip td b { font-size: 13px; color: #fff;} #g_buy_tbl .tip-hover svg, #basket_box .tip-hover svg{width: 30px; height: 30px; display: inline-block;} #g_buy_tbl .tip-hover, #basket_box .tip-hover{position: relative;} #g_buy_tbl .tip-hover.skl, #basket_box .tip-hover.skl{display: inline-block; vertical-align: middle;} #g_buy_tbl .tip-hover.skl .tip:before, #basket_box .tip-hover.skl .tip:before{top: 1.8em;} #g_buy_tbl .tip *, #basket_box .tip *{color: #fff;} #basket_box .tip-hover .tip{left: -12em; top: 115%; } #basket_box .tip-hover.skl .tip:before{ top: -18px; border-color: transparent transparent #43525a transparent; right: 1.4em; } .g_buy{width: 15em; max-width: 100%; background-color: #ef4423; display: block; height: 55px; line-height: 55px; padding-left: 2em; margin-bottom: 60px; border-radius: 3px;font-size: 18px; height: 55px; line-height: 55px; text-transform: uppercase; text-align: center;} .g_buy span{position: relative; color: #fff;} .g_buy span:before{content:""; position: absolute; width: 34px; height: 31px; top: 0; bottom: 0; margin: auto 0; left: -2.5em; background-image: url('../../../media/site/gifts/i_cart.png'); background-size: 100%; background-repeat: no-repeat;} .g_buy:hover{ color: #fff; background-color: #ff674a; } #params_tbl{margin-bottom: 40px;} #params_btn{width: 100%; border-bottom: 1px solid #000;} #params_btn a{display: inline-block; position: relative; vertical-align: top; height: 2em; line-height: 2em; font-size: 18px; text-transform: uppercase; font-weight: 700; /*width: 30%;*/padding: 0 10px 0 10px; color: #8c8c8c; } #params_btn a:nth-child(2){padding-left: 20px;} #params_btn a.active{color: #000;} #params_btn a.active:after{content: ""; position: absolute; height: 6px; width: 100%; position: absolute; bottom: -3px; left: 0; background-color: #ef4423;} #params_tbl .params{width: 100%; display: none;} #params_tbl .params.active{display: block;} #params_tbl .params ul{width: 50%; display: inline-block; vertical-align: top; margin: 30px 0 15px; } #params_tbl .params ul.print_box{width: 100%;} #params_tbl .params ul li{width: 100%; display: block; margin-bottom: 15px;} #params_tbl .params ul li p{font-size: 16px;} #params_tbl .params ul li p.name{color: #8c8c8c; text-transform: uppercase; padding-bottom: 3px; font-size: 13px;} #params_tbl .params ul li p.value{color: #000;} #params_tbl .params ul li p.print{color: #ef4423;} #params_tbl .params.files a{ text-decoration: underline; } #params_tbl .params.files ul{width: 100%;} #g_cat_item_text .descr, #g_cat_item_text .descr *, #params_tbl .files a{font-size: 16px; color: #000;} #g_cat_item_text .descr th {color: #b2b2b2; font-size: .9em; } #g_cat_item_text .descr td, #g_cat_item_text .descr th { padding: .5em; text-align: center; } #g_cat_item_text .descr td:first-child, #g_cat_item_text .descr th:first-child { text-align: left; background-color: transparent; } #g_cat_item_text iframe { max-width: 100%; margin-bottom: 20px; padding-bottom: 20px; border: 0; border-bottom: 1px dotted #999;} #g_cat_item_text .descr img { max-width: 100%; max-height: 100%; height: auto;} #g_alert{z-index: 111; top: 80px; position: absolute; width: 100%; display: none;} #g_alert.active{display: block;} #g_alert>div{top: 0px; display: flex; padding-bottom: 1px; justify-content: center; transition: top .3s ease-in-out,opacity .3s; opacity: 0; position: relative; } #g_alert.active>div{opacity: 1;} #g_alert .message{height: 50px; display: flex; padding: 0 42px 0 20px; background-color: #53e629; position: relative;} #g_alert>div span{color: #fff; font-size: 18px; line-height: 50px;} #g_alert>div .close{content: ""; width: 14px; height: 14px; position: absolute; right: 15px; top: 0; bottom: 0; margin: auto 0; font-size: 20px; line-height: 8px; background-image: url('../../../media/site/gifts/i_close.png'); background-size: 100%; background-repeat: no-repeat;} #orders_modal{position: absolute; right: 0; top: 0; width: auto; padding: 30px; font-size: 17px;} #orders_modal{opacity:0; -webkit-transition: opacity ease-in-out .3s; -moz-transition: opacity ease-in-out .3s; -o-transition: opacity ease-in-out .3s; transition: opacity ease-in-out .3s;} #orders_modal.active { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.3); opacity: 1; z-index: 150;} #orders_modal .close_back{width: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 151;} #orders_modal .close, #orders_modal .delete, .orders_list .delete, #basket_popup .close, #basket_popup .delete{ cursor: pointer; z-index: 153; position: absolute; background: url('../../../media/site/i_close2.png'); background-size: 100%; background-repeat: no-repeat;} #orders_modal .close{top: 22px; right: 20px; height: 30px; width: 30px; } #orders_modal .delete{top: 0; bottom: 0; margin: auto 0; right: 20px; height: 15px; width: 15px;} #orders_modal.active .order_center{overflow: hidden; position: relative; margin: 0 auto; margin-top: 100px; width: 450px; padding: 30px; height: auto; background-color: #fff; z-index: 152;} #orders_modal .modal_center{width: 700px; height: auto; position: relative; margin: 100px auto 0; background-color: #fff; z-index: 152; max-width: 100%;} #orders_modal .modal_center .caption{width: 100%; height: auto; padding: 20px; color: #444; border-top: 5px solid #ef4423; background-color: #e8e8e8; font-size: 20px;} #orders_modal .modal_center .good{padding: 20px; width: 100%; height: auto; position: relative; border-bottom: 1px solid #e8e8e8; color: #000;} #orders_modal .modal_center .good img, #orders_modal .modal_center .good h3, #orders_modal .price{display: inline-block; vertical-align: middle;} #orders_modal .modal_center .good img{width: 50px; height: auto; margin-right: 20px;} #orders_modal .modal_center .good h3{height: auto; width: 400px; font-size: 16px; font-weight: 300; padding: 0; color: #000; max-width: 100%;} #orders_modal .price{width: 120px; height: auto; text-align: left; position: relative;} #orders_modal .price, #orders_modal .price span{font-size: 18px;text-align: left;font-weight: 400; font-style: normal;padding-left: 20px; color: #000;} #orders_modal .price span{color: #F3003D; position: absolute; left: 0; top: -20px; text-decoration: line-through; display: inline; font-size: 14px;} #orders_modal .modal_center .sum{width: 100%; height: auto; padding: 20px; color: #444; background-color: #e8e8e8; font-size: 20px;} #orders_modal .modal_center .sum span{font-size: 20px; color: #ef4423;} #orders_modal .btn_box{text-align: center; padding: 30px 0;} #orders_modal .continue, #orders_modal .go_to_basket{ text-transform: uppercase; display: inline-block; margin: 0 30px; border: 1px solid #fff; padding: 0 20px; font-size: 14px; cursor: pointer; text-align: center; height: 35px; line-height: 33px; width: auto;} #orders_modal .continue{ color:#ef4423; background-color: #fff; } #orders_modal .go_to_basket{ color:#fff; background-color: #ef4423; border-color: #ef4423;} #orders_modal .go_to_basket:hover{ color:#ef4423; background-color: #fff; } /* ORDERS BASKET LIST*/ #basket_box{display: flex; overflow: hidden; flex-direction: row; align-items: top;} #orders_list{ width: 60%; padding: 20px 0 50px 0; overflow: hidden;} .orders_list{ width: 100%; height: 80px; position: relative; display: inline-block; vertical-align: top; font-size: 15px; margin-bottom: 20px; border:1px solid #e8e8e8; } .order_header{ height: 30px; line-height: 30px;display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: space-between; padding: 0 48px 0 20px;} .order_header p {color: #888; font-size: 16px; width: 20%; text-align: center;} .order_header p:nth-child(2){width: 50px;} .order_header p:first-child{width: 25%; text-align: left;} .orders_list .content{display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: space-between; padding: 0 48px 0 20px; height: 100%;} .orders_list:hover{ border-color: #ef4423; } .orders_list *{ font-weight: 300;} .orders_list .delete{top: 20px; bottom: 0; right: 20px; height: 15px; width: 15px;} .orders_list:hover .price_block{bottom: 25px;} .orders_list .photo{ width: 50px; height: 50px; overflow: hidden; background-size: contain; background-repeat: no-repeat; background-position: center;} .orders_list .photo img{ max-width: 100%; } .orders_list .name{height: auto; font-size: 20px; overflow: hidden; color: #ef4423; width: 25%;} .orders_list .name span{color: #888; font-size: 16px; display: block;} .orders_list .price_block{position: absolute; width: 450px; height: 100%; text-align: left; top: 0; right: 20px;} .orders_list p{font-size: 20px; display: inline-block; vertical-align: middle; padding-bottom: 0; font-weight: 400; color: #000; width: 20%; text-align: center;} .orders_list p span{color: #000; font-size: 12px;} .orders_list .price_block p.price{left: 0; } .orders_list .price_block p.price_total{right: 0; } .orders_list .price_block p span, .orders_list .price_block p span em{color: #F3003D; font-size: 16px;text-align: left;font-weight: 400; font-style: normal;} .orders_list .price_block p span{ position: absolute; left: 0; top: -20px; } .orders_list .price_block p span em{text-decoration: line-through; display: inline;} .orders_list .amount_block{width: 20%; height: 40px; position: relative; display: flex; flex-direction: row; align-items: center;} .orders_list .amount_block .btn{width: 30px; height: 100%; line-height: 40px; position: absolute; background-color: transparent; color: #a3a3a3; font-size: 25px; text-align: center; top: 0; left: 0; z-index: 2; cursor: pointer;} .orders_list .amount_block .btn:hover{color: #ef4423;} .orders_list .amount_block .btn.plus{right: 0; left: auto;} .orders_list .amount_block input{width: 4em; height: 100%; line-height: 40px; border:none; border-bottom: 2px solid #e27762; background-color: #fff; color: #444; font-size: 22px; text-align: center; } .orders_list .amount_block input.max{color: #ef4423;} h3.g_basket_info{color: #ef4423; font-size: 22px; text-align: left; padding-bottom: 1em;} p.g_basket_info{color: #000; font-size: 18px; text-align: left; padding-bottom: 1em;} #order_total_box{width: 40%; right: 0; margin-top: 20px; position: relative; padding-left: 40px; margin-bottom: 30px;} #order_total_box .info{font-size: 22px; font-weight: 300; font-style: normal; color: #000;} #order_total_box .info em{font-size: 22px; font-weight: 400;font-style: normal; } #order_total_box h3{ color: #ef4423; font-size: 22px; text-align: left; padding-bottom: 1em; } #basket_total h3{padding-bottom: .2em;} #order_total_box hr{ margin: 20px 0; height: 1px; border: 0; width: 100%; background: #8e8e8e;} #order_page{width: 100%; position: relative;} #order_page h1{font-size: 28px; margin-bottom: 30px; width: 100%; padding: .5em 0;} #order_page ul{ display: inline-block; vertical-align: top; width: 100%;} #order_page ul li, #order_page ul li a { list-style-type: none; padding-left: 0; padding-bottom: 8px; position: relative; font-size: 16px; line-height: 20px; color: #000;} #order_page ul li span{color: #a3a3a3; font-size: 16px; display: inline-block;} #order_page ul li span.alert{color: #ef4423;} #order_page ul.half{width: 50%;} #order_page table{border-spacing: 0; width: 100%; font-size: 16px; color: #3e3d3d; text-align: left;} #order_page table th { border-collapse:collapse; border-bottom:2px solid #3e3d3d; padding: 08px; text-align: left; font-size: 14px; color: #888; box-sizing:border-box;} #order_page table td { position: relative; border-collapse:collapse; border-bottom:1px dotted #cccccc; padding:08px; vertical-align: top; } #order_page table td, #order_page table td a, #order_page table td p, #order_page table td span{font-size: 18px; color: #000;} #order_page table td *{line-height: 1.3;} #order_page table tbody tr:last-child td{border-bottom:0;} #order_page table tr:nth-child(odd) { background-color: #f2f2f2; } #order_page table thead tr:nth-child(odd), #order_page table tfoot tr:nth-child(odd) { background-color: transparent; } #order_page table tfoot td{border-bottom: 0; border-top:02px solid #3e3d3d;} #order_page .right h3{color: #000; font-size: 20px; text-align: right;} #basket_popup{position: absolute; right: 0; top: 63px; width: 100px; font-size: 17px; padding-top: 20px;} #basket_popup{opacity:0; -webkit-transition: width ease-in-out .3s; -moz-transition: width ease-in-out .3s; -o-transition: width ease-in-out .3s; transition: width ease-in-out .3s;} #g_i_cart:hover #basket_popup{ position: absolute; opacity: 1; z-index: 150; width: 200px; -webkit-transition: opacity ease-in-out .3s; -moz-transition: opacity ease-in-out .3s; -o-transition: opacity ease-in-out .3s; transition: opacity ease-in-out .3s;} #basket_popup .content{width: 100%; max-height: 220px; overflow: hidden; position: relative;background-color: #fff; box-shadow: 0 20px 70px rgba(0,0,0,.15), 0 10px 30px rgba(0,0,0,.15);} #basket_popup:after{content: ''; position: absolute; z-index: 101; left: 50%; top: 0; transform: translateX(-10px); height: auto; border: 10px solid; border-color: transparent transparent #fff transparent;} #basket_popup .close{top: 22px; right: 20px; height: 30px; width: 30px; } #basket_popup .delete{top: 0; bottom: 0; margin: auto 0; right: 20px; height: 15px; width: 15px;} #basket_popup .caption{width: 100%; height: auto; padding: 20px; color: #444; border-top: 5px solid #ef4423; background-color: #e8e8e8; font-size: 20px;text-align: center;} #basket_popup .good{padding: 10px 20px; width: 100%; height: auto; position: relative; border-bottom: 1px solid #e8e8e8; overflow: hidden; display: flex; flex-direction: row; justify-content: space-around; align-items: center;} #basket_popup .good img, #basket_popup .good h3, #basket_popup .price{display: inline-block; vertical-align: middle; float: left;} #basket_popup .good img{width: 50px; height: auto; margin-right: 20px;} #basket_popup .good h3{height: auto; width: 200px; font-size: 16px; font-weight: 300; padding: 0;text-overflow: ellipsis; color: #444; white-space: nowrap; overflow: hidden;} #basket_popup .price{ height: auto; text-align: left; position: relative;} #basket_popup .price, #basket_popup .price span{font-size: 18px;text-align: left;font-weight: 400; font-style: normal; color: #444;} #basket_popup .price span{color: #F3003D; position: absolute; left: 0; top: -20px; text-decoration: line-through; display: inline; font-size: 14px;} #basket_popup .sum{width: 100%; height: auto; padding: 20px; color: #444; background-color: #e8e8e8; font-size: 20px;} #basket_popup .sum span{font-size: 20px;} #basket_popup .btn_box{text-align: center; padding: 0;} #basket_popup .go_to_basket{ text-transform: uppercase; display: inline-block; border: 1px solid #fff; font-size: 14px; cursor: pointer; text-align: center; height: 50px; line-height: 50px; width: 100%;} #basket_popup .continue{ color:#ef4423; background-color: #fff; } #basket_popup .go_to_basket{ color:#fff; background-color: #ef4423; border-color: #ef4423;} #basket_popup .go_to_basket:hover{ color:#ef4423; background-color: #fff; } #basket_popup .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y{right: 5px;} @media only screen and (max-width: 1300px) { .g_cat_list{width: 33%; height: 400px;} .g_cat_list .photo, .g_sl_add_box{height: 170px;} .g_center{max-width: 95%;} #g_group_left{width: 25%;} #g_cat_list{width: 75%;} #big_menu_xml .first{width: 25%;} #big_menu_xml .first .back{width: 100%;} } @media only screen and (max-width: 1100px) { .g_cat_list{width: 50%;height: 410px;} .g_cat_list .photo, .g_sl_add_box{height: 170px;} .g_center{max-width: 95%;} #g_group_left{width: 33%;} #g_cat_list{width: 66%;} } @media only screen and (max-width: 1000px) { .g_cat_list{width: 50%; height: 410px;} .g_cat_list .photo, .g_sl_add_box{height: 170px;} .g_center{max-width: 95%;} #g_group_left{width: 33%;} #g_cat_list{width: 66%;} #big_menu_xml .first{width: 33%;} } @media only screen and (max-width: 900px) { .g_cat_list{width: 50%; height: calc(230px + 32vw);} .g_cat_list .photo, .g_sl_add_box{height: 32vw;} .g_center{max-width: 95%;} #g_group_left{width: 0; display: none;} #g_cat_list{width: 100%;} #basket:hover #basket_popup{display: none;} /*#f_btn_line{float: left; width: 100%; margin-bottom: 30px;}*/ .f_box:hover .f_list, .f_box .f_list:hover, #mini_menu_xml .second{display: none;} #f_m_btn{line-height: 30px; text-align: left; padding: 0 34px 0 10px; width: auto; font-size: 15px; height: 34px; display: inline-block; color: #000; border: 1px solid silver; border-radius: 5px; position: relative; background-color: #fff;} #f_m_btn:before{content: ""; width: 12px; height: 7px; position: absolute; right: 10px; top: 0; bottom: 0; margin: auto 0; background-image: url('../../../media/site/gifts/i_arrow_down_grey.png'); background-size: 100%; background-repeat: no-repeat;} #filter_box_m{ position: fixed; z-index: -1; visibility: hidden; opacity: 0; transform: translateY(100vh); transition: transform .4s,opacity .4s; } #filter_box_m.active{ z-index: 1003; overflow-y: auto; overflow-x: hidden; opacity: 1; visibility: visible; height: 100vh; left: 0; top: 0; bottom: 0; right: 0; transform: translateY(0);} .f_list, #mini_menu_xml .second{position: fixed; z-index: -1; visibility: hidden; opacity: 0; transform: translateX(100vw); transition: transform .4s,opacity .4s;} #filter_box.other .f_box.active .f_list, #filter_box.main .f_box.active .f_list, #mini_menu_xml .active .second{ z-index: 1003; overflow-x: visible; overflow-y: visible; opacity: 1; visibility: visible; width: auto; left: 40px; top: 40px; right: 40px; margin-bottom: 40px; transform: translateX(0);display: block; padding: 0;} #filter_box.other .f_box.active .f_list .scrollbar, #filter_box.main .f_box.active .f_list .scrollbar, #mini_menu_xml .second, #mini_menu_xml .second .scrollbar{background-color: #ef4423; z-index: 1000; border-radius: 5px; padding: 15px;} #mini_menu_xml i{position: absolute; width: 100%; height: 100%; z-index: 3;} #m_back, .f_box .f_list .back{ opacity: 1; position: fixed; z-index: 999; background: rgba(255,255,255,.9); transition: opacity .4s; width: 100%; height: 100%; top: 0; left: 0; display: none;} .f_box.active .f_list .back{display: block;} .f_box.active .f_list .back{padding: 0; height: 100vh; top: -40px; left: -40px; width: 100vw;} .m_box{position: absolute; top: 40px; left: 40px; right: 40px; height: auto; overflow: visible; background: #ef4423; color: #fff; padding: 15px; text-align: left; z-index: 1000; border-radius: 5px;} #filter_box.other .f_box, #filter_box.main .f_box{width: 100%; background-color: transparent; height: auto; } #filter_box.other .f_box:hover, #filter_box.main .f_box:hover, .f_list .back{background-color: #ef4423;} #filter_box.other .f_box span, #filter_box.main .f_box span{ font-weight: 500; font-size: 20px; text-align: left;} #filter_box.other .f_btn, #filter_box.main .f_btn{width: 100%; font-size: 20px; font-weight: 500; text-align: left;} #filter_box.other .f_btn span, #filter_box.main .f_btn span{ position: relative; right: auto; background-color: #fff; color: #ef4423; height: 2em; display: inline-block; width: 2em; text-align: center; line-height: 2em; border-radius: 50%; font-weight: 500;} #filter_box{text-align: left;} .f_list .scrollbar, .f_list, #mini_menu_xml .second .scrollbar{max-height: unset;} .f_box:before{top: 6px; bottom: 0; margin: auto; transform: translateY(-50%) rotate(-90deg);} /*.f_box.active:before{background-image: url('../../../media/site/gifts/i_arrow_top.png');}*/ #f_m_box .close, #g_i_filter form .close, #g_i_search.active_m form .close, #mini_menu_xml .second .scrollbar .close{ position: fixed; z-index: 1002; display: block; top: 20px; right: 20px;left: auto; opacity: 1; width: 50px; height: 50px; padding: 9px;background: #ef4423; color: #fff; border-radius: 50%;} #f_m_box .scrollbar .close, #g_i_filter form .close, #g_i_search.active_m form .close, #mini_menu_xml .second .scrollbar .close{top: -20px; right: -20px;} #f_m_box .close:before, #g_i_filter form .close:before, #g_i_search.active_m form .close:before, #mini_menu_xml .second .scrollbar .close:before{content: ""; width: 14px; height: 14px; position: absolute; right: 0; top: 0; bottom: 0; left: 0; margin: auto; background-image: url('../../../media/site/gifts/i_close.png'); background-size: 100%; background-repeat: no-repeat;} #g_i_filter form, #g_i_search form{opacity: 0; transform: translateY(100vh); transition: transform .4s,opacity .4s;} #g_i_filter.active form, #g_i_search.active_m form{transform: translateY(0); opacity: 1;} #mini_menu_xml, #g_i_filter form, #g_i_search.active_m form{width: 90vw; left: 0; right: 0; margin: 0 auto; } #g_i_filter.active form{position: fixed; top: 40px; z-index: 1000;} #g_i_filter form .close, #g_i_search.active_m form .close{position: absolute;} #g_i_filter form p, #g_i_filter form input[type=text]{font-size: 20px;} #g_i_filter form input[type=text]{height: 35px; line-height: 35px; } #g_i_filter form input::-moz-placeholder{ font-size: 20px !important; } #g_i_filter form input::-webkit-input-placeholder{ font-size: 20px !important; } #g_i_filter form input:-ms-input-placeholder{ font-size: 20px !important; } #g_i_filter form input::-ms-input-placeholder{ font-size: 20px !important; } #g_i_filter form input::placeholder{ font-size: 20px !important; } #g_i_filter form input[type=submit]{height: 50px; line-height: 50px;} .g_cat_list_btn>p, #g_i_search>p{font-size: 0; padding: 0; width: 30px;} #g_i_search.active>p{display: block;} #mini_menu_xml .first{width: 50%;} .g_cat_list_btn{position: static;} #mini_menu_xml .first .name{font-size: 18px;} #big_menu_xml .second, #mini_menu_xml .second{display: none;} #big_menu_xml .first:hover .back{top: 0; padding: 0 10px 0 20px; background-color: transparent;} #big_menu_xml .first{height: 80px; width: 50%;} #g_cat_list_add_box .g_center{justify-content: space-around;} #g_i_search form{display: none;} #g_i_search.active_m form{display: block;top: 40px; z-index: 1000; height: 150px; position: absolute; opacity: 1; background-color: #ef4423; border-radius: 5px; position: fixed;} #g_i_search>p:before{content: ""; position: absolute; width: 22px; height: 23px; top: 0; bottom: 0; margin: auto 0; left: 0; background-image: url(../../../media/site/gifts/i_search.png); background-size: 100%; background-repeat: no-repeat; } #g_i_search{flex:0;} #g_i_search form input[type=text]{height: 80px; line-height: 80px; width: 90%; margin: 35px auto; display: block;} #g_i_search form input::placeholder{font-weight: 400; font-size: 20px !important; color: #ef4423; font-style: normal;} /*#g_i_cart{display: none;}*/ #mini_menu_xml .active .second a{color: #fff;} #mini_menu_xml .first:hover .second{z-index: 1003;} #g_cat_item .flex{ align-items: center; flex-direction: column;} #g_cat_item #cat_photo_box{width: 100%;} #g_big_photo{height: 50vh;} body main div div#g_cat_item div div#cat_photo_box a#g_big_photo > .mz-figure > img, #g_big_photo figure>img{margin: 0 auto !important;} .g_info{padding: 1em; text-align: center;} #basket_box{flex-direction: column;} #orders_list, #order_total_box{width: 100%; padding-left: 0;} } @media only screen and (max-width: 600px) { #big_menu_xml .first{ height: 130px;} #big_menu_xml .first .back>a{ text-align: center; } #big_menu_xml .first .back>a .img{position: relative;display: inline-block; left: unset; top: unset;} #big_menu_xml .first .back>a .name{padding: 20px 0 0; width: 100%;} #mini_menu_xml .first{width: 100%;} #params_tbl .params ul{width: 100%;} #g_buy_tbl *{font-size: 14px;} #g_buy_tbl th, #params_btn a{font-size: 12px;} #params_btn a.active:after{height: 2px; bottom: -1px;} #g_price_block p{width: 150px; height: 45px; line-height: 45px; font-size: 30px;} #g_price_block p>span{font-size: 14px; padding-left: 2px; padding-bottom: 9px;} .g_buy{font-size: 14px;height: 45px; line-height: 45px; padding-left: 15px;} .g_buy span:before{width: 25px; height: 20px;} .orders_list p, .orders_list .amount_block input, .orders_list .name{font-size: 14px;} .orders_list .name span{font-size: 12px;} .orders_list .photo{width: 40px; height: 40px;} .order_header p:nth-child(2){width: 40px;} .order_header p{font-size: 12px;} .orders_list .delete{right: 10px; top: 10px;} .orders_list .amount_block{flex-direction: column;} .orders_list .amount_block input{width: 100%;} #g_buy_tbl .tip-hover svg, #basket_box .tip-hover svg{width: 20px; height: 20px; } #g_buy_tbl .tip-hover.skl .tip, #basket_box .tip-hover.skl .tip{top: 115%; left: -150px;} #g_buy_tbl .tip-hover.skl .tip:before, #basket_box .tip-hover.skl .tip:before{ top:-18px; border-color: transparent transparent #43525a transparent; right: 26%;} #orders_modal .price{padding-left: 0;} #orders_modal .continue, #orders_modal .go_to_basket{font-size: 12px;} } #params_tbl .params.dost ul{ width:90% } #params_tbl .params.dost ul li p{ color:#000; } #params_tbl .params.dost ul li p{ font-size: 14px; margin-bottom: 5px; } /*SLIDER*/ .similar_product { } .similar_title { margin: 0px 0px 40px 0px; } #similar_product_slider { overflow: hidden; } /** * Featherlight – ultra slim jQuery lightbox * Version 1.4.0 - http://noelboss.github.io/featherlight/ * * Copyright 2016, Noël Raoul Bossart (http://www.noelboss.com) * MIT Licensed. **/ @media all { .featherlight { display: none; /* dimensions: spanning the background from edge to edge */ position:fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483647; /* z-index needs to be >= elements on the site. */ /* position: centering content */ text-align: center; /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */ white-space: nowrap; /* styling */ cursor: pointer; background: #333; /* IE8 "hack" for nested featherlights */ background: rgba(0, 0, 0, 0); } /* support for nested featherlights. Does not work in IE8 (use JS to fix) */ .featherlight:last-of-type { background: rgba(0, 0, 0, 0.8); } .featherlight:before { /* position: trick to center content vertically */ content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .featherlight .featherlight-content { /* make content container for positioned elements (close button) */ position: relative; /* position: centering vertical and horizontal */ text-align: left; vertical-align: middle; display: inline-block; /* dimensions: cut off images */ overflow: auto; padding: 25px 25px 0; border-bottom: 25px solid transparent; /* dimensions: handling large content */ margin-left: 5%; margin-right: 5%; max-height: 95%; /* styling */ background: #fff; cursor: auto; /* reset white-space wrapping */ white-space: normal; } /* contains the content */ .featherlight .featherlight-inner { /* make sure its visible */ display: block; } .featherlight .featherlight-close-icon { /* position: centering vertical and horizontal */ position: absolute; z-index: 9999; top: 0; right: 0; /* dimensions: 25px x 25px */ line-height: 25px; width: 25px; /* styling */ cursor: pointer; text-align: center; font-family: Arial, sans-serif; background: #fff; /* Set the background in case it overlaps the content */ background: rgba(255, 255, 255, 0.3); color: #000; } .featherlight .featherlight-image { /* styling */ width: 100%; } .featherlight-iframe .featherlight-content { /* removed the border for image croping since iframe is edge to edge */ border-bottom: 0; padding: 0; } .featherlight iframe { /* styling */ border: none; } } /* handling phones and small screens */ @media only screen and (max-width: 1024px) { .featherlight .featherlight-content { /* dimensions: maximize lightbox with for small screens */ margin-left: 10px; margin-right: 10px; max-height: 98%; padding: 10px 10px 0; border-bottom: 10px solid transparent; } } /** * Featherlight Gallery – an extension for the ultra slim jQuery lightbox * Version 1.4.0 - http://noelboss.github.io/featherlight/ * * Copyright 2016, Noël Raoul Bossart (http://www.noelboss.com) * MIT Licensed. **/ @media all { .featherlight-next, .featherlight-previous { display: block; position: absolute; top: 25px; right: 25px; bottom: 0; left: 80%; cursor: pointer; /* preventing text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* IE9 hack, otherwise navigation doesn't appear */ background: rgba(0,0,0,0); } .featherlight-previous { left: 25px; right: 80%; } .featherlight-next:hover, .featherlight-previous:hover { background: rgba(255,255,255,0.25); } .featherlight-next span, .featherlight-previous span { display: none; position: absolute; top: 50%; left: 5%; width: 82%; /* center horizontally */ text-align: center; font-size: 80px; line-height: 80px; /* center vertically */ margin-top: -40px; text-shadow: 0px 0px 5px #fff; color: #fff; font-style: normal; font-weight: normal; } .featherlight-next span { right: 5%; left: auto; } .featherlight-next:hover span, .featherlight-previous:hover span { display: inline-block; } /* Hide navigation while loading */ .featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next { display:none; } } /* Always display arrows on touch devices */ @media only screen and (max-device-width: 1024px){ .featherlight-next:hover, .featherlight-previous:hover { background: none; } .featherlight-next span, .featherlight-previous span { display: block; } } /* handling phones and small screens */ @media only screen and (max-width: 1024px) { .featherlight-next, .featherlight-previous { top: 10px; right: 10px; left: 85%; } .featherlight-previous { left: 10px; right: 85%; } .featherlight-next span, .featherlight-previous span { margin-top: -30px; font-size: 40px; } }