*
{
        box-sizing: border-box;
}


body{
        background: #000000;
        
}
header 
{
        color: white;
        width: auto;
        height: 65px;
        background: #2D2D2D;
        display: flex;
        position: relative;
        
}
header .logo
{
        color: #FFFF00;
        width: 90px;
        height: auto;
        font-size: 50px;
        padding: 5px;
        margin: 0 10px;
        
        
}

header nav ul li
{
        list-style: none;
        display: inline;
        margin: 10px;
        padding: 25px 5;
        
}

header nav ul li:hover
{
       
        border-bottom: solid #FFFFFF 2px;
        color: #E9FF00;
        
}

header nav ul
{
        margin: 10px;
        position: absolute;
        top: 10px;
        left: 250px;
}
header input
{
     display: inline;
     position: absolute;
     top: 40%;
     left: 1307px;
    
        
}
.continer
{
     
     width: 1067px;
     height: 400px;
     margin: 5px auto;
    
    
}
.img1, .img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9, .img10
{
     display: block;
     position: absolute;
     width: 100%;
     height: 100%;
}
.img1
{
     animation: img1 20s infinite;
}
.img2
{
     animation: img2 20s infinite;
}
.img3
{
     animation: img3 20s infinite;
}
.img4
{
     animation: img4 20s infinite;
}

.img5
{
     animation: img5 20s infinite;
}
.img6
{
     animation: img6 20s infinite;
}
.img7
{
     animation: img7 20s infinite;
}
.img8
{
     animation: img8 20s infinite;
}
.img9
{
     animation: img9 20s infinite;
}
.img10
{
     animation: img10 20s infinite;
}


@keyframes img1
{
     0%{opacity: 1;}
     10%{opacity: 0;}
     20%{opacity: 0;}
     30%{opacity: 0;}
     40%{opacity: 0;}
     50%{opacity: 0;}
     60%{opacity: 0;}
     70%{opacity: 0;}
     80%{opacity: 0;}
     90%{opacity: 0;}
     100%{opacity: 1;}
     
}
@keyframes img2
{
     0%{opacity: 0;}
     10%{opacity: 1;}
     20%{opacity: 0;}
     30%{opacity: 0;}
     40%{opacity: 0;}
     50%{opacity: 0;}
     60%{opacity: 0;}
     70%{opacity: 0;}
     80%{opacity: 0;}
     90%{opacity: 0;}
     100%{opacity: 0;}
     
}
@keyframes img3
{
     0%{opacity: 0;}
     10%{opacity: 0;}
     20%{opacity: 1;}
     30%{opacity: 0;}
     40%{opacity: 0;}
     50%{opacity: 0;}
     60%{opacity: 0;}
     70%{opacity: 0;}
     80%{opacity: 0;}
     90%{opacity: 0;}
     100%{opacity: 0;}
     
}
@keyframes img4
{
     0%{opacity: 0;}
     10%{opacity: 0;}
     20%{opacity: 0;}
     30%{opacity: 1;}
     40%{opacity: 0;}
     50%{opacity: 0;}
     60%{opacity: 0;}
     70%{opacity: 0;}
     80%{opacity: 0;}
     90%{opacity: 0;}
     100%{opacity: 0;}     
     
}
@keyframes img5
{
     0%{opacity: 0;}
     10%{opacity: 0;}
     20%{opacity: 0;}
     30%{opacity: 0;}
     40%{opacity: 1;}
     50%{opacity: 0;}
     60%{opacity: 0;}
     70%{opacity: 0;}
     80%{opacity: 0;}
     90%{opacity: 0;}
     100%{opacity: 0;}     
}
@keyframes img6
{
     0%{opacity: 0;}
     10%{opacity: 0;}
     20%{opacity: 0;}
     30%{opacity: 0;}
     40%{opacity: 0;}
     50%{opacity: 1;}
     60%{opacity: 0;}
     70%{opacity: 0;}
     80%{opacity: 0;}
     90%{opacity: 0;}
     100%{opacity: 0;}     
}
@keyframes img7
{
     0%{opacity: 0;}
     10%{opacity: 0;}
     20%{opacity: 0;}
     30%{opacity: 0;}
     40%{opacity: 0;}
     50%{opacity: 0;}
     60%{opacity: 1;}
     70%{opacity: 0;}
     80%{opacity: 0;}
     90%{opacity: 0;}
     100%{opacity: 0;}     
}
@keyframes img8
{
     0%{opacity: 0;}
     10%{opacity: 0;}
     20%{opacity: 0;}
     30%{opacity: 0;}
     40%{opacity: 0;}
     50%{opacity: 0;}
     60%{opacity: 0;}
     70%{opacity: 1;}
     80%{opacity: 0;}
     90%{opacity: 0;}
     100%{opacity: 0;}     
}
@keyframes img9
{
     0%{opacity: 0;}
     10%{opacity: 0;}
     20%{opacity: 0;}
     30%{opacity: 0;}
     40%{opacity: 0;}
     50%{opacity: 0;}
     60%{opacity: 0;}
     70%{opacity: 0;}
     80%{opacity: 1;}
     90%{opacity: 0;}
     100%{opacity: 0;}     
}
@keyframes img10
{
     0%{opacity: 0;}
     10%{opacity: 0;}
     20%{opacity: 0;}
     30%{opacity: 0;}
     40%{opacity: 0;}
     50%{opacity: 0;}
     60%{opacity: 0;}
     70%{opacity: 0;}
     80%{opacity: 0;}
     90%{opacity: 1;}
     100%{opacity: 0;}     
}

.mine
{
width: 50%;
height: auto;
border: solid white 2px;
margin: 10px 5px;
float: left;
background: #444444;
position: relative;
left: 224px;


}
.clear{clear: both;}

aside
{
 width: 18%;
 height: auto;
 border: solid #FFFFFF 2px;
 margin: 10px 5px;
 float: right;
 position: relative;
 right: 219px;
 
 
 
}
.clear{clear: both;}

.porster
{
    margin: 5px;
    padding: 10px;
    width: 22%;
   display: inline-block;
}

.porster h3
{
    
    color: white;
    font-family: cursive;
  display: inline-block;
}
    
.porster img:hover
{
border: solid red 2px;

}
.sections
{
color: #FFF600;
font-style: italic;

}
.sections h3
{
color: #FFFFFF;
text-align: center;
background: #878787;
margin: 5px;
padding: 5px;

}
aside input
{
     margin: 5px 0px 5px 3px;
     
}
.sections ul li
{
     list-style: circle;
     padding: 5px;
     
     
}
.sections ul li:hover
{
     color: #FFFFFF;
}
footer
{
     width: auto;
     height: auto;
     background:#777777;
}
footer div
{
     font-size: 30px;
     color: white;
     font-style: italic;
     text-align: center;
     margin: 10px;
}
.a_z
{
     width: 1067px;
     height: auto;
     background: #000000;
     color: white;
     position: relative;
     left: 219px;
}
.a_z ul li
{
     list-style: none;
     display: inline;
     padding: 5px 10px;
     font-size: 20px;
     
}
.a_z ul li:hover
{
     color: red;
}
.login
{
     font-size: 30px;
     position: relative;
     left: 1200px;
     top: 10px;
}
.login:hover
{
     color: red;
}