@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Hind|Lato|Noto+Sans|Raleway');

  	
*{
	margin:0;
	padding:0;
	}

h1{
	font-size: 31px;
}

body {
        background: linear-gradient(180deg, #574F4F, #000000);
		font-family: 'Lato', sans-serif;
			
		}

header{
	display:block;
	width:100%;
	height:60px;
	margin-top:10px;

	}
	
#bandera{
		float:right;
		margin-right:8%;
		
	}

.latexto p, .col p{
}
	
#wow{
	display:block;
	width:100%;
	text-align:center;
	
}

.latexto {
    position: relative;
    margin-top: -490px;
    background: rgba(255,255,255,0.8);
    width: 45%;
    margin-left: 25%;
    padding: 30px;
    font-size: 18px;
    height: 377px;
}

.col {
    position: relative;
    margin-top: -490px;
    background: rgba(255,255,255,0.8);
    width: 45%;
    margin-left: 25%;
    padding: 30px;
    font-size: 18px;
    height: 377px;
}
	
#boton1 {
	
	position:relative;
	display:block;
	float:left;
	margin-top:-25%;
	margin-left:38%;
	
		
}
#boton1:before{
 content:'';
  border-radius: 50px 50px;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 0px;
 height: 100%;
 background: rgba(255,255,255,0.3);
 transition: all 4s ease;
}

#boton1:hover:before {
 width: 100%;
}

#boton2{
	position:relative;
	display:block;
	float:right;
	margin-top:-28%;
	margin-right:38%;
	
}

#boton2:before{
 content:'';
 border-radius: 50px 50px;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 0px;
 height: 100%;
 background: rgba(255,255,255,0.3);
transition: all 4s ease;
}

#boton2:hover:before {
 width: 100%;
}



#boton3{
	position:relative;
	display:block;
	float:right;
	margin-top:-10%;
	margin-right:42%;
}

#boton3:before{
 content:'';
 border-radius: 50px 50px;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 0px;
 height: 100%;
 background: rgba(255,255,255,0.3);
 transition: all 4s ease;
}

#boton3:hover:before {
 width: 100%;
}
#boton{
	position:relative;
	display:block;
	float:right;
	margin-top:-22%;
	margin-right:45%;
	
}

#boton:hover{
	width:145px;
	height:145px;
	transition-duration:.5s;
	opacity: 0.5;
	
	}
			

#texto1{
	margin-top:10px;
	display:block;
	color:#23B24C;
	font-size:24px;
	text-align:center;

}

#texto2{
	padding:10px;
	display:block;
	color:#23B24C;
	font-size:24px;
	text-align:center;
	
}
	
	


@media screen and (max-width: 480px)
{/*para tener un maximo de 480px en la ventana*/
body
	
header{
	display:inline-block;
	width:100%;
	height:50px;
	margin-top:50px;
	
	}
	
#atomo{
	
						
	}	


#texto1{
	display:block;
	color:#23B24C;
	font-size:12px;
	margin-top:30px;
	text-align:center;

	
}

#texto2{
	display:block;
	color:#23B24C;
	font-size:12px;
	text-align:center;

	
}	
	
	
	
	
}

@media screen and (max-width: 768px)
{/*para tener un maximo de 768px en la ventana*/

}