@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
	margin: auto;
	padding: 0rem;
}

 

/** NAVEGADOR **/

nav {
	overflow: hidden;
	width: 100%;
	margin: auto;
	padding-top: 2rem;
	padding-bottom: 2rem;
	text-align: center;
	margin-bottom: 3rem;
}

nav ul li {
	margin-right: 5rem;
	margin-left: 5rem;
	float: center;
	display: inline-block;
	list-style-type: none;
	font-family: 'Open Sans';
}

nav ul li a {
	text-align: center;
	display: inline-block;
	color:black;
	width: auto;
	padding: 2rem 2rem;
	text-decoration: none;
	margin: 1rem;
	border-bottom: 0.2rem solid #2ABDEE;
}

nav ul li a:hover{
	background-color: #2ABDEE;
	color: white;
}


.logo {
    display: inline-block;
    vertical-align: top;
    width: auto;
    height: 50px;
    margin-left: 2rem;
    margin-top: 15px;}



/**separador**/
.borde{
	background:#28BCED;
	height: 0.5rem;
}


/**descarga**/

.descarga{
	height: 32rem;
	background-image: url(img/pasillob.jpg);
	background-attachment: fixed;
	margin: 0rem;
	background-size: cover;
	background-position: 0%;
}


.contenedor {
	width: 24rem;
	height: 100%; 
	background: #1485C8;
	background-color: rgba(20, 133, 200, 0.8);
	margin-left: 2rem;
}


.descarga h1{
	text-align: left;
	color: #fff;
	font-family:'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 2.5rem;
	margin-left: 2rem;
	padding-top: 10rem;
	margin-bottom: 2rem
}

.descarga p{
	text-align: left;
	color: #fff;
	font-family:'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 0.96rem;
	margin-left: 2rem;
}

.descarga a:hover { 
    color: #1485C8;
    }

.icon img{
	display: block;
	margin: center;
	margin-bottom: 3rem;
	margin-top: 3rem;

}

/**muestra de app*/
.acercade{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: stretch;
	margin: auto;
}

.acercade img{
	width: 150%;
	margin-left: -2rem;
}

/**info*/
.info{
	height: 25rem;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
    background: #2ABDEE;
    font: 'Open Sans', sans-serif;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.info .columna1 p {
        font: 'Open Sans', sans-serif;
}

/**utilidades*/
.utilidades{
	background:#1485C8;
	height: 10rem;
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 2rem
	margin-bottom: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}


figure{
	color: #fff;
	margin-bottom: 15px;

}



.box {
	padding: 2rem;
	font-family: 'Open Sans', sans-serif; 
	font-weight: 400;
    font-size: 1rem;
 	text-decoration: none;
    display: block;
	color: #fff;
	text-align: center;
	
}

.box img {
	width: 20%;
}

.columna1 {
	width: 50%;
	margin-right: 5rem;
}

.columna1 p{
	font-family: 'Open Sans';
	color: white;
	font-size: 1rem;
}

.columna2 {
	width: 50%;
}

.columna2 img{
	display: block;
	margin: auto;
}

/**footer*/
footer{
    margin: center;
	padding: 2rem;
	text-align: center;
	color: #1485C8;
	font-size: 0.9rem;
	width: 70%;

}

/* RESPONSIVE */

@media (max-width: 768px) {
    footer p {
        font-size: 50%;
    }

    .info {
    	height: 30rem;
    	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
    }

    .columna1 p {
    	width: 100%;
    	font-size: 85%;
    }

    .columna2 {
    	text-align: center;
    }

    .columna2 img{
    	width: 100%;
    	padding: 0;
    }

    nav ul li {
    	width: 10%;
    }

    nav ul li a {
    	font-size: 60%;
    	width: 200%;
    	padding: 0.6rem;
    }

    .acercade {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
    }

    .box p {
    	font-size: 0.65rem;
    	padding-bottom: 0.5rem;
    }

    .icon img {
    	width: 20%;
    }
}

@media (max-width: 900px) {
	.acercade img{
		width: 130%;
	}
}