.main-head {
	grid-area:header;
}
.top-search{
	grid-area:search;
}
.content {
	grid-area:content;
}
.main-nav {
	grid-area:nav;
}
.sub-nav{
	grid-area:subnav;
}
.ads{
	grid-area:ad;
}
.main-footer {
	grid-area:footer;
}
.wrapper {
 	position:relative;
	height:98%;
	min-height:98%;
	margin:4px;
	display:flex;
	flex-direction:column;
	display:grid;
  grid-gap:10px;
  grid-template-areas: 
    "header"
	"search"
    "nav"
	"subnav"
    "content"
	"ad"
    "footer";
}
@media (min-width:500px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
      "header search"
      "nav nav"
	  "subnav subnav"
      "content content"
	  "ad ad"
      "footer footer";
  }
   h1{font-size:32px!important}
   h2{font-size:24px!important}
   h3{font-size:20px!important}
   input#search{margin:8px!important;width:250px!important}
   ul{width:500px!important}
   ul >li a {
		padding:16px!important;
		margin:2px!important;
		width:70px!important;
	}
	nav ul {
		display:flex;
		justify-content:space-between;
	}
}
@media (min-width:1024px) {
  .wrapper {
	grid-template-columns: 1 4fr 1fr;
	grid-template-areas: 
	  "header nav search"
	  "subnav subnav subnav"
	  "content content content"
	  "ad ad ad"
	  "footer footer footer"
	}
	h1{font-size:38px!important}
	h2{font-size:28px!important}
	h3{font-size:22px!important}
	input#search{margin:12px!important;;width:320px!important}
	ul{width:500px!important}
    ul >li a {
		padding:18px!important;
		margin:4px!important;
		width:80px!important;
	}
}
*{
	font:16px arial,sans-serif;
	margin:0;
	padding:0;
}
p{
	padding:4px;
}
body{
	height:99%;
	width:99%;
	margin:2px;
	padding:0;
	background-color:#101419;
	color:#fdfffc;
}
.content{height:100%;padding:4px 4px 50px 4px}
.main-footer{position:absolute;bottom:0;left:0;margin:20px 10px;color:#235789}
a{color:#c1292e}
input#search{margin:2px;padding:10px;width:260px}
.content >p >img{
	position:relative;
	padding: 10px 10px 20px 10px;
	border: 1px solid #101419;
	background-color: white;
	box-shadow: 4px 4px 5px #235789;
	-ms-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);
	margin-left:20px;
}

h1, h1 a{ font-size:28px; text-shadow:0, 0 1px #fdfffc, 1px 0 #fdfffc, 0; margin:10px}
h2{ font-size:20px;}
h3{ font-size:18px; text-shadow: 0 0 3px #c1292E, 0 0 5px #c1292E}
h1> a{text-decoration:none;color:#c1292e}
ul {
  list-style-type:none;
  margin:0;
  padding:0;
  width:300px;
}
ol {
  list-style-type:none;
  margin:0;
  padding:0;
  width:160px;
  background-color:#fdfffc;
}
.sub-title, .left-box >h3{
	display:none;
}
.left-box >ul{
	width:auto!important;
}
.left-box >ul >li >a{
	padding:8px!important;
	margin:2px!important;
	width:auto!important;
}
ul >li >a {
  float:left;
  color:#101419;
  text-align:center;
  padding:16px 18px;
  margin:6px 12px;
  text-decoration: none;
  color:#000;
  background-color:#fdfffc;
  border-radius:2px;
  width:90px;
}
ol >li >a {
  display:block;
  color: #101419;
  padding: 8px 16px;
  border-bottom:solid 1px #fdfffc;
  text-decoration:none;
}
li a:hover {
  background-color: #235789;
  color: fdfffc;
}