/* ============================================================
   STYLE.CSS — Site Ton Métier Ton Avenir
   Converti depuis React vers HTML/CSS/PHP
   ============================================================ */

/* ---- BASE ---- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* ---- BOUTONS & PARAGRAPHES (global) ---- */
button {
  font-family: Raleway;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.8rem 1rem;
  border-radius: 5rem;
  margin: 0 0.5rem;
  border: none;
  transition: opacity 0.3s ease-in-out;
}

button:hover {
  cursor: pointer;
  opacity: 0.7;
}

p {
  font-size: 1.1rem;
}

/* ============================================================
   HEADER
   ============================================================ */
.header-headerStyle {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.header-mainContainer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.header-logo {
    height: 200px;
    transition: transform 0.8s ease-in-out;
}

.header-logo:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.header-linksContainer a {
    position: relative;
    color: white;
    text-decoration: none;
    font-family: Raleway;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
    transition: color 0.2s linear;
    margin: 0 0.8rem;
}

.header-linksContainer a:hover {
    color: #header-ff7a1f;
}

.header-socialLogoContainer {
    display: flex;
}

.header-socialLogo {
    height: 3rem;
    width: 3rem;
    background-size: cover;
    transition: background-image 0.2s linear;
}

.header-mobileHeaderContainer {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.header-mobileLogo {
    width: 15vh;
}

.header-mobileMenuButton {
    position: relative;
    right: 2rem;
    filter: invert(1);
}

.header-mobileMenuButton:hover {
    cursor: pointer;
}

.header-fullMobileMenu {
    position: absolute;
    width: 100%;
    top: -10vh;
    height: 110vh;
    background-color: white;
    z-index: 99;
    text-align: center;
}

.header-fullMobileMenu .header-linksContainer {
    margin: 10vh 0 0 0;
}

.header-fullMobileMenu .header-linksContainer a {
    width: 100%;
    margin: 5rem 0 0 0 !important;
    color: #22344d;
}

.header-fullMobileMenu .header-linksContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.header-fullMobileMenu .header-socialLogoContainer {
    position: relative;
    justify-content: center;
    margin: 5rem 0 0 -1rem;
}

.header-menuCloseButton {
    margin: 2rem 0 0 0;
    height: 3rem;
    opacity: 0.3;
}

.header-metierLinksContainer {
    position: absolute;
    top: 2rem;
    left: 50%;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.5rem;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1)
}

.header-metierLinksContainer a {
    margin: 0.5rem 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-mainContainer {
    width: 100%;
    position: relative;
}

.footer-footerContentContainer {
    background-color: #1d2c44;
    width: 100%;
    top: 90%;
    left: 0;
}

.footer-textContainer {
    color: white;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    font-family: Raleway;
}

.footer-textContainer h3 {
    text-transform: uppercase;
    font-weight: bold;
}

.footer-textContainer p {
    text-transform: uppercase;
    font-size: 0.9rem;
}

.footer-textContainer a {
    font-family: ClaireHand;
    color: white;
    text-decoration: none;
    transition: opacity 0.2s linear;
}

.footer-textContainer a:hover {
    opacity: 0.7;
}

.footer-linkUnderline {
    background-color: #footer-ffc200;
    height: 2px;
    border-radius: 1px;
    margin-top: 2px;
}

.footer-logoContainer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.footer-logo {
    width: 25vw;
    height: auto;
    margin-right: 2rem;
}

.footer-footerBackground {
    position: relative;
    top: 20px;
    width: 100%;
    height: auto;
}

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

@media screen and (max-width: 768px) {
    .footer-textContainer {
        flex-wrap: wrap;
    }
}

/* ============================================================
   COOKIES
   ============================================================ */
.cookies-mainContainer {
    text-align: center;
    width: 30vw;
    position: fixed;
    right: 2rem;
    bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.25rem;
    padding: 0.5rem;
    z-index: 99;
}

.cookies-mainContainer span {
    margin: 0 0.5rem;
}


@media screen and (max-width: 768px) {
    .cookies-mainContainer {
        width: 100vw;
        left: 0;
        right: unset;
    }

    .cookies-mainContainer button {
        margin: 1rem 0.25rem;
    }
}

/* ============================================================
   CONTACTFORM
   ============================================================ */
.contactform-mainContainer {
    position: relative;
    display: flex;
    padding: 0 10rem;
    flex-direction: column;
    justify-content: center;
}

.contactform-mainContainer p {
    font-family: Raleway;
}

.contactform-mainContainer input {
    font-family: Raleway;
    font-size: 1rem;
    border: 2px rgb(52, 174, 164) solid;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.contactform-mainContainer input:focus-visible {
    outline: 2px #35d6a5 solid;
}

.contactform-mainContainer textarea {
    font-family: Raleway;
    font-size: 1rem;
    border: 2px rgb(52, 174, 164) solid;
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-height: 10rem;
}

.contactform-mainContainer textarea:focus-visible {
    outline: 2px #35d6a5 solid;
}

.contactform-mainContainer h3 {
    font-size: 3rem;
    font-family: ClaireHand;
    font-weight: 100;
    color: rgb(52, 174, 164);
}

.contactform-mainContainer button {
    margin: 2rem 0;
    align-self: flex-end;
    background-color: #contactform-ffc200;
    color: white;
    font-size: 1.2rem;
}

.contactform-inputRow {
    display: flex;
    align-self: center;
}

.contactform-smallInput {
    width: 20rem;
}

.contactform-largeInput {
    width: 45rem;
}

.contactform-inputWithTextContainer {
    margin: 0 2rem
}

@media screen and (max-width: 768px) {
    .contactform-mainContainer {
        padding: 0 2rem;
    }

    .contactform-smallInput {
        width: 100%;
    }

    .contactform-largeInput {
        width: 100%;
    }
}

/* ============================================================
   VIDEO
   ============================================================ */
.video-singleVideoContainer {
    position: relative;
    width: 26vw;
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 2px 10px 2px #888888;
    text-align: left;
    background-color: white;
    transition: transform 0.3s ease-in-out;
}

.video-singleVideoContainer:hover {
    cursor: pointer;
    transform: scale(1.1);
    z-index: 99;
}

.video-singleVideoContainer video {
    width: 100%;
    height: auto;
    border-radius: 0.8rem;
}

.video-singleVideoContainer img {
    width: 100%;
    height: auto;
    border-radius: 0.8rem;
}

.video-singleVideoContainer h3 {
    margin: 1rem 0 0 0;
}

.video-singleVideoContainer p {
    margin: 0 0 0.5rem 0;
}

.video-playButton {
    bottom: 1.5rem;
    right: 1rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    background-color: #video-ffd618;
    border-radius: 22rem;
    box-shadow: 0 2px 7px 0px #888888;
}

.video-playButton img {
    width: 50%;
    height: auto;
}

.video-videoModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.video-modalFiller {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 101;
}

.video-videoContainerInModal {
    max-width: 80vw;
    top: 2rem;
    padding: 2rem 5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #video-eaeaea;
    border-radius: 1rem;
    z-index: 102;
}

.video-videoContainerInModal span {
    font-family: Raleway;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
}

.video-closeModalButtonContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 6rem;
    border-radius: 2.5rem;
    z-index: 103;
}

.video-closeModalButtonContainer:hover {
    cursor: pointer;
}

.video-closeSplash {
    width: 100%;
    height: auto;
    transform: rotate(-120deg);
}

.video-closeCross {
    width: 10rem;
    position: absolute;
}

.video-nextSplash {
    width: 100%;
    height: auto;
    transform: rotate(-120deg);
}

.video-nextArrow {
    width: 10rem;
    position: absolute;
}

.video-nextModalButtonContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 6rem;
    border-radius: 2.5rem;
    z-index: 103;
}

.video-nextModalButtonContainer:hover {
    cursor: pointer;
}

.video-videoContainerInModal video {
    width: 100%;
    max-height: 60vh;
    margin: 1rem 0 0 0;
    border-radius: 1rem;
    z-index: 103;
}

.video-videoContainerInModal h3 {
    font-size: 2.5rem;
    margin: 0.25rem 0;
    z-index: 103;
}

.video-videoContainerInModal p {
    width: 90%;
    font-family: ClaireHand;
    text-align: center;
    margin: 1rem 0;
}

.video-videoContainerInModal p {
    z-index: 103;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .video-videoContainerInModal {
        overflow-y: auto;
        max-height: 70vh;
    }

    .video-videoContainerInModal h3 {
        margin: 0.5rem 0 0 0;
    }

    .video-closeModalButtonContainer {
        width: 2rem;
        top: 1rem;
        left: 2rem;
    }

    .video-closeCross {
        width: 5rem;
        top: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .video-singleVideoContainer {
        width: 75vw;
    }

    .video-singleVideoContainer h3,
    p {
        text-align: left;
        font-size: 0.9rem;
    }

    .video-videoContainerInModal {
        padding: 2rem 1rem;
    }

    .video-videoContainerInModal h3 {
        font-size: 2rem;
        margin: 1rem 0 0 0;
    }

    .video-closeModalButtonContainer {
        width: 2rem;
        top: 1rem;
        left: 2rem;
    }

    .video-closeCross {
        width: 5rem;
        top: 1rem;
    }

    .video-nextModalButtonContainer {
        width: 2rem;
        top: 1rem;
        right: 2rem;
    }

    .video-nextArrow {
        width: 4rem;
        top: 2.25rem;
    }

}

/* ============================================================
   VIDEOGALLERY
   ============================================================ */
.videogallery-mainContainer {
    position: relative;
    width: 100%;
    margin: 5rem 0;
}

.videogallery-mainContainer h1 {
    font-family: ClaireHand;
    margin-top: 3rem;
}

.videogallery-mainContainer h2 {
    font-family: Raleway;
    font-weight: normal;
    padding: 0 20vw;
    font-size: 1rem;
}

.videogallery-splashContainer {
    position: relative;
    width: 100%;
    z-index: -1;
}

.videogallery-splashLeft {
    position: absolute;
    width: 12rem;
    height: auto;
    top: 5rem;
    left: 0;
    transform: rotate(45deg);
}

.videogallery-splashRight {
    position: absolute;
    width: 12rem;
    height: auto;
    top: 5rem;
    right: 0;
    transform: rotate(-45deg);
}

.videogallery-videosContainer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 2rem 0;
    transition: opacity 0.3s linear;
}

.videogallery-highlightPicture {
    width: 55vw;
    height: auto;
}

.videogallery-arrowContainer {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.videogallery-arrowContainer img {
    width: 1rem;
    height: auto;
    margin: 0 0.5rem;
    padding: 0.5rem;
    transition: opacity 0.3s linear;
    border-radius: 1rem;
}

.videogallery-arrowContainer img:hover {
    cursor: pointer;
    opacity: 0.7;
}

.videogallery-navigationDotContainer {
    width: 100%;
    position: absolute;
    bottom: -1rem;
    display: flex;
    justify-content: center;
}

.videogallery-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: gray;
    border-radius: 1rem;
}

.videogallery-navigationDotContainer div {
    margin: 0 0.25rem;
}

.videogallery-hightlightContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.videogallery-spanAnchor {
    position: absolute;
    top: -3rem;
}

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

@media screen and (max-width: 768px) {
    .videogallery-highlightPicture {
        width: 99vw;
    }

    .videogallery-hightlightContainer {
        flex-wrap: wrap;
    }

    .videogallery-arrowContainer img {
        width: 0.8rem;
        margin: 0 0.1rem;
    }

}

/* ============================================================
   FEDERATION
   ============================================================ */
.federation-mainContainer {
    position: relative;
    display: flex;
    width: 25vw;
    border: 2px #22344d solid;
    border-radius: 1rem;
    padding: 1rem 0.5rem;
    margin: 3rem 2rem;
    flex-wrap: wrap;
    justify-content: center;
    background-color: white;
    box-shadow: 0 2px 10px 2px #888888b7;
}

.federation-mainContainer h4 {
    font-family: ClaireHand;
    color: #federation-ff7a1f;
    margin: 2rem 0 0;
    font-size: 1.3rem;
}

.federation-mainContainer p {
    font-family: Raleway;
    font-weight: bold;
    font-size: 0.9rem;
    color: #22344d;
    width: 100%;
    white-space: pre-line;
}

.federation-logo {
    width: 65%;
    height: auto;
    position: absolute;
    top: -15%;
    border-radius: 1rem;
    border: gray 1px solid;
    background-color: white;
}

.federation-picture {
    width: 95%;
    height: auto;
    border-radius: 1rem;
}

.federation-contactContainer img {
    margin: 0 0.5rem;
}

.federation-extraLink {
    width: 100%;
    margin: 0.5rem 0 1rem 0;
    text-decoration: none;
    color: #federation-ff7a1f;
}


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

@media screen and (max-width: 768px) {
    .federation-mainContainer {
        width: 70vw;
    }
}

/* ============================================================
   ALTERNANCE
   ============================================================ */
.alternance-mainContainer {
    position: relative;
    margin: 5rem 0 0 0;
}

.alternance-mainContainer p {
    font-family: Raleway;
}

.alternance-mainContainer video {
    border-radius: 2rem;
    box-shadow: 0 2px 10px 2px #888888;
}

.alternance-topSectionContainer {
    margin: 0 0 5rem 0;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.alternance-topSectionContainer h2 {
    font-family: ClaireHand;
    font-size: 2rem;
    font-weight: bold;
    color: #22344d;
}

.alternance-topSectionContainer h3 {
    font-family: Raleway;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

.alternance-topSectionContainer video {
    margin: 0 0 0 5rem;
}

.alternance-alternanceTextContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.alternance-alternanceTextContainer p {
    width: 60%;
}

.alternance-textContainer {
    width: 50%;
}

.alternance-bottomSectionContainer {
    margin: 2rem 0 5rem 0;
}

.alternance-bottomSectionContainer h2 {
    font-family: ClaireHand;
    font-size: 2rem;
    font-weight: 100;
    color: #22344d;
}

.alternance-bottomSectionContainer p {
    margin: 0 0 3rem 0;
}

.alternance-bottomSectionContainer video {
    margin: 0 1rem;
}

.alternance-videoThumbnail {
    border-radius: 2rem;
    box-shadow: 0 2px 10px 2px #888888;
    margin: 1rem;
    background-position: center;
    background-size: cover;
}

.alternance-videoThumbnail:hover {
    cursor: pointer;
}

.alternance-bottomVideosContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

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

    .alternance-topSectionContainer {
        flex-direction: column;
    }

    .alternance-topSectionContainer video {
        margin: 1rem 0;
    }

    .alternance-textContainer {
        width: 90%;
    }

    .alternance-textContainer p {
        text-align: center !important;
    }

    .alternance-bottomSectionContainer p {
        text-align: center;
        width: 100%;
    }

    .alternance-bottomSectionContainer {
        padding: 0 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .alternance-bottomSectionContainer video {
        margin: 2rem 0;
    }
}

/* ============================================================
   INTROTEXT
   ============================================================ */
.introtext-mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 5rem;
}

.introtext-mainLogo {
    width: 32rem;
    height: auto;
    margin: 2rem 0;
}

.introtext-mainContainer button {
    color: white;
    background-color: #introtext-f6505c;
    display: flex;
    margin: 1rem 0;
}

.introtext-mainContainer p {
    font-family: Raleway;
    padding: 0 3rem;
    margin-bottom: 0;
    max-width: 80vw;
}

@media screen and (max-width: 768px) {
    .introtext-mainContainer {
        margin: 2rem 0 5rem;
    }

    .introtext-mainContainer img {
        width: 90%;
    }
}

/* ============================================================
   JOBS
   ============================================================ */
.jobs-mainContainer {
    position: relative;
    margin: 8rem 0;
}

.jobs-jobContainer {
    display: flex;
    justify-content: space-evenly;
}

.jobs-jobCardContainer {
    position: relative;
    width: 26vw;
    padding: 0.5rem 0.25rem 2rem;
    box-shadow: 0 2px 7px 0px #888888;
    border-radius: 0.5rem;
    align-self: center;
    background-color: white;
}

.jobs-jobCardContainer h1 {
    font-family: Raleway;
    font-size: 1.2rem;
    margin: 0 0 0.25rem 0;
}

.jobs-jobCardContainer h4 {
    margin: 0;
    font-family: ClaireHand;
    font-weight: 100;
    font-size: 1.5rem;
}

.jobs-jobCardContainer p {
    font-family: Raleway;
    font-weight: normal;
    padding: 0 1rem;
}

.jobs-jobCardContainer img {
    position: absolute;
    width: 10rem;
}

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

@media screen and (max-width: 768px) {
    .jobs-jobContainer {
        flex-wrap: wrap;
    }

    .jobs-jobCardContainer {
        width: 80vw;
        margin: 2rem 0;
    }
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners-mainContainer {
    margin: 1rem 0;
}

.partners-mainContainer h1 {
    font-family: ClaireHand;
    color: rgb(34, 52, 77);
    font-weight: 100;
}

.partners-logoRow {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
}

.partners-initiativeLogo {
    width: 25vw;
    height: auto;
    margin: 0 5rem;
    transition: transform 0.8s ease-in-out;
}

.partners-initiativeLogo:hover {
    transform: scale(1.1);
}

.partners-partnerLogo {
    height: auto;
    width: 16vw;
    transition: transform 0.5s ease-in-out;
}

.partners-partnerLogo:hover {
    transform: scale(1.5);
}

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

@media screen and (max-width: 768px) {
    .partners-logoRow {
        flex-wrap: wrap;
    }

    .partners-logoRow img {
        margin: 1rem;
    }

    .partners-partnerLogo {
        width: 6rem;
    }
}

/* ============================================================
   PROS
   ============================================================ */
.pros-mainContainer {
    position: relative;
    width: 100%;
}

.pros-mainContainer h1 {
    font-family: ClaireHand;
    color: #pros-f6505c;
}

.pros-mainContainer p {
    font-family: Raleway;
}

.pros-textContainer {
    padding: 0 2rem;
}

.pros-videoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s linear;
}

.pros-arrowContainer {
    position: absolute;
    left: 0;
    top: 58%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.pros-arrowContainer img {
    width: 1rem;
    height: auto;
    margin: 0 0.5rem;
    padding: 0.5rem;
    transition: opacity 0.3s linear;
    border-radius: 1rem;
}

.pros-arrowContainer img:hover {
    cursor: pointer;
    opacity: 0.7;
}

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

@media screen and (max-width: 768px) {
    .pros-videoContainer {
        flex-wrap: wrap;
    }

}

/* ============================================================
   HOME
   ============================================================ */
.home-mainContainer {
    position: relative;
    text-align: center;
    background-repeat: repeat-y;
}

.home-introContainer {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.home-introImage {
    position: relative;
    width: 100%;
    height: auto;
}

.home-introTextContainer {
    position: absolute;
    top: 30%;
    left: 60%;
    width: 38%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.home-introTextContainer h2 {
    color: white;
    text-align: left;
    font-family: ClaireHand;
    font-weight: 100;
    font-size: 2rem;
}

.home-introTextContainer button {
    background-color: #home-ff7a1f;
    color: white;
}

#home-watermark {
    position: absolute;
    top: 8rem;
    right: 2rem;
    width: 10rem;
    height: auto;
}

#home-splashGreen {
    position: relative;
    width: 10rem;
    height: auto;
    left: 5rem;
    bottom: 12rem;
    transform: rotate(315deg);
}

.home-presidentContainer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.home-presidentContainer img {
    width: 60vw;
    height: auto;
}

.home-introButton {
    position: relative;
    display: flex;
    align-items: flex-end;
}

@media screen and (min-width: 1800px) {
    .home-introTextContainer {
        width: 30%;
    }

    .home-introTextContainer h2 {
        font-size: 3rem;
    }

    #home-watermark {
        width: 12rem;
        top: unset;
        bottom: -5rem;
    }

    #home-splashGreen {
        width: 15rem;
        bottom: 15rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    #home-watermark {
        width: 5rem;
    }

    #home-splashGreen {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    #home-watermark {
        top: -5rem;
        width: 5rem;
    }

    #home-splashGreen {
        display: none;
    }

    .home-introTextContainer {
        position: relative;
        width: 100%;
        left: 0;
        text-align: center;
        align-items: center;
    }

    .home-introTextContainer h2 {
        color: #22344d;
        text-align: center;
    }

    .home-presidentContainer img {
        width: 99vw;
    }

    .home-introButton {
        align-items: center;
    }
}

/* ============================================================
   FORMATIONS
   ============================================================ */
.formations-mainContainer {
    position: relative;
    top: 20vh;
}

.formations-mainContainer h2 {
    font-size: 2rem;
    font-family: ClaireHand;
    color: #35d6a5;
}

.formations-mainContainer p {
    font-family: Raleway;
}

.formations-headerBackground {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
}

.formations-introContainer {
    position: relative;
    text-align: right;
    display: flex;
    flex-direction: column;
    width: 90%;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

.formations-introContainer h1 {
    font-family: ClaireHand;
    font-weight: 100;
    line-height: 3rem;
    color: #22344d;
    width: 50vh;
}

.formations-introContainer button {
    color: white;
    background-color: #formations-ff7a1f;
    width: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.formations-goodToKnowContainer {
    position: relative;
    margin: 10rem 0 0 0;
}

.formations-goodToKnowContainer h2 {
    text-align: center;
    color: #33aea5;
    font-weight: 100;
    font-size: 2.5rem;
}

.formations-goodToKnowContainer p {
    text-align: center;
}

.formations-highLightSplash {
    width: 50vw;
    height: auto;
}

.formations-formationsContainer {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.formations-formationsContainer h2 {
    width: 100%;
    font-weight: 100;
}

.formations-formationsContainer h5 {
    width: 100%;
    font-size: 2rem;
    font-family: ClaireHand;
    font-weight: 100;
    color: #22344d;
    margin: 0 0 5rem 0;
}

.formations-threeDots {
    position: relative;
    width: 8rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 2rem 0;
}

.formations-splashOrange {
    position: absolute;
    width: 12rem !important;
    transform: rotate(-45deg);
    right: 30%;
    top: 10rem;
}

.formations-splashGreen {
    position: absolute;
    width: 12rem;
    transform: rotate(100deg);
    left: 1rem;
    top: 15rem;
}

.formations-singleFormationContainer {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem;
}

.formations-offersContainer {
    width: 55vw;
    margin: 0 auto;
    text-align: center;
}

.formations-offersContainer h3 {
    font-size: 2rem;
    font-weight: 100;
    color: #formations-ff7a1f;
    font-family: ClaireHand;
}

.formations-offerLogoContainer {
    display: flex;
    justify-content: center;
    margin: 5rem 0;
}

.formations-offerLogoContainer img {
    width: 25vw;
    height: auto;
    margin: 0 2rem;
}

.formations-highlightedVideoContainer {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.formations-highlightedTextContainer {
    width: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

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

    .formations-splashOrange {
        display: none;
    }

    .formations-splashGreen {
        display: none;
    }

    .formations-highLightSplash {
        width: 99vw;
    }

    .formations-offerLogoContainer img {
        width: 40vw;
        margin: 0 10px;
    }

    .formations-introContainer {
        width: 100%;
        align-items: center;
    }

    .formations-introContainer h1 {
        text-align: center;
        width: 90%;
    }

    .formations-mainContainer p {
        padding: 0 1rem;
        text-align: center;
    }

    .formations-highlightedVideoContainer p {
        text-align: left !important;
        padding: 0 !important;
    }

    .formations-highlightedTextContainer {
        display: none;
    }

    .formations-formationsContainer h5 {
        margin: 0.5rem 0 2rem;
    }

    .formations-offersContainer {
        width: 80vw;
    }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-mainContainer {
    position: relative;
}

.contact-headerContainer {
    overflow: hidden;
    position: relative;
}

.contact-headerFillerTextContainer {
    position: relative;
    height: 32rem;
    width: 100%;
    background-color: #22344d;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
}

.contact-headerFillerTextContainer h2 {
    font-size: 2rem;
    font-family: ClaireHand;
    font-weight: 100;
    color: white;
    padding: 0 3rem;
}

.contact-headerFillerTextContainer h3 {
    font-size: 1.2rem;
    font-family: ClaireHand;
    font-weight: 100;
    color: white;
    padding: 0 3rem;
}

.contact-headerBackground {
    height: auto;
    width: 101%;
    left: -1%;
    position: relative;
}

.contact-socialMediaIconsContainer {
    padding: 0 1rem;
    width: 100%;
}

.contact-socialMediaIconsContainer img {
    width: 5rem;
    transition: opacity 0.3s ease-in-out;
}

.contact-socialMediaIconsContainer img:hover {
    opacity: 0.5;
}

.contact-splashImage {
    position: absolute;
    width: 10rem;
}

#contact-splashOrange {
    right: 10rem;
    transform: rotate(-45deg);
}

#contact-splashBlue {
    left: 5rem;
    bottom: 15rem;
    transform: rotate(-80deg);
}

.contact-socialCallToActionContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.contact-socialCallToActionContainer h4 {
    font-family: ClaireHand;
    font-weight: 100;
    font-size: 2rem;
    text-align: center;
    color: #contact-fe7a1f;

}

.contact-bigSocialMediaIcons {
    width: 10rem;
    transition: transform 0.3s linear;
}

.contact-bigSocialMediaIcons:hover {
    transform: scale(1.1);
}

.contact-orangeArrow {
    position: relative;
    width: 4rem;
    bottom: 2rem;
    left: 3rem;
}

@media screen and (max-width: 768px) {
    .contact-headerFillerTextContainer {
        height: 30vh;
    }
    .contact-headerFillerTextContainer h2 {
        display: none;
        padding: 0;
    }

    .contact-mainContainer {
        overflow-x: hidden;
    }

    #contact-splashOrange {
        right: -3rem;
    }

    #contact-splashBlue {
        left: -3rem;
    }

    .contact-bigSocialMediaIcons {
        width: 5rem;
    }

    .contact-orangeArrow {
        display: none;
    }

    .contact-socialCallToActionContainer {
        flex-direction: column-reverse;
        align-items: center;
    }
}

/* ============================================================
   PARTNERPAGE
   ============================================================ */
.partnerpage-headerBackground {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
}

.partnerpage-mainContainer {
    position: relative;
    top: 22vh;
}

.partnerpage-introTextContanier {
    padding: 0 5rem;
    font-family: ClaireHand;
    color: white;
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.partnerpage-introTextContanier h1 {
    width: 50vw;
}


.partnerpage-infoContainer {
    margin: 5rem 0;
}

.partnerpage-tmtaLogo {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    width: 50vw;
}

.partnerpage-singleInfoContainer {
    position: relative;
    margin: 2rem 0;
    padding: 0 15rem;
}

.partnerpage-singleInfoContainer h3 {
    font-size: 2rem;
    font-family: ClaireHand;
    color: #partnerpage-ff7a1f;
    font-weight: lighter;
}

.partnerpage-president {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    width: 70vw;
}

.partnerpage-initiativeContainer {
    text-align: center;
}

.partnerpage-initiativeContainer h2 {
    font-size: 1.8rem;
    font-family: ClaireHand;
    color: #22344d
}

.partnerpage-initiativeLogoContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.partnerpage-initiativeLogoContainer img {
    align-self: center;
    width: 22vw;
    height: auto;
    margin: 0 5rem;
}

.partnerpage-federationContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 3rem 0 20rem 0;
    text-align: center;
}

.partnerpage-federationContainer h2 {
    font-size: 1.6rem;
    font-family: ClaireHand;
    color: #22344d;
}

.partnerpage-federationContainer p {
    padding: 0 2rem;
}

.partnerpage-splashOrange {
    position: absolute;
    width: 12rem;
    left: -3rem;
    top: 0;
    transform: rotate(-45deg);
    z-index: -1;
}

.partnerpage-splashGreen {
    position: absolute;
    width: 12rem;
    right: 0;
    bottom: 10rem;
    transform: rotate(160deg);
    z-index: -1;
}

@media screen and (min-width: 1900px) {
    .partnerpage-tmtaLogo {
        padding: 6rem 0 25rem 0 !important;
    }
}

@media screen and (min-width: 1200px) {
    .partnerpage-tmtaLogo {
        padding: 6rem 0 15rem 0;
    }
}

@media screen and (max-width: 768px) {
    .partnerpage-splashOrange {
        top: 8.5rem;
    }

    .partnerpage-introTextContanier {
        color: #007ec4;
        padding: 1rem 2rem 0;
        text-align: center;
        justify-content: center;
    }

    .partnerpage-introTextContanier h1 {
        width: 90%;
    }

    .partnerpage-tmtaLogo {
        width: 80vw;
        padding-top: 2rem;
    }

    .partnerpage-singleInfoContainer {
        padding: 0 2rem;
    }

    .partnerpage-president {
        width: 99vw;
    }

    .partnerpage-initiativeLogoContainer img {
        width: 35vw;
        margin: 2rem;
    }

    .partnerpage-federationContainer {
        padding: 0 2rem;
    }
}