/* Imported styles explained */
@charset "utf-8";
@import url("/sta/css/style.css");			/* some custome styles here */
@import url("/sta/css/sections.css");		/* styles of HTML sections here */
@import url("/sta/css/topnav.css");			/* style of top nav */

@import url("/sta/css/ske.css");				/* from getskeleton.com/ */
@import url("/sta/css/ske_normalize.css");   /* skeleton helps with overall elements styles */

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@300&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); /* view all here https://www.w3schools.com/icons/fontawesome_icons_webapp.asp*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); /* view all here https://www.w3schools.com/icons/fontawesome_icons_webapp.asp*/








/*------------------------------------------------------------------------
sta.css is the main CSS that has the Grid layout 
-------------------------------------------------------------------------*/



/* LOAD SMALL-SIZE DEVICES FIRST */
  body {
    font-family: 'Sofia Sans Extra Condensed', sans-serif;
	color:#444444;
    background: #FEFEFE;
    margin: 0;
	grid-gap: 0;
	height: 100vh;
    grid-template-areas: 
      "header"
      "article"
      "leftnav"
      "ads"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 5fr; 
}






	
/* MID-SIZE DEVICES */
@media all and (min-width: 600px) {
  body { 
    display: grid;
    grid-template-areas: 
      "header header"
      "article article"
      "leftnav ads"
      "footer footer";
  	grid-template-columns: 2fr;
  	grid-template-rows: 4fr;
  }
  .ads_img{width: 300px;}
  #topnav{font-size: 1em;}
  #topnav2{font-size: 1em;/*padding-left: 130px;*/}
}






/* DESKTOP DEVICES HERE */
@media all and (min-width: 1024px) {
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "leftnav article ads"
    "footer footer footer";
  grid-template-columns: 300px 1fr 340px;
  grid-template-rows: 3fr;
  }  
	
  .gris{max-width: 500px;}
}

@media all and (min-width: 1250px) {
}