/* -------- HEADER NICOLA ----------- */

header:has(#headerLogoContainer.headerNicola) {
    background-color: #5C1924 !important;
    color: white;
}

header:has(#headerLogoContainer.headerNicola) .headerPromoText {
    color: #5C1924 !important;
    background: white !important;
}

.customPageCenteredContent .lineEffectCenter::before, .customPageCenteredContent .lineEffectLeft::after, .headerLink .lineEffectCenter::before {
    background: white !important;
}

.submenuContainer .lineEffectCenter::before {
    background: black !important;
}

header:has(#headerLogoContainer.headerNicola) .rightItemsContainer img {
    filter: invert(99%) sepia(0%) saturate(4214%) hue-rotate(295deg) brightness(114%) contrast(100%);
}

header:has(#headerLogoContainer.headerNicola) input::placeholder {
    color: white
}

header:has(#headerLogoContainer.headerNicola) #headerLogoContainer img {
    display: block;
    width: auto;
    height: 31px;
    filter: invert(4%) sepia(110%) saturate(1%) hue-rotate(295deg) brightness(114%) contrast(100%) !important;

}

.cartAmount,
.wishListQuantity {
    color: white !important;
}

header:has(#headerLogoContainer.headerNicola) .searchSite {
    color: white !important;
}

/* ------- END HEADER NICOLA -------- */

#content {
    min-height: auto;
    background-image: url(../../files/noisyBackground.jpg);
}

#customPageTitle {
    display: none;
}

.studioTotalContainer {
    background-color: #F1EBE2;
    background-image: url(../../files/noisyBackground.jpg);
}

.highlight {
    width: 100%;
}

.highlightTitle {
    font-size: 4rem;
    text-align: center;
    padding: 5rem 0 10rem;
    line-height: 4rem;
    font-family: "InstrumentSerif";
}

.highlightImages {
    display: flex;
}

.heighlightImages {
    display: grid;
    gap: 1rem;
    align-items: center;
    height: auto;
    grid-template-columns: 1.2fr 1.2fr 1fr 1.5fr 1.9fr 1.2fr 1.2fr 1fr 1.5fr 2fr 1.2fr;
    position: relative;
    top: 0;
    width: 200%;
}

.heighlightImages img {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

.infoImage.onViewport {
    -webkit-animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s both;
    animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s both;
}

.infoSection {
    display: flex;
    padding-top: 6rem;
    margin-top: 5rem;
    padding-bottom: 0rem;
    align-items: center;
    animation: fade 2s ease forwards;
    margin-bottom: 4rem;
    transition: background-color 1s ease;
}

.infoContainer {
    display: flex;
    flex-direction: column;
    width: 40%;
}

.bordeauxSection {
    background-color: #F1EBE2;
    -webkit-transition: background-color 0.4s;
    -o-transition: background-color 0.4s;
    transition: background-color 0.4s;
    background-image: url(../../files/noisyBackground.jpg);

}

.bordeauxSection.onViewport {
    background-color: #5C1924;
    -webkit-transition: background-color 0.4s;
    -o-transition: background-color 0.4s;
    transition: background-color 0.4s;
    background-image: none;

}

.infoTitle {
    background-color: #E3D4F4;
    padding: .5rem 1rem .5rem 4rem;
    width: fit-content;
    font-family: var(--secondary-font);
    text-transform: uppercase;
    color: #E6500E;
    font-size: 2.5rem;
    line-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 7px;
}

.infoTitle.onViewport {
    -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s both;
    animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s both;
}

.infoText {
    color: white;
    width: 85%;
    margin-left: 4rem;
    margin-top: 3rem;
    font-size: 13px;
    letter-spacing: .3px;
}

.infoSection img {
    width: 52%;
    margin: 0 auto;
}

.lazos {
    width: 100%;
    padding: 0rem 0 6rem;
    background: #5C1924;
    position: relative;
    display: block;
}

.lazos img {
    width: 160%;
    position: relative;
}

.lazos img:first-of-type {
    top: 5rem;
    z-index: 1;
}

/* BLOG */

.studioBlogContainer {
    color: white;
    padding-bottom: 4rem;
}

.blogTitleContainer {
    display: flex;
    width: 90%;
    margin: 26px auto;
    justify-content: space-between;
    align-items: flex-end;
}

#titleOfBlog {
    font-size: 24px;
    line-height: 28px;
    font-weight: 100;
    letter-spacing: .5px;
}

#subtitleOfBlog {
    text-transform: uppercase;
    font-size: 13px;
}

.blogCenteredContent {
    width: 90%;
    display: block;
    gap: none;
    grid-template-columns: unset;
    margin-bottom: 80px;
    margin: 0 auto;
}

.blogSliderContainer {
    /* display: grid;
    gap: 40px;
    grid-template-columns: repeat(4, 1fr); */
}

.blogPostRegular.slick-slide {
    margin: 0 3px;
  }

.dataContainer {
    text-align: left;
    margin-top: 10px;
}

.blogsContainer {
    background-color: #5C1924;
    /* bottom: 6px; */
    position: relative;
    padding-bottom: 5rem;
    overflow: hidden;
    display: block;
}

.blogPostTitle {
    font-size: var(--base);
    line-height: 22px;
    margin-bottom: 5px;
    font-weight: 300;
    color: white;
    text-transform: uppercase;
    text-align: left;
    width: fit-content;
    margin-top: 15px;
    margin-left: 0;
}

.blogPostVerMas {
    font-size: calc(var(--base-font-size) - 1px);
    text-transform: uppercase;
    line-height: normal;
    width: fit-content;
    margin: 0 auto;
    border-bottom: 1px solid transparent;
}

.blogPostRegular .postPreviewFile {
    width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    aspect-ratio: 1 / 1;
}

.blogPostVerMas:hover {
    font-weight: 400;
}

.blogTitleNicola {
    text-align: center;
    padding: 2rem 0;
    font-family: var(--secondary-font);
    font-size: var(--group-title-font-size);
    color: white;
}

.trabajemosJuntos {
    display: flex;
    margin-bottom: 2rem;
}

.trabajemosJuntosTextSection {
    display: flex;
    width: 40%;
    flex-direction: column;
    color: #E6500E;
    font-family: var(--secondary-font);
    font-size: 4rem;
    line-height: 4rem;
    font-style: italic;
    align-items: center;
    justify-content: center;
}

.trabajemosJuntosTextSection img {
    width: 2rem;
    position: relative;
    top: 30vh;
}

.trabajemosJuntosImageSection {
    width: 60%;
    height: auto;
    position: relative;
}

.trabajemosJuntosImageSection img {
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    display: block;
    width: 100%;
    position: relative;
}

.mailto {
    position: absolute;
    width: fit-content;
    margin: 0 auto;
    right: calc(66% / 2);
    color: #5C1924;
    background-color: transparent;
    bottom: 17vh;
    width: 15rem;
    height: 3rem;

}

.instagramSliderTitle,
.instagramSliderSeeMore {
    color: white;
}

.instagramSliderTitle {
    font-family: var(--secondary-font);
}

.instagraSliderContainer {
    background-color: #5C1924;
    padding: 5rem 0 4%;
    margin: 0 !important;
}

.instagramSliderTitle {
    font-size: 28px !important;
}

.productSlide:hover .lineEffectCenter::before{
    width: 100%;
    left: 0%;
    bottom: 0px;
}

@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@media screen and (max-width: 1100px) {

    header:has(#headerLogoContainer.headerNicola) .right img {
        filter: invert(99%) sepia(0%) saturate(4214%) hue-rotate(295deg) brightness(114%) contrast(100%);
    }

    header:has(#headerLogoContainer.headerNicola).open {
        background-color: white !important;
    }

    .headerCol {
        width: calc(61% + 50px);
    }

    .headerMobileMenuIcon span {
        background: white;
    }

    .highlightTitle {
        font-size: 36px;
        padding: 3rem 0 3rem;
        line-height: 3rem;
    }

    .heighlightImages {
        height: auto;
        grid-template-columns: 1.5fr 1.9fr 1.2fr 1.2fr 1fr;
        width: 300%;
    }

    .infoSection {
        display: flex;
        padding-top: 6rem;
        margin-top: 3rem;
        margin-bottom: 4rem;
        flex-direction: column;
    }

    .infoContainer {
        width: 100%;
    }

    .infoTitle {
        padding: .5rem 1rem .5rem 2rem;
        width: fit-content;
        font-size: 3rem;
        line-height: 3rem;
        gap: 14px;
    }

    .infoTitle img {
        height: 11px;
    }

    .infoSection img {
        margin: 0 auto;
        width: 90%;
    }

    .infoText {
        color: white;
        width: 90%;
        margin: 3rem auto;
        line-height: 20px;
        letter-spacing: .5px;
    }

    .blogSliderContainer {
        grid-template-columns: repeat(1, 1fr);
    }

    .lazos img {
        width: 380%;
        position: relative;
    }

    .lazos img:first-of-type {
        top: 3rem;
        z-index: 1;
    }

    .lazos {
        padding: 0rem 0 2rem;
    }
    .blogsContainer {
        padding-bottom: 2rem;
    }

    .trabajemosJuntos {
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        overflow: visible;
        position: relative;
        margin-top: 3rem;
        margin-bottom: 0;
        height: 25rem;
    }

    .trabajemosJuntosTextSection {
        width: 90%;
        font-size: 3rem;
        line-height: 4rem;
        gap: 4rem;
        margin-bottom: 1rem;
    }

    .trabajemosJuntosTextSection img {
        width: 30px;
        position: relative;
        top: 0vh;
    }

    .trabajemosJuntosImageSection {
        width: 90%;
        height: auto;
        position: relative;
        top: 2rem;
        overflow: visible;
        z-index: 3;
    }
    
    .mailto {
        right: calc(36% / 2);
        bottom: 5vh;
        width: 13rem;
    }
    .instagraSliderContainer {
        padding: 17rem 0 4%;
    }
    .blogPostRegular .postPreviewFile {
        aspect-ratio: 2 / 3;
    }
    .blogCenteredContent {
        width: 100%;
    }
    .blogPostRegular {
        width: 100%;
        margin: 0 1px;
        right: 4px;
        position: relative;
    }
}