/* =========================================
   HAMBURGER
========================================= */

.cc-menu-toggle{
    position: fixed;
    top: 40px;
    right: 40px;
    width: 70px;
    height: 70px;
    border: none;
    border-radius:14px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    z-index: var(--z-menu);
    transition:
        background .4s ease,
        transform .4s ease;
}

.cc-menu-toggle:hover{
    background: rgba(255,255,255,.15);
    transform: scale(1.05);
}

.cc-menu-toggle span{
    width: 28px;
    height: 2px;

    background: white;

    display: block;

    transition:
        transform .4s ease,
        opacity .4s ease;
}


/* =========================================
   TOGGLE ACTIVE
========================================= */

body.menu-open .cc-menu-toggle span:nth-child(1){
    transform:
        translateY(9px)
        rotate(45deg);
}

body.menu-open .cc-menu-toggle span:nth-child(2){
    opacity: 0;
}

body.menu-open .cc-menu-toggle span:nth-child(3){
    transform:
        translateY(-9px)
        rotate(-45deg);
}


/* =========================================
   OFFCANVAS
========================================= */

.cc-offcanvas{
    position: fixed;
    inset: 0;
    background:
        rgba(5,10,15,.82);
    backdrop-filter: blur(20px);
    z-index: var(--z-menu);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .6s ease,
        visibility .6s ease;
}

body.menu-open .cc-offcanvas{
    opacity: 1;
    visibility: visible;
}


/* =========================================
   INNER
========================================= */

.cc-offcanvas-inner{
    position: absolute;

    top: 0;
    right: 0;

    width: min(540px, 100%);
    height: 100%;

    padding:
        140px
        70px;

    background: #fff;

    transform: translateX(100%);

    transition:
        transform .7s cubic-bezier(.77,0,.175,1);

    overflow-y: auto;
}

body.menu-open .cc-offcanvas-inner{
    transform: translateX(0);
}


/* =========================================
   CLOSE
========================================= */

.cc-menu-close{
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: calc(var(--z-menu) + 1);
    width: 70px;
    height: 70px;
    border: none;
    border-radius: 14px;
    background: rgba(0,0,0,.05);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition:
        background .4s ease,
        transform .4s ease;
}

.cc-menu-close:hover{
    background: #000;
    transform: scale(1.05);
}

.cc-menu-close:hover span{
    background: #fff;
}

.cc-menu-close span{
    position: absolute;

    width: 28px;
    height: 2px;

    background: #000;

    border-radius: 2px;
}

.cc-menu-close span:nth-child(1){
    transform: rotate(45deg);
}

.cc-menu-close span:nth-child(2){
    transform: rotate(-45deg);
}


/* =========================================
   NAV
========================================= */

.cc-offcanvas-nav{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.cc-offcanvas-nav a{
    position:relative;

    color:#000;
    text-decoration:none;

    font-size:clamp(20px,4vw,25px);
    font-weight:300;
    letter-spacing:.02em;

    transform:translateX(40px);
    opacity:0;

    transition:
        opacity .6s ease,
        transform .6s ease,
        color .3s ease;
}

.cc-offcanvas-impr  {
    display:flex;
    flex-wrap:wrap;
    column-gap: 30px;
    row-gap: 15px;
}

.cc-offcanvas-impr a {
    font-size: 18px;
}

.postid-1918 .cc-offcanvas-nav a.cc-offcanvas-toscana,
.postid-1935 .cc-offcanvas-nav a.cc-offcanvas-popart,
.postid-1957 .cc-offcanvas-nav a.cc-offcanvas-foto-kunst,
.postid-2024 .cc-offcanvas-nav a.cc-offcanvas-bild-story
{pointer-events: none;color:#b8babb;}

body.menu-open .cc-offcanvas-nav a{
    opacity:1;
    transform:translateX(0);
}

body.menu-open .cc-offcanvas-nav a:nth-child(1){
    transition-delay:.15s;
}

body.menu-open .cc-offcanvas-nav a:nth-child(2){
    transition-delay:.22s;
}

body.menu-open .cc-offcanvas-nav a:nth-child(3){
    transition-delay:.29s;
}

body.menu-open .cc-offcanvas-nav a:nth-child(4){
    transition-delay:.36s;
}

.cc-offcanvas-nav a:hover{
    color:#ef0bc2;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .cc-menu-toggle{
        top:20px;
        right:20px;

        width:58px;
        height:58px;
    }

    .cc-menu-close{
        top:20px;
        right:20px;

        width:58px;
        height:58px;
    }

    .cc-offcanvas-inner{
        padding:
            120px
            35px;
    }

}