* {
box-sizing: border-box;
}

.grid-layout{
	text-align: center;
    margin-bottom: 50px !important;
}

.grid-layout .content p{
	margin: 5px auto;
}

.grid-layout .grid-item{
	padding: 20px 10px;
    box-sizing: border-box;
}

.box-icon-wrap h3{
	font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.icon{
	max-width: 50%;
    margin: auto;
}

.icon img{
	width: 100%;
}

.blue-bg{
	background-color: #0E377F;
}

.blue-bg a, .blue-bg h3{
	color: #ffffff !important;
}

.lightblue-bg{
	background-color: #96B7D8;
}

.lightblue-bg a, .lightblue-bg h3{
	color: #0000000 !important;

}

.grey-bg{
	background-color: #BBBBBB;
}

.grey-bg a, .grey-bg h3{
	color: #ffffff !important;
}

#homepage #mainContent{
	width: 100%;
}

.inner{
	width: 100%;
    max-width: 80%;
    
}

.box{
	width: 100% !important;
}

#content .nav ul li a, #content .nav ul, #content .nav ul li{
width: 100%;
}

/* ---------------------------------------------- /*
 * Grids
/* ---------------------------------------------- */

.grid-2{
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-gap: 50px 4%;
  -ms-grid-columns: 1fr 4% 1fr;
  grid-template-columns: 48% 48%;
  width: 100%;
}

.grid-3{
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-gap: 50px 4%;
  -ms-grid-columns:1fr 4% 1fr 4% 1fr;
  grid-template-columns: repeat(3,1fr);
  margin: auto;
  width: 100%;
}

.grid-4{
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-gap: 50px 2%;
 -ms-grid-columns: 1fr 2% 1fr 2% 1fr 2% 1fr;
  grid-template-columns: repeat(4, 1fr);
  margin: auto;
  width: 100%;
}

.grid-5{
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-gap: 50px 1%;
  -ms-grid-columns:1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr;
  grid-template-columns:repeat(5,1fr);
  margin: auto;
  width: 100%;
}

.grid-6{
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-gap: 50px 1%;
  -ms-grid-columns:1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr;
  grid-template-columns:repeat(6,1fr);
  margin: auto;
  width: 100%;
}

.grid-item {
  position: relative;
  height: auto;
  width: 100%;
}

.grid-item:nth-child(1) {
-ms-grid-column: 1;
}

.grid-item:nth-child(2) {
-ms-grid-column: 3;
}

.grid-item:nth-child(3) {
-ms-grid-column: 5;
}

.grid-item:nth-child(4) {
-ms-grid-column: 7;
}

.grid-item:nth-child(5) {
-ms-grid-column: 9;
}

.grid-item:nth-child(6) {
-ms-grid-column: 11;
}

.archive-nav .year-open{
	position: relative !important;
    top: 0 !important;
    left: 0 !important;
    border: 1px solid #d2d2d2;
    border-top: none;
    background: #FFF;
    box-sizing: border-box;
    z-index: 100;
    display: none;
}


@media only screen 
	and (max-width: 768px) 
 	and (min-width: 50px){ 
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .mobile-grid-2{
     -ms-grid-columns:100%;
     grid-template-columns: 100% !important;
     grid-gap:60px;
  }
  .mobile-grid-2{
  display: grid;
  grid-template-columns: repeat(2,1fr) !important;

  }
  .mobile-grid-3{
  display: grid;
  grid-template-columns: repeat(3,1fr) !important;
  grid-gap: 10px !important;
  }
  .mobile-grid-4{
  display: grid;
  grid-template-columns: repeat(4,1fr) !important;
  grid-gap: 5px !important;
  }
 }

 @media only screen 
 	and (min-width: 769px) and (max-width: 1023px) 
 { 
  .grid-4, .grid-5, .grid-6{
  -ms-grid-columns:1fr 4% 1fr 4% 1fr;
  grid-template-columns: repeat(3, 1fr)!important;
  }
 }