/*
Theme Name:   	Sebastian Boettcher
Author:       	Addedlovely
Author URI:    https://www.addedlovely.com
Template:     	addedlovely
Version:      	1.1.0
Text Domain:  	addedlovely
*/

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
    font-family: 'OrLemmen';
    src: url('fonts/OrLemmen-Thin.woff2') format('woff2'),
         url('fonts/OrLemmen-Thin.woff') format('woff'),
         url('fonts/OrLemmen-Thin.otf') format('opentype');
    font-weight: bold;
    font-display:swap;
    font-style: normal;
} 

@font-face {
    font-family: 'OrLemmen';
    src: url('fonts/OrLemmen-ThinItalic.woff2') format('woff2'),
         url('fonts/OrLemmen-ThinItalic.woff') format('woff'),
         url('fonts/OrLemmen-ThinItalic.otf') format('opentype');
    font-weight: bold;
    font-display:swap;
    font-style: italic;
} 
  
/* ==========================================================================
	Structure
   ========================================================================== */
body { padding: 0 36px; margin:auto; position: relative; }
.grid { grid-gap:5vw; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; }
.transition  { -webkit-transition: all 0.3s cubic-bezier(.77,0,.175,1); transition: all 0.3s cubic-bezier(.77,0,.175,1); }
.layout { margin-bottom: 75px; }
svg { width: 100%; height: 100%; vertical-align: top; }
.lazyload { min-height: 1px; }

/* ==========================================================================
	Typography
   ========================================================================== */
body { font-family: 'OrLemmen', serif; color: #191919; line-height: 1.15; font-size:25px; background: #FFF; display: block; }
h1,h2,h3,h4 { font-weight: normal; font-size: inherit; }
.f-25 { font-size: 25px; }
.f-49 { font-size: 49px; }

body { font-size:1.736111111111111vw; }
.f-25 { font-size: 1.736111111111111vw; }
.f-49 { font-size: 3.402777777777778vw; }

/* ==========================================================================
   Header 
   ========================================================================== */
.header { min-height: 146px; display: flex; padding: 30px 0 40px 0; }
.header-logo { margin: 0 auto 0 0; position: relative; }
.header-logo a { position: relative; z-index: 1; }
.header-logo.active a:after { content:''; position: absolute; bottom: 0; left:2px; right:2px; display: block; background: #000; height: 2px; z-index: 0; }

.header-menu-primary { margin: 0 0 0 auto; }
.header-menu-item { margin-left: 17px; position: relative; }
.header-menu-item:first-of-type { margin-left: 0; }
.header-menu-item:after { content:''; position: absolute; bottom: 5px; left:2px; right:13px; display: block; background: #000; height: 2px; z-index: 0; opacity: 0; -webkit-transition: opacity 0.3s cubic-bezier(.77,0,.175,1); transition: opacity 0.3s cubic-bezier(.77,0,.175,1); }
.header-menu-item:after { bottom: 0.347222222222222vw; right: 0.902777777777778vw; }

.header-menu-item span { text-shadow: -3px 0px 0px #fff, 3px 0px 0px #fff; position: relative; z-index: 1; }
.header-menu-item.active:after, .header-menu-item:hover:after { opacity: 1; }
.header-menu-item:last-of-type:after { right: 4px; }

/* ==========================================================================
   Layout 
   ========================================================================== */
.layout-title { margin-bottom: 6px; }

/* Layout : Clients */
.layout-clients p { margin-bottom:0; }

/* Layout : Projects */
.layout-projects { -webkit-transition: max-height 3s cubic-bezier(.77,0,.175,1); transition: max-height 3s cubic-bezier(.77,0,.175,1); overflow: hidden; }
.layout-projects .landscape { grid-column: span 2; }
.layout-projects .hidden { display:none; }

/*  Layout : Lightbox */
.layout-lightbox { position: fixed; left: 36px; right: 36px; top:180px; bottom:108px; }
.lightbox-gallery { height: 100%; }
.lightbox-gallery .slide { position: absolute; top:0; left:0; height: 100%; width:100%; visibility: hidden; }
.lightbox-gallery .slide:first-of-type, .lightbox-gallery.flickity-enabled .slide  { visibility: visible; }
.back { position: absolute; top:36px; left:36px; width: 36px; height: 36px; }

/* ==========================================================================
   Single : Private Project 
   ========================================================================== */
.layout-private-project { overflow: hidden; margin-bottom: 72px; }
.layout-private-project .landscape { grid-column: span 2; }
.private-project-title { margin-bottom: 25px; grid-column: span all; }

/* Password Form */
.layout-password-form { max-width: 23.194444444444444vw; width: 100%; margin-top:60px; }
.password-form-input { height: 48px; height: 3.333333333333333vw; line-height: 48px; line-height:3.333333333333333vw; border-bottom: 2px solid #000; width: 100%; }
.password-form-submit { border-bottom: 2px solid transparent; -webkit-transition: border 0.3s cubic-bezier(.77,0,.175,1); transition: border 0.3s cubic-bezier(.77,0,.175,1);  }
.password-form-submit:hover {  border-bottom: 2px solid #000; }

/* ==========================================================================
   Single : Homepage 
   ========================================================================== */
.page-home .tease.project { display: none; }
.page-home .tease.project:nth-of-type(1), .page-home .tease.project:nth-of-type(2), .page-home .tease.project:nth-of-type(3) { display: block; } 

.page-home .layout-projects.is-loaded .tease.project { display: block; visibility: hidden; opacity: 0; }
.page-home .layout-projects.is-loaded .tease.project:nth-of-type(1), .page-home .layout-projects.is-loaded .tease.project:nth-of-type(2), .page-home .layout-projects.is-loaded .tease.project:nth-of-type(3) { opacity: 1; visibility: visible; }
.has-projects-visible .layout-projects { max-height: 10000px !important; } 
.has-projects-visible .layout-projects.is-loaded .tease.project  { visibility: visible; opacity: 1;}
.has-projects-visible .layout-text, .has-projects-visible .layout-clients { display: none; }

/* ==========================================================================
   Single : People 
   ========================================================================== */
.page-people .header { visibility: hidden; opacity: 0; }
.page-people .footer { display: none; }

/* ==========================================================================
   Single : Place 
   ========================================================================== */
.page-place .header { visibility: hidden; opacity: 0; }
.page-place .footer { display: none; }

/* ==========================================================================
   Single : Project 
   ========================================================================== */
   
/* Gallery */
.project-gallery { padding-top: 52.631578947368421%; position: relative; overflow: hidden; margin-bottom: 72px; }
.slide { position: absolute; top:0; left:0; height: 100%; width:100%; visibility: hidden; }
.slide:first-of-type, .flickity-enabled .slide  { visibility: visible; }
.slide img { height: 100%; width: 100%; object-fit: contain; }

/* Thumbnails */
.project-gallery-thumbnails { display: flex; flex-wrap: wrap; margin-bottom: 26px; }
.project-gallery-thumbnails img { height: 162px; margin: 0 36px 36px 0; cursor: pointer; }
.project-gallery-thumbnails .active { opacity: 0.5 !important; }

/* Counter */
.project-gallery-counter { text-align: center; display:none; }

/* Gallery : Buttons */
.flickity-button { position: absolute; top:0; bottom: 0; margin: auto; -webkit-transition: opacity 0.3s cubic-bezier(.77,0,.175,1); transition: opacity 0.3s cubic-bezier(.77,0,.175,1); }
.flickity-button svg { display: none; }
.flickity-button[disabled] { opacity:0; visibility: hidden; }
.flickity-button[disabled].next-project, .flickity-button[disabled].previous-project  { opacity: 1; visibility: visible; }
.flickity-button.previous { left:0; }
.flickity-button.previous:before { content: 'Previous'; }
.flickity-button.next { right: 0; }
.flickity-button.next:before { content: 'Next'; }

/* Info Button */
.button-project-info {  position: absolute; top:0; bottom: 0; margin: auto; -webkit-transition: opacity 0.3s cubic-bezier(.77,0,.175,1); transition: opacity 0.3s cubic-bezier(.77,0,.175,1); left:0; visibility: hidden; opacity: 0; }
.button-project-info.active { opacity: 1; visibility: visible; }

/* ==========================================================================
	Footer 
   ========================================================================== */
.footer { padding: 100px 0 36px 0; }
.footer br { display: none; }

/* ==========================================================================
   Cookie Banner 
   ========================================================================== */
#moove_gdpr_cookie_info_bar { background: #7698ab !important; border: 0 !important; }
.moove-gdpr-branding-cnt { display: none; opacity: 0; visibility: hidden; }
.moove-gdpr-infobar-allow-all { text-transform: uppercase !important; letter-spacing: 0.15em !important; color: #FFF !important; background: transparent !important; }
.moove-gdpr-info-bar-content { display: block !important; text-align: center !important; }
.moove-gdpr-cookie-notice p { font-size: 16px !important; line-height: 1.5 !important; }
.moove-gdpr-infobar-allow-all { margin: 6px auto auto auto !important; }
.moove-gdpr-info-bar-container { padding: 15px 24px 12px 24px !important;}
.moove-gdpr-modal-left-content { background: #2f324f !important; }
#moove-gdpr-menu li.menu-item-selected button, #moove-gdpr-menu li:hover button { color: #2f324f !important; }
.change-settings-button:hover { color: #FFF !important; }

/* ==========================================================================
   Flickity
   ========================================================================== */
.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: absolute; height: 100% !important; width:100% !important; top:0; left:0; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }

   
/* Draggable */
.flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

/* Fade */
.flickity-enabled.is-fade .flickity-slider > * { pointer-events: none; z-index: 0; }
.flickity-enabled.is-fade .flickity-slider > .is-selected { pointer-events: auto; z-index: 1; }


@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.slide { opacity: 0 !important; }
.slide:not(.is-selected){ animation: fadeOut ease 0.2s; }
.slide.is-selected { z-index: 99; opacity: 1 !important; animation: fadeIn ease 0.2s; }


/* ==========================================================================
   Flickity
   ========================================================================== */
.fancybox-bg { background: #FFF !important; }   
.fancybox-is-open .fancybox-bg { opacity: 1 !important; }
.fancybox-button { background: transparent !important; color: #000 !important; }
.fancybox-button[disabled] { opacity: 0 !important; }
.fancybox-button--arrow_left { left:0; }
.fancybox-button--arrow_left, .fancybox-button--arrow_right { padding: 0; }
.fancybox-button--arrow_right { right:0; }
.fancybox-navigation .fancybox-button { width:auto !important; padding: 0 36px !important; }
.fancybox-navigation .fancybox-button div { padding: 0; }
.fancybox-caption { background:transparent !important; padding: 0 !important; }
.fancybox-slide--image { padding: 180px 36px 108px 36px !important; }
.fancybox-infobar  { display: none !important; }
.fancybox-toolbar { left: 36px !important; top: 36px !important; right:auto !important; }
.fancybox-button--close { width: 36px !important; height: 36px !important; padding: 0 !important; }
.fancybox-button--close svg { stroke:#000; }

.lightbox-title, .lightbox-image-title { position: fixed; top:30px; right:36px; line-height: 1.15; text-align: left; color: #000; width: 100%; max-width: 540px; }
.lightbox-title > span { display: block; }
.lightbox-title .header-menu-item span { text-transform: capitalize;}
.lightbox-title h2:before { content:'“'; }
.lightbox-title h2:after { content:'”'; }
.lightbox-image-title { top:auto; bottom: 36px; }

/* ==========================================================================
   Media Queries 
   ========================================================================== */
@media only screen and (max-width:864px) {
   /* Font Reduction */
   body { font-size: 15px; }
   .f-25 { font-size: 15px; }
   .f-49 { font-size: 29px; }   
   
   /* Header */
   .header-logo.active a:after  { height: 1px; }
   .header-menu-item:after { bottom: 2px; height: 1px; }
   
   /* Password Form */
   .layout-password-form { max-width:338px; }
   .password-form-input { border-bottom: 1px solid #000; height: 48px; line-height:48px;  }
   .password-form-submit { border-bottom: 1px solid transparent;   }
   .password-form-submit:hover {  border-bottom: 1px solid #000; }
   
}

@media only screen and (max-width:700px) {
   
   /* Structure */
   body { padding: 0 21px; }
   .grid { grid-gap: 10.144927536231884vw; }
   .layout { margin-bottom: 35px; }
      
   /* Header */
   .header { flex-direction: column; min-height:125px; padding: 18px 0 33px 0; }
   .header-menu-primary { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }
   .header-menu-primary h2 { width: 100%; margin-top:10px; }
   .header-menu-item { margin-left:auto; }
   .header-logo { margin-bottom: 8px; }
   .header-menu-item:after { right:0; }
      
   /* Single : People */
   .page-people .header { visibility: visible; opacity: 1; }
   .page-people .lightbox-title { display: none; }
   
   /* Single : Place */
   .page-place .header { visibility: visible; opacity: 1; }
   .page-place .lightbox-title { display: none; }

   /* Single : Project */
   .page-project.fancybox-active .header, .page-project.fancybox-active .footer { z-index: 1; }
   .page-project .fancybox-toolbar { top:21px !important; }
   
   /* Single : Gallery */
   .project-gallery { margin-bottom: 20px; }
   .project-gallery-counter { display: block; } 

   /* Layout : Projects */
   .layout-projects { grid-template-columns: repeat(2, 1fr); }

   /*  Layout : Lightbox */
   .layout-lightbox { top:170px; left:21px; right:21px; bottom: 172px; }
   .back { top:128px; right:21px; left:auto;  }
   
   /* Fancybox */
   .fancybox-active .header, .fancybox-active .footer { position: relative;  z-index: 99993; }
   .fancybox-active .header { top:0; }
   .fancybox-active .footer { bottom:0; }
   .fancybox-toolbar { top:128px !important; right:21px !important; left:auto !important;  }
   .fancybox-button--close { width:22px !important; height:22px !important; }
   .fancybox-slide--image { padding: 170px 21px 172px 21px !important; }
   .fancybox-button--arrow_left { display:none !important; }
   .fancybox-button--arrow_right { display:none !important; }
   .fancybox-infobar { display: block !important; position: fixed !important; left:21px !important; right:21px !important; bottom: 144px !important; top: auto !important; text-align: center !important; line-height: 15px !important; height: 15px !important; }
   .lightbox-title { top:102px; left:21px; }
   .lightbox-title .header-menu-item { display: none; }

   /* Projects */
   .project-gallery-thumbnails { display: none; }
   .flickity-button.next, .flickity-button.previous { display: none; }
   .button-project-info { display: none; }
      
   /* Private Project */
   .layout-private-project { grid-template-columns: repeat(2, 1fr); }
   .page-privateproject .lightbox-title { top:123px; }
   .page-privateproject .fancybox-slide--image { top:208px !important; }
   .lightbox-image-title { left:21px; right:21px; bottom: 120px; text-align: center; width: auto; }
   
   /* Footer */
   .footer { padding: 64px 0 22px 0; }
   .footer br { display: block; }
}

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

   /* Font Reduction */
   body { font-size: 14px; }
   .f-25 { font-size: 14px; }
   .f-49 { font-size: 26px; }  

   /* Footer */
   .footer br { display: none; }
}