@font-face {
    font-family: "DJResi";
    src: url("assets/fonts/DJResidentSerif-Regular.woff");
  }

/* GLOBAL */

body {

  margin: 0;
}





/* Animation */

@keyframes fadeInUp {
  from {
    opacity: 0
  }

  to {
      opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0
  }

  to {
      opacity: 1
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both
}

.animated FadeInUp {
  opacity: 0
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}


/* TYPOGRAPHY */
html,  a, p, span {

    color: #707070;
    font-family: DJResi;
    line-height: 1.5;
    font-size: 18px;
    margin-block-start: 0px !important;  
    margin-block-end: 0px !important;
}


h1 { 
  font-size: 24px;

}

  a:link { 
    text-decoration: none; 
  } 
  a:visited { 
    text-decoration: none; 
  } 
  a:hover { 
  text-decoration: none;
    color: #000000; 
  } 
  a:active { 
    text-decoration: underline;
    color: #000000;  
  }
  .ext-link {
    text-decoration: underline !important;
  }


.current-page {
 /* text-decoration: underline !important;*/
  color: #000000;  

}
  

/* CONTENT */

#header { grid-area: header;}
#main { grid-area: main;}
#footer { grid-area: footer;}

.grid-container {
  display: grid;
  grid-template-areas:
  'header'
  'main'
  'footer';
/*  grid-template-rows:   20vh 1fr 20vh;*/
  grid-gap: 10px;
  height: 100vh;
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
}

#header, #main, #footer {

  text-align: left;
  padding: 20px ;

  
}

#footer-grid, #header-grid, #main-grid {
  display: grid;
  grid-template-columns:   repeat(12, 1fr) ;
  gap: 10px;
}


#main-grid {
height: 100%;

}

.m-1, .m-2, .m-3, .m-4{

  align-content: center;
}

#portrait {

  width: 100%;

}


 /* //////// HEADER //////// */

 #navigation a {

padding-right: 20px;
 }
 
.h-1 {  grid-column: 1 /  5;}
.h-2 {  grid-column: 5 /  8;}
.h-3 {  grid-column: 8 /  12;}






 /* //////// MAIN //////// */  
  
 .m-1 {  grid-column: 1 /  5;}
 .m-2 {  grid-column: 5 /  8;}
 .m-3 {  grid-column: 8 /  11;}
 .m-4 {  grid-column: 11 /  13;}

 
 
  

/* //////// FOOTER //////// */


.f-1 {  grid-column: 1 /  5;}
.f-2 {  grid-column: 5 /  8;}
.f-3 {  grid-column: 8 /  11;}
.f-4 {  grid-column: 11 /  12;}

#footer, .f-1, .f-2, .f-3, .f-4 {

  align-content: end;
}


#footer {

	font-size: 14px;
	
}

/* //////// UEBER //////// */


.sp-1  .m-1 {  grid-column: 1 /  5;}
.sp-1 .m-2 {  grid-column: 5 /  8;}
.sp-1 .m-3 {  grid-column: 8 /  13;}

.sp-1 .m-1, .sp-1 .m-2, .sp-1 .m-3 {

  align-content: start;
}

.sp-1 .grid-container {
height: 100%;
min-height: 100vh;


}



/* ---------- MOBIL --------- */

@media only screen and (min-width: 812px) { 

  .m-info, .m-info-2  {

    display: none;
  }

 #portrait {

    padding-top: 20px;
  




  }



	#wordmark {
	
    width: 225px ;
      
    }
    
  
  }




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

  html,  a, p, span {


    font-size: 16px  !important;
  }


}
@media only screen and (max-width: 812px) {

 
  html,  a, p, span {

    font-size: 15px !important;

  }

  h1 {

    font-size: 20px;

  }
	
	#header, #main .m-1, #main .m-2, #main .m-3, #footer {

  padding: 10px  ;  
}

.m-info-2 p{

  font-size: 14px !important;
  line-height: 1.5;


}


.home #main .m-4, .sp-1 #main .m-1{
padding: 0px !Important;

}
#main {
  padding: 0px !Important;
  
  }
  



#navigation a {

  padding-right: 10px;
   }
	

  .grid-container {

    grid-template-rows:   40vh  1fr  !important;
  }

  #footer-grid, #header-grid, #main-grid {
    display: grid;
    grid-template-columns:    1fr  1fr  !important;
    grid-template-rows:    auto  !important;
    gap: 0px;

  }
	
	#wordmark {
	
	width: 150px ;
		
	}
  

#header-grid {
  align-content: space-between;
  height: 40vh;
}

.h-1 {  grid-column: 1 /  2;}
.h-2 {  grid-column: 2 /  4;}
.h-3 {  grid-column: 1 /  4;}


#navigation {
  padding-bottom: 10px;
}


#main-grid {

align-content: start;
}


.m-1 {  grid-column: 1 /  4;}
.m-2 {  grid-column: 1 /  4;}
.m-3 {  grid-column: 1 /  4;}
.m-4 {  grid-column: 1 /  4;}
  
 .home .d-info, .home  .m-1, .home  .m-2, .home  .m-3,
 .sp-1 .d-info{

display: none; 
}


.sp-1 .m-1 {  grid-column: 1 /  4;}
.sp-1 .m-2 {  grid-column: 1 /  4;}
.sp-1 .m-3 {  grid-column: 1 /  4;}
.sp-1 .m-4 {  grid-column: 1 /  4;}
  

.sp-1 h1 {margin: 0;}
.sp-1 .m-2, .sp-1 .m-3 





.f-1 {  grid-column: 0 /  0;}
.f-2 {  grid-column: 1 /  2;}
.f-3 {  grid-column: 2 /  4;}
.f-4 {  grid-column: 1 / 4;}

}