* {
    margin: 0;
    padding: 0;
}
 
html {
    height: auto;
	width: 100%;
	margin: 0 auto;
	background: black;
	color: white;
}

/* Обычный */
@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;
}

img.big {cursor: pointer; max-width: 150px;}
img.big:hover {max-width: 350px;}

 
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);   
 
} 
 
body {
	margin: 0 auto;
    height: 100%;
    width: 100%;
    background: black;
    font-family: verdana, arial, sans-serif;
	text-align: center;
	color: white;
}
 
 
header {
	margin: 0 auto;
     width: 60%;
	height: 160px;
	padding: 10px;
	text-align: center;
	position: relative;
	font-size: 52px;
	color: white




}


 
main {
    padding: 0 0 0 0;
    min-height: 50px;
	max-height: auto;
    margin: 0;
	top: 200px;
}
 
 
#center {
	width: 60%;
	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: 100%;
	min-width: 306px;
	margin: 0;
	color: black;
	min-height: 50px;
	text-align: left;
	font-size: 16px;
	border-bottom: 0px solid gray;

}

#center_1f {
	width: 100%;
	min-width: 306px;
	margin: 0;
	color: black;
	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: 220px;
	margin-left: calc(50% - 110px);
	height: 40px;
	background: rgba(0,0,0, 0.0);
	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;

}



	
		@media screen and (min-width:350px) and (max-width:979px) {
             
                main {
                        padding:5px;
                    }
                     


					header {
						margin: 0 auto;
						height: 60px;
						width: 95%;
						font-size: 18px;

}

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

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

}					

					#center {
						width: 95%;
}
        }