/*Familia typo*/
@font-face { font-family:Muli; src:url(../fonts/Muli.ttf);}

html {font-size: 16px; }
*{margin: 0; padding: 0;}
*{box-sizing: border-box;}
body {background: #f5f5f5;}
header{position: relative;}
header div img {width: 20%; margin: 0.2rem}
h1{color: white; position: absolute; bottom:0.9rem;
	width:100%;
	text-align:center;
	font-family: muli, arial, sans-serif;
	font-size:6rem;
	background-color:rgba(0, 0, 0, 0);
    line-height:13.75rem;
    letter-spacing: 0.5rem;}
header img{width: 100%;}
nav { background: #02a2c4; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left,  #02a2c4 , #38eab0); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,  #02a2c4, #38eab0); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,  #02a2c4, #38eab0); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right,  #02a2c4 ,#38eab0); /* Standard syntax */ padding: 0.2rem; }
ul li {display: inline; font-family: 'Muli', arial, sans-serif;} 
li a:hover {background-color: #696969; margin: 1.5rem; padding: 0.8rem; color: aliceblue;}
li a{list-style-type: none; text-decoration: none; line-height: 2rem; border-radius: 0.5rem; font-size: 0.9rem; margin: 2rem; font-family: 'Muli', arial, sans-serif; color: white;}
.plan {font-family: 'Muli', arial, sans-serif; font-size: 3rem; color: #12c8d6; text-align: center; margin: 5rem 0rem 0rem 0rem;}
h3 {font-family: 'Muli', arial, sans-serif; font-size: 1.8rem; color: #12c8d6; text-align: center; margin: 1.8rem 0rem 0rem 0rem;}
h4 {font-family: 'Muli', arial, sans-serif; font-size: 1.3rem; text-align: center; color: #77df5b; margin: 2rem 0rem 0rem 0rem;} 
p {font-family: 'Muli', arial, sans-serif; font-size: 1rem; margin: 1rem 5rem 0rem 5rem; text-align: center;}
.primeras {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
    align-content: center;}
.primeras article{ width: 100%; padding: 1.5%;}
.primeras article p {font-family: 'Muli', arial, sans-serif; font-size: 1rem; text-align: center;}
.primeras article ul li {display: block; font-family: 'Muli', arial, sans-serif; font-size: 1rem; text-align: left; margin: 0.5rem 0rem 0rem 0rem;}
.segundas {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
    align-content: center;}
.segundas article{width: 100%; padding: 1.5%;}
.segundas article p {font-family: 'Muli', arial, sans-serif; font-size: 1rem; text-align: center;}
footer {background-color: #d6d6d6; padding: 2% 0% 2% 0%; margin: 5rem 0rem 0rem 0rem;}
footer p {font-size: 0.75rem; font-style: italic; font-weight: none; font-family: roboto, arial, sans-serif;  font-weight: normal; margin: 1rem 5rem 1rem 5rem;}

@media screen and (max-width:30rem) {
    
header img{width: 100%}
    nav{width: 100%; word-spacing: -2rem; padding-top: 0.2rem; margin-top: -0.3rem}   
    
  h1 {font-family: 'Muli' sans-serif; font-size: 0.9rem; position: absolute; letter-spacing: 0.2rem; margin: -1rem auto -1.1rem; font-weight: 700; color: #02a2c4;}
    
    li a{font-weight: bold; font-size: 0.8rem}  
    
    .plan{font-family: 'Muli' sans-serif; font-size: 2rem; margin-top: 3rem}
    
    h3{font-size: 1.2rem; padding: 0rem 4rem 0rem 4rem; margin: 0.7rem}
    
    .primeras{display: inline;}
    
    .segundas{display: inline;}
    
    p{text-align: center; margin: 1rem; }
    
    .primeras article ul li{text-align: center; font-size: 0.9rem;}
    
    .primeras article p{
        text-align: center; font-size: 0.9rem;}
    
    .segundas article p{text-align: center; font-size: 0.9rem;}
    
    .problematicas p{font-weight: 500; color:#02a2c4}
    
}