html, body {padding:0; 
margin:0; 
font-family:Arial;
font-size: 14px;
color:#191919;}

a {color:#C71B46;}

p{font-size: 14px;
line-height: 19px;
margin: 1px 0 6px 0;}

h1{text-align:center;}

h2{font-size: 21px;
margin: 9px 0 12px 0;}

h3{font-size: 19px;
margin: 9px 0 12px 0;}

ol{margin-top:10px;}

li{font-size: 14px;
margin:0 0 10px 0;}

header{width:100%;
position:relative;}

footer{width:100%;
background:#02A7AB;}

.block {margin: 0 auto;
max-width: 980px;}

.block:after{content:'';
clear:both;
display:block;}

.logo{float:left;
margin:5px 50px 0 0;}

.garant{float:left;
margin:0 60px 0 0;}

.shapka_tel{float:left;
margin:10px 0 0 0;
font-size:23px;
font-weight:bold;
line-height:35px;
color:#285768;}

.top_address{float:right;
margin:20px 0 0 0;
max-width:170px;
color:#02A7AB;}

.top_address span{display:block;
margin:5px 0 0 0;}

.time_job{position:absolute;
bottom:15px;
right:178px;
font-size:13px;}

.pink{color:#B61840;}

.floating{width:100%;
background:#E4325F;}

.fixed {position: fixed;
top: 0; 
z-index: 100;}

.floating ul{margin:0;
padding:0;
list-style:none;}

.floating ul li{display:inline-block;
vertical-align:top;
padding:11px 5px;
margin:0 5px;
width: calc((100% / 5) - 32px);
color:#FFF;
font-size:17px;
text-align: center;}

.floating ul li a{color:#FFF;
text-decoration:none;}

.floating2{width:100%;
background:#02A7AB;
display:none;
opacity: 0.7;}

.floating2 ul{margin:0;
padding:0;
list-style:none;}

.floating2 ul li{display:inline-block;
vertical-align:top;
padding:11px 5px;
margin:0 5px;
width:calc((100% / 6) - 48px);
color:#FFF;
font-size:17px;
text-align: center;}

.floating2 ul li a{color:#FFF;
text-decoration:none;}

.fixed2 {position: fixed;
top: 40px; 
z-index: 100;}

.prostranst_skafi{width:100%;
background:url(/img/skafi-kupe.jpg)center top no-repeat;
background-size: cover;}

.prostranst_first{width:100%;
background:url(/img/first.jpg)center top no-repeat;
background-size: cover;}

.first_name{font-size:40px;
background: url(/img/zayv_bel.png)left top repeat;
padding:5px 0 5px 38px;
margin:0 0 10px 0;
text-transform:uppercase;}

.first_name span{text-align:right;
display:block;
font-size:20px;
padding:0 30px 0 0;}

.zayvka{width: 320px;
height: 317px;
text-align: center;
padding:0 20px 5px 22px;
background: url(/img/zayv_bel.png)left top repeat;
margin:20px 0 0 3px;}

.zayvka_name{font-size: 22px;
color: #000;
padding-top: 16px;}

.zayavka_pole{height: 45px;
border: none;
margin:13px 0 0 10px;
display:block;
width:280px;
padding:0 0 0 10px;
box-shadow:0px 1px 7px -2px #6a6a6a inset;} 

.zayavka_otprav{font-size:20px;
color:#FFF;
display:block;
margin:15px 0 0 10px;
background:#02A7AB;
border:none;
padding:15px 0 13px 0;
text-align:center;
width:290px;
box-shadow: 0px 1px 10px -1px #000000;}

.prostranst{width:100%;}

.prostranst_magaz{width:100%;
background:url(/img/fon_magaz.jpg)center top no-repeat;
background-size: cover;}

.prostranst_katal{width:100%;
background:url(/img/font_katal.jpg)center top no-repeat;
background-size: cover;}

.prostranst_katal h1{font-weight:normal;
padding: 30px 0 20px 0;
text-align: center;
font-size: 25px;
text-transform: uppercase;}

.zag_katal{padding:30px 0 20px 0;
text-align:center;
font-size:25px;
text-transform:uppercase;}

.katalog{float:left;
margin:5px 20px 30px 0;
width:230px;}

.katalog_img{width:230px;
height:220px;}

.katalog_img:hover img{display:none;}

.katalog_img:hover a{display:block;
width:230px;
height:220px;}

#one:hover{background:url(/img/kat1_hov.png)left top no-repeat;}
#two:hover{background:url(/img/kat2_hov.png)left top no-repeat;}
#three:hover{background:url(/img/kat3_hov.png)left top no-repeat;}
#four:hover{background:url(/img/kat4_hov.png)left top no-repeat;}
#five:hover{background:url(/img/kat5_hov.png)left top no-repeat;}
#six:hover{background:url(/img/kat6_hov.png)left top no-repeat;}
#seven:hover{background:url(/img/kat7_hov.png)left top no-repeat;}
#eight:hover{background:url(/img/kat8_hov.png)left top no-repeat;}

.katalog_name{text-align:center;
margin:0 0 10px 0;}

.katalog_name a {text-decoration:none;
color:#04A1A6;
font-size:17px;}

.katalog_price{margin:5px 0 0 0;
text-align:center;}

.katalog_price span{color:#D22752;
font-weight:bold;}

.prostranst_aks{width:100%;
background:url(/img/fon_aks.jpg)center top no-repeat;
background-size: cover;}

.prostranst_stat{width:100%;
background:url(/img/fon_stat.jpg)center top no-repeat;
background-size: cover;}

.prostranst_page{width:100%;
background:url(/img/fon_page.jpg)center top repeat-x;}

.aks_name{color:#E4325F;
font-size:70px;
font-weight:bold;
text-align:center;
padding:40px 0 30px 0;
text-shadow:4px 5px 7px #464646;}

#zaks{float:right;
width: 290px;
margin:80px 0 0 0;}

.prostranst_text{width:100%;
background:url(/img/font_text.jpg)center top no-repeat;
background-size: cover;}

.zag_text{padding:10px 0 20px 0;
font-size:20px;
text-align:center;}

.response{padding:7px 20px 5px 20px;
margin:0 0 15px 0;
background:url(/img/fon_otz.png) left top repeat;}

.response_img{float:left;
margin:0 30px 0 0;
width:150px;}

.response_img2{float:right;
margin:0 0 0 30px;
width:150px;}

.response_text{float:left;
width:540px;} 

.response_text span{display:block;
padding:10px 0 5px 0;
font-weight:bold;
font-size:18px;}

#zakaz_bl{position: absolute;
top: 50px;
left:-140px;
z-index: 10000;
background: #017B7E;
padding:6px 10px 10px 10px;
width: 350px;
color:#FFF;
border-radius:10px;}

.tbl_login tr{padding:0 0 5px 0;}

.tbl_login td{padding:0 0 5px 0;}

.obr_zvon{text-align:center;
padding:4px 0 10px 0;
font-weight:bold;}

.inp_vhod{border:1px solid #FFF;
padding: 3px;
width: 200px;}

.tovar_block:after{content:'';
clear:both;
display:block;}

.tovar{display:inline-block;
vertical-align:top;
margin:0 10px 50px 5px;
width: calc((100% / 4) - 19px);
text-align:center;
box-shadow: 1px 1px 6px 0px #690E25;
padding:5px 0 5px 0;
border-radius:5px;}

.tovar2{float:left;
margin:0 20px 50px 0;
width:305px;
text-align:center;
background:#FFF;
padding:5px 0 5px 0;
border-radius:5px;}

.tovar_name{font-size:17px;}

.tovar_img{margin:5px 0 5px 0;}

.tovar_img img{-moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;}

.tovar_img img:hover{
 -webkit-transform:scale(1.08);
 -moz-transform: scale(1.08);
 -o-transform: scale(1.08);
 transform: scale(1.08);}


.tovar_price{font-size:14px;}

.zag_art{color: #E4325F;
font-size: 50px;
font-weight: bold;
text-align: center;
padding: 13px 0 17px 0;
text-shadow: 4px 5px 6px #464646;}

.articles{display:inline-block;
vertical-align:top;
width: calc((100% / 2) - 100px);
    margin: 0 0px 0 67px;}

.articles_name{font-size:14px;
font-family:Tahoma;}

.articles_img{margin:10px 0 10px 0;}

.articles_text{font-size:13px;
text-align:left;}

.otz_zag{font-size:40px;
font-weight:bold;
padding:30px 0 15px 0;
color:#02A7AB;
text-align:center;
text-shadow: 3px 0 3px #4B6263;}

.otz{box-shadow: 7px 1px 10px 3px #7d7d7d;
width:700px;
padding:15px 5px 15px 60px;}

.otz_text{width:650px;
line-height:20px;}

.otz_text span{display:block;
font-size:16px;
font-weight:bold;
margin:0 0 10px 0;}



















#container {padding: 10px;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.22);
margin: 20px auto;
width: 875px;
height: 430px;}

.flipbook {position: relative;	
width: 875px;
height: 400px;
z-index: 10;}

.flipbook > div {width: inherit;
height: inherit;
position: absolute;
top: 0px;
left: 0px;
text-align: left;}

.flipbook .hide {display: none;}

.flipbook > div > div {
width: inherit;
height: inherit;
background-size: 875px 400px;
width: 50%;
height: 100%;
position: absolute;}

/* We are separating the image divs into two separate divs. */
/* The second must be at the right, and the first on the left */
.flipbook div[class$="-fend"] {
background-position: 100% 0;
left: 50%;}


/* Preserve 3D */

.flipbook .moving-div {
z-index: 99999;
width: 50%;

-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;

-moz-perspective: 1000;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0 0;

-o-perspective: 1000;
-o-transform-style: preserve-3d;
-o-transform-origin: 0 0;

-ms-perspective: 1000;
-ms-transform-style: preserve-3d;
-ms-transform-origin: 0 0;

perspective: 1000;
transform-style: preserve-3d;
transform-origin: 0 0;
}

/* Make the backfaces invisible */
.flipbook .moving-div div {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
z-index: 9999;
}
/* Ensure the divs are in the correct position */
.flipbook .moving-div > div[class$="-fend"] {
left: 0;
}

/* Rotate the last card so its facing back to back with the first one */
.flipbook .moving-div > div[class$="-fstart"] {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}

/* The two spans are shadows for depth */
.flipbook .moving-div span {
box-shadow: inset 60px 0 60px -60px rgba(0,0,0,0.1);
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
display: block;
z-index: 999999;
top: 0;	
background: rgba(0,0,0,0.1);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
left: 0;
}

.flipbook .moving-div span:last-of-type {
-webkit-transform: rotateY(180deg);	
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);	
-ms-transform: rotateY(180deg);	
transform: rotateY(180deg);	
box-shadow: inset -60px 0 60px -60px rgba(0,0,0,0.1);
}


.flipbook .rotateYForward {
-webkit-transform: rotateY(180deg);	
-webkit-transition: -webkit-transform 1s ease-in;

-moz-transform: rotateY(180deg);	
-moz-transition: -moz-transform 1s ease-in;

-o-transform: rotateY(180deg);	
-o-transition: -o-transform 1s ease-in;

-ms-transform: rotateY(180deg);	
-ms-transition: -o-transform 1s ease-in;

transform: rotateY(180deg);	
transition: transform 1s ease-in;
left: 50%;
}

.flipbook .beginMove {
left: 50%;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);	
-o-transform: rotateY(180deg);	
transform: rotateY(180deg);	
}

.flipbook .rotateYBackward {
-webkit-transform: rotateY(360deg);
-webkit-transition: -webkit-transform 1s ease-in;

-moz-transform: rotateY(360deg);
-moz-transition: -moz-transform 1s ease-in;

-o-transform: rotateY(360deg);
-o-transition: -o-transform 1s ease-in;

-ms-transform: rotateY(360deg);
-ms-transition: -o-transform 1s ease-in;

transform: rotateY(360deg);
transition: transform 1s ease-in;}


.flipbook .back-arrow, .flipbook .forward-arrow {
width: 53px;
height: 53px;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0 11px 2px 10px;
font-size: 50px;
font-weight: bold;
z-index: 10;
left: -82px;
color: #fff;
top: 48%;
border-radius: 100px;
position: absolute;
cursor: pointer;
z-index: 30;
background-color: #E4325F;}

.flipbook div[class$="-arrow"]:hover {
box-shadow: inset 0px 0px 30px rgba(0,0,0,0.2);}

.flipbook div[class$="-arrow"]:active {
background-color: #CB1B47;
box-shadow: inset 0px 0px 30px rgba(0,0,0,0.1);}

.flipbook .forward-arrow {
right: -85px;
left: auto;
padding: 0 34px 0 15px;}

.flipbook .buttons {width: 98%;
padding: 7px 1%;
height: 16px;
background: #fff;
position: relative;
top: 400px;}

.flipbook .buttons span {background: #2DF4FF;
box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
width: 16px;
cursor: pointer;
height: 16px;
border-radius: 16px;
display: block;
float: right;
position: relative;
margin-right: 5px;}

.flipbook .buttons .selected {background-color: #E4325F;
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);}

.flipbook .content {height: 30px;
padding: 7px;
z-index: 9999;	
position: absolute;
top:5px;
left:10px;
font-size: 17px;
font-weight:bold;
display:none;}

.sky1{position: absolute;
top:35px;
left:10px;
color:#C61A45;}

.sky2{position: absolute;
top:27px;
left:12px;
color:#C61A45;}

.sky3{position: absolute;
top:30px;
left:25px;
color:#C61A45;}

.sky4{position: absolute;
top:35px;
left:140;
color:#C61A45;}

.sky5{position: absolute;
top:30px;
left:125px;
color:#C61A45;}

.sky6{position: absolute;
top:0px;
left:203px;
color:#C61A45;}

.sky7{position: absolute;
top:20px;
left:145px;
color:#C61A45;}

.sky8{position: absolute;
top:30px;
left:200px;
color:#C61A45;}

.flipbook .fliprice{position: absolute;
top: 12px;
left:443px;
z-index: 9999;
font-size: 17px;
font-weight:bold;
height:30px;
display:none;}


/* THE /img YOU WANT TO USE */
/* == add more if you want == */
/* == update the HTML too! == */

div[class^="image-1-"] {
background: url('/img/katalog1.jpg');}

div[class^="image-2-"] {
background: url('/img/katalog2.jpg');}

div[class^="image-3-"] {
background: url('/img/katalog3.jpg');}

div[class^="image-4-"] {
background: url('/img/katalog4.jpg');}


/* ------- IGNORE */

#header {width: 100%;
margin: 0px auto;}

#header #center {text-align: center;}

#header h1 span {color: #000;
display: block;
font-size: 50px;}

#header p {
font-family: 'Georgia', serif;}

#header h1 {color: #892dbf;
font: bold 40px 'Bree Serif', serif;}

#travel {padding: 10px;
background: rgba(0,0,0,0.6);
border-bottom: 2px solid rgba(0,0,0,0.2);
font-variant: normal;
text-decoration: none;}

#travel a {text-decoration: none;
border-bottom: 1px solid #f9f9f9;
color: #f9f9f9;
font-size: 1.6em;}

.foot_menu{float:left;
margin:35px 0 15px 0;}

.foot_menu ul{float:left;
margin:0 40px 0 0;
list-style:none;
padding:0;}

.foot_menu ul a{color:#FFF;}

.foot_adres{float:right;
color:#FFF;
margin:26px 0 0 0;
max-width:230px;}

.foot_adres:after{content:'';
clear:both;
display:block;}

.foot_adres span{display:block;
font-size:22px;
margin:0 0 11px 3px;}

.foot_adres p{font-size:14px;}

.centrl{text-align:center;}

.shkaf{margin:10px 0 15px 0;}

.shkaf_img{display:inline-block;
vertical-align:top;
width:calc((100%/2) - 100px);}

.shkaf_opisanie{display:inline-block;
vertical-align:top;
width:calc(100%/2);}

.pred{margin:-5px 0 8px 0;
font-size:18px;}

.shkaf_opisanie form{border:2px solid #00C9D1;
border-radius:5px;
padding:20px 0 10px 0;
text-align:center;
box-shadow: 1px 2px 9px -1px #000000;}

.shkaf_opisanie input{margin:0 0 10px 0;
max-width:300px;
min-width:100px;
width:70%;
height:20px;
padding:5px;
border:1px solid #000;
border-radius:3px;}

.shkaf_opisanie #order_comment_item{display:inline-block;
vertical-align:top;}

#order_comment_item textarea{padding:5px;
border:1px solid #000;
border-radius:3px;
font-family:Arial;
width: 150px;
margin:0 31px 0 -2px;}

.shkaf_opisanie .otp_vnutr{display:inline-block;
vertical-align:top;
max-width:110px;
border:none;
background:#02A7AB;
color:#FFF;
font-size:15px;
height: 42px;
padding:10px 0;
border-radius:10px;}

.others_img{display:inline-block;
vertical-align:top;
max-width:250px;
margin:0 20px 0 0;}

.oth_img{display:inline-block;
vertical-align:top;
max-width:250px;}

.prepared{background:#E4325F!important;
font-weight:bold;}

.shkaf_cena{margin:15px 0 0 0;
font-size:22px;}

.brothers_name{margin:0 0 5px 0;
font-weight:bold;}

.brothers_name a{text-decoration:none;}

.brat_up{border-top:1px solid #285768;
padding:5px 0 0 0;}

.brat_up h2{color:#029bab;}

.coper{font-size:12px;
color:#FFF;
padding:10px 0 0 0;}

.coper:before{content:'';
clear:both;
display:block;}

.boxcontent{text-align:left;
margin:8px 0 0 0;}

.boxcontent a{margin:0 15px 0 0;}

.galerey h2 {text-align: center;
margin: 0 0 5px 0;
color:#00AAB3;
font-size:20px;}

.coment_name{display:block;
font-size:14px;
font-weight:bold;
margin:0 0 10px 0;
color:#00AAB3;}

.coment_raz{font-weight:bold;}

.coment_otz{font-size:13px;}

.coment_img{float:left;
max-width:200px;
padding:2px;
border:1px solid #00C9D1;
margin:0 15px 0 0;}

.coment{display: inline-block;
vertical-align:top;
width:calc((100% / 2) - 65px);
min-height:210px;
margin:0 10px 30px 10px;
position: relative;
padding: 15px;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);}

.coment:before, .coment:after
{position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
z-index: -1;}

.coment:after{left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);}

#region_one{border:none;}

.region{border-top:1px solid #00AAB3;
padding:10px 0 0 0;
margin:0 0 18px 0;}

.region ul{margin:0;
padding:0;
list-style:none;}

.region ul li{display:inline-block;
vertical-align:top;
margin:0 10px 0 0;}

.tabl{border: solid 1px #285768;
border-collapse: collapse;
width: 100%;}

.tabl td{border: solid 1px #285768;
border-collapse: collapse;
padding:5px;}

.prim{display: inline-block;
vertical-align:top;
width:calc((100% / 4) - 15px);
margin:10px 10px 0 0;
text-align: center;}

.prim_text{font-weight:bold;
color:#285768;
margin:5px 0 10px 0;
font-size:16px;}

.system{display: inline-block;
vertical-align:top;
width:calc((100% / 3) - 33px);
margin:0 20px 0 0;}

.system_block{margin:0 0 40px 0;}

.system_block h2 a{text-decoration:none;}

.system_block h2{text-align:center;
margin:0 0 10px 0;}

.primer{display: inline-block;
vertical-align:top;
width:calc((100% / 5) - 14px);
margin:0 10px 10px 0;}

.primer img{width: 100%;
max-width: 170px;
min-width: 80px;}

.primer p{color:#525252;
font-size:13px;}

#alon_img{margin:5px 0 5px 0;}

.po_centru{text-align:center;}

.video{display: inline-block;
vertical-align:top;
width:calc((100% / 3) - 14px);
margin:0 10px 20px 0;}

.pole_zayv {width: 400px;
height: 25px;
border: 2px solid #00C9D1;
padding: 2px 0 3px 5px;
border-radius: 5px;
margin: 1px 0 20px 15px;}

.im_foto {float: left;
font-weight: bold;
line-height: 17px;
color: #E4325F;}

.zayavka_foto{font-weight: bold;
color: #E4325F;
text-align: left;
margin:12px 0 5px 15px;}

.com_zayv {width: 400px;
height: 70px;
margin: 0 0 12px 15px;
border: 2px #00C9D1 solid;
padding: 5px 0 3px 5px;
border-radius: 5px;}

.otp_zayv {width: 170px;
height: 29px;
color: white;
background: #E4325F;
border: none;
font-size: 16px;
font-weight: bold;
border-radius: 4px;}

.form_orders{margin:15px 0 20px 270px;}

.path{padding:10px 0 0 0;
color:#285768;}
