@font-face {
    font-family: "PP Kyoto";
    src: url('../fonts/PPKyoto-VariableUprightVF.woff2') format("woff2");
    font-style: normal;
    font-weight: 100 900; 
}

@font-face {
    font-family: "PP Kyoto Italic";
    src: url('../fonts/PPKyoto-VariableItalicVF.woff2') format("woff2");
    font-style: normal;
    font-weight: 100 900; 
}

:root {
    --black: #131313;
    --white: #fff;
    --offwhite: #FAF5F1;
    --orange: #E5856C;
}

.form {display: none!important;}

body,td,th {
    font-family: "PP Kyoto", sans-serif;
    font-weight: 400;
    font-size:16px;
	line-height:1.2;
    margin:0;
    padding:0;
    background:var(--offwhite);
	color:var(--black);
	text-align:left;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.hero-active {overflow: hidden;}

b, strong, h1, h2 {font-weight: normal;}

a {color:inherit;text-decoration:none;border-bottom:0px solid transparent;opacity: 1;}
a:hover {color:inherit;text-decoration:none;border-bottom:0px solid transparent;opacity: 0.5;}

a.no-underline {color:inherit;text-decoration:none;border-bottom:0px solid transparent;opacity: 1;}
a.no-underline:hover {color:inherit;text-decoration:none;border-bottom:0px solid transparent;opacity: 1;}
a.no-underline .link-underline span {border-bottom:1px solid transparent;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    transition: all 0.2s ease-in;
}
a.no-underline:hover .link-underline span{border-bottom:1px solid;}

a {
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    transition: all 0.3s ease-in;
}

#main {min-height: 100vh;overflow: hidden;transition: opacity 0.4s ease-in-out;}

.image-wrapper {
    transition: transform 0.2s ease-out;
    will-change: transform;
}

body.id-archives {background: var(--white);}

.type-union {font-family: Arial, Helvetica, sans-serif;font-weight: 400;}
.type-kyoto {font-family: "PP Kyoto", sans-serif;font-weight: 400;}
.type-kyoto-italic {font-family: "PP Kyoto Italic", sans-serif;font-weight: 400;}

.weight-bold {font-weight: 600;}
.weight-heavy {font-weight: 800;}

.type-jp {
    font-family: "kozuka-mincho-pro", serif;
    font-weight: 400;
    font-style: normal;
}
.erg-logo {display: inline-block;vertical-align: middle;}
.erg-logo svg {width: 60px;}
.nav-block .erg-logo svg {width: 70px;}
.nav-block-footer .erg-logo svg {width: 70px;}

.size-nav {font-size: 18px;font-weight: 800;letter-spacing: 5px;}
.size-xlarge {font-size: 95px;}
.size-large {font-size: 24px;}
.size-medium {font-size: 20px;}
.size-small {font-size:14px;}

.letter-spacing {letter-spacing: 5px;}


.process {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    -webkit-transition: opacity 0.4s ease-out 0.4s;
    -moz-transition: opacity 0.4s ease-out 0.4s;
    transition: opacity 0.4s ease-out 0.4s;
}
.swiper-slide {
    width: 100vw;
    height: 100vh;
    padding: 100px;
    box-sizing: border-box;
}
.process .swiper-slide img {
    width: auto;
    height: auto;
    max-width: 75%;
    max-height: 75%;
    display: block;
    margin: 0px !important;
    padding: 0px !important;
    position: absolute;
    
}

/* CENTER CENTER */
.process .swiper-slide.center-center img {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* CENTER LEFT */
.process .swiper-slide.center-left img {
    top: 50%;
    left: 100px;
    right: auto;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

/* CENTER RIGHT */
.process .swiper-slide.center-right img {
    top: 50%;
    left: auto;
    right: 100px;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}


/* TOP LEFT */
.process .swiper-slide.top-left img {
    top: 100px;
    left: 100px;
    right: auto;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* TOP CENTER */
.process .swiper-slide.top-center img {
    top: 100px;
    left: 50%;
    right: auto;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/* TOP RIGHT */
.process .swiper-slide.top-right img {
    top: 100px;
    left: auto;
    right: 100px;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}


/* BOTTOM LEFT */
.process .swiper-slide.bottom-left img {
    top: auto;
    bottom: 100px;
    left: 100px;
    right: auto;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* BOTTOM CENTER */
.process .swiper-slide.bottom-center img {
    top: auto;
    bottom: 100px;
    left: 50%;
    right: auto;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/* BOTTOM RIGHT */
.process .swiper-slide.bottom-right img {
    top: auto;
    bottom: 100px;
    left: auto;
    right: 100px;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.swiper {height:100%;}

.swiper-slide img {opacity: 0!important;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}
.swiper-slide-prev img {opacity: 0.1!important;}
.swiper-slide-active img {opacity: 1!important;}

.dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 100%;
    background: var(--black);
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s ease-out;
}


/* SWIPER DOT HOVER */

.swiper-button-next:hover .dot,
.swiper-button-prev:hover .dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}


/* LIGHTBOX NAV */

.lightbox-nav {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* LIGHTBOX DOT HOVER */

.lightbox-nav:hover .dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.lightbox-meta {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}



.swiper-button-next:after, .swiper-button-prev:after {font-size: 0px!important;}


.swiper-button-next {right:25px!important;} 
.swiper-button-prev {left:25px!important;}

.swiper-pagination {pointer-events: none!important;top:50%!important;transform: translate(0, -0.8em)!important;z-index: 999;color: #fff!important;}

.margin-bottom {margin-bottom: 12px;}
.trans-uppercase {text-transform: uppercase;}

.image-wrapper {position: relative;font-size: 0;line-height: 0;margin:-5vw -10vw 0 -10vw;text-align: center;}
.single-image {width: 20vw;height:auto;display: inline-block;font-size: 0;line-height: 0;margin: 0 1vw 1vw 1vw; }

.single-image .rel img {
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    transform: scale(0.85);
}

.single-image:hover .rel img {
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(1.1);
    z-index: 666;
}


.rel {position: relative;background: rgba(0,0,0,0);}
.rel img {width: 100%;height: auto;position: absolute;top: 0;left: 0;}

.nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px; /* Set your desired nav width */
    line-height: 80px;
    /* Displays text vertically without breaking layout positioning */
    writing-mode: vertical-rl;
    box-sizing: border-box;
    z-index: 666;
    pointer-events: none;
}
.nav-content {
    padding: 70px 0 0 0;
    box-sizing: border-box;
    height: 100%;
}

.nav-block {
    background: rgba(229, 133, 108,0.95);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    z-index: 555;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in;
    pointer-events: none;
    padding: 50px;
    box-sizing: border-box; 
}
.nav-text {line-height: 1;}

.mini-header {position: absolute;z-index: 30;padding:15px 25px;width: 100%;vertical-align: middle;mix-blend-mode: multiply;}

.site-icon {width: 25px;height: auto;margin-right:10px;display: inline-block;vertical-align: middle;}
.site-icon img {width: 100%;height:auto}

body.id-history #flexi {margin-top:60px;}

.nav-content a,
#menu,
#menu-link,
.hamburger {
    pointer-events: auto;
}

.nav-block ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* Spans the available height inside the 50px padding */
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;          /* Optional: removes default bullet points */
}

body.menu-open .nav-block {pointer-events: all;opacity: 1;}
body.menu-open {overflow: hidden;}

.nav-block-footer {
    background: #FFFCFA;
    width: 100vw;
    height: 100vh;
}

/* ADD height: 100% and box-sizing: border-box HERE */
.nav-block-footer .inner {
    height: 100%;
    padding: 50px;
    box-sizing: border-box;
}

.nav-block-footer ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Now successfully spans 100% of the inner container height */
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

/* Hamburger */
#menu {position: fixed;
    top: 0px;
    right: 10px;
    line-height: 1;
}

#menu-link {}
#menu-link:hover {cursor: pointer;}

.hamburger {
    display: inline-block;
    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; 
    width: 60px;
    height:60px;
}

.hamburger:hover {opacity: 1; }

.hamburger-box {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    transform: translate(-10px, 20px);
}

.hamburger-inner {
display: block;
top: 50%;
left:-50%;
}

.colour-orange {color: var(--orange);}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 20px;
    height: 1.5px;
    background-color: var(--black);;
    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: -4px;
}

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

.hamburger-inner {background:transparent}

.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;
    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); 
}

#hero {
    position: fixed;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    background: #000;
    z-index: 999;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in-out;
}
body.hero-hidden #hero {
    /* 
    top:-100%;
    bottom: 100%;
    */
    opacity: 0;
    pointer-events: none;
}
#hero .hero-single {
    pointer-events: none;
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
}
#hero .hero-single img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}



body.id-history a#id-history .link-underline span {border-bottom: 1px solid;}
body.id-manufacturing a#id-manufacturing .link-underline span {border-bottom: 1px solid;}
body.id-archives a#id-archives .link-underline span {border-bottom: 1px solid;}
body.id-publication a#id-publication .link-underline span {border-bottom: 1px solid;}

body.id-publication .hp-image {z-index: 0;width: 100%;position: relative;height: 100vh;}


.justified-type {position: absolute;top:50px;left:50px;right:50px;bottom:50px;}
.justified-type-rel {position: relative;height: calc(100vh - 40px);margin:20px 80px 20px 50px;}

.top {position: absolute;top:0;left:0;right: 0;}
.mid {position: absolute;top:50%;left:0;right: 0;transform: translate(0, -50%);}
.bottom {position: absolute;bottom:0;left:0;right: 0;}

.mid-top {position: absolute;top:0;left:0;right: 0;height: 50vh;}
.mid-top div {position: absolute;top:50%;left:0;right: 0;transform: translate(0, -50%);}

.mid-bottom {position: absolute;bottom:0;left:0;right: 0;height: 50vh;}
.mid-bottom div {position: absolute;top:50%;left:0;right: 0;transform: translate(0, -50%);}

.text-white {color: var(--white);}

ul.justified {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}

body.id-publication #flexi {padding-bottom:60px;}
#flexi {position: relative;}
.section {position: relative;padding: 50px 80px 50px 50px;}
.sub-block.no-margin {margin: -50px -80px -50px -50px;}


#section-1073.section {position: relative;padding: 100px 80px 100px 50px;}

.double-padding {position: relative;margin: 5vw;}
.double-padding p {margin-top:0;}

#intro .section {text-align: center;}
#intro .type-text {margin-right:0;text-align: left;}

.sub-block {margin-bottom: 0px;vertical-align: top;}
.sub-block.sticky {margin-bottom:0;}

#id-1059 {margin-top:100px;}

.spacer {display: none;height:0px!important;}

#meta {width: auto;}

.buy-bar-vp {position:absolute;top:60px;height:100vh;width:100vw;z-index:50;pointer-events: none;}
.buy-bar {height: 60px;background: var(--orange);position: absolute;bottom: 0;left:0;right: 0;pointer-events: all;display: flex;
    align-items: center;padding:0 30px;font-size: 18px;}
.page-title:after {content:"—";margin:0 5px;}

.buy-bar .erg-logo {margin-right:15px;}
.buy-bar .right {position: absolute;right:30px;}

.sub-block:last-child {margin-bottom: 0px;}
.sub-block.no-margin:last-child {margin-bottom: -50px;}

.text-col {display: inline-block;}
.text-col-title {width: 75%;margin:0 auto;text-align: center;/* padding-right:50px; */}
.title-breaker {width: 33%;height: 2px;background: var(--black);margin:40px auto; /* padding-right:50px; */}
.text-col-body p:last-child {margin-bottom: 0px;/* padding-right:50px; */}
.col-image {width: 100%;}
.text-col-caption {margin-top:10px;}

.sub-block.no-margin .text-col-caption {position: absolute; bottom: 50px;left:50px;width: 25%;}

.type-text {width: 50%;display: inline-block;margin-right:5%;}
.type-image {width: 100%;padding-left:0;display: inline-block;}
.sticky.type-image {width: 45%;display: inline-block;}

.sticky.size-1 .col-image {width: 100%;}
.sticky.size-2 .col-image {width: 66%;}
.sticky.size-3 .col-image {width: 33%;}

.first {position: relative;}

.image-wrapper-pub {overflow-x: scroll;white-space: nowrap;margin:0 -80px 0 -50px;}
.single-image-pub {position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: top;
   margin: 30px;
    width:35vw
}
.single-image-pub:first-child {margin-left:80px;}
.single-image-pub:last-child {margin-right:80px;}

.sub-block.no-margin.type-image {width: inherit;display: inherit;padding: 0;}

.sticky.align-2 .col-image, .align-2 .text-col-caption {float:right;} 

.align-center {text-align: center;}

#section-1077 .sticky {position: absolute; width: 45%;right:0;}
#section-1077 .type-image {width:48%;display: block;margin-bottom:50px;}
#section-1077 .type-image:last-child {margin-bottom:0px;}

img.default {display:block!important;}
img.hidden {display: none!important;}

body.id-home .section:nth-child(1) {background: var(--orange);}
body.id-home .type-text {display: inherit;margin:0 auto;}

.hp-text .erg-logo {display: block;}

.hp-image {position: absolute;top:0;left:0;bottom:0;width:60%;}
.hp-image img {object-fit: cover;height: 100%;width:100%;}
.hp-text {position: absolute;top:0;right:0;bottom:0;width:40%;flex-direction: column;justify-content: center;align-items: flex-start;display: flex; }
.hp-text .i {padding: 0 40px;text-align: left;}
.hp-text .erg-logo {text-align: left;margin-top:10px;}
.buy-bar .buy-link {margin: 25px 0px;}
.buy-link {margin: 20px 0px;text-align: left;display: inline-block;vertical-align: middle;}
.buy-link a {padding:8px 16px;border: 1px solid var(--black);border-radius: 10px;opacity: 1;}
.buy-link a:hover {border: 1px solid var(--black);opacity: 1;background: var(--black);color:var(--offwhite);}

body.id-home .buy-link {text-align: center;margin:20px 10px;}
.erg-block {text-align: center;margin-top:30px;}


.b {margin-bottom: 80px;text-align: center;}
body.id-home .section.contact {background: var(--offwhite)!important;}
.section.contact {text-align: center;}
.section.contact .sub-block:last-child {margin: 0 auto;}

/* Form
-------------------------------------------------- */


.inquiry-form-container {
    width: 100%;
    text-align: center;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
}

.form-field input,
.form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    outline: none;
    font: inherit;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--black);
}

.form-field textarea {
    resize: vertical;
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.form-success,
.form-error {
    margin-bottom: 20px;
}

.form-success {
    color: green;
}

.form-error {
    color: red;
}


.form-success,
.form-error {
    animation: formFadeIn 0.3s ease;
}

@keyframes formFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


#contact-form button[type="submit"] {
    padding: 8px 16px;
    border: 1px solid var(--black);
    border-radius: 10px;
    background: transparent;
    color: var(--black);
    font: inherit;
    opacity: 1;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

#contact-form button[type="submit"]:hover {
    border: 1px solid var(--black);
    opacity: 1;
    background: var(--black);
    color: var(--offwhite);
}

#contact-form button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: default;
}

/* LIGHTBOX
-------------------------------------------------- */

#custom-lightbox {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 333;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    -webkit-transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
    -moz-transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
    transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
}


/* ACTIVE STATE
-------------------------------------------------- */

body.lightbox-active #custom-lightbox {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}


body.lightbox-active #main,
body.lightbox-active #intro,
body.lightbox-active #flexi {
    opacity: 0.1;

    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}


/* LIGHTBOX CONTENT
-------------------------------------------------- */

.lightbox-content {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;
}


/* IMAGE CONTAINER
-------------------------------------------------- */

.lightbox-images {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* LIGHTBOX IMAGES
-------------------------------------------------- */

.lightbox-image {
    position: absolute;

    top: 50%;
    left: 50%;

    display: block;

    width: auto;
    height: auto;

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

    object-fit: contain;

    opacity: 0;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;

    will-change: opacity;
}


/* ACTIVE IMAGE */

.lightbox-image.active {
    opacity: 1;
}


/* META
-------------------------------------------------- */

.lightbox-meta {
    position: absolute;

    bottom: 20px;
    left: 50%;

    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);

    width: calc(100% - 40px);

    text-align: center;
    line-height: 1.2;

    z-index: 10;
}


#lightbox-title,
#lightbox-titlejp {
    position: relative;
}


/* CLOSE BUTTON
-------------------------------------------------- */

.lightbox-close {
    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 20;

    cursor: pointer;
}


/* LIGHTBOX NAV
-------------------------------------------------- */

.lightbox-nav {
    position: absolute;

    top: 50%;

    width: 40px;
    height: 40px;

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

    z-index: 20;

    cursor: pointer;
}


/* PREVIOUS
-------------------------------------------------- */

.lightbox-prev {
    left: 20px;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* NEXT
-------------------------------------------------- */

.lightbox-next {
    right: 20px;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* LIGHTBOX NAV DOT
-------------------------------------------------- */

.lightbox-nav .dot {
    width: 8px;
    height: 8px;

    border-radius: 100%;

    background: var(--black);

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s ease-out;
}


/* LIGHTBOX NAV DOT HOVER
-------------------------------------------------- */

.lightbox-nav:hover .dot {
    width: 16px;
    height: 16px;
}


/* MOBILE
-------------------------------------------------- */

@media screen and (max-width: 768px) {

    .lightbox-image {
        max-width: 100%;
        max-height: 100vh;
    }

    .lightbox-close {
        top: 15px;
        right: 15px;
    }

   

    .lightbox-meta {
        bottom: 15px;
        width: calc(100% - 30px);
    }

}

/* ------------ Tablet ------------ */
@media screen and (max-width: 1023px) {
    .size-xlarge {font-size:60px;}
    .image-wrapper {margin:-5vw -20vw 0 -20vw;text-align: center;}
    .single-image {width: 25vw;}
    .sub-block.no-margin .text-col-caption {position: relative; bottom: inherit;left: inherit;width: auto;margin: 10px 80px 5vw 5vw;}
    .nav-block-footer .inner {padding: 50px;}
    .section {position: relative;padding: 5vw 80px 5vw 5vw;}
    #section-1073.section {position: relative;padding: 10vw 80px 10vw 5vw;}
    .double-padding {position: relative;margin: 0px;}
    .sub-block.no-margin {margin: -5vw -80px -5vw -5vw;;}
    .sub-block {margin-bottom: 5vw;}
    .sub-block.no-margin:last-child {margin-bottom: -5vw;}
    .type-text {width: 100%;display: inline-block;}
    .sticky.type-image {width: 100%;display: inline-block;padding:0px!important;}
    .sticky.size-1 .col-image {width: 100%;}
    .sticky.size-2 .col-image {width: 100%;}
    .sticky.size-3 .col-image {width: 100%;}
    .hp-text {width: 100%;top:80%;}
    .hp-image {width: 100%;bottom:20%;}
    body.id-publication .hp-image {z-index: 0;width: 100%;position: relative;height: 80vh;}
    body.id-publication .hp-text {width: 100%;position: relative;height: 20vh;}
    .sub-block.sticky {margin-bottom:5vw;}
    #id-1059 {margin-top:0;}
    .title-breaker {width: 20%;height: 1px;background: var(--black);margin:20px auto;}
    #section-1077 .sticky {position: relative; width: 100%;right:inherit;}
    #section-1077 .type-image {width:100%;display: block;}
    .hp-text .erg-logo {display: inline-block;vertical-align: middle;margin-top:0px;margin-right:15px;}
    body.id-home .hp-text .erg-logo {margin-top:10px;}
    .buy-link {display: inline-block;vertical-align: middle;}
    .buy-bar .page-title {display: none;}
    img.default {display:none!important;}
    img.hidden {display:block!important;}
    .process .swiper-slide.top-left img,
    .process .swiper-slide.top-center img,
    .process .swiper-slide.top-right img,
    .process .swiper-slide.center-left img,
    .process .swiper-slide.center-center img,
    .process .swiper-slide.center-right img,
    .process .swiper-slide.bottom-left img,
    .process .swiper-slide.bottom-center img,
    .process .swiper-slide.bottom-right img {
        top: 50%;
        bottom: auto;
        left: 50%;
        right: auto;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
}

/* ------------ Mobile ------------ */
@media screen and (max-width: 768px) {
    .mini-header .erg-title {display: none;}
    .page-title::after {content: "";}
    .buy-bar {font-size: 16px;padding:0 5vw;}
    .buy-bar .right {right:5vw;}
    .buy-bar .erg-logo {display: none;}
    .single-image {width: 44vw;}
    .size-nav {font-size: 16px;}
    .size-xlarge {font-size:45px;}
    .size-large {font-size: 20px;}
    .size-medium {font-size: 16px;}
    #main .size-large {font-size: 16px;}
    .text-col-title {width:100%;}
    .justified-type-rel {height: calc(80vh - 40px);}
    .justified-type {position: absolute;top:25px;left:25px;right:25px;bottom:25px;}
}