:root {
    --text-color-light: #EFD19F;
    --background-button-light: #FDA87D;
    --background-lighter: #EFD19F; 
    --backgroudn-dark: #4C2B20;
    --text-color-dark: #4C2B20;
    --color-orange: #E6B769;
}

@media only screen and (max-width: 1023px) {
    .hamburger {
        padding: 15px 0;
        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-box {
        width: 40px;
        height: 14px;
        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: 2px;
        background-color: var(--color-orange);
        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;
    }
    .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);
    }

    /* Menu */
    header {
        top: 0;
        background-color: transparent;
    }    
    header.is-active {
        position: fixed;
        height: 100vh;
    }
    
    header .menu-mobile-background {
        transform-origin: top left;   
        height: 100dvh;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--background-lighter);
        transform: rotate(90deg); 
        opacity: 0;
    }
    header.is-closing .menu-mobile-background {
        animation: closeMenu .2s ease-in-out forwards;
    }
    header.is-active .menu-mobile-background {
        animation: openMenu .7s ease-in-out forwards, switchOrigin .7s ease-in-out forwards; 
    }
    header .logo {
        position: absolute;
        transform: translate(0, -25px);
        transition: all .2s ease-in-out;
    }
    header.is-active .logo {
        transition: all .7s ease-in-out;
        transform: translate(30px, calc(50vh - 250px));        
    }
    header .menu {
        opacity: 0;
        position: absolute;
        z-index: -100;
        transition: opacity .7s ease-in-out;
    }
    header .menu .active a {
        border-bottom: 3px solid var(--text-color-dark);
    }
    header .menu .active:after {
        display: none
    }
    header.is-closing {
        transition: opacity .2s ease-in-out !important;        
    }
    header.is-closing .button--dark {
        display: none !important;
        transition: opacity 0s ease-in-out !important;        

    }
    
    header.is-active .menu {
        z-index: 1;
        top: calc(50% - 50px);
        transform: translateY(-50%);
        margin-left: 30px;
        font-size: 1.2rem;
        opacity: 1;
    }    

    @keyframes openMenu {
        0% { transform: rotate(90deg); opacity: 0; }
        60% { transform: rotate(0deg); }
        70% { transform: rotate(-2deg); }
        100% { transform: rotate(0deg); opacity: 1; }
    }
    @keyframes switchOrigin {
        0%, 60% { transform-origin: top left; }
        61%, 100% { transform-origin: top right; }
    }    
    @keyframes closeMenu {
        0% { transform: rotate(0); opacity: 1; }
        100% { transform: rotate(90deg); opacity: 0; }
    }

    footer * {
        font-size: .8rem;
    }
    
    .container, .container-bigger {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    header .container, footer .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    h1 {
        font-size: 1.25rem;
        line-height: 1.25;
    }
    h1::after {
        width: 100%;
    }
    h2 {
        font-size: 1rem;
        line-height: 1;
    }
    
    .button {
        padding: 5px 10px;
        font-size: 14px;
    }
    .button.button--dark {
        background-color: var(--background-button-light);
        color: var(--text-color-dark) !important;
    }
    header {
        background-color: var(--backgroudn-dark) !important;
    }
    header .button.button--dark {
        background-color: var(--backgroudn-dark) !important;
        color: #EFD19F !important;
    }  
    .button--send {
        margin-top: 0;
    }  
    
    /* Home */
    #home .container {
        padding: 100px 0 0 0;
        transform: none;
    }
    #home .home__content {
        margin-left: auto;
        padding: 100px 0;
        background-color: transparent;
        color: var(--text-color-light);
        text-align: center;
    }
    #home .home__content h1 {
        color: var(--text-color-light);
    }
    #home .home__content .home__content-vertical {
        margin-left: auto;
    }
    #home .home__image {
        height: auto;
        width: 120%; 
        opacity: .5 !important;
        left: 0;
        transform: scale(1.5) !important;   
    }
    /* Gallery */
    #galerie .gallery-images {
        height: auto;
    }
    #galerie .gallery-images img {
        aspect-ratio: 1/1;
    }
    
    #forfaits .forfait-content h2 {
        font-size: 1.4rem;
    }
    .animate-caravane {
        height: auto;
    }
}