body {
    width: 1200px;
    margin: auto;
}

header {
    width: 100%;
    border-top: 3px solid #efb810;
    background-color:  #f2f2f2;
}

main {
    background-color:  #f2f2f2;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Caracteristicas generales de cada seccion */
section {
    width: 100%;
    height: 600px;
}

/* Header y navbar */
.navbar {
    padding: 2rem;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px; 
}

.logo img {
    width: 100px;
    filter: brightness(1.1);
    mix-blend-mode: multiply;
}

.navbar-collapse {
    align-items: center;
    justify-content: space-between;
}

.nav-item {
    padding: 10px;
}

.nav-link:hover{
    color: #bf930d;
}

/* Seccion imagen de piano */
.imagen {
    height: auto;
}

.imagen-piano img {
    width: 100%;
    height: auto;
}

/* Seccion about */
.contenedor-about {
    padding-top: 150px;
}

.casa-vera {
    width: 70%;
}

.casa-vera img{
    height: auto;
    width: 80%;
}

.texto-vera {
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 18px;
    height: 400px;
    width: 30%;
}

/* Seccion carrusel */

.carrusel-pianos {
    width: 80%;
    height: 450px;
    margin: auto;
}

.carousel-item img {
    width: auto;
    height: 500px;
    max-height: 500px;
}

/* Seccion pricing */
.tipos {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 4px;
    /* width: 100%; */
}

.columna {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.card {
    height: auto;  /*600px;*/
    /* margin-top: 8px;
    vertical-align: middle; */
}

.card:hover{
    background-color: #f2f2f2;
}

.card .img-card {
    width: 250px;
    height: 200px;
}

.card-title {
    text-align: center;
}

.card-text {
    font-family: 'Ysabeau Infant', sans-serif;
}

.btn-card {
    border: 1px solid #efb810;
    font-family: 'Ysabeau Infant', sans-serif;
    width: 90%;
    font: 18px;
}

.btn-card:hover {
    background-color: #efb810;
    color: #f2f2f2
}

/* Seccion caracteristicas */
.caracteristicas {
    margin: 80px auto;
}

.caracteristicas h2 {
    font-family: 'Nunito Sans', sans-serif;
    text-align: center;
    font-size: 28px;
    color: #efb810;
    padding: 15px;
}

.acordeon {  
    padding-top: 40px;  
    height: 400px;
    margin: auto;
}

.accordion-item{
    background-color: #f2f2f2;
}

.accordion-header button{
    font-family: 'Ysabeau Infant', sans-serif;
    background-color: #f2f2f2;
}

.accordion-header button:focus {
    border-top: 2px solid #efb810;
}


.acordeon-iconos i {
    padding-right: 30px;
    font-size: 20px;
    color: #efb810;
}

.leyenda {
    margin-top: 80px;
    text-align: center;
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #efb810;
}

/* Footer landing page */
.footer-vera{
    width: 100%;
    height: 300px;
    border-top: 1px solid #efb810;
}

.contenedor-footer-vera {
    display: flex;
}

.contenedor-footer-vera h4 {
    font-family: 'Ysabeau Infant', sans-serif;
    text-align: center;
    font-size: 22px;
}

/* Mapa Google */
.plano {
    width: 40%;
}

.plano iframe{
    height: 250px;
    max-height: 250px;
    width: 100%;
}

.redes, .vera {
    height: 250px;
    margin: auto;
}

/* Redes Sociales Vera */

.redes{
    width: 20%;
}

.redes-vera-iconos {
    display: flex;
    flex-direction: column;
}

.redes-vera-iconos i {
    text-align: center;
    font-size: 26px;
    padding: 10px;
    height: 70px;
    transition: 1s;
}

.redes-vera-iconos i:hover {
    color: #efb810;
    font-size: 28px;
}

/* Logo de Pianos Vera */
.vera {
    width: 20%;
}

.vera img {
    width: 100%;
    filter: brightness(1.1);
    mix-blend-mode: multiply;
}

/* Mi Footer */
.footer-oli {
    margin-top: 5px;
    height: auto;
    width: 100%;
    background-color: rgb(65, 65, 54);
}

.contenedor-footer-oli {
    display: flex;
    justify-content: center;
}

.landing-page, .link-footer, .icono-contacto {
    color: #f2f2f2;
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 22px;
    text-align: center;
    width: 30%;
    margin: 20px;
    height: 80px;
}

.link-footer {
    text-decoration: none;
    font-size: 20px;
}

.icono-contacto a {
    width: 20%;
    transition: 1s;
    color: #f2f2f2;

}

.icono-contacto a:hover {
    color: #efb810;
}


/* Responsive  > 768 */
@media all and (min-width: 768px) and (max-width: 1200px) {
    body {
        width: 740px;
    }
    
    /* Header y navbar */
    header {
        width: 100%;
    }

    /* Caracteristicas generales de cada seccion */
    section {
        width: 100%;
        height: auto;
    }

    /* Seccion about */
    .contenedor-about {
        padding-top: 100px;
    }

    .casa-vera {
        width: 100%;
    }
    
    .casa-vera img{
        height: auto;
        width: 100%;
        margin: auto;
    }
    
    .texto-vera {
        height: 250px;
        margin-top: 50px;
        font-size: 20px;
        width: 100%;
    }
    
    /* Seccion carrusel */
    
    .carrusel {
        height: 600px;
    }

    .carrusel-pianos {
        width: 90%;
        height: 500px;
    }
    
    /* Seccion pricing */
    .tipos {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .columna {
        flex: 50%;
        max-width: 50%;
    }

    .card {
        max-width: 350px;
    }

    .card .img-card {
        max-width: 200px;
        max-height: 150px;
        margin: auto;
    }

    /* Seccion caracteristicas */    
    .leyenda {
        margin-top: 110px;
        font-size: 22px;
    }    
}

/* Responsive > 520 */
@media all and (min-width: 520px) and (max-width: 767px){
    body {
        width: 100%;
    }

    .logo img {
        display: none;
    }

    .about {
        width: 100%;
        height: 800px;
    }

    .contenedor-about {
        padding-top: 50px;
    }

    .casa-vera {
        width: 100%;
    }

    .casa-vera img{
        height: auto;
        width: 100%;
        max-width: 100%;
        margin: auto;
    }

    .texto-vera {
        height: 250px;
        margin-top: 50px;
        font-size: 20px;
        width: 100%;
        max-width: 100%;
    }

    .carrusel {
        width: 100%;
        height: 700px;
    }

    .carrusel-pianos {
        width: 100%;
        height: auto;
    }

    .pricing {
        width: 100%;
        height: auto;
    }

    .tipos {
        flex-wrap: wrap;
        width: 100%;
    }

    .columna {
        flex: 50%;
        max-width: 50%;
    }

    .caracteristicas{
        height: 600px;
    }

    .leyenda {
        display: none;
    }
}

/* Responsive < 520 */
@media all and (max-width: 519px){
    body{
        width: 100%;
        height: auto;
    }

    .logo img {
        display: none;
    }

    .about {
        height: 700px;
    }

    .contenedor-about {
        padding-top: 30px;
    }

    .casa-vera {
        width: 100%;
    }

    .casa-vera img {
        width: 100%;
        height: auto;
        padding-bottom: 20px;
    }

    .texto-vera {
        width: 100%;
    }

    .carrusel-pianos {
        width: 100%;;
    }

    .pricing {
        height: auto;
    }

    .tipos {
        flex-wrap: wrap;
        width: 100%;
    }

    .columna {
        flex: 100%;
        max-width: 100%;
    }

    .card .img-card {
        margin: auto;
    }

    .caracteristicas {
        height: 750px;
    }

    .leyenda {
        display: none;
    }
    
    /* Footer landing page */
    .footer-vera{
        height: 350px;
    }

    .contenedor-footer-vera {
        display: block;
    }

    .contenedor-footer-vera h4 {
        display: none;
    }

    .plano {
        width: 100%;
    }

    iframe {
        height:300px;
    }

    .redes{
        padding-top: 35px;
        width: 100%;
        height: 100px;
    }

    .redes-vera-iconos {
        display: flex;
        flex-direction: row;
    }

    .redes-vera-iconos i {
        margin: auto;
        height: 40px;
    }

    .vera {
        display: none;
    }

    .vera img {
        display: none;
    }

    .footer-oli {
        margin-top: 20px;
        height: 80px;
        width: 100%;
        /* position: fixed; */
        bottom: 0;
    }

    .contenedor-footer-oli {
        max-height: 50px;
        justify-content: space-between;
    }

    .landing-page {
        display: none;
    }

    .icono-contacto {
        width: 20%;
        height: 50px;
    }

    .link-footer {
        width: 80%;
        height: 50px;

    }

    .icono-contacto i, .link-footer {
        font-size: 16px;
    }

    .icono-contacto i {
        margin-left: 10px;
    }
}

/*Fin responsive area*/