@import url(https://fonts.googleapis.com/css?family=Exo+2&subset=latin,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Russo+One&subset=latin,cyrillic);

/* TTF - truetype, OTF - opentype, SVG - svg, WOFF  - woff, EOT - embedded-opentype*/
@font-face {
	font-family: Myriad; /* имя шрифта для CSS правил */
	src: /* local('Myriad Pro'),  проверяем наличие шрифта в ОС пользователя */
         url('../fonts/myriadpro-cond.otf') format('opentype'); /* если шрифт не установлен, тогда загружаем его по указанному пути */
  }
@font-face {
	font-family: Exo 2; 
	src: url('fonts/Exo2-Medium.ttf') format('truetype'); 
}

/***** Global Settings *****/
 
html, body {
border:0;
margin:0;
padding:0;
}
 
body {
font-family: 'Exo 2', sans-serif;
font-size: 16px;
background: url(../images/subtle_dots_@2X.png);

}
 
a { text-decoration: none; color: inherit}
a:active { text-decoration: none; color: inherit}
a:visited { text-decoration: none; color: inherit}
a:hover { text-decoration: underline; color: inherit}

/***** Headings *****/
 
h1, h2, h3, h4, h5, h6 {
/*
	margin:50;
	padding:50;
*/
	font-weight:normal;
	text-align: center;
}
 

/***** Global Classes *****/
 
.small         { font-size:0.8em; }
.big 	  	   { font-size:1.5em; }
.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
 
.wrap          { width:960px;margin:0 auto; }
 
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

.white { color: #fff; }

.logo {
	border-radius: 10px;
	padding: 10px;
	background-color: rgba(80, 80, 80, 0.8);
	color: white;
	position: absolute;
	left: 10px;
	top: 10px;
}
.cat {
	background:#eee; 
	font-size:1.5em;
	padding: 5px;
}
.miryadom {
	position: absolute;
	right: 10px;
	top: 8px;
}

.textheader_index, 
.textheader_laser, 
.textheader_newyear, 
.textheader_vinyl,
.textheader_drop, 
.textheader_busyboard,
.textheader_vinyle,
.textheader_vinylr,
.textheader_vinyletsy,
.textheader_medalnitsa,
.textheader_obogrev
{
	position: absolute;
	background-color: rgba(80, 80, 80, 0.8);
	border-radius: 10px;
	padding: 10px;
	color: white;
}
.textheader_index {
	right: 50px;
	top: 350px;
	height: 120px;
	width: 500px;
}
/*
.textheader_laser {
	left: 100px;
	top: 320px;
	width: 500px;
}
*/
.textheader_obogrev,
.textheader_laser {
	right: 50px;
	top: 350px;
	height: 120px;
	width: 500px;
}
.textheader_obogrev {
	right: 50px;
	top: 400px;
	height: 120px;
	width: 500px;
}
.textheader_newyear {
	left: 100px;
	top: 350px;
	width: 500px;
}
.textheader_medalnitsa {
	left: 100px;
	top: 350px;
	width: 500px;
}
.textheader_vinyl,
.textheader_vinyle,
.textheader_vinylr,
.textheader_vinyletsy
{
	right: 50px;
	top: 350px;
	width: 500px;
}
.textheader_drop {
	right: 50px;
	top: 350px;
	width: 500px;
}
.textheader_busyboard {
	left: 50px;
	top: 350px;
	width: 500px;
}

.navbar {
	position: absolute;
	width: 100%;
}

.vinilcatalog_ {
     float: left; /*Задаем обтекание*/
     line-height: 20px;/*Высота строки +  верт. центрирования текста*/
     font-size: 15px;
     color: #939393;
     margin-top: 10px;
     width: 300px; /*Фиксируем ширину блока*/
     margin-right: 10px;
     text-align: center; /*Центрируем текст по горизонтали*/
}
.vinylcatalog {
     float: left; /*Задаем обтекание*/
     width: 300px; /*Фиксируем ширину блока*/
     margin: 0 15px 0 0;
}
.vinylcatalogforadmin {
     float: left; /*Задаем обтекание*/
     width: 150px; /*Фиксируем ширину блока*/
     margin: 3px;
}

/*блоки рядом в линию*/
.div_in_line { 
        width:300px; 
        height:50px; 
        background:#f1f1f1; 
        float:left; 
        margin: 0 15px 15px 0; 
        text-align:center;
        padding: 10px;
        }

.divcenter{
margin:0 auto;
width:800px;
/*height:200px;*/
}

header {
   background-position: left center;
   background-repeat: no-repeat;
   background-size: cover;
   background-color: #464646;
	
	margin-left: 0;
	margin-right: 0;
	border: none;
	height: 550px;
}
footer{
	margin-left: 0;
	margin-right: 0;
	border: none;
	height: 300px;

	background: #333;
	color: #f2f2f2;
	
	visibility: hidden;
}
main {
	padding: 10px;
}


#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  text-align: center;
  background-color: navy;
}
#navbar a {
  height: 50px;
  color: #fff;
  padding: 15px;
  text-decoration: none;
  display: inline-block;
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;
}
#navbar a:hover {
  	background-color: #fff;
	color: #000;
}
#navbar li { 
	display: inline; 
}

/*увеличивающаяся картинка*/
	.blokimg {
	position: relative;
	}
	.overlay{
	display: none;
	height: auto;
	left: -50%;
	position: absolute;
	top: -50%;
	width: auto;
	z-index: 999;
	}
	.overlay .overlay_container{
	display: table-cell;
	vertical-align: middle;
	}
	.overlay_container img{
	background-color: #AB5;
	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	}
	.overlay:target {
	display: table;
	}
/*увеличивающаяся картинка*/


/*выделение списков цветами и убрать галочку*/
#gallery {width: 700px; margin: 0 auto}
#gallery ul {padding-left: 10px;}
#gallery li {display: inline; margin-right: 3px;}
#gallery #main-img {background: url("../images/bg_img.png") no-repeat 0 0; padding: 26px;}

[id^=center_] {
  display: none;
}
[id^=center_] + label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
[id^=center_]:checked + label {
  color: tomato;
  cursor: text;
	background: #DFF7FF;
}
[id^=hands_] {
  display: none;
}
[id^=hands_] + label {
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  color: #555;
  cursor: pointer;
}
[id^=hands_]:checked + label {
  color: tomato;
  cursor: text;
	background: #DFF7FF;
}


/*отметки около обязательных полей и нет*/
   input:valid + span:after {
    content: url(../images/ok.png); 
    padding-left: 5px;
   }
   input:invalid + span:after {
    content: url("../images/no.png");
    padding-left: 5px;
   }
   input[type="number"] {
    margin-right: -3px;
   }