/* ==========================================================================
    Variables
   ========================================================================== */

:root {
--background-color: #E5E5E5;
--letterbox-outline: none; /* 5px solid yellow; */

--font: Montserrat, sans-serif;
--font-color: white;
--font-size: 15px;
--font-weight: 300;

--contact-font-color: white;
--projects-font-color: white;



}





/* ==========================================================================
    Global Styles
   ========================================================================== */

*
{
    margin:0;
    padding:0;
}

body {
  font-family: var(--font);
  color: var(--font-color);
  font-size: var(--font-size);
  line-height: 16px;
  font-weight: var(--font-weight);
  background: var(--background-color);
}

h1 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 36px;
  line-height: 50px;
  font-weight: 400;
}

h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  line-height: 46px;
  font-weight: 400;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 38px;
  font-weight: 400;
}

h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 34px;
  font-weight: 500;
}

h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
}

p {
  margin-bottom: 10px;
}

a {
  display: block;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  color: var(--font-color);
  text-decoration: none;
}

a:hover {
  color: var(--font-color);
  text-decoration: underline;
}

a:active {
  color: var(--font-color);
}

ul {
  /* margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px; */
  list-style-type: none;
  white-space: nowrap;
}

li {
  margin-bottom: 10px;
}

img {
  display: block;
}

label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

blockquote {
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 15px 30px;
  border-left: 5px solid #e2e2e2;
  font-size: 20px;
  line-height: 34px;
}

figure {
  margin: 0px;
  padding: 0px;
}

figcaption {
  margin-top: 5px;
  opacity: 0.6;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}




/* ==========================================================================
   Wrappers
   ========================================================================== */
#ProjectsAndContact {
  align-self: flex-start;
justify-self: flex-start;
padding: 0vw;
transition: 2s ease-out;
transform: scale(1);
  animation: reveal 2s ease-out 2.8s both;

}

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


.stage {
position: relative;
height: 100vh;

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

overflow: hidden;
}

.stage {
  position: fixed;
  height:100%;
  width:100%;
}


.letterbox
{
    width: 90vw; /* 90% of viewport vidth */
    height: 50.625vw; /* ratio = 9/16 * 90 = 50.625 */
    max-width: 160vh; /* 16/9 * 90 = 160 */
    /* background: pink; */
    max-height: 90vh;
    margin: auto;
    position: absolute;
    /* top:0;bottom:0;
    left:0;right:0; */
    transition: 2s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  animation: letterbox-entry 2.5s ease-out 0.5s both;
  /* box-shadow: 0 0 100px black;
  border-radius: 10vh; */
}



/* .letterbox:hover
{
    width: 50vw;
    height: 50vw;
    max-width: 50vh;
    max-height: 50vh;
    transition: 2s ease-out;
} */


.content-box {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 2s ease-out;
  animation: content-box-entry 2.5s ease-out 0.5s both;
}



/* @-webkit-keyframes letterbox-entry-square {
  0% {
    width: 50vw;
    height: 50vw;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
} */

@keyframes letterbox-entry {
  0% {
    /* width: 40%;
    height: 50%;  */
    transform: scale(0.3);
    /* transform: scaleY(1.4); */
    opacity: 1;
  }
  100% {

    opacity: 1;
  }
}

@keyframes content-box-entry {
  0% {
    /* width: 40%;
    height: 50%;  */
    transform: scaleX(0.4);
/* 
    transform: scaleY(1.4);
 */
    opacity: 0.9;
  }
  100% {

    opacity: 1;
  }
}

@keyframes object-container-entry {
  0% {
    /* width: 40%;
    height: 50%;  */
    /* transform: scaleX(0.4);
    transform: scaleY(0.4); */
    /* transform: scaleX(2); */
    transform: scale(3);
    opacity: 0.9;
  }
  100% {

    opacity: 1;
  }
}


/* ==========================================================================
   Layer Boxes
   ========================================================================== */

.layer-box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--zindex);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

.layer-box div ul{
  pointer-events: auto;
}


.object-container {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  max-height: 100%;
  max-width: 100%;
  transition: 2s ease-out;
  animation: object-container-entry 2.5s ease-out 0.5s both;

}

.logo {
  width: 24vw;
  margin-right: auto;
  margin-left: auto;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: flex-start;
  -ms-grid-row-align: flex-start;
  align-self: flex-start;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  min-width: 30vh;
  margin-top: 18vh;
  max-width: 60%;
  animation: scale-in-center 2.5s ease-out 0.5s both;
}

#SVG_Logo {
  width: 24vw;
  margin-right: auto;
  margin-left: auto;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: flex-start;
  -ms-grid-row-align: flex-start;
  align-self: flex-start;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  min-width: 30vh;
  margin-top: 18vh;
  max-width: 60%;
  animation: scale-in-center 2.5s ease-out 0.5s both;
}

#Logo_Path {
  stroke-width: 0 !important;
stroke: #fff;
fill: #fff !important;

}



/* ==========================================================================
   settings
   ========================================================================== */


.object-default {
  position: absolute;
  object-fit: cover;
  object-position: 50% 50%;
  height: 100%;
  width: 100%;
  transition: 2s ease-out;

  border: 1000px solid;
  border-color: var(--letterbox-color, var(--background-color, white));

}

.object-cover-letterbox .object-default {
  position: absolute;
  object-fit: cover;
  object-position: 50% 50%;
  height: 100%;
  width: 100%;
  transition: 2s ease-out;

  border: 1000px solid;
  border-color: var(--letterbox-color, var(--background-color, white))
}


.image-contain-portrait .object-default {
/*  height: auto; */
  /* fallback image at media queries */
}


.letterbox.object-cover-viewport  .object-default {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100vw;
  height: 100vh;
  transition: 2s ease-out;

}

.letterbox.object-stretch-viewport .content-box, .letterbox.object-stretch-viewport .object-container {
  position: absolute;
  width: 100vh;
  height: 100vw;
  max-height: 100%;
  max-width: 100%;
}

.letterbox.object-stretch-viewport .object-default {
  object-fit: fill;
  object-position: 50% 50%;
  width: 100vh;
  height: 100vw;
  transition: 2s ease-out;

}

.letterbox.object-stretch-viewport .fill {
    position: absolute;
    width: 100vh;
    height: 100vw;
    max-height: 100%;
    max-width: 100%;
}




/* ==========================================================================
   layer effects
   ========================================================================== */

/* Broken */
.overlay-layer-shadow:after, .overlay-layer-lens:after, .overlay-layer-vignette:after{
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    max-height: 100%;
    top:0;left:0;
    overflow: hidden;
    z-index: 3;
}

.overlay-layer-shadow:after{
    box-shadow: inset 0 0 100px #000;
}

.overlay-layer-lens:after {
  background: radial-gradient( circle, transparent 50%, black 150%);
}

.overlay-layer-vignette:after {
    background: radial-gradient(circle, transparent 50%, red 150%);
    mix-blend-mode: difference;
}



/* ==========================================================================
   Fallbacks
   ========================================================================== */


.letterbox.image-fallback {
  background-image: var(--layer1-background, url("/assets/desert.jpg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.letterbox.image-fallback .object-default {
  visibility: hidden;
}

.letterbox.image-fallback.object-cover-letterbox {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.letterbox.image-fallback.object-cover-viewport {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 50%;
}

.letterbox.image-fallback.object-stretch-viewport {
  background-repeat: no-repeat;
  background-size: 100vh 100vw;
  background-position: 50% 50%;
}

/* ==========================================================================
   Positioning and Fill
   ========================================================================== */



.left, .right, .top, .bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}
.left, .right {
  width: 50%;
}

.top, .bottom {
  height: 50%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
}

.left.right {
  width: 100%;
  height: 50%;
  justify-content: center;
  align-items: center;
}

.top.bottom {
  height:100%;
  width: 50%;
  justify-content: center;
  align-items: center;
}

.left.bottom {
    display: none;
}

.left {
  left: 0;
  justify-content: flex-start;
}
.right {
  right: 0;
  text-align: right !important;
  justify-content: flex-end;

}
.top {
  top:0;
  align-items: flex-start;
}

.bottom {
  bottom: 0;
  align-items: flex-end;
}

.width100 {
  width: 100%
}

.height100 {
  height: 100%
}

.fill {
  position: absolute;
width: 100vh;
height: 100vw;
max-height: 100%;
max-width: 100%;
}


.up {

}

.down {

}

.center {

}

.bottom_border {
  width: fit-content;
  border-bottom: 1px solid #fff;
}

.impressum {
  font-size: 80%;
  opacity: 60%;
}

/* ==========================================================================
   animations & keyframes
   ========================================================================== */

   /* .letterbox:hover
   {
       height: 33vw;
       max-width: 140vh;
       transition:  2s ease;
   } */




 .scale-in-center {
	-webkit-animation: scale-in-center 2s linear 0.5s both;
	        animation: scale-in-center 4s linear 0.5s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-4-12 15:27:10
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
            filter:blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
            filter:blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}


/* ==========================================================================
   media queries
   ========================================================================== */


@media (orientation: portrait) {
  .stage {
    position: fixed;
    height:100%;
    width:100%;
  }

  .letterbox {
    height: 85%;
    width: 90%;
    min-height: 85%;
    max-width: 90%;
    position: fixed;
  }

  .no-cover-portrait {
    background-size: contain;
  }

  .top, .bottom {
    height: 50%;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 25px;
    padding-right: 25px;
}


}




@media screen and (max-height: 500px) and (orientation : landscape) {

  .stage {
    /* max-height: calc(90vh - 60px); */
    position: relative;
    height: 100vh;
    min-height: 310px;
  }

    .letterbox {
      /* max-height: calc(90vh - 60px); */
      position: absolute;
      min-height: 310px;
      min-width: 390px;
    }
}



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


  .rich-text {
    width: 90%;
    max-width: 470px;
    text-align: left;
  }





  .section {

  }

}


@media screen and (max-width: 479px) {
  .rich-text {
    width: 100%;
    max-width: none;
  }
}



/* @media screen and (max-width: 991px) {} */