@import url('https://fonts.googleapis.com/css?family=Rubik|Titillium+Web:200,400,700');
* {
  margin:  0;
  padding: 0;
}

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

header {background: #fff;}


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

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;}


.menu {position:fixed; background-color: rgba(255, 255, 255, 0.85); width: 100%;top: 0;font-family: 'Titillium Web', sans-serif;font-weight: 700; color:#145eb2}
.menu ul {position:sticky;border-top:0; z-index: 100;}
.menu ul img {float:right; padding-right: 2rem; width: 5%}
.menu ul li {text-decoration: none; display: inline; width: auto; font-family: 'Rubik', sans-serif; float: left; padding: 1rem;}
.menu ul li a {text-decoration: none;color:#145eb2}
.menu ul li:hover {background: #499bea;} 
.menu ul li a:hover {color:#fff;}

.columnas {margin-right: 10rem; display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items: center;
	align-content:center; box-sizing: border-box}
.presentacion {background-repeat: no-repeat; background-size:cover; padding-top: 9rem;padding-bottom: 4rem; background-image: url(img/fondohead5.jpg);}
.presentacion img {margin-left: 0; padding-right: 6rem; 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: 2rem; 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: 8rem; width: 40%; box-sizing: border-box}
h1 {font-size: 3rem; color: #ffffff;}




.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: 6rem; padding-left: 1rem; 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: 4rem; color:#499bea;}



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





.funcion {display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;}
.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: 4rem; }
.puntos img {width: 40%; height:40%; margin: 0}
.funcion h2 {text-align: center; color:#4095e6; padding: 3rem; padding-top: 5rem; font-family: 'Titillium Web', sans-serif;align-content: center;font-size: 3rem}
.puntos h3 {font-size: 2rem; padding-bottom: 2rem; padding-top: 2rem;}

.puntos p{font-family: 'Titillium Web', sans-serif; font-size: 1rem;margin-right: 3rem;margin-left:3rem;padding-bottom: 10rem}
.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;}

.nosotros h2 {font-size: 3rem; padding-bottom: 5rem; padding-top: 6rem; 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: 4rem; margin: 2rem; padding-bottom: 6rem}

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: 4rem;margin: auto}