@charset "UTF-8";

body{
	overflow-x: hidden;
}

#headerWrapper{
  background-image: url(../images/header_medium.jpg); 
  margin-top: -390px;
	position: absolute;
}

#logo{
	margin-left: -4px;
	margin-top: 10px;
	text-align: center;
	position: center;
}

nav{
	max-width:500px; 
	margin-top: -240px;
	position: absolute;
}

nav ul{
	list-style: none;
	margin: 0px;
	width: 342px;
}

nav ul li a{
  color: white;
	text-align: center;
	margin: 0px auto;
}

nav ul li{
  border-bottom: 1px solid white;
  margin-left: -80px;
  background-color: #144f75;
	width: 500px;
	padding-top: 10px;
  transition: 0.5s;
}

nav ul li:last-child {
     border-bottom: 2px solid white;
}

nav ul li:hover{
  background-color: #5aa94e;
}

/*aqui inicia las secciones*/

h1{
  margin-top: 380px;
  margin-left: 20px;
	font-size: 30px;
	letter-spacing: 20px;
}

#line_white01{
  margin-top: -20px;
	margin-left: 20px;
	width: 10px;
	height: 2px;
}

#line_white02{
  margin-top: -20px;
	margin-left: 290px;
	width: 10px;
	height: 2px;
}

#text{
  margin-left: -5px;
	margin-top: -4px;
	font-size: 15px;
	letter-spacing: 7px;
}

#imagen{
  margin-top: -170px;
	width: 100%;
	height: 300px;
}

#line_blue{
  margin-top: 140px;
  width: 100%x;
	height: 20px;
}

h2{
	margin-left: -6px;
  text-align: center;
	font-size: 50px;
}

#header_about{
background-image: url(../images/header_aboutsmall.jpg);
  width: 100%;
  height: 254px;
  margin-top: 70px;
}

#text0{
  margin: 0px 40px 0px 30px;
  text-align: center;
}

#text_about{
	margin: 0px 40px 0px 30px;
  text-align: center;
}

.circle1{
	margin-left:0px;
}

.circle2{
	margin-left: 0px;
	margin-top: 120px;
}

.circle3{
	margin-left: -0px;
	margin-top: 120px;
}

.circle4{
	margin-left: -0px;
	margin-top: 120px;
}

#textcircle1{
	margin-left: 10px;
	margin-top: -980px;
}

#textcircle2{
	margin-top: 260px;
	margin-left: 5px;
}

#textcircle3{
	margin-top: 260px;
	margin-left: 0px;
}

#textcircle4{
	margin-top: 270px;
	margin-left: 0px;
}

.blocks1{
	margin-top: 30px;
	margin-left: 0px;
	width: 214px;
	height: 170px;
	background-image: url(../images/blocks01.jpg);
	overflow: hidden;
	position: relative;
}

.blocks1 img{
	position: absolute;
	left:0px;
	top: -145px;
	opacity:0;
	
	transition: top 0.7s ease-out, opacity 0,6s ease;
}

.blocks1:hover img{
	opacity: 1;
	top:0;
}

.blocks2{
	margin-top: 250px;
	margin-left: 0px;
	width: 214px;
	height: 170px;
	background-image: url(../images/blocks02.jpg);
	overflow: hidden;
	position: relative;
}

.blocks2 img{
	position: absolute;
	left:0px;
	top: -145px;
	opacity:0;
	
	transition: top 0.7s ease-out, opacity 0,6s ease;
}

.blocks2:hover img{
	opacity: 1;
	top:0;
}


.blocks3{
	margin-top: 220px;
	margin-left: 0px;
	width: 214px;
	height: 170px;
	background-image: url(../images/blocks03.jpg);
	overflow: hidden;
	position: relative;
}

.blocks3 img{
	position: absolute;
	left:0px;
	top: -145px;
	opacity:0;
	
	transition: top 0.7s ease-out, opacity 0,6s ease;
}

.blocks3:hover img{
	opacity: 1;
	top:0;
}

h3{
  margin-left: 0px;
	margin-top: -385px;
}


h5{
  margin-left: 0px;
	margin-top: 370px;
}

#line_green01{
  margin-top: -420px;
	margin-left: 0px;
  width: 180px;
	height: 3px;
}

#line_green03{
  margin-top: 390px;
	margin-left: 0px;
  width: 180px;
	height: 3px;
}

#text1{
  width: 200px;
	text-align: center;
	margin-left: 0px;
	margin-top: -380px;
}


#text3{
  width: 200px;
	text-align: center;
	margin-left: 0px;
  margin-top: 248px;
}

#text4{
  margin-top: -90px;
  margin-left: -10px; 
	text-align: center; 
	font-size: 12px;
}

#text5{
  margin-top: -12px;
	margin-left: 50px; 
  text-align: center; 
	font-size: 12px;
}