.section-content {
    background-color: white;
}

img.open {
    animation: view-image-open;
    animation-duration: 1s;
    max-width: 90%;
    max-height: 90%;
}

@keyframes view-image-open {
    from {
        transform: scale(0.2);
    }
    to {
        transform: scale(1);
    }
}


/************************************** Accueil **************************************/

.accueil .section-title {
    color: white;
    font-size: 6.5vh;
    align-items: flex-end;
    filter: drop-shadow(0px 0px 10px black);
    background-color: transparent;
    flex: 1;
    text-align: left;
    justify-content: flex-end;
}

.accueil .section-title h1 {
    padding: 0px 15px;
    text-align: right;
    font-size: 11vh;
}

.accueil .section-content {
    background-color: transparent;
    flex: 1;
}

.accueil .section-content-page {
    align-items: flex-end;
    justify-content: flex-start;
}

.accueil .section-content-text {
    margin-bottom: 7%;
    margin-right: 15px;
}

.accueil .section-content-page p {
    color: white;
    filter: drop-shadow(0px 0px 10px black);
    font-size: 3vh;
    text-align: left!important;
    padding-bottom: 15vh;
    width: 290px;
}

.accueil .section-background {
    background-image: linear-gradient(163deg, rgba(0, 25, 255, 0.33) 0%, transparent 30%, transparent 70%, rgba(0, 161, 255, 0.412) 100%), url(../images/bg1.jpg);
    background-position: 50% 70%;
    width: 100%!important;
    height: 100%!important;
    margin-top: 0!important;
}

.accueil .section-content-page .accueil-buttons-group-mobile {
    display: none;
}

#mobile-title-sub {
    display: none;
}

.accueil .section-content-page .accueil-button-mobile {
    font-size: 2.5vh;
    background-image: linear-gradient(32deg, #485f6c, #454647);
}

@media only screen and (max-width: 1000px) {
    .accueil .section-background {
        filter: blur(1.3px);
    }
    .accueil .section-content-page .accueil-buttons-group-mobile {
        display: block;
    }
    #mobile-title-sub {
        display: block;
    }
    .accueil .section-content-page p {
        display: none;
    }
    .accueil .section-content-page {
        align-items: center;
        justify-content: center;
    }
    .accueil .section-title {
        justify-content: center!important;
    }
    .accueil .section-title h1 {
        text-align: center;
    }
}


/************************************** Qui sommes-nous ? **************************************/

.qui-sommes-nous .section-background {
    background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.84) 0%), url(../images/bg3_bw.jpg);
}

.qui-sommes-nous .section-content-page:nth-child(1) {
    background-image: linear-gradient(transparent 0%, rgba(104, 141, 196, 0.84) 0%), url(../images/bg3_bw.jpg);
}

.qui-sommes-nous .section-content-page:nth-child(2) {
    background-image: linear-gradient(transparent 0%, rgba(104, 141, 196, 0.84) 0%), url(../images/bg4_bw.jpg);
}

.qui-sommes-nous .section-content-text {
    color: white!important;
}

.qui-sommes-nous .section-title {
    background-image: linear-gradient(transparent 0%, rgba(37, 37, 42, 0.83) 0%), url(../images/noise.png), linear-gradient(transparent 0%, #25252a 0%);
    color: white;
}


/************************************** Branches **************************************/

.branches .section-background {
    background-color: rgb(101, 131, 165);
}

.branches .section-title {
    background-image: linear-gradient(white 0%, rgba(255, 255, 255, 0.6) 0%), url(../images/foulard.png);
    background-position: 50% 0%;
    background-size: 20vh;
    background-repeat: no-repeat;
    background-color: white;
    box-shadow: 0px -2px 0px rgb(193, 205, 219) inset;
}

.branches .section-content {
    background-color: rgb(236, 236, 236);
}

.branches .four-panels {
    background-image: url(../images/noise.png);
    font-family: 'Circular', sans-serif;
    color: rgba(255, 255, 255, 0.44);
    padding: 18px;
    box-sizing: border-box;
    transition-duration: 1s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding-top: 7.5vh;
}

.branches .four-panels:nth-child(2),
.branches .four-panels:nth-child(11) {
    background-color: rgb(163, 163, 163);
}

.branches .four-panels:nth-child(5),
.branches .four-panels:nth-child(8) {
    background-color: rgb(143, 143, 143);
}

@media only screen and (max-width: 1000px) {
    .branches .section-title {
        background-position: 50% 65%;
        background-size: 27%;
    }
    .branches .four-panels:nth-child(2),
    .branches .four-panels:nth-child(8) {
        background-color: rgb(163, 163, 163);
    }
    .branches .four-panels:nth-child(5),
    .branches .four-panels:nth-child(11) {
        background-color: rgb(143, 143, 143);
    }
}

.branches .four-panels:hover {
    color: white;
}

.branches .four-panels:nth-child(2):hover {
    background-color: rgb(52, 152, 219);
}

.branches .four-panels:nth-child(5):hover {
    background-color: rgb(181, 150, 115);
}

.branches .four-panels:nth-child(8):hover {
    background-color: rgb(231, 76, 60);
}

.branches .four-panels:nth-child(11):hover {
    background-color: rgb(42, 147, 86);
}

.branches .branches-views {
    position: absolute;
    transition-duration: 1s;
    opacity: 0;
    pointer-events: none;
    background-color: rgb(236, 236, 236);
    height: 100%;
}

.branches .branches-views:nth-child(3) {
    transform: scale(0.5)translate3d(-50%, -50%, 0);
}

.branches .branches-views:nth-child(6) {
    transform: scale(0.5)translate3d(50%, -50%, 0);
}

.branches .branches-views:nth-child(9) {
    transform: scale(0.5)translate3d(-50%, 50%, 0);
}

.branches .branches-views:nth-child(12) {
    transform: scale(0.5)translate3d(50%, 50%, 0);
}

@media only screen and (max-width: 1000px) {
    .branches .branches-view-input:checked+.four-panels+.branches-views {
        height: 100%;
        top: 0%;
    }
    .branches .branches-views:nth-child(3) {
        transform: none;
        height: 25%;
        top: 0%;
    }
    .branches .branches-views:nth-child(6) {
        transform: none;
        height: 25%;
        top: 25%;
    }
    .branches .branches-views:nth-child(9) {
        transform: none;
        height: 25%;
        top: 50%;
    }
    .branches .branches-views:nth-child(12) {
        transform: none;
        height: 25%;
        top: 75%;
    }
}

.branches .branches-view-input {
    display: none;
}

.branches .branches-view-input:checked+label+div.branches-views {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.branches .branches-view-input:checked+label:nth-child(2) {
    transform: scale(2)translate3d(25%, 25%, 0);
}

.branches .branches-view-input:checked+label:nth-child(5) {
    transform: scale(2)translate3d(-25%, 25%, 0);
}

.branches .branches-view-input:checked+label:nth-child(8) {
    transform: scale(2)translate3d(25%, -25%, 0);
}

.branches .branches-view-input:checked+label:nth-child(11) {
    transform: scale(2)translate3d(-25%, -25%, 0);
}

@media only screen and (max-width: 1000px) {
    .branches .branches-view-input:checked+label:nth-child(2) {
        transform: scale(1)translate3d(0%, 0%, 0);
        height: 100%;
    }
    .branches .branches-view-input:checked+label:nth-child(5) {
        transform: scale(1)translate3d(0%, 0%, 0);
        height: 100%;
        margin-top: -21vh;
    }
    .branches .branches-view-input:checked+label:nth-child(8) {
        transform: scale(1)translate3d(0%, 0%, 0);
        height: 100%;
        margin-top: -42vh;
    }
    .branches .branches-view-input:checked+label:nth-child(11) {
        transform: scale(1)translate3d(0%, 0%, 0);
        height: 100%;
        margin-top: -63vh;
    }
}

.branches .informations-pratiques {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.branches .informations-pratiques div {
    width: 50%;
    padding: 0.5rem;
    box-sizing: border-box;
}

@media only screen and (max-width: 1000px) {
    .branches .informations-pratiques div {
        width: 100%;
    }
    .informations-pratiques-description {
        margin-left: 5vw;
    }
}

/***************** Louveteaux *****************/

.branches .section-content .section-content-page:nth-child(3) .section-content-page:nth-child(1) {
    background-image: url(../images/branches/louveteaux-1.jpg);
}

.branches .section-content .section-content-page:nth-child(3) .section-content-page:nth-child(2) {
    background-image: url(../images/branches/louveteaux-2.jpg);
}

.branches .section-content .section-content-page:nth-child(3) .section-content-page:nth-child(3) {
    background-image: url(../images/branches/louveteaux-3.jpg);
}


/***************** Eclais *****************/

.branches .section-content .section-content-page:nth-child(6) .section-content-page:nth-child(1) {
    background-image: url(../images/branches/eclais-1.jpg);
    background-position: 50% 60%;
}

.branches .section-content .section-content-page:nth-child(6) .section-content-page:nth-child(2) {
    background-image: url(../images/branches/eclais-2.jpg);
    background-position: 50% 20%;
}

.branches .section-content .section-content-page:nth-child(6) .section-content-page:nth-child(3) {
    background-image: url(../images/branches/eclais-3.jpg);
    background-position: 50% 40%;
}


/***************** Picos *****************/

.branches .section-content .section-content-page:nth-child(9) .section-content-page:nth-child(1) {
    background-image: url(../images/branches/picos-1.jpg);
    background-position: 50% 77%;
}

.branches .section-content .section-content-page:nth-child(9) .section-content-page:nth-child(2) {
    background-image: url(../images/branches/picos-2.jpg);
    background-position: 50% 30%;
}

.branches .section-content .section-content-page:nth-child(9) .section-content-page:nth-child(3) {
    background-image: url(../images/branches/picos-3.jpg);
    background-position: 50% 70%;
}


/***************** Responsables *****************/

.branches .section-content .section-content-page:nth-child(12) .section-content-page:nth-child(1) {
    background-image: url(../images/branches/responsables-1.jpg);
}

.branches .section-content .section-content-page:nth-child(12) .section-content-page:nth-child(2) {
    background-image: url(../images/branches/responsables-2.jpg);
}

.branches .section-content .section-content-page:nth-child(12) .section-content-page:nth-child(3) {
    background-image: url(../images/branches/responsables-3.jpg);
}


/************************************** Le Chalet **************************************/

.le-chalet .section-background {
    background-color: rgb(213, 184, 131);
    background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.78) 0%), url("../images/chalet.jpg");
}

.le-chalet .section-title {
    background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(213, 184, 131, 0.82) 0%), url("../images/chalet2.jpg");
    color: white;
}

.le-chalet .section-content {
    background-image: linear-gradient(white 0%, rgba(255, 255, 255, 0.75) 0%), url(../images/noise_black.png), linear-gradient(transparent 0%, white 0%);
    background-color: white;
}

.le-chalet .section-content-text {
    color: rgb(87, 87, 87);
}


/************************************** Blog **************************************/

.blog .section-background {
    background-color: rgb(101, 131, 165);
}

.blog .section-content {
    background-color: white;
}

.blog .section-title {
    background-image: linear-gradient(transparent 0%, rgba(37, 37, 42, 0.83) 0%), url(../images/noise.png), linear-gradient(transparent 0%, #25252a 0%);
    color: white;
}

#blog-view-image {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

#blog-view-image img {
    cursor: default;
    box-shadow: 0px 15px 15px #00000094;
    border-radius: 5px;
}


/************************************** Photos **************************************/

.photos .section-background {
    background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(35, 35, 35, 0.78) 0%), url(../images/bg4_bw.jpg);
}

.photos .section-title {
    background-image: linear-gradient(white 0%, rgba(84, 84, 84, 0.32) 0%), url(../images/noise_black.png);
    background-color: rgba(78, 77, 77, 0.56);
    color: white;
}

.photos .album-big:nth-child(1) {
    width: 100%;
    height: 50%;
}

.photos .album {
    width: 48%;
}

.photos .album-nom div {
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    transition-duration: 0.3s;
    filter: grayscale(1);
}

.photos .album-nom:hover div {
    transform: scale(1.05);
    filter: grayscale(0);
}

.photos .album-nom span {
    z-index: 1;
}

.photos .album-big h2 {
    color: white;
    text-shadow: 0px 0px 10px black;
    font-size: 3vw;
    display: flex;
    flex-direction: column-reverse;
    margin-left: 5%;
}

.photos .album-big:nth-child(2) h2,
.photos .album-big:nth-child(3) h2 {
    font-size: 2vw;
}

@media only screen and (max-width: 1000px) {
    .photos .album-big h2 {
        font-size: 4vh;
    }
    .photos .album-big:nth-child(2) h2,
    .photos .album-big:nth-child(3) h2 {
        font-size: 4vh;
    }
    .photos .section-background {
        height: 20vh!important;
        top: 0;
    }
}

.photos .album-big {
    background-size: 100%;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.photos .album-big-background {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition-duration: 0.3s;
    z-index: -1;
    filter: grayscale(1)contrast(0.5);
}

.photos .album-big:hover .album-big-background {
    transform: scale(1.02);
    filter: grayscale(0);
}

.photos .album-no-vignette {
    background-position: 145% 150%;
}

@media only screen and (max-width: 1300px) {
    .photos .album {
        width: 100%!important;
    }
}
@media only screen and (max-width: 1000px) {
    .photos .album {
        width: 48%!important;
    }
}
@media only screen and (max-width: 600px) {
    .photos .album {
        width: 100%!important;
    }
}

.photos .further-albums {
    background-color: rgb(101, 131, 165);
    color: white;
    transition-duration: .3s;
}

.photos .further-albums:hover {
    padding-left: 20px;
}


/************************************** Contact **************************************/

.contact {
    color: white;
}

.contact .section-title {
    background-color: transparent;
}

.contact .section-content {
    background-color: transparent;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 2px white;
}

.contact .section-background {
    background-position: 50% 85%;
    background-size: cover;
    background-image: radial-gradient(circle at 117% 182%, #203791 0%, transparent 75%), url(../images/contact.png), url(../images/stars.png), radial-gradient(circle at 117% 182%, #0e5fa7 26%, #0b0b28 80%);
}

.contact .section-content-carousel {
    margin-left: -100%;
}

#contact-message-contenu {
    height: 100px;
    max-width: 100%;
    min-width: 100%;
    max-height: 500px;
}

.contact .error {
    color: white;
}

#contact-carousel-1 {
    transition-timing-function: cubic-bezier(0.6, 0.33, 0.26, 0.97);
}