.virtual-reality-bg {
    background: url("../images/backgrounds/realite-virtuelle-architecture.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.features-bg {
    background: url("../images/backgrounds/realite-virtuelle-numeriplan.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.blueprint-bg {
    background: url("../images/backgrounds/architecture-plan.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.individual-house-bg {
    background: url("../images/backgrounds/perspective-3d-maison%20individuelle.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.outdoor-bg {
    background: url("../images/backgrounds/perspective-3d-exterieure.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.realistic-perspective-bg {
    background: url("../images/backgrounds/perspective-realiste-maison-individuelle");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.panorama-bg {
    background: url("../images/backgrounds/imagerie-3d-vue-360-panoramique.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto;
}

.vr-headset-bg {
    background: url("../images/backgrounds/application-3d-casque-vr.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto;
}

.web-site-bg {
    background: url("../images/backgrounds/site-internet-pour-le-batiment.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}



.virtual-tour-bg {
    background: url("../images/backgrounds/application-3d-visite-virtuelle.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}


.black-mask {
    background: rgba(0, 0, 0, 0.7);
}

.white-mask {
    background: rgba(255, 255, 255, 0.7);
}

.blue-mask {
    background: rgba(0, 174, 199, 0.7);
}

.pink-mask {
    background: rgba(203, 6, 59, 0.7);
}


.black-gradiant {
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 1));
}

.white-gradiant {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1));
}

.pink-gradiant {
    background: repeating-linear-gradient(90deg, rgba(203, 6, 59, 1), rgba(203, 6, 59, 0.5) 50%, rgba(203, 6, 59, 1));
}

.blue-gradiant {
    background: repeating-linear-gradient(90deg, rgba(0, 174, 199, 1), rgba(0, 174, 199, 0.5) 50%, rgba(0, 174, 199, 1));
}


.white-mask-left {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

@media (min-width: 768px) {
    .white-mask-left {
        background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 58%, rgba(0, 0, 0, 0.6) 58%);
        color: black;
    }
}

.blue-mask-left {
    background: rgba(0, 174, 199, 0.8);
    color: white;
}

@media (min-width: 768px) {
    .blue-mask-left {
        background: linear-gradient(to right, rgba(0, 174, 199, 0.75) 58%, rgba(0, 0, 0, 0.6) 58%);
        color: white;
    }
}

.pink-mask-left {
    background: rgba(0, 0, 0, 0.6);
    color: white;
}

@media (min-width: 768px) {
    .pink-mask-left {
        background: linear-gradient(to right, rgba(203, 6, 59, 0.75) 58%, rgba(0, 0, 0, 0.6) 58%);
    }
}

.white-mask-right {
    background: rgba(0, 0, 0, 0.6);
    color: white;
}

@media (min-width: 768px) {
    .white-mask-right {
        background: linear-gradient(to left, rgba(255, 255, 255, 0.8) 53%, rgba(0, 0, 0, 0.6) 53%);
        color: black;
    }
}

.blue-mask-right {
    background: rgba(0, 174, 199, 0.8);
    color: white;
}

@media (min-width: 768px) {
    .blue-mask-right {
        background: linear-gradient(to left, rgba(0, 174, 199, 0.8) 53%, rgba(0, 0, 0, 0.6) 53%);
    }
}

.pink-mask-right {
    background: rgba(0, 0, 0, 0.6);
    color: white;
}

@media (min-width: 768px) {
    .pink-mask-right {
        background: linear-gradient(to left, rgba(203, 6, 59, 0.8) 53%, rgba(0, 0, 0, 0.6) 53%);
    }
}