@charset "utf-8";
/* CSS Document */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*---------------Schriften 'Special Elite' ''------------------------------------------------------------*/
@font-face {
  font-family:'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('Fonts/special-elite-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('Fonts/special-elite-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

@font-face {
  font-family:'NaftaLight-Regular';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('Fonts/NaftaLight-Regular.woff2') format('woff'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('Fonts/NaftaLight-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}



/*---------------grundsätzliche übergreifende Befehle-----------------------------------------------------*/



html, body {font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";scrollbar-width:none;-ms-overflow-style:none;scroll-behavior: smooth;
  overflow: visible !important;  
  height: 100%;
      }




@media (min-width:1367px){

/*--------horizontales Scrollen + Größe einzelne Container und gesamtgröße------------------------------*/





::-webkit-scrollbar {display:none;}


.outerwrapper {
               width:100%;
               display:flex;
               position:fixed;
               top:0;
               left:0;
              }




.container  {min-width:100%;
             height:100vh;
             display:flex;
             justify-content:center;
             align-content: center;
             
             }


/*--------------horizontales Scrollen Ende---------------------------------*/



/*--------------#all contact/about------------------------------------------------*/
#all {display:flex;height:100vh;width:100%;}
	
#contact_all {display:flex;height:100vh;width:100%;}

/*--------------#all index ENDE-------------------------------------------*/
/*--------------h1 Eigenschaften------------------------------------------*/
h1{display:none;}

/*--------------h1 Eigenschaften Ende-------------------------------------*/


/*-------------CONTENT 1---------------------------*/

#content1{ 
           display:flex;
           height:100vh;
           max-width:100vw;}

/*--------------different navs------------------*/


nav{   
        order: 1;
        height: 100%;
        flex-basis: 22.4%;
        background:black;
        padding-top: 7.45vh;
        padding-bottom: 7.45vh;
        padding-left:3.9vw;
        padding-right:3.9vw;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-between;}
    
#index_nav {
        order: 2;
        height: 100%;
        flex-basis: 22.4%;
        background: black;
        padding-top: 7.45vh;
        padding-bottom: 7.45vh;
        padding-right: 3.9vw;
        padding-left: 3.9vw;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-between;}
    
    

nav ul {list-style:none;width:100%;height:auto;}
#index_nav ul {list-style:none;width:100%;height:auto;}


nav li {border:none;padding-top: 3.0vh;display:flex;justify-content: flex-start;}
#index_nav li {border:none;padding-top: 3.0vh;display:flex;justify-content: flex-start;}


nav li p{width:100%;height:3.0vh;}
#index_nav li p{width:100%;height:auto;}

nav a{
                font-family: 'Special Elite';
                letter-spacing:0.2rem; 
                text-decoration: none;
                font-size: 3.0vh;
                color: white;}

#index_nav a{
                font-family: 'Special Elite';
                letter-spacing:0.2rem; 
                text-decoration: none;
                font-size: 3.0vh;
                color: white;}

#follow{        display:flex;
                width:100%;
                height:2vh;
                justify-content: center;
                margin-bottom:1vh;}


#INSTAGRAMICON{height:3.0vh;
               display:block;}



nav p:last-of-type{font-family:'Special Elite';
                   font-size: 3.0vh;
                   letter-spacing: 0.1rem;
                   margin-left: 1.0vw;
                   color:white;}

#index_nav p:last-of-type{font-family:'Special Elite';
                   font-size: 3.0vh;
                   letter-spacing: 0.1rem;
                   margin-left: 1.0vw;
                   color:white;}


/*--------------Navigtaion left Ende--------------*/




/*-------Hover Effekt nav---------------------------*/


.hover{ width:100%;
        height:100%;
        border: none;
        outline: none;
        
        cursor: pointer;
        position:relative;
        z-index: 0;}

.hover:before {
                content: '';
                background: url("LOGOS_ICONS/Zacken hover Effekt .gif");
                position: absolute;
                bottom:0;
                left:0;
                background-repeat:no-repeat;
                background-size:80%;
                z-index:-1;
                width:100%;
                height:100%;
                opacity: 0;
                }

.hover:active:after{
    background: transparent;
    color:transparent;}

.hover:hover:before {opacity: 1;}

.hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    background:black;
    left: 0;
    bottom: 0;}


/*------------------------------------------------------------------------------*/




/*--------Navigation content 1 ENDE------------------------------------------------*/




/*--------main graphics/logo/web/typo/paint------------------------------------*/

#LOGO {width:100%;}

/*-------different mains and articles-------------------------------------------------------*/

main{               display:flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    order: 2;
                    height: 100vh;
                    background:transparent;
                    width: 77.6vw;
                    padding-top: 7.45vh;
                    padding-right: 3.9vw;
                    padding-left: 3.9vw;}

#aboutcontact_main{
                    order: 2;
                    height: 100vh;
                    background: white;
                    flex-basis: 77.6%;
                    padding-top: 7.45vh;
                    padding-bottom: 7.45vh;
                    padding-right: 3.9vw;
                    padding-left: 3.9vw;}

#index_main {
                    order: 1;
                    height: 100vh;
                    background: white;
                    flex-basis: 77.6%;
                    padding-top: 7.45vh;
                    padding-bottom: 7.45vh;
                    padding-right: 3.9vw;
                    padding-left: 3.9vw;}

#about_article{     display:flex;
                    justify-content:space-between;
                    align-items: flex-end;
                    width:100%;
                    height:100%;}

#about_img_box{order:2;width:auto;height:100%;display:flex;justify-content: flex-end;align-content:flex-end;}
    


#contact_article{display:flex;
                justify-content:space-between;
                align-items:flex-start;
                width:100%;
                height:100%;}

#contact_img_box{order:2;width:auto;height:100%;display:flex;justify-content: flex-end;align-content:flex-end;}



 main article{height:85.08vh;
              width:100%;
              overflow:hidden;
              position:relative;
              }/*--------object fit ?---------------------*/

article p:first-of-child{width:100%;height:100%;display:flex;justify-content:center;align-items:center;}

article p:first-of-child img {width:auto;height:100%;}/*------- wieder anders rum?--------*/

article a{text-decoration: none;}


#content1 article:hover .align{opacity:1;}



main #Info{display:flex;
          flex-wrap: wrap;
          justify-content:flex-start;
          align-content:center;
          width:100%;
          height:7.45vh;
          left:26.3;
          bottom:0;
          }

main #Info p {font-family:NaftaLight-Regular;
              height:3vh;
              font-size:3vh;
              color:black;}
    
.mobile_project_titel{display:none;}
	
.mobile_img_descrpt{display:none;}

/*--------------main graphics/logo/web/typo/paint ENDE-------------------*/

/*--------------Index Seite Items---------------------------------------------*/

#index_main >#index_article, p {height: 100%;}

/*--------------Index Seite items Ende----------------------------------------*/

/*--------------About Seite Items---------------------------------------------*/
#Text    {order:1;
          width:auto;
          height:auto;
          font-family:'Special Elite';
          text-align:left;
          font-size:2.5vh;}

#Text h2{font-family:'Special Elite';
	     font-size:4.0vh; }

#Text p {height:2.5vh;}

#about_article img{order:2;
                   height:100%;}


/*--------------About Seite Items Ende ---------------------------------------------*/
/*--------------Contact Seite Items-------------------------------------------------*/
#formular {height:100%;width:21.6vw;display:flex;flex-direction: column; justify-content:flex-start; }
	
#formular h2{font-family:'Special Elite';font-size: 4.0vh; }
           

#formular p,#mailto-button {width:100%}
    
#formular p{padding-top:2%;
            padding-bottom:2%;
	        
            font-family:'Special Elite';
            font-size:2.5vh;
            height:auto;
	        margin-bottom:5.0vh; 
            }

#formular>#mailto-button   {     background:black;
	                     text-decoration: none;
                         font-family:'Special Elite';  
                         font-size:2.5vh;
                         height:auto;
                         padding:2%;
                         border:none;
                         color:white;}
	
#formular> #mailto-button> a {text-decoration: none;color:white;}




	





#contact_article img{order:2;
                     height:100%;}

/*--------------Contact Seite Items Ende-------------------------------------------------*/




/*----------------CONTENT Projectübersichten Klassen ----------------------------------------------*/

.content  {
           height:100vh;
           max-width:100vw;
           padding-left:3.9vw;
           padding-top:7.45vh;
           padding-bottom:7.45vh;
           padding-right:3.9vw;
           }

.content-main {width:100%;
              height:100%;
              display:flex;
              justify-content:space-between;
              align-items:flex-end;}

.rest{width:22.4vw;height:100%;display:flex;justify-content: flex-end;align-items: flex-end;}

.content-main:hover .BACKBUTTON{opacity:1;transition: opacity 2s;}


.content-article{width:69.8vw;height:100%;background:transparent;overflow:hidden;
                position:relative;}

.content .content-article:hover .align{opacity:1;}
    
.content-article p:first-of-child{width:100%;height:100%;display:flex;justify-content:center;align-items:center;}

.content-article p:first-of-child img{width:auto;height:100%;}
    

/*----------------Content Projectübersichten Klassen ENDE-----------------------------------------------*/

/*----------------Content Projectseiten Klassen---------------------------------------------------------*/

.projectintro {    display:flex;
                   flex-wrap:wrap;
                   justify-content: center;
                   align-items:center;
                   align-content: center;
                   position:absolute;
                   left:0;
                   bottom:0;
                   width:100%;
                   height:100%;
                   background:rgba(0,0,0,0.77);
	               padding-top:7.45vh;
	               padding-bottom:7.45vh;
	               padding-left:3.9vw;
	               padding-right:3.9vw;
                   }
	
.projectintro2 {   display:flex;
                   flex-wrap:wrap;
                   justify-content: center;
                   align-items:center;
                   align-content: center;
                   position:absolute;
                   left:0;
                   bottom:0;
                   width:100%;
                   height:100%;
	               background: rgba(0,0,0,0.20);
	               padding-top:7.45vh;
	               padding-bottom:7.45vh;
	               padding-left:3.9vw;
	               padding-right:3.9vw;
                   }

.projectintro h2 {  order:1;
                    font-size:7.5vh;
                    text-align:center;
                    color:white;
                    width:100%;
                    height:auto;
                    font-family:'Special Elite';}
	
.projectintro2 h2 { order:1;
                    font-size:7.5vh;
                    text-align:center;
                    color:white;
                    width:100%;
                    height:auto;
                    font-family:'Special Elite';}	

.projectintro2 h3 { order:1;
                    font-size:7.5vh;
                    text-align:center;
                    color:black;
                    width:100%;
                    height:auto;
                    font-family:'Special Elite';}	


.projectbeschreibung    {order:2;
                         font-family:'Special Elite';
                         text-align:center;
                         color:white;
                         width:100%;
                         height:auto;
                         margin-top:2.5vh;

                         font-size:2.5vh;}

.projectbeschreibung2    {order:2;
                         font-family:'Special Elite';
                         text-align:center;
                         color:black;
                         width:100%;
                         height:auto;
                         margin-top:2.5vh;

                         font-size:2.5vh;}

.projectintro a    {order:3;
                    font-family:'Special Elite';
                    font-size:2.0vh;
                    border: none;
                    padding:0.2%;
                    margin-top:2.5vh;;
                    background:white;
                    color:black;
                    cursor:pointer;}

.projectintro a:hover{background:black;color:white;}

/*----------------Content Projectseiten Klassen ENDE----------------------------------------------------*/


/*--------------generelle slide übergreifende Elemente----------------- */


/*--------pop up legalnotice&privacypolicy---------------------------------------*/


.popup:target .overlay{display:block;}
.popup:target .popcontent{transform:translate(-50%,-50%) scale(1);transition:all 300ms ease-in-out;}

.popup .overlay{position:fixed;
                top:0;
                left:0;
                width:100vw;
                height:100vh;
                background:rgba(0,0,0,0.7);
                z-index:100;
                display:none;}

.popup .popcontent{position:fixed;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%) scale(0);
                background:white;
                width:69.8vw;
                height:85vh;
                z-index:200;
                text-align:left;
                font-family:'Special Elite';
                font-size:1.5vh;
                padding:5%;
                box-sizing: border-box;
                overflow:scroll;}

.popup p{height:auto;}

.popup .close-btn{position:absolute;
                  cursor:pointer;
                  top:4vh;
                  left:2vw;
                  font-size:4vh;
                  
                  line-height:4vh;
                  
                  }

.close-btn a{text-decoration: none;color:black;}
    
footer{position:fixed;bottom:0;left:0;height:7.5vh;width:100vw;}

footer button {position:fixed;
               line-height:1.5vh;
               font-size:1.5vh;
               font-family:'Special Elite';
               border:none;
               bottom:2.9vh;
               left:85vw;}

footer button a{text-decoration:none;color:black;}

footer button a:hover{color:#FF4E00;cursor: pointer;}

footer h3{font-family:'Special Elite';
          font-size:3vh;
          }

footer h4{font-family:'Special Elite';
          font-size:2.0vh;
          text-decoration:underline;}

#leftfooter {  position:fixed;
               bottom:2.9vh;
               left:3.9vw;
               line-height:1.5vh;
               font-size:1.5vh;
               font-family:'Special Elite';
               border:none;
               
               }

#leftfooter a{text-decoration:none;color:black;}
#leftfooter a:hover{color:#FF4E00;cursor: pointer;}

/*---------------Popup legalnotic&privacypolicy---------------------------------------------*/

/*-----------------Contact Button fixed------------------------------------------------------*/

#Brief{position:fixed;
       top:0vw;
       left:96.1vw;
       width:3.9vw;
       height:7.5vh;}

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

/*----------------Contact Button fixed Ende-----------------------------------------------*/



/*------------------- übergreifende Klassen-----------------------------------------------*/

.padding {padding-right: 1.5vw;}

.align    {display:flex;
           flex-wrap: wrap;
           justify-content: center;
           align-items:center;
           align-content: center;
           position:absolute;
           left:0;
           bottom:0;
           width:100%;
           height:100%;
           background:rgba(0,0,0,0.73);
           opacity:0;
           transition:all 1s;
           }

       

.align h2{  order:1;
            font-size:7.5vh;
            text-align:center;
            color:white;
            width:100%;
            height:auto;
            font-family:'Special Elite';
            }

.align p{order:2;
         font-family:'Special Elite';
         text-align:center;
         color:white;
         width:100%;
         height:auto;
         font-size:2.5vh;}

.cover {width:auto;height:100%;}

.cover2 {width:100%;height:100%;}
	
.BACKBUTTON{opacity:0;
            height:7.45vh;
            width:3.6vw;
            border-radius:50%;
            background:black;
            margin-left:2%;
            margin-bottom:2%;
            margin-right:6.0vw; 
            display:flex;
            justify-content: center;
            align-items: center;
            padding-left:1.5%;}

.BACKBUTTON img{width:60%;height:60%;}
    
.nodesk{display:none;}


/*-----------Lightbox Bild_gross-------------------------------------------------------------*/

/*.bild_gross{z-index: 400;
            position:fixed;
            display: flex;
            justify-content:space-between;
            align-content: center;
            left:50%;
            top:50%;
            width:100%;
            height:100%;
            transform:translate(-50%,-50%)scale(0,0);
            background:black;
            padding:2.0vh 8.0vw 2.0vh 3.9vw;
            opacity:0;
            transition:all 0.3s;}

.bildbeschreibung p{order:2;font-family:'Special Elite';font-size:2.0vh;width:100%;height:2.0vh;}
.bildbeschreibung a{order:1;display:block;text-decoration:none;color:white;font-size:4.0vh;width:100%;height:4.0vh;}

.bild_gross .bildbeschreibung{display:flex;flex-wrap:wrap; align-content:space-between;justify-content: flex-start; width:100%;height:100%;color:white;}

.bild_gross img{object-fit: cover; width:auto;max-height:100%;}

.bild_gross:target{opacity:1;transform:translate(-50%,-50%)scale(1,1);}*/

/*-----------------Lightbox Bild_gross ENDE---------------------------------------------------*/

/*------------------Slidebox----------------------------------------------------------*/
slider{display:block;width:100%;height:100%;overflow:hidden;position:absolute;}

slider > *{position:absolute;display:block;width:100%;height:100%;animation:slide 12s infinite;
           overflow:hidden;}

slide:nth-child(1){left:0%;animation-delay: -1s;}
slide:nth-child(2){animation-delay: 2s;}
slide:nth-child(3){animation-delay: 5s;}
slide:nth-child(4){left:0%;animation-delay: 8s;}

@keyframes slide{0%{left:100%;width:100%;}
                 5%{left:0%;}
                25%{left:0%;}
                30%{left:-100%;width:100%;}
           30.0001%{left:-100%;width:0%;}
               100%{left:100%;width:0%;}}


slide img{width:100%;height:100%;background-size:cover;background-position: center;}
/*------------------Slidebox Ende-----------------------------------------------------*/
}

@media (max-width:1366px){

/*--------horizontales Scrollen + Größe einzelne Container und gesamtgröße------------------------------*/

	


::-webkit-scrollbar {display:none;}


.outerwrapper {
               position: absolute;
               display:flex;
               flex-direction:column;
               height:auto;
               transform:none !important;
               
               }
    


.container  {width:100vw;
             height:100vh;
	         
             display:flex;
             justify-content:center;
             align-content: center;
             
             }


/*--------------horizontales Scrollen Ende---------------------------------*/



/*--------------#all contact/about------------------------------------------------*/
#all {display:flex;flex-direction: column; height:100vh;width:100vw;}

#contact_all {display:flex;flex-direction: column; height:150vh;width:100vw;}
	

/*--------------#all index ENDE-------------------------------------------*/
/*--------------h1 Eigenschaften------------------------------------------*/
h1{display:none;}

/*--------------h1 Eigenschaften Ende-------------------------------------*/


/*-------------CONTENT 1---------------------------*/

#content1{ 
           display:flex;
           justify-content: center;
           align-content: center;
           height:100vh;
	       
           width:100vw;}

/*--------------different navs------------------*/


nav{    position:fixed;
        z-index: 300;
        top:0;
        left:0;
        order: 1;
        width: 100vw;
        height: 10vh;
        background:black;
        padding-top:1.25vh;
        padding-bottom:1.25vh;
        padding-left:3.3vw;
        padding-right:3.3vw;
        text-align: center;
        display: flex;
        justify-content:space-between;
        align-content:center;}

nav li a{display:none;}
    
#index_nav {
        order:1;
        width: 100vw;
        height:10vh;
        background: black;
        padding-top:1.25vh;
        padding-bottom:1.25vh;
        padding-right: 3.3vw;
        padding-left: 3.3vw;
        text-align: center;
        display: flex;
        justify-content:space-between;
        align-content:center;}
    

    
#follow        {display:none;}



#mobile_INSTAGRAMICON{position:fixed;
                      z-index:350;
                      bottom: 2.5vh;
                      left:3.3vw;
                      height:5.0vh;
                      width:auto;}
    
#mobile_INSTAGRAMICON p,a,img{height:100%;
                              width:auto;}
    

    
#follow p:last-child{display:none;}
    
#index_nav p:last-of-type{display:none;}
    
/*--------------Navigtaion left Ende----------------------------------------------------------------------*/
    
/*--------------mobilenav + checker/label-----------------------------------------------------------------*/
    
    input[id*="checker"] {display:none;}
    
    #mobilenav{width:100vw;
               height:80vh;
               position:fixed;
               z-index: 10000;
               right:0vw;
               top:10vh;
               transform:translateX(100%)translateY(0%);
               background:black;
               display:flex;
               flex-direction: column;
               align-content: flex-start;
               justify-content: center;
               transition: 0.5s;}
    
    #navchecker:checked ~ #mobilenav{
		transform:translateX(0%)translateY(0%);}
    
    #mobilenav ul {list-style:none;}
        
    #mobilenav a   {width:100%;
                    font-family: 'Special Elite';
                    font-size:3vh;
                    text-decoration: none;
                    color:white;
                    border-bottom: 1px solid white;
                    display: block;
                    line-height:10vh;
                    text-align: center;}
    
    #mobilenav a:hover {background:#FF4E00;}
    
    #burgerbutton label{z-index: 301;
                        position:fixed;
                        right:3.3vw;
                        top:2.5vh;
                        height:5vh;
                        width:6.6vw;}
    
    #burgerbutton label span{position:absolute;
                             left:20%;
                             width:60%;
                             height:2px;
                             background:white;
		                     transition: 1s 0.5s;}
    
    #burgerbutton label span:nth-of-type(1) {top: 34%;}
	#burgerbutton label span:nth-of-type(2) {top: 49%;}
	#burgerbutton label span:nth-of-type(3) {top: 64%;}
    
    #navchecker:checked + #burgerbutton label span:nth-of-type(1) {
		transform: rotate(45deg);
		top: 49%;}
    
    
	#navchecker:checked + #burgerbutton label span:nth-of-type(2) {
		transform: rotate(135deg);}
    
    
	#navchecker:checked + #burgerbutton label span:nth-of-type(3) {
		transform: rotate(-45deg);
		top: 49%;}

    
/*--------------mobilenav + checker/label-----------------------------------------------------------------*/

/*--------Navigation content 1 ENDE------------------------------------------------*/




/*--------main graphics/logo/web/typo/paint------------------------------------*/

#LOGO {z-index:301;position:fixed;top:1.25vh;left:3.3vw;height:7.5vh;width:auto;}

/*-------different mains and articles-------------------------------------------------------*/

main{               display:flex;
                    flex-direction: column;
                    align-content:space-between;
                    order: 2;
                    margin-top:10vh;
                    height:80vh;
                    width:100vw;
                    overflow: hidden;
                    padding-bottom:2.5vh;
                    padding-right: 3.3vw;
                    padding-left: 3.3vw;}

#aboutcontact_main{
                    order: 2;
                    margin-top:10vh; 
                    width:100vw;
                    background: white;
                    height:80vh;
                    padding-top:2.5vh;
                    padding-bottom:2.5vh;
                    padding-right:3.3vw;
                    padding-left:3.3vw;}

#index_main {
                    order: 2;
                    width: 100vw;
                    background: white;
                    height:80vh;
                    padding-top:2.5vh;
                    padding-bottom:2.5vh;
                    padding-right: 3.3vw;
                    padding-left: 3.3vw;}
	


#about_article{     display:flex;
	                flex-direction: column;
                    justify-content:flex-start;
                    align-content:center;
                    
                    width:100%;
                    height:100%;}
    


#contact_article{display:flex;
	             flex-direction: column;
                 justify-content:center;
                 align-content:flex-start;
                 width:100%;
                 height:100%;}
    

main article{ order:2;
              height:77vh;
              width:100%;
              display:flex;
              flex-direction: column;
              justify-content: center;
              align-content: flex-start;
              overflow:hidden;
              position: relative;
              }

article p:first-of-type{height:69vh;order:1;width:100%;display:flex;justify-content: center;align-content: center;}
    
article p img {width:auto;height:100%;}

article a{text-decoration: none;}






main #Info{order:1;
          display:flex;
          justify-content:center;
          align-content:center;
          width:100%;
          height:auto;
          padding-top:0.5vh;
          padding-bottom:0.5vh; 
          }

main #Info p {font-family:NaftaLight-Regular;
              font-size:2vh;
              width:100%;
              text-align: center;
              color:black;}
    
.mobile_project_titel{       
	                         order:2;
                             width:100%;
                             height:10vh;
                             display:flex;
                             flex-direction: column;
                             justify-content: center;
                             align-content:space-between;
                             background:white;
                             
                             z-index:250;   
                             padding:1.0vh 3.3vw 0.5vh 3.3vw;}

.mobile_project_titel h2{order:1;width:auto;color:black;font-family:'Special Elite';font-size:2vh;text-align:center;}
.mobile_project_titel p{order:2;width:auto;color:black;font-family:'Special Elite';font-size:1vh;text-align: center;}
	
	
	
	
.mobile_img_descrpt{         order:2;
	                         
                             width:100%;
                             height:10vh;
                             display:flex;
                             flex-direction: column;
                             justify-content: center;
                             align-content:space-between;
                             background:white;
                             
                             z-index:250;   
                             padding:1.0vh 3.3vw 0.5vh 3.3vw;}
	
.mobile_img_descrpt h2{order:1;width:auto;color:black;font-family:'Special Elite';font-size:2vh;text-align:center;}
.mobile_img_descrpt p {order:2;width:auto;color:black;font-family:'Special Elite';font-size:1vh;text-align: center;}

/*--------------main graphics/logo/web/typo/paint ENDE-------------------*/

/*--------------Index Seite Items---------------------------------------------*/

#index_article, p {overflow:hidden;width:100%;height:100%;}
#index_article p{display:flex;justify-content:center;align-content:center;}

#index_article p img{width:auto;height:80%;}


/*--------------Index Seite items Ende----------------------------------------*/

/*--------------About Seite Items---------------------------------------------*/
#Text      {order:2;
            width:100%;
            height:auto;
            font-family:'Special Elite';
            text-align:center;
            font-size:2.0vh;}

#Text h2{font-family:'Special Elite';
	     font-size:3.5vh; }

#Text p {height:2.0vh;}
    
#about_img_box             { order:1;
							 display:flex;
							 flex-direction: column;
							 justify-content: flex-start;
							 align-items:center;
							 width:100%;
							 height:50%;
	                         margin-bottom: 3.5vh;}

#about_img_box img{height:100%;width:auto;}


/*--------------About Seite Items Ende ---------------------------------------------*/
/*--------------Contact Seite Items-------------------------------------------------*/
#formular {order:2;height:50%;width:100%;display:flex;flex-direction: column; justify-content:flex-end;align-content: center; }
	
#formular h2{font-family:'Special Elite';font-size: 3.5vh;text-align: center; }
           

#formular> p,#mailto-button {width:100%}
    
#formular p{padding-top:2%;
            padding-bottom:2%;
	        text-align: center;
            font-family:'Special Elite';
            font-size:2.0vh;
            height:auto;
	        margin-bottom:4.0vh; 
            }

#formular>#mailto-button   {     background:black;
	                     text-decoration: none;
                         font-family:'Special Elite';
	                     text-align: center;
                         font-size:2.0vh;
                         height:auto;
                         padding:2%;
                         border:none;
                         color:white;}
	
#formular> #mailto-button> a {text-decoration: none;color:white;}
    
#contact_img_box{order:1;
                 display:flex;
                 flex-direction: column;
                 justify-content: flex-start;
                 align-items:center;
                 width:100%;
                 height:50%;}

#contact_img_box img{width:auto;height:100%;}
    
 
    




/*----------------CONTENT Projectübersichten Klassen ----------------------------------------------*/

.content  {
           display:flex;
           height:100vh;
           width:100vw;
           }

.content-main {display:flex;
               flex-direction: column;
               align-content:space-between;
               order: 2;
               margin-top:10vh;
               width:100vw;
               height:80vh;
               overflow: hidden;
               padding-top:2.5vh;
               padding-bottom:2.5vh;
               padding-right: 3.3vw;
               padding-left: 3.3vw;}


.rest{display:none;}




.content-article{display:flex;
                 flex-direction:column;
                 justify-content:center;
                 align-content:flex-start;
                 width:100%;
                 height:100%;
                 
                 position: relative;
                 }

.content-article p:first-of-type{height:70vh;
                                 order:1;
                                 width:100%;
                                 display:flex;
                                 justify-content:center;
                                 align-content: center;}

.content-article p:first-of-type img{width:auto;height:100%;}

	
    
.content-article a{text-decoration: none;}
    

/*----------------Content Projectübersichten Klassen ENDE-----------------------------------------------*/

/*----------------Content Projectseiten Klassen---------------------------------------------------------*/

.projectintro {    display:flex;
                   flex-direction: column;
                   justify-content: center;
                   align-items:center;
                   
                   position:absolute;
                   left:0;
                   bottom:0;
                   width:100%;
                   height:100%;
                   background: rgba(0,0,0,0.40);
	               padding-top:2.5vh;
	               padding-bottom:2.5vh;
	               padding-right:3.3vw;
	               padding-left:3.3vw;
                   }
.projectintro2 {    display:flex;
                   flex-direction: column;
                   justify-content: center;
                   align-items:center;
                   
                   position:absolute;
                   left:0;
                   bottom:0;
                   width:100%;
                   height:100%;
                   background: rgba(0,0,0,0.0);
	               padding-top:2.5vh;
	               padding-bottom:2.5vh;
	               padding-right:3.3vw;
	               padding-left:3.3vw;
                   }
	
.projectintro h2 {  order:1;
                    font-size:3.0vh;
                    text-align:center;
                    color:white;
                    width:100;
                    height:3.0vh;
                    font-family:'Special Elite';
                    margin-bottom:2.5vh; }
	
.projectintro2 h3 { order:1;
                    font-size:3.0vh;
                    text-align:center;
                    color:black;
                    width:100;
                    height:3.0vh;
                    font-family:'Special Elite';
                    margin-bottom:2.5vh; }

.projectintro p {order:2;
                 font-family:'Special Elite';
                 text-align:center;
                 color:white;
                 width:100%;
                 height:1.5vh; 
                 margin-top:1.5vh;
                 
                 font-size:1.5vh;}
    
.projectbeschreibung{order:2;
                     font-family:'Special Elite';
                     text-align:center;
                     color:white;
                     width:100%;
                     height:auto; 
                     margin-top:2.5vh;

                     font-size:2.0vh;}

.projectbeschreibung2{order:2;
                     font-family:'Special Elite';
                     text-align:center;
                     color:black;
                     width:100%;
                     height:auto; 
                     margin-top:2.5vh;

                     font-size:2.0vh;}
.projectintro a    {order:3;
                    font-family:'Special Elite';
                    font-size:2.0vh;
                    height:2.0vh;
                    border: none;
                    padding:0.2%;
                    margin-top:2.5vh;;
                    background:white;
                    color:black;
                    cursor:pointer;}

.projectintro a:hover{background:black;color:white;}
    


/*----------------Content Projectseiten Klassen ENDE----------------------------------------------------*/


/*--------------generelle slide übergreifende Elemente----------------- */


/*--------pop up legalnotice&privacypolicy---------------------------------------*/


.popup:target .overlay{display:block;}
.popup:target .popcontent{transform:translate(-50%,-50%) scale(1);transition:all 300ms ease-in-out;}

.popup .overlay{position:fixed;
                top:0;
                left:0;
                width:100vw;
                height:100vh;
                background:rgba(0,0,0,0.7);
                z-index:400;
                display:none;}

.popup .popcontent{position:fixed;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%) scale(0);
                background:white;
                width:69.8vw;
                height:85vh;
                z-index:500;
                text-align:left;
                font-family:'Special Elite';
                font-size:2.0vh;
                padding:5%;
                box-sizing: border-box;
                overflow-y:scroll;
	            overflow-x:hidden;}

.popup p{height:auto;}

.popup .close-btn{position:absolute;
                  cursor:pointer;
                  top:5%;
                  right:5%;
                  font-size:4vh;
                  line-height:4vh;}

.close-btn a{text-decoration: none;color:black;}
    
footer{position:fixed;
       z-index:300; 
       left:0;
       /* top:90vh; */
       bottom:0;
       width:100vw;
       height:10vh;
       background:black; 
       }

footer button {position:fixed;
               line-height:1.5vh;
               font-size:1.5vh;
               font-family:'Special Elite';
               border:none;
               bottom:4.25vh;
               right:3.3vw;
               background:black;}

footer button a{
  position: fixed;
  bottom: 3px;
  right: 3.3vw;
  height: 5vh;
  width: auto;
  text-decoration: none;
  color: white;
}


footer button a:hover{color:#FF4E00;cursor: pointer;}

footer h3{font-family:'Special Elite';
          font-size:3vh;
          }

footer h4{font-family:'Special Elite';
          font-size:2.0vh;
          text-decoration:underline;}

#leftfooter {  position:fixed;
               line-height:1.5vh;
               font-size:1.5vh;
               font-family:'Special Elite';
               border:none;
               /* top:94vh; */
               bottom:4.25vh;
               right:3.3vw;
               }

#leftfooter a{text-decoration:none;color:white;}
#leftfooter a:hover{color:#FF4E00;cursor: pointer;}

/*---------------Popup legalnotic&privacypolicy---------------------------------------------*/

/*-----------------Contact Button fixed------------------------------------------------------*/

#Brief{position:fixed;
       z-index: 301;
       top:2.5vh;
       right:13.2vw;
       width:6.6vw;
       height:5.0vh;}

#Brief img{width:auto;height:100%}

/*----------------Contact Button fixed Ende-----------------------------------------------*/



/*------------------- übergreifende Klassen-----------------------------------------------*/

.padding {padding-right: 1.5vw;}

.align    {display:none;}

       


.cover {display:flex;justify-content:center;height:100%;width:auto;}


.BACKBUTTON{position:fixed;
            z-index: 301;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            right:3.3vw;
            top:82.5vh;
            width:6.6vw;
            height:5vh;
            background:pink;
            border-radius: 50%}

.BACKBUTTON img{width:auto;height:40%;}
    
.nodesk{display: block;}


/*-----------Lightbox Bild_gross-------------------------------------------------------------*/

/*-----------------Lightbox Bild_gross ENDE---------------------------------------------------*/

/*------------------Slidebox----------------------------------------------------------*/
slider{z-index:200;display:block;width:100%;height:70vh;overflow:hidden;position:absolute;}

slider > *{position:absolute;display:block;width:100%;height:100%;animation:slide 12s infinite;
           overflow:hidden;}

slide{display:flex;justify-content: center;align-content: center;}

slide:nth-child(1){left:0%;animation-delay: -1s;}
slide:nth-child(2){animation-delay: 2s;}
slide:nth-child(3){animation-delay: 5s;}
slide:nth-child(4){left:0%;animation-delay: 8s;}

@keyframes slide{0%{left:100%;width:100%;}
                 5%{left:0%;}
                25%{left:0%;}
                30%{left:-100%;width:100%;}
           30.0001%{left:-100%;width:0%;}
               100%{left:100%;width:0%;}}


slide img{width:auto;height:100%;background-size:cover;background-position: center;}
/*------------------Slidebox Ende-----------------------------------------------------*/
}