body {
background: rgb(255, 118, 191);
min-height: 100vh;
display: grid;
place-items: center;
color: rgb(6, 0, 0);
font-family: courier 'Courier New', Courier, monospace;
font-size: 0.7rem;
}

* {margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family: 
courier, Courier, monospace;

}

a{
    color:rgb(131, 193, 69);
    outline-width: 1cap;
    outline-color: #c40d41;
            }

h5{font-size:clamp(20px, 4vw, 25px);
}

h1{font-size:clamp(200px, 10vw, 200px);
  color: deeppink;
}


.container {width:100%;max-width:1600px;margin:0 auto;padding-left:128px;padding-right:128px}

@media (max-width: 1024px){.container{padding-left:64px;padding-right:64px}}

@media (max-width: 767px){.container{padding-left:32px;padding-right:32px}}

.hamburger{position:relative;display:block;width:35px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none}

.hamburger .bar,.hamburger:after,.hamburger:before{content:'';display:block;width:100%;height:5px;background-color:whitesmoke;margin:6px 0px;-webkit-transition:0.4s;transition:0.4s}

.hamburger.is-active:before{-webkit-transform:rotate(-45deg) translate(-8px, 6px);transform:rotate(-45deg) translate(-8px, 6px)}

.hamburger.is-active:after{-webkit-transform:rotate(45deg) translate(-9px, -8px);transform:rotate(45deg) translate(-9px, -8px)}

.hamburger.is-active .bar{opacity:0}

.mobile-nav{position:fixed;top:0;left:100%;width:100%;min-height:100vh;display:block;z-index:98;background-color:transparent;padding-top:120px;-webkit-transition:0.4s;transition:0.4s}

.mobile-nav.is-active{left:0}

.mobile-nav a{display:block;width:100%;max-width:200px;margin:0 auto 16px;text-align:center;padding:12px 16px;background-color:#000000;color:rgb(252, 252, 156);text-decoration:none}

.mobile-nav a:hover{background-color:#0000ff}

@media (min-width: 768px){.mobile-nav{display:none}

.hamburger{display:none}}

section h2{text-align:left;margin-bottom:32px;text-transform:lowercase;color:#cdcccc;font-size:clamp(18px, 4vw, 25px)}

.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;background:none;display:inline-block;color:rgb(8, 0, 0);font-size:20px;background-color:rgb(252, 252, 156);padding:12px 16px;border-radius:4px;text-decoration:none;text-transform:lowercase;font-weight:700;cursor:pointer
box-shadow: 2px 9px 97px 3px rgba(255,255,2,1);
-webkit-box-shadow: 2px 9px 97px 3px rgba(255,255,2,1);
-moz-box-shadow: 2px 9px 97px 3px rgba(255,255,2,1);
}

@media (max-width: 767px){.button{font-size:18px}}

img{max-width:100%;
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}

header{color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
position:fixed;
top:0;
left:0;
width:100%;
z-index:99


}

header .container{padding-top:32px;padding-bottom:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}

header .container h2{color:inherit;text-transform:lowercase;font-size: clamp(18px, 4vw, 25px);font-weight:400}

header .container h2 span{font-weight:800}

header .container nav{display:-ms-grid;display:grid;grid-gap:16px;-ms-grid-columns:(auto)[4];grid-template-columns:repeat(4, auto)}

@media (max-width: 767px){header .container nav{display:none}}

header .container nav a{
color: var(--green);
font-size:15px;
text-decoration:none}

header.is-scrolling {position:fixed; background-color:transparent;}

header.is-scrolling .container{padding-top:16px;padding-bottom:16px}

main section.banner{
  color:#FFF;

  height:100vh;
  width:100vw;

  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;

  background-image:url("/uploads/jensfoerster_london4.png"


  );
  background-position:center center;background-size:cover}

main section.banner:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#bfe33b;opacity:0.1}

main section.banner .container{position:relative;z-index:1}

main section.banner .container h1{font-size:60px;margin-bottom:32px}



.maintitle{
position: relative;
justify-content: center;
align-items: center;
font-size: clamp(20px, 0vw, 20px);
text-shadow:  4px 1px black,
1px -1px 1px black,
-1px  1px 1px black,
-1px -1px 1px black;

}

.maintitle a{font-family:Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 0vw, 20px);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green);
 
  text-shadow:  4px 1px black,
                1px -1px 1px black,
               -1px  1px 1px black,
               -1px -1px 1px black;


  
  
  
  
  font-size: clamp(30px, 1vw, 30px);
 
}


a      #maintit::-ms-fill-lower {
  content: "$ ";
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes flash {
    50% { opacity: 0; }
  }
  @keyframes reveal {
    from { width: 2em; } /* Width of ::before */
      to { width: 100%; }
  }
  #maintitle {
    overflow: hidden;
    white-space: nowrap;
    animation: reveal 4s linear;
    text-overflow: "â–ˆ";
  }
  #maintitle::after {
    content: "â–ˆ";
    animation: flash 0.5s step-end infinite;
  }





@media (max-width: 767px){main section.banner .container h1{font-size:32px}}main section.banner .container h3{font-size:20px;font-weight:400;margin-bottom:32px}@media (max-width: 767px){main section.banner .container h3{font-size:14px}}




main {

scroll-snap-type: y proximity;
overflow-y: scroll;
}

main .services{

scroll-snap-align: start;
background-image:url("/uploads/1480502.png");
background-color: #ffb0df;

}

h6{
font-size: 12px;
color: deeppink;

}


main .services .container{padding-top:20px;padding-bottom:64px}

main .services .container .services-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4, 1fr);grid-gap:16px}

@media (max-width: 1024px){main .services .container .services-grid{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr)}}

@media (max-width: 767px){main .services .container .services-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}

main .services .container .services-grid .service{background-color:rgb(0,0,0);border-radius:1px;overflow:hidden;-webkit-box-shadow:0px 6px 12px rgb(252, 252, 156);box-shadow:0px 6px 12px rgba(4, 227, 243, 0.1)}

main .services .container .services-grid .service .img-box{display:block;width:100%;border-bottom:10px solid transparent}

main .services .container .services-grid .service .img-box .img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}

main .services .container .services-grid .service .content{
color: rgb(255, 151, 233);
}


main .services .container .services-grid .service .img-box .mySlides{

margin-bottom: 4px;
}


main .services .container .services-grid .service .content p{

font-size:clamp(10px, 3.4vw, 14px);
text-align: justify;
hyphens: auto;
text-align-last: none;

}

main .services .container .services-grid .service .content h3{
  
  font-size:clamp(14px, 2.4vw, 14px);
  padding-top:1em;
  padding-bottom:0.5em;
  color:deeppink;
  
  }


main .london{
  background-color: lightgreen;
  height:40vh;
  font-color:lightgreen;
  align-content: center;
  border: #0000ff;

}

main iframe {
  height:40vh;
  width: 100%; height: 400px; border: 0;

  
    }







  main .projects .container .projects-grid .project .subline{
    font-size:clamp(5px, 2.5vw, 8px);
    padding-top:0.0em;
    padding-bottom:0.4em;
    
    }



    main .projects .container .projects-grid .project .treffen{
      margin-top: 0.5em;
      border-radius: 0.2em;
    }
    


main .services .container .services-grid .service .content{padding:10px}


main .projects{padding-top:20px;padding-bottom:40px}
main .projects{background-color:#fbedf6;}

main .projects .projects-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:16px;margin-bottom:32px}

@media (max-width: 768px){main .projects .projects-grid{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr)}}

@media (max-width: 767px){main .projects .projects-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}

main .projects .projects-grid .project{background-image:url("file:///Users/eimer1/Downloads/cssWarp-compound.svg");border-radius:4px;overflow:hidden}

main .projects .projects-grid .project .content{opacity:0;color:var(--text-color);padding:16px;background-color:rgb(0, 0, 0);-webkit-transition:0.4s;transition:0.4s}

main .projects .projects-grid .project .content h3,h4{font-size:clamp(30px, 5vw,30px);margin-bottom:0px; color:rgb(228, 71, 152);}

main .projects .projects-grid .project .content p{font-size:18px;margin-bottom:16px; color:rgb(229, 135, 193);}

.project h4 {
margin-top:4px;
margin-bottom:1px;
}

main .services .container .services-grid .service .content .subline{
font-size:clamp(10px, 2.5vw, 10px);
padding-top:1em;
padding-bottom:0.4em;

}

@media (max-width: 1024px){main .projects .projects-grid .project .content h3{font-size:30px}}

main .projects .projects-grid .project .content p{font-size:50px;margin-bottom:16px}@media (max-width: 1024px){main .projects .projects-grid .project .content p{font-size:30px}}

main .projects .projects-grid .project:hover .content{opacity:1}

main .projects .center{text-align:center}

main .contact{background-color:rgb(0,0,0}

main .contact .container{padding-top:64px;padding-bottom:64px}

main .contact .container h2{color:#FFF}

main .contact .container form{display:block;margin:0 auto;max-width:680px}

main .contact .container form .form-grid{display:-ms-grid;display:grid;grid-gap:16px;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr);margin-bottom:16px}

@media (max-width: 767px){main .contact .container form .form-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}

main .contact .container form .form-grid .form-element,main .contact .container form .form-grid .form-area{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;background:none;display:block;width:100%;background-color:rgb(195, 6, 6);border-radius:4px;padding:16px;font-size:20px;color:rgb(230, 81, 7)}

main .contact .container form .form-grid .form-element::-webkit-input-placeholder,main .contact .container form .form-grid .form-area::-webkit-input-placeholder{color:#AAA}

main .contact .container form .form-grid .form-element:-ms-input-placeholder,main .contact .container form .form-grid .form-area:-ms-input-placeholder{color:#AAA}

main .contact .container form .form-grid .form-element::-ms-input-placeholder,main .contact .container form .form-grid .form-area::-ms-input-placeholder{color:#AAA}

main .contact .container form .form-grid .form-element::placeholder,main .contact .container form .form-grid .form-area::placeholder{color:#AAA}

main .contact .container form .form-grid .form-area{grid-column:1/-1}

main .contact .container form .right-align{text-align:right}

@media (max-width: 767px){.hide-mob{display:none}}

.b2{
font-size:clamp(18px, 3.5vw, 22px);

}
main .projects .projects-grid .project .b2 .date {
  padding-bottom: 0px;
  color:aquamarine;
}


main .projects .projects-grid .project .subline{
font-size:clamp(20px, 6vw, 60px);
padding-top:0.0em;
padding-bottom:0.0em;
color:tomato;

}


.disclaimer{
color:beige;
font-family: 'Times New Roman', Times, serif;



}





}



body main .projects .container .projects-grid .project .instrument {
  font-size: smaller;
  color: #0000ff;
}


.seite h1{
  writing-mode: vertical-lr;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
}


body main .projects .container .projects-grid .project p {
  writing-mode: vertical-lr;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: bold;
}

h3{color: deeppink;}

body main .container .projects-grid .project .head1{font-size: large;}