@charset "utf-8";
/* CSS Document #96C #E864FF */


html, body {margin: 0; padding: 0; border: 0;   }


/* Style the header */

.containtwo

{

width:100%;
height:80px;
background:#FFF;

overflow:auto;

}

.contain

{

width:100%;
height:80px;
background:#FFF;
position: fixed; 
z-index:1;
overflow:auto;
clear:both;
}




.logo img{float:left; height:80px;}






.blackline
{
padding: 10px 16px;
text-align:center;
background:#FFF;
color:#FFF;
font-size:36px;

}



.container {
  position: relative;
  width: 20%;
  float:left;
  

}









h1 { 
font-family:Arial; 
font-size:1px;
font-weight:100;
color:#FFF;


}

h2{ 
font-family:Arial; 
font-size:1px;
font-weight:100;
color:#FFF;
text-align:center;
}







.image {
  display: block;
  width: 100%;
  height: auto;
}





.overlay {
position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	background-color:#3F6;

}

.container:hover .overlay {
  opacity: 0.7;
}





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



.containtwo

{

width:100%;
height:40px;
background:#FFF;

overflow:auto;

}

.contain

{

width:100%;
height:40px;
background:#FFF;
position: fixed; 
z-index:1;
overflow:auto;
clear:both;
}




.logo img{float:left;  height:40px;}














.container {
  position: relative;
  width: 33.33333333333333%;
  float:left;
  

}

.container3 {
  position: relative;
  width: 50%;
  float:left;
  

}


.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	background-color: #3F6;
}

.container:hover .overlay {
  opacity: 0.8;
}


	



}