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

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

/* THERE ARE MANY ROBOTO FONT WEIGHTS AND STYLES . TO ADD MORE VISIT: https://fonts.google.com/specimen/Roboto?sidebar.open=true&selection.family=Roboto  */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&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://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400&display=swap');
*/






/*------------------------------------------------------------------------
this is the main CSS that has the Grid layout 
-------------------------------------------------------------------------*/



/* LOAD SMALL-SIZE DEVICES FIRST */
  body {
    font-family: 'Roboto';
	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;}
  #sem_Content{margin-top:400px;}    
}






/* 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: 250px 2fr;  
  }  
  .gris{max-width: 500px;}
  #sem_Header{height:0;}	
}

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