/*NUESTRAS MARCAS*/

/* Si no se usa en mas partes se puede introducir en index.css, por ahora dejarlo suelto */

.brands-container{
    width: 100%;
}

.brands-container .brands-banner {
    z-index: 1;
    color: #fff;
    background: url("../img/01_inicio/01_marcas.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 5%;
    width: 100%;
    height: 560px;
}

.brands-container .brands-banner .title {
    font-family: 'Almarai', sans-serif;
    font-size: 50px;
    text-align: center;
}

.brands-container .brands-banner .text {
    margin: 0 auto;
    color:#683000; 
    padding: 30px; 
    text-align:center; 
    font-size:13px; 
    line-height:25px; 
    letter-spacing: 3px; 
    font-weight:lighter;
    width: 50%;
}

.white {
    color: #FFFFFF !important;
}

.brands-container .brands {
    color: #fff;
    padding: 100px 4%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

.brands .brand {
    margin: 0 40px 0 0;
    width: 370px;
}

.brands .brand:last-child {
    margin: 0;
}

.brand > .image {
    background-color: #231f20;
}

.brand > .image > .top,
.brand > .image > .bottom {
    padding: 18px;
    font-family: 'Almarai', sans-serif;
    font-size: 17px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 3px;
    
}

.brand > .image > img {
    object-fit: cover;
    width: 100%;
    height: 300px;
}
.container-brand {
    border: 1px solid #ececec;
    padding: 20px;
}

.brand > .container-brand > .text {
    color: #a0a0a0;
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 20px;
    text-align: center;
}

 .brand > .container-brand > .brand-button {
    padding: 1px; 
    text-align: center;
    text-transform: uppercase;
}

/* MEDIA QUERY */
@media screen and (min-width: 960px) and (max-width: 1310px) {
    .brands-container .brands {
        padding-bottom: 0;
    }

    .brand > .brand-button {
        padding: 1px 0 60px 0;
    }

    .brands .brand {
        margin: 0;
    }
    
    .brands .brand:first-child {
        margin: 0 100px 0 0;
    }

    .brands .brand:last-child {
        margin: 100px 0 0 0;
    }

    .brands-container .brands-banner .text {  
        width: 80%;
    }
}

@media screen and (max-width: 959px){
    .brands-container .brands {
        padding-bottom: 0;
        flex-direction: column;
        align-items: center;
    }

    .brand > .brand-button {
        padding: 1px 0 60px 0;
    }

    .brands .brand, .brands .brand:last-child{
        margin: 0;
        margin-bottom: 20px;
    }

    .brands-container .brands-banner .text {  
        width: 80%;
    }
}

@media screen and (max-width: 620px){
    .brands-container .brands-banner .title {
        font-size: 40px;
        margin-top: 30px;
    }
    
    .brands-container .brands-banner .text {
        padding: 30px 0; 
        width: 90%;
    }
}

@media screen and (max-width: 420px){
    .brands .brand {
        width: 310px;
    }
    
    .brands .brand > .image > img {
        height: 251px;
    }

    .brands-container .brands {
        padding: 50px 1% 0;
    }

    .brand > .image > .top,
    .brand > .image > .bottom {
        padding: 14px;
        font-size: 15px;
    }

    .brand > .brand-button .button a {
        font-size: 11px;
        padding: 12px 24px; 
    }
}

/* VERSION Club THe */
.brands.club-the-version .brand > .text {
    text-align: center;
}

@media screen and (min-width: 770px){
    .brands.club-the-version { /* A poner en .brands */
        max-width: 100%;
    }
    
    .brands.club-the-version .brand {
        width: 570px;
    }
    
    .brands.club-the-version .brand > .image > img {
        height: 470px;
    }
}

@media screen and (max-width: 1350px){
    .brands.club-the-version .brand {
        margin: 0 20px 40px;
    }
}

@media screen and (max-width: 769px){
    .brands.club-the-version .brand {
        margin: 0 0 40px;
    }
}