@font-face {
  font-family: 'open-sans';
  src: url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,300&display=swap');
 }

.subtitle {
 font-family: 'open-sans' sans-serif;
 font-weight: 300;
 font-style: italic;
}
 .subtitle2 {
     font-family: 'open-sans' sans-serif;
     font-weight: 300;
     font-style: normal;
 }

 .topnav-centered a {
     float: none;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }


 .img-bg {
     position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
     z-index: 100;
 }






 .overflow-hidden {
     position: relative;
     z-index: 0;
     overflow: hidden;
 }

 .box.homepage {
     min-height: 85vh;
 }

 .box.homepage2 {
     min-height: 50vh;
 }
 .box.homepage3 {
     min-height: 25vh;
 }

 @media only screen and (max-width: 400px)  {
     .box.homepage {
         max-height: 40vh;
     }

 }

 @media only screen and (max-width: 800px)  {
     .box.homepage {
         min-height: 40vh;
     }

 }


 @media only screen and (max-width: 1200px){
     .box.homepage {
         min-height: 70vh;
     }

 }



 .text-overlay {
     position: absolute;
     z-index: 10000;
     opacity: 0;
     transition: opacity 0.5s;
     min-height: 200px;
 }

 .text-overlay2 {
     position: absolute;
     z-index: 100;
     opacity: 100;

     min-height: 200px;
 }


 .overflow-hidden {

 }

 article:hover {
     & .text-overlay {
         opacity: 1
     }
     & .img-bg {
         opacity: .7
     }


 }

 .container. {

 }

 .footer {
     background: #FFFFFF;
     height: 70px;
     font-family: 'Open Sans', sans-serif;
     color: black;
     padding: 20px;
 }