/* ШРИФТЫ */
@font-face {font-family: Roboto; src: url(../fonts/roboto.ttf);}
@font-face {font-family: Roboto Bold; src: url(../fonts/roboto-bold.ttf);}
*{ font-family: Roboto, Roboto Bold, Arial, sans-serif; margin:0; padding:0; font-size: 18px; color: Gray;}

/* ОБЩИЕ */
a {text-decoration: none;}
h1 {font: 170% Roboto Bold; color: #ed171f; text-indent: 20px; margin-top: 5px;}
h2 {font: 130% Roboto Bold; color: Gray; text-indent: 40px; margin-top: 5px;}
h3 {font: 120% Roboto Bold;  color: #ed171f; text-indent: 30px; margin-top: 10px;}
h4 {font: 100% Roboto Bold; color: DodgerBlue; text-indent: 20px; margin-top: 20px;}
h5 {font: 100% Roboto Bold; color: Silver; text-indent: 20px; margin-top: 20px;}
h6 {font: 100% Roboto Bold; color: #ed171f; margin-top: 20px;}

p {margin-top:5px;text-indent:20px;text-align:justify;} 
.row {text-align: right; margin-top: -25px;}

strong {color: #ed171f;}
strong:hover{color: DodgerBlue;}

.tco:hover, title {font: 100% Roboto Bold; color: #ed171f;}

/* НАВИГАЦИЯ */
.white {color: White;}
.crimson {font: 100% Roboto Bold; color: #ed171f;}
.green {color: LimeGreen;}
.lime {font: 100% Roboto Bold; color: LimeGreen;}
.blue {color: DodgerBlue;}
.red {font-weight: bold; color: #ed171f;}
.red:hover {color: Gray;}

.nav {
float: left;
width: 20%;
display:block;
}

#nav_center a, #nav_center .fa {color: White;}
.select {background: #ed171f;}

#tel:hover, .nav:hover {background: Silver;}
#tel {clear: both; display:block;}
#tel a {color: White;}

#form-query {width: 60%; vertical-align: top; padding: 0; border-radius: 5px;}

#board
{
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
padding: 5%;
margin: 20px 0;
} 

#wrapper{
max-width: 1920px;
margin: auto;
}

#header{
padding: 20px;
clear: both;
}

.clear{
clear: both;
}

#head_left {
width: 25%;
height: auto;
float: left;
padding: 1%;
text-align: center;
}

#head_left img {
width: 150px;
}


#head_right img {
width: 150px;
}

#head_left img:hover{
opacity:0.5
}

#head_center {
width: 40%;
height: auto;
float: left;
padding: 1%;
text-align: center;
}

#head_right {
width: 25%;
height: auto;
float: left;
padding: 1%;
text-align: center;
}



#nav_left {
width: 19%;
height: 30px;
line-height: 30px;
float: left;
padding: 5px 1%;
background: url(../img/bg.gif);
border-radius: 0 0 0 10px;
text-align: center;
}

#nav_center {
width: 56%;
height: 30px;
line-height: 30px;
float: left;
padding: 5px 1%;
background: url(../img/bg.gif);
text-align: center;
}

#nav_right{
width: 19%;
height: 30px;
line-height: 30px;
float: left;
padding: 5px 1%;
background: url(../img/bg.gif);
border-radius: 0 0 10px 0;
text-align: center;
}

#left_sidebar {
width: 19%;
height: auto;
float: left;
padding: 1%;
overflow: hidden;
}

#content {
width: 56%;
height: auto;
float: left;
overflow: hidden;
padding: 1%;
}

#right_sidebar {
width: 19%;
height: auto;
float: left;
padding: 1%;
text-align: center;
}

footer{
clear: both;
margin-top: 2%;
background: url(../img/bg.gif);
border-radius: 7px 7px 0 0;
color: White;
padding: 1%;
text-align: center;
font: normal 100% Roboto;
}

.iframe {width:100%; height:400px; border:none; background:black; border-radius:10px;}

.face {width:100%; height:auto; border-radius:10px; margin:20px 0;}

.panel  {width:70%; height:auto; margin:20px 15%;}

.hide {display:none;}

/* ИКОНКА */
.ico {
margin:10px 20% 0;
padding:2px; 
height:160px;
color: Silver;
border: 3px solid Silver;
border-radius:6px;
display: block;
}

.ico:hover {
border: 3px solid Gray;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
}
a.cg, a.cn, a.cl, a.c2, a.c3, a.c4, a.c5, a.c6, a.c7, a.c8, a.c9, a.c10, a.c11, a.c12, a.c13, a.c14, a.c15, a.c16, a.c17, a.c18, a.c19, a.c20, a.c21, a.c22, a.c23, a.c24, a.c25, a.c26, a.c27, a.c28, a.c29, a.c30, a.c31, a.c32, a.c33, a.c34, a.c35, a.c36, a.c37, a.c38, a.c39, a.c40, a.c41, a.c42, a.c43, a.c44, a.c45, a.c46, a.c47, a.c48, a.c49, a.c50 {padding-top:25px; text-align:center; width:100%; height:160px; display:block; color:Silver;}
a.cl:hover, a.cg:hover, a.cn:hover, a.c2:hover, a.c3:hover, a.c4:hover, a.c5:hover, a.c6:hover, a.c7:hover, a.c8:hover, a.c9:hover, a.c10:hover, a.c11:hover, a.c12:hover, a.c13:hover, a.c14:hover, a.c15:hover, a.c16:hover, a.c17:hover, a.c18:hover, a.c19:hover, a.c20:hover, a.c21:hover, a.c22:hover, a.c23:hover, a.c24:hover, a.c25:hover, a.c26:hover, a.c27:hover, a.c28:hover, a.c29:hover, a.c30:hover, a.c31:hover, a.c32:hover, a.c33:hover, a.c34:hover, a.c35:hover, a.c36:hover, a.c37:hover, a.c38:hover, a.c39:hover, a.c40:hover, a.c41:hover, a.c42:hover, a.c43:hover, a.c44:hover, a.c45:hover, a.c46:hover, a.c47:hover, a.c48:hover, a.c49:hover, a.c50:hover {color: #09f; font-weight: 700;}
a.cn {background: url(../img/lab/n.gif) 15% 50% no-repeat;}a.cg {background: url(../img/lab/g.gif) 15% 50% no-repeat;}
a.c2{background:url(../img/lab/2.gif) 15% 50% no-repeat;}a.c3{background:url(../img/lab/3.gif) 15% 50% no-repeat;}
a.c4{background:url(../img/lab/4.gif) 15% 50% no-repeat;}a.c5{background:url(../img/lab/5.gif) 15% 50% no-repeat;}
a.c6{background:url(../img/lab/6.gif) 15% 50% no-repeat;}a.c7{background:url(../img/lab/7.gif) 15% 50% no-repeat;}
a.c8{background:url(../img/lab/8.gif) 15% 50% no-repeat;}a.c9{background:url(../img/lab/9.gif) 15% 50% no-repeat;}
a.c10{background:url(../img/lab/10.gif) 15% 50% no-repeat;}a.c11{background:url(../img/lab/11.gif) 15% 50% no-repeat;}
a.c12{background:url(../img/lab/12.gif) 15% 50% no-repeat;}a.c13{background:url(../img/lab/13.gif) 15% 50% no-repeat;}
a.c14{background:url(../img/lab/14.gif) 15% 50% no-repeat;}a.c15{background:url(../img/lab/15.gif) 15% 50% no-repeat;}
a.c16{background:url(../img/lab/16.gif) 15% 50% no-repeat;}a.c17{background:url(../img/lab/17.gif) 15% 50% no-repeat;}
a.c18{background:url(../img/lab/18.gif) 15% 50% no-repeat;}a.c19{background:url(../img/lab/19.gif) 15% 50% no-repeat;}
a.c20{background:url(../img/lab/20.gif) 15% 50% no-repeat;}a.c21{background:url(../img/lab/21.gif) 15% 50% no-repeat;}
a.c22{background:url(../img/lab/22.gif) 15% 50% no-repeat;}a.c23{background:url(../img/lab/23.gif) 15% 50% no-repeat;}
a.c24{background:url(../img/lab/24.gif) 15% 50% no-repeat;}a.c25{background:url(../img/lab/25.gif) 15% 50% no-repeat;}
a.c26{background:url(../img/lab/26.gif) 15% 50% no-repeat;}a.c27{background:url(../img/lab/27.gif) 15% 50% no-repeat;}
a.c28{background:url(../img/lab/28.gif) 15% 50% no-repeat;}a.c29{background:url(../img/lab/29.gif) 15% 50% no-repeat;}
a.c30{background:url(../img/lab/30.gif) 15% 50% no-repeat;}a.c31{background:url(../img/lab/31.gif) 15% 50% no-repeat;}
a.c32{background:url(../img/lab/32.gif) 15% 50% no-repeat;}a.c33{background:url(../img/lab/33.gif) 15% 50% no-repeat;}
a.c34{background:url(../img/lab/34.gif) 15% 50% no-repeat;}a.c35{background:url(../img/lab/35.gif) 15% 50% no-repeat;}
a.c36{background:url(../img/lab/36.gif) 15% 50% no-repeat;}a.c37{background:url(../img/lab/37.gif) 15% 50% no-repeat;}
a.c38{background:url(../img/lab/38.gif) 15% 50% no-repeat;}a.c39{background:url(../img/lab/39.gif) 15% 50% no-repeat;}
a.c40{background:url(../img/lab/40.gif) 15% 50% no-repeat;}a.c41{background:url(../img/lab/41.gif) 15% 50% no-repeat;}
a.c42{background:url(../img/lab/42.gif) 15% 50% no-repeat;}a.c43{background:url(../img/lab/43.gif) 15% 50% no-repeat;}
a.c44{background:url(../img/lab/44.gif) 15% 50% no-repeat;}a.c45{background:url(../img/lab/45.gif) 15% 50% no-repeat;}
a.c46{background:url(../img/lab/46.gif) 15% 50% no-repeat;}a.c47{background:url(../img/lab/47.gif) 15% 50% no-repeat;}
a.c48{background:url(../img/lab/48.gif) 15% 50% no-repeat;}a.c49{background:url(../img/lab/49.gif) 15% 50% no-repeat;}
a.c50{background:url(../img/lab/50.gif) 15% 50% no-repeat;}


/* МЕДИА ЗАПРОС для ширины в 1000px */
@media only screen and (max-width: 1000px){

* {
font-size: 16px;
}

#left_sidebar, #head_left, #nav_left {
width: 30%;
}

#content, #head_center, #nav_center {
width: 66%;
}

#right_sidebar, #head_right, #nav_right {
display:none;
}
}


/* МЕДИА ЗАПРОС для ширины в 600px */
@media only screen and (max-width : 600px){

* {
font-size: 12px;
}

#head_center, #left_sidebar{
display:none;
}

#content{
width: 96%;
}

#phone img {
width: 60%;
}

}