/*!
Theme Name: Elmenreich
Theme URI: https://www.elmenreich.de
Author: wald.pixel.werk
Author URI: https://waldpixelwerk.de/
Description: Theme für Elmenreich
Version: 1.0.0
Tested up to: 8.4
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: elmenreich
Tags: custom-menu, translation-ready
*/

@charset "UTF-8";

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'FHLecturis';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/FHLecturis-Light.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'FHLecturis';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/FHLecturis-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'FHLecturis';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/FHLecturis-Bold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


body{

}


 :root{

  }



@media(min-width:1900px){
body{
--cwidth:1530px;
--cwidths:1360px;
--fonts:18px;
  }
}

@media(orientation: portrait){
body{
--cwidth:90vw;
--cwidths:82vw;
--fonts:3.35vw;
  }
}

body, html{
font-family: "FHLecturis", sans-serif;
font-weight: 400;
font-style: normal;
padding:0;margin:0;left:0;top:0;position:relative;font-size:0.9vw;line-height:1.4em;font-weight:400;background-color:#fff;color:#000;white-space-collapsing:discard;min-height:100vh}




.logo{position:fixed;z-index:2;width:33%;left:33.5%;top:calc(50% - 8.5em);cursor:pointer}
.content-text{position:relative}
.text-1{width:81%;margin-top:10rem;margin-left:9.5%;font-size:2.85em;line-height:5rem;display:inline-block;font-weight:300;position:relative;transition:opacity .8s ease-in-out;opacity:0}
.text-2{width:94%;margin-top:12.3rem;margin-left:2%;font-size:1em;line-height:5rem;display:inline-block;position:absolute;left:0;top:0;text-transform:uppercase;letter-spacing:0.18em;transition:opacity .8s ease-in-out;opacity:0;}
.text-1.active, .text-2.active{opacity:1}
.main-content{padding-bottom:50vh;}

.footer{position:fixed;bottom:0;top:100vh;transition:top .5s ease-in-out;left:0;width:100vw;height:100vh;background-color:#000;color:#fff;font-weight:300;z-index:4;overflow:scroll}
.footer.active{top:0;}
.footer-text{width:81%;margin-left:9.5%;margin-top:10em}
.footer-text-top{font-size:2.85em;line-height:1.8em;text-transform:uppercase;letter-spacing:0.03em;display:inline-block;width:100%;}
.footer-text-top b{letter-spacing:0.12em;font-weight:700}
.footer-text-center{margin-top:2em;leter-spacing:0.03em;text-transform:uppercase;font-size:1.95em;line-height:2.05em;display:inline-block;width:100%;}
.footer-text-center a{text-decoration:underline;color:#fff !important;}
.footer-text-bottom{margin-top:8em;margin-bottom:5em}
.footer-text-bottom{font-size:2.85em;display:inline-block;width:100%;}
.footer-text-bottom .link{margin-left:1.5em;cursor:pointer;}
.footer-text-bottom a{color:#fff !important;text-decoration:none;}

.overlay{position:fixed;bottom:0;top:100vh;transition:top .5s ease-in-out;left:0;width:100vw;height:100vh;background-color:#000;color:#fff;font-weight:300;z-index:9;overflow:scroll}
.overlay.active{top:0;}

.overlay-close{font-size:8em;position:absolute;right:9.5%;top:5.5rem;cursor:pointer;font-weight:300;z-index:9}
.overlay-inner{position:relative;margin-top:5rem;width:50%;font-size:1.95em;line-height:2.05em;letter-spacing:0.03em;margin-left:9.5%;padding-bottom:10em}

.overlay-head{font-weight:300;display:inline-block;width:100%;margin-bottom:3rem;font-size:2.85rem;line-height:1.8em;text-transform:uppercase;}


u{text-underline-offset: 0.2em;}

@media (orientation: portrait){
  body, html{font-size:2vw;line-height:1.5em;}

  .logo{position:fixed;z-index:2;width:60%;left:20%;top:calc(50% - 8.5em);cursor:pointer}


  .footer-text-bottom {
    font-size: 1.95em;
}


.overlay-inner {
    position: relative;
    margin-top: 5rem;
    width: 80%;
  }

}


@media only screen 
  and (max-device-width: 428px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
 .text-1 {
line-height: 4.9rem;
}
	  
	  .text-2 {
line-height: 3.7rem;
margin-top: 12.7rem;
}
	  
	  
}



@media only screen 
  and (device-width: 430px) 
  and (device-height: 932px) 
	and (orientation: landscape) 
  and (-webkit-device-pixel-ratio: 3) {
    
	  
	  .text-1 {
line-height: 5.5rem;
}
	  
	  
.text-2 {
line-height: 3.7rem;
margin-top: 12.7rem;
}
	  
	  
}