* {
    margin: 0;
    padding: 0;
}
 
html {
    height: 100%;
max-width: 1920px;
 margin: 0 auto;
background: #F5F5F5;
}



 
header, nav, section, main, article, aside, footer {
    display: block;
}
 
body {
    height: 100%;
    width: 100%;
    background: #F5F5F5;
    font-family: verdana, arial, sans-serif;
	
}
 
.maxw {
    margin: 0 auto;
    min-width: 320px;
    max-width: 1300px;
}
 
header {
    min-width: 320px;
    max-width: 100%;
	height: 130px;
	vertical-align: middle;
	position: relative;
	background: #201C33;
	color: white;
	padding: 10px;
	background-image: url('fon_h1.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	text-align: right;
	font-size: 28px;
	text-shadow: rgb(0, 50, 100) 0 0 6px;


}
 
#wrapper {
    position: relative;
    margin: 0 auto;
    height: auto !important;
    height: 100%;
    /*min-height: 100%;  -  Нужно для прижатия футера к низу*/
    padding: 5px 0;
}
 
.section {
    width: 100%;
    padding: 0 0 0 0px;
    position: relative;
}
 
.section:after {
    content: '';
    clear: both;
    display: table;
}
 
.mainwrap {
    width: 100%;
    float: left;
    overflow: hidden;
}
 
main {
    padding: 0 0 0 0px;
	min-width: 320px;
    max-width: 1260px;
    min-height: 50px;
max-height: auto;
    margin: 0;
	color: #1E90FF;
}
 
article {
text-align: left;
font-size: 14px;
    padding: 0 10px;
    margin: 0 5px;
        min-height: 80px;
max-height: auto;
min-width: 320px;
max-width: 45%
background: #0A3C6D;
}
 
#left1 {
    float: left;
    width: 48%;
	color: #1E90FF;
    margin: 0;
    min-height: 180px;
text-align: center;
font-size: 16px;
padding: 10;
border-right: 3px solid green;




}
#right1 {
    float: right;
    width: 48%;
	color: #1E90FF;
    margin: 0;
    min-height: 180px;
text-align: center;
font-size: 16px;
padding: 10;
border-left: 3px solid green;




}

#left_h {
    float: left;
    width: 100px;
	color: #1E90FF;
    margin: 0;
    min-height: 100px;
text-align: center;
font-size: 16px;
padding: 0;

}
#right_h {
    float: right;
    width: auto;
	color: white;
    margin: 0;
    min-height: 100px;
text-align: right;
font-size: 25px;
text-shadow: green 0 0 6px;
padding: 10px;

}


#center {
    float: center;
    width: 98%;
	min-width: 306px;
    margin: 10;
    min-height: 180px;
text-align: center;
font-size: 16px;
padding: 20 px 20 px 20 px 20 px;
border-top: 3px solid #1E90FF;


}

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

}
 
footer {
    margin: 0;
    width: 100%;
    min-width: 320px;
    height: auto;
    background: #AFBFC6;
    position: relative;
}


   a{
	color: #0A3C6D; /* цвет ссылки синий */
	text-decoration: none; /* убираем подчеркивание */
   } 
   a:hover  /* при наведение мышки на ссылку она будет подчеркиваться, т.к. стоит параметр underline */
   { 
   text-decoration: underline
background: #0A3C6D;
   } 
   a:visited /* класс для посещенных ссылок (изменяем их цвет на черный) */  
   {
   color: black;
   }


#nav, #nav li {
  margin-right: auto;
  margin-left: auto;
  padding: 5px;

font-size: 12px;
background:#060078;
background-image: linear-gradient(bottom, #0A3C6D 22%, #C8DEDE 81%);
background-image: -o-linear-gradient(bottom, #0A3C6D 22%, #C8DEDE 81%);
background-image: -moz-linear-gradient(bottom, #0A3C6D 22%, #C8DEDE 81%);
background-image: -webkit-linear-gradient(bottom, #0A3C6D 22%, #C8DEDE 81%);
background-image: -ms-linear-gradient(bottom, #0A3C6D 22%, #C8DEDE 81%);
 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.22, #0A3C6D),
    color-stop(0.81, #C8DEDE)
);

}

#nav li {
  display: inline-block;
  text-align: center; /* текст горизонтально по центру */

}
#nav a {
  display: block; /* ссылка растягивается на весь пункт li */
  padding: 2px;
  color: #fff; /* цвет текста */
  text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
}
#nav a:hover {
  background: #0A3C6D /* фон пунктов при наведении */
}


 
/* Для отображения на устройствах меньше 980px*/       
        @media screen and (min-width:240px) and (max-width:359px) {
             
                main {
                        padding:10px;
                    }
                     
                     #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: 95%;
						margin: 2;
						float: none;
						height: auto;
						text-align: center;
						font-size: 16px;
						padding: 5 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;
					}
					
					#right1 {
						width: 95%;
						margin: 2;
						float: none;
						height: auto;
						text-align: center;
						font-size: 16px;
						padding: 5 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;
					}
					
					header {
						max-width: 99%;
						height: 60px;
						vertical-align: middle;
						position: relative;
						background: #201C33;
						color: #F5F5F5;
						padding-left: 10px;
						padding-right: 10px;
						background-image: url('fon_h1.jpg');
						background-repeat: no-repeat;
						background-position: center top;
						text-align: right;
						font-size: 14px;
						text-shadow: rgb(0, 50, 100) 0 0 6px;


}
					
					
					
        }
         
        @media screen and (min-width:360px) and (max-width:699px) {
             
                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: 90%;
						margin: 2;
						float: none;
						height: auto;
						text-align: center;
						font-size: 16px;
						padding: 5 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;
					}
					#right1 {
						width: 90%;
						margin: 2;
						float: none;
						height: auto;
						text-align: center;
						font-size: 16px;
						padding: 5 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;
					}
					
					header {
						max-width: 99%;
						height: 60px;
						vertical-align: middle;
						position: relative;
						background: #201C33;
						color: #F5F5F5;
						padding-left: 10px;
						padding-right: 10px;
						background-image: url('fon_h1.jpg');
						background-repeat: no-repeat;
						background-position: center top;
						text-align: right;
						font-size: 18px;
						text-shadow: rgb(0, 50, 100) 0 0 6px;


}

        }
		
		@media screen and (min-width:700px) and (max-width:799px) {
             
                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: 90%;
						margin: 2;
						float: none;
						height: auto;
						text-align: center;
						font-size: 16px;
						padding: 5 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;

					}
					#right1 {
						width: 90%;
						margin: 2;
						float: none;
						height: auto;
						text-align: center;
						font-size: 16px;
						padding: 5 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;
        }
         
        @media screen and (min-width:800px) and (max-width:979px) {
         
                main {
                        padding:10px;
						width: 780px;
                    }
                     
                     #s_left {
                        padding: 0;
                        margin-left: 300px;
                        float: none;
                        clear: both;
                        left: 0;
                    }
                                
                    #s_right {
                        padding: 0;
                        margin: 0 auto;
                        float: none;
                        clear: both;
                        right: 0;
                    }
					
					#left1 {
						width: 45%;
						margin: 2;
						float: left;
						height: auto;
						text-align: center;
						font-size: 16px;
						padding: 20 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;
					
					}
					#right1 {
						width: 45%;
						margin: 2;
						float: right;
						height: auto;
						text-align: center;
						font-size: 16px;
						padding: 20 px;
						border: 2px solid #1E90FF;
						border-radius: 10px 10px 10px 10px;
					
        }