body.cgo-lock-scroll{
    overflow:hidden;
}

.cgo-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.5);

    opacity:0;
    visibility:hidden;

    transition:all 0.3s ease;
}

.cgo-overlay.active{
    opacity:1;
    visibility:visible;
}

.cgo-offcanvas{
    position:fixed;

    background:#fff;

    transition:all 0.3s ease;

    opacity:0;
    visibility:hidden;

    overflow:auto;

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

/* POSITIONS */

.cgo-position-right{
    top:0;
    right:0;
    width:450px;
    height:100vh;

    transform:translateX(100%);
}

.cgo-position-left{
    top:0;
    left:0;
    width:450px;
    height:100vh;

    transform:translateX(-100%);
}

.cgo-position-top{
    top:0;
    left:0;
    width:100%;
    height:400px;

    transform:translateY(-100%);
}

.cgo-position-bottom{
    bottom:0;
    left:0;
    width:100%;
    height:400px;

    transform:translateY(100%);
}

/* ACTIVE */

.cgo-offcanvas.active{
    opacity:1;
    visibility:visible;
    transform:translate(0,0);
}

.cgo-close{
    position:absolute;

    top:20px;
    right:20px;

    z-index:10;

    background:none;
    border:none;

    cursor:pointer;

    font-size:32px;
}

.cgo-panel-inner{
    height:100%;
}

/* TABLET */

@media(max-width:1024px){

    .cgo-position-right,
    .cgo-position-left{
        width:400px;
    }
}

/* MOBILE */

@media(max-width:767px){

    .cgo-position-right,
    .cgo-position-left{
        width:100vw;
    }
}