*{
 padding:0px;
 margin:0px;
 font-family: 'Roboto', sans-serif;
}

body{
 background-color: #0e0e0e; 
 background-image: url(../img/cols.jpg);
}
.header{
  background-image: url(../img/header_bg.jpg);  
  background-position:center bottom;
  height:200px;
}
.main_menu{
  background-image: url(../img/lbg.png);
  background-repeat: no-repeat;
  background-position:center center;
  height:160px;
  width:1000px;
  margin:00px auto;
  display:flex;
  flex-direction:row;
  justify-content: space-around;
}
.main_logo{
  width:300px;
}
.main_a{
  margin-top:87px;
}
.main_a a{
  color:#ddd;
  text-decoration:none;
}
.main_a a:hover{
  color:#eee;
  text-decoration:inderline;
}
.mobile_menu{
 display:none;

}

.page_div{
  border:0px solid red;
  width: 1000px;
  margin:10px auto;
  display: flex;
  flex-direction:row;
}
.page_menu{
  width: 280px;
  padding-left:10px;
}
.page_menu>H2{
 color:#999;
 padding-left:20px;
 
}
.page_menu>.items{
    margin: 10px 0px 10px 0px;
    font-size: 20px;
    background-image: url(../img/btn_off.png);
    width: 206px;
    height: 26px;
    padding-left: 35px;
    padding-top: 10px;
    transition: 3s;
}
.page_menu>.items:hover{
    background-image: url(../img/btn_off_hover.png);
    transition: 0.2s;
}

.page_menu>.items>a{
    color:#aaa;
    font-size:14px;
    text-decoration:none;
}
.page_menu>.items>a:hover{
    color:#eee;
}

.page_page{
  padding:10px 30px;
  width:100%;
  color:#eee;
  line-height:2em;

}
.page_page>a{
  color:red;
  text-decoration:none; 

}


.footer{
 height:55px;
 width:1000px;
 text-align:center;
 margin:20px auto;
 color:#777;
 padding-top:20px;
 background: url(../img/footer.png) no-repeat center top;
 font-style: normal;
 font-size:14px;
}




@media (max-width: 768px) {
.main_menu{
  width:100%;
  height:auto;
}
.header{
  height:auto;
}

.main_a{
  display:none;
}
.main_logo{
  width:100%;
  text-align:center;
}
.mobile_menu{
 display:none;

}

.menu_btn{
  position: absolute;
  top:10px;
  right:10px;
  width:50px;
  
  
} 
             
.page_div{
  width: 100%;
  margin:10px auto;
  display: flex;
  flex-direction:column;
  padding:0px;
}
.page_page{
  width: 90%;
  padding:10px 15px;
}


.page_menu{
  display:none;
}



               


.header__nav {          
    top: 55px;
    left: 0;
   /* background: rgb(245, 246, 246);
   */
    box-shadow: #ccc;
    width: 100%;
    box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
    transition: all 1s ease;
	  top:0;
   /* background-color: #0e0e0e;
    background-image: url(../img/cols.jpg);
    */
}                         
.header__menu {
	display: block;
  padding:40px 35px 0px;
}
.header__nav.open-menu{
    top:0;
   display: block;
   height:auto;
   transition: all 0.50s ease;
}

.header__menu li {
  	margin: 10px 0px 10px 33px;
    font-size: 20px;
    list-style-type: none;
    background-image: url(../img/btn_off.png);
    width:200px;
    height:30px;
    padding-left:40px;
    padding-top:6px;
	} 
  
.header__menu li:first-child {
    background-image: url(../img/btn_on.png);
	} 
       
.header__menu li a{
  color:#ddd;
  text-decoration:none;
}
.header__menu li a:hover{
  color:#eee;
  text-decoration:underline;
}   
       
       
                        
.menu-burger__header {
	  position: relative;
    width: 40px;
    height: 35px;
    display: block;
    margin-right: 10px;
    z-index:100;
   }
.menu-burger__header span, .menu-burger__header:after, .menu-burger__header:before{
	height: 3px;
	width: 40px;
	position: absolute;
	background: #eee;
	margin: 0 auto;
}
.menu-burger__header span{
	top: 16px;
  transition: 3s;
}
.menu-burger__header:after, .menu-burger__header:before{
	content: '';
  
}
.menu-burger__header:after{
	bottom: 5px;
   transition: 1.5s;
}
.menu-burger__header:before{
	top: 5px;
   transition: 1.5s;
}
.menu-burger__header.open-menu span {
	opacity:0; 
    transition: 0.5s; 
}
.menu-burger__header.open-menu:before {
	transform: rotate(38deg);
    top: 16px;
    transition: 1s;
}
.menu-burger__header.open-menu:after {
	transform: rotate(-38deg);
    bottom: 16px;
    transition: 1s;
}

.footer{
 height:25px;
 width:100%;
 text-align:center;
 margin:20px auto;
 color:#777;
 padding-top:20px;
 background: url(../img/footer.png) no-repeat center top;
 font-style: normal;
 font-size:14px;
  background-size: 100% 55px;
}


}