html {
    height: auto;
	width: 100%;
	margin: 0 auto;
	background: rgb(240,240,240);	
	color: rgb(0,50,100);
	background-image: url('fon3.jpg');	
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	font-family: Arial;

}

body {
    height: auto;
	width: 80%;	
	margin: 0 auto;
	text-align: center;
	color: rgb(0,50,100);
	font-family: PF Isotext Pro, Arial;
	
}

   a{
	color: white;
	text-decoration: none; /* убираем подчеркивание */
   }

   @font-face {
    font-family: PF Isotext Pro; /* Гарнитура шрифта */
    src: url(/fonts/IsotextProe.ttf); /* Путь к файлу со шрифтом */
   }
   

header {
    height: 110px;
	width: 100%;	
	margin: 0 auto;
	background: none;	
	padding: 0px;
	font-size: 100%;
	color: rgb(255, 255, 255);
	font-family: Arial;
	
}

#logo {
	width: 70x;
	height: 70px;
	background: rgba(0,40,80, 0.5);
	text-align: center;
	padding: 5px;
	border-left: 1px solid gray;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	border-radius: 15px 15px 15px 15px;
	float: left;

}

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

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);   
 
} 

#rightnavy {
	width: 55px;
	height: 160px;
	background: rgba(0,40,80, 0.8);
	position: fixed;
	right: 0px;
	bottom: calc(50% - 80px);
	text-align: center;
	padding-top: 5px;
	border-left: 1px solid gray;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	border-radius: 15px 0px 0px 15px;
	z-index: 999;

}

#bottomnavy {
	min-width: 55px;
	height: 20px;
	background: rgba(0,40,80, 0.5);
	position: fixed;
	bottom: 40px;
	left: 0px;
	text-align: left;
	padding: 10px;
	border-right: 1px solid gray;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	border-radius: 0px 15px 15px 0px;
	font-family: PF Isotext Pro;
	font-size: 16px;
	z-index: 999;
}

#topnavy {
	width: 100%;
	height: 120px;
	text-align: left;
	padding: 0px;
	color: rgba(255,255,255, 0.9);
	border-bottom: 2px solid rgb(0,50,100);
	font-family: PF Isotext Pro;

}

#footnavy {
	width: 100%;
	height: auto;
	text-align: left;
	padding: 0px;
	color: rgba(255,255,255, 0.9);
	border-top: 2px solid rgb(0,50,100);
	border-bottom: 2px solid rgb(0,50,100);
	font-family: PF Isotext Pro;

}



#topmenu {

	height: 30px;
	background: rgb(0,20,40);
	text-align: center;
	padding: 10px;

}

#hblock1 {
	width: 60%;
	height: 50px;
	background: none;
	text-align: left;
	float: left;
	padding-top: 10px;
	font-family: PF Isotext Pro;
}

#hblock2 {
	width: 30%;
	height: 60px;
	background: none;
	text-align: right;
	float: right;

}

#hblock3 {
	width: 60%;
	height: 50px;
	background: none;
	text-align: left;
	float: left;
	padding-top: 10px;
	font-family: PF Isotext Pro;
	display: none;
}

#hblock4 {
	width: 30%;
	height: 60px;
	background: none;
	text-align: right;
	float: right;
	display: none;
	font-family: PF Isotext Pro;
}

#center1 {
    height: auto;
	width: 78%;	
	margin: 0 auto;
	background: rgba(220,220,230, 0.8);	
	padding: 10px;
	font-size: 18px;
	text-align: left;
	color: rgb(0, 0, 0);
	background-image: url('fon_cen1.jpg');	
	background-position: center-c;
	background-repeat: vertical;
	font-family: PF Isotext Pro;
	border-radius: 15px;
	

	
}

#left1 {
    float: left;
    width: 48%;
	height: auto;
	color: #f5f5f5;
    margin: 0;
	text-align: left;
	font-size: 18x;
	padding: 1%;
	border: none;
	background: none;
	position: relative;

}

#right1 {
    float: right;
    width: 48%;
	height: auto;
	color: black;
    margin: 0;
	text-align: left;
	font-size: 20px;
	padding: 1%;
	border: none;
	background: none;
	position: relative;
}

.accordion{

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

  display: none;
}



.toggle-box + label { 
  background: gray;
  color: #fff;
  cursor: pointer;
  display: block;
  font: normal 18px Helvetica, Arial, sans-serif;
  border-bottom: 2px solid rgb(50,50,50);
  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: background: rgba(50, 50, 50, 0.5);
    
}



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



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



.toggle-box + label:before {
  background: #404247;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #C9C9C9;
	content: '\25BA';
  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: '\25C4';
}



.box{
  background: rgba(100, 50, 50, 0.4);
  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: 18px Helvetica, Arial, sans-serif;
  color: white;
  line-height: 1.5;
  min-height: 200px;

}

.box1{
  background: rgba(150, 50, 50, 0.4);
  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: white;
  line-height: 1.5;
  min-height: 150px;

}

.box2{
  background: rgba(250, 50, 50, 0.4);
  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: white;
  line-height: 1.5;
  min-height: 150px;

}

        @media screen and (min-width:300px) and (max-width:1200px) {
			
body {
    height: auto;
	width: 100%;	
	margin: 0 auto;
	text-align: center;
	color: white;

}

header {
    height: 110px;
	font-size: 70%;
}

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

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;  
 
}  

img[tabindex="0"]:focus, /* Привязка на возврат фото в привычное состояние после клика на увеличенное */  
img[tabindex="0"]:focus ~ * {  
  cursor: zoom-out;  
  pointer-events: none;  
}


#hblock1 {
	width: 60%;
	height: 50px;
	background: none;
	text-align: left;
	float: left;
	padding-top: 10px;
	font-family: PF Isotext Pro;
	display: none;
}

#hblock2 {
	width: 30%;
	height: 60px;
	background: none;
	text-align: right;
	float: right;
	display: none;

}

#hblock3 {
	width: 35%;
	height: 60px;
	background: none;
	text-align: left;
	float: left;
	padding-top: 10px;
	font-family: PF Isotext Pro;
	display: block;
}

#hblock4 {
	width: 60%;
	height: 60px;
	background: none;
	text-align: right;
	float: right;
	display: block;
	padding-right: 5px;

}



#logo {
	width: 70x;
	height: 70px;
	background: rgba(0,40,80, 0.5);
	text-align: center;
	padding: 5px;
	border-left: 1px solid gray;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	border-radius: 15px 15px 15px 15px;
	float: left;

}

#center1 {
    height: auto;
	width: 90%;	
	margin: 0 auto;
	background: rgba(250,235,135, 0.8);	
	padding: 10px;
	font-size: 16px;
	text-align: left;
	color: rgb(0, 0, 0);
	font-family: Arial;
	background-image: url('fon_cen1.jpg');	
	background-size: 100%;
	background-repeat: vertical;
	font-family: PF Isotext Pro;
	border-radius: 15px;
	

	
}

#rightnavy {
	bottom: 10px;
	
}

#left1 {
    float: center;
    width: 98%;
	height: 200px;
	color: #f5f5f5;
	text-align: left;
	font-size: 14px;
	padding: 1%;
	border: none;
	background: gray;

}

#right1 {
    float: center;
    width: 98%;
	height: 200px;
	color: black;
	text-align: left;
	font-size: 20px;
	padding: 1%;
	border: none;
	background: none;
}




		}