:root {
    --color-background-white: rgb(255, 255, 255);

    --color-black: rgb(0, 0, 0);
    --color-white: rgb(255, 255, 255);
    --color-pink: rgb(239, 166, 166);
    --color-blue: rgb(0, 125, 140);
    --color-yellow: rgb(229, 175, 10);
    --color-green: rgb(202, 211, 54);
    --color-grey: #f7f7f7;
    --color-grey-light: rgb(93, 93, 93);
    --color-grey-thin: rgb(244, 244, 244);
    --color-mauve: rgb(159, 147, 163);
    --color-bordeaux: rgb(168, 69, 88);


    --font-size-page-title: 60px;
    --font-size-page-subtitle: 20px;

    --font-size-section-title: 30px;
    --font-size-section-subtitle: 24px;
    --font-size-section-text: 18px;


    --font-size-motion-title: 18px;
    --font-size-motion-text: 16px;
    --font-size-motion-aside: 14px;

    --font-size-project-title: 24px;
    --font-size-project-content-title: 26px;
    --font-size-project-content-text: 20px;


    --font-size-actualite-title: 20px;
    --font-size-actualite-subtitle: 14px;
    --font-size-actualite-text: 16px;
    --font-size-actualite-btn: 12px;
    --font-size-actualite-redirect: 18px;

    --font-size-contact-submit: 20px;
    --font-size-contact-informations: 20px;

    --font-size-network: 26px;

    --font-size-number: 70px;
    --font-size-number-percentage: 30px;
    --font-size-number-text: 16px;
}

/*region Réinitialisation du CSS */

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button, input, textarea {
    outline: none;
    box-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;

}

b, strong {
    font-weight: 700;
}

button {
    outline: none !important;
    box-shadow: none !important;
}

ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

figure {
    max-width: 100%;
    max-height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

figure img {
    display: inline-block;

    max-width: 100%;
    max-height: 100%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

button, .btn {
    background: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn:focus {
    box-shadow: none;
    outline: none;
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Abel', sans-serif;
}

a:hover, .link:hover {
    text-decoration: none;
    outline: none;
}

button, .btn {
    outline: none;
    box-shadow: none;
}

p, .paragraph {
    margin: 0;
    padding: 0;
}

form .form-group:active, form .form-group:focus {
    outline: none;
    box-shadow: none;
}

form .form-group:active input, form .form-group:active textarea, form .form-group:focus input, form .form-group:focus textarea {
    outline: none;
    box-shadow: none;
}

form input, form textarea {
    outline: none;
    box-shadow: none;
}

form input:active, form input:focus, form textarea:active, form textarea:focus {
    outline: none;
    box-shadow: none;
}

a:hover {
    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.modal-open {
    padding-right: 0 !important;
}

.row {
    width: 100%;
    margin: 0 auto;
}

.page {
    width: 100%;
    margin: 0;
}

.page-wrapper {
    width: 100%;
    max-width: 1074px;
    margin: 0 auto;
}

.columns {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 15px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    position: relative;

    z-index: 500;
}

.column {
    width: 50%;

    position: relative;
}

.btn {
    border-radius: 0;
    line-height: 60px;
    padding: 0 30px;
}

.btn-submit {
    text-transform: uppercase;
    background: url('../media/images/button.png') no-repeat scroll left center;
    color: var(--color-white);

}

.btn-submit:hover {
    color: var(--color-white);
    background-position: right center;

    -webkit-transition: linear 1.5s;
    -moz-transition: linear 1.5s;
    -ms-transition: linear 1.5s;
    -o-transition: linear 1.5s;
    transition: linear 1.5s;
}

iframe {
    width: 100%;
    height: 100%;
}

/*endregion*/

/*region Tarte au citron  */

#tarteaucitronAlertBig {
    background: var(--color-black) !important;
}

#tarteaucitronPersonalize {
    border: 2px solid var(--color-blue) !important;
    background: var(--color-blue) !important;
    color: var(--color-white) !important;
}

#tarteaucitronPersonalize:hover {
    background: var(--color-white) !important;
    color: var(--color-blue) !important;
}

#tarteaucitronCloseAlert {
    border: 2px solid var(--color-white) !important;
    background: var(--color-white) !important;
    color: var(--color-black) !important;
}

#tarteaucitronCloseAlert:hover {
    background: var(--color-black) !important;
    color: var(--color-white) !important;
}

#tarteaucitronPrivacyUrl {
    color: var(--color-white) !important;
}

#tarteaucitronPercentage {
    background: var(--color-blue) !important;
    box-shadow: none !important;
}

/*endregion*/

/*region reCAPTCHA */

.grecaptcha-badge {
    visibility: collapse !important;
}

/*endregion*/


html, body {
    font-family: 'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 400;
}


/*region NAVIGATION */

.navigation {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 75px;

    background: #2a3443;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 900;

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.navigation .columns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navigation .columns .column:nth-child(1) {
    width: 25%;
}

.navigation .columns .column:nth-child(2) {
    width: 75%;
    max-width: 500px;
}

.navigation .figure {
    height: 35px;

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.navigation .navigation-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navigation .navigation-list a {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    color: var(--color-white);

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.navigation .navigation-list a:hover {
    opacity: .7;
}


.navigation.active {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 50px;

}

.navigation.active .figure {
    height: 25px;
}

.navigation.active .navigation-list a {
    font-size: 16px;
}


.navigation .version-computer {
    display: block;
    width: 100%;
}

.navigation .version-responsive {
    display: none;
}


@media all and (max-width: 600px) {

    .navigation .version-computer {
        display: none;
    }

    .navigation .version-responsive {
        display: block;
        width: 100%;
    }

    .navigation .version-responsive .columns {
        z-index: 800;
    }

    .navigation .version-responsive .column:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .navigation .version-responsive .navigation-container {
        position: fixed;
        top: 75px;
        left: 25px;

        width: calc(100% - 50px);
        height: 0;
        background: #2a3443;


        -webkit-transition: linear .3s;
        -moz-transition: linear .3s;
        -ms-transition: linear .3s;
        -o-transition: linear .3s;
        transition: linear .3s;

        overflow: hidden;

        opacity: 0;
        z-index: 100;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navigation .version-responsive.active .navigation-container {
        height: 250px;
        border-top: 2px solid var(--color-white);
        opacity: 1;
    }

    .navigation.active .version-responsive .navigation-container {
        top: 50px;
    }

    .navigation .version-responsive .navigation-list {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .navigation .version-responsive .navigation-list a {
        line-height: 50px;
    }
}

/*endregion*/

/*region SECTION */
.section {

}

.section .section-header {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 27px 0 50px 0;
}

.section .section-header .section-title {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--font-size-section-title);
    text-align: center;
}

.section .section-header .section-title span {
    font-size: 50px;
    font-weight: 700;
}

.section .section-header .section-subtitle {
    font-size: var(--font-size-section-subtitle);
    font-weight: 200;
    text-align: center;
}

.section .section-content {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.section .section-introduction {
    font-size: var(--font-size-section-text);
    text-align: center;
    width: 100%;
    max-width: calc(100% - 100px);
    margin: 0 auto 25px auto;
}

@media all and (max-width: 1100px) {
    :root {
        --font-size-section-title: 26px;
        --font-size-section-subtitle: 20px;
        --font-size-section-text: 16px;
    }
}

@media all and (max-width: 900px) {
    :root {
        --font-size-section-title: 24px;
        --font-size-section-subtitle: 18px;
        --font-size-section-text: 14px;
    }
}

@media all and (max-width: 900px) {
    :root {
        --font-size-section-title: 20px;
        --font-size-section-subtitle: 16px;
        --font-size-section-text: 12px;
    }
}

/*endregion*/

/*region HEADER */

.page-header {
    width: 100%;

    padding-top: 250px;
    padding-bottom: 250px;

    position: relative;

    background: linear-gradient(to right, rgba(32, 121, 185, 1) 0%, rgba(32, 121, 185, .9) 50%, rgba(25, 166, 158, 0.9) 100%) !important;

    overflow: hidden;
}

.page-header .design {
    width: calc(100% + 200px);
    height: calc(100% + 200px);

    position: absolute;
    left: -100px;

    background: url('../media/images/header.jpg') center center no-repeat;
    background-size: cover;
    z-index: -1;
}

.page-header .header-content {
    width: calc(100% - 50px);
    max-width: 800px;
    margin: 0 auto;
}

.page-header .header-content .page-title {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--font-size-page-title);
    letter-spacing: 6px;
    text-align: left;
    color: var(--color-white);
}

.page-header .header-content .page-subtitle {
    font-size: var(--font-size-page-subtitle);
    color: var(--color-white);

}

.page-header .design-bottom {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100px;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0xMjgwIDBsLTI2NiA5MS41MmE3Mi41OSA3Mi41OSAwIDAgMS0zMC43NiAzLjcxTDAgMHYxNDBoMTI4MHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCAwbC0yNjIuMSAxMTYuMjZhNzMuMjkgNzMuMjkgMCAwIDEtMzkuMDkgNkwwIDB2MTQwaDEyODB6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 100% 100px;

    z-index: 500;
}


@media all and (max-width: 1100px) {

    :root {
        --font-size-page-title: 40px;
        --font-size-page-subtitle: 18px;
    }

    .page-header {
        padding-top: 175px;
        padding-bottom: 200px;
    }


}

@media all and (max-width: 900px) {
    :root {
        --font-size-page-title: 30px;
        --font-size-page-subtitle: 18px;
    }
}

@media all and (max-width: 500px) {
    :root {
        --font-size-page-title: 24px;
        --font-size-page-subtitle: 16px;
    }

    .page-header .header-content .page-title {
        text-align: center;
    }

    .page-header .header-content .page-subtitle {
        text-align: center;
    }
}

@media all and (max-width: 450px) {
    :root {
        --font-size-page-title: 20px;
        --font-size-page-subtitle: 16px;
    }

    .page-header .header-content {
        width: calc(100% - 30px);
    }
}

/*endregion*/

/*region MOTION */
.section-motion {
    padding: 100px 0;
}

.section-motion .section-header {
    opacity: 0;
}

.section-motion .section-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    position: relative;
}

.section-motion .section-content.active:after {
    content: '';


    width: 2px;
    height: calc(100% - 60px);

    position: absolute;
    left: calc(50% - 1px);
    bottom: 30px;

    background: var(--color-grey);

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
    opacity: 1;
}

.section-motion .block-motion {
    width: 50%;

    padding: 15px 0;
    margin: 15px 0;

    border-radius: 10px;

    opacity: 0;
}


.section-motion .block-motion .columns {
    padding: 0;

    position: relative;
}


.section-motion .block-motion .column:nth-child(1) {
    display: none;
}


.section-motion .block-motion:nth-child(1) .column {
    text-align: right;
}

.section-motion .block-motion:nth-child(2) .column {
    text-align: left;
}

.section-motion .block-motion:nth-child(3) .column {
    text-align: right;
}

.section-motion .block-motion:nth-child(4) .column {
    text-align: left;
}

.section-motion .block-motion .column-effect {
    font-size: var(--font-size-motion-aside);
    font-weight: 700;
    margin-bottom: 0;
    color: #2A3443 !important;

}

.section-motion .block-motion .column-title {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    font-size: var(--font-size-motion-title);
    color: rgba(32, 121, 185, 1);
    margin-bottom: 10px;

}

.section-motion .block-motion .column-description {
    font-size: var(--font-size-motion-text);
    font-weight: 200;
    color: var(--color-black);
    margin-bottom: 5px;
}

.section-motion .block-motion .column:nth-child(1) {
    width: 50px;
}

.section-motion .block-motion .column:nth-child(2) {
    width: calc(100% - 50px);
}

@media all and (max-width: 900px) {
    :root {
        --font-size-motion-title: 16px;
        --font-size-motion-text: 14px;
        --font-size-motion-aside: 12px;
    }

    .section-motion .block-motion .column-title span {
        display: block;
    }
}

@media all and (max-width: 600px) {
    :root {

    }

    .section-motion .section-content:after {
        display: none;
    }

    .section-motion .block-motion {
        width: 100%;
    }
}

/*endregion*/

/*region PROJECTS */

.section-projects {
    padding: 50px 0;

    background: var(--color-grey);
}

.section-projects .section-header {
    opacity: 0;
}

.section-projects .section-introduction {
    opacity: 0;
}

.section-projects .block-project-select {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.section-projects .block-project {
    width: 300px;
    height: 300px;

    margin: 15px;
    background: var(--color-white);

    position: relative;

    overflow: hidden;

    opacity: 0;

}

.section-projects .block-project .design {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.section-projects .block-project .project-hover {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(to right, rgba(32, 121, 185, 1) 0%, rgba(32, 121, 185, .9) 50%, rgba(25, 166, 158, 0.9) 100%) !important;

    opacity: 0;
    cursor: pointer;

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.section-projects .block-project .project-hover .project-title {
    color: var(--color-white);
    text-transform: uppercase;
    font-size: var(--font-size-project-title);
}

.section-projects .block-project:hover .design {

    transform: scale(1.2);
    transform-origin: center center;
}

.section-projects .block-project:hover .project-hover {
    opacity: 1;

    z-index: 800;
}

.section-projects .block-project-contents {

    height: 200px;

    width: calc(100% - 100px);
    max-width: 800px;
    margin: 0 auto;


    position: relative;
}

.section-projects .block-project-contents .project-content {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    opacity: 0;
    z-index: -1;

    text-align: center;
}

.section-projects .block-project-contents .project-content .project-title {
    font-size: var(--font-size-project-content-title);
    text-transform: uppercase;
    color: rgba(32, 121, 185, 1);
    margin-bottom: 15px;

}

.section-projects .block-project-contents .project-content .project-description {
    font-size: var(--font-size-project-content-text);
}

.section-projects .block-project-contents .project-content.active {

    opacity: 1;

    -webkit-transition: linear 1s;
    -moz-transition: linear 1s;
    -ms-transition: linear 1s;
    -o-transition: linear 1s;
    transition: linear 1s;
    z-index: 800;
}


@media all and (max-width: 1100px) {
    :root {
        --font-size-project-title: 20px;
        --font-size-project-content-title: 24px;
        --font-size-project-content-text: 18px;
    }

    .section-projects .block-project {
        width: 250px;
        height: 250px;
    }
}

@media all and (max-width: 900px) {
    :root {
        --font-size-project-title: 18px;
        --font-size-project-content-title: 20px;
        --font-size-project-content-text: 14px;
    }

    .section-projects .block-project {
        width: 200px;
        height: 200px;
        margin: 10px;
    }
}

@media all and (max-width: 700px) {
    :root {
        --font-size-project-title: 12px;
        --font-size-project-content-title: 18px;
        --font-size-project-content-text: 12px;
    }

    .section-projects .block-project {
        width: 150px;
        height: 150px;
        margin: 5px;
    }
}

@media all and (max-width: 550px) {
    :root {

    }

    .section-projects .block-project {
        width: 100px;
        height: 100px;
        margin: 10px;
    }
}

/*endregion*/

/*region ACTUALITES */

.section-actualites {

    position: relative;

    background: linear-gradient(to right, rgba(32, 121, 185, 1) 0%, rgba(32, 121, 185, .9) 50%, rgba(25, 166, 158, 0.9) 100%) !important;

    overflow: hidden;
    padding: 0 25px;
}

.section-actualites .design {
    width: calc(100% + 200px);
    height: calc(100% + 200px);

    position: absolute;
    left: -100px;

    background: url('../media/images/banner-design.jpg') center center no-repeat;
    background-size: cover;
    z-index: -1;
}

.section-actualites .section-header {

    padding: 50px 0 25px 0;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

}

.section-actualites .section-header .section-title {
    color: var(--color-white);
}

.section-actualites .section-header .section-subtitle {
    color: var(--color-white);
}

.section-actualites .section-content {
    padding: 25px 0 50px 0;
}

.section-actualites .actualite {
    margin-bottom: 50px;
}

.section-actualites .actualite:nth-child(1) {
    margin-top: 50px;
}

.section-actualites .actualite .actualite-title {
    color: var(--color-white);
    font-size: var(--font-size-actualite-title);
    font-weight: 700;
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
}

.section-actualites .actualite .actualite-date {
    color: var(--color-white);
    font-size: var(--font-size-actualite-subtitle);
    margin-bottom: 5px;
}

.section-actualites .actualite .actualite-content {
    color: var(--color-white);
    font-size: var(--font-size-actualite-text);
}

.section-actualites .actualite .btn-more {
    background: none;
    border: 2px solid var(--color-white);
    border-radius: 5px;
    color: var(--color-white);

    line-height: 25px;
    font-size: var(--font-size-actualite-btn);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 15px;
    margin-top: 10px;

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.section-actualites .actualite .btn-more:hover {
    background: var(--color-white);
    color: #2A3443;

    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
}

.section-actualites .controls {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 25px;
}

.section-actualites .controls .btn-redirect {
    background: none;
    border: 2px solid var(--color-white);
    border-radius: 5px;
    color: var(--color-white);

    line-height: 40px;
    font-size: var(--font-size-actualite-redirect);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 15px;

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.section-actualites .controls .btn-redirect:hover {
    background: var(--color-white);
    color: #2A3443;

    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
}

.section-actualites .controls .btn-redirect .icon {
    margin-left: 5px;

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.section-actualites .controls .btn-redirect:hover .icon {
    margin-left: 10px;
}

@media all and (max-width: 900px) {
    :root {
        --font-size-actualite-title: 18px;
        --font-size-actualite-subtitle: 12px;
        --font-size-actualite-text: 14px;
        --font-size-actualite-btn: 10px;
        --font-size-actualite-redirect: 16px;
    }

    .section-actualites .section-header {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .section-actualites .columns {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .section-actualites .column {
        width: 100%;
    }
}

/*endregion*/

/*region FORM */

.form {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.form .row {
    width: 100%;

    padding: 0;
    margin: 0;
}

.form .form-group {
    width: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    position: relative;
}

.form .form-group label {
    position: absolute;
    top: 0;
    left: 10px;

    line-height: 50px;

    color: rgb(102, 102, 102);

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.form .form-group input.active ~ label:not(.error),
.form .form-group textarea.active ~ label:not(.error) {
    font-size: 9px;
    top: -15px;
}

.form .form-group label.error {
    position: relative;
    width: 100%;
    text-align: right;
    margin: -15px 0 0 0;
    padding: 0 10px;

}

.form .form-group input {
    width: 100%;
    height: 50px;

    border: none;
    border-radius: 5px;
    background: var(--color-grey);

    margin: 0 0 15px 0;
    padding: 0 10px;

    color: rgb(102, 102, 102);
}

.form .form-group textarea {
    width: 100%;
    height: 150px;

    border: none;
    border-radius: 5px;
    background: var(--color-grey);

    padding: 10px;
    color: rgb(102, 102, 102);
    resize: none;
    margin: 0 0 15px 0;
}

.form .form-controls {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.form .form-controls .contact_infos {
    width: 100%;
    font-size: var(--font-size-contact-informations);
    text-align: center;
    margin-top: 10px;
}

.form .form-controls .btn-submit {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;

    line-height: 50px;
    padding: 0 50px;
    border: none;
    border-radius: 5px;
    background: rgba(32, 121, 185, 1);
    color: var(--color-white);

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;

    cursor: pointer;
    font-size: var(--font-size-contact-submit);
}

.modal-open .modal {
    padding-right: 0 !important;
}

.modal-notice .modal-dialog {
    max-width: 100%;

    margin: 0;
}

.modal-notice .notice-title {
    width:calc(100% - 50px);
text-align: center;
    margin-top:25px;
}
.modal-notice .notice-content {
    width:calc(100% - 50px);
text-align: center;
}
.modal-notice .btn-submit {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    line-height: 40px;
    padding: 0 25px;
    border: none;
    border-radius: 5px;
    background: rgba(32, 121, 185, 1);
    color: var(--color-white);
    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
    cursor: pointer;
    font-size: 14px;
}

.modal-notice .btn-submit:hover {
    background: rgba(25, 166, 158, 1);
}

.modal-notice .modal-header {
    border: none;
    border-radius: 0;
}

.modal-notice .modal-content {
    border-radius: 0;
}

.modal-notice .modal-footer {
    border: none;
    border-radius: 0;
}

@media all and (max-width: 900px) {
    .form .form-controls .btn-submit {
        width: 100%;
        text-align: center;
    }
}

/*endregion*/

/*region CONTACT */

.section-contact {
    padding: 100px 0;
    /*background: linear-gradient(to right, rgba(32, 121, 185, 1) 0%, rgba(32, 121, 185, .9) 50%, rgba(25, 166, 158, 0.9) 100%);*/
}

.section-contact .section-header {
    opacity: 0;
}

.section-contact .networks {

    margin-top: 10px;
}

.section-contact .networks .btn-network {
    font-size: var(--font-size-network);
    color: rgba(25, 166, 158, 1);
    margin: 0 5px;

    -webkit-transition: linear .3s;
    -moz-transition: linear .3s;
    -ms-transition: linear .3s;
    -o-transition: linear .3s;
    transition: linear .3s;
}

.section-contact .networks .btn-network:hover {
    color: rgba(32, 121, 185, 1);
}

.section-contact .column:nth-child(1) {
    opacity: 0;
}

.section-contact .column:nth-child(2) {
    height: 345px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
}

.section-contact .section-header .section-title span:nth-child(1) {
    color: rgba(32, 121, 185, 1);
}

.section-contact .section-header .section-title span:nth-child(2) {
    color: rgba(32, 121, 185, 1);
}

.section-contact .section-header .section-title span:nth-child(3) {
    color: rgba(25, 166, 158, 1);
}

.section-contact .informations {
    text-align: center;
    font-size: var(--font-size-contact-informations);
}

.section-contact .informations span {
    font-weight: 700;
}

@media all and (max-width: 900px) {
    :root {

    }

    .section-contact .columns {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
    }

    .section-contact .column {
        width: 100%;
    }

    .section-contact .column:nth-child(2) {
        height: auto;
        padding: 50px 0 50px 0;
    }
}

/*endregion*/

/*region FOOTER */

.page-footer {
    height: 45px;
    width: 100%;

    background-color: #000000 !important;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    color: #666;
    text-transform: uppercase;
    font-size: 14px;
}

.page-footer .column {
    text-align: right;
}

.page-footer a {
    color: #666;
    text-decoration: none;
}

.page-footer a:hover {
    color: var(--color-white);
}

@media all and (max-width: 900px) {
    .page-footer .columns {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .page-footer .column {
        width: 100%;
    }
}

/*endregion*/

/*region MODAL */

.modal-contact .btn-submit {
    background: rgba(32, 121, 185, 1);
}

/*endregion*/


/*region CHART */

/*endregion */
.section-chart {
    max-width: 900px;

    padding: 100px 0;

    margin: 0 auto;
}

.section-chart .figure {
    width: 250px;
    opacity: 0;
    transform: rotate(-45deg);

}

.section-chart .figure.active {
    transform: rotate(0deg);

    -webkit-transition: linear 1s;
    -moz-transition: linear 1s;
    -ms-transition: linear 1s;
    -o-transition: linear 1s;
    transition: linear 1s;
}

.section-chart .columns {


    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-chart .column:nth-child(1) {
    width: 40%;
}

.section-chart .column:nth-child(2) {
    width: 60%;
}

.section-chart .section-introduction {
    text-align: left;
    opacity: 0;

    font-size: var(--font-size-section-text);
}

.section-chart .section-description {
    text-align: left;
    opacity: 0;

    font-size: var(--font-size-section-text);
}

@media all and (max-width: 900px) {
    .section-chart .columns {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .section-chart .section-introduction {
        text-align: center;
    }

    .section-chart .section-description {
        text-align: center;
    }

    .section-chart .column:nth-child(1) {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
    }

    .section-chart .column:nth-child(2) {
        width: 100%;
    }
}

/*region BANDEAU */

.section-numbers {
    background: rgb(42, 52, 66);

    padding: 65px 25px;
}

.section-numbers .columns {
    padding: 0;
}

.section-numbers .number-description {
    color: var(--color-white);

    font-size: var(--font-size-number-text);
    opacity: 0;
}
.section-numbers .number-description span{
    display: block;

}

.section-numbers .number-block {
    position: relative;
    padding: 0 40px 0 20px;
    opacity: 0;
}

.section-numbers .number {
    color: var(--color-white);
    font-size: var(--font-size-number);
    line-height: 50px;

    padding: 0 20px 0 0;
}

.section-numbers .percent {
    position: absolute;
    top: -10px;
    right: 30px;

    font-size: var(--font-size-number-percentage);
    color: var(--color-white);
}

.section-numbers .column {
    padding: 20px 0;
}

.section-numbers .column:nth-child(1) {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    border-right: 1px solid var(--color-white);
}

.section-numbers .column:nth-child(2) {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.section-numbers .column:nth-child(1) .number-description {
    text-align: right;
}

.section-numbers .column:nth-child(2) .number-description {
    text-align: left;
}


@media all and (max-width: 1050px) {
    :root {
        --font-size-number: 50px;
        --font-size-number-percentage: 25px;
        --font-size-number-text: 14px;
    }

    .section-numbers .number-block {
        padding: 0 30px 0 20px;
    }

    .section-numbers .number {
        line-height: 40px;
        padding: 0 20px 0 0;
    }

    .section-numbers .percent {
        position: absolute;
        top: -10px;
        right: 25px;
    }
}

@media all and (max-width: 900px) {
    :root {
        --font-size-number: 40px;
        --font-size-number-percentage: 20px;
        --font-size-number-text: 12px;
    }

    .section-numbers .number-block {
        padding: 0 20px;
    }

    .section-numbers .number {
        line-height: 30px;
        padding: 0 20px 0 0;
    }

    .section-numbers .percent {
        position: absolute;
        top: -10px;
        right: 15px;
    }
}

@media all and (max-width: 750px) {
    :root {
        --font-size-number: 40px;
        --font-size-number-percentage: 20px;
        --font-size-number-text: 12px;
    }

    .section-numbers .columns {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .section-numbers .column {
        width: 100%;

    }

    .section-numbers .column:nth-child(1) {
        border: none;
    }

    .section-numbers .column:nth-child(1):after {
        content: '';

        width: 100px;
        height: 1px;

        background: var(--color-white);

        position: absolute;
        bottom: 0;
        left: calc(50% - 50px);
    }

    .section-numbers .column:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section-numbers .column:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

@media all and (max-width: 450px) {
    .section-numbers .number-description span{
        display: inline;
    }
}

/*endregion*/


/*region HAMBURGER*/

.hamburger {
    transform: scale(.7);

    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger.is-active:hover {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #fff;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

/*
   * 3DX
   */
.hamburger--3dx .hamburger-box {
    perspective: 80px;
}

.hamburger--3dx .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateY(180deg);
}

.hamburger--3dx.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dx.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DX Reverse
   */
.hamburger--3dx-r .hamburger-box {
    perspective: 80px;
}

.hamburger--3dx-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateY(-180deg);
}

.hamburger--3dx-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dx-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DY
   */
.hamburger--3dy .hamburger-box {
    perspective: 80px;
}

.hamburger--3dy .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(-180deg);
}

.hamburger--3dy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DY Reverse
   */
.hamburger--3dy-r .hamburger-box {
    perspective: 80px;
}

.hamburger--3dy-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg);
}

.hamburger--3dy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DXY
   */
.hamburger--3dxy .hamburger-box {
    perspective: 80px;
}

.hamburger--3dxy .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg) rotateY(180deg);
}

.hamburger--3dxy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dxy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DXY Reverse
   */
.hamburger--3dxy-r .hamburger-box {
    perspective: 80px;
}

.hamburger--3dxy-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
}

.hamburger--3dxy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dxy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * Arrow
   */
.hamburger--arrow.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrow.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
   * Arrow Right
   */
.hamburger--arrow-r.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.hamburger--arrow-r.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
   * Arrow Alt
   */
.hamburger--arrowalt .hamburger-inner::before {
    transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt .hamburger-inner::after {
    transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt.is-active .hamburger-inner::before {
    top: 0;
    transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
    transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.hamburger--arrowalt.is-active .hamburger-inner::after {
    bottom: 0;
    transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
    transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/*
   * Arrow Alt Right
   */
.hamburger--arrowalt-r .hamburger-inner::before {
    transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt-r .hamburger-inner::after {
    transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
    top: 0;
    transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
    transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
    transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/*
   * Arrow Turn
   */
.hamburger--arrowturn.is-active .hamburger-inner {
    transform: rotate(-180deg);
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
   * Arrow Turn Right
   */
.hamburger--arrowturn-r.is-active .hamburger-inner {
    transform: rotate(-180deg);
}

.hamburger--arrowturn-r.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrowturn-r.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
   * Boring
   */
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
    transition-property: none;
}

.hamburger--boring.is-active .hamburger-inner {
    transform: rotate(45deg);
}

.hamburger--boring.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.hamburger--boring.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
}

/*
   * Collapse
   */
.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Collapse Reverse
   */
.hamburger--collapse-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse-r .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse-r.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Elastic
   */
.hamburger--elastic .hamburger-inner {
    top: 2px;
    transition-duration: 0.275s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease;
}

.hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(135deg);
    transition-delay: 0.075s;
}

.hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0;
}

.hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s;
}

/*
   * Elastic Reverse
   */
.hamburger--elastic-r .hamburger-inner {
    top: 2px;
    transition-duration: 0.275s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic-r .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease;
}

.hamburger--elastic-r .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic-r.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(-135deg);
    transition-delay: 0.075s;
}

.hamburger--elastic-r.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0;
}

.hamburger--elastic-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(270deg);
    transition-delay: 0.075s;
}

/*
   * Emphatic
   */
.hamburger--emphatic {
    overflow: hidden;
}

.hamburger--emphatic .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in;
}

.hamburger--emphatic .hamburger-inner::before {
    left: 0;
    transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}

.hamburger--emphatic .hamburger-inner::after {
    top: 10px;
    right: 0;
    transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}

.hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important;
}

.hamburger--emphatic.is-active .hamburger-inner::before {
    left: -80px;
    top: -80px;
    transform: translate3d(80px, 80px, 0) rotate(45deg);
    transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hamburger--emphatic.is-active .hamburger-inner::after {
    right: -80px;
    top: -80px;
    transform: translate3d(-80px, 80px, 0) rotate(-45deg);
    transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*
   * Emphatic Reverse
   */
.hamburger--emphatic-r {
    overflow: hidden;
}

.hamburger--emphatic-r .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r .hamburger-inner::before {
    left: 0;
    transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r .hamburger-inner::after {
    top: 10px;
    right: 0;
    transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important;
}

.hamburger--emphatic-r.is-active .hamburger-inner::before {
    left: -80px;
    top: 80px;
    transform: translate3d(80px, -80px, 0) rotate(-45deg);
    transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hamburger--emphatic-r.is-active .hamburger-inner::after {
    right: -80px;
    top: 80px;
    transform: translate3d(-80px, -80px, 0) rotate(45deg);
    transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*
   * Minus
   */
.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
    transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear;
}

.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
    opacity: 0;
    transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear;
}

.hamburger--minus.is-active .hamburger-inner::before {
    top: 0;
}

.hamburger--minus.is-active .hamburger-inner::after {
    bottom: 0;
}

/*
   * Slider
   */
.hamburger--slider .hamburger-inner {
    top: 2px;
}

.hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s;
}

.hamburger--slider .hamburger-inner::after {
    top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}

.hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg);
}

/*
   * Slider Reverse
   */
.hamburger--slider-r .hamburger-inner {
    top: 2px;
}

.hamburger--slider-r .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s;
}

.hamburger--slider-r .hamburger-inner::after {
    top: 20px;
}

.hamburger--slider-r.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(-45deg);
}

.hamburger--slider-r.is-active .hamburger-inner::before {
    transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
    opacity: 0;
}

.hamburger--slider-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(90deg);
}

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Spin Reverse
   */
.hamburger--spin-r .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin-r .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin-r .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin-r.is-active .hamburger-inner {
    transform: rotate(-225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
    top: 2px;
    transition: background-color 0s 0.13s linear;
}

.hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring.is-active .hamburger-inner {
    transition-delay: 0.22s;
    background-color: transparent !important;
}

.hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg);
}

/*
   * Spring Reverse
   */
.hamburger--spring-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear;
}

.hamburger--spring-r .hamburger-inner::before {
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring-r.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spring-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear;
}

.hamburger--spring-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Stand
   */
.hamburger--stand .hamburger-inner {
    transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}

.hamburger--stand .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand.is-active .hamburger-inner {
    transform: rotate(90deg);
    background-color: transparent !important;
    transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}

.hamburger--stand.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--stand.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Stand Reverse
   */
.hamburger--stand-r .hamburger-inner {
    transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}

.hamburger--stand-r .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand-r .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand-r.is-active .hamburger-inner {
    transform: rotate(-90deg);
    background-color: transparent !important;
    transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}

.hamburger--stand-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--stand-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Vortex
   */
.hamburger--vortex .hamburger-inner {
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear;
}

.hamburger--vortex .hamburger-inner::before {
    transition-property: top, opacity;
}

.hamburger--vortex .hamburger-inner::after {
    transition-property: bottom, transform;
}

.hamburger--vortex.is-active .hamburger-inner {
    transform: rotate(765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay: 0s;
}

.hamburger--vortex.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.hamburger--vortex.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
}

/*
   * Vortex Reverse
   */
.hamburger--vortex-r .hamburger-inner {
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear;
}

.hamburger--vortex-r .hamburger-inner::before {
    transition-property: top, opacity;
}

.hamburger--vortex-r .hamburger-inner::after {
    transition-property: bottom, transform;
}

.hamburger--vortex-r.is-active .hamburger-inner {
    transform: rotate(-765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
    transition-delay: 0s;
}

.hamburger--vortex-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.hamburger--vortex-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
}

/*endregion*/