/*!
Theme Name: Niels Wehrspann
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.3.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: niels-wehrspann
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready */


@font-face { font-family: 'Variospace SemiCondensed'; src: url('fonts/Variospace-SemiCondensed.woff2') format('woff2'),
 url('fonts/Variospace-SemiCondensed.woff') format('woff'); font-weight: normal; font-style: normal; } 

@font-face { font-family: 'Variospace Regular'; src: url('fonts/Variospace-Regular.woff2') format('woff2'),
 url('fonts/variospace-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } 

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; touch-action: pan-x pan-y; } 

html { font-size:1vw; -webkit-text-size-adjust: 100%; } 
body { margin: 0; line-height:auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Variospace SemiCondensed', Variospace SemiCondensed, monospace; font-weight: normal; } 
#loader-anim { width:300px; height:300px; position:fixed; top:calc(50vh - 150px); left:calc(50vw - 150px); z-index:51; mix-blend-mode:multiply; touch-action: none; pointer-events: none; opacity:1; transition: all 0.5s; } 
#loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(0deg, rgb(100, 100, 100) 0%, rgb(200, 200, 200) 100%); z-index: 50; transition: all .5s; display: block; touch-action:none; pointer-events: none; opacity: 1; } 
#background-gradient { z-index:1; width:100vw; height:100vh; background: linear-gradient(0deg, rgb(180,180,180) 0%, rgb(240,240,240) 100%); position:fixed; top:0; left:0; } 
#primary, #category { z-index:2; position: relative; } 

#nom, #adresse, #email, #tel { width:auto; height:auto; font-family: 'Variospace Regular', Variospace Regular, Helvetica, Arial, sans-serif; color:rgb(255,255,255); font-size:1em; position:fixed; transform-origin: top left; z-index: 100; mix-blend-mode: difference; } 

h1, h2, h3, p, table, tr { font-weight: normal; font-size: 1em; } 
#nom h1 { margin:0; } 
p, table, .titres h2 { font-size:1em; line-height: 1.4rem; } 
td { padding:1%; } 
a { color:#000; text-decoration:none; } 

#fb, #ig { position:fixed; width:1.1rem; height:auto; z-index:99; } 
#fb { left:51vw; top:6.25vh; } 
#ig { left:54vw; top:6.25vh; } 
#nom { left:2vw; top:1vh; } 
#nom a, #nom a:visited, #email>a, #email>a:visited, #email>a:active { color:white; text-decoration: none; } 
#nom a:hover { opacity:0.6; } 
#adresse { left:2vw; top:3.5vh; } 
#email { left:51vw; top:1vh; } 
#tel { left:51vw; top:3.5vh; } 
.smallheader { font-family: 'Variospace SemiCondensed', Variospace SemiCondensed, monospace !important; font-size:1em !important; line-height:1.2em !important; width:auto; } 
.bigheader { font-family:'Variospace Regular', Variospace Regular, Helvetica, Arial, sans-serif !important; font-size:20vw !important; line-height:22vw !important; width:100%; } 

@media all and (orientation:portrait){
 .bigheader { font-size:20vh !important; line-height:22vh !important; } 
 }

@media all and (min-width:1305px){
 #fb { left:65.25vw; top:1vh; } 
#ig { left:65.25vw; top:3.5vh; } 
#email { left:33.75vw; top:1vh; } 
#tel { left:33.75vw; top:3.5vh; } 
 }
@media all and (min-width:1770px){
 #fb { left:75vw; top:1.5vh; } 
#ig { left:75vw; top:4.25vh; } 
#email { left:26vw; top:1vh; } 
#tel { left:50.5vw; top:1vh; } 
#adresse { top:4vh; } 
 }

#language_switcher { width:auto; height:auto; position:fixed; top:1vh; right:2vw; z-index:101; } 
#language_switcher ul { list-style-type: none; margin: 0; padding: 0; font-size: 1rem; line-height:1.75rem; } 
#language_switcher h2 { display:none; } 
#language_switcher ul .lang-item a { opacity:0.3; } 
#language_switcher ul .current-lang a { opacity:1; } 
#language_switcher a { text-decoration: none; } 
#language_switcher .lang-item a:hover { opacity:1; cursor:pointer; } 
#language_switcher a:hover .current-lang { opacity:0.3; } 
#email:hover, #fb:hover, #ig:hover { opacity:0.5; cursor:pointer; } 
#language_switcher, #nom, #adresse, #email, #tel, #fb, #ig { transition:all 1s; } 

.content-area { margin-top:90vh; } 
.annee { text-align:left; margin: 0 0 0 2vw; width:96vw; height:auto; padding: 0; clear:both; letter-spacing: 31vw; letter-spacing: calc(33vw - 1.8rem); transform: translateY(-10vh); overflow:hidden; } 
.annee p { padding-left:0; padding-top: 2vh; width:150vw; white-space: nowrap;} 

.item { display: block; background: none; padding: 6vh 0; margin: 0; height:auto; transition: all 0.5s; position: relative; min-height:4vh; } 
.item:hover img, .item:focus img, .item:active img { filter: saturate(200%); cursor:pointer; } 
.masonry { transition: all 1s; width:95vw; height:auto; clear:both; margin-left:2vw; margin-bottom:20vh; } 
.credit {position:absolute; bottom:0; height:0; overflow: hidden;}

@supports (display: grid){
 .masonry { display: grid; grid-gap: 1.5em 1.6em; grid-template-columns: repeat(auto-fill, minmax(400px,1fr)); grid-auto-rows: 0; } 
.item { width: auto; } 
 }

@supports not (display: grid){
 .masonry { display: flex; justify-content:space-between; flex-flow: wrap; } 
.item { min-width:200px; width:auto; max-width:400px; } 
.brick { margin-bottom: 1em; } 
 }

.brick { transition: all 0.5s; min-height:2vh; } 

img { width: 100%; height: 100%; } 

.gallery { width:100%; height:auto; object-position: center center; text-align:center; } 
figcaption { display: none; } 
.wp-block-gallery.has-nested-images figure.wp-block-image {display: block;}
.blocks-gallery-grid li, .wp-block-gallery.has-nested-images figure.wp-block-image { display:none !important; } 
.blocks-gallery-grid li:first-of-type, .wp-block-gallery.has-nested-images figure.wp-block-image:first-of-type { display:block !important; } 
.blocks-gallery-item img { margin:auto; } 
.blocks-gallery-grid, .wp-block-gallery { display: block; } 
.vp-a img { display:block; margin:auto; max-width:100%; height: auto; } 
.wp-block-gallery.has-nested-images figure.wp-block-image > a {width:100%; height: auto; display: flex; justify-content: center; flex-direction: row;}

.w90 img, .w100 img { width:30.00% !important; } 
.w110 img { width:30.33% !important; } 
.w120 img { width:30.69% !important; } 
.w130 img { width:31.08% !important; } 
.w140 img { width:31.50% !important; } 
.w150 img { width:31.95% !important; } 
.w160 img { width:32.43% !important; } 
.w170 img { width:32.94% !important; } 
.w180 img { width:33.48% !important; } 
.w190 img { width:34.05% !important; } 
.w200 img { width:34.65% !important; } 
.w210 img { width:35.29% !important; } 
.w220 img { width:35.95% !important; } 
.w230 img { width:36.64% !important; } 
.w240 img { width:37.36% !important; } 
.w250 img { width:38.11% !important; } 
.w260 img { width:38.89% !important; } 
.w270 img { width:39.70% !important; } 
.w280 img { width:40.54% !important; } 
.w290 img { width:41.41% !important; } 
.w297 img { width:42% !important; } 
.w300 img { width:42.31% !important; } 
.w310 img { width:43.24% !important; } 
.w320 img { width:44.20% !important; } 
.w330 img { width:45.20% !important; } 
.w340 img { width:46.22% !important; } 
.w350 img { width:47.27% !important; } 
.w360 img { width:48.35% !important; } 
.w370 img { width:49.46% !important; } 
.w380 img { width:50.60% !important; } 
.w390 img { width:51.77% !important; } 
.w400 img { width:52.97% !important; } 
.w410 img { width:54.20% !important; } 
.w420 img { width:55.47% !important; } 
.w430 img { width:56.76% !important; } 
.w440 img { width:58.08% !important; } 
.w450 img { width:59.43% !important; } 
.w460 img { width:60.81% !important; } 
.w470 img { width:62.22% !important; } 
.w480 img { width:63.66% !important; } 
.w490 img { width:65.14% !important; } 
.w500 img { width:66.64% !important; } 
.w510 img { width:68.17% !important; } 
.w520 img { width:69.73% !important; } 
.w530 img { width:71.32% !important; } 
.w540 img { width:72.94% !important; } 
.w550 img { width:74.59% !important; } 
.w560 img { width:76.28% !important; } 
.w570 img { width:77.99% !important; } 
.w580 img { width:79.73% !important; } 
.w590 img { width:81.50% !important; } 
.w594 img { width:82% !important; } 
.w600 img { width:83.30% !important; } 
.w610 img { width:85.14% !important; } 
.w620 img { width:87.00% !important; } 
.w630 img { width:88.89% !important; } 
.w640 img { width:90.81% !important; } 
.w650 img { width:92.76% !important; } 
.w660 img { width:94.74% !important; } 
.w670 img { width:96.76% !important; } 
.w680 img { width:98.80% !important; } 
.w690 img, .w700 img, .w780 img, .w895 img, .w900 img { width:100% !important; } 

@keyframes titreshover { 
 0% { opacity:0.9; width: 11em; overflow:visible; display: block; } 
33% { opacity:0; width: 11em; overflow:visible; display: block; } 
66% { opacity:0; width: 11em; overflow:hidden; display: block; } 
100% { opacity:0; width: 0em; overflow:hidden; display: none; } 
 }

img { height:auto; } 
.item .blocks-gallery-item a { width:100%; } 
.titres { width:11em; text-align:center; position:absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%); display: block; opacity: 0.9; pointer-events:none; z-index:3; } 
.titres h2 { color: rgb(250,250,250); text-shadow: -1px 0 rgb(5,5,5), 0 1px rgb(5,5,5), 1px 0 rgb(5,5,5), 0 -1px rgb(5,5,5); } 
.item:hover > .titres { animation-name: titreshover; animation-duration: 2s; animation-fill-mode: forwards; } 
.categories { margin:0; position:absolute; left:0; top:0; height:100%; } 
.post-categories { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column-reverse; flex-wrap: wrap; justify-content: center; margin:0; padding:0; height:100%; } 
.categories ul { list-style-type: none; text-align:center; white-space: nowrap; } 
.post-categories li { margin:0.4em 1.4em 0.4em 1.2em; font-size:0.5em; text-transform: uppercase; transition: all 0.5s; letter-spacing:1px; -webkit-writing-mode:vertical-lr; writing-mode:vertical-lr; transform: rotateZ(180deg); } 
.post-categories li a { padding:0.6em 1em 0.6em 0.5em; color:rgb(128,128,128); border-left:0.16em solid rgb(128,128,128); border-right:0.16em solid rgb(128,128,128); border-top:0.12em solid rgb(128,128,128); border-bottom:0.12em solid rgb(128,128,128); } 
.post-categories li:hover { transform: rotateZ(192.5deg); } 
.categories { display:none; } 
.brick:hover .categories { display: block; } 

.wp-block-lazyblock-infos-techniques { display: none; } 

/* category */
#category { margin-top:45vh; } 
#category .masonry { margin-bottom:100vh; } 
#subnavigation { position:fixed; top:0; left:0; height:16vh; width:100%; display: flex; justify-content:flex-start; margin: 0; padding:13vh 2vw 1vh 2vw; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%); z-index:90; transition: all 1s; line-height: 1.25rem;} 
#subnavigationbutton { width:48.9vw; } 
#catname { height: 2rem; text-transform: uppercase; letter-spacing: 0.1rem; padding: 0.5rem 0.6rem; border-left:0.14em solid rgb(128,128,128); border-right:0.14em solid rgb(128,128,128); border-top:0.11em solid rgb(128,128,128); border-bottom:0.11em solid rgb(128,128,128); font-size:1rem; color:rgb(128,128,128); margin:0; transform: all 0.5s; z-index: 102; } 
#subnavigationbutton img { height:2rem; transition: all 0.5s; } 
#subnavigationbutton img:hover { opacity:0.6; cursor: pointer; } 
#spacer { display: block; width:2rem; } 

/* single */
.single-container { position: relative; z-index: 3; } 
.single-image-container { width:96vw; padding:0; margin: 0 0 12vh 2vw; height:97vh; position:relative; } 
.single-image { width:inherit; height: inherit; } 
.single-image img { width:inherit; height:inherit; object-fit: contain; } 
.single-caption { position:absolute; top:0; right:0; width:97vh; text-align:center; line-height: 1.3em; padding: 1em 10vh 0.5em 10vh; transform-origin: bottom right; transform: translateY(-100%) rotate(-90deg); transition: all 1s; } 
#subnavigation .wp-block-lazyblock-infos-techniques { display:block; } 
#single-infos .single-link { display: none; } 
#single.content-area { margin-top:33vh; } 
#single-title { width:37vw; padding-right:2em; } 
#single-date { margin-right:2em; float:left; } 
#single-infos { width:84vw; } 
#single-infos .additional-info-line { margin:0; padding:0; border:none; } 
.single-video { position: relative; z-index: 5; width:96vw; height:90vh; margin-left:2vw; } 
#single-video { width:inherit; height:inherit; } 
#single-video video { width:inherit; height: inherit; object-fit: contain; } 
.single-video .single-caption { width:90vh; color:white } 
.bg-gradient { position:fixed; z-index:5; width:4vw; height:100vh; top:0; right:0; background: linear-gradient(90deg, rgba(200,200,200,0.4) 0%, rgba(240,240,240,0.4) 100%); } 
.single-caption:hover, .single-caption:hover a { color:white; text-shadow: 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } 
#video-background { width:100vw; height:100vh; position: fixed; top:0; left:0; z-index:2; background-color: black; } 
.video>header>#nom, .video>header>#adresse, .video>header>#email, .video>header>#tel { mix-blend-mode: normal; } 
.video>header>#language_switcher a, .video>#subnavigation, .video>#subnavigation>#subnavigationbutton a, .video .navigation, .video .navigation a { color:white; } 

/* social */
#social-share { z-index:5; position: relative; display:flex; justify-content: center; padding:2vh 0; margin-top:12em; } 
.share-on { color: rgb(128,128,128); padding:0 1em; margin-left:10em; opacity: 1; transition: all 1s; } 
.share-link a { color: rgb(128,128,128); padding:0em; } 
.share-link a { margin:0em; border-left:0.14em solid rgb(128,128,128); border-right:0.14em solid rgb(128,128,128); border-top:0.11em solid rgb(128,128,128); border-bottom:0.11em solid rgb(128,128,128); } 
.share-link { display:block; opacity:0; transition: all 1s; } 
#social-share:hover { cursor:pointer; } 
#social-share:hover .share-on { margin-left:-2em; opacity:0; } 
#social-share:hover .share-link { display:block; opacity:1; } 
#social-share:hover .share-link a { padding:1em 1.2em 0.75em 1.2em; margin:0 1em; } 

/* next-prev-navigation */
.navigation a:hover, #social-share a:hover { opacity:0.6; } 
.navigation a, #social-share a { transition: all 1s; } 
.navigation { z-index:100; position: relative; display: flex; justify-content: space-between; padding:1em 2vw; margin:12em 0 0 0; } 

@media all and (min-width:1305px){
 #subnavigation { height:12vh; padding:10vh 2vw 1vh 2vw; } 
#subnavigationbutton { width:31.75vw; } 
#single-title { width:31.5vw; } 
#single-infos { width:31vw; } 
 }

@media all and (min-width:1770px){
 #subnavigationbutton { width:24vw; } 
#single-title { width:24.75vw; } 
#single-infos { width:49.25%; } 
 }

/* Lightboxes */
.featherlight { background:rgba(255,255,255,0.1); } 
.featherlight-content { max-height: 100vh; } 
.additional-info { margin:1em 0; } 
.additional-info-line { padding:0.5em 0 0.1em 0; border-top:0.12em solid black; margin-top:0.2em; } 
.VideoPopUpWrap .additional-info-line { padding: 0.5em 0 0.1em 0; border-top: 0.12em solid white; margin-top: 0.2em; color: white; } 
.VideoPopUpWrap .additional-info-line a {color:white;}
.imageDataContainer { position:fixed; right:0; top:0; padding: 6em 1em !important; color:black; font-family: 'VariospaceSemiCondensed', Variospace SemiCondensed, monospace; font-size:0.85em; line-height: 1.5em; font-weight: normal; width:15vw !important; height:100vh; background: linear-gradient(0deg, rgba(225,225,225,0.2) 0%, rgba(255,255,255,0.2) 100%); hyphens: none; transition: all 0.5s; user-select: none; } 
.imageDataContainer:hover { background: linear-gradient(0deg, rgba(225,225,225,0.6) 0%, rgba(255,255,255,0.6) 100%); } 
.single-link { margin-top:1em; padding:1em 0; } 
.VideoPopUpWrap .single-link a {color:white;}
.YouTubePopUp-Close::before { content: url(images/close.svg); filter:invert(100%); } 
.YouTubePopUp-Wrap { background-color: rgba(0,0,0,0.2); position:fixed; width:100%; height:100%; top:0; left:0; z-index:105; } 
#videoBackgroundOverlay { background-color: #fff; mix-blend-mode: difference; position: fixed; width: 100%; height: 100%; z-index: 100; top: 0; left: 0; margin: 0; padding: 0; } 
.VideoPopUpWrap .imageDataContainer { color:white; background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%); } 
.YouTubePopUp-Close { position: fixed; z-index:10100; width: 2.7em; height:2.7em !important; right:1em; top:1.25em; } 
.YouTubePopUp-Close:hover { opacity:0.6; } 
.Video-PopUp-Content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-content: center; -webkit-justify-content:center; width:100%; height:100%; } 
.vp-flex { width:90vw; height:90vh; margin:0; position:relative; padding:0; } 
.vp-flex iframe, .vp-flex video { width:100%; height:100%; border:none !important; margin: 0 !important; padding: 0 !important; outline: none !important; display:block; } 
aside { display:none; } 
button.featherlight-close-icon { background-color:transparent !important; } 

@media all and (orientation:portrait){
 #overlay { z-index:100; height:100vh; } 
.imageDataContainer { top:auto; bottom:0; height:auto; width:100vw !important; background: rgba(240,240,240,0.6); z-index:500; padding:0 2vw 1vh 2vw !important; } 
.featherlight { background:rgba(255,255,255,0.4); } 
#imageDetails { position: relative; padding:0 2vw 1vh 0; height:auto; display:block; -webkit-overflow-scrolling:touch; } 
.featherlight-content img { max-height:90vh !important; max-width:200vw !important; padding:0; position: absolute; top:0; transition: all 1s; object-position: 10% 50%; } 
.featherlight-next { right:1.2em; } 
.featherlight-previous { right: auto; left:1.2em; } 
.featherlight-close-icon { right:calc(50% - 2em) !important; } 
 }

@media all and (max-width:1024px) and (orientation:landscape){
 .imageDataContainer { width:15vw !important; font-size:1rem; } 
 }


@media all and (max-width:1024px) and (orientation:portrait) { html { font-size:medium; -webkit-text-size-adjust: 100%; } 
body { margin: 0; } 
#nom, #adresse, #email, #tel { -webkit-text-size-adjust: 100%; font-size:1rem; } 
#fb { left:48vw; top:8vh; } 
#ig { left:60vw; top:8vh; } 
#adresse { left:2vw; top:4vh; } 
#email { left:48vw; } 
#tel { left:48vw; top:4vh; } 
#language_switcher ul { line-height:1.8rem; } 
#single-title { width:31.25vw; margin-left:30vw; } 
.masonry { width:96%; margin-left:2vw; } 
.annee { position:relative; width:96vw; left:0; margin:1vh 0 5vh 0; letter-spacing:30vw; letter-spacing: calc(33vw - 1.5rem); text-align:left; } 
.annee p { padding-left:0.1vw; } 
.item { padding:0 0 1vh 0; } 
@supports (display: grid){
 .masonry { grid-gap: 2rem 3rem; grid-template-columns: repeat(auto-fill, minmax(40vw,1fr)); } 
 }
@supports not (display: grid){
 .item { max-width:47vw; width:47vw; } 
 }
#subnavigationbutton { width:45.9vw; } 
 }

@media all and (max-width:440px) and (orientation:portrait){
 #fb { left:48vw; top:10vh; } 
#ig { left:60vw; top:10vh; } 
#adresse { left:2vw; top:5vh; max-width:44vw; } 
#email { left:48vw; } 
#tel { left:48vw; top:5vh; } 
#language_switcher ul { line-height:2rem; } 
.masonry { margin-bottom:10vh; display:block; } 
.annee { margin:2vh 0; letter-spacing:28vw; letter-spacing: calc(33vw - 1.25rem); text-align:left; transform: translateY(0); } 
.item { padding:5vh 0 5vh 0; } 
#subnavigation { height:20vh; padding:16vh 2vw 1vh 2vw; } 
#category { margin-top:24vh; } 
/*@supports (display: grid){
 .masonry { grid-gap: 0.1rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(400px,1fr)); } 
 }
@supports not (display: grid){
 .item { max-width:100%; width:100%; } 
 }*/ } 


@media (hover: none){
 .titres { width:auto; text-align:center; position:absolute; top:0; left:0; transform: translateX(0) translateY(0); writing-mode:vertical-rl; height:100%; mix-blend-mode: difference; font-size: 0.8rem; } 
.titres h2 { transform: rotate(180deg); margin:0; padding:0; text-shadow: none; color: rgb(128,128,128); line-height:1rem; } 
.post-categories li { font-size:0.5em; } 
.categories { margin:0; position:absolute; left:auto; right:0; top:0; height:100%; } 
.post-categories { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column-reverse; flex-wrap: wrap-reverse; justify-content: center; margin:0; padding:0; height:100%; } 
@keyframes titreshover { 
 0% { opacity:1; width: auto; overflow:visible; display: block; } 
100% { opacity:1; width: auto; overflow:visible; display: block; } 
 }
.item:hover > .titres { animation-name: none; } 
 }