* {
    margin: 0;
    padding: 0;
}
 
html {
    height: auto;
	width: 100%;
	margin: 0 auto;
	background-image: url(fon.jpg);
	background-size: 100%;
	background-position: center-top;
	background-repeat: vertical;
	
}

/* Обычный */
@font-face {
	font-family: 'Segoe UI'; 
	src: url(/fonts/SegoeUILight.ttf); 
}
 
/* Жирный */
@font-face {
	font-family: 'Century Gothic'; 
	src: url(/fonts/11528.ttf); 
}
 
.text-1 {
	font-family: 'Segoe UI'; 
	color: black;
	font-weight: 400;
}
 
.text-2 {
	font-family: 'Century Gothic'; 
	color: black;
}

.text-3 {
	font-family: 'Segoe UI'; 
	color: white;
	font-weight: 400;
}



 
body {
	margin: 0 auto;
    height: 100%;
    width: 100%;
    font-family: verdana, arial, sans-serif;
	

}
 
 
header {
	margin: 0 auto;
    width: 70%;
	height: auto;
	vertical-align: middle;
	background-image: url(none);
	background-size: 100%;
	background-position: center-top;
	background-repeat: no-repeat;
	font-size: 22px;
}


 
main {
    padding: 0 0 0 0;
    min-height: 50px;
	max-height: auto;
    margin: 0;

}
 
 
#left1 {
    float: left;
    width: 47%;
    margin: 2;
    height: 90%;
text-align: center;
font-size: 16px;
padding: 20 px;
border: 2px solid #1E90FF;
border-radius: 10px 10px 10px 10px;

}

#left_h {
    float: left;
	width: 990px;
	height: 115px;
	color: black;
    margin: 0;
    min-height: 100px;
	text-align: left;
	font-size: 20px;
	padding: 5px;
	background: white;
	border-bottom: 1px solid gray;

}
#right_h {
    float: right;
    width: 60%;
	height: 99%;
	color: white;
	margin: 0;
    min-height: 100px;
text-align: right;
font-size: 20px;
text-shadow: rgb(0, 50, 100) 0 0 6px;
padding: 00px;

}


#center {
	width: 70%;
	min-width: 306px;
	margin: 0 auto;
	color: black;
	min-height: 30px;
	text-align: left;
	font-size: 16px;
	border-bottom: 0px solid gray;
	border-top: 0px solid gray;



	

}

#center2 {
	width: 100%;
	min-width: 306px;
	margin: 0;
	color: black;
	min-height: 30px;
	text-align: left;
	font-size: 16px;
	border-bottom: 0px solid gray;


}

#center_2f {
	width: 70%;
	min-width: 306px;
	margin: 0 auto;
	color: lightyellow;
	min-height: 50px;
	text-align: left;
	font-size: 16px;
	border-bottom: 0px solid gray;

}

#center_1f {
	width: 100%;
	min-width: 306px;
	margin: 0;
	color: lightyellow;
	min-height: 50px;
	text-align: left;
	font-size: 16px;
	border-bottom: 0px solid gray;
	display: none;

}

#center1 {
	float: left;
	width: 98%;
	min-width: 306px;
	margin: 0;
	color: white;
	min-height: 100px;
	text-align: left;
	font-size: 16px;
	padding: 10px;


	
}

#bottomnavy {
	width: 190px;
	margin-left: calc(50% - 95px);
	height: 35px;
	background: rgba(0,50,100, 0.2);
	position: fixed;
	bottom: 0px;
	color: white;
	text-align: center;
	padding-top: 5px;
	border-left: 0px solid gray;
	border-top: 0px solid gray;
	border-right: 0px solid gray;
	border-radius: 20px 20px 0px 0px;
	z-index: 999;

}

#topnavy {
	width: 100%;
	height: 10px;
	background: rgba(30,50,100, 0.9);
	top: 0px;
	color: white;
	text-align: center;
	padding-top: 15px;
	border-left: 0px solid gray;
	border-top: 0px solid gray;
	border-right: 0px solid gray;
	border-radius: 0 0px 0px 0px;
	z-index: 999;
	position: fixed;
}

 
#s_left {
    float: left;
    width: 300px;
    margin-left: -100%;
    left: 0;
    position: relative;
    min-height: 92px;
text-align: left;
font-size: 12px;


}

#s_right {
    float: left;
    width: 300px;
    margin-left: -300px;
    right: 0;
    position: relative;
    min-height: 92px;
text-align: left;
font-size: 12px;

}

/* gallery */

#gall {
  position: relative;
  padding-top: 50%;
  -moz-user-select: none; user-select: none;
}
#gall img {
  position: absolute;
  top: 25%;
  left: 12.5%;
  max-width: 24.5%;
  max-height: 49.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: zoom-in;
  transition: .2s;
}
#gall img:nth-child(4n-2) {left: 37.5%;}
#gall img:nth-child(4n-1) {left: 62.5%;}
#gall img:nth-child(4n) {left: 87.5%;}
#gall img:nth-child(n+5) {top: 70%;}

#gall img:focus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  outline: none;
  pointer-events: none;
}
#gall img:focus ~ div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  cursor: zoom-out;
}




.accordion{

  width: 100%;
  padding: 0px;
  margin: 0 auto;
}
.toggle-box {

  display: none;
}



.toggle-box + label { 
  background: #6c6e74;
  background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
  background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c6e74', endColorstr='#4b4d51',GradientType=0 ); 
  color: #fff;
  cursor: pointer;
  display: block;
  font: normal 18px Helvetica, Arial, sans-serif;
  line-height: 21px;
  padding: 8px 8px; 
  margin-bottom: 0px;
  text-align: left;
}

label a, a:hover{color: #ddd;}



.toggle-box + label:hover{opacity: 0.9;} 



.toggle-box + label:active{
  background: #6c6e74;
  background: -moz-linear-gradient(top,  #6c6e74 0%, #545359 11%, #756d73 84%, #4b4d51 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(11%,#545359), color-stop(84%,#756d73), color-stop(100%,#4b4d51));
  background: -webkit-linear-gradient(top,  #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
  background: -o-linear-gradient(top,  #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
  background: -ms-linear-gradient(top,  #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
  background: linear-gradient(to bottom,  #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545359', endColorstr='#4b4d51',GradientType=0 );    
}



.toggle-box + label + div {
  display: none;
}



.toggle-box:checked + label + div {
  display: block;
}



.toggle-box + label:before {
  background: #404247;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  color: #C9C9C9;
  content: ">>>";
  display: block;
  float: right;
  font-size: 18px;
  font-weight: normal; 
  height: 18px;
  line-height: 18px;
  margin: 2px 5px 0px;
  text-align: center;
  width: 40px;
  box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
  -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
  -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

.toggle-box:checked + label:before {
  content: "<<<";
}



.box{
  background: #C8CDDD;
  border-left: rgba(0,0,0,0.1) solid 1px;
  border-right: rgba(0,0,0,0.1) solid 1px;
  border-bottom: rgba(0,0,0,0.1) solid 1px;
  padding: 0px;
  font: 14px Helvetica, Arial, sans-serif;
  color: #333;
  line-height: 1.5;
  min-height: 150px;

}

.box1{
  background: #D3D3D3;
  border-left: rgba(0,0,0,0.1) solid 1px;
  border-right: rgba(0,0,0,0.1) solid 1px;
  border-bottom: rgba(0,0,0,0.1) solid 1px;
  padding: 10px 10px 10px;
  font: 14px Helvetica, Arial, sans-serif;
  color: #333;
  line-height: 1.5;
  min-height: 150px;

}

.box2{
  background: #EEE9E9;
  border-left: rgba(0,0,0,0.1) solid 1px;
  border-right: rgba(0,0,0,0.1) solid 1px;
  border-bottom: rgba(0,0,0,0.1) solid 1px;
  padding: 10px 10px 10px;
  font: 14px Helvetica, Arial, sans-serif;
  color: #333;
  line-height: 1.5;
  min-height: 150px;

}



.large-img {width: auto; margin-bottom: 5px;}

img[tabindex="0"] {  
  cursor: zoom-in;
	padding: 10px;
}  

img[tabindex="0"]:focus {  
  position: fixed; z-index: 10;  
  top: 0; left: 0; bottom: 0; right: 0;  
  width: auto; max-width: 95%;  
  height: auto; max-height: 95%;  
  margin: auto; 
  box-shadow: 0 0 10px #000, 0 0 0 15px rgba(0,100,200,.3);  
-webkit-box-shadow: 0 0 10px #000, 0 0 0 15px rgba(0,100,200,.3);  
-moz-box-shadow: 0 0 10px #000, 0 0 0 15px rgba(0,100,200,.3);   
 
} 
 
   
	
		@media screen and (min-width:350px) and (max-width:979px) {
             
                main {
                        padding:5px;
                    }
                     
                     #s_left {
                        padding: 0;
                        margin: 0 auto;
                        float: none;
                        clear: both;
                        left: 0;
                    }
                                
                    #s_right {
                        padding: 0;
                        margin: 0 auto;
                        float: none;
                        clear: both;
                        right: 0;
                    } 
					
					#left1 {
						width: 48%;
						margin: 2;
						float: left;
						height: 180px;
						text-align: center;
						font-size: 16px;
						padding: 5 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;
					}
					
					#left_h {
						float: left;
						width: 90%;
						height: 100px;
						color: black;
						margin: 0;
						text-align: left;
						font-size: 18px;
						padding: 5px;
						background: white;
						

}



					#center_2f {
						width: 100%;
						min-width: 306px;
						margin-top: 250px;
						color: lightyellow;
						min-height: 30px;
						text-align: center;
						font-size: 16px;
						border-bottom: 0px solid gray;
						display: none;
}

					#center_1f {
						width: 100%;
						min-width: 306px;
						color: lightyellow;
						min-height: 30px;
						text-align: center;
						font-size: 16px;
						border-bottom: 0px solid gray;
						display: block;

}					

					#center {
					width: 95%;
}

					header {
					width: 95%;
					
}
        }