@import url('https://fonts.googleapis.com/css?family=Rubik|Titillium+Web:200,400,700');
* {
  margin:  0;
  padding: 0; box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     -ms-box-sizing:border-box;
        text-decoration: none;
    list-style-type: none;
}

.pagina {width: 100%; margin: 0}
main {padding-top:0; }

header {; position:relative;}


body {font-family: 'Titillium Web', sans-serif;}


header img {right: 0; padding-right: 1%; width: 8%; position: absolute; z-index: 2000}



.hamb { display: none;
    width: 5%;
    height: 5%;
   margin-left: 2%;
    background-color:rgba(244, 251, 253, 0.67)
}

.menu { width: 100%;top: 0;font-family: 'Titillium Web', sans-serif;font-weight: 700; color:#145eb2; display: block;background-color: rgba(219, 219, 219, 0.5); position: absolute; z-index:1000}
.menu ul {border-top:0;}

.menu ul li {text-decoration: none; display: inline; width: auto; font-family: 'Rubik', sans-serif; float: left; padding: 1%;}
.menu ul li a {text-decoration: none;color:#145eb2}
.menu ul li:hover {background: #499bea;} 
.menu ul li a:hover {color:#fff;}


/**Boton de descarga**/



.button  {font-family: 'Titillium Web', sans-serif; font-weight: 700; color: #FFFFFF;padding: 1rem; padding-right: 2rem; padding-left: 2rem;
    cursor: pointer;
    display: block;
    position: relative;
    border: 2px solid #FFFFFF; background-color: transparent !important;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
}
.button:hover { color: #ff9314 !important;
    background-color: #F7CA18!important;
    text-shadow: ntwo;border: 2px solid #ffc014}
.button:hover:before {
    top: 0%;
    bottom: auto;
    height: 100%;}
.button:before {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: #000 !important
    background: #F7CA18;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}


/*Principal*/

.columnas {margin-right: 5%; display: flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items: center;
	align-content:center; box-sizing: border-box}
.presentacion {background-repeat: no-repeat; background-size:cover; padding-top: 5%;padding-bottom: 3%; background-image: url(img/fondohead5.jpg);}


.presentacion img {margin-left: 0; padding-right: 3%; width: 40%; animation-duration: 1s;
  animation-name:bounceIn; animation-timing-function:ease-in-out;}
@keyframes bounceIn {
  0% {transform: scale(0.1);opacity: 0; }60% { transform: scale(1.1);opacity: 1; }100% {transform: scale(1);}}
.presentacion h1 {font-family: 'Rubik', sans-serif;}
.presentacion p {font-family: 'Titillium Web', sans-serif; font-size: 2rem; padding-top: 2%; max-width:  60%; color: #FFFFFF; padding-bottom: 2rem;}
.presentacion article {text-align: right; display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items:flex-end;
	align-content:flex-end;padding-right: 5%; width: 40%; box-sizing: border-box}
h1 {font-size: 3rem; color: #ffffff;}


/*fadu a todos lados*/

.pantalla { background-color: aliceblue;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content:center;
	align-items:center;
	align-content:center;text-align:center; font-family: 'Titillium Web', 
	sans-serif;font-weight:300; font-size: 2rem; padding-top: 6%; padding-left: 1%; box-sizing: border-box;width: 100%}
.pantalla img {margin-bottom: 0; width: 100%;}
.pantalla h2{width: 60%; line-height: 1;align-items: center; margin: auto;padding-bottom: 3%; color:#499bea;}



.pantalla p {
width: 30%; position: absolute; text-align: left;right: 20%;font-size: 2rem; line-height: 1}

/*carcteristicas*/

.puntos {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:center;
	align-content:center;text-align: center; font-family: 'Titillium Web', sans-serif;
	font-weight:300; font-size: 2rem; padding: 4%; padding-top: 6%}

.puntos img {width: 40%;  margin: 0}
.funcion h2 {text-align: center; color:#4095e6; padding: 3%; padding-top: 5%; font-family: 'Titillium Web', sans-serif;align-content: center;font-size: 3rem}
.puntos h3 {font-size: 2rem; padding-bottom: 2%; padding-top: 2%;}

.puntos p{font-family: 'Titillium Web', sans-serif; font-size: 1rem;margin-right:3%;margin-left:3%;padding-bottom: 5%}
.nosotros{background: #499bea;
background: -moz-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #499bea), color-stop(100%, #207ce5));
background: -webkit-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -o-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -ms-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: linear-gradient(to right, #499bea 0%, #207ce5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
 color: #fff; padding-top: 6%; padding-bottom: 6%}

.nosotros h2 {font-size: 3rem; padding-bottom: 5%; padding-top: 3%; font-family: 'Marvel', sans-serif;text-align: center; margin: auto;width: 100%;}
.nosotros p{font-family: 'Titillium Web', sans-serif;font-size: 1rem; width: 60%; text-align: center; margin: auto; font-size: 1.5rem}

.logos{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:center;
	align-items: center;
	align-content:center;text-align: center; width: 100%; text-decoration: none}
.logos li {display: inline}
.logos a{text-decoration: none
}
.logos img {width: 10%;height:auto;box-sizing: border-box; padding-top: 4%; margin: 2%; padding-bottom: 6%}

footer {background: #499bea;
background: -moz-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #499bea), color-stop(100%, #207ce5));
background: -webkit-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -o-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: -ms-linear-gradient(left, #499bea 0%, #207ce5 100%);
background: linear-gradient(to right, #499bea 0%, #207ce5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
 color: #fff;}

footer p{text-align: center; font-size: 1rem;width: 70%;padding-bottom: 4%;margin: auto}

/*TABLET*/



@media (max-width: 768px) {


	.logos {flex-wrap:wrap;}
	.logos li {align-content: center;flex-wrap: wrap;}
	.logos img {width: 20%;}

.columnas {margin-right: 10%}
.presentacion {flex-wrap: nowrap; padding-top: 10%; padding-bottom: 10%}
	.presentacion img {width: 50%; top:55px}
	.presentacion article {width: 50%}
	.presentacion h1 {font-size: 2rem}
	.presentacion p {font-size: 1.5rem}


.pantalla p {width: 30%; position: absolute; text-align: left;right: 20%; padding-top: 10%;font-size: 1rem}



.puntos {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	align-content:center;text-align: center; font-family: 'Titillium Web', sans-serif;
	font-weight:300; font-size: 2rem; padding: 4%; }
.puntos article {width: 50%}



.funcion h2 {width: 60%; line-height: 1;align-items: center; margin: auto;padding-bottom: 3%; color:#499bea;}


.menu ul img {width: 10%; padding-bottom: 0}

.puntos p {font-family: 'Titillium Web', sans-serif;font-size: 1rem; ; 
text-align: center; margin: auto; font-size: 1rem; line-height: 1.5}

.puntos h3 {font-size:1.5rem;}



.nosotros p {font-size: 1rem; width: 80%}

.footer {width: 80%}

}



/*IPHONE*/
@media (max-width: 414px){

    .menu {display: none}
    
    
    .hamb { display:block; color: rgba(219, 219, 219, 0.5); position: absolute; z-index:1000; left:0;
   padding:1.5rem;  width: 100%; margin:0
}
    .hamb li {
    background: #0b315c;
    color: #fff;
    font-family: rubik;
    font-weight: 300;
    font-size: 1.25rem;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 1rem;
    padding-top: 1rem;}
    .hamb img {position: absolute; left:0; width: 10%; top:2%; padding: 1%}
    
    
   .hamb  ul {
    display: none;
    position: absolute;
    left: 0%;
}
      .hamb  ul a {
    color: #fff; text-decoration: none;
}
    
    .hamb:hover > ul{ display: block; 
                    top: 3rem}
    
    
    .logo {width: 20%}
    
    
.columnas {flex-wrap: wrap; margin: 0; width: 100%;}
.presentacion {position: relative;}
	.presentacion img {width: 100%; position: absolute; margin:0; top:0; padding-right: 0}
	.presentacion article {text-align: right; display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items:center;
	align-content:center; width: 100%; box-sizing: border-box; padding-top:100%}
	.presentacion h1 {font-size: 2rem}
	.presentacion p {font-size: 1.5rem; text-align: center; width: 100%; }


.nosotros h2  {font-size: 1.5rem; width: 100%}
.pantalla h2 {font-size: 1.5rem; width: 70%}
.pantalla p {text-align: center;padding 10%;font-size: 1rem; position: relative; width: 100%; right: 0 }
.pantalla img {width: 100%; position: relative}

.funcion h2 {font-size: 1.5rem; width: 100%}
.puntos article {width: 100%}