@import url(https://fonts.googleapis.com/css?family=Roboto);

*{
    font-family: "Roboto"; "Arial"; "sans-serif";
}

body{
    background-color: #F3F3F3;    
    font-family: 'Roboto', sans-serif;
}

/*PARTE1*/

.parte1{
    margin-left: 2rem;
    background-image: url(../img/mockup1.png);
    background-size: 35%;
    background-repeat: no-repeat;
    margin: 0;
    padding: 1rem;     
    background-position: right 3rem;
    
}
.parte1 h1 {
    color: #f8c301;
    margin: 0;
    font-size: 4rem;
}

.parte1 h2 {
    margin: 0;
    font-weight: normal;
    margin-bottom: 2rem;
    color: #5E5E5E;
    width: 60%;
}
.boxicono {
    width: 28%;
    display: inline-block;
    vertical-align: top;
    margin: 0 0.5rem;
}
.boxicono img {
    width: 3.5rem;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
}
.boxicono p {
    font-size: 0.8rem;
}
.descripcion {
    width: 66%;
    font-size: 0.9rem;
}
.dwlapp img{
    display:inline-block;
    vertical-align: top;
    width: 8rem;
}

.mockup{float: right;
    margin-top: -10rem;   
}


.contenedorboxes{
    width: 58%;
    text-align: center;    
}

/*PARTE2*/

.parte2{
    padding: 1rem;
    background-color: #E8E8E6;
    
}

.parte2 h2{
    /*margin: 0;*/
    color: #5E5E5E;
    font-weight: bold;
    font-size: 2rem;
    
}
.parte2 .boxizq {
    width: 62%;
}

.parte2 .boxizq img {
    width: 13rem;
    display: inline-block;
    vertical-align: top;
}

.parte2 .boxizq div {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    margin-left: 1rem;
    font-size: 0.9rem;
}

.parte2 .boxizq h3{
    color: #f8c301;
    font-size: 1.1rem;
}

.parte2 .boxder{
    width: 62%;
    margin-left: auto;
    text-align: right;
}


.parte2 .boxder div{
    display: inline-block;
    vertical-align: top;
    width: 50%;
    margin-right: 1rem;
    font-size: 0.9rem;
}

.parte2 .boxder img{
    width: 13rem;
    display: inline-block;
    vertical-align: top;    
}

.parte2 .boxder h3{
    text-align: right;
    color: #f8c301;
    font-size: 1.1rem;
}

.parte2 .boxder p{
    text-align: right;    
    
}

.parte2 button{
    display: block;
    margin: auto;
    border: none;
    background-color: #f8c301;
    padding: 0.8rem;
    font-weight: bold;
    
        
    
}

.parte2 button a{
    text-decoration: none;
    color: #FFFFFF;
    
    
}

 button:hover{
    background-color: #E8B103;
    
     
}


/*PARTE3*/

.parte3{
    padding: 1rem;
}

.parte3 h2{
    color: #5E5E5E;
    font-weight: bold;
    font-size: 2rem;
}

.parte3 h3{
    color: #f8c301;
    font-weight: bold;
}

.parte3 img{
    width: 10rem;
}
.parte3 .contenedorboxes2{
        text-align: center;

}
.parte3 .box{
    width: 20%;
    display: inline-block;
    vertical-align: top; 
    margin: 0 3rem;   
    font-size: 0.9rem;
}

/*PARTE4*/

.parte4 {
    /*background-color: #f8c301;*/
    background-image:url(../img/Trama.png);
    color: #fff;
    padding: 1rem;
    background-color: #f6c21b;
}

.parte4 .fono {
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

.parte4 .fono img {
    width: 60%;
}

.parte4 h3 {
    font-size: 2rem;
    margin: 0;
    
}

.parte4 .listado {
    display: inline-block;
    width: 30%;
    vertical-align: top;
    margin-left: 1rem;
}


.parte4 h4{
    margin: 0.5rem;
}

.parte4 .estrellas {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

.parte4 .itemnum span,.parte4 .itemnum p {
    display: inline-block;
    vertical-align: top;
}

.parte4 .itemnum p {
    width: 80%;
    margin: 0;
}

.parte4 .itemnum {
    margin: 1rem 0;
}

.parte4 .itemstar p{
    display: inline-block;
    vertical-align: top;
    width: 80%;
    margin: 0;
}

.parte4 .itemstar img{
    display: inline-block;
    vertical-align: middle;
}


.parte4 .itemstar{
    margin: 1rem 0;
}

/*PARTE5*/

.parte5{
    padding: 1rem;
}

.parte5 img{
    width: 2rem; 
    display: inline-block;
    vertical-align: middle;
    margin: 2rem;
}

.parte5 .contenedorboxes3 {
    width: 50%;    
    vertical-align: middle; 
    text-align: center;
    margin: auto;
}

.parte5 .legales{
    font-size: 0.5rem;
    text-align: center;
    width: 80%;
    margin: auto;
}