*{ 
    box-sizing: border-box;
}

header{

height: 50px;
width: 100%;
background-color: rgb(0, 0, 0);
clear: both;

}
footer{
height: 50px;
width: 100%;
clear: both;
}

nav{ 

   
    padding-bottom: 10px;
    padding-top: 15px;
    padding-left: 50px;
    text-align: center;

}
header img{
    height:100%;
    width:auto;
    float: left;
}
nav a{
   color:white;
   text-decoration: none;
   padding:10px;
}
nav .burger { display: none; }

main{
height:600px;
width: 50%;
background-color: rgba(0, 89, 255, 0);
float: left;
border-top: 1px solid rgb(135, 135, 135);
margin-top:5%;
margin-left:10%;

}
main>div{
    width: 40%;
    height: auto;
    background-color: rgba(0, 136, 255, 0);
    float: right;
    display: block;
   
}


main+section{
width:30%;
height:600px;
background-color: rgba(255, 166, 0, 0);
float:left;
}

main>section{  
    width: 60%;
    height:500px;
    background-color: rgba(218, 255, 10, 0);
    padding:5px;
    float:left;
   
  
}

 main>section>section{ 

    height: 50%;
    width: 100%;
    background-color: rgba(255, 0, 0, 0);
    float:right;


   
 } 
 main>section>article{

    height: 40%;
    width: 100%;
    background-color: rgba(184, 0, 169, 0);
    margin-top: 100%;
    float: right;
}
   
main+ section aside{ 
    height: 50%;
    width: 80%;
    background-color: rgba(255, 64, 195, 0);
    float:left;
    margin-left: 10%;
      

}
main+ section section{
    height: 50%;
    width: 80%;
    background-color: rgba(81, 239, 231, 0);
    float: left;
     margin-left: 10%;
     border-top:1px solid rgb(135, 135, 135);
} 

.NEW-IN-AUTOS{
    width:100%;
    height:600px;
    background-color: rgba(0, 204, 255, 0);
    float: left;

}
.btm1{
    width:50%;
    height:auto;
    float:left;

    background-color: rgba(251, 40, 255, 0);
}
.btm2{
    width:30%;
    height:auto;
    float: left;
    margin-top:6% ;
    margin-left:0;

    background-color: rgba(255, 166, 0, 0);
}

/* ^^^^^^^ ALL STRUCTURE ^^^^^^^^ */



/* CONTENT BELOW */

h3{
    padding-left: 10%;
    margin-bottom:-5%;
    margin-top:10%;
}
.pats{
    width:100%;
}
.pats img{
    width: 100%;
    height:auto;
}
h2{
    padding-bottom: 10px;
}
.btmLEFT{
    width:50%;
     float: left;
}
.btmLEFT img{
    width: 100%;
    height: auto;
    padding:1px;
   }
h5{
    color:rgb(181, 47, 47);
    margin: 0;
  padding: 0;
    
}
ul {
        list-style-type: none;
        
    }
ul li{
    padding-bottom:30px;
    border-bottom: 1px solid rgba(135, 135, 135, 0.456);
}
span{
    font-size: smaller;
    color: rgb(0, 0, 0);
}


    


aside>img{
    width:100%;
    height: auto;
    padding:10%;
}

.MOSTPOPULAR{
    border-top: 1px solid rgba(135, 135, 135, 0.456);
}
ol{
padding-left: 10px;

}
ol li{
    font-size:smaller;
    padding-top: 10px;
    padding-bottom: 10px;
    
    border-bottom:1px solid rgba(135, 135, 135, 0.548);
    
}
 ol li::marker {
        font-size: 1.2em; 
        font-weight: bold;
    }



    /* bottom redTruck div content */


h4{
    padding-left: 20%;
    font-size: 120%;
}
.NEW-IN-AUTOS img{
    width:80%;
    height:auto;
    margin-left:20%;
}
h4 a{ 
    font-size:80%;
}
.NEW-IN-AUTOS p{
    font-size: 30px;
    font-weight:bold;
   width:60%;
   margin-left:20%

}
footer img{
      width:10%;
      float: left;
  
}
footer{
    text-align: right;
}
/********!!!!!!RESPONSIVE!!!!!**************************** */
@media (max-width: 1024px){
    header,footer, .TOP-STORIES, .MOST-POPULAR, .NEW-IN-AUTOS,.btm2 {
        
    float:none;
    width:100%;
    margin-bottom:10px;
    margin-left:0;
    clear: both;
  }


  .NEW-IN-AUTOS{
    float: none;
    width: 100%;
    margin-bottom:10px;
    margin-left:0;
    
  }

.NEW-IN-AUTOS img{
    float: none;
    width: 100%;
    margin-bottom:10px;
    margin-left:0;
    
  }

.btm1
{
      float:none;
    width: 100%;
     margin-bottom:10px;
    margin-left:0;
}
.btm2
{
      float:none;
    width: 100%;
     margin-bottom:50px;
    margin-left:0;
}
.btm ul
{
    
    float: none;
    width: 100%;
    margin-bottom:10px;
  padding:0;
    
  }
aside{
    display: none;
}
nav a{
    display:none;
}

nav .burger { display: block; }

footer{
   
   display: none;
  
    
}
}



@media (max-width: 768px){

header,footer, .TOP-STORIES, .MOST-POPULAR, .NEW-IN-AUTOS,.btm2 {
        
    float:none;
    width:100%;
    margin-bottom:10px;
    margin-left:0;
    clear: both;
  }


  .NEW-IN-AUTOS{
    float: none;
    width: 100%;
    margin-bottom:10px;
    margin-left:0;
    
  }

.NEW-IN-AUTOS img{
    float: none;
    width: 100%;
    margin-bottom:10px;
    margin-left:0;
    
  }

.btm1
{
      float:none;
    width: 100%;
     margin-bottom:10px;
    margin-left:0;
}
.btm2
{
      float:none;
    width: 100%;
     margin-bottom:50px;
    margin-left:0;
}
.btm ul
{
    
    float: none;
    width: 100%;
    margin-bottom:10px;
  padding:0;
    
  }
aside{
    display: none;
}
nav a{
    display:none;
}

nav .burger { display: block; }

footer{
   
   display: none;
  
    
}
}



@media (max-width: 600px){
    
    header,footer, .TOP-STORIES, .MOST-POPULAR, .NEW-IN-AUTOS,.btm2 {
        
    float:none;
    width:100%;
    margin-bottom:10px;
    margin-left:0;
    clear: both;
  }


  .NEW-IN-AUTOS{
    float: none;
    width: 100%;
    margin-bottom:10px;
    margin-left:0;
    
  }

.NEW-IN-AUTOS img{
    float: none;
    width: 100%;
    margin-bottom:10px;
    margin-left:0;
    
  }
.MOST-POPULAR{

float: none;
    width: 100%;
    margin-top:10px;
    margin-left:0;

}
.btm1
{
      float:none;
    width: 100%;
     margin-bottom:10px;
    margin-left:0;
}
.btm2
{
      float:none;
    width: 100%;
     margin-bottom:50px;
    margin-left:0;
}
.btm ul
{
    
    float: none;
    width: 100%;
    margin-bottom:10px;
  padding:0;
    
  }
aside{
    display: none;
}
nav a{
    display:none;
}

nav .burger { display: block; }

footer{
   
   display: none;
  
    
}
}