@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css?family=Roboto');

body{ background: #FFF; 
      font-family: 'Roboto', sans-serif; 
	  font-weight:300;}

.pagina{ max-width: 80rem; 
         margin:0 auto; }

header{ background:#0B4943; 
        max widht: 80rem; 
		margin: 0 auto; 
        display: flex;
	    flex-direction: row;}
		
	nav { font-family: 'Roboto Condensed', sans-serif; 
	      color:#FFF; 
		  text-align:center; }
	    	nav ul {}
				nav ul li {width: 30%;
				           padding: 1%; 
						   list-style:none; 
						   display:inline; }
				nav ul li a{color: #FFF; 
				            text-decoration: none;}
				  A:hover { color: #0FF; }
.encabezado { width:100%;}

main{ font-family: 'Roboto', sans-serif;}

h1{ font-family: 'Roboto', sans-serif;
    color:#FFF;
	margin-left: 2rem; }

.uno{ background: #12B3B1; 
	  font-family: 'Roboto', sans-serif; 
	  color:#FFF;
	  margin: 0auto;
      padding: 2rem; 
	  align-content: left; 
	  text-align: justify; }
		  
	.uno p {margin-right:38rem;
		    margin-left:2rem;}
		
.dos { background: #108983; 
       font-family: 'Roboto', sans-serif;
	   color:#FFF; 
	   margin: auto; 
	   padding: 4rem;}
	   
	   .contenedor_carousel{ width:100%;}
	
	   .explicacion {  font-family: 'Roboto', sans-serif;
		               color:#FFF;
		               position:absolute;
	                   top: 59rem;
				       z-index: 1;
				       margin-left: 2rem;  }
					   
	    .contenedor_imagenes { width: 100%;}
	
.tres{ background: #0D605A;
       margin:auto; 
	   padding: 2rem; }
	   
	    .opinion { width: 100%;}
		
	    .columnas { background: #0D605A; 
		            font-family: 'Roboto', sans-serif; 
					color:#FFF; 
					margin: auto; 
					margin-left: 5%; 
					margin-right:5% ;
					display: flex; 
					flex-direction: row; 
					flex-wrap: nowrap; 
					justify-content: flex-start; 
					align-items: flex-start; 
					align-content: stretch;}
					
		.columnauno  {width: 30%;
		             padding: 1%; 
					 text-align: left; }
					  
		.columnados  {width: 30%;
		             padding: 1%; 
					 text-align: left; }
					  
		.columnatres  {width: 30%;
		              padding: 1%;
					  text-align: left; }
					   
		.columnacuatro {width: 30%;
		               padding: 1%;
					   text-align: left; }
	
.cuatro { background:#0B4943; 
          font-family: 'Roboto', sans-serif;
		  color:#FFF; 
		  margin: auto; 
		  padding: 1rem; 
		  text-align: center; }
		  
         .botondescarga { display:inline; 
		                  text-align:center; } 
	
	.elemento { text-align:right; }
	.elemento_carousel { text-align:right;
	                    margin-right:-2rem; }
	.elemento_descarga { text-align:right;
	                    margin-right:1rem; }
	.botonsubir { text-align:right; }
	
footer{ background:#FFF;
        opacity: 0.6; 
		font-family: 'Roboto Condensed', sans-serif; 
		margin: auto; 
		padding:1rem; 
		text-align:center; }
		
/* IPAD */
@media (max-wigth:768px){
.uno{ text-align: left; }
	  
   .uno p { margin-left: 2rem;
	        margin-right: 2rem;}}


/* CELULARES */		
@media (max-width:320px){
nav { text-align: left; }
	
nav ul li {width: 50%;
           display: inherit;
		   text-align:center;
		   margin: 0 auto; }

.uno{ padding: 0.5rem; 
      text-align:left; }
		  
	.uno p { margin-left:0.5rem;
	         margin-right: 1rem;}
			 
.contenedor_carousel{ width:100%;}
	
	   .explicacion {  position:absolute;
	                   top: 47rem;
				       margin-left: 0.5rem;  }

        .contenedor_imagenes { width: 114%;}
		
.tres{}
        .opinion { width: 110%;
		 margin-left: -0.9rem;}
		
	    .columnas {	display: flex; 
           justify-content: space-between; 
		   flex-wrap: wrap;}
            .columnauno  {width: 1000%;
		                  padding: 1%; 
					      text-align: left; }
					  
	       	.columnados  {width: 1000%;
		                  padding: 1%; 
					      text-align: left; }
					  
		    .columnatres  {width: 100%;
		                   padding: 1%;
					       text-align: left; }
					   
		    .columnacuatro {width: 100%;
		                    padding: 1%;
					        text-align: left; }}