body {
	background-color:#ffffff;
	padding:0;
	margin:0;
	}

#wrap {
	width:100%; 
	margin-right:auto; 
	margin-left:auto;
	padding-top:0; 
	}

	a:link {
   color: #cc00ff;
   text-decoration:none;
}

a:visited {
   color: #cc00ff;
   text-decoration:none;
}
a:hover {
   color: #bd10e0;
   text-decoration:none;
}
#banner {    
    width: 100%;
	display:flex;
	max-height:50%;
    /*margin-left: auto;      
    margin-right: auto;
	padding-top:3%;
	padding-bottom:3%;
	text-align:center;
	background-image:url(../images/header2.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;*/

}

#box { left:8%; top:60%; position:absolute; width: 90%;}
.grey {background-color: #f0f0f0; width:100%; float:left;}
.white {background-color:#ffffff; width:100%; float:left;}
.black {background-color:#000000; padding:1% 0; display: flex;}
.inner {float:left; padding:3% 20%;}
.left {float:left; width:55%; margin-right:5%;}
.right {float:left; width:40%; /*margin-left:5%;*/}
.resource {width:12%; margin-right:4%; float:left;}
.discovery {width:19%; margin-right:1%; float:left; text-align:center;}
.unlock {width:30%; margin-right:2%; float:left; text-align:center;}
.types {color:#003843; padding:1% 10%;}

h1 {
		font-family: 'Lato', sans-serif;
		font-size:30px;
		color:#ffffff;
		text-align:left;
		/*margin-left:3%;*/
		/*margin-bottom:5%;*/
		font-weight:bold;
	}
	
h2 {
		font-family: 'Lato', sans-serif;
		font-size:14px;
		color:#C14D00;				
		text-transform: uppercase;
	}
	
h3 {
		font-family: 'Lato', sans-serif;
		float:left;
		font-size:11px;
		text-transform: uppercase;
		color:#ffffff;
		line-height:26px;
		margin:0px 13px;
		}
	
h4 {
		font-family: 'Lato', sans-serif;
		float:left;
		font-size:16px;
		color:#000000;
		line-height:22px;
		margin:0;
		text-align:left;
		font-weight:bold;
	}
	
h5 {
		font-family: 'Lato', sans-serif;
		float:left;
		font-size:12px;
		color:#000000;
		line-height:13px;
		margin-left:0px;
		margin-bottom: 0px;
		margin-top:0px;
		margin-right: 3px;

		}
	
	.intro {
	font-family: 'Lato', sans-serif;
		float:left;
		font-size:16px;
		color:#000000;
		line-height:20px;
		text-align:left;
	}
	
	.caption {
	font-family: 'Lato', sans-serif;
		font-size:11px;
		color:#000000;
		line-height:14px;
		text-align: left;
	}
	
p {
		font-family: 'Lato', sans-serif;
		font-size:14px;
		line-height:18px;
	}
	

img {display: block; max-width: 100%; height: auto;}




	
.down {
		font-family: 'Source Sans Pro', sans-serif;
		font-size:14px;
		line-height:20px;
		color:#ffffff;
	}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


#footer1
{
width:100%;
background-color:#000000;
 font-family: Arial, Helvetica, sans-serif;
 font-size:11px;
}

.footer1_box
{
  font-family: Arial, Helvetica, sans-serif;
  width: 20%; 
  height: 50px;
  font-size:11px;
  color:#ffffff;
  display: inline-block;
  padding:2%;
  vertical-align:middle;
}

.social {
	height:28px;
	float:left;
	vertical-align:top;
	margin-left:10px;
}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 500px;
  background-color: #555;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 3%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}

@media screen and (max-width: 1024px) {
  
	
.resource {width:40%; margin-right:4%; float:left;}

.footer1_box
{
  width: 96%;
  height: 40px; 
}
}