@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i');

body {
    font-family: 'Roboto', sans-serif;
    max-width: 100%;
    margin: auto;
}

header {
    background-color: #2c3456;
}

header img {
    margin: 1% 3%;
}

nav{ 
    float: right;
    text-align: right;
    width: auto;
	margin-top: 0.6875rem;
}

header nav ul li {
    list-style-type: none;
    display: inline;
    padding: 1rem 2rem;
}

header nav ul li:hover {
    background-color: rgba(106, 203, 179, 0.87);
    padding: 1rem 2rem;
}

nav ul li a {
    text-decoration: none;
    color: #FFF;
}

article {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    margin: 0rem;
}

.columna1 {
    background-image: url(Img/fondoapp.jpg);
    background-size: auto;
    background-repeat:no-repeat;
    display: flex;
    flex-direction: row;
    align-content: space-around;
    justify-content: center;
    padding: 0 0 4%;
}

.fotosmockup{
    padding: 2% 5%;
}

.descripcionapp {
    margin: 7rem 6rem;
}

.descripcionapp h3 {
    font-weight: 700;
    font-size: 4rem;
    color: #6ACBB3;
    text-shadow: 2px 2px 2px #2c3456;
    margin: auto;
}

.descripcionapp p {
    font-weight: 400;
    color: #7b2432;
    padding: 1rem;
    font-size: 1.3rem;
}

strong{
    font-size: 2.7rem;
    font-weight: 100;
}

.divbotondescargar{
    display: flex;
    font-size: 1.1rem;
    color:#6ACBB3;
}

.iconossistemasoperativos{
    display: inline;  
}

.botondescargar {
    display: inline-block;
    font-size: 1.5rem;
    margin: auto;
    padding: 0.5rem;
    text-align: center;
    width: 20%;
    text-decoration: none;
    background-color: #2c3456;
    color: #FFF;
    box-shadow: 3px 3px 0px 0px #6ACBB3;

}

.botondescargar:hover {
    box-shadow: 3px 3px 0px 0px #2c3456;
    background-color: #6ACBB3;
}

.columna3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 3rem 0rem 0rem 0rem;
}

.columna3 div {
    background-color: rgba(106, 203, 179, 0.42);
    padding: 1rem;
    width: 29%;
}

.columna3 div p {
    padding: 0rem 3rem;
    color:#2c3456;
    font-weight: 500;
}

.columna4{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 0rem;
}

.valoraciones {
    text-align: center;
    margin: auto;
    padding: 2rem 0rem 0.2rem 0rem;
    font-size: 1.6rem;
    color: #2c3456;
    font-weight: 300;
}

.columna4 div{
    width: 100%;
    padding: 1.9rem 0rem;
    background-color: #dbdcde;
    color: #2c3456;
}

.columna4 div img{
    border-radius: 50%;
    border-color:#2c3456;
    padding: 0.2rem;
}

.columna4 div span{
    display: grid;
    font-weight: 700;
    font-size: 1rem;
}

.columna4 div p{
    font-weight: 300;
    max-width: 70%;
    flex: auto;
    margin: auto;
    padding: 0.3rem;
}

.puntacion img{
    display: auto;
    width: 60%;

}

.redessociales {
    color: #2c3456; 
    padding: 1rem 0rem 2rem;
    font-weight: 500;
}

.redessociales li{
    display: inline;
    text-decoration: none;
}
.redessociales li a {
    padding: 0.6rem;
}


footer {
    text-align: center;
    color: #2c3456;
    margin: 1% 3%;
    background-color:rgb(237, 237, 237);
    margin: auto;
    padding: 0.2rem;
}

footer h1 {
    font-weight: 700;
    font-size: 0.9rem;
}

footer p {
    font-weight: 300;
    font-size: 0.8rem;
}