.colus{
    width: 50%;
    height:1000px;
    float: left;
    text-align: center;
    padding:1rem;
}
.coluss{
    width: 50%;
    height:1550px;
    float: left;
    text-align: center;
    padding:1rem;
}


.cols{
    width: 50%;
    height:850px;
    float: left;
    text-align: center;
    padding:1rem;
}

.colu{
    width: 50%;
    height:800px;
    float: left;
    text-align: center;
    padding:1rem;
}

.colum{
    width: 50%;
    height:700px;
    float: left;
    text-align: center;
    padding:1rem;
}

.colums{
    width: 50%;
    height:610px;
    float: left;
    text-align: center;
    padding:1rem;
}


.col{
    width: 50%;
    height:700px;
    float: left;
    text-align: center;
    padding:1rem;
}
.col1{ background: #2a2728;}
.col{ background: #000000;}
.col2{ background: #181818;}

footer{
    clear:both;
}

@media only screen and (max-width:768px){
    
    .col1, .col2{
        width:100%;
        
    }
    .col3{
        width:100%;
        
    }
}

@media only screen and (max-width:480px){
    .col1, .col2{
       float: none;
        width:100%;
    }
}
main{
  width:94.75%;
margin: 0 auto;
 overflow: hidden;
}