@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

*{ box-sizing: border-box;}
/*BODY*/

body            {background-color: #1085c7;
                font-family: 'Roboto', sans-serif;
                background-image: url(../img/fondopropuesta1-01.jpg);
                background-repeat: repeat;
                background-size: 15%;
                width: 100%;
                padding: 0%;
                margin: auto;}

.contenedor {width: 960px;
            margin: auto;}


/*BARRA NAVEGACIÓN APP*/



header      {background-color: #E7E6E6;
            top: 0;    
            margin: 0%;}


.barranavegacion    {display: inline-flex;}
                    


.logo   {float: left;}

li          {float: none;
            display: inline-flex;
            list-style: none;}

a { text-decoration: none}

.menu li a  {color: #1085c7;
            font-weight: 700;
            padding: 0.5rem;}


.menu li a:hover {background-color: rgba(16, 133, 199, 0.6);
                    color: white;
                    transition: background-color 0.5s ease;
                    border-radius: 1rem;}


/*descarga app*/

.intro          {background-image: url(../img/fondopropuesta01-05.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: bottom;
                padding: 13%;}

.textointro {display: block;}

.textointro h1 {color: white;
                float: left;
                text-align: left;
                font-family: 'Roboto', sans-serif;
                font-size: 2.5rem;
                font-weight: 900;}

.textointro h2 {color: white;
                text-align: left;
                font-family: 'Roboto', sans-serif;
                font-size: 2.5rem;
                font-weight: 900;}


.textointro p {text-align: left;
                color: white;
                font-size: 1.2rem;
                margin-right: 20rem;
                font-weight: 700;}



.botondescarga img {text-align: center;}

.playstore {width: 10rem;
    height: auto;}

.applestore {width: 9rem;
                    height: auto;
    padding-bottom: 1%;}

/*como funciona*/

.funcion {  background-color: #10bef0;
            background-image: url(../img/fondopropuesta2-01.jpg);
            background-repeat: repeat;
            background-size: 15%;
            padding: 5%;
            margin: 0%;}


.textofuncion h3  { color: white;
                    text-align: center;
                    font-family: 'Roboto', sans-serif;
                    font-size: 2.5rem;
                    font-weight: 900;
                    margin: 0%;
                    padding-top: 2%;
                    padding-bottom: 2%;}

.textofuncion div {   color: white;
                    text-align: center;
                    font-family: 'Roboto', sans-serif;
                    font-size:1.3rem;
                    font-weight: 400;
                    padding: 0%;
                    margin-left: 5%;
                    margin-right: 5%;
                    margin-bottom: -2rem;}



.columnas        {display: flex;
	             justify-content: center;
	             align-content: center;
                 color: white;
                 }


.columna1             {text-align: center;
                        font-weight: 400;
                        font-size: 1rem;
                        padding: 2%;
                        margin-left: 3%;
                        margin-right: 3%;} 
 
.columna2             {text-align: center;
                        font-weight: 400; 
                        font-size: 1rem;
                        padding: 2%;
                        margin-left: 3%;
                        margin-right: 3%;}    

.columna3             {text-align: center;
                        font-weight: 400; 
                        font-size: 1rem;
                        padding: 2%;
                        margin-left: 3%;
                        margin-right: 3%;}                                 

h4                   {text-align: center; 
                     font-family: 'Roboto', sans-serif;
                     font-size: 1.1rem;
	                 font-weight: 700;               
                     margin: 1% 0% 1% 0%;}


h5                   {text-align: center; 
                     font-family: 'Roboto', sans-serif;
                     font-size: 1.1rem;
	                 font-weight: 700;               
                     margin: 1% 0% 1% 0%;}

h6                   {text-align: center; 
                     font-family: 'Roboto', sans-serif;
                     font-size: 1.1rem;
	                 font-weight: 700;               
                     margin: 1% 0% 1% 0%;}

/*ranking*/

.rankinglibros {background-image: url(../img/fondopropuesta3-01-01.jpg);
                background-repeat: repeat;
                background-size: 15%;
                padding: 10%;
                margin: 0%;}


.rankinglibros h7  {color: white;
    display: block;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0%;
    padding-top: 0;
    padding-bottom: 2%;}

.rankinglibros .iconoranking      {display: flex;
	                    justify-content: center;
                        width: 50%;
                        margin: auto;
                        padding: 2%;}

.rankinglibros p    {color: white;
                    text-align: center;
                    font-family: 'Roboto', sans-serif;
                    font-size:1.5rem;
                    font-weight: 400;
                    padding-top: 3%;
                    margin-left: 5%;
                    margin-right: 5%; }




/*PERFIL*/

.perfil         {background-image: url(../img/fondopropuesta2-01.jpg);
                background-repeat: repeat;
                background-size: 15%;
                padding: 7%;
                margin: 0%;}


.perfil img {display: flex;
            margin: auto;
            padding: auto;
            width: 25%;
            border-style: solid;
            border-color: white;
            border-width: thick;
            border-radius: 50rem;}

.perfil h8          {color: white;
    display: block;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0%;
    padding-top: 0;
    padding-bottom: 5%;}


.perfil p           {color: white;
                    text-align: center;
                    font-family: 'Roboto', sans-serif;
                    font-size:1.5rem;
                    font-weight: 400;
                    margin: 0%;
                    padding-top: 3%;
                    margin-left: 5%;
                    margin-right: 5%;}



/*FOOTER*/

footer              {background-color: #575756;
                    text-align: center;
                    margin: 0%;
                    padding: 1%;
                    font-family: 'Roboto', sans-serif;
	                font-weight: 400;
                    font-size: 0.8rem;
                    color: white;}

footer div { font-size: 1rem;}





/* Ipad */
@media (max-width:768px){
    
    /*body{ width: 50%;}*/
    
}

/* Celulares */
@media (max-width:320px){
    
    .columnas { display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;}  
    
   .columnas p {
    padding-left: 20%;
    padding-right: 20%;
}   
}