main {
	font-size: 20px;
}

body{
	background: url(../img/system/systembg.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

section .inner {
	background-color: rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	padding: 25px;
	border: 4px solid #434f8b;
	border-radius: 5px;
	color: #fff;
}

h1{
	text-shadow: 1px 1px 1px rgb(0, 0, 0), 3px 3px 2px #434f8b;
	font-size: 1.7rem;
	text-transform: uppercase;
	letter-spacing: .09rem;
}

h2 {
	font-size: 1.25rem;
	letter-spacing: .08rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 8px;
	width: 100%;
	border-radius: .3rem;
	background-color: #434f8b;
	text-shadow: 3px 3px rgba(0,0,0, .5);
}

#system-nav{
	z-index: 10;
	position: fixed;
	left: -20px;
	top: 4%;
}

#system-nav ul{
	flex-flow: column;
	text-align: left;
	padding: 0;
}

#system-nav ul li button{
	width: 290px;
	text-align: left;
}

.inner-three { 
max-width: 1000px;
margin: auto;
display: grid; 
grid-template-columns: 1fr 1fr 1fr; 
grid-template-rows: 1fr; 
grid-column-gap: 0px;
grid-row-gap: 0px; 
}

.inner-three div{
  margin:10px;	
}

.inner-three div img{
	border-radius: 3px;
	border: 2px #fff solid;
}

.inner-three .first { grid-area: 1 / 1 / 2 / 2; } 
.inner-three .second { grid-area: 1 / 2 / 2 / 3; } 
.inner-three .third { grid-area: 1 / 3 / 2 / 4; } 

.inner-two-left { 
	max-width: 1000px;
	margin: auto;
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 1fr 1fr; 
	grid-column-gap: 0px;
	grid-row-gap: 0px; 
}

.inner-two-left .first { grid-area: 1 / 1 / 2 / 2; } 
.inner-two-left .second { grid-area: 2 / 1 / 3 / 2; } 
.inner-two-left .third { grid-area: 1 / 2 / 3 / 3;} 

.inner-two-left div{
	margin: auto;
}

.inner-two-left div img{
	width: 90%;
	margin: 2px;
	border-radius: 3px;
	border: 2px #fff solid;
}

.inner-two-right { 
	max-width: 1000px;
	margin: auto;
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 1fr 1fr; 
	grid-column-gap: 0px;
	grid-row-gap: 0px; 
}

.inner-two-right .first { grid-area: 1 / 1 / 3 / 2; } 
.inner-two-right .second { grid-area: 1 / 2 / 2 / 3; } 
.inner-two-right .third { grid-area: 2 / 2 / 3 / 3; } 

.inner-two-right div img{
	width: 80%;
	margin: 2px;
	border-radius: 3px;
	border: 2px #fff solid;
}

.inner-two-right div{
	margin: auto;
}

.inner-two { 
	max-width: 1000px;
	margin: auto;
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 1fr; 
	grid-column-gap: 0px;
	grid-row-gap: 0px; 
}

.inner-two	.first { grid-area: 1 / 1 / 2 / 2; text-align: right; } 
.inner-two	.second { grid-area: 1 / 2 / 2 / 3; text-align: left; } 

.inner-two div img{
	width: 80%;
	margin: 4px;
	border-radius: 3px;
	border: 2px #fff solid;
}

.blurb-left{
	text-align: left !important;
}

.blurb-right{
	text-align: right !important;
}


/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: hidden; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  }
  

  /* Modal Content/Box */
  .modal-content {
	margin: 10% auto; /* 15% from the top and centered */
	width: 80%; /* Could be more or less, depending on screen size */
	max-width: 950px;
  }
  
  /* The Close Button */
  .close {
	color: #aaa;
	float: right;
	font-size: 12px;
	font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
  }

  .ss:hover{
	-webkit-box-shadow: 0px 0px 19px 3px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 19px 3px rgba(255,255,255,1);
	box-shadow: 0px 0px 19px 3px rgba(255,255,255,1);
	cursor: pointer;
  }


  @media screen and (max-width: 769px) {

	main{
		font-size: 16px;
	}

	.inner-two-left { 
		grid-template-rows: none;
	}

	.inner-two-right { 
		grid-template-rows: none;
	}

	.inner-two-left .first  { grid-area: 2 / 1 / 3 / 2; margin:0; }
	.inner-two-left .second  { grid-area: 2 / 2 / 3 / 3; margin:0;} 
	.inner-two-left .third   { grid-area: 1 / 1 / 2 / 3; margin:0;}  

	
	.inner-two-right .first   { grid-area: 1 / 1 / 2 / 3; margin:0;}  
	.inner-two-right .second  { grid-area: 2 / 1 / 3 / 2; margin:0; }
	.inner-two-right .third  { grid-area: 2 / 2 / 3 / 3; margin:0;} 

}

.system-nav-close{
	transition-timing-function: ease-in-out;
	transition: 1.4s;
	-ms-transform: translate(-270px,0);
	-webkit-transform: translate(-270px,0); 
	transform: translate(-270px,0); 
	/*left: -270px !important;*/
}

.system-nav-open{
	transition-timing-function: ease-in-out;
	transition: 1.4s;
	-ms-transform: translate(14px,0);
	-webkit-transform: translate(14px,0); 
	transform: translate(14px,0); 
}

#system-tab{
	background-color: #434f8b;
	color: #fff;
}

#menu-open{
    position: fixed;
    width: 54px;
    top: 8%;
    left: 287px;
    cursor: pointer;
}

#menu-open img{
	height: 229px;
}