/*
 Home - Experiences
*/

.experience_row{
    .experience_container{
        position: relative;
        overflow: hidden;
        height: 835px;
        &:before{
            content:"";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
            z-index: 1;
        }
        &:after{
            content:"";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateY(100%);
            z-index: 1;
            transition: 0.75s cubic-bezier(0.52, 0, 0.41, 1);
        }

        .et_pb_image{
            height: 100%;
            .et_pb_image_wrap{
                height: 100%;
                img{
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        .content_group{
            position: relative;
            z-index: 2;
            transform: translateY(calc(50% + 50px));
            .hidden-text{
                opacity: 0;
                visibility: hidden;
            }
        }

        @media screen and (max-width:1700px){
            height: 635px;
        }

        @media screen and (max-width: 980px){
            height: 385px;
        }

        &.active{
            &:after{
                transform: translateY(0);
            }
        }
        &.beige{
            &:after{
                background: #a18c7a;
            }
        }
        &.noir{
            &:after{
                background: #262626;
            }
        }
        &.violet{
            &:after{
                background: #6a5d73;
            }
        }
    }
}

/*
    Home - Carousel
*/
.home-posts-carousel{
    height: 100%;
    .swiper-slide{
        position: relative;
        overflow: hidden;
        &:before{
            content: "";
            width: 320px;
            height: 0px;
            background: red;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            opacity: 0;

            transform:  rotate(45deg) translate(40px, 100px);
            transition: 0.75s all;

        }
        &:hover{
            &:before {
                opacity: 1;
                height: 320px;
            }
        }
        /*Orange*/
        &:nth-child(4n + 1) {
            &:before {
                background: #d27340;
            }
        }
        /*Noir*/
        &:nth-child(4n + 2) {
            &:before {
                background: #262626;
            }
        }
        /*Beige*/
        &:nth-child(4n + 3) {
            &:before {
                background: #a18c7a;
            }
        }
        /*Violet*/
        &:nth-child(4n) {
            &:before {
                background: #6a5d73;
            }
        }
    }

}
.home-posts-carousel-next-button{
    width: 21.7px;
    height: 43.4px;
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translate(100%, -50%);
    cursor: pointer;
    @media screen and (max-width: 980px){
        width: 16.7px;
        height: 30.4px;
        right: -7px;
    }
}

.home-posts-carousel-prev-button{
    display: none;
    cursor: pointer;
    @media screen and (max-width: 980px){
        display: block;
        width: 16.7px;
        height: 30.4px;
        position: absolute;
        top: 50%;
        left: -7px;
        transform: translate(-100%, -50%);
    }
}