.grid {
    float:left;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color: #1E1E1E;
}


#cf {
  position:relative;
 
 
  
  
  
}


iframe {
    width: 75vw; 
    height: 42.19vw; /* 100/56.25 = 560/315 = 1.778 */
    background:white;  
}





#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}




/*BUTTONS*/

#button2 {
  background: #d11717;
  border: 2px solid #eee;
  height: 38px;
  width: 200px;
  margin: 10px 0 0 10px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 38px;
  color:white;
  text-decoration: none;
  alignment-adjust:central;

 /*Rounded Corners*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  
  /*Gradient*/
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  
  /*Shadow*/
  -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

transition: All .5s ease;

}


#button2:hover {
  background-color: #ff3434;
}




.banner {  
width: 100%

}

/* Float Pictures*/
.left  {
    float: Left;
    margin: 20 20 10px 10px;
	padding: 20px;
	width: 35%;
	height: auto;

} 
.right   {
  float: Right;
    margin: 20 20 10px 10px;
	padding: 20px;
	width: 25%;
	height: auto;

} 
/* Float Pictures*/


.TextButton {
    max-width: 500px;
    background: #C23C22; /*unknown*/
    background-image: -webkit-linear-gradient(top, #C23C22, #9e2c18);
    background-image: -moz-linear-gradient(top, #C23C22, #9e2c18);
    background-image: -ms-linear-gradient(top, #C23C22, #9e2c18);
    background-image: -o-linear-gradient(top, #C23C22, #9e2c18);
    background-image: linear-gradient(to bottom, #C23C22, #9e2c18);
    -webkit-border-radius: 4;
    -moz-border-radius: 4;
    border-radius: 4px;
    font-family: Oswald;
    color: #ffffff; /*unknown*/
    font-size: 23px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

/*Containers*/
/*Containers*/
/*Containers*/
/*Containers*/

.thumb {
	float:none;
	width: 60%
}

.container80 {
	alignment-adjust:central;
    width: 85%;
	max-width: 1080px;
    margin: auto;
}


.phase {
	width:20%;
	margin: auto
}

#first {
    width: 30%;
    float: left;
    height: auto;
    
}
#second {
    width: 70%;
    float: left;
    height: auto;
   
    
}


/*Containers*/
/*Containers*/
/*Containers*/
/*Containers*/


/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic Styles */
body {
    margin: 0;
	background-color: #fff; /*website bg color*/
}

nav {
	height: 40px;
	width: 100%;
	background: #9CF; /*nav bar button bg color*/
	/*font-size: 1.5vw;  /*nav bar text size*/
	font-family: 'PT Sans', Arial, sans-serif;/*nav bar text font*/
	font-weight: bold; /*nav bar text bold/italics*/
	/*position: relative  !important; stays on top of website*/
	position: fixed !important; /*stuck on top of screen but in back ground not fore ground*/
	/*position: absolute !important; vanuishes nav bar */
	/*position:static !important; stays on top of website*/
	/*position:inherit !important;stays on top of website*/
	/*position:!important;*/
	
	border-bottom: 2px solid #09F; /*nav bar botom most devider*/
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}
nav li {
/*	display: inline;*/
	float: left;
	
}
nav a {
	color: #fff; /*nav bar menu text color*/
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}
nav li a {
	border-right: 1px solid #09F; /*nav bar menu virtical sep color*/
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #C60; /*nav highlight color*/
}
nav a#pull {
	display: none;
}

.navdiv {
	position:relative;
	z-index:1000;}









/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #1d3515;
		border-right: 1px solid #1d3515;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
	
	
	

	
	
}

/*Styles for screen 5px and lower*/
@media only screen and (max-width : 600px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #c3f9b1;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
	
}

/*
@media only screen and (max-width : 4000px) {
}

@media only screen and (max-width : 3800px) {
}

@media only screen and (max-width : 3600px) {
}

@media only screen and (max-width : 3400px) {
}

@media only screen and (max-width : 3200px) {
}

@media only screen and (max-width : 3000px) {
}

@media only screen and (max-width : 2800px) {
}

@media only screen and (max-width : 2600px) {
}

@media only screen and (max-width : 2400px) {
}

@media only screen and (max-width : 2200px) {
}

@media only screen and (max-width : 2000px) {
}
*/
@media only screen and (max-width : 8000px) {
h1 {
    font-size: 1.8em;
	color: #888;
	line-height: 1.8em;
	margin-bottom: 20px;
}
h2 {
    font-size: 1.9em;
	color: #fff;
	line-height: 1.9em;
	margin-bottom: 20px;
}
p {
    font-size: 1.6em;
	color: #ffffff;
	line-height: 1.8em;
	margin-bottom: 20px;
}

p1 {
    font-size: 1.4em;
	color: #ffffff;
	line-height: 1.6em;
	margin-bottom: 10px;
}}

@media only screen and (max-width : 1600px) {
h1 {
    font-size: 1.8em;
	color: #888;
	line-height: 1.8em;
	margin-bottom: 20px;
}
h2 {
    font-size: 1.9em;
	color: #fff;
	line-height: 1.9em;
	margin-bottom: 20px;
}
p {
    font-size: 1.6em;
	color: #ffffff;
	line-height: 1.8em;
	margin-bottom: 20px;
}

p1 {
    font-size: 1.4em;
	color: #ffffff;
	line-height: 1.6em;
	margin-bottom: 10px;
}}

@media only screen and (max-width : 1400px) {
h1 {
    font-size: 1.8em;
	color: #888;
	line-height: 1.8em;
	margin-bottom: 20px;
}
h2 {
    font-size: 1.9em;
	color: #fff;
	line-height: 1.9em;
	margin-bottom: 20px;
}
p {
    font-size: 1.6em;
	color: #ffffff;
	line-height: 1.8em;
	margin-bottom: 20px;
}

p1 {
    font-size: 1.4em;
	color: #ffffff;
	line-height: 1.6em;
	margin-bottom: 10px;
}}

@media only screen and (max-width : 1200px) {
h1 {
    font-size: 1.8em;
	color: #888;
	line-height: 1.8em;
	margin-bottom: 20px;
}
h2 {
    font-size: 1.9em;
	color: #fff;
	line-height: 1.9em;
	margin-bottom: 20px;
}

p {
    font-size: 1.6em;
	color: #ffffff;
	line-height: 1.8em;
	margin-bottom: 20px;
}

p1 {
    font-size: 1.4em;
	color: #ffffff;
	line-height: 1.6em;
	margin-bottom: 10px;
}}


@media only screen and (max-width : 1000px) {
h1 {
    font-size: 1.8em;
	color: #888;
	line-height: 1.8em;
	margin-bottom: 20px;
}

h2 {
    font-size: 1.9em;
	color: #fff;
	line-height: 1.9em;
	margin-bottom: 20px;
}

p {
    font-size: 1.6em;
	color: #ffffff;
	line-height: 1.8em;
	margin-bottom: 20px;
}

p1 {
    font-size: 1.4em;
	color: #ffffff;
	line-height: 1.6em;
	margin-bottom: 10px;
}}

@media only screen and (max-width : 800px) {
h1 {
    font-size: 1.8em;
	color: #888;
	line-height: 1.8em;
	margin-bottom: 20px;
}

h2 {
    font-size: 1.9em;
	color: #fff;
	line-height: 1.9em;
	margin-bottom: 20px;
}
p {
    font-size: 1.6em;
	color: #ffffff;
	line-height: 1.8em;
	margin-bottom: 20px;
}

p1 {
    font-size: 1.4em;
	color: #ffffff;
	line-height: 1.6em;
	margin-bottom: 10px;
}}

@media only screen and (max-width : 720px) {
h1 {
    font-size: 1.6em;
	color: #888;
	line-height: 1.6em;
	margin-bottom: 20px;
}

h2 {
    font-size: 1.7em;
	color: #fff;
	line-height: 1.7em;
	margin-bottom: 20px;
}

p {
    font-size: 1.4em;
	color: #ffffff;
	line-height: 1.6em;
	margin-bottom: 20px;
}

p1 {
    font-size: 1em;
	color: #ffffff;
	line-height: 1em;
	margin-bottom: 10px;
}}

@media only screen and (max-width : 600px) {
h1 {
    font-size: 1.4em;
	color: #888;
	line-height: 1.4em;
	margin-bottom: 20px;
}

h2 {
    font-size: 1.5em;
	color: #fff;
	line-height: 1.5em;
	margin-bottom: 20px;
}
p {
    font-size: 1.2em;
	color: #ffffff;
	line-height: 1.4em;
	margin-bottom: 20px;
}

p1 {
    font-size: 1em;
	color: #ffffff;
	line-height: 1em;
	margin-bottom: 10px;
}}

@media only screen and (max-width : 480px) {
h1 {
    font-size: 1.2em;
	color: #888;
	line-height: 1.2em;
	margin-bottom: 20px;
}

h2 {
    font-size: 1.3em;
	color: #fff;
	line-height: 1.3em;
	margin-bottom: 20px;
}

p {
    font-size: 1em;
	color: #ffffff;
	line-height: 1.2em;
	margin-bottom: 20px;
}

p1 {
    font-size: .8em;
	color: #ffffff;
	line-height: .8em;
	margin-bottom: 10px;
}}

@media only screen and (max-width : 320px) {
h1 {
    font-size: 1em;
	color: #888;
	line-height: 1em;
	margin-bottom: 20px;
}

h2 {
    font-size: 1.1em;
	color: #fff;
	line-height: 1.1em;
	margin-bottom: 20px;
}


p {
    font-size: .8em;
	color: #ffffff;
	line-height: 1em;
	margin-bottom: 20px;

}

p1 {
    font-size: .7em;
	color: #ffffff;
	line-height: .7em;
	margin-bottom: 10px;
}}