@charset "utf-8";
@font-face {
font-family: 'Helios';
font-weight: normal;
font-style: normal;
src: url('fonts/HeliosCondRegular.eot');
src: url('fonts/HeliosCondRegular.eot?#iefix') format('embedded-opentype'), url('fonts/HeliosCondRegular.woff') format('woff'), url('fonts/HeliosCondRegular.ttf') format('truetype');
}
@font-face {
font-family: 'VG';
font-weight: normal;
font-style: normal;
src: url('fonts/555.eot');
src: url('fonts/555.eot?#iefix') format('embedded-opentype'), url('fonts/555.woff') format('woff'), url('fonts/555.ttf') format('truetype');
}
@font-face {
font-family: 'gothic';
font-weight: normal;
font-style: normal;
src: url('fonts/century-gothic.eot');
src: url('fonts/century-gothic.eot?#iefix') format('embedded-opentype'), url('fonts/century-gothic.woff') format('woff'), url('fonts/century-gothic.ttf') format('truetype');
}
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:76.5%;font-family:'gothic';color:#333;background: White;}
html,body,#wrap{height:100%;}
.vg{
	font-family: 'VG';
}
#wrap{
margin-left: 10%;
margin-right: 10%;
min-height: 100%;
height: auto !important;
position: relative;
z-index: 1;
}
.button,button{font-size: 16px;
font-family: "Helios",arial;
margin: 0 1rem;
padding: 0 2rem;
border: 0;
border-top: 1px solid #C5CEC5;
border-bottom: 1px solid #080808;
background: linear-gradient(to top, #929A90, #484E49);
line-height: 35px;
color: #fff;
text-decoration: none;
cursor: pointer;
}
.button{
	display: inline-block;
}
.button:hover,button:hover{
background: linear-gradient(to top, #B3B7B2, #7F827F);
}
.err{background: #ffdead;padding: 1rem;margin: 1rem;border: 1px solid Red;
display: inline-block;
vertical-align: middle;}
.small{font-size: .8rem; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
.frt{margin-left: 1rem; margin-bottom: 1rem;}
.flt{margin-right: 1rem; margin-bottom: 1rem;}
.span.red, b.red{color: #8b0000;}
.hid{display: none;}
.w30{width: 30%;}
.w45{width: 45%;}
ul.err{list-style: none;}
body{font-family: 'gothic',Arial;font-size:1.4rem;word-wrap: break-word;}
header{
background-color: white;
border-bottom: 1px solid #ccc;
border-radius: 0 0 5px 5px;
padding-top: 1rem;
margin-bottom: 1rem;
box-shadow:0 0 1rem rgba(0,0,0,0.6);
display: table;
width: 100%;
}
footer{
border-top: 1px solid #ccc;
text-align: center;
padding: 1rem;
clear: both;
background-color: #1a88a3;
color: white;
position: relative;
z-index: 2;
}
footer a{
color: white;
}
::selection{background:#b3d4fc;text-shadow:none;}
a{text-decoration:none;}
a:focus{outline:thin dotted;}
a:hover{text-decoration:underline;}
a strong{
color: #3366ff;
}
input,textarea,select{
padding: 1rem;
border-radius: .5rem;
margin: .5rem 1rem 1rem;
border: 1px solid rgb(204, 204, 204);
font-size: 1.4rem;
}
img{
	max-width: 100%;
}
bc-tag{
	display: block;
}
.shadow{
	margin: 1rem 0;
}
.shadow img{
	padding: 2rem;
	box-shadow:0 0 3rem rgba(0,0,0,0.8);
	margin-bottom: 1rem;
	margin-top: 1rem;
}
video{width: 100%;}
table{
border-collapse: collapse;
margin-bottom: 1rem;
}
td,th{
padding: .5rem 1rem;
border: 1px solid #cacaca;
}
th{
background: #dddddd;
font-size: 1.2rem;
line-height: 1.4rem;
}
.phone{
white-space: nowrap;
}
.phone:before,.vk:before,.ytb:before,.email:before,.skype:before,.android:before,.telegram:before,.instagram:before,.tiktok:before{
content: '';
display: inline-block;
background-image: url(sicon.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
vertical-align: middle;
margin-right: .5rem;
background-position: 0 0;
}
.phone:before{
background-image: url(phone.jpg);
}
.skype:before{
background-image: url(skype.png);
}
.tiktok:before{
background-image: url(tt.png);
}
.email:before{
background-position: -924px 0;
}
.vk:before{
background-position: -168px 0;
}
.ytb:before{
background-image: url(youtube.png);
}
.android:before{
background-image: url(android.png);
}
.telegram:before{
background-image: url(tele.png);
}
.instagram:before{
background-image: url(instagram.jpg);
}
.android a{
background-color: #689f38;
color: white;
display: inline-block;
padding: 0 10px;
border-radius: 10px;
font-weight: 300;
}
table caption{
font-size: 1.6rem;
border-top: 1px solid #cacaca;
border-left: 1px solid #cacaca;
border-right: 1px solid #cacaca;
line-height: 2.2rem;
background-color: #f8f8ff;
}
.destroy{float: right;}
.show-next{
border-bottom: dotted 1px silver;
}
.system{background-color: #ffdead;padding:1rem;margin:1rem 0;border-radius:10px;clear:both;}
.ajax-msg{position:fixed;min-width:200px;top:0;left:0;z-index:10;background:#fc0;box-shadow:0 0 3rem rgba(0,0,0,0.8);padding:1rem;overflow:auto;}
h1{
font-size: 3rem;
}
h2{
font-size: 2.2rem;
}
h3{
font-size: 1.8rem;
}
h4{
font-size: 1.4rem;
}
h1,h2,h3,h4{
text-align: center;
margin-bottom: 1rem;
font-family: "Helios", Courier, monospace;
}
h2 span{
display: inline-block;
}
h2 span:after,h2 span:before{
content: '';
width: 100%;
height: 1px;
background: #f68b1f;
display: block;
margin: .5rem 0;
}
h2,h3,h4{
margin-top: 1rem;
}
hr{
margin: 1rem 0;
}
p{
padding-bottom: 1rem;
text-align: justify;
}
.cnt p{
text-align: center;
}
p:first-letter{
padding-left: 2rem;
}
ul,ol{
list-style-position: inside;
}
ul ul{
margin-left: 1em;
}
.fig-line{
background-image: url(vg.jpg);
background-repeat: no-repeat;
background-position: center;
height: 85px;
position: relative;
overflow: hidden;
margin: 1rem 0;
clear: both;
}
.fig-line:after,.fig-line:before{
content: '';
background-image: linear-gradient(45deg, #EEEEEE 25%, transparent 25%, transparent 50%, #F7F1EE 50%, #57676F 75%, transparent 75%, transparent);
background-size: 6px 6px;
height: 10px;
width: 50%;
display: block;
position: absolute;
top: 38px;
}
.fig-line:before{
left: -50px;
}
.fig-line:after{
right: -50px;
}
#container{
display: inline-block;
width: 100%;
padding-bottom: 60px;
position: relative;
z-index: 1;
}
header nav,#logo{
display: table-cell;
vertical-align: middle;
}
#logo a{
	display: inline-block;
	vertical-align: top;
}
#logo img{
margin-right: 1rem;
margin-left: 1rem;
}
#topnav{
list-style: none;
padding: 1rem;
margin: 0;
text-align: right;
}
#topnav li{
display: inline-block;
position: relative;
vertical-align: top;
height: 100%;
}
#topnav li a{
display: inline-block;
padding: .5rem 1rem;
background: white;
border: 1px solid silver;
margin-right: .5rem;
margin-bottom: .5rem;
border-radius: .5rem;
text-transform: uppercase;
font-size: 1.5rem;
text-align: center;
}
#topnav li a:hover{
text-decoration: none;
background: #fffacd;
}
#topnav li ul{
	display: none;
	position: absolute;
	left: 0;
	margin-left: 0;
	background: white;
}
#topnav li:hover ul{
	display: block;
}
#topnav li.login{
	background-image: url(lock.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 36px;
	height: 36px;
}
#topnav li.login a{
	border: none;
	background: transparent;
	width: 100%;
	height: 100%;
}
#search{
padding: 1rem;
float: left;
}
#search:before{
content: 'Поиск';
padding-right: .5rem;
}
#search:after{
content: 'Найти';
cursor: pointer;
padding-left: 5px;
border-left: 1px solid silver;
margin-left: -60px;
}
#search input{
margin-right: .5rem;
padding-right: 60px;
}
.main-text{
text-align: right;
padding-left: 1rem;
padding-right: 1rem;
color: #8b0000;
float: right;
}
.main-text .flt,.main-text .frt{
font-size: 2.2rem;
text-transform: uppercase;
margin-bottom: 1rem;
}
#leftside{
padding: 0 1rem 2rem 0;
border-right: 1px solid #a7d7f9;
width: 20%;
}
#leftside ul{
list-style: none;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #a7d7f9;
}
#leftside,#rightside{
display: table-cell;
}
#rightside{
padding-left: 2rem;
}
.black{
color: black;
}
.red{
	color: #bb0000;
}
pre{
font-family: 'gothic', sans-serif;
font-size: 1.6rem;
text-align: center;
margin: 1rem auto;
position: relative;
width: 60%;
line-height: 2rem;
}
pre:after,pre:before{
content: '';
display: block;
width: 100%;
height: 38px;
background-image: url(quotes.png);
background-repeat: no-repeat;
}
pre:before{
background-position: left;
margin-bottom: -10px;
}
pre:after{
background-position: right;
margin-top: -10px;
}
blockquote {
	padding: 1rem 2rem;
	margin: 0 0 2rem;
	border-left: 5px solid #eee;
	border-color: #5d92bd;
}
blockquote>div{
	padding: 1rem;
	margin: 0 0 1rem;
	color: #333;
	word-break: break-all;
	word-wrap: break-word;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
	line-height: 2rem;
}
.block-list{
list-style: none;
}
.block-list li{
display: inline-block;
vertical-align: top;
margin-right: 1rem;
line-height: 50px;
margin-bottom: 1rem;
}
.box{
border: 1px solid silver;
border-radius: 10px;
display: inline-block;
vertical-align: top;
padding: 1rem;
margin: 1rem;
max-width: 100%;
}
.box.red{
border-top: 5px solid red;
}
.box.green{
border-top: 5px solid green;
}.box.blue{
border-top: 5px solid blue;
}
.m-bot{
margin-bottom: 1rem;
}
.gallery{
margin: 1rem 0;
text-align: center;
white-space: nowrap;
overflow: auto;
}
.gallery .gallery-item{
display: inline-block;
vertical-align: top;
margin: 0 1rem 1rem 0;
}
#addMeta{
margin: 1rem auto;
box-shadow:0 0 1rem rgba(0,0,0,0.6);
border-radius: 10px;
padding: 1rem;
background-color: White;
clear: both;
margin-top: 1rem;
}
#addMeta .line{
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid silver;
box-shadow:0 0 .5rem rgba(0,0,0,0.6);
}
#addMeta textarea{
width: 100%;
min-height: 200px;
margin: 0;
}
#addMeta input[type=text]{
width: 50%;
}
#addMeta .line .box{
width: 30%;
}
#file_manager,#video_manager{
width: 50%;
padding: 1rem;
}
#files li{
border-top: 1px solid silver;
margin-top: .5rem;
}
.ajax-msg textarea{
margin-left: 0;
margin-right: 0;
width: 100%;
}
input[name="sort"]{
width: 5rem;
}
.table-list{
margin: 1rem 0;
padding-bottom: 1rem;
border-bottom: 1px solid silver;
}
.wait{
background-image: url(AjaxLoader.gif);
background-repeat: no-repeat;
background-position: 0 0;
padding-left: 40px;
min-height: 40px;
}
ul.sqr{
list-style: none;
text-align: center;
}
.sqr li{
display: inline-block;
vertical-align: top;
width: 24%;
margin: 0 .5% 2rem;
padding: 1rem;
border: 1px solid silver;
box-shadow:0 0 .5rem rgba(0,0,0,0.6);
}
.sqr li:hover{
background-color: #fffacd;
}
.sqr li a{
display: inline-block;
width: 100%;
}
#feedback{
width: 50%;
margin: 1rem auto;
background-color: #ffdead;
padding: 2rem;
}
#feedback input, #feedback textarea{
width: 100%;
display: block;
margin-bottom: 20px;
}
#toTop{position:fixed;bottom:1rem;left:2%;display:none;z-index:5;}
#toTop.on{display:inline-block;}
#main_link{
background-color: white;
border-bottom: 1px solid #d5d5d5;
margin-bottom: 1rem;
}
#main_link a{
display: inline-block;
padding: .5rem 0 .5rem 1rem;
color: gray;
text-decoration: none;
}
#main_link a:hover{
color: black;
}
#main_link a:after{content: '\BB'; padding-left: .5rem;}
.flip-box{
	display: inline-block;
	margin: 0 1% 2rem;
	vertical-align: top;
	position: relative;
	max-width: 30%;
	text-align: center;
}
.flip-box img{
	max-width: 100%;
}
.flip-box .descr{
	margin-top: 2rem;
}
.flip-box .front-flip-box,.flip-box .back-flip-box{
	transition: 400ms;
	width: 100%;
	height: 100%;
}
.flip-box .back-flip-box{
	background-color: #1a88a3;
	color: white;
	position: absolute;
	padding: 1rem;
	top: 0;
	z-index: 1;
}
.flip-box .cnt{
	display: inline-block;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}
.flip-box .front-flip-box,.flip-box:hover .back-flip-box{
	transform: rotateY(0deg);
}
.flip-box:hover .front-flip-box,.flip-box .back-flip-box{
	transform: rotateY(180deg);
	backface-visibility: hidden;
}
.flip-box .name{
position: absolute;
top: 0;
left: 0;
text-shadow: 2px 2px 2px #080808, 0 0 1em red;
color: white;
font-size: 1.2em;
text-align: center;
padding: 10px;
width: 100%;
}
#orders{
	padding: 1rem;
	border-top: 1px solid gray;
}
.order{
	border-bottom: 1px solid gray;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}
#switcher{
	display: none;
	transition: color 400ms, background-color 400ms;
	cursor: pointer;
	float: right;
}
#switcher:before{
	content: '';
	background-color: #009688;
	background-image: linear-gradient(0deg, #EEEEEE 25%, transparent 25%, transparent 50%, #F7F1EE 50%, #57676F 75%, transparent 75%, transparent);
	background-size: 20px 5px;
	width: 40px;
	height: 40px;
	display: block;
}
#switcher:hover:before,#switcher.on:before{
	background-color: blue;
}
#basket_mini{
	background-image: url(basket.jpg);
	background-repeat: no-repeat;
	width: 50px;
	height: 40px;
	display: inline-block;
	cursor: pointer;
	position: relative;
	margin: 1rem;
	float: right;
}
#basket_mini .sku{
	display: inline-block;
	position: absolute;
	top: -1rem;
	right: -1rem;
	padding: .5rem;
	color: #8b0000;
}
#basket_list li{
	margin-bottom: 1rem;
	padding: 1rem;
}
#basket_list li:hover{
	background-color: #ffdead;
}
#one_itm{
	text-align: center;
}
.basket-item button, #clear_basket,.mass-list button{
	padding: .5rem 1rem;
	line-height: normal;
	font-size: 1rem;
}
.textb{
	font-weight: bold;
}
.clovo{
	background-image: url(cvact-clovo.gif);
	padding: 20px;
	margin: 1rem 0;
	border: 2px dotted #3558dc;
	border-radius: 70px;
}
.clovo-top,.clovo-bottom{
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	height: 70px;
}
.clovo-top{
	background-image: url(v3b.gif);
}
.clovo-bottom{
	background-image: url(n3b.gif);
}
.clovo-top:after,.clovo-top:before,.clovo-bottom:after,.clovo-bottom:before{
	content: '';
	height: 70px;
	width: 70px;
	background-position: left top;
	background-repeat: no-repeat;
}
.clovo-top:after,.clovo-top:before{
	background-image: url(v1b.gif);
}
.clovo-bottom:after,.clovo-bottom:before{
	background-image: url(n1b.gif);
}
.clovo-top:before{
	float: left;
	margin: -29px 0 0 -24px;
}
.clovo-top:after{
	float: right;
	transform: rotate(90deg);
	margin: -24px -29px 0 0;
}
.clovo-bottom:before{
	float: left;
	margin: 27px 0 0 -23px;
}
.clovo-bottom:after{
	float: right;
	transform: rotate(-90deg);
	margin: 24px -27px 0 0;
}
.emblema-vg{
	background-image: url(gramota.gif);
	background-position: center;
	background-repeat: no-repeat;
	height: 100px;
	background-size: 50% auto;
	margin: 1rem 0;
}
.emblema-vg:after,.emblema-vg:before{
	content: '';
	height: 100px;
	width: 100px;
	background-position: left top;
	background-repeat: no-repeat;
}
.emblema-vg:before{
	float: left;
	background-image: url(emblema.gif);
}
.emblema-vg:after{
	float: right;
	background-image: url(emblema1.gif);
}
.stix>div{
margin-bottom: 2rem;
}
.video{
	text-align: center;
}
.youtube{
	padding-bottom: 56.25%;
	overflow: hidden;
	text-align: center;
	margin: 0 auto 20px;
	position: relative;
}
.youtube iframe{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
button.bt-buy{
	background: #f68b1f;
}
.product section{
	margin-bottom: 20px;
}
.product .buttons{
	margin-bottom: 20px;
	text-align: center;
}
.product .descr{
	max-height: 5em;
	overflow: hidden;
}
.product .descr.on{
	max-height: none;
}
.price{
font-weight: 600;
color: #a52a2a;
text-align: center;
}
.price:after{
content: ' руб';
}
.collapsible-wrap{
	text-align: right;
}
.collapsible{
	cursor: pointer;
	display: inline-block;
	border-bottom: 1px dotted gray;
	text-align: center;
}
.collapsible .close{
	display: none;
}
.collapsible .open{
	display: inline;
}
.collapsible.on .close{
	display: inline;
}
.collapsible.on .open{
	display: none;
}
.shop-list{
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
justify-content: space-evenly;
align-items: flex-start;
}
.tovar{
max-width: 48%;
min-width: 160px;
margin: 10px 1%;
border: 1px dotted gray;
padding: 10px 2%;
border-radius: 20px;
}
.tovar:hover{
background-color: #fdf5e6;
}
.tovar .name{
font-weight: bold;
text-align: center;
}
.tovar .descr{
padding: 5px;
font-weight: 600;
color: brown;
}
.btn{
	text-align: center;
	margin-top: 10px;
}
.pic{
	text-align: center;
}
@media only screen and (min-width:960px){
	/*всё что больше 960px*/
	header{
	}
	body{
	}
	.ajax-msg{width:50%;max-height:50%;margin:10% 0 0 25%;}
	#login{
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 100;
	background-color: white;
	box-shadow:0 0 1rem rgba(0,0,0,0.6);
	padding: 10px;
	width: 200px;
	margin-right: -220px;
	border-radius: 10px;
	text-align: center;
	transition: all 0.5s ease-out;
	}
	#login input{
	width: 90%;
	}
	#login.on{
	margin-right: 10px;
	}
	#login .clicker{
	position: absolute;
	left: -100px;
	bottom: 10px;
	opacity: 0.5;
	border-radius: 50%;
	background-clip: padding-box;
	width: 60px;
	height: 60px;
	animation: utcm2 1.5s 0s ease-out infinite;
	}
	#login .clicker:before {
	content: "";
	background-image: url(pycb.png);
	position: absolute;
	width: 60px;
	height: 60px;
	left: 0;
	top: 0;
	background-repeat: no-repeat;
	background-position: center center;
	animation: utcp 4s linear infinite;
	cursor: pointer;
	}
	@keyframes utcm2 {
	from {box-shadow: 0 0 8px 6px rgba(23,167,167, 0), 0 0 0px 0px rgba(0,0,0,0), 0 0 0px 0px rgba(23,167,167, 0);}
	10% {box-shadow: 0 0 8px 6px #8d8, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px #8d8;}
	to {box-shadow: 0 0 8px 6px rgba(23,167,167, 0), 0 0 0px 30px rgba(0,0,0,0), 0 0 0px 30px rgba(23,167,167, 0);}
	}
	@keyframes utcp {
	from {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
	25% {-ms-transform:rotate(10deg);-webkit-transform:rotate(10deg);transform:rotate(10deg);} 
	50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
	75% {-ms-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);transform:rotate(-10deg);}
	to {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
	}
	#login:hover{
	opacity: 1;
	color: red;
	}
}
@media only screen and (max-width:960px){
	/*всё что меньше 960px*/
	.block-list{
		text-align: left;
	}
	header{
	min-height: none;
	margin-top:0;
	}
	footer{
	padding-bottom: 5rem;
	margin-top: 0;
	}
	pre{
		width: auto;
		overflow-x: auto;
		width: 100%;
		white-space: pre-line;
	}
	#topnav li ul{
		position: initial;
		display: block;
		margin-left: 1rem;
	}
	#topnav ul li a{
		background-color: #eeeeee;
	}
	#switcher{
		display: inline-block;
		vertical-align: top;
		margin-right: 2rem;
	}
	#wrap{
	margin-left: 1rem;
	margin-right: 1rem;
	}
	#basket_mini{
		margin-top: 0;
	}
	header nav, #logo{
		display: block;
	}
	#logo a{
		display: block;
		text-align: center;
	}
	#logo a img{
		width: 80%;
	}
	#topnav{
		display: none;
	}
	#topnav.on{
		display: block;
		clear: both;
	}
	#toTop{
	width: 100%;
	position: initial;
	margin: 1rem 0;
	}
	#topnav li,#topnav li a{
		display: block;
	}
	#search{
	float: none;
	}
	#feedback{
	width: 100%;
	}
	#topnav{
	padding-bottom: 0;
	}
	#login{
	display: none;
	}
	.main-text{
	float: none;
	padding-bottom: 1rem;
	}
	.box{
		margin-left: auto;
		margin-right: auto;
	}
	.w30, .w45{
	width: 100%;
	}
	.ajax-msg{width:90%;max-height:80%;margin:10% auto 0;}
	.flip-box{
		width: 100%;
		max-width: none;
	}
}
@media only screen and (max-width:721px){
	table,tr,td{
		display: block;
	}
}