html,body{
    margin:0;
    padding:0;
    background:#fff;
    font-size:14px;
    height:100%;
    width:100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: grayscale;
}

body.home{
    overflow:hidden;
    height:100dvh;
}

*{
    font-family:'Neue Haas Grotesk';
}

header{
    display:block;
    width:100%;
    position:fixed;
    z-index:1000;
    height:auto;
    top:0px;
    padding-top:4px;
}

header h1{
    margin:0;
    padding:0px 0 0 0;
    transform: scale(1.05,1);
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    pointer-events: none;
}

header h1 a{
    font-family:'Raleway ExtraBold';
    text-transform: uppercase;
    font-size:3rem;
    color:#000;
    text-decoration: none;
    letter-spacing: 0.7rem;
    white-space: nowrap;
    pointer-events: auto;
}

header #menus{
    width:100%;
    text-transform: uppercase;
    display:flex;
    justify-content: space-between;
    align-items: top;
    width:100%;
}

header ul{
    list-style: none;
    padding:16px 22px 0 22px;
    margin:0;
}

header ul.sub_menu{
    margin:0;
    padding:0;
}
header ul.sub_menu.hidden{
    display:none;
}

header .left ul.sub_menu li{
    float:left;
    margin-right:10px;

}

header .right ul.sub_menu li{
    float:right;
    margin-left:10px;
}

header ul.right{
    text-align:right;
}

header ul li{
    font-size:0.75rem;
    line-height:1.2rem;
    font-family: "Neue Haas Grotesk";
    letter-spacing: 0.1rem;
}

header ul.sub_menu li{
    font-size:0.6rem;
    text-transform: none;
}

header ul li a{
    color:#000;
    text-decoration: none;
    padding:4px 6px;
}

header ul.sub_menu li a{
    transition: all 0.25s ease-in-out;
    border:1px solid rgba(255,255,255,0);
}
header ul.sub_menu li a.active{
    /*color:rgba(0,0,0,.4);*/
    color:#5F5D5D;
    border:1px solid #5F5D5D;
}

header ul.sub_menu li a:hover{
    /*text-decoration: underline;*/
    border:1px solid #5F5D5D;
    transition: all 0.25s ease-in-out;
}

#menuToggle{
    display:none;
}

/*@media (max-width:768px) {*/

    header h1{
        margin:0 auto;
        text-align: center;
        padding-top:0.2rem;
        position: relative;
        z-index:20;
    }

    header h1 a{
        font-size:2.2rem;
    }

    header #menus ul{
        display:none;
    }

    #menuToggle
    {
        width: 100vw;
        height:100vh;
        overflow:hidden;
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        z-index: 1;
        pointer-events: none;
    }

    #menuToggle input
    {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
      -webkit-touch-callout: none;
    }

    #menu-icon{
        z-index:10;
        position:absolute;
        right:17px;
        top:21px;
        cursor:pointer;
        background: transparent;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
                  pointer-events:auto;
    }

    #menu-icon span
    {
      display: block;
      width: 28px;
      height: 2px;
      margin-bottom: 5px;
      position: relative;
      background: #000;
      border-radius: 3px;
      z-index: 1;
      transform-origin: 4px 0px;
    }


    #menuToggle input:checked ~ #menu-icon{
        opacity: 0;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }

    #mobile_menu
    {
        position: absolute;
        width: 100vw;
        height:100vh;
        overflow:hidden;
        top: 0px;
        padding:100px 0 0 0;
        text-align: center;
        background: rgba(255,255,255,.95);
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(200%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        pointer-events:auto;
    }

    #mobile_menu ul.sub_menu{
        padding:0 0 30px 0;
    }

    #mobile_menu .sub_menu li{
        font-size:13px;
        margin-right:0 !important;
    }

    #mobile_menu li
    {
        float:none;
        padding: 14px 0;
        font-size: 20px;
        line-height:14px;
        text-transform: uppercase;
    }

    #mobile_menu ul.sub_menu li a{
        text-transform: lowercase !important;
    }


    #menuToggle input:checked ~ ul
    {
        transform: none;
    }

    #menu-close{
        cursor:pointer;
        display:block;
        position:relative;
        margin:40px auto 0 auto;
        transform: rotate(-45deg);
        width:33px;
        height:33px;
    }

    #menu-close span
    {
        top:15px;
        position:absolute;
        display: block;
        width: 33px;
        height: 2px;
        background: #000;
        border-radius: 3px;
        z-index: 1;
    }

    #menu-close span:nth-child(2){
        transform: rotate(90deg);
    }
/*}*/

@media (max-width:580px) {

    header h1 a{
        font-size:1.6rem;
        line-height:3.2rem;

    }
}
@media (max-width:480px) {

    header h1 a{
        font-size:1.3rem;
        line-height:3.2rem;
    }
}

@media (max-width:380px) {

    header h1 a{
        font-size:1.1rem;
        line-height:3.2rem;
    }
}

main{
    height:100%;
    width:100%;
    z-index:50;
    padding-top:55px;
    box-sizing: border-box;
}


.full-screen-gallery{
    display:block;
    background:#FFF;
    height: calc(100dvh - 55px);
    width:100%;
    padding:20px;
    box-sizing: border-box;
    position: relative;
}

/*-----------------------------------------------------*/
/* splide */
/*-----------------------------------------------------*/

#slides{
    position: relative;
    height: calc(100dvh - 55px);
    max-height:100%;
    object-fit: contain;
}

.splide__track{
    height:100%;
}

.splide .next,
.splide .prev{
    width:50%;
    height:100%;
    position: absolute;
    background: transparent;
    border:0;
    z-index:10;
}

.splide .prev{
    cursor: url('../gfx/prev.png'),auto;
    left:0;
}

.splide .next{
    cursor: url('../gfx/next.png'),auto;
    right:0;
}

.splide .prev svg,.splide .next svg{
    display:none;
}

.splide__slide {
    height:100%;
    position: relative;
}

.splide__slide img{
    position: relative;
    box-sizing: border-box;
    object-fit: cover;
    object-position: center center;
    height:100%;
    width:100%;
    transition: opacity 0.75s;
}

@media (max-width:768px) {
    .splide .next,
    .splide .prev{
        display:none;
    }
}

/*-----------------------------------------------------*/
/* homepage pagination */
/*-----------------------------------------------------*/

body .splide__pagination{
    bottom: 1rem;
    z-index: 20;
}

body .splide__pagination__page{
    margin:10px;
    background: #FFF;
    width:10px;
    height:10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
}

body .splide__pagination__page:after {
    content: '';
    position: absolute;
    inset: -6px;
}

body .splide__pagination__page.is-active{
    background: #000;
    transform: scale(1.3);
}

/*-----------------------------------------------------*/
/* glightbox */
/*-----------------------------------------------------*/

.goverlay{
    background: rgba(0,0,0,.02) !important;
}

.glightbox-container .gslide-inner-content {
    max-width: 80vw !important;
    max-height: calc(100vh - 140px) !important;
}

.gslide-image img{
    max-width: 100% !important;
    max-height: calc(100vh - 140px) !important;
}

.glightbox-clean .gprev{
    left:10vw !important;
    cursor: url('../gfx/prev.png'),auto;
}

.glightbox-clean .gnext{
    right:10vw !important;
    cursor: url('../gfx/next.png'),auto;
}

.glightbox-clean .gnext, .glightbox-clean .gprev{
    border-radius:0 !important;
    width:40vw !important;
    background:rgba(0,0,0,0.0) !important;
}

.glightbox-clean .gnext svg, .glightbox-clean .gprev svg{
    display:none;
}


@media (min-width:768px) {

    .gclose.gbtn{
        top:auto !important;
        left:auto !important;
        right:20px !important;
        bottom:20px !important;
        background:transparent !important;
    }
}

@media (max-width:768px) {

    .ginner-container{
        max-height: calc(100vh - 140px) !important;
    }

    .glightbox-container .gslide-inner-content {
        max-width: calc(100vw - 40px) !important;
        max-height: calc(100vh - 140px) !important;
    }

    .gslide-image img{
        max-height:85vh !important;
    }

    .glightbox-clean .gprev,
    .glightbox-clean .gnext{
        display:none;
    }
    .gclose.gbtn{
        left:13px !important;
        top:11px !important;
        right:auto !important;
        background:transparent !important;
    }
    .gclose.gbtn svg path{
        fill:#000 !important;
    }

    .glightbox-clean .gprev{
        display:none;
        left:20px !important;
        width:calc(50vw - 20px) !important;
    }

    .glightbox-clean .gnext{
        display:none;
        right:20px !important;
        width:calc(50vw - 20px) !important;
    }
}

body .gslide-video{
   margin:auto;
}

.glightbox-clean .gslide-media{
    box-shadow: none !important;
}

.glightbox-clean .gslide-media img,
.glightbox-clean .gslide-media.gslide-video{
    box-shadow: 1px 2px 9px 0 rgba(0,0,0,.2) !important;
}

.glightbox-clean .gclose path, .glightbox-clean .gnext path, .glightbox-clean .gprev path{
    fill:#000 !important;
}

.glightbox-open {
    height: auto;
    overflow: auto !important;
}
/*-----------------------------------------------------*/
/* lazy */
/*-----------------------------------------------------*/

video.lazy,
img.lazy {
    opacity: 0;
}

video:not(.initial),
img:not(.initial) {

    transition: all 1s;
}

video.initial,
video.loaded,
video.error,
img.initial,
img.loaded,
img.error {
    opacity: 1;
}

img:not([src]) {
    visibility: hidden;
}