@font-face {
    font-family: 'Union';
    src: url('font/Union.woff2') format('woff2'),
        url('font/Union.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
    background-color: #FFFFFA;
    font-size: 8px;
}

@media screen and (min-width: 480px) {
   html {
       font-size: 9px;
   }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 10px;
    }
 }
 

body {
    font-family: 'Union', sans-serif;
    color: #1B1B1B;
}

section {
    overflow: hidden;
}


.panel {
    display:flex;
    width:100%;
    background-size: cover;
    background-position: center;
    align-items: center;
    justify-content: center;
    text-align:center;
    position:relative;

}

#home.panel-group .panel{
    height:50vh;
}

.panel .inline-video,
#footer .inline-video { 
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 1; 
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.inline-video {
    background: black;
}

.video-link {
    position:relative;
    z-index: 2;
    pointer-events: none;
}


a.panel {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 3.8rem;
    font-weight: bold;
}



#hero {
    padding: 0 10vw;
    display: flex;
    flex-direction: column;
}

#hero h1 {
    flex: 0 1 auto;
}

#hero .panel-group {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    min-height: 0;

}


#hero .panel {
    /* height: 50%; */
    flex: 0 0 auto;
}


  #hero h1 {
      text-align: center;
      text-transform: uppercase;
      font-size: 3.6rem;
      letter-spacing: 1px;
      font-weight: normal;
  }

  #hero .panel--description {
    font-weight: normal;
    font-size: 3.2rem;
    line-height: 1.375;
    flex: 0 1 auto;
    padding: 32px 0;
}

#hero .panel--portrait {
    position: relative;
    flex: 1 1 auto;
    min-height: 1px;
    height: 100%;
}

#hero .panel--description > p{
    margin: 0;
}

 

#hero .portrait {
    position: relative;
    height: 100%;
    object-fit: contain;
    max-height: 50vh;
    /* height: 100%; */
    padding: 32px;
    width: 100%;
}

#herovideo {
    background: transparent;
    object-fit: contain;
}



@media (min-aspect-ratio: 1/1){
    #hero {
        height: calc(100vh - 9rem);
    }

    .panel-group {
        display: flex;

    }
    
    #home.panel-group .panel{
        height:100vh;
        width:50vw;

    }

    #hero .panel-group {
        flex-direction: row;
        
    }

    #hero .panel {
        height: auto;
    }

    #hero .panel--description,
     #hero .panel--portrait{
        width:40vw;
        text-align: center;

      }

      #hero .panel--portrait{ 
          
          padding: 2.5vw 5vw;
      }

      #hero .portrait {
          width: 100%;
          max-height: 100%;
          padding: 0;
      }
}
  .navigation {
     
      position:sticky;
      top:0;
      background-color:#FFFFFA;
        height: 9rem;

  }

  .navigation ul{
    font-size: 2.4rem;
    line-height: 1.33;
    display:flex;
    justify-content: space-between;
    margin:0;
    padding: 0;
  }

  .navigation li {
      list-style: none;
      padding: 0;
      margin:0;
  }

  .navigation a {
    text-decoration: none;
    color:#1b1b1b;
    padding: 3rem;
    letter-spacing: 1px;
    display: inline-block;
  }

  .navigation .active a,
  .navigation a:hover,
  .copy a:hover,
  .photogrid figcaption a:hover {
    color:#FE6767;
  }



 .copy {
     /* text-align: center; */
     padding:7.5vw 15vw;
     font-size: 2.4rem;
     line-height: 1.41;
 }

a {
     color: inherit;
 }

 .copy h3 {
     font-weight: normal;
     font-size: 3.2rem;
     line-height:1.375 ;   
 }

.photogrid {
    margin: -5vw auto 0 auto;
    padding:0 0 5vw 0;
    width:90vw;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;

}

.photogrid figure {
    flex:1 0 50%;
    justify-self: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding:5vw;
    margin: 0;

}


.photogrid figure:first-child,
.photogrid figure:nth-child(3n+1) {
    flex:1 0 100%;
    padding: 5vw 10vw;
}


.photogrid figcaption {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    margin-top: 1em;
}

.photogrid figure img,
.photogrid figure video {
    max-height: 50vh;
    max-width: 100%;
}

#contact {
    /* min-height: 50vh; */
     justify-content: center;
     align-items: center;
     color: white;
     text-decoration: none;
     background-position: center;
     background-size: cover;

}


 #footer {
     min-height: 50vh;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     text-decoration: none;
     text-transform: uppercase;
     font-size: 3.2rem;
     font-weight: bold;
     position: relative;
 }