@import url('https://fonts.googleapis.com/css?family=El+Messiri:400,700|PT+Serif:400,700|Russo+One&subset=cyrillic');
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic';
@import 'https://fonts.googleapis.com/css?family=Ubuntu+Mono&subset=cyrillic';
@import 'cfg.css';


* {margin: 0;padding: 0;}

body {background:#fffae7;  font-family:'PT Serif', 'Open Sans'; font-size:var(--fontsize); color:#333}

h1 {font:bold 48px 'PT Serif'; color:#333; text-align:center; padding:15px 0px 15px 0px; margin:0;}
h2 {font:32px 'PT Serif'; color:#333; text-align:center; padding:15px 0px 15px 0px; margin:0;}
h3 {font:28px 'PT Serif'; color:#333; text-align:left; padding:10px 20px 5px 20px; margin:0;}
h4 {font:24px 'PT Serif'; color:#333; text-align:left; padding:5px 20px 5px 20px; margin:0}
h5 {font:18px 'PT Serif'; color:var(--color1); padding:5px 10px 5px 10px; margin:0}
h6 {font:18px 'Roboto Condensed'; color:var(--color1); padding:5px 10px 5px 10px; margin:0}
h7 {font:18px 'Roboto Condensed'; color:var(--color1); padding:5px 10px 5px 10px; margin:0}


.w {color:#fff}
.r {text-align:right}
.c {text-align:center}
.l {text-align:left}
.x {margin:3px 10px}
.sm {font-size:16px; color:var(--color4)}
.sm:hover {color:var(--color3)}
.psm {font-size:13px; color:var(--color3)}

.ln {display:block;line-height:17px}
.padd{padding:20px 0px;}

 
img{border:0; margin:0; padding:0}
img.x{margin:3px 10px}

small {font-size:12px;}

p {font:var(--fontsize) 'PT Serif'; text-align:left; color:#333; margin:0; padding:10px 20px; text-indent:0px;}


ul {}
ul li {}


a{font: var(--fontsize) 'Roboto'; color:var(--color1); 
-webkit-transition: all 200ms ease-in-out; -moz-transition: all  200ms ease-in-out; transition: all 200ms ease-in-out;text-decoration:none;}
a:hover {color:var(--color2); text-decoration:underline; }

a.butt, input[type=submit]{font:16px 'Roboto Condensed'; font-weight:600; background: none; color:var(--color2); display:inline-block; text-align:center; padding:10px 40px; margin:0px 3px; text-transform:uppercase; border-radius:10px; cursor:pointer; border:2px solid var(--color2)}
a.butt:hover , input[type=submit]:hover{background:none;  text-decoration:none; color:var(--color1); border:2px solid var(--color1)}

a.admbutt{font:13px 'Roboto'; font-weight:500; background:var(--color2); color:#ddd; display:inline-block; text-align:left; padding:10px 20px; margin:3px 3px; text-transform:uppercase; border-radius:2px; vertical-align:middle}
a.admbutt:hover {background:var(--color1); text-decoration:none;}
a.admbutt img{vertical-align:bottom; margin-right:10px; width:20px; height:20px;}

a.social img{vertical-align:middle; margin:-7px 0px 0px 10px; width:23px; height:23px;}



#m100{width:100%; margin:0 auto; padding:0; border:0; text-align:left; background:var(--color3)}


#c100{width:100%;  margin:0 auto; background:var(--color4)}
#caps{width:100%; max-width:var(--maxwidth); display:flex; flex-flow:row nowrap;  justify-content:space-around; align-items:center; align-content:baseline; text-align:center; padding:0px 0px; margin:0px auto; }
#cap { display:inline-block;padding:20px 10px; text-align:center; color:#333; /*resize: horizontal; overflow: scroll;*/}
#cap h1 {font:bold 14px 'Roboto'; letter-spacing:3px; text-transform:uppercase; padding:0px; text-align:center; color:var(--color1)}
#ta{font:18px 'PT Serif'; color:#333; font-weight:700; text-align:left; letter-spacing:1px; }

#line {width:100%; height:3px; padding:0px; margin:0 auto; background:url(../images/line.png) center center;}

#wrapper{width:100%; text-align:center; padding:40px 0px; margin:0 auto;}
#container{width:100%; max-width:var(--maxwidth); text-align:center; padding:0; margin:0px auto; position:relative;  }


#inner0 {padding:40px 40px; margin:0 auto; text-align:left; background:#fff;}
#inner0 img {padding:10px; width:auto; height:auto; max-width:1160px; cursor:pointer !important}
#inner0 ul {list-style-type:circle; margin-left:40px;}
#inner0 li {list-style-position:inside}
#inner{padding:40px 0px; margin:0 auto;  text-align:left;}
#inner img{float:left; padding:0px; margin:5px 40px;}



table{  width:90% !important; border:0;  border-collapse:collapse; text-align:left;}
table td{padding:10px;border:0; border-bottom:1px solid #ddd !important;}
table tr.xx{background:#efefef}


#order {width:100%; margin:1px auto; padding:20px; position:relative; display:block; background:#eee; } 
 
/*/////////*/






#crumbs{text-align:left;padding:0px 20px 20px 20px; color:var(--color1)}
#crumbs .admbutt{padding:5px 15px; }


#cata {width:100%; padding:0; margin:5px; max-width:300px; height:300px; display:inline-block; border:0; overflow: hidden; position:relative; cursor:pointer; background:var(--color3); border-radius:0  }
#cata:hover {}
#cata h4 {font:18px 'Roboto Condensed'; font-weight:700; text-transform:uppercase; color:#333}
#cata .img {width:100%; height:100%; transition: var(--trans);}
#cata .img:hover {transform:scale(1.1,1.1);}
#cata .desc{width:100%; position:absolute; bottom:0; margin:0; padding:10px 0px; background:var(--color3);  }


#icons {width:100%; max-width:295px; height:280px; display:inline-block; margin:2px; border:0; overflow:hidden; cursor:pointer; transition: var(--trans); background:transparent;}
#icons:hover {}
#icons .img:hover {transform:scale(1.1,1.1); }
#icons h4 {font-size:18px; font-weight:600; color:#333}
#icons .img {width:100%; height:160px; background-size:auto !important; transition: var(--trans);}
#icons .desc{ width:100%; margin:0; padding:0;}


#news {width:100%; padding:0; margin:5px; max-width:300px; height:300px; display:inline-block; border:0; overflow: hidden; position:relative; cursor:pointer; background:var(--color3); border-radius:0  }
#news:hover {}
#news h4 {font:18px 'Roboto Condensed'; text-transform:uppercase; color:var(--color3)}
#news .img {width:100%; height:100%; transition: var(--trans);}
#news .img:hover {transform:scale(1.1,1.1);}
#news .desc{width:100%; position:absolute; bottom:0; margin:0; padding:10px 0px; background:var(--color1);  }

#jews {width:100%; margin:1px auto; position:relative;  display:block; background:#fff; height:100px} 
#jews .img { width:150px; float:left; height:100px; margin-right:20px}
#jews .desc{ margin:0; padding:0;}
#jews h4 {text-align:left;}
#jews .next {cursor:pointer; margin:0;  padding:10px; position:absolute;top:20px; right:0px; color:var(--color1); }
#jews:hover .next { color:var(--color2)}

#fews {margin:1px 5px; position:relative;  display:block; background:#fff; padding:5px} 


#voxpop {width:100%; max-width:650px; margin:0px;  display:inline-block; background:#fff; float:left; padding:0;} 
#voxpop .img { width:0px; float:left; height:0px; margin:0}
#voxpop .desc{ margin:0; padding:10px; }
#voxpop .line{ margin:10px; padding:0px 0px; background:#dee3ef; text-align:left; position:relative; overflow:hidden; transition:var(--trans)}
#voxpop .line:hover .line0{background:#a1adc7;}
#voxpop a{font:bold 18px 'Roboto Condensed'; color:var(--color2); text-decoration:none}
#voxpop .line0{ height:100%; opacity:0.9; background:#b1bdd7; position:absolute; z-index:0}

#voxpop .linel{padding:10px 20px;  position:relative;}

#voxpop .liner{float:right;}

#voxpop h4 {text-align:left;}
#voxpop .next {cursor:pointer; margin:0;  padding:0px; float:right; }
#voxpop:hover .next { color:var(--color2)}





#scart {width:100%; margin:1px auto; position:relative; display:block; background:#fff; height:100px} 
#scart .img { width:150px; float:left; height:100px; margin-right:20px}
#scart .desc{ margin:0; padding:0;}
#scart .sum{ margin:0; padding:5px; display:inline-block; float:left}
#scart h4 {text-align:left;}
#scart .next {cursor:pointer; margin:0;  padding:10px; position:absolute;top:20px; right:0px; color:var(--color1); }
#scart:hover .next { color:var(--color2)}


#reviews {max-width:var(--maxwidth); margin:1px auto; position:relative;  display:block; background:#fff;  padding:20px} 
#reviews .desc{ margin:0; padding:0; }
#reviews h4 {text-align:left;}
#reviews p {text-align:left;}
#reviews p.rev {background:var(--color4); padding:10px; border-radius:4px; width:95%; float:right}
#reviews p.rev:before{ content: ""; width:24px; height:24px; display: inline-block; vertical-align: bottom; margin:0px 10px 3px 0px; background:url(../ndata/images/logo.png); background-size:contain}
#reviews .next {cursor:pointer; margin:0; padding:10px; position:absolute; top:30%; right:0px; color:var(--color1); }
#reviews:hover .next { color:var(--color2)}


#gallery {width:100%; max-width:300px; background:#fff; height:300px; display:inline-block; margin:0px; border:0; overflow:hidden; position:relative; border:5px solid var(--color4) }
#gallery .img {width:100%; height:350px; transition:var(--trans)}
#gallery:hover .img {transform:scale(1.1,1.1)}
#gallery:hover .desc {opacity:0.8; }
#gallery h4 {font-size:24px; color:var(--color3); text-align:center}
#gallery .desc {width:100%; height:100%; position:absolute; top:0; opacity:0; background: var(--color1); transition:var(--trans); display:flex; flex-flow:column wrap; justify-content:center; align-items:center; align-content:center;}



#contacts {width:100%; max-width:var(--maxwidth); display:flex; flex-flow:row nowrap;  justify-content:space-around; align-items:center; align-content:baseline; padding:0; margin:20px auto; border:1px solid var(--color4)}
#contleft {width:49%; text-align:left}
#contright {width:49%; text-align:center}





/*--------------------------------*/


select,input,textarea {width:90%; background:#ffffff; padding:10px 15px; border:2px solid transparent; border-radius:4px; display:block; font:18px Roboto; color:#1f1f1f; margin:10px auto; }
input[type=submit]{width:auto;}
select.x,input.x {width:auto; display:inline-block}
input.y {width:100%; max-width:600px; display:inline-block}
input.val {width:51px; padding:3px; margin:3px;}

#form {width:100%; background:none; max-width:600px;  padding:0px; margin:0 auto; text-align:center }

#form textarea:focus, input:focus{ outline: 0;}
#form input:focus:invalid, textarea:focus:invalid{border: 2px solid #F5192F; }
#form input:focus:valid, textarea:focus:valid{ border: 2px solid #00bb00;}
input:disabled, textarea:disabled{ background:#eee; color:#aaa}






/*--------------- Стили Админки -----------------*/


.sidemenu{width:100%; max-width:260px; height:100%; max-height:3900px; background:#333; padding:30px 0px; margin:0; display:block; overflow-y: auto; position:fixed; left:0px; z-index:999;  transition:var(--trans)}
.overwrap{margin-left:260px; padding:0px 30px; transition:var(--trans)}

.sidemenu a {font:12px 'Roboto'; font-weight:500; color:#ddd; display:block; width:100%; text-align:left; padding:10px 20px; margin:0; text-transform:uppercase; border-radius:2px; vertical-align:middle; }
.sidemenu a img{vertical-align:bottom; margin-right:10px; width:20px; height:20px;}
.sidemenu a:hover {background:#222; text-decoration:none;}

.sidemenu.inactive{left:-220px;}
.overwrap.inactive{margin-left:60px;}

#toggle { background-color: #666; color: #fff; width: 50px; height: 44px; float: right; position: relative; top: 0px; right: 0px; text-align: center; cursor: pointer; font-size: 30px;
}


.admgal {width:300px; height:300px; display:inline-block;}
.admsli {width:90%; max-width:1200px; height:300px; display:inline-block;}
.adm0 {width:100%; background:#333; height:300px; margin:0px; border:0; overflow:hidden; position:relative; }
.adm0 .img {width:100%; height:350px; transition:var(--trans)}
.adm0:hover .desc {opacity:1; background:#333;}
.adm0 .desc {width:100%; height:100%; position:absolute; top:0; opacity:0; background:#fff; transition:var(--trans); display:flex; flex-flow:column wrap; justify-content:center; align-items:center; align-content:center;}







/*--------------- -----------------*/





#f100{width:100%; background:#333; margin:0 auto; padding:20px 0px; text-align:center; color:#fff;}
#fitem {width:100%; max-width:220px; margin:0px; padding:20px; display:inline-block;}
#clear{height:0; font-size:1px; line-height:0px; clear:both;}
#page {margin: 0px;	background: #fff; border: none; padding: 5px;}
#up {padding:20px; cursor:pointer; position:fixed; bottom:0px; right:0px; z-index:999; color:var(--color1); transition: var(--trans)}
#up:hover {color:var(--color3)}
#adm{width:100%; max-width:1700px; height:400px; font-size:18px; font-family:'Courier','Courier New'; color:#333;}
#adma {padding:20px; cursor:pointer; position:fixed; top:100px; right:0px; z-index:999; color:var(--color1); transition: var(--trans)}
#adma:hover {color:var(--color3)}
#cart {padding:20px;cursor:pointer; position:fixed; top:15px; right:0px; z-index:999}


@media screen and (max-width: 660px) {
#form {width:100%; max-width:300px; text-align:center}
#cap {width:100%; display:block; text-align:center; padding:20px;}

#caps {flex-flow:column wrap;}
#cap {width:100% !important;}
#ta {display:block; margin:0 auto; text-align:center; width:60%; }
.logo {width:50%}
/*#cata {width:80%; min-width:300px; max-width:660px; height:300px;  }*/
#inner {text-align:center; }
#inner img {width:90% !important; text-align:center;}
#inner0 img {width:90% !important; height:auto !important; text-align:center;}
#inner0 img.x {width:10px !important;}
textarea { max-width:330px; margin-top:3px}
#cap h1 {display:none}
#contacts {display:block; padding:0; margin:0px auto;}
#contleft {display:block; width:100%; text-align:center}
#contright {display:block; width:100%; text-align:center}


#scart {height:auto;}
#scart .desc{width:100%; display:block; text-align:center }
#scart .img{ width:100%; display:block; text-align:center }
#scart .sum{ width:100%; display:block; float:none;  text-align:left }
#scart .next{display:none;  }

a.butt, input[type=submit]{font:12px 'Roboto'; padding:5px 20px; margin:0px 3px;}
.sidemenu{ right:0px;}

}