/**************** 2560px - 1200px **********************/

@media all and (max-width: 2560px) and (min-width: 1200px) {

#top-story { margin-top: 100px;}
.top-story-title {  font-size: 50px !important; }
.navbar  {	
  font-size: 14px;
  margin-top: 11px !important;
  -webkit-transition: all .5s;
  transition: all .5s;	
}	
.dropdown-side {display:none !important;
}
.container{margin: -80px 20px 20px 50px; width: 900px; }
li.sidebar{ margin-top: 125px !important;}
li.socialmedia-left{ margin-top: 125px !important;
}        
    
#box1 {width: 445px; height: 230px; float: left;}  
#box2 {width: 314px; height: 230px; float: left;}  
#box3 {width: 345px; height: 140px; float: left;}  
#box4 {width: 414px; height: 110px; float: left;}  
#box5 {width: 345px; height: 140px; clear: left;}  
#box6 {width: 413px; height: 170px; float: right; margin: -194px 50px 10px 0px !important; }  
#box7 {width: 280px; height: 236px; float: left;}
#box8 {width: 478px; height: 236px; float: left;}

.text-left {width: 200px;}
.text-right {width: 170px; float: left;}  


    
#news-box {width: 300px; height: 705px; float: left;}
#news-scroll {  overflow: scroll; height: 655px;}
#box9 {width: 453px; height: 236px; float: left;}

#video-box { grid-column: col-start 5 / span 8;  width:760px; height: 451px; margin: -485px 0px 10px -21px !important;}
.video { width: 760px; height: 245px;}
#video-thumbnail1 { width: 177px; float: left; margin-top: 7px; }
.video-thumbnail1 { width: 183px; height: 75px;}
#video-thumbnail2 { width: 177px; margin: 7px 0px 0px 15px; float: left; }
.video-thumbnail2 { width: 183px; height: 75px; }
#video-thumbnail3 { width: 177px; margin-top: 7px; float: left;  margin: 7px 0px 15px 15px; }
.video-thumbnail3 { width: 183px; height: 75px;}
#video-thumbnail4 { width: 177px; margin-top: 7px; float: left;  margin: 7px 0px 15px 15px; }
.video-thumbnail4 { width: 183px; height: 75px; }

#author-box{ width: 1085px;  height: auto; }
.author-headshot { width: 85px;}
.author-name {
  font-size: 11px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
}
.author-job-title {
  font-size: 9px;
  text-decoration: none;
  color: #818181;
  text-transform: none;
  font-weight: normal;
}
.author-article {
  font-size: 10px;
  width: 120px;
  font-weight: bold;
}
	
#magazine-box{ margin-top:  0px !important;  margin-left: 50px !important; width: 1085px; height: auto;}
.magazine-cover { width: 175px; padding: 10px; }	

    
    
    
#login {width: 400px !important;}  



}




/**************** 1199px - 1024px **********************/

@media all and (max-width: 1199px) and (min-width: 1024px) {

.container{ width: 700px; }    
.top-story-title {  font-size: 45px !important; }    
.wrapper{ width: 880px; margin: auto !important; height: auto !important;}	
.boxes {  margin-top: -100px !important; margin-left: -15px; grid-column: col-start 1 / span 8;  height: auto !important; }
.boxes-afterbreak { margin-top: 5px !important; margin-left: -15px; grid-column: col-start 1 / span 8;  height: auto !important; }
.ad-right { grid-column: col-start 9 / span 4;  grid-row: 1 !important; margin-left: 0px; margin-top: -100px !important; margin-bottom: 2px; }

#ad-right-afterbreak { position: -webkit-sticky; position: sticky; top: 75px; margin-bottom: -9px;}
.ad-right-afterbreak { grid-column: col-start 9 / span 4;  grid-row: 1 !important; margin-left: 0px; }

#box1 {width: 585px; height: 275px;}  
#box2 {width: 585px; height: auto; margin: 0px 0px 10px 0px;}  
#box3 {width: 585px; height: 140px; margin: 0px 0px 10px 0px;}  
#box4 {width: 585px; height: 120px; margin: 0px 0px 10px 0px;}  
#box5 {width: 585px; height: 140px; margin: 0px 0px 10px 0px;}  
#box6 {width: 585px; height: 140px; margin: 0px 0px 10px 0px; float: none;}
#box7 {width: 585px; height: 180px; margin: 0px 0px 10px 0px;}
#box8 {width: 585px; height: 275px; margin: 0px 0px 10px 0px;}

.text-left {width: 400px;}
.text-right {width: 400px; float: left;}  
    
.ad-break{margin-left: -45px !important;}
    
.headline-1 { color: black; font-weight: 650; font-size: 27px;}
.headline-2 { color: black; font-weight: 550; font-size: 25px;}
.headline-3 { color: black; font-weight: 450; font-size: 24px;}
.headline-4 { color: black; font-weight: 500; font-size: 22px;}
.headline-5 { color: black; font-weight: 650; font-size: 17px;}
.headline-6 { color: black; font-weight: 550; font-size: 20px;}
.headline-7 { color: black; font-weight: 550; font-size: 14px;}
.headline-8 { color: black; font-weight: 650; font-size: 12px;}

#news-box {width: 579px; height: 485px; float: left;}
#news-scroll {  overflow: scroll; height: 435px;}
#box9 {width: 585px; height: auto; float: left; margin: 0px 0px 0px 0px}

#video-box { grid-column: col-start 1 / span 12;  width:895px; height: 500px; margin: 0px 0px 10px -15px !important;}
.video { width: 895px; height: 284px;}
#video-thumbnail1 { width: 210px; float: left; margin-top: 7px; }
.video-thumbnail1 { width: 217px; height: 105px;}
#video-thumbnail2 { width: 211px; margin: 7px 0px 0px 15px; float: left; }
.video-thumbnail2 { width: 217px; height: 105px; }
#video-thumbnail3 { width: 211px; margin-top: 7px; float: left;  margin: 7px 0px 15px 15px; }
.video-thumbnail3 { width: 217px; height: 105px;}
#video-thumbnail4 { width: 211px; margin-top: 7px; float: left;  margin: 7px 0px 15px 15px; }
.video-thumbnail4 { width: 217px; height: 105px; }
   
 #author-box{ width: 895px;  height: auto; margin: 0px 0px 0px -15px !important;}
.author-headshot { width: 85px;}
.author-name {
  font-size: 11px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
}
.author-job-title {
  font-size: 9px;
  text-decoration: none;
  color: #818181;
  text-transform: none;
  font-weight: normal;
}
.author-article {
  font-size: 10px;
  width: 120px;
  font-weight: bold;
}
	
#magazine-box{ width: 895px;  height: auto; margin: 0px 0px 0px -15px !important;}
.magazine-cover { width: 175px; padding: 10px; }	   
    

    
#login {width: 400px !important;}  
    
}
    
    
    
    



/**************** 1023px - 768px **********************/

@media all and (max-width: 1023px) and (min-width: 771px) {

wrapper{   width: 780px; margin: auto !important; height: auto !important;}

.boxes{margin-top: -100px !important; margin-left: 0px; grid-column: col-start 3 / span 8; height: auto !important; }
.boxes-afterbreak {margin-top: 5px !important; margin-left: 0px; grid-column: col-start 3 / span 8; height: auto !important; }

  
#ad-right-mobile{ display: block !important; margin: -10px 0px -10px 0px !important;} 
.ad-right { grid-column: col-start 4 / span 6;  grid-row: 2 !important; margin: auto !important; margin-top: -10px !important;}
.ad-right-afterbreak{ grid-column: col-start 4 / span 6; grid-row: 2 !important; margin: auto !important;} 

    
#ad-break { margin: 0px !important;}
#mobile-ad-break{display: block !important; grid-column: col-start 4 / span 6;  margin: auto !important;}    

#advertise {  margin-top: -375px !important; margin-right: 390px !important; }
#suppliers {  margin-top: -270px !important;}
 
.image-title { font-size: 32px; text-decoration: none; color: white;  text-transform: none; }    
    
#box1 {width: 98%; height: 275px;}  
#box2 {width: 98%; height: auto; margin: 0px 0px 10px 0px;}  
#box3 {width: 98%; height: 140px; margin: 0px 0px 10px 0px;}  
#box4 {width: 98%; height: auto; margin: 0px 0px 10px 0px;}  
#box5 {width: 98%; height: 140px; margin: 0px 0px 10px 0px;}  
#box6 {width: 98%; height: 140px; margin: 0px 0px 10px 0px;}
#box7 {width: 98%; height: auto; margin: 0px 0px 10px 0px;}
#box8 {width: 98%; height: 275px; margin: 0px 0px 0px 0px;}
          
    
.headline-1 { color: black; font-weight: 650; font-size: 25px;}
.headline-2 { color: black; font-weight: 550; font-size: 23px;}
.headline-3 { color: black; font-weight: 450; font-size: 22px;}
.headline-4 { color: black; font-weight: 500; font-size: 20px;}
.headline-5 { color: black; font-weight: 650; font-size: 18px;}
.headline-6 { color: black; font-weight: 550; font-size: 16px;}
.headline-7 { color: black; font-weight: 550; font-size: 14px;}
.headline-8 { color: black; font-weight: 650; font-size: 12px;}
    
.text-left {width: 65%;}
.text-right {float: left; width: 65%;}     
    
#news-box {width: 97%; height: 485px;}
#news-scroll {  overflow: scroll; height: 435px;}
#box9 {width: 98%; height: auto; margin: 0px 0px 0px 0px}

#video-box { grid-column: col-start 3 / span 8;  width: 98%; height: auto; margin: -10px 0px 10px 0px !important;}
.video { width: 100% !important; height: 284px;}
#video-thumbnail1 { display: none; }
.video-thumbnail1 { display: none;}
#video-thumbnail2 { display: none; }
.video-thumbnail2 { display: none;}
#video-thumbnail3 { display: none; }
.video-thumbnail3 { display: none;}
#video-thumbnail4 { display: none; }
.video-thumbnail4 { display: none; }
         
 #author-box{ grid-column: col-start 3 / span 8;  width: 97%; height: auto; margin: auto !important;}
.author-headshot { width: 75px;}
.author-name {
  font-size: 11px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
}
.author-job-title {
  font-size: 9px;
  text-decoration: none;
  color: #818181;
  text-transform: none;
  font-weight: normal;
}
.author-article {
  font-size: 10px;
  width: 120px;
  font-weight: bold;
}
  
#ad-centered-1{grid-column: col-start 6 / span 1 !important;  grid-row: 2 !important; margin: auto !important; margin-bottom: -3px !important;}
#ad-centered-2{grid-column: col-start 7 / span 1 !important;  grid-row: 2 !important; margin: auto !important; margin-bottom: -3px !important;}	     
	
#magazine-box{ grid-column: col-start 3 / span 8; grid-row: 2 !important; width: 97%; height: auto; margin: auto !important;}
.magazine-cover { width: 105px; padding: 5px; }  
    
    
#login {width: 400px !important;}      

}




/**************** 767px - 480px **********************/

@media all and (max-width: 770px) and (min-width: 480px) {

 wrapper{   width: 450px; margin: auto !important; height: auto !important;}

.boxes{margin-top: -100px !important; margin-left: 0px; grid-column: col-start 3 / span 8; height: auto !important; }
.boxes-afterbreak {margin-top: 5px !important; margin-left: 0px; grid-column: col-start 3 / span 8; height: auto !important; }
   
#ad-right-mobile{ display: block !important; margin: 0px 0px -10px 0px !important;} 
.ad-right { grid-column: col-start 3 / span 8;  grid-row: 2 !important; margin: auto !important;}
.ad-right-afterbreak{ grid-row: 2 !important; grid-column: col-start 3 / span 8;  grid-row: 2 !important; margin: auto !important;} 

    
.banner-ad { display: none !important;  }
#ad-break { margin: 0px !important;}
#mobile-ad-break{display: block !important; grid-column: col-start 3 / span 8;  margin: auto !important;}    


 
.image-title { font-size: 29px; text-decoration: none; color: white;  text-transform: none; }    
    
#box1 {width: 98%; height: 275px;}  
#box2 {width: 98%; height: auto; margin: 0px 0px 10px 0px;}  
#box3 {width: 98%; height: 140px; margin: 0px 0px 10px 0px;}  
#box4 {width: 98%; height: auto; margin: 0px 0px 10px 0px;}  
#box5 {width: 98%; height: 140px; margin: 0px 0px 10px 0px;}  
#box6 {width: 98%; height: 140px; margin: 0px 0px 10px 0px;}
#box7 {width: 98%; height: auto; margin: 0px 0px 10px 0px;}
#box8 {width: 98%; height: 275px; margin: 0px 0px -5px 0px; }
          
    
.headline-1 { color: black; font-weight: 650; font-size: 23px;}
.headline-2 { color: black; font-weight: 550; font-size: 21px;}
.headline-3 { color: black; font-weight: 450; font-size: 16px;}
.headline-4 { color: black; font-weight: 500; font-size: 19px;}
.headline-5 { color: black; font-weight: 650; font-size: 18px;}
.headline-6 { color: black; font-weight: 550; font-size: 16px;}
.headline-7 { color: black; font-weight: 550; font-size: 14px;}
.headline-8 { color: black; font-weight: 650; font-size: 12px;}    
    
.text-left { float: left; width: 51%;}
.text-right {float: left; width: 51%;}     
    
#news-box {width: 97%; height: 485px;}
#news-scroll {  overflow: scroll; height: 435px;}
#box9 {width: 98%; height: auto; margin: 0px 0px 0px 0px}

#video-box { grid-column: col-start 3 / span 8;  width: 98%; height: auto; margin: -9px 0px 10px 0px !important;}
.video { width: 100% !important; height: 284px;}
#video-thumbnail1 { display: none; }
.video-thumbnail1 { display: none;}
#video-thumbnail2 { display: none; }
.video-thumbnail2 { display: none;}
#video-thumbnail3 { display: none; }
.video-thumbnail3 { display: none;}
#video-thumbnail4 { display: none; }
.video-thumbnail4 { display: none; }
         
 #author-box{ grid-column: col-start 3 / span 8 !important; width: 97%; height: auto; margin: auto !important;}
.author-headshot { width: 75px;}
.author-name {
  font-size: 11px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
}
.author-job-title {
  font-size: 9px;
  text-decoration: none;
  color: #818181;
  text-transform: none;
  font-weight: normal;
}
.author-article {
  font-size: 10px;
  width: 120px;
  font-weight: bold;
}
    
#ad-centered-1{grid-column: col-start 3 / span 8 !important;  grid-row: 2 !important; margin: auto !important;}
#ad-centered-2{grid-column: col-start 3 / span 8 !important;  grid-row: 3 !important; margin: auto !important;}	    
	
#magazine-box{ grid-column: col-start 3 / span 8; grid-row: 2 !important; width: 97%; height: auto; margin: auto !important;}
.magazine-cover { width: 105px; padding: 5px; }  
    
#login {width: 400px !important;}      
    

}




/**************** 480px - 320px **********************/

@media all and (max-width: 479px) and (min-width: 320px) {
    
#top-story { padding-top: 150px; padding-bottom: 150px; height: 40px !important; }    

wrapper{ width: 300px; margin: auto !important; height: auto !important;}

.boxes{ margin-top: -70px !important; margin-left: 0px !important; grid-column: col-start 2 / span 10; height: auto !important; }
.boxes-afterbreak {margin: 0px !important; margin-left: 0px; grid-column: col-start 2 / span 10; height: auto !important; }
 
.top-story-title {font-size: 32px; }    
    
.image-title { font-size: 27px; text-decoration: none; color: white;  text-transform: none; }    

.headline-3 { color: black; font-weight: 450; font-size: 13px;}
.headline-6 { color: black; font-weight: 550; font-size: 14px;}    
  
.text-left { float: left; width: 40%;}
.text-right {float: left; width: 40%;}     
    
#box1 {min-width: 290px; height: 275px; margin: auto !important; margin-bottom: 10px !important;}  
#box2 {min-width: 290px; height: auto; margin: auto !important; margin-bottom: 10px !important;}  
#box3 {min-width: 290px; height: 140px; margin: auto !important; margin-bottom: 10px !important;}  
#box4 {min-width: 290px; height: auto; margin: auto !important; margin-bottom: 10px !important;}  
#box5 {min-width: 290px; height: 140px; margin: auto !important; margin-bottom: 10px !important;}  
#box6 {min-width: 290px; height: 140px; margin: auto !important; margin-bottom: 10px !important;}
#box7 {min-width: 290px; height: auto; margin: auto !important; margin-bottom: 10px !important;}
#box8 {min-width: 290px; height: 275px; margin: auto !important; margin-bottom: 0px !important;}

  
#ad-right-mobile{ display: block !important; margin: -10px 0px -10px 0px !important;}           

#ad-break { margin: 0px !important;}
#mobile-ad-break{display: block !important; grid-column: col-start 2 / span 10;  margin: auto !important;}    
     
#news-box {min-width: 285px; height: 485px; margin: auto !important; margin-bottom: 10px !important; margin-top: 5px !important;}
#news-scroll {  overflow: scroll; height: 435px;}

#box9 {min-width: 290px; height: auto; margin: auto !important;}

.ad-right { grid-column: col-start 2 / span 10;  grid-row: 2 !important; margin: auto !important; margin-top: -10px !important;}
.ad-right-afterbreak{ grid-row: 2 !important; grid-column: col-start 2 / span 10;  margin: auto !important;} 
    
#video-box { grid-column: col-start 2 / span 10;  min-width: 290px; height: auto;  margin-top: -10px !important;}
.video { width: 100% !important; height: 284px;}
#video-thumbnail1 { display: none; }
.video-thumbnail1 { display: none;}
#video-thumbnail2 { display: none; }
.video-thumbnail2 { display: none;}
#video-thumbnail3 { display: none; }
.video-thumbnail3 { display: none;}
#video-thumbnail4 { display: none; }
.video-thumbnail4 { display: none; }
         
 #author-box{ grid-column: col-start 2 / span 10; grid-row: 2 !important; min-width: 285px; height: auto; margin: auto !important;}
.author-headshot { display: none;}
.author-name {
  font-size: 11px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
}
.author-job-title {
  font-size: 9px;
  text-decoration: none;
  color: #818181;
  text-transform: none;
  font-weight: normal;
}
.author-article {
  font-size: 10px;
  width: 120px;
  font-weight: bold;
}
    
#ad-centered-1{grid-column: col-start 2 / span 10;  grid-row: 2 !important; width: 285px; margin: auto !important;}
#ad-centered-2{grid-column: col-start 2 / span 10;  grid-row: 3 !important; width: 285px; margin: auto !important;}	    
	
#magazine-box{ grid-column: col-start 2 / span 10; grid-row: 2 !important; min-width: 285px; height: auto; margin: auto !important;}
.magazine-cover {display: none; }  
    
    
    
#login {max-height: 500px !important; overflow: scroll;}       
   
}

@media all and (max-width: 321px) and (min-width: 280px) {
    
#top-story { padding-top: 150px; padding-bottom: 150px; height: 40px !important; width: 106% !important;}    
wrapper{ width: 280px; margin: auto !important; height: auto !important;}
.boxes{ margin-top: -70px !important; margin-left: -10px !important; grid-column: col-start 2 / span 10; height: auto !important; }
.boxes-afterbreak { margin-left: -10px; grid-column: col-start 2 / span 10; height: auto !important; }
 
.top-story-title {font-size: 32px; }    
    
.image-title { font-size: 25px; text-decoration: none; color: white;  text-transform: none; }    

.headline-3 { color: black; font-weight: 450; font-size: 13px;}
.headline-6 { color: black; font-weight: 550; font-size: 13px;}    
  
.text-left { float: left; width: 40%;}
.text-right {float: left; width: 40%;}     
    
#box1 {width: 270px; height: auto; margin: auto !important; margin-bottom: 10px !important;}  
#box2 {width: 270px; height: auto; margin: auto !important; margin-bottom: 10px !important;}  
#box3 {width: 270px; height: 140px; margin: auto !important; margin-bottom: 10px !important;}  
#box4 {width: 270px; height: auto; margin: auto !important; margin-bottom: 10px !important;}  
#box5 {width: 270px; height: 140px; margin: auto !important; margin-bottom: 10px !important;}  
#box6 {width: 270px; height: 140px; margin: auto !important; margin-bottom: 10px !important;}
#box7 {width: 270px; height: auto; margin: auto !important; margin-bottom: 10px !important;}
#box8 {width: 270px; height: 275px; margin: auto !important; margin-bottom: 0px !important;}

  
#ad-right-mobile{ display: block !important; margin: auto !important; margin: -10px 0px -10px -17px !important;}           

#ad-break { margin: 0px 0px 0px -10px !important;}
#mobile-ad-break{display: block !important; grid-column: col-start 2 / span 10;  margin: auto !important;}    
     
#news-box {width: 270px; height: 485px; margin-left: -10px !important; margin-bottom: 10px !important; margin-top: 5px !important;}
#news-scroll {  overflow: scroll; height: 435px;}

#box9 {width: 270px; height: auto; margin-left: -10px !important;}

.ad-right { grid-column: col-start 2 / span 10;  grid-row: 2 !important; margin: auto !important; margin-top: -10px !important}
.ad-right-afterbreak{ grid-row: 2 !important; grid-column: col-start 2 / span 10;  margin-left: -17px !important;} 
    
#video-box { grid-column: col-start 2 / span 10;  width: 270px; height: auto; margin-left: -10px !important;  margin-top: -10px !important;}
.video { width: 100% !important; height: 284px;}
#video-thumbnail1 { display: none;}
.video-thumbnail1 { display: none;}
#video-thumbnail2 { display: none;}
.video-thumbnail2 { display: none;}
#video-thumbnail3 { display: none;}
.video-thumbnail3 { display: none;}
#video-thumbnail4 { display: none;}
.video-thumbnail4 { display: none;}
         
 #author-box{ grid-column: col-start 2 / span 10; grid-row: 2 !important; text-align: center; width: 265px; margin-left: -10px !important; height: auto; }
.author-headshot { display: none;}
.author-name {
  font-size: 11px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
}
.author-job-title {
  font-size: 9px;
  text-decoration: none;
  color: #818181;
  text-transform: none;
  font-weight: normal;
}
.author-article {
  font-size: 10px;
  width: 120px;
  font-weight: bold;
}
    
#ad-centered-1{grid-column: col-start 2 / span 10;  grid-row: 2 !important; width: 280px; margin-left: -17px !important; }
#ad-centered-2{grid-column: col-start 2 / span 10;  grid-row: 3 !important; width: 280px; margin-left: -17px !important; }	    
	
#magazine-box{ grid-column: col-start 2 / span 10; grid-row: 2 !important; width: 265px; margin-left: -10px !important; height: auto; }
.magazine-cover {display: none; }  

    
#footer {  width: 106%;}

    
#login {max-height: 500px !important; overflow: scroll;}      
    
}