/* 

    File: main.css
    Version: 1.1.5
    Author: NEUE
    Last update: 15.01.2020

    Before reading/coding: This style sheet has been written with the "mobile first" logic. It means that your code is firstly for mobiles.
                           Please use the responsive rules to custom other medias.

                           Animation has not yet been implemented but could be used with the external library
                           Flex Grid has been externalized in css/lib/flex-grid.css

    0) Reset CSS
        0.1) Normalize by Necolas
        0.2) Custom Reset

    1) General Style

    2) Layout Style
        2.1) Header
        2.2) Global Elements
        2.3) Footer

    3) Helpers
        3.1) Spacing
        3.2) Wrappers
        3.3) Container & Contents
        3.4) Text
        3.5) Colors & Areas
        3.6) Other
        3.7) Custom

    4) Icons
        4.1) Icomoon

    5) Content
        5.1) Sections
        5.2) Widgets
        5.3) HomePage
        5.4) Page Content
        5.5) Page 404
        5.6) Page single article
        5.x) X
        custom as you need

    6) Responsive
        6.1) Small media (481px +)
        6.2) Medium media (721px +)
        6.3) Large media (993px +)
        6.4) Huge media (1201px +)
        6.5) Custom media

    7) Overriden area

    8) Dev / Test

/*************************************************************************

    0) Reset CSS

*************************************************************************/

    /*************************************************************************
        0.1) Normalize by Necolas
    *************************************************************************/

    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}[hidden]{display:none}

    /*************************************************************************
        0.2) Custom reset
    *************************************************************************/

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    html,
    body {
        -webkit-text-size-adjust: 100%;
           -moz-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
             -o-text-size-adjust: 100%;
                text-size-adjust: 100%;
    }

    html {
        height: 100%;
        overflow-x: hidden;
        margin-top: 0 !important;
    }

    body {
        padding: 0;
        min-height: 100vh;
        font-size: 1rem;
        line-height: 1.5em;
        text-rendering: optimizeLegibility;
        speak: none;
        overflow-x: hidden;
        font-display: fallback; /* 20.03.2019 - only for FireFox, Chrome, Chorme Android, Samsung Internet, Safari , iOS Safari and Opera */
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transition: .3s ease;
           -moz-transition: .3s ease;
            -ms-transition: .3s ease;
             -o-transition: .3s ease;
                transition: .3s ease;
    }

    h1:first-child,
    h2:first-child,
    h3:first-child,
    h4:first-child,
    h5:first-child,
    h6:first-child,
    p:first-child ,
    li:first-child {
        margin-top: 0;
        padding-top: 0;
    }

    h1:last-child,
    h2:last-child,
    h3:last-child,
    h4:last-child,
    h5:last-child,
    h6:last-child,
    p:last-child,
    li:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    :empty,
    ::empty {
        display: none;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    textarea {
        resize: vertical;
    }

    label[for],
    a[href],
    button,
    .button,
    .button-2 {
        cursor: pointer;
    }

    button {
    	outline: none;
    }

/*************************************************************************

    1) General Style

*************************************************************************/

    html {
        font-size: 14px;
    }

    body {
        font-size: 1rem;
        color: #000;
        background-color: #fff;
        font-family: aktiv-grotesk, sans-serif;
    }

    /* DOM elements > Heading tag */
    
    /* to simulate heading tags style use the class .as-h{x} (ex. .as-h1) */

    h1,
    .as-h1 {
        font-size: 3.4rem;
        margin-bottom: 2rem;
    }

    h2,
    .as-h2 {
        font-size: 1.79rem;
        margin: 2rem 0 2rem 0;
        font-weight: 900;
        font-style: normal;
        display: block;
        line-height: 1em;
    }

    h3,
    .as-h3 {
        font-size: 1.29rem;
        margin: 1rem 0;
        font-weight: 200;
        font-family: aktiv-grotesk-thin, sans-serif;
    }

    h4,
    .as-h4 {
        font-size: 1.4rem;
        margin: 1rem 0;
    }

    h5,
    .as-h5 {
        font-weight: 400;
        font-size: 1rem;
        margin: 1rem 0 0.5rem 0;
    }

    h1,
    .as-h1,
    h2,
    .as-h2,
    h3,
    .as-h3,
    h4,
    .as-h4,
    h5,
    .as-h5 {
        line-height: 1em;
        position: relative;
    }

    .as-h1,
    .as-h2,
    .as-h3,
    .as-h4 {
        font-weight: 700;
    }

    [class^="as-h"],
    [class*="as-h"] {
    	display: block;
    }

    /* DOM elements > form */

    input[type='number'] {
        -moz-appearance:textfield;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    /* Placeholder color */
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: initial;
    }

    ::-moz-placeholder { /* Firefox 19+ */
        color: initial;
    }

    :-ms-input-placeholder { /* IE 10+ */
        color: initial;
    }

    :-moz-placeholder { /* Firefox 18- */
        color: initial;
    }

    /* DOM elements > Other elements */

    address {
        font-style: normal;
    }

    /* DOM elements > link & button */

        /* DOM elements > link & button > Button */

        button {
            border: none;
            height: 3rem;
            width: 3rem;
        }

        button,
        .menu-sm > a,
        .button,
        .button-2,
        .button-icon {
            position: relative;
            padding: 1rem;
            cursor: pointer;
            overflow: hidden;
            display: inline-block;
            background: #078097;
        }

        .menu-sm > a::before {

            z-index: 2;

        }

        button:after,
        .menu-sm > a::after,
        .button:after,
        .button-2:after,
        .button-icon:after {
            content: "";
            top: 100%;
            left: 0;
            background-color: #3dadc4;
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 1;
        }

        button:not([data-action]).active:after,
        button:not([data-action]):hover:after,
        button[data-action].active:hover:after,
        .menu-sm > a:hover::after,
        .button:not([data-action]):hover:after,
        .button[data-action].active:hover:after,
        .button-2:not([data-action]):hover:after,
        .button-2[data-action].active:hover:after,
        .button-icon:hover:after {
            top: 0;
        }

        button > span,
        .button > span,
        .button-2 > span,
        .button-icon > span {
            z-index: 2;
            color: #fff;
            position: relative;
        }

        button[data-action]:not(.active) {
            cursor: not-allowed;
        }

        .button-2 {
        	z-index: 0;
            background-color: transparent;
            box-shadow: inset 0 0 1px 1px #3dadc4;
            color: #3dadc4;
            text-transform: uppercase;
            padding: 1rem 3rem;
        }

        .button-2 > span {
            color: #3dadc4 !important;
        }

        .button-2:hover {
            color: #fff;
        }

        .button-2:hover > span {
            color: #fff !important;
        }

        .button-2:after {
            z-index: -1;
        }

        .button-icon > span {
            width: 100%;
            padding-right: 3rem;
        }

        .button-icon:before {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
               -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                 -o-transform: translateY(-50%);
                    transform: translateY(-50%);
            color: #fff;
            z-index: 10;
            right: 1rem;
        }

        /* DOM elements > link & button > Link */

        .link {
            position: relative;
        }

        .link:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            left: 0;
            bottom: -0.5em;
            opacity: 0;
            background-color: #000;
            -webkit-transition: .3s ease-out;
               -moz-transition: .3s ease-out;
                -ms-transition: .3s ease-out;
                 -o-transition: .3s ease-out;
                    transition: .3s ease-out;
        }

        .link:hover:after {
            bottom: 0;
            opacity: 1;
        }

    /* DOM elements > content */

    p {
        margin: 1em;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    code {
        background-color: #3dadc4;
        padding: 0.5rem;
        margin-right: 0.5rem;
        color: #fff;
        border-radius: 3px;
    }

    ul > li,
    ol > li {
        margin-bottom: 1rem;
    }

    .vce-text-block-wrapper > ul > li,
    .vce-text-block-wrapper > ol > li {
        border-bottom: 1px solid rgba(61, 173, 196, .2);
        padding-bottom: 1rem !important;
    }

    .vce-text-block-wrapper > ul > li:before {
        position: absolute;
        top: 0.75rem !important;
    }

    /* Builder */

     .vce-row-content > .vce-col {
        margin-right: 0rem !important;
    }

    /* Transition */

    body,
    .button-2,
    button:after,
    .button:after,
    .button-icon:after,
    .button-2:after,
    body > header .main-menu-nav > div > nav > div:last-child > a,
    .main-menu,
    .main-menu .main-menu-container nav li a,
    .main-menu .main-menu-container nav li a:after,
    body > header .main-search-area,
    body > header .search-trigger,
    .lift,
    .lift > [class^="icon-"],
    .link-box,
    .link-box[href]:before,
    .external-link-widget,
    .widget-highlight-box .after-link:after,
    .external-link-widget,
    .widget-highlight-box .after-link:after,
    .research-container ul[data-type="page"] a:hover,
    .research-container [data-type="post"] article .wrapper .article-bg-img,
    .research-container,
    .close:after,
    .close:before,
    .menu-sm > a::after,
    body > header nav .menu-sm > a:hover,
    body > header nav .menu-sm > button:hover  {
        -webkit-transition: .3s ease;
           -moz-transition: .3s ease;
            -ms-transition: .3s ease;
             -o-transition: .3s ease;
                transition: .3s ease;
    }

/*************************************************************************

    2) Layout Style

*************************************************************************/

    html.init {
        opacity: 1 !important;
    }

    body.init {
        opacity: 1;
    }

    body > header,
    body > main,
    .sct-header-slider,
    body > footer {
        opacity: 0;
    }

    html.init > body > header,
    html.init > body > main,
    html.init > body > main > .sct-header-slider,
    html.init > body > footer {
        opacity: 1;
        -webkit-transition: .7s ease;
           -moz-transition: .7s ease;
            -ms-transition: .7s ease;
             -o-transition: .7s ease;
                transition: .7s ease;
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }

    /*************************************************************************
        2.1) Header
    *************************************************************************/

    body > header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 100;
        overflow: hidden;
        -webkit-transform: translateY(6rem);
           -moz-transform: translateY(6rem);
            -ms-transform: translateY(6rem);
             -o-transform: translateY(6rem);
                transform: translateY(6rem);
    }

    /* Main Menu Bar */

    body > header .main-menu-nav {
        height: 90px;
    }

    body > header .main-menu-nav .main-logo {
        width: 50px;
        max-width: 40%;
        margin-right: 2rem;
    }

    body > header .main-menu-nav > div {
        align-items: center;
        padding: 2rem;
        height: 100%;
        justify-content: space-between;
    }

    body > header .main-menu-nav > div > nav > div {
        justify-content: flex-end;
        align-items: center;
    }

    body > header .main-menu-nav > div > nav > div:first-child {
        margin-bottom: 2rem; 
    }

    body > header .main-menu-nav > div > nav > div:first-child > a:not(:last-child),
    body > header .main-menu-nav > div > nav > div:first-child > button:not(:last-child),
    body > header .main-menu-nav > div > nav > div:first-child nav.menu-sm .search-trigger {
        display: inline-block;
        margin-right: 2rem;
    }

    body > header .main-menu-nav > div > nav > div:last-child {
        font-size: 1.125rem;
        text-align: center;
    }

    body > header .main-menu-nav > div > nav > div:last-child > a {
        position: relative;
        font-size: 1.25rem;
    }

    body > header .main-menu-nav > div > nav > div:last-child > a:not(:last-child) {
        padding-right: 2rem;
        margin-right: 2rem;
    }

    body > header .main-menu-nav > div > nav > div:last-child > a:not(:last-child):after {
        content: "|";
        position: absolute;
        right: 0;
        color: initial;
    }

    body .menu-sm {

        display: flex;
        gap: 0.3rem;

    }

    body .menu-sm > a,
    body .menu-sm > button {

        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #078097;
        width: 3rem;
        height: 3rem;

    }

    body > header .menu-sm > button:not(:last-child),
    body > footer .menu-sm > button:not(:last-child) {

        margin-right: .3rem;

    }

    /* Main Menu */

    .main-menu {
        left: 0;
        z-index: 50;
        min-height: 100vh;
        height: calc(100vh - 90px);
        width: 100%;
        position: fixed;
        background-color: rgba(255, 255, 255, 0.4);
        top: 0;
        -webkit-transform: translateY(-100vh);
           -moz-transform: translateY(-100vh);
            -ms-transform: translateY(-100vh);
             -o-transform: translateY(-100vh);
                transform: translateY(-100vh);
    }

    body.menu-active .main-menu {
        top: 90px;
        cursor: pointer;
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }

    .main-menu > div {
        justify-content: flex-start;
        align-items: flex-start;
        color: #d129e0;
    } 

    .main-menu .main-menu-container {
        height: auto;
        width: 100%;
        min-height: 100px;
        cursor: default;
        -webkit-transition: background .3s ease;
           -moz-transition: background .3s ease;
             -o-transition: background .3s ease;
                transition: background .3s ease;
    }

    .main-menu .main-menu-container nav {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        padding: 8vh 2rem 8vh 0;
    }

    .main-menu .main-menu-container nav li:not(:last-child) {
        margin-bottom: 1rem;
    }

    .main-menu .main-menu-container nav li a {
        position: relative;
        line-height: 2.5rem;
    }

    .main-menu .main-menu-container nav li a.active,
    .main-menu .main-menu-container nav li a:hover {
        color: #078097;
    }

    /* Search area */

    body > header .main-search-area {
        position: absolute;
        left: 0;
        cursor: default;
        top: -100%;
        background-color: #078097;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body > header .main-search-area > .wrapper {
        max-width: 1600px;
        padding: 0 3rem;
    }

    body > header .main-search-area .icon-search {
        cursor: default;
    }

    body.search-active {
        cursor: pointer;
    }

    body.search-active > header .search-trigger {
        -webkit-transform: translateY(28px);
           -moz-transform: translateY(28px);
            -ms-transform: translateY(28px);
             -o-transform: translateY(28px);
                transform: translateY(28px);
    }

    body.search-active > header .main-search-area {
        top: 0;
    }

    body > header .main-search-area {
        width: 100%;
    }

    body > header .main-search-area > .wrapper {
    	max-width: 1600px;
    	padding: 0 3rem;
    	margin: auto;
	}

    body > header .main-search-area > div.wrapper {
        width: 100%;
        height: 3rem;
    }

    body > header .main-search-area > div > form {
        width: 100%;
        height: 100%;
    }

    body > header .main-search-area > div input {
        height: 100%;
        width: 100%;
        outline: none;
        border: none;
        padding: 0.5rem 1rem;
        font-size: 1.56rem;
    }

    body .menu-sm a {
        z-index: 2;
        position: relative;
        color: #fff;
    }

    body.search-active > header nav .menu-sm a {
        display: none;
    }

    /* Header Slider */

    .news-header-slider-articles,
    .news-header-slider-images,
    .news-header-slider-content {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .news-header-slider-articles > article,
    .news-header-slider-images > div,
    .news-header-slider-content > article {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        z-index: 1;
        height: 100%;
        width: 100%;
        -webkit-transition: -webkit-transform .3s ease, left .3s ease, top .3s ease;
           -moz-transition: -moz-transform .3s ease, left .3s ease, top .3s ease;
            -ms-transition: -ms-transform .3s ease, left .3s ease, top .3s ease;
             -o-transition: -o-transform .3s ease, left .3s ease, top .3s ease;
                transition: transform .3s ease, left .3s ease, top .3s ease;
    }

    .news-header-slider-images > div,
    .news-header-slider-content > article {
        overflow: hidden;
        -webkit-transform: translateX(10rem);
           -moz-transform: translateX(10rem);
            -ms-transform: translateX(10rem);
             -o-transform: translateX(10rem);
                transform: translateX(10rem);
    }

    .news-header-slider-articles > article {
        -webkit-transform: translateY(10rem);
           -moz-transform: translateY(10rem);
            -ms-transform: translateY(10rem);
             -o-transform: translateY(10rem);
                transform: translateY(10rem);
    }

    .news-header-slider-articles > article.init,
    .news-header-slider-images > div.init,
    .news-header-slider-content > article.init {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
           -moz-transform: translateX(0) translateY(0);
            -ms-transform: translateX(0) translateY(0);
             -o-transform: translateX(0) translateY(0);
                transform: translateX(0) translateY(0);
    }

    .news-header-slider-content > article.init {
        max-width: 500px !important;
    }

    .news-header-slider-content > article .as-h2 {
        width: 100%;
        word-break: break-word;
        hyphens: initial;
    }

    /*************************************************************************
        2.2) Global Elements
    *************************************************************************/

    /* Global Elements > Main */

    body > main {
        padding-top: 90px;
        position: relative;
        -webkit-transform: translateY(-6rem);
           -moz-transform: translateY(-6rem);
            -ms-transform: translateY(-6rem);
             -o-transform: translateY(-6rem);
                transform: translateY(-6rem);
    }

    /* Global Elements > Cookies Banner */

    .cookies-banner {
        background-color: #fff;
        position: fixed;
        top: 100%;
        left: 8rem;
        width: calc(100% - 16rem);
        height: auto;
        max-height: 100vh;
        z-index: 500;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -ms-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        overflow-x: hidden;
        overflow-y: auto;
        visibility: hidden;
    }

    .cookies-banner.active {
        visibility: visible;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .cookies-banner.active.reading {
        top: 0;
        left: 0;
        width: 100%;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .cookies-banner-wrapper {
        padding: 2rem;
    }

    .cookies-banner-wrapper > p {
        text-align: center;
        margin-bottom: 1rem;
    }

    .cookies-banner-wrapper .cookies-buttons {
        width: calc(600px + 2rem);
        margin: auto;
    }

    .cookies-banner .content {
        display: none;
        border-top: 1px solid #fff;
        padding-top: 2rem;
        margin-top: 2rem;
    }

    .cookies-banner .content > div > section,
    .cookies-banner .content > div > footer {
        margin-top: 2rem;
    }

    /* Golbal Elements > Lift */

    .lift {
        background-color: #f7f7f7;
        padding: 1.5rem;
        position: fixed;
        display: flex;
        flex-direction: column;
        bottom: 0;
        left: 0;
        cursor: pointer;
        text-align: center;
        min-width: 40px;
        color: #3dadc4;
        text-transform: uppercase;
        -webkit-transform: translateY(100%);
           -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
             -o-transform: translateY(100%);
                transform: translateY(100%); 
    }

    .lift.active {
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0); 
    }

    /* Global Elements > Logo title */

    .logo-title {
        align-items: flex-start;
    }

    .logo-title > a {
        margin-right: 1rem;
    }

    .logo-title img {
        margin-top: 5px;
    }

    .logo-title h2 {
        font-weight: 400;
        line-height: 1.5em;
        margin-top: 0;
    }

   /* Global Elements > Contact details */

    .contact-details {
        margin-top: 3rem;
    }

    /* Global Elements > Text icon */

    .txt-icon [class^=icon-]:before {
        font-weight: 700;
        color: #078097;
    }

    .txt-icon [class^=icon-],
    .txt-icon [class*=icon-] {
        margin-right: 1rem;
    }

    .linked-sites a.button {
        width: auto;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Global Elements > Linked sites */

    .linked-sites > a {
        color: #fff;
    }

    .linked-sites a > span:last-child {
        margin-left: 2rem;
        justify-content: flex-end;
    }

    .linked-sites a:hover:before {
        right: 0;
    }

    /*************************************************************************
        2.3) Footer
    *************************************************************************/

    body > footer{
        -webkit-transform: translateY(-6rem);
           -moz-transform: translateY(-6rem);
            -ms-transform: translateY(-6rem);
             -o-transform: translateY(-6rem);
                transform: translateY(-6rem);
    }

    body > footer:not(.simple-footer) {
        margin-top: 9rem;
    }

    .txt-icon [class^=icon-]:before,
    .txt-icon [class^=icon-]:before,
    body > footer [class^=icon-]:before,
    body > footer [class*=icon-]:before {
        font-size: 1.5rem;
    }

    body > footer > div.first-footer {
        display: flex;
    }

    body > footer > div.first-footer > div:first-child {
        width: 16.66%;
        min-width: 4rem;
        max-width: 6rem;
        position: relative;
        background-color: #fff;
    }
    
    .lift > [class^="icon-"] {
        display: inline-block;
    }

    .lift > [class^="icon-"]:before {
        font-size: 3rem;
    }
    
    .lift > span:last-child {
        margin-top: 0.25rem;
        display: inline-block;
    }

    .lift:hover > [class^="icon-"] {
        -webkit-transform: translateY(-1rem);
           -moz-transform: translateY(-1rem);
            -ms-transform: translateY(-1rem);
             -o-transform: translateY(-1rem);
                transform: translateY(-1rem);
    }

    body > footer > div.first-footer > div:last-child {
        width: 100%;
        padding: 8rem 4rem 4rem calc(16.66% - 6rem);
        position: relative;
    }
    
    body > footer > div.first-footer > div:last-child > .button {
        width: 3rem;
        height: 3rem;
        color: #fff;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
    }

    body > footer > div.first-footer > div:last-child > .content {
        width: 100%;
        height: 100%;
    }

    body > footer > div.second-footer {
        min-height: 100px;
        color: #fff;
        align-items: center;
    }

    body > footer > div.second-footer > div {
        width: 100%;
    }

    body > footer > div.second-footer > div > a:not(:last-child) {
        margin-right: 2rem;
        display: inline-block;
    }

    body > footer .lift {
        font-size: 1rem;
    }

    .contact-details > div:nth-child(2) > div.flex > div {
        flex-direction: column;
    }

    body > footer .social-media-links {

        position: absolute;

        top: 0;
        left: 0;

        width: fit-content;

    }

    body > footer .social-media-links .menu-sm > button:last-child {

        display: none;
        visibility: hidden;

    }

    body > footer .social-media-links [class*=icon-]:before,
    body > footer .social-media-links [class^=icon-]:before {

        font-size: 1rem;

    }

/*************************************************************************

    3) Helpers
    doc: https://agenceneue.ch/assets/ressources/css-helpers

*************************************************************************/

    /*************************************************************************
        3.1) Spacing
    *************************************************************************/
    
    /* Margin top */

    .out-top-spacing-tiny,
    .inout-v-spacing-tiny,
    .inout-spacing-tiny,
    .out-v-spacing-tiny,
    .out-spacing-tiny {
        margin-top: 1rem;
    }

    .out-top-spacing-small,
    .inout-v-spacing-small,
    .inout-spacing-small,
    .out-v-spacing-small,
    .out-spacing-small {
        margin-top: 2rem;
    }

    .out-top-spacing-medium,
    .inout-v-spacing-medium,
    .inout-spacing-medium,
    .out-v-spacing-medium,
    .out-spacing-medium {
        margin-top: 4rem;
    }

    .out-top-spacing-large,
    .inout-v-spacing-large,
    .inout-spacing-large,
    .out-v-spacing-large,
    .out-spacing-large,
    .out-top-spacing-large-only-desktop,
    .inout-v-spacing-large-only-desktop,
    .inout-spacing-large-only-desktop,
    .out-v-spacing-large-only-desktop,
    .out-spacing-large-only-desktop  {
        margin-top: 5rem;
    }

    .out-top-spacing-huge,
    .inout-v-spacing-huge,
    .inout-spacing-huge,
    .out-v-spacing-huge,
    .out-spacing-huge,
    .out-top-spacing-huge-only-desktop,
    .inout-v-spacing-huge-only-desktop,
    .inout-spacing-huge-only-desktop,
    .out-v-spacing-huge-only-desktop,
    .out-spacing-huge-only-desktop{
        margin-top: 6rem;
    }

    /* Margin bottom */

    .out-bottom-spacing-tiny,
    .inout-v-spacing-tiny,
    .inout-spacing-tiny,
    .out-v-spacing-tiny,
    .out-spacing-tiny {
        margin-bottom: 1rem;
    }

    .out-bottom-spacing-small,
    .inout-v-spacing-small,
    .inout-spacing-small,
    .out-v-spacing-small,
    .out-spacing-small {
        margin-bottom: 2rem;
    }

    .out-bottom-spacing-medium,
    .inout-v-spacing-medium,
    .inout-spacing-medium,
    .out-v-spacing-medium,
    .out-spacing-medium {
        margin-bottom: 4rem;
    }

    .out-bottom-spacing-large,
    .inout-v-spacing-large,
    .inout-spacing-large,
    .out-v-spacing-large,
    .out-spacing-large,
    .out-bottom-spacing-large-only-desktop,
    .inout-v-spacing-large-only-desktop,
    .inout-spacing-large-only-desktop,
    .out-v-spacing-large-only-desktop,
    .out-spacing-large-only-desktop {
        margin-bottom: 5rem;
    }

    .out-bottom-spacing-huge,
    .inout-v-spacing-huge,
    .inout-spacing-huge,
    .out-v-spacing-huge,
    .out-spacing-huge,
    .out-bottom-spacing-huge-only-desktop,
    .inout-v-spacing-huge-only-desktop,
    .inout-spacing-huge-only-desktop,
    .out-v-spacing-huge-only-desktop,
    .out-spacing-huge-only-desktop {
        margin-bottom: 6rem;
    }

    /* Margin Left */

    .out-left-spacing-tiny,
    .inout-h-spacing-tiny,
    .inout-spacing-tiny,
    .out-h-spacing-tiny,
    .out-spacing-tiny {
        margin-left: 1rem;
    }

    .out-left-spacing-small,
    .inout-h-spacing-small,
    .inout-spacing-small,
    .out-h-spacing-small,
    .out-spacing-small {
        margin-left: 2rem;
    }

    .out-left-spacing-medium,
    .inout-h-spacing-medium,
    .inout-spacing-medium,
    .out-h-spacing-medium,
    .out-spacing-medium {
        margin-left: 4rem;
    }

    .out-left-spacing-large,
    .inout-h-spacing-large,
    .inout-spacing-large,
    .out-h-spacing-large,
    .out-spacing-large {
        margin-left: 5rem;
    }

    .out-left-spacing-huge,
    .inout-h-spacing-huge,
    .inout-spacing-huge,
    .out-h-spacing-huge,
    .out-spacing-huge {
        margin-left: 6rem;
    }

    /* Margin Right */

    .out-right-spacing-tiny,
    .inout-h-spacing-tiny,
    .inout-spacing-tiny,
    .out-h-spacing-tiny,
    .out-spacing-tiny {
        margin-right: 1rem;
    }

    .out-right-spacing-small,
    .inout-h-spacing-small,
    .inout-spacing-small,
    .out-h-spacing-small,
    .out-spacing-small {
        margin-right: 2rem;
    }

    .out-right-spacing-medium,
    .inout-h-spacing-medium,
    .inout-spacing-medium,
    .out-h-spacing-medium,
    .out-spacing-medium {
        margin-right: 4rem;
    }

    .out-right-spacing-large,
    .inout-h-spacing-large,
    .inout-spacing-large,
    .out-h-spacing-large,
    .out-spacing-large {
        margin-right: 5rem;
    }

    .out-right-spacing-huge,
    .inout-h-spacing-huge,
    .inout-spacing-huge,
    .out-h-spacing-huge,
    .out-spacing-huge {
        margin-right: 6rem;
    }

    /* Padding Top */

    .in-top-spacing-tiny,
    .inout-v-spacing-tiny,
    .inout-spacing-tiny,
    .in-v-spacing-tiny,
    .in-spacing-tiny {
        padding-top: 1rem;
    }

    .in-top-spacing-small,
    .inout-v-spacing-small,
    .inout-spacing-small,
    .in-v-spacing-small,
    .in-spacing-small {
        padding-top: 2rem;
    }

    .in-top-spacing-medium,
    .inout-v-spacing-medium,
    .inout-spacing-medium,
    .in-v-spacing-medium,
    .in-spacing-medium {
        padding-top: 4rem;
    }

    .in-top-spacing-large,
    .inout-v-spacing-large,
    .inout-spacing-large,
    .in-v-spacing-large,
    .in-spacing-large {
        padding-top: 5rem;
    }

    .in-top-spacing-huge,
    .inout-v-spacing-huge,
    .inout-spacing-huge,
    .in-v-spacing-huge,
    .in-spacing-huge {
        padding-top: 6rem;
    }

    /* Padding Bottom */

    .in-bottom-spacing-tiny,
    .inout-v-spacing-tiny,
    .inout-spacing-tiny,
    .in-v-spacing-tiny,
    .in-spacing-tiny {
        padding-bottom: 1rem;
    }

    .in-bottom-spacing-small,
    .inout-v-spacing-small,
    .inout-spacing-small,
    .in-v-spacing-small,
    .in-spacing-small {
        padding-bottom: 2rem;
    }

    .in-bottom-spacing-medium,
    .inout-v-spacing-medium,
    .inout-spacing-medium,
    .in-v-spacing-medium,
    .in-spacing-medium,
    .in-bottom-spacing-medium-only-desktop,
    .inout-v-spacing-medium-only-desktop,
    .inout-spacing-medium-only-desktop,
    .in-v-spacing-medium-only-desktop,
    .in-spacing-medium-only-desktop {
        padding-bottom: 4rem;
    }

    .in-bottom-spacing-large,
    .inout-v-spacing-large,
    .inout-spacing-large,
    .in-v-spacing-large,
    .in-spacing-large {
        padding-bottom: 5rem;
    }

    .in-bottom-spacing-huge,
    .inout-v-spacing-huge,
    .inout-spacing-huge,
    .in-v-spacing-huge,
    .in-spacing-huge {
        padding-bottom: 6rem;
    }

    /* Padding Left */

    .in-left-spacing-tiny,
    .inout-h-spacing-tiny,
    .inout-spacing-tiny,
    .in-h-spacing-tiny,
    .in-spacing-tiny {
        padding-left: 1rem;
    }

    .in-left-spacing-small,
    .inout-h-spacing-small,
    .inout-spacing-small,
    .in-h-spacing-small,
    .in-spacing-small {
        padding-left: 2rem;
    }

    .in-left-spacing-medium,
    .inout-h-spacing-medium,
    .inout-spacing-medium,
    .in-h-spacing-medium,
    .in-spacing-medium {
        padding-left: 4rem;
    }

    .in-left-spacing-large,
    .inout-h-spacing-large,
    .inout-spacing-large,
    .in-h-spacing-large,
    .in-spacing-large {
        padding-left: 5rem;
    }

    .in-left-spacing-huge,
    .inout-h-spacing-huge,
    .inout-spacing-huge,
    .in-h-spacing-huge,
    .in-spacing-huge {
        padding-left: 6rem;
    }

    /* Padding Right */

    .in-right-spacing-tiny,
    .inout-h-spacing-tiny,
    .inout-spacing-tiny,
    .in-h-spacing-tiny,
    .in-spacing-tiny {
        padding-right: 1rem;
    }

    .in-right-spacing-small,
    .inout-h-spacing-small,
    .inout-spacing-small,
    .in-h-spacing-small,
    .in-spacing-small {
        padding-right: 2rem;
    }

    .in-right-spacing-medium,
    .inout-h-spacing-medium,
    .inout-spacing-medium,
    .in-h-spacing-medium,
    .in-spacing-medium {
        padding-right: 4rem;
    }

    .in-right-spacing-large,
    .inout-h-spacing-large,
    .inout-spacing-large,
    .in-h-spacing-large,
    .in-spacing-large {
        padding-right: 5rem;
    }

    .in-right-spacing-huge,
    .inout-h-spacing-huge,
    .inout-spacing-huge,
    .in-h-spacing-huge,
    .in-spacing-huge {
        padding-right: 6rem;
    }

    /*************************************************************************
        3.2) Wrapper
    *************************************************************************/

    [class^="wrapper"]:not(.vce),
    [class*="-wrapper"]:not(.vce) {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /*************************************************************************
        3.3) Containers & Contents
    *************************************************************************/

    /* Containers & Contents > Contaires */

    [class^="container"],
    [class*="-container"] {
        width: 100%;
        position: relative;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .small-container {
        max-width: 600px;
    }

    .medium-container {
        max-width: 1200px;
    }

    [class^="large-container"],
    [class*="large-container"] {
        max-width: 1400px !important;
    }

    /* Containers & Contents > Content */

    .tiny-content {
        max-width: 300px;
    }

    .small-content {
        max-width: 600px;
    }

    .medium-content {
        max-width: 800px;
    }

    .half-content {
        max-width: 50%;
    }

    .three-quarter-content {
        max-width: 75% !important;
    }

    /* Containers & Contents > Gaps */

    .gap-left-1,
    .container-gap-both-1 {
        padding-left: 8.33% !important;
    }

    .container-gap-both-2,
    .gap-both-2,
    .gap-left-2 {
        padding-left: 16.66% !important;
    }

    .gap-left-3 {
        padding-left: 24.99% !important;
    }
    
    .gap-left-4 {
        padding-left: 33.32% !important;
    }

    .gap-right-1,
    .container-gap-both-1 {
        padding-right: 8.33% !important;
    }

    .container-gap-both-2,
    .gap-both-2,
    .gap-right-2 {
        padding-right: 16.66% !important;
    }
    
    .gap-left-4 {
        padding-left: 33.33% !important;
    }

    .gap-right-4 {
        padding-right: 33.33% !important;
    }

    /*************************************************************************
        3.4) Text
    *************************************************************************/

    .txt-big {
        font-size: 1.5rem;
    }

    .txt-small {
        font-size: 0.75rem
    }

    .txt-left {
        text-align: left;
    }

    .txt-center {
        text-align: center;
    }

    .txt-right {
        text-align: right;
    }

    .txt-upper {
        text-transform: uppercase;
    }

    .txt-lower {
        text-transform: lowercase;
    }

    .txt-reverse {
        direction: rtl;
        unicode-bidi: bidi-override;
    }

    .txt-medium-size {
        font-size: 1.25rem;
    }

    .txt-large-size {
        font-size: 1.56rem;
        font-weight: 900;
        line-height: 2rem;
    }

    .txt-huge-size {
        font-size: 8.13rem;
    }

    /*************************************************************************
        3.5) Colors & Areas
    *************************************************************************/
    
    /* Colors & Areas > Colors */

        .border-top {
        	border-top: 1px solid #9fd2dc;
        }

  		.border-bottom {
  			border-bottom: 1px solid #9fd2dc;
  		}

        .border-right {
            border-right: 1px solid #9fd2dc;
        }

        /* Colors & Areas > Colors > White */

        .white {
            color: white;
        }

        .bg-white,
        .bg-white-a:after {
            background-color: white;
        }

        /* Colors & Areas > Colors > Lighter blue */
        
        .lighter-blue {
            color: #edf8fa;
        }

        .bg-lighter-blue {
            background-color: #edf8fa;
        }

        /* Colors & Areas > Colors > Blue */

        .blue,
        .blue-all-a *:after {
            color: #a3dae5;
        }

        .bg-blue {
            background-color: #a3dae5;
        }

        /* Colors & Areas > Colors > Light blue */

        .light-blue {
            color: #3dadc4;
        }

        .bg-light-blue {
            background-color: #3dadc4;
        }

        /* Colors & Areas > Colors > Dark blue */

        .dark-blue {
            color: #078097;
        }

        .bg-dark-blue,
        .bg-dark-blue-h:hover {
            background-color: #078097;
        }

        /* Colors & Areas > Colors > Light Grey */

        .bg-light-grey {
            background-color: #f7f7f7;
        }

        .grey {
            color: #8B8B8B;
        }

    /* Colors & Areas > Areas */

        /* Colors & Areas > Areas > Black */

        .dark-area {
            background-color: #1c1c1c;
            color:  #fff;
        }

        .dark-area .link-box[href]:before {
            background-color: #fff;
        }

        .dark-area .link-box .link-box-button-help-txt {
            color: #fff;
        }

        .dark-area .link-box[href]:hover,
        .dark-area .link-box[href]:hover h2,
        .dark-area .link-box .link-box-button-hover-txt {
            color: #3dadc4;
        }

        /* Colors & Areas > Areas > Light Blue */
        
        .light-blue-area {
            background-color: #3dadc4;
            color: #fff;
        }

        .light-blue-area .button-2 {
            box-shadow: inset 0 0 1px 1px #fff;
            color: #fff;
        }

        .light-blue-area .button {
            margin-right: 1rem;
        }
        
        .light-blue-area .button,
        .light-blue-area .button-2 {
            width: 300px;
            text-align: center;
            text-transform: inherit;
            position: relative;
        }

        .light-blue-area .button:after,
        .light-blue-area .button-2:after {
            background-color: #fff;
        }

        .light-blue-area .button:hover > span,
        .light-blue-area .button-2:hover {
            color: #078097;
        }

        .light-blue-area .button:hover:after,
        .light-blue-area .button-2:hover:after {
            top: 0;
        }

        /* Colors & Areas > Areas > Lighter Blue */
        
        .lighter-blue-area {
            background-color: #edf8fa;
        }

        /* Colors & Areas > Areas > Light Grey */
                
        .light-grey-area {
            background-color: #f6f6f6;
        }

        .light-grey-area .link-box {
            background-color: #fff;
            color: #000;
            height: 12rem;
        }

        .light-grey-area .link-box:hover {
            background-color: #3dadc4;
            color: #fff;
        }

        .light-grey-area .link-box[href]:before {
            background-color: #fff;
        }

        .light-grey-area .link-box .link-box-button-help-txt {
            color: #078097;
        }

        .light-grey-area .link-box[href]:hover,
        .light-grey-area .link-box[href]:hover h2,
        .light-grey-area .link-box .link-box-button-hover-txt {
            color: #fff;
        }

        .light-grey-area .link-box[href]:before {
            background-color: #3dadc4;
        }

    /* Colors & Areas > Chapitres */

        /* Colors & Areas > général */

        body > header .main-menu-nav > div > nav > div:last-child > a.active,
        body > header .main-menu-nav > div > nav > div:last-child > a:hover {
            color: #3dadc4;
        }

        /* Colors & Areas > Chapitre SST */

        .sst-area .txt-highlight,
        .sst-area .dark-area .txt-highlight {
            background-image: linear-gradient(rgba(255, 0, 0, 0) calc(100% - .4em), rgb(214, 234, 245) 0.4em);
        }

        .article-sst span.article-tag:before {
            background-color: #50baf5;
        }

        body > header .main-menu-nav > div > nav > div:last-child > a.active:nth-child(4),
        body > header .main-menu-nav > div > nav > div:last-child > a:nth-child(4):hover {
            color: #50baf5;
        }

        /* Colors & Areas > Chapitre FP */

        .fp-area .txt-highlight,
        .fp-area .dark-area .txt-highlight {
            background-image: linear-gradient(rgba(255, 0, 0, 0) calc(100% - .4em), rgb(222, 242, 216) 0.4em);
        }

        .article-fp span.article-tag:before {
            background-color: #9be286;
        }

        body > header .main-menu-nav > div > nav > div:last-child > a.active:nth-child(3),
        body > header .main-menu-nav > div > nav > div:last-child > a:nth-child(3):hover {
            color: #9be286;
        }

         /* Colors & Areas > Chapitre PP */

        .pp-area .txt-highlight,
        .pp-area .dark-area .txt-highlight {
            background-image: linear-gradient(rgba(255, 0, 0, 0) calc(100% - .4em), rgb(255, 232, 236) 0.4em);
        }

        .article-pp span.article-tag:before {
            background-color: #e86d7f;
        }

        body > header .main-menu-nav > div > nav > div:last-child > a.active:nth-child(2),
        body > header .main-menu-nav > div > nav > div:last-child > a:nth-child(2):hover {
            color: #e86d7f;
        }

         /* Colors & Areas > Chapitre CP */

        .cp-area .txt-highlight,
        .cp-area .dark-area .txt-highlight {
            background-image: linear-gradient(rgba(255, 0, 0, 0) calc(100% - .4em), rgb(223, 224, 248) 0.4em);
        }

        .article-cp span.article-tag:before {
            background-color: #9195ea;
        }

        body > header .main-menu-nav > div > nav > div:last-child > a.active:first-child,
        body > header .main-menu-nav > div > nav > div:last-child > a:first-child:hover {
            color: #9195ea;
        }

    /* Colors & Areas > Métiers horlogerie */

        /* Colors & Areas > Métiers horlogerie > apprentissages */

        .apprentissages .text-box,
        .apprentissages .external-link-widget {
            background-color: #f6f6f6;
            color: #000;
        }

        .apprentissages .external-link-widget:hover a:before {
            color: #fff;
        }

        /* Colors & Areas > Métiers horlogerie > mouvement */

        .mouvement .text-box h3:first-letter,
        .mouvement .external-link-widget a:before,
        .mouvement h4 {  
            color: #FFEA00;
        }

        .mouvement .link-box,
        .mouvement .external-link-widget:hover {
            background-color: #FFEA00;
            color: #000;
        }

        .mouvement .link-box[href]:before,
        .mouvement .link-box .link-box-button {
            background-color: #FBD202;
        }

        /* Colors & Areas > Métiers horlogerie > conception */

        .conception .text-box h3:first-letter,
        .conception .external-link-widget a:before,
        .conception h4 {
            color: #AAEE14;
        }

        .conception .link-box,
        .conception .external-link-widget:hover {
            background-color: #AAEE14;
            color: #000;
        }

        .conception .link-box[href]:before,
        .conception .link-box .link-box-button {
            background-color: #89DE00;
        }

        /* Colors & Areas > Métiers horlogerie > fabrication */

        .fabrication .text-box h3:first-letter,
        .fabrication .external-link-widget a:before,
        .fabrication h4 {
            color: #FF1D06;
        }

        .fabrication .link-box,
        .fabrication .external-link-widget:hover {
            background-color: #FF1D06;
            color: #fff;
        }

        .fabrication .link-box[href]:before,
        .fabrication .link-box .link-box-button {
            background-color: #D10008;
        }

        /* Colors & Areas > Métiers horlogerie > habillage */

        .habillage .text-box h3:first-letter,
        .habillage .external-link-widget a:before,
        .habillage h4 {
            color: #FF11B1;
        }

        .habillage .link-box,
        .habillage .external-link-widget:hover {
            background-color: #FF11B1;
            color: #fff;
        }

        .habillage .link-box[href]:before,
        .habillage .link-box .link-box-button {
            background-color: #DE0089;
        }

        /* Colors & Areas > Métiers horlogerie > decoration */

        .decoration .text-box h3:first-letter,
        .decoration .external-link-widget a:before,
        .decoration h4 {
            color: #02FFFF;
        }

        .decoration .link-box,
        .decoration .external-link-widget:hover {
            background-color: #02FFFF;
            color: #000;
        }

        .decoration .link-box[href]:before,
        .decoration .link-box .link-box-button {
            background-color: #00CFF5;
        }

    /*************************************************************************
        3.6) Other
    *************************************************************************/

    .min-height-blue {
        min-height: 220px;
    }

    .away {
        position: absolute;
        left: -9999px;
        top: -9999px;
        visibility: hidden;
        z-index: -1;
    }

    .toggle-on-click { /* use if toggle on click JS plugin is activated */
        cursor: pointer;
    }

    .no-overflow {
        overflow: hidden;
    }

    .no-overflow-f {
        overflow: hidden !important;
    }

    /* Other > Background Image */

    [class^="bg-img"],
    [class*="bg-img"] {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center; 
    }

    .bg-img-portait {
        background-position-y: 30%;
    }

    .bg-img-parallax {
        background-attachment: fixed;
    }

    /* Other > Transition */

    .no-transition-f {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    /* Other > User interaction */

    .no-select {
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    ul.no-style {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    ul.inline > li {
        display: inline-block;
        margin: 0;
    }

    /*************************************************************************
        3.7) Custom
    *************************************************************************/

    /* CSS helpers comes here */

    /* Custom > .txt-highlight */

    .txt-highlight {
        position: relative;
        overflow: hidden;
        pointer-events: auto;
        display: inline;
        background-repeat: no-repeat;
        background-size: 100% 0%;
        -webkit-transition: background-size 0.9s cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition: background-size 0.9s cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition: background-size 0.9s cubic-bezier(0.77, 0, 0.175, 1);
        transition: background-size 0.9s cubic-bezier(0.77, 0, 0.175, 1);

    }

    .txt-highlight.aos-visible {
        background-size: 100% 100%;
    }

    /* Custom > .img-txt-shadow-right */

    .img-txt-shadow-right .shadow-link-box {
        margin-left: 2rem;
    }

    .img-txt-shadow-right .shadow-link-box > .link-box {
        -webkit-transform: translateX(-2rem);
           -moz-transform: translateX(-2rem);
            -ms-transform: translateX(-2rem);
             -o-transform: translateX(-2rem);
                transform: translateX(-2rem);
    }

    /* Custom > .img-txt-shadow-left */

    .img-txt-shadow-left {
        margin-top: -6rem;
    }

    .img-txt-shadow-left h2 {
        padding-left: 2rem;
    }

 	.pp-area .img-txt-shadow-left {
     	margin-top: 0;
    }

    /* Custom > shadow-link-box */

    .shadow-link-box {
        width: calc(100% - 2rem);
        background-color: #f7f7f7;
        display: flex;
        padding: 2rem 0 4rem 0;
    }

    .shadow-link-box {
        justify-content: flex-start;
        align-items: flex-start;
    }

    /* Custom > .img-txt-shadow-{left/right} */

    .img-txt-shadow-left .link-box {
        -webkit-transform: translateX(2rem);
           -moz-transform: translateX(2rem);
            -ms-transform: translateX(2rem);
             -o-transform: translateX(2rem);
                transform: translateX(2rem);
    }

    .img-txt-shadow-left .shadow-link-box {
        justify-content: flex-end;
    }

    .img-txt-shadow-left .title > .vce-text-block-wrapper {
        display: flex;
        text-align: left;
        justify-content: flex-end;
    }

    .img-txt-shadow-left .title > .vce-text-block-wrapper > h2 {
        max-width: 600px;
    }

    .img-txt-shadow-left.img-up > div.vce-row-content,
    .img-txt-shadow-right.img-up > div.vce-row-content {
        align-items: flex-start;
    }

    /* Custom > img-txt-shadow-{left/right} img-up */

    .img-txt-shadow-left.img-up > div.vce-row-content > .vce-col:last-child,
    .img-txt-shadow-right.img-up > div.vce-row-content > .vce-col:first-child {
        padding-bottom: 4rem;
    }

    .lighter-blue-box {
        padding: 8rem 4rem;
    }   

    /* Custom > flex-items-center */

    .vertical-center > div.vce-row-content {
        align-items: center !important;
    }

    /* Custom > Link box title */

    .link-box-title > div.vce-row-content > div.vce-col:first-child .vce-shortcode-wrapper {
        justify-content: flex-end;
        display: flex;
    }

    /* Custom > Link box */

    .link-box {
        text-align: left;
        padding: 2rem;
        position: relative;
        display: block;
        background-color: #3dadc4;
        color: #fff;
        overflow: hidden;
        max-width: 600px;
        min-width: 100px;
    }

    .link-box > .content > [class^=icon-] + h3 {
        margin-top: 2rem;
    }

    .link-box.padding-big {
        padding: 5rem;
    }

    .link-box[href] {
        padding-bottom: 5rem;
    }

    .link-box[href].padding-big {
        padding-bottom: 7rem;
    }

    .link-box > .content > [class^=icon-] {
        font-size: 4rem;
    }

    .link-box[href]:before {
        content: "";
        width: 120%;
        height: 120%;
        position: absolute;
        bottom: -120%;
        left: -10%;
        z-index: 1;
        background-color: #078097;
    }

    .link-box:hover:before {
        bottom: 0;
    }

    .link-box > .content {
        margin: 0;
        position: relative;
        z-index: 2;
    }

    .link-box .link-box-button {
        width: 3rem;
        height: 3rem;
        overflow: visible;
        background-color: #078097;
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-transition: .3s ease .2s;
           -moz-transition: .3s ease .2s;
            -ms-transition: .3s ease .2s;
             -o-transition: .3s ease .2s;
                transition: .3s ease .2s;
    }

    .link-box .link-box-button:after {
        display: none;
    }

    .link-box:hover .link-box-button {
        right: -2rem;
        opacity: 0;
        -webkit-transition-delay: 0s;
           -moz-transition-delay: 0s;
            -ms-transition-delay: 0s;
             -o-transition-delay: 0s;
                transition-delay: 0s;
    }

    .link-box .link-box-button-help-txt,
    .link-box .link-box-button-hover-txt {
        display: inline-block;
        position: absolute;
        bottom: -2rem;
        right: 1rem;
        z-index: 2;
        color: #fff;
        text-transform: uppercase;
        -webkit-transition: .3s ease .1s;
           -moz-transition: .3s ease .1s;
            -ms-transition: .3s ease .1s;
             -o-transition: .3s ease .1s;
                transition: .3s ease .1s;
    }

    .link-box .link-box-button-help-txt {
        bottom: 1rem;
        color: #fff;
        right: 4rem;
    }

    .link-box:hover .link-box-button-help-txt {
        opacity: 0;
        -webkit-transform: translateX(-3rem);
           -moz-transform: translateX(-3rem);
            -ms-transform: translateX(-3rem);
             -o-transform: translateX(-3rem);
                transform: translateX(-3rem);
    }

    .link-box:hover .link-box-button-hover-txt {
        bottom: 1rem;
    }

    .link-box[href]:hover,
    .link-box[href]:hover h2 {
        color: #fff;
    }

    .link-box[href]:hover .link-box-button {
        background-color: transparent;
    }

    .link-box-button > span {
        position: absolute;
    }

    .link-boxes-grid .link-box {
        min-height: 350px;
    }

    /* Custom > txt-link-box */

    .txt-link-box-left {
        position: relative;
    }

    .txt-link-box-left .link-box,
    .txt-link-box-right .link-box {
        max-width: unset;
        /*width: calc(100% + 4rem);*/
    }

    .txt-link-box-left > div.vce-row-content,
    .txt-link-box-right > div.vce-row-content {
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }

    .txt-link-box-left > div.vce-row-content > div,
    .txt-link-box-right > div.vce-row-content > div {
        margin: 0 !important;
    }

    .txt-link-box-left .link-box {
        margin-left: -4rem;
    }

    /* Custom > Ghost title */

	.ghost-title {
	    text-align: center;
	    position: relative;
	    color: #ffdfcb;
	    position: absolute;
	    width: 100%;
	    text-align: center;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
	       -moz-transform: translateX(-50%);
	        -ms-transform: translateX(-50%);
	         -o-transform: translateX(-50%);
	            transform: translateX(-50%);
	    bottom: -14.8rem;
	    z-index: -1;
	    margin: auto;
	}

	.ghost-title h2 {
	    font-size: 6vw;
        margin-bottom: 0;
	}

    /* Helpers > Helpers > Little hat */

    .little-hat:before,
    .widget-highlight-box > div:first-child:before,
    .sct-info-importante > div > div:last-child > div:before {
        content: "";
        width: 100%;
        left: 0;
        position: absolute;
        height: 1.5rem;
        background-color: #3dadc4;
        max-width: 600px;
    }

    [disabled] {
        cursor: not-allowed;
    }

    .button[disabled] {
        background-color: #ccc;
    }

/*************************************************************************/

/* 4) Icons

/*************************************************************************/

    /*************************************************************************
        4.1) Icommon
    *************************************************************************/

    /* @font-face {
        font-family: 'icomoon';
        src:  url('../fonts/icomoon/icomoon.eot?m6277c');
        src:  url('../fonts/icomoon/icomoon.eot?m6277c#iefix') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.ttf?m6277c') format('truetype'),
        url('../fonts/icomoon/icomoon.woff?m6277c') format('woff'),
        url('../fonts/icomoon/icomoon.svg?m6277c#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
    } */
    
    @font-face {
        font-family: 'icomoon';
        src:  url('../fonts/icomoon/icomoon.eot?v4sdk5c');
        src:  url('../fonts/icomoon/icomoon.eot?v4sdk5c#iefix') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.ttf?v4sdk5c') format('truetype'),
        url('../fonts/icomoon/icomoon.woff?v4sdk5c') format('woff'),
        url('../fonts/icomoon/icomoon.svg?v4sdk5c#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    .before-icomoon:before,
    .after-icomoon:after,
    [class^="icon-"]:before,
    [class^="icon-"]:after,
    [class*=" icon-"]:before,
    [class*=" icon-"]:after {

        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-logout:before {
        content: "\e90c";
    }

    .icon-address:before {
        content: "\e900";
    }
    
    .icon-arrow:before {
        content: "\e901";
    }

    .icon-arrowup:before {
        content: "\e902";
    }

    .icon-bloc:before {
        content: "\e903";
    }

    .icon-book:before {
        content: "\e904";
    }

    .icon-desk:before {
        content: "\e905";
    }

    .icon-login:before {
        content: "\e906";
    }

    .icon-mail:before {
        content: "\e907";
    }

    .icon-document:before {
        content: "\e908";
    }

    .icon-phone:before {
        content: "\e909";
    }

    .icon-search:before {
        content: "\e90a";
    }

    .icon-stairs:before {
        content: "\e90b";
    }

    .icon-logout:before {
        content: "\e90c";
    }

    .icon-fcontinue:before {
        content: "\e910";
    }

    .icon-fax:before {
        content: "\e911";
    }

    .icon-ergonomy:before {

        content: "\e918";

    }

    .icon-leadership:before {

        content: "\e919";
    
    }

    .icon-book:before {
    
        content: "\e904";
        
    }

    .icon-apprentissage:before {
        content: "\e912";
    }

    .icon-certificat:before {
        content: "\e913";
        position: absolute;
        bottom: 1rem;
        font-size: 4em;
        left: 50%;
        transform: translateX(-50%);
         -webkit-transform: translateX(-50%);
                   -moz-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                     -o-transform: translateX(-50%);
                        transform: translateX(-50%);
    }

    .icon-linkedin:before {
        content: "\eaca";
    }

    .icon-tiktok:before {
        content: "\e90d";
    }

    .icon-youtube:before {
        content: "\e90e";
    }

    .icon-facebook:before {
        content: "\e90f";
    }

    .icon-instagram:before {
        content: "\e914";
    }

    .icon-helmet:before {
        content: "\e917";
    }

    .icon-emergency:before {
        content: "\e916";
    }

    .icon-barrel:before {
        content: "\e915";
    }

    .icon-dossier:before {
        content: "\e91a";
    }

/*************************************************************************/

/* 5) Content

/*************************************************************************/

    /*************************************************************************/
    /* 5.1) Sections
    /*************************************************************************/

    /* Sections > Header slider */

    html.init > body > main > .sct-header-slider {
        -webkit-transition-delay: .3s;
           -moz-transition-delay: .3s;
            -ms-transition-delay: .3s;
             -o-transition-delay: .3s;
                transition-delay: .3s;
    }

    .news-header-slider-articles > article.slide {
        margin-bottom: 1rem;
    }

    .sct-header-slider > .fg {
        flex-wrap: wrap;
        align-items: stretch;
        height: 100%;
        padding-top: 7vh;
        padding-left: 6rem;
    }

    .sct-header-slider > .fg > div {
        padding-bottom: 2rem;
    }

    .sct-header-slider > .fg > div:last-child {
        background-color: white;
        padding: 2.5rem 1rem 1rem 2.5rem;
    }

    span.article-tag:before {
        content:"";
        width: 10px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -20px;
    }

    .sct-header-slider > .fg > div article time,
    body.single-post time {
        border-bottom: 1px solid #000;
        padding-bottom: 0.5rem;
        font-weight: 200;
    }

    .sct-header-slider > .fg > div:first-child article span.article-tag,
    .sct-header-slider > .fg > div:last-child article span.article-tag,
    body.single-post span.article-tag,
    .medium-content article span.article-tag {
        display: block;
        margin-bottom: 1.5rem;
        position: relative;
        font-weight: 500;
        margin-left: 20px;
    }
    
    .sct-header-slider > .fg > div article p {
        margin-bottom: 1rem;
    }

    .sct-header-slider > .fg > div:last-child article h4 {
        margin-top: 2.5rem;
    }

    .sct-header-slider > .fg > div:first-child > .fg,
    .sct-header-slider > .fg > div:first-child > .fg  > div > .content {
        height: 100%;
    }

    .sct-header-slider > .fg > div:first-child > .fg  > div:last-child {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .sct-header-slider > .fg > div:first-child > .fg  > div > .content > div {
        width: 100%;
        height: 500px;
    }

    .sct-header-slider > .fg > div:first-child > .fg  > div > .content > nav,
    body.single-post > main > div nav {
        display: flex;
        justify-content: flex-end;
        height: 3rem;
    }

    .sct-header-slider > .fg > div:first-child > .fg  > div > .content > nav > [data-action="prev"],
    body.single-post > main > div nav > [data-action="prev"] {
        position: relative;
        -webkit-transform: rotate(-180deg);
           -moz-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
             -o-transform: rotate(-180deg);
                transform: rotate(-180deg);
    }

    /* Sections > Form / supports pédagogiques */

    .order-form .form-you-are .flex,
    .order-form .formation-item.flex,
    .order-form .total.flex,
    .order-form .form-informations .flex,
    .order-form .form-billing .flex {
        justify-content: space-between;
    }

    .order-form .form-you-are .txt-small,
    .order-form .form-billing {
        border-top: 1px solid #3dadc4;
    }

    .order-form .form-select-formation .formation-item {
        border-bottom: 1px solid #3dadc4;
    }

    .order-form .form-select-formation .formation-item > div:first-child {
        padding-right: 2rem;
    }

    .order-form .form-select-formation .formation-item .price {
        color: #3dadc4;
    }

    .order-form .form-select-formation .formation-item span {
        display: block;
    }

    .custom-quantity {
        background-color: #fff;
    }

    .custom-quantity input,
    .custom-quantity button {
        width: 3rem;
        border: none;
        background-color: transparent;
        text-align: center;
        height: 100%;
    }

    .custom-quantity button {
        color: #3dadc4;
    }

    .form-select-formation .total {
        border-top: 1px solid #3dadc4;
        border-bottom: 1px solid #3dadc4;
        margin-top: 0.5rem;
    }

    .order-form .form-informations div.flex:first-child {
        justify-content: left;
    }

    .order-form .flex .field {
        width: calc(50% - 0.5rem);
    }

    .order-form .field label {
        margin-top: 1rem;
        display: block;
        margin-bottom: 1rem;
    }

    .order-form .field input {
        border: 1px solid #3dadc4;
        background-color: transparent;
        padding: 0.5rem;
        width: 100%;
    }

    form [type="radio"] {
        margin-left: 0.5rem
    }

    form [type="submit"] {
        border: none;
        width: 100%;
        color: #fff;
    }

    button[data-type="submit"] {
        display: block;
        width: 100%;
    }

    form button[data-form-action]:not(:hover) > span {
        color: #3dadc4;
    }

    .busy {
        cursor: wait;
    }

    .red {
        color: red;
    }

    .order-form .form-messages > p:not(.active) {
        display: none;
    }

    /* form button[data-form-action]:hover {
        color: #fff;
        background-color: red;
    } */
      
    /*************************************************************************/
    /* 5.2) Widgets
    /*************************************************************************/

    /* Widgets > External link */

    .external-link-widget {
        background-color: #edf8fa;
        border: 1px solid #fff;
        color: #078097;
        position: relative;
    }

    .external-link-widget.active,
    .external-link-widget:hover {
        background-color: #3dadc4;
        color: #fff;
    }

    .vce .external-link-widget {
        margin-bottom: 0 !important;
    }

    .external-link-widget a {
        padding: 2rem 4rem 2rem 2rem;
        display: block;
    }

    .external-link-widget a:before {
        position: absolute;
        right:2rem;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    /* Widgets > widget-number */

    .sct-highlight-number .vce-widgets-container .widget-number-counter .content {
        border-left: 1px solid #078097;
        margin-left: -2rem;
        padding-left: 2rem;
        margin-top: 2rem;
    }

    .sct-highlight-number .vce-widgets-container .vce-widgets-wrapper {
        margin-bottom: 0;
    }

    .sct-highlight-number .vce-widgets-container .widget-number-counter {
        padding-bottom: 4rem;
    }

    .sct-highlight-number > .vce-row-content > .vce-col:first-child > .vce-col-inner > .vce-col-content > div:last-child,
    .sct-highlight-number > .vce-row-content > .vce-col:last-child > .vce-col-inner > .vce-col-content > div:first-child  {
        margin-left: 4rem !important;
    }

    .sct-highlight-number {
        margin: auto;
        max-width: 400px;
    }

    /* Widgets > Higlight Box */

    .widget-highlight-box {
        margin-left: 16.66% !important;
        margin-right: 16.66% !important;
        padding-bottom: 10rem;
        padding: 2rem 0 !important;
        position: relative;
        padding: 0 4rem !important;
        background-color: #f6f6f6;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .widget-highlight-box > div:first-child {
        height: calc(100% + 1rem);
        background: #078097;
        -webkit-transform: translateY(3rem);
        -moz-transform: translateY(3rem);
        -ms-transform: translateY(3rem);
        -o-transform: translateY(3rem);
        transform: translateY(3rem);
    }

    .widget-highlight-box > div:nth-child(2) {
        align-self: center;
    }

    .widget-highlight-box figure {
        margin: 0;
    }

    .widget-highlight-box figure > img {
        width: 100%;
    }

    .widget-highlight-box > div:first-child:before {
        top: -4.5rem;
    }

    .widget-highlight-box .after-link {
        bottom: -3rem;
        right: 0;
        overflow: hidden;
        cursor: pointer;
        color: #fff;
    }

    .widget-highlight-box .after-link > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .widget-highlight-box .after-link > div > a {
        z-index: 2;
    }

    .widget-highlight-box .after-link:after {
        content: "";
        top: 100%;
        left: 0;
        background-color: #3dadc4;
        height: 100%;
        width: 100%;
        position: absolute;
    }

    .widget-highlight-box .after-link:hover:after {
        top: 0;
    }

    .widget-highlight-box .after-link > div {
        margin: 0 !important;
    }

    .widget-highlight-box > footer {
        height: 3rem;
        width: 100%;
        position: absolute;
        bottom: -3rem;
        left: 0;
        text-align: right;
    }

    .widget-highlight-box > footer > div > span {
        margin-right: 1rem;
    }

    .widget-highlight-box > footer a {
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
    }

	/* Widgets > table content */

	.table-widget-responsive > .table-widget-rows > .table-widget-row > div.table-widget-col:first-child {
		font-weight: 200;
   		font-family: aktiv-grotesk-thin, sans-serif;
   		font-size: 2.19rem;
   		line-height: 1em;
   		padding: 2rem 2rem 0 0;
	}

	.table-widget-responsive > .table-widget-rows > .table-widget-row > div.table-widget-col:nth-child(2) {
		color: #3dadc4;
		border-bottom: 0;
		padding: 2rem 0 0 0;
	}

	.table-widget-responsive > .table-widget-rows > .table-widget-row > div.table-widget-col:last-child {
		border-bottom: 1px solid #3dadc4;
		padding: 0 0 2rem 0;
	}

    .table-widget-fixe {
        width: 100%;
        overflow: auto;
    }

    .table-widget-fixe > .table-widget-rows {
        width: 900px;
    }

    .table-widget-fixe > .table-widget-rows > .table-widget-row:first-child > .table-widget-col {
    	color: #3dadc4;
    	padding: 0 2rem 2rem 0;
    	width: 10rem;
    }

    .table-widget-fixe > .table-widget-rows > .table-widget-row > .table-widget-col:first-child {
    	color: #3dadc4;
    	padding: 0 2rem 2rem 0;
    	width: 6rem;
    }

     .table-widget-fixe > .table-widget-rows > .table-widget-row > .table-widget-col {
    	padding: 0 2rem 2rem 0;
    	width: 10rem;
    }

    /*************************************************************************/
    /* 5.3) Homepage
    /*************************************************************************/

    /* Homepage > Info importante */

    .sct-info-importante {
        min-height: 700px;
    }

    .sct-info-importante > div > div:last-child > div:before {
        top: -7.5rem;
    }

    /*************************************************************************/
    /* 5.4) Page content 
    /*************************************************************************/
    
    ul:not(.no-style) {
        padding-left: 25px;
    }

    ul:not(.no-style) li:before {
        content: "";
        width: 6px;
        height: 6px;
        background-color: #3dadc4;
        position: absolute;
        top: 50%;
        left: -25px;
        border-radius: 50%; 
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
    }

    ol li {
        counter-increment: my-counter;
        position: relative;
    }

    ol li:before {
        content: counter(my-counter) ". ";
        color: #3dadc4;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: -40px;
    }

    ol {
        list-style:none;
        counter-reset: my-counter;
    }

    ul:not(.no-style) li {
        list-style-type: none;
        position: relative;
    }

    .no-margin-bottom .vce {
        margin-bottom: 0 !important;
    }

    .max-width-full > div > a {
    	max-width: 100%;
    }

    .span-block > div > span{
        display: block;  
    }

    .span-block > div > span:nth-child(2) {
        padding: 0.25rem 0;
    }

    .no-margin-negative {
    	margin-top: 0;
    }

    .box-arrow .icon-arrowup:before {
        font-size: 50px;
        color: #078094;
        margin-bottom: 20px;
        margin-left: 30px;
        display: inline-block;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
             -o-transform: rotate(180deg);
                transform: rotate(180deg);
    }


    .wheel:after {
        height: 50%;
        bottom: -50px;
    }

    .wheel {
        width: 250px;
        height: 250px;
        position: relative;
        margin: auto;
        margin-top: 0px;
    }

    .wheel:before,
    .wheel:after {
        content: "";
        height: 30%;
        width: 4px;
        right: 60px;
        position: absolute;
        background-color: #078097;
    }

    .wheel:before {
        top: -40px;
    }

    .wheel:after {
        bottom: 0px;
    }

    .wheel > .wheel-item {
        position: absolute;
    }

    .wheel > .wheel-item:first-child {
        width: 60%;
        height: 60%;
        bottom: 0;
        z-index: 3;
    }

    .wheel > .wheel-item:nth-child(2) {
        width: 35%;
        height: 35%;
        top: 8px;
        right: 119px;
        -webkit-transform: rotate(25deg);
        -moz-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
        -o-transform: rotate(25deg);
        transform: rotate(25deg);
        stroke-width: 2px;
        stroke: #000;
        fill: #000;
    }

    .wheel > .wheel-item:last-child {
        width: 40%;
        height: 40%;
        top: 51px;
        right: 18px;
        -webkit-transform: rotate(25deg);
        -moz-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
        -o-transform: rotate(25deg);
        transform: rotate(25deg);
        stroke-width: 2px;
        stroke: #078097;
    }

    .wheel > .wheel-item:first-child > svg > path:nth-child(2),
    .wheel > .wheel-item:last-child {
        fill: #078097;
    }


     /*************************************************************************/
    /* 5.5) Page 404
    /*************************************************************************/

    .error404 div.dark-area > div > div.flex img {
        width: 120px;
        padding: 0 1rem;
    }

    .error404 div.dark-area > div > div.flex {
        align-items: flex-end;
    }

    .error404 div.dark-area > div > div.flex > div.flex {
        flex-direction: column;
        -webkit-transform: translateX(-8rem);
           -moz-transform: translateX(-8rem);
            -ms-transform: translateX(-8rem);
             -o-transform: translateX(-8rem);
                transform: translateX(-8rem);
    }

    .error404 svg {
        width: 300px;
    }

    /*************************************************************************/
    /* 5.6) Page single article
    /*************************************************************************/

    body.single-post > main > div .article-highlight p {
        text-align: right;
    }

    body.single-post > main > div {
        position: relative;
    }

    body.single-post > main > div nav {
        position: absolute;
        right: 0;
        top: 6rem;
    }

    body.single-post > main > div:last-child > div div {
    	padding-right: 2rem;
    }

	body.single-post > main .button {
    	line-height: 0;
    } 

    /*************************************************************************/
    /* 5.x) Name
    /*************************************************************************/

/*************************************************************************/

/* 6) Responsive

/*************************************************************************/

    /* Comment template: {Media} > {Table of content level 1} > {Table of content level 2} > {Element Groups if needed}

    /*************************************************************************/
    /* 6.1) Small media (481px +)
    /*************************************************************************/
	

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

        body > main {
            padding-top: 60px;
        }

        /* Small media- > Layout > Header */

		body > header .main-menu-nav {
		    height: 60px;
		}

        /* Small media- > Layout > Header > Main menu */

		body.menu-active .main-menu,
		body.search-active .research-container {
		    top: 60px;
		}

		body > header .main-menu-nav > div {
		    padding: 1rem !important;
		}

		body >.main-menu .main-menu-container,
		.research-container {
		    height: calc(100vh - 60px) !important;
		}

        /* Small media- > Home > Header slider */

		.sct-header-slider > .fg > div:first-child > .fg > div > .content > div {
		    height: 300px;
		}

		.news-header-slider-content {
			margin-top: 2rem;
		}

		body .sct-header-slider > .fg > div:first-child > .fg > div:last-child {
		    min-height: 400px;
		    height: 50%;
		}

        /* Small media- > Article */

		.single-post .article-tag + div {
			height: 300px !important;
		}

		body.single-post > main > div .article-highlight p{
    		margin: 1rem 0rem;
    	}

		.single-post .bg-light-grey .flex div:last-child {
			margin-top: 0rem;
		}

        /* Small media- > Sections > Form / supports pédagogiques */

        .order-form .formation-item.flex {
            display: block;
        }

        .custom-quantity {
            width: 60%;
            margin-bottom: 2rem;
        }

        .custom-quantity > div {
            width: 33%;
        }
        
        .custom-quantity input,
        .custom-quantity button {
            width: 100%;
        }

	}

    @media screen and (min-width: 481px) {

    	    h1,
		    .as-h1,
		    h2,
		    .as-h2,
		    h3,
		    .as-h3,
		    h4,
		    .as-h4,
		    h5,
		    .as-h5 {
		        word-break: keep-all;
		    }
    }

    @media screen and (min-width: 481px) and (max-width: 720px) {

    	    body.single-post > main > div nav {
    			right: 4rem;
    		}
    }

    /*************************************************************************/
    /* 6.2) Medium media (721px +)
    /*************************************************************************/

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

		/* Medium media- > Layout */

            h3, .as-h3 {
                font-size: 1.79rem;
            }

            .cookies-banner-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .cookies-banner-wrapper .cookies-buttons {
                width: auto;
            }

            .cookies-banner-wrapper .button {
                display: block;
            }

            .cookies-banner-wrapper .button:first-child {
                margin-bottom: 1rem;
            }

        /* Medium media- > Sections */

            /* Medium media- > Sections > Single Page */

            body.single-post > main .gap-right-1 {
    			padding-right: 0 !important;
    		} 

    		body.single-post > main > div .article-highlight p {
    			text-align: left;
    		}

    		body.single-post > main > div:first-child div .flex > div:last-child {
				margin-top: 4rem;
    		}

    		.sct-header-slider > .fg > div:first-child > .fg  > div > .content {
       			height: 65%;
    		}

            /* Medium media- > Sections > Form / supports pédagogiques */

            .order-form .form-you-are .flex,
            .order-form .form-informations .flex, 
            .order-form .form-billing .flex {
                display: block;
            }

            .order-form .flex .field {
                width: 100%;
            }
    }

    @media screen and (min-width: 721px) {

        /* Medium media+ > Widgets */

            /* Medium media+ > Widgets > Highlightbox */

            .widget-highlight-box > div:first-child {
                width: 300px;
                min-width: 300px;
            }

            /* Medium media+ > Widgets > table-widget */

            .table-widget-responsive > .table-widget-rows > .table-widget-row > div.table-widget-col:nth-child(2),
            .table-widget-responsive > .table-widget-rows > .table-widget-row > div.table-widget-col:last-child {
				border-bottom: 1px solid #3dadc4;
				padding: 2rem 0;
			}

            .table-widget-responsive > .table-widget-rows > .table-widget-row > div.table-widget-col:first-child {
                text-align: right;
            }

			.sct-header-slider > .fg > div {
        		padding-bottom: 7rem;
    		}
    }

    @media screen and (min-width: 721px) and (max-width: 992px) {}

    /*************************************************************************/
    /* 6.3) Large media (993px +)
    /*************************************************************************/

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

        /* Large media- > Global Elements */

            /* Large media- > Transition */

            .main-menu-nav > .flex > nav:last-child > button,
            .main-menu-mobile-trigger > div,
            .main-menu-submenu-level-2 {
                -webkit-transition: .3s ease;
                   -moz-transition: .3s ease;
                    -ms-transition: .3s ease;
                     -o-transition: .3s ease;
                        transition: .3s ease;
            }

            /* Large media- > Global Elements > Cookies banner */

            .cookies-banner {
                left: 0;
                width: 100%;
            }

            /* Large media- > Global Elements > Contact details */

            .contact-details > div:first-child,
            .contact-details > div:nth-child(2) {
                margin-bottom: 2rem;
            }

            /* Large media- > Global Elements > Linked sites */

            .linked-sites a.button {
                min-width: 250px;
            }

            /* Large media- > Global Elements > Single page article */

            body.single-post > main article {
    			padding-bottom: 6rem;
    		}

    		body.single-post > main > div:last-child div:last-child > article {
    			padding-bottom: 0;
    		}

        /* Large media- > Layout */

            /* Large media- > Layout > Header */

            .sct-header-slider > .fg {
                padding-left: 2rem;
        	}

            /* Large media- > Layout > Footer */

            body > footer > div.second-footer > div {
                padding-left: 16.66% !important;
                display: flex;
                justify-content: flex-start;
                flex-direction: column;
                padding: 2rem 1rem;
            }

            body > footer > div.second-footer > div > a {
                display: inline-block;
            }

            body > footer > div.second-footer > div > a:not(:last-child) {
                margin-bottom: 1rem;
            }

             /* Large media- > Layout > Page 404 */

            .error404 div.dark-area > div > div.flex img {
                width: 80px;
            }

            body.single-post > main > div > div > div {
                flex-wrap: wrap;
            }

        /* Large media- > Elements */

        /* Large media- > Sections */

            /* Large media- > Sections > Header slider */

            .gap-mobile-both-2 {
                padding-left: 4rem !important;
                padding-right: 4rem !important;
            }

            /* Large media+ > Helpers > Link box grid */

            .link-boxes-grid .link-box {
                min-height: 250px;
            }

            .link-boxes-grid .link-box .content > [class^=icon-] {
                font-size: 5rem;
            }

            /* Large media+ > Helpers > Containers & Contents */

            /* Large media+ > Helpers > Containers & Contents > Gaps */

            .gap-left-1,
            .container-gap-both-1 {
                padding-left: 2rem !important;
            }

            .container-gap-both-2,
            .gap-both-2,
            .gap-both-1,
            .gap-left-2,
            .gap-left-1 {
                padding-left: 2rem !important;
            }

            .gap-left-3 {
                padding-left: 6rem !important;
            }
            
            .gap-left-4 {
                padding-left: 8rem !important;
            }

            .gap-right-1,
            .container-gap-both-1 {
                padding-right: 2rem !important;
            }

            .container-gap-both-2,
            .gap-both-2,
            .gap-both-1,
            .gap-right-2 {
                padding-right: 2rem !important;
            }
            
            .gap-left-4 {
                padding-left: 8rem !important;
            }

            .gap-right-4 {
                padding-right: 8rem !important;
            }
}    

    @media screen and (min-width: 993px) {

        /* Large media+ > Transition */

        .menu-tools,
        .menu-tools > a,
        .main-menu-nav-bullet,
        .lift > a {
            -webkit-transition: .3s ease;
               -moz-transition: .3s ease;
                -ms-transition: .3s ease;
                 -o-transition: .3s ease;
                    transition: .3s ease;
        }

        /* Large media+ > General elements */

        html {
            font-size: 16px;
        }

        h1,
        .as-h1 {
            font-size: 4.5rem;
        }
        
        h2,
        .as-h2 {
            font-size: 2.625rem;
        }

        h3,
        .as-h3 {
            font-size: 2.19rem;
        }

        /* Large media+ > Global Element */

            /* Large media+ > Global Element > Contact details */

            .fg.contact-details {
                flex-wrap: nowrap;
            }

            .fg.contact-details > div:not(:last-child) {
                margin-right: 1rem;
            }

            /* Large media+ > Global Element > Linked sites */

            .linked-sites a {
                min-width: 300px;
                padding-left: 2rem;
                max-width: 100%;
            }

        /* Large media+ > Overriden area */
                    
            .cp-table .vce-row-content > .vce-col,
            .vce-row-content > .vce-col:last-child {
            	margin-right: 0 !important;
            }

        /* Large media+ > Layout */

            /* Large media+ > Layout > Header */

            body > header .main-search-area > div {
                margin: 0 3rem;
            }

            /* Large media+ > Layout > Footer */

            /* Large media+ > Layout > Footer */

        /* Large media+ > Elements */

            /* Large media+ > Elements > Lift */

            .lift > a {
                position: relative;
            }

            /* Large media+ > Elements > Link-box */

            .link-box {
                min-height: 200px;
            }

            /* Large media+ > Elements > widgets < highlightbox number */

            .sct-highlight-number {
        		margin: auto;
        		max-width: 800px;
    		}

            /* Large media+ > Helpers */

        	/* Large media+ > Helpers > Text link box */

      	    .txt-link-box-left > div.vce-row-content > div:first-child,
		    .txt-link-box-right > div.vce-row-content > div:last-child {
		        flex-basis: 35% !important;
		        max-width: 35% !important;
		        position: relative;
		        z-index: 1;
		        -webkit-transform: translateX(4rem);
		           -moz-transform: translateX(4rem);
		            -ms-transform: translateX(4rem);
		             -o-transform: translateX(4rem);
		                transform: translateX(4rem);
		    }

		    .txt-link-box-right > div.vce-row-content > div:last-child {
		        -webkit-transform: translateX(-4rem);
		           -moz-transform: translateX(-4rem);
		            -ms-transform: translateX(-4rem);
		             -o-transform: translateX(-4rem);
		                transform: translateX(-4rem);
		    }

		    .txt-link-box-left .vce,
		    .txt-link-box-right .vce {
		        margin-bottom: 0 !important;
		    }

		    .txt-link-box-left > div.vce-row-content > div:last-child,
		    .txt-link-box-right > div.vce-row-content > div:first-child {
		        padding-left: 7rem;
                padding-right: 7rem;
		        flex-basis: 65% !important;
		        max-width: 65% !important;
		    }

            /* Large media+ > Helpers > Containers & Contents */

            /* Large media+ > Helpers > Containers & Contents > Gaps */

            .gap-left-1,
            .gap-both-1 {
                padding-left: 8.33% !important;
            }

            .container-gap-both-2,
            .gap-both-2,
            .gap-left-2 {
                padding-left: 16.66% !important;
            }

            .gap-left-3 {
                padding-left: 24.99% !important;
            }
            
            .gap-left-4 {
                padding-left: 33.32% !important;
            }

            .gap-right-1,
            .gap-both-1 {
                padding-right: 8.33% !important;
            }

            .container-gap-both-2,
            .gap-both-2,
            .gap-right-2 {
                padding-right: 16.66% !important;
            }
            
            .gap-left-4 {
                padding-left: 33.33% !important;
            }

            .gap-right-4 {
                padding-right: 33.33% !important;
            }
    }

    @media screen and (min-width: 993px) and (max-width: 1250px) {

            .error404 div.dark-area > div > div.flex > div.flex {
                -webkit-transform: translateY(1rem);
                   -moz-transform: translateY(1rem);
                    -ms-transform: translateY(1rem);
                     -o-transform: translateY(1rem);
                        transform: translateY(1rem);
            }  

            .vce-text-block h2.center-lm {
                text-align: center;
                padding-left: 8rem;
                margin: auto;
            }                 
    }

    /*************************************************************************/
    /* 6.4) Huge media (1201px +)
    /*************************************************************************/

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

        /* Huge media- > Layout */

            /* Huge media- > Layout > Footer */

            body > footer > div.first-footer > div:last-child {
                padding-left: 3rem;
            }

            body > footer > div.first-footer > div:last-child > .content > div > div:last-child {
                margin-top: 4rem;
            }

        /* Huge media- > Content */
        
            /* Huge media- > Content > Sections */

            .min-height-blue {
                min-height: auto;
            }

            /* Huge media- > Content > Sections > Info Importante */

            .sct-info-importante > div > div:last-child > div:before {
                display: none;
            }

            .sct-info-importante > div > div:last-child {
                margin-top: 2rem;
            }

        /* Huge media- > Helpers */

            /* Huge media- > Helpers > Image text shadow right */

            .img-txt-shadow-right .vce-text-block {
                margin-top: -10rem;
                padding-left: 2rem;
                color: #fff;
            }

            .img-txt-shadow-right figure img {
                background-color: black;
                opacity: 0.5;
            }

            .img-txt-shadow-right figure {
                background-color: black;
            }

            /* Huge media- > Helpers > Text link box left */

            .txt-link-box-left > div.vce-row-content {
                flex-direction: column-reverse;
            }

            .txt-link-box-left .link-box {
                width: 100%;
            }

            .txt-link-box-left > div.vce-row-content > div:first-child {
                z-index: 2;
                -webkit-transform: translateY(-350px);
                   -moz-transform: translateY(-350px);
                    -ms-transform: translateY(-350px);
                     -o-transform: translateY(-350px);
                        transform: translateY(-350px);
            }

            .txt-link-box-left > div.vce-row-content > div:last-child {
                padding-bottom: 400px;
            }

            /* Huge media- > Helpers > margin */

            .out-top-spacing-huge-only-desktop,
            .inout-v-spacing-huge-only-desktop,
            .inout-spacing-huge-only-desktop,
            .out-v-spacing-huge-only-desktop,
            .out-spacing-huge-only-desktop {
                margin-top: 0rem;
            }

            .out-bottom-spacing-huge-only-desktop,
            .inout-v-spacing-huge-only-desktop,
            .inout-spacing-huge-only-desktop,
            .out-v-spacing-huge-only-desktop,
            .out-spacing-huge-only-desktop {
                margin-bottom: 0rem;
            }

            .out-top-spacing-large-only-desktop,
            .inout-v-spacing-large-only-desktop,
            .inout-spacing-large-only-desktop,
            .out-v-spacing-large-only-desktop,
            .out-spacing-large-only-desktop {
                margin-top: 0rem;
            }

            .out-bottom-spacing-large-only-desktop,
            .inout-v-spacing-large-only-desktop,
            .inout-spacing-large-only-desktop,
            .out-v-spacing-large-only-desktop,
            .out-spacing-large-only-desktop {
                margin-bottom: 0rem;
            }

            .in-bottom-spacing-medium-only-desktop,
            .inout-v-spacing-medium-only-desktop,
            .inout-spacing-medium-only-desktop,
            .in-v-spacing-medium-only-desktop,
            .in-spacing-medium-only-desktop {
                padding-bottom: 0rem;
            }

        /* Huge media- > Widgets */

            /* Huge media- > Widgets > Highlightbox */

            .widget-highlight-box > div:first-child {
                align-self: center;
            }

            .widget-highlight-box > div:nth-child(2) {
                margin-top: 8rem;
                padding-bottom: 3rem;
            }

        /* Huge media- > Content */

            /* Huge media- > Content > Homepage */

            .news-header-slider-articles article:not(.active) {
                opacity: 0;
                z-index: -1;
            }

        /* Medium media- > Sections > Header slider */

            .sct-header-slider > .fg > div:first-child > .fg > div:last-child {
                min-height: 300px;
            }

            .sct-header-slider > .fg > div:last-child {
                display: none;
                visibility: hidden;
            }
    }

    @media screen and (min-width: 1200px) { /* special media query for vce override */
        
         .vce-row-content > .vce-col {
            margin-right: 2rem !important;
        }
    }

    @media screen and (min-width: 1201px) {

        /* Huge media+ > Layout */

            /* Huge media+ > Layout > Footer */

            body > footer > div.first-footer > div:first-child {
                width: 16.66%;
            }
        
            body > footer > div.first-footer > div:last-child > .content > div > div:last-child {
                border-left: 1px solid #3dadc4;
                padding-left: 2rem;
            }
        
        /* Huge media+ > Sections */

            /* Huge media+ > Sections > Highlight numbers */

			 .sct-highlight-number {
            	margin: auto;
            	max-width: 100%;
            }

            .sct-highlight-number > div.vce-row-content > div:first-child > div.vce-col-inner > .vce-col-content > .vce-widgets-container:first-child {
                -webkit-transform: translateX(6rem);
                   -moz-transform: translateX(6rem);
                    -ms-transform: translateX(6rem);
                     -o-transform: translateX(6rem);
                        transform: translateX(6rem);
            }

            .sct-highlight-number > div.vce-row-content > div:first-child > div.vce-col-inner > .vce-col-content > .vce-widgets-container:nth-child(2) {
                -webkit-transform: translateX(14rem);
                   -moz-transform: translateX(14rem);
                    -ms-transform: translateX(14rem);
                     -o-transform: translateX(14rem);
                        transform: translateX(14rem);
                margin-top: 25rem;
            }

            .sct-highlight-number > div.vce-row-content > div:nth-child(2) > div.vce-col-inner > .vce-col-content > .vce-widgets-container:first-child {
                margin-top: 20rem;
            }
        
            .sct-highlight-number > div.vce-row-content > div:nth-child(3) > div.vce-col-inner > .vce-col-content > .vce-widgets-container:first-child {
                margin-top: 8rem;
            }
            
            .sct-highlight-number > div.vce-row-content > div:nth-child(3) > div.vce-col-inner > .vce-col-content > .vce-widgets-container:nth-child(2) {
                -webkit-transform: translateX(9rem);
                   -moz-transform: translateX(9rem);
                    -ms-transform: translateX(9rem);
                     -o-transform: translateX(9rem);
                        transform: translateX(9rem);
                margin-top: 8rem;
            }

            /* Huge media+ > Page > 404 */

            .error404 svg {
                width: 350px;
            }

        /* Huge media+ > Widgets */

            /* Huge media+ > Widgets > Highlightbox */

            .widget-highlight-box {
                max-width: 900px !important;
                margin-left: auto !important;
                margin-right: auto !important;
                flex-direction: row;
                flex-wrap: nowrap;
            }

            .widget-highlight-box > div:first-child {
                margin-right: 2rem;
            }

            .widget-highlight-box > div:nth-child(2) {
                padding-left: 2rem;
            }
    }

    @media screen and (min-width: 1201px) and (max-width:1550px) {
        
        .sct-highlight-number {
            padding-right: 4rem !important;
            padding-left: 4rem !important;
        }
        
        .sct-highlight-number > .vce-row-content > .vce-col:first-child > .vce-col-inner > .vce-col-content > div:last-child,
        .sct-highlight-number > .vce-row-content > .vce-col:last-child > .vce-col-inner > .vce-col-content > div:first-child {
                margin-left: 2rem !important;
        }
        
        .sct-highlight-number > div.vce-row-content > div:nth-child(3) > div.vce-col-inner > .vce-col-content > .vce-widgets-container:nth-child(2) {
            -webkit-transform: translateX(5rem) !important;
               -moz-transform: translateX(5rem) !important;
                -ms-transform: translateX(5rem) !important;
                 -o-transform: translateX(5rem) !important;
                    transform: translateX(5rem) !important; 
        }
    }

    /*************************************************************************/
    /* 6.5) Custom
    /* the smaller media first */
    /*************************************************************************/

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

        /* Custom media > Helpers */

            /* Custom media > Helpers > Text Link Box */

            .txt-link-box-left > div.vce-row-content > div:first-child,
            .txt-link-box-right > div.vce-row-content > div:last-child {
                flex-basis: 90% !important;
                max-width: 90% !important;
            }

            .txt-link-box-left > div.vce-row-content > div:last-child,
            .txt-link-box-right > div.vce-row-content > div:first-child {
                flex-basis: 90% !important;
                max-width: 90% !important;
            }

            .img-txt-shadow-right .vce-text-block h2 {
                font-size: 1.5rem;
                padding-left: 17rem;
            }
    }

    @media screen and (min-width: 993px) and (max-width: 1400px) {

        /* Custom media > Layout */

			h3, .as-h3 {
                font-size: 1.5rem;
            }

            /* Custom media > Layout > Footer */

    		body > footer > div.first-footer > div:last-child > .content > div > div:last-child a {
    			min-width: 250px;
    		}
	}

    @media screen and (min-width: 1251px) and (max-width: 1400px) {

        /* 1400px- > Layout */

            /* 1400px- > Layout > Header */ 

            body > header .main-menu-nav .main-logo {
                position: absolute;
                top: 1rem;
                left: 3rem;
            }

            body > header .main-menu-nav > div {
                justify-content: flex-end;
            }           
    }

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

        /* Large media- > Global Elements > Langue */

        body > header .main-menu-nav > div > nav.show-mobile a {
            color: #078097;
            font-size: 1.2rem;
        }

        body > header .main-menu-nav > div > nav.show-mobile {
            align-items: center;
        }

        body > header .main-menu-nav > div > nav.show-mobile > a:not(:last-child),
        body > header .main-menu-nav > div > nav.show-mobile > button:not(:last-child),
        body > header .main-menu-nav > div > nav.show-mobile > div:not(:last-child) {
            margin-left: 2rem;
        }

        /* Large media- > Elements > Main Menu */

        .main-menu .main-menu-container {
            overflow-y: auto;
            height: calc(100vh - 90px);
            background-color: #fff;
        }

        .main-menu a {
            color: #078097;
            font-size: 1.285rem;
        }

        .main-menu .main-menu-container > nav > div:last-child > a:not(:last-child),
        .main-menu-submenu {
            margin-bottom: 1.5rem;
        }

        .main-menu-submenu > a {
            display: inline-block;
        }

        .main-menu-submenu-level-2 {
            -webkit-transform: translateY(-3rem);
                -moz-transform: translateY(-3rem);
                -ms-transform: translateY(-3rem);
                    -o-transform: translateY(-3rem);
                    transform: translateY(-3rem);
        }

        .active .main-menu-submenu-level-2 {
            -webkit-transform: translateY(0);
                -moz-transform: translateY(0);
                -ms-transform: translateY(0);
                    -o-transform: translateY(0);
                    transform: translateY(0);
        }

        .main-menu-submenu-level-2 li > a {
            color: #3dadc4;
        }

        .main-menu .main-menu-container > nav > div:last-child {
            display: flex;
            flex-direction: column;
        }

        .main-menu .main-menu-container > nav > div:last-child > a {
            padding-left: 0 !important;
        }

        .main-menu-submenu > a + ul {
            padding: 1.5rem 0 0 4rem;
        }

        .main-menu-submenu.active > a {
            position: relative;
        }

        .main-menu-submenu > a:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #3DADC4;
            opacity: 0;
            left: -2rem;
            -webkit-transition: opacity .3s ease, left .3s ease;
                -moz-transition: opacity .3s ease, left .3s ease;
                -ms-transition: opacity .3s ease, left .3s ease;
                    -o-transition: opacity .3s ease, left .3s ease;
                    transition: opacity .3s ease, left .3s ease;
            -webkit-transform: translateX(-10px);
                -moz-transform: translateX(-10px);
                -ms-transform: translateX(-10px);
                    -o-transform: translateX(-10px);
                    transform: translateX(-10px);
        }

        .main-menu-submenu.active > a:before {
            left: -4rem;
            opacity: 1;
        }

        .main-menu-submenu:not(.active) > ul {
            display: none;
        }

        /* Large media- > Elements > Menu tools */

        .menu-tools {
            display: none;
        }

        .main-menu .main-menu-container nav > div {
            padding-left: 0 !important;
        }

        .main-menu .main-menu-container nav {
            padding: 2rem 4rem;
            height: 100%;
            justify-content: flex-start;
            align-content: flex-start;
        }

        .show-mobile {
            display: block;
            visibility: visible;
        }

        .hide-mobile {
            display: none !important;
            visibility: hidden !important;
        }
        
        body > header .main-menu-nav > div {
            align-items: center;
            padding: 2rem;
        }
        
        body > header .main-menu-nav > div > nav > div:last-child {
            height: 3rem;
            width: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0.75rem;
            margin-left: 2rem;
        }

        body > header .main-menu-nav > div > nav > div:last-child {
            position: relative;
        }

        body:not(.menu-active) > header .main-menu-nav > div > nav > div:last-child {
            background-color: #078097;
        }

        .main-menu-nav > .flex > nav:last-child > button {
            background-color: transparent;
        }

        .main-menu-nav > .flex > nav:last-child > button > span {
            color: #078097;
        }

        body:not(.menu-active) .main-menu-nav > .flex > nav:last-child > button {
            display: none;
            -webkit-transform: translateY(5rem);
               -moz-transform: translateY(5rem);
                -ms-transform: translateY(5rem);
                 -o-transform: translateY(5rem);
                    transform: translateY(5rem);
        }

        .main-menu-mobile-trigger > div {
            outline: 1px solid #fff;
            width: 100%;
        }

        body.menu-active .main-menu-mobile-trigger > div {
            outline-color: #078097;
        }

        .main-menu-mobile-trigger > div:first-child,
        .main-menu-mobile-trigger > div:last-child {
            content: "";
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            width: calc(100% - 1.5rem);
        }

        .main-menu-mobile-trigger > div:last-child {
            top: unset;
            bottom: 0.75rem;
        }

        body.menu-active .main-menu-mobile-trigger > div:nth-child(2),
        .main-menu-mobile-trigger:hover > div:nth-child(2) {
            opacity: 0;
        }

        body.menu-active .main-menu-mobile-trigger > div:first-child,
        .main-menu-mobile-trigger:hover > div:first-child {
            top: 50%;
            -webkit-transform: rotate(45deg);
               -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                 -o-transform: rotate(45deg);
                    transform: rotate(45deg);
        }

        body.menu-active .main-menu-mobile-trigger > div:last-child,
        .main-menu-mobile-trigger:hover > div:last-child {
            bottom: 50%;
            -webkit-transform: rotate(-45deg);
               -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                 -o-transform: rotate(-45deg);
                    transform: rotate(-45deg);
        }

    }

    @media screen and (min-width: 1251px) {

        .show-mobile,
        .hide-desktop {
            display: none !important;
            visibility: hidden;
        }

        .show-desktop {
            display: block;
            visibility: visible;
        }

        body > header .main-menu-nav .main-logo {
            width: 300px;
            max-width: 40%;
            margin-right: 2rem;
        }

        body.menu-active .main-menu-nav-bullet {
            opacity: 1;
            bottom: 0;
        }

        .main-menu .main-menu-container nav {
            font-size: 2.18rem;
        }

        .main-menu-nav-bullet {
            position: absolute;
            bottom: -4rem;
            opacity: 0;
            left: 50%;
            z-index: 500;
            -webkit-transform: translateY(50%);
                -moz-transform: translateY(50%);
                -ms-transform: translateY(50%);
                    -o-transform: translateY(50%);
                    transform: translateY(50%);
            height: 2rem;
            width: 2rem;
            border-radius: 50%;
        }
        
        body > header .main-menu-nav {
            height: 168px;
        }

        body > main {
            padding-top: 168px;
        }

        /* Large media+ > Elements > Menu tools */

        .menu-tools {
            position: absolute;
            top: calc(171px + 7vh);
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            z-index: 90;
        }

        .menu-tools > a:first-child {
            margin-bottom: 1rem;
        }

        .menu-tools > a:hover {
            color: #111e20;
        }

        .menu-active .menu-tools {
            background-color: #fff;
            color: #078097;
        }

        .menu-active .menu-tools > a:hover {
            color: #000;
        }

        /* Large media+ > Elements > Main menu */

        .main-menu {
            height: calc(100vh - 168px);
        }

        body.menu-active .main-menu {
            top: 168px;
        }

        .main-menu .main-menu-submenu > a {
            display: none;
            visibility: hidden;
        }

        .main-menu .main-menu-container nav {
            flex-direction: row;
            align-items: flex-start;
        }

        .main-menu .main-menu-container nav li:not(:last-child) {
            margin-bottom: 3vh;
        }

        .main-menu .main-menu-container nav > div[data-ref] {
            display: none;
        }

        .main-menu .main-menu-container nav > div[data-ref].active {
            display: block;
        }

        .main-menu .main-menu-container nav li a:after {
            content: "";
            width: 200px;
            height: 1px;
            left: -2rem;
            top: -50%;
            opacity: 0;
            z-index: -1;
            -webkit-transform: translateX(-100%) translateY(-50%);
                -moz-transform: translateX(-100%) translateY(-50%);
                -ms-transform: translateX(-100%) translateY(-50%);
                    -o-transform: translateX(-100%) translateY(-50%);
                    transform: translateX(-100%) translateY(-50%);
            background-color: #078097;
            position: absolute;
        }

        .main-menu .main-menu-container nav li a.active:after,
        .main-menu .main-menu-container nav li a:hover:after {
            opacity: 1;
            z-index: 1;
            top: 50%;
        }

    }

/*************************************************************************/

/* 7) Overriden area

/*************************************************************************/

figure > .vce-single-image-inner,
figure > .vce-single-image-inner > img {
    width: 100%;
}

/*************************************************************************/

/* 8) Dev / Test

/*************************************************************************/

/* prevent WP admin bar extra space */

.sample-container {
    border: 1px dashed grey;
    min-height: 50px;
    margin-bottom: 5rem;
}

#post-15 .vce-row-container {
    margin-top: 10rem;
}

/* Text-box */

.text-box {
    background-color: #edf8fa;
    padding: 2rem;
    position: relative;
}

.text-box a:hover {
    color: #3dadc2;
}

.text-box a {
    -webkit-transition: all .3s ease-out;
       -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
         -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
}

.close {
    width: 3rem;
    height: 3rem;
    position: relative;
    cursor: pointer;
}

.close:after,
.close:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 1.5rem);
    height: 1px;
    background-color: #fff;
}

.close:before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
       -moz-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
         -o-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
}

.close:after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
       -moz-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
         -o-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg); 
}

.close:hover:before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
       -moz-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
         -o-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
}

.close:hover:after {
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
       -moz-transform: translate(-50%, -50%) rotate(135deg);
        -ms-transform: translate(-50%, -50%) rotate(135deg);
         -o-transform: translate(-50%, -50%) rotate(135deg);
            transform: translate(-50%, -50%) rotate(135deg);
}

/* Reasearch container */

.research-container {
    position: fixed;
    cursor: default;
    overflow-x: hidden;
    overflow-y: auto;
    top: 100%;
    left: 0;
    height: calc(100% - 90px);
    width: 100%;
    background-color: #fff;
    z-index: 30;
}

.research-container .content {
    padding: 3rem;
    margin: auto;
    max-width: 1600px;
}

body.search-active .research-container {
    top: 90px;
}  

@media screen and (min-width: 993px) {

    .research-container {
        height: calc(100% - 168px);
    }

    body.search-active .research-container {
        top: 168px;
    }    
}

.research-container > .wrapper > .content > h3 {
    margin-top: 3rem;
    margin-bottom: 0;
}

.research-container > .wrapper > .content > h3 + ul {
    margin-top: 1rem;
}

.research-container ul[data-type="page"] > li {
    display: flex;
}

.research-container ul[data-type="page"] > li > a {
    width: 100%;
    padding: 2rem;
}

.research-container ul[data-type="page"] > li > a:after {
    display: none;
}

.research-container ul[data-type="page"] > li:nth-child(odd) {
    background-color: #f6f6f6;
}

.research-container [data-type="post"] > div > a {
    cursor: pointer;
    display: block;
}

.research-container .article-bg-img {
    width: 100%;
}

.research-container .fg {
    width: calc(100% + 2rem);
    margin-left: -1rem;
}

.research-container .fg > div {
    padding: 1rem;
}

.research-container [data-type="post"] article {
    overflow: hidden;
    cursor: pointer;
}

.research-container [data-type="post"] article .wrapper {
    height: 20vh;
    overflow: hidden;
}

.research-container [data-type="post"] article:hover .wrapper .article-bg-img {
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1); 
}

.research-container .link-box {
    max-width: 100%;
}

.research-container ul[data-type="page"] a:hover {
    color: #078097;
}

/* Link box */

.link-box .content h3 {
    word-break: break-word;
}

/* Wheels */

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

    .wheel {
        width: 200px;
        height: 220px;
    }
}

@media screen and (min-width: 768px) {
    .wheel {
        margin-top: 170px;
    }
}

/* Corrections exceptionnelles du menu */

@media screen and (min-height: 1301px) {

    .main-menu .main-menu-container nav {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .main-menu .main-menu-container nav li:not(:last-child) {
        margin-bottom: 4rem;
    }

}


@media screen and (min-aspect-ratio: 3/2) and (max-height: 800px) {

    .main-menu li {
        margin-bottom: 1.5vh !important;
    }

    .main-menu .main-menu-container nav {
        font-size: 1.75rem;
        padding-top: 1rem;
    }

}

/*************************************************************************/

/* Formations SST - New version (08.03.2022)

/*************************************************************************/
/* 
.formations-sst--header {

    padding: 4rem 22vw;

} */

.formations-sst--header {

    padding: 4rem 14vw;

}

.formations-sst--header > header > p {

    max-width: 700px;
    width: fit-content;

    margin-left: auto !important;

}

.formations--sst--highlights {

    margin-top: 8rem;

}

/* 
.formations--sst--highlights-list {

    display: flex;

    flex-direction: column;

    gap: 2vw;

    margin-top: 4rem;

} */

.formations--sst--highlights-list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    gap: 4vh 4vw;

    margin-top: 4rem;

}

.formations--sst--highlights-list article {

    display: flex;

    flex-direction: column;

    padding: 2rem;

    background-color: white;
    width: 100%;
    
    cursor: pointer;

}

.formations--sst--highlights-list article:hover button {

    color: white;

}

.formations--sst--highlights-list article:hover button > span {

    color: white !important;

}

.formations--sst--highlights-list article:hover button::after {

    top: 0;

}

.formations--sst--highlights-list article:hover .article-tag::before {

    width: 20px;
    left: -10px;

}

.formations--sst--highlights-list .article-tag {
    
    position: relative;
    
    display: block;

    margin-bottom: 1.5rem;

    padding-left: 1rem;

    font-weight: 500;

}

.formations--sst--highlights-list .article-tag::before {

    background-color: #3DADC4;

    left: 0;

    transition: left .3s ease,
                width .3s ease;

}

.formations--sst--highlights-list article > *:not(:first-child) {

    margin-top: 2rem;

}

.formations--sst--highlights-list button {

    width: fit-content;
    height: auto;

    margin-top: auto !important;

}

main > section:not(:first-of-type) {

    margin-top: 8rem;

}

main > .formations-sst:nth-of-type(even) .formations-sst--container > img {

    right: 0;

}

main > .formations-sst:nth-of-type(odd) .formations-sst--list {

    margin-left: auto;

}

.formations-sst > header {

    display: flex;
    
    align-items: center;

}

.formations-sst > header h2 {

    margin: 0;

}

.formations-sst > header > span {

    font-size: 4rem;

    margin-right: 1rem;

    color: #23A5BC;

}

.sst-content-2025 h1 .txt-highlight,
.formations-sst--header .txt-highlight,
.formations-sst > header .txt-highlight,
.ligthbox .txt-highlight {

    background-image: linear-gradient(rgba(255, 0, 0, 0) calc(100% - .4em), rgb(214, 234, 245) 0.4em);

}

.formations-sst--container {

    margin-top: 4rem;

}

.formations-sst--container > img {

    /* Struct */

    height: 65vmin;
    width: 65vmin;

    position: absolute;

    object-fit: cover;

    top: 0;

    z-index: -1;

}

.formation-sst--content {

    height: auto;
    width: 100%;
    
    padding: 3rem;

    background-color: #EDF8FA;

    color: black;

    cursor: pointer;

    transition: background-color .3s ease,
                color .3s ease;

}

.formation-sst--content p,
.formation-sst--content > b,
.formation--sst--next-sessions,
.formation-sst--content > footer {

    margin-top: 4rem;

}

.formation-sst--content p {

    margin-bottom: 0;

}

.formation-sst--content > b {

    display: inline-block;
}

.formation-sst--content > footer {

    display: flex;

    flex-direction: column;

    align-items: center;

    color: #078097;

    text-transform: uppercase;

    transition: color .3s ease;

}

.formation-sst--content > footer > div:first-of-type {

    display: flex;

    justify-content: space-between;

    width: 100%;

}

.formation-sst--content > footer .--ufc {

    display: flex;

    align-items: center;
    gap: 2vw;

    margin-top: 4rem;

}

.formation-sst--content > footer .--ufc img {

    width: 100%;
    min-width: 60px;
    max-width: 5vw;

}

.formation-sst--content > footer .--ufc p {

    font-size: 0.8rem;
    margin: 0;

    text-transform: none;
    line-height: 1.3;

}

.formation-sst--content > footer .formation--sst--footer-icon {

    font-size: 2.5rem;

}

.formations-sst--list {

    display: grid;

    grid-auto-rows: auto;
    gap: 2rem;

    width: 100%;

}

.formation--sst--next-sessions {

    margin-top: 2rem;

}

.formation--sst--next-sessions > .formation--sst--session:not(:first-child) {

    margin-top: 4rem;

}

.formation--sst--session {

    position: relative;

    display: flex;

    justify-content: space-between;

    padding: 0 1rem;

    color: #3DADC4;

    transition: color .3s ease;

}

.formation--sst--next-sessions > .formation--sst--session:not(:last-child)::after {

    position: absolute;

    content: "";

    bottom: -2rem;
    left: 0;

    width: 100%;
    height: 1px;

    background-color: #5CABC1;

    transition: background-color .3s ease;

}

.formation--sst--language {

    text-transform: uppercase;

}

.further-informations--content {

    display: flex;

    flex-direction: column;
    align-items: center;

    background-color: #F6F6F6;

    padding: 4rem 1rem;

}

.further-informations--content > * {

    margin-top: 2rem;

}

.further-informations--content > p {

    max-width: 550px;
    text-align: center;

}

.formation-sst--sessions {

    margin-top: 4rem;

}

.formation-sst--details {

    display: grid;

    grid-auto-flow: row;
    grid-auto-columns: 1fr;

}

.formation-sst--details > section > .formation-sst--details-content:not(:first-child) {

    margin-top: 2rem;

}

.formation-sst--details-content {

    display: flex;

    flex-direction: column;

}

.formation-sst--details-content > b:first-of-type,
.formation-sst--details-content .prices {

    margin-top: 1rem;

}

.formation-sst--details-content .prices {

    display: grid;

    grid-template-columns: repeat(2, max-content);
    gap: .5rem 2rem;

}

.formations-sst--lightbox-container > section:not(:first-child),
.formation-sst--sessions-list,
.formations-sst--lightbox-container .link-box p {

    margin-top: 4rem;

}

.formation-sst--sessions-list {

    display: grid;

    gap: 2rem;

}

.formations-sst--lightbox-container .link-box {

    max-width: unset;

    background-color: #EDF8FA;
    color: black;

}

.formations-sst--lightbox-container .link-box p {

    display: grid;

    grid-template-columns: repeat(3, auto);

    column-gap: 1rem;
    row-gap: 2rem;

}

.formations-sst--lightbox-container .link-box h3 {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;
    gap: 1rem;

}

.formations-sst--lightbox-container .link-box p > span {

    position: relative;

    width: 100%;

}

.formations-sst--lightbox-container .link-box p > .white-line-under::after {

    position: absolute;

    content: "";

    width: calc(100% + 1rem);
    height: 1px;

    background-color: black;

    left: 0;
    bottom: -1rem;

}

.formations-sst--lightbox-container .link-box.active::before {

    bottom: 0;
    
    background-color: #078097;

}

.formation-sst--sessions-list > div.link-box-active {

    position: relative;

}

.formations-sst--lightbox-container .link-box.active {

    color: white;

}

.formations-sst--lightbox-container .link-box.active .link-box-button,
.formations-sst--lightbox-container .link-box.active .link-box-button-hover-txt {

    display: none;

    visibility: hidden;

}

.formations-sst--lightbox-container .link-box.active p > .white-line-under::after,
.formations-sst--lightbox-container .link-box:hover p > .white-line-under::after {

    background-color: white;

}

.formations-sst--lightbox-container .link-box p > span:nth-child(3n) {

    text-align: end;

}

.formations-sst--lightbox-container .link-box p > span:nth-child(3n)::after {

    width: 100%;

}

.formations-sst--lightbox-container .form-inputs--row {

    display: flex;

    justify-content: space-between;

}

.formations-sst--lightbox-container .form-input--content {

    display: flex;

    flex-direction: column;

    flex-basis: 20%;

}

.participants button {

    width: fit-content;

}

.participant--data.locked > button {

    pointer-events: none;

    visibility: hidden;

}


.participants > section {

    margin-top: 4rem;

}

.participants > section:last-of-type {

    margin-bottom: 4rem;

}

.participants > section:nth-of-type(even) {

    position: relative;

    z-index: 0;

}

.participants > section:nth-of-type(even)::before {

    position: absolute;

    content: "";

    left: -2rem;
    top: -2rem;

    width: calc(100% + 4rem);
    height: calc(100% + 4rem);

    background-color: #EDF8FA;

    z-index: -1;

}

.formations-sst--registration-form > button {

    margin-top: 4rem;

}

.participant--data {

    display: grid;

    gap: 1rem 2rem;

}

.participant--data > button {

    font-size: .8rem;

}

.formations-sst--registration > form {

    display: none;

}

.formations-sst--registration > form.form-visible {

    display: block;

    margin-top: 4rem;

}

.formations-sst--registration-form > section {

    position: relative;

}

.formations-sst--registration-form input[type=text],
.formations-sst--registration-form input[type=email],
.formations-sst--registration-form input[type=date],
.formations-sst--registration-form textarea {

    border: 1px solid #3dadc4;

    background-color: transparent;

    padding: 0.5rem;

    width: 100%;

}

.formations-sst--registration-form > section:not(:first-child) {

    position: relative;

    margin-top: 8rem;

}

.formations-sst--registration-form > section:not(:last-of-type)::after {

    position: absolute;

    content: "";

    width: 100%;
    height: 1px;

    background-color: black;

    left: 0;
    bottom: -4rem;

}

.formations-sst--registration-form > section:last-of-type span {

    font-size: .9em;

}

.formations-sst--registration-form .checkbox-row {

    flex-direction: row;
    align-items: center;

}

.formations-sst--registration-form .checkbox-row > input:not(:last-child) {

    margin-right: 2rem;

}

.contact-person > div:first-of-type,
.company > div:first-of-type {

    margin-top: 2rem;
    margin-bottom: 2rem;

}

.contact-person > div:first-of-type > input[type=radio]:not(:last-of-type),
.company > div:first-of-type > input[type=radio]:not(:last-of-type) {

    margin-right: 1rem;

}

.company_billing .form-inputs--row {

    margin-top: 2rem;

}

.company_billing > input {

    margin-right: .5rem;

}

.disabled .form-inputs--row {

    opacity: .5;
    color: grey;

}

.disabled .form-inputs--row input {

    border-color: grey;

}

.disabled .form-inputs--row input,
.disabled .form-inputs--row label {

    pointer-events: none;

}

.formation--sst--date {

    margin-right: .5rem;

}

label {

    position: relative;

    width: fit-content;

}

label.required::after {

    position: absolute;

    content: "*";

    right: -.5em;
    top: 0;

}

section textarea {

    margin-top: 2rem;

}

.formations-sst--lightbox {

    position: fixed;

    height: 100%;
    width: 100%;

    top: 0;
    left: 0;

    background-color: rgba(255, 255, 255, 0.8);

    padding: 2rem;

    z-index: 100;

    overflow: scroll;

    opacity: 0;

    pointer-events: none;

    transition: opacity .3s ease;

    cursor: pointer;

}

.formations-sst--lightbox .close-button {

    position: absolute;

    right: 0;

    padding: 0;

}

.formations-sst--lightbox .close-button .cross {

    display: block;

    width: 100%;
    height: 100%;

}

.formations-sst--lightbox .close-button .cross::before,
.formations-sst--lightbox .close-button .cross::after {

    position: absolute;

    content: "";

    width: 50%;
    height: 1px;

    top: 50%;
    left: 50%;

    background-color: white;

}

.formations-sst--lightbox .close-button .cross::before {

    transform: translate(-50%, -50%) rotate(45deg);

}

.formations-sst--lightbox .close-button .cross::after {

    transform: translate(-50%, -50%) rotate(-45deg);

}

.formations-sst--lightbox .top-button {

    top: 0;

}

.formations-sst--lightbox-container {

    background-color: white;
    padding: 2rem;

    cursor: default;

}

.formations-sst--lightbox .complete {

    position: relative;
    cursor: not-allowed;

}

.formations-sst--lightbox .complete:after {

    content: attr(data-complete-txt);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);

}

.formations-sst--lightbox .complete .link-box {

    background-color: #F6F6F6;

    color: #1C1C1C;

    opacity: 0.3;

    cursor: not-allowed;
    pointer-events: none;

}

.formations-sst--lightbox.sended .formation-sst--details,
.formations-sst--lightbox.sended .formation-sst--sessions,
.formations-sst--lightbox.sended .formations-sst--registration {

    display: none;

    visibility: hidden;

}

.formations-sst--lightbox.sended .ajax-message {

    display: flex;

}

.formations-sst--lightbox.sended {

    width: 100%;

}

.formations-sst--lightbox.sended .formations-sst--lightbox-container {

    height: 100%;
    width: 100%;

}

/* Ajax message error */
.formations-sst--lightbox .ajax-error-msg {

    display: none;
    padding: 2rem;
    font-size: 1.2rem;
    line-height: 1;
    border: 1px solid red;
    background-color: #ff000014;

}

.formations-sst--lightbox.error .ajax-error-msg {

    display: block;

}

.formations-sst--lightbox-container .link-box.complete p > .white-line-under::after {

    background-color: #1C1C1C;

}

body.formations-sst--lightbox--active .formations-sst--lightbox {

    opacity: 1;

    pointer-events: all;

}

.ajax-message {

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    max-width: 750px;
    height: 100%;

    margin: auto;

    text-align: center;

}

.ajax-message > span:first-child {

    margin-bottom: 2rem;

}

.loader {

    position: fixed;

    top: 0;
    left: 0;

    height: 100%;
    width: 100%;

    z-index: 100;

    opacity: 0;

    pointer-events: none;

    transition: opacity .2s ease-in-out;

}

.loader .loader--wrapper {

    display: flex;

    justify-content: center;
    align-items: center;

    background-color: white;

}

.loader .loader--wrapper svg {

    max-width: 50vmax;
    max-height: 5vmax;

    animation: loader--img 3s linear infinite;

}

.empty-sessions--message {

    display: none;

    visibility: hidden;

    color: red;

}

.empty-session .empty-sessions--message {

    display: block;

    visibility: visible;

}

.formation--sst--tag {

    align-self: baseline;
    background-color: #FFBABA;
    border-radius: 2rem;
    padding: .1em .5em;
    font-size: 0.8rem;
    color: #BA381E;
    margin-left: auto;
    margin-right: 1rem;
    text-transform: uppercase;

}

body.loader-active .loader {

    opacity: 1;

}

@keyframes loader--img {

    from {

        transform: rotateY(0deg);

    }

    to {

        transform: rotateY(360deg);

    }

}

@media screen and (max-width: 420px) {
    
    .formations-sst--header {

        padding: 4rem 4vw;
    
    }

    .formations-sst--lightbox {

        padding: 1rem;

    }

}

/* @media screen and (min-width: 721px) {

    .formations-sst--list {

        width: fit-content;

    }

} */

@media screen and (max-width: 600px) {
    
    .link-box .content p {

        grid-template-columns: 1fr;

        row-gap: .5rem;

    }

    .link-box .content p > span:nth-child(3n + 1)::after,
    .link-box .content p > span:nth-child(3n + 2)::after {

        display: none;

    }

    .link-box .content p > span:nth-child(3n + 3) {

        text-align: start;

        margin-bottom: 2rem;

    }

}

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

    .formations-sst--container > img {

        display: none;

        visibility: hidden;

    }

    .formation-sst--details {

        display: flex;

        flex-direction: column-reverse;

        row-gap: 2rem;

    }

    .formation-sst--details > section:last-child {

        grid-row: 1;

    }

    .formation-sst--details img {

        display: none;

    }

}

@media screen and (min-width: 993px) {

    /* .formations--sst--highlights-list {
    
        flex-direction: row;
    
    } */

    .formations--sst--highlights-list article {

        width: 35vw;
        max-width: 400px;
    
    }

    .formations-sst--container {

        min-height: 65vmin;
        padding-top: 2rem;

    }

    .formations-sst--lightbox {

        padding: 4rem 8vw;

    }

    .formations-sst--list {

        /* grid-template-columns: repeat(2, max-content); */
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    }

    .formations-sst--list.space-right {

        padding-right: 12vw;

    }

    .formations-sst--list.space-left {

        padding-left: 12vw;

    }

    .formation-sst--content {

        position: relative;

        overflow: hidden;

        /* width: 30vmax;
        max-width: 500px; */
        
        z-index: 1;

    }

    .formation-sst--content:hover::after {

        bottom: 0;

    }
    
    .formation-sst--content::after {

        position: absolute;

        content: "";

        bottom: -100%;
        left: 0;

        width: 100%;
        height: 100%;

        background-color: #3DADC4;

        z-index: -1;

        transition: bottom .3s ease;

    }

    .formations-sst--lightbox-container {

        padding: 8rem 4rem;
    
    }

    .formation-sst--details {

        grid-auto-flow: column;
        column-gap: 2rem;

    }

    .formation-sst--sessions-list {

        grid-template-columns: repeat(2, 1fr);

    }
    
    .formation-sst--content:hover,
    .formation-sst--content:hover .formation--sst--session,
    .formation-sst--content:hover > footer {

        color: #EDF8FA;

    }

    .formation-sst--content:hover .formation--sst--next-sessions > .formation--sst--session:not(:last-child)::after {

        background-color: #EDF8FA;

    }

}

@media screen and (min-width: 993px) and (max-width: 1250px) {

    .formation-sst--content > footer .--ufc {

        flex-direction: column;
        align-items: baseline;
    
    }

    .link-box .content p {

        grid-template-columns: 1fr;

        row-gap: .5rem;

    }

    .link-box .content p > span:nth-child(3n + 1)::after,
    .link-box .content p > span:nth-child(3n + 2)::after {

        display: none;

    }

    .link-box .content p > span:nth-child(3n + 3) {

        text-align: start;

        margin-bottom: 3rem;

    }

}

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

    .participant--data {

        display: flex;

        flex-direction: column;

    }

    .form-inputs--row {

        flex-direction: column;

    }

    .form-inputs--row > .form-input--content:not(:first-child) {

        margin-top: 2rem;

    }

}

@media screen and (min-width: 1251px) {

    .participant--data {
    
        grid-template-columns: minmax(40px, 100px) repeat(4, 1fr);
    
    }

    .participant--data > span:first-child {

        grid-row: span 2;

        align-self: center;

    }

    .participant--data > button {

        grid-row: 1;
        grid-column: 5;
    
        align-self: flex-end;
    
    }

}

.formations-sst--lightbox img {

    width: 100%;

}

.formations-sst--registration small {

    display: block;

    margin-left: auto;
    margin-right: 0;

    width: fit-content;

}

.info-max-length small {

    color: orangered;

}

.extranet-login {

    position: absolute;

    top: 50%;
    
    z-index: 2000;

}

.extranet-login button:hover,
.extranet-login button {

    color: white !important;

}

.extranet-login a {

    position: relative;
    
    color: #fff;
    
    z-index: 2;

}

/*************************************************************************/

/* New cookies banner

/*************************************************************************/

.new-cookies-banner {

    position: fixed;
    
    bottom: 0;
    left: 0;
    
    width: 90%;
    max-width: 1200px;
    
    padding: 2rem;
    
    /* background-color: #3dadc4;
    color: #fff; */
    
    transition: transform .3s ease-in-out;
    
    z-index: 300;
    
}
    
.new-cookies-banner p {
    
    margin: 0;
    
}

.new-cookies-banner hr,
.cookies-manager hr {

    height: 1px;
    border: none;
    
    background-color: white;

}

.new-cookies-banner hr {
    
    margin: 2vh 0;
    
}

.new-cookies-banner a:not(.button),
.cookies-manager a:not(.button) {

    text-decoration: underline;

}
    
@media screen and (max-width: 63.688em) {
    
    .new-cookies-banner {
    
        padding: 1rem;
    
    }

    .new-cookies-banner > div {
        
            display: flex;
        
            flex-direction: column;
            align-items: center;

            row-gap: 1rem;
        
    }

    .new-cookies-banner .marquee > span {
        
            font-size: .7rem;
        
    }

}
    
@media screen and (max-width: 63.688em) {
    
    .new-cookies-banner > div > button:not(:first-of-type) {
    
        margin-top: 1vh;
    
    }
    
}
    
@media screen and (min-width: 63.75em) {
    
    .new-cookies-banner > div > button:not(:first-of-type) {
    
        margin-left: 0.5rem;
    
    }
    
}

.switch.disabled,
.switch[data-status=on] {
    
    background-color: #357D48;
    color: white;
    
}
    
.switch:not(.disabled)[data-status=on]:hover {
    
    background-color: black;
    
}
    
.switch:not(.disabled)[data-status=off]:hover {
    
    background-color: black;
    color: white;
    
}

.switch.disabled .switch-button,
.switch[data-status=on] .switch-button {
    
    left: 100%;
    transform: translateX(-100%);

}
    
.switch.disabled > label:first-of-type,
.switch[data-status=on] > label:first-of-type {
    
    opacity: 1;

}
    
.switch.disabled > label:last-of-type,
.switch[data-status=on] > label:last-of-type {
    
    opacity: 0;
    
}
    
.switch {
    
    position: relative;
    
    display: flex;
    
    align-items: center;
    
    width: 25vw;
    height: 2rem;
    
    max-width: 100px;
    min-width: 80px;
    
    color: #1C1C1C;
    background-color: white;
    
    margin-left: auto;
    
    border-radius: 2rem;
    border: 1px solid black;
    
    padding: 0;

    transition: background-color .3s ease-in-out;
    
    cursor: pointer;
    
}

.switch::after {

    display: none;

}
    
.switch[data-status=off] .switch-button {
    
    left: 0;
    transform: translateX(0);

}
    
.switch.disabled {
    
    cursor: not-allowed;
    
}
    
.switch.disabled .switch-button {
    
    background-color: rgb(199, 188, 188);
    
}
    
.switch > label {
    
    position: absolute;
    
    display: flex;
    align-items: center;
    
    width: 100%;
    height: 100%;
    
    transition: opacity .3s ease-in-out,
                color .3s ease-in-out;
    
    cursor: inherit;

}
    
.switch > label:first-of-type {
    
    left: 0.5em;
    opacity: 0;
    
}
    
.switch > label:last-of-type {
    
    right: 0.5em;
    justify-content: flex-end;
    
}

.switch .switch-button {
    
    position: absolute;
    
    width: 2rem;
    height: 2rem;
    
    border-radius: 2rem;
    border: 1px solid black;
    
    background-color: white;
    
    cursor: inherit;
    
    transition: left .3s ease-in-out,
                transform .3s ease-in-out;
    
}
    
body:not(.cookies-manager-active) .cookies-manager {
    
    opacity: 0;
    pointer-events: none;
    
}
    
.cookies-manager {
    
    position: fixed;
    
    top: 50%;
    left: 50%;
    
    width: 80%;
    max-width: 1200px;
    
    padding: 2rem;
    
    transform: translate(-50%, -50%);
    
    transition: opacity .3s ease-in-out;
    
    z-index: 400;
    
}

.cookies-manager > p {
    
    margin: 0;
    
}

.cookies-manager header {
    
    display: flex;
    
    align-items: center;
    margin-top: 2vh;
    
}

.cookies-manager header h4 {
    
    margin: 0;

}

.cookies-manager header .--toggle {
    
    width: 2rem;
    height: 2rem;
    
    margin-left: 1rem;
    margin-right: 0.5rem;

    padding: 0;
    
}

.cookies-manager header .--toggle span {

    transition: color .3s ease-in-out;

}

.cookies-manager header .--toggle:hover span {

    color: #3dadc4;

}

.cookies-manager header .--toggle::after {

    background-color: white;

}

.cookies-manager header .--toggle span {
    
    display: inline-flex;
    
    transform: rotate(90deg);
    
}

.cookies-manager .accordion.active > p {
    
    display: block;
    
}

.cookies-manager .accordion > p {
    
    display: none;
    
    margin-bottom: 0;
    margin-top: 2vh;

}

.cookies-manager header > div {
    
    display: flex;
    
    justify-content: space-between;
    align-items: center;
    
}

.cookies-manager hr {
    
    margin: 2vh 0;
    
}

.cookies-manager .marquee .inner-content,
.new-cookies-banner .marquee .inner-content {
    
    left: 1rem;
    
}

@media screen and (max-width: 33.063em) {
    
    .cookies-manager header {
    
        flex-direction: column;
    
        align-items: flex-start;
    
    }
    
    .cookies-manager header > div {
    
        width: 100%;
    
    }
    
    .cookies-manager header .--toggle {
    
        margin: 0;
    
        order: 3;
    
    }
    
    .cookies-manager header .switch {
    
        margin: 3vh 0;
    
    }
    
}

@media screen and (min-width: 33.125em) {
    
    .cookies-manager header {
    
        display: grid;
    
        grid-template-columns: max-content auto;
        
        column-gap: 1vw;
    
    }
    
    .cookies-manager header .--toggle {
    
        margin-left: 0;
    
    }
    
}

@media screen and (max-width: 63.688em) {
    
    .cookies-manager footer {
    
        display: flex;
    
        flex-direction: column;
    
        align-items: center;
    
    }
    
    .cookies-manager footer > button:not(:first-child) {
    
        margin-top: 1vh;
    
    }
    
}

body:not(.cookies-banner-active) .new-cookies-banner {
    
    transform: translateY(100%);
    pointer-events: none;
    
}

body::after {
    
    position: absolute;
    
    content: "";
    
    width: 100vw;
    height: 100vh;
    
    top: 0;
    left: 0;
    
    background-color: #DBDBDB;
    
    opacity: 0;
    
    transition: opacity .3s ease-in-out;

    pointer-events: none;
    
}

body.cookies-manager-active::after {
    
    opacity: .5;
    
    z-index: 399;

    pointer-events: all;
    
}

.new-cookies-banner a.link:hover,
.cookies-manager a.link:hover {
    
    color: var(--purple-color) !important;
    
}
    
.new-cookies-banner a.link:hover::after,
.cookies-manager a.link:hover::after {
    
    background-color: var(--purple-color) !important;
    
}
    
.new-cookies-banner a.link::after, 
.cookies-manager a.link::after {
    
    background-color: var(--black-color);
    
}

.data-policy {

    padding: 0 16.66%;

}

.data-policy h3 {

    margin: 2rem 0 1rem 0;

}

.data-policy a {

    text-decoration: underline;

}

/* SST Formations - 2025 */
.sst-content-2025 {

    display: grid;

    grid-template-columns: max-content 1fr;

    row-gap: 4rem;

}

.sst-content-2025 > nav {

    grid-column: span 2;

    background-color: #F6F6F6;

    padding: 2rem;

}

.sst-content-2025 > nav > ul {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;

}

.sst-content-2025 > nav > ul > li {

    margin-bottom: 0;

    background-color: white;

    padding: 1rem;

}

.sst-content-2025 > nav > ul > li > a {

    display: grid;

    grid-template-columns: 3rem 1fr;

    margin-bottom: 1rem;

}

.sst-content-2025 > nav > ul > li > a > span:first-child {

    color: #23A5BC;

}

.sst-content-2025 > nav > ul > li > a > span:last-child {

    font-weight: 900;

}

.sst-content-2025 > nav a {

    display: grid;

    grid-template-columns: 3rem 1fr;

    transition: .3s ease;

}

.sst-content-2025 > nav a:hover {

    color: #9195ea;

}

.sst-content-2025 > nav a.categorie {

    font-size: 1.25rem;

}

.sst-content-2025 > section {

    grid-column: 2;

}

.sst-content-2025 > section > header {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;

}

.sst-content-2025 > section > header img {

    justify-self: end;
    width: 100%;

}

.sst-content-2025 header > div {

    display: flex;

    grid-column: span 2;

    align-items: center;

}

.sst-content-2025 header > div > span {

    font-size: 4rem;
    margin-right: 1rem;
    color: #23A5BC;

}

.sst-content-2025 .formations-sst--list {

    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    align-items: start;

}

.sst-content-2025 .formations-sst--container {

    min-height: unset !important;
    padding-top: 0 !important;

    margin-top: 2rem !important;

}

body.page-id-4292 {

    scroll-behavior: smooth;

}

body.page-id-4292 .extranet-login {

    display: none;

}