:root {
    --col1: #8d8d8d;
    --col2: rgb(108, 166, 171);
    --col3: #eff5f5;

}* {
    box-sizing: border-box; 
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-family: Figtree, sans-serif ;
    color: var(--col1);
}

H3, H2 {
    color: var(--col2);
}
p {
    font-weight: 300;
    line-height: 1.8rem;
}

.content {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.navigation {
    /* display:  none; */
    position: fixed;
    top: 0;
   
    left:  calc(-100% - 400px);
    font-weight: 300;
    font-size: 1.4rem;
    background-color: rgba(255, 255, 255, 95%);
    padding: 15px 45px;
    transition: left 1s;
    transition-timing-function: ease;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
    z-index: 10;
}
.navigation.active{
        /* display: block; */
    left: 0;
    top: 0;
    transition: left .5s;
    transition-timing-function: ease;
}

.navigation li{
    border-bottom: 2px solid var(--col3);
    /* margin-bottom: 8px; */
    padding: 8px;
}

.navigation li:hover{
    background-color: var(--col3);
    border-bottom: 2px solid var(--col3);
}
.navToggle {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
    background-color: #fff;
    z-index: 20;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.navToggle:hover{
    cursor: pointer;
}
.navToggle .navBar1{
    width: 22px;
    height: 4px;
    margin: 1.5px;
    background-color: var(--col2);
    border-radius: 2px;
    transition: transform .35s;
}

.navToggle .navBar1.active{
    transform: rotate(45deg) translate(4px, 6px);
    transition: transform .35s;
    }
    

.navToggle .navBar2{
    width: 22px;
    height: 4px;
    margin: 1.5px;
    background-color: var(--col2);
    border-radius: 2px;
    opacity: 1;
    transition: opacity .35s;
    transition-delay: .2s;
}

.navToggle .navBar2.active{
    
    opacity: 0;
    transition: opacity .35s;
    }

.navToggle .navBar3{
    width: 22px;
    height: 4px;
    margin: 1.5px;
    background-color: var(--col2);
    border-radius: 2px;
    transition: transform .35s;
}
.navToggle .navBar3.active{
    transform: rotate(-45deg) translate(4px, -6px);
    transition: transform .35s;
}



.nav .navI {
    padding: 4px;
}

.headerImg, .headerImg2{
    display: flex;
    align-items: center;
    justify-content: center;
}
.headerImg img{
    width: 75%;
    max-width: 360px;
    padding: 20px 40px;
}


.headerImg2 a img{
    width: 100%;
    height: auto;
    max-width: 300px;
    padding: 20px 40px;

}
.blurb {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}



.blurb H2{
  /* text-transform: uppercase; */
  font-weight: 200;
  font-size: 1.4rem;
    /* margin: auto; */
}

.blurb p{
    width: 80%;
    max-width: 700px;
    margin: auto;
}
.homeContent{
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  gap: 16px;
}

.homeContent .imgBox{
    display: flex;
    flex-direction: column;
    padding-top: 32px;
}

.homeContent .imgBox img {
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15 );
    margin-top: 8px;
}

.homeContent .imgBox img:hover {
    opacity: 0.7;
}

.homeContent .imgBox H3{
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 200;
    font-size: 1rem;
    /* font-style: italic; */
}



.homeContent .imgBox .imgHeading{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    max-width: 250px;
}
.homeContent .imgBox .imgHeadingD{
        display: flex;
    flex-direction: column;
    align-items: centre;
    justify-content: flex-end;
    max-width: 250px;
    text-align: center;
    margin-bottom: 10 px;
    /* gap: -10px 3px; */
}
.homeContent .imgBox .imgHeadingD H3{
        font-size: 1.3rem;
}
.homeContent .imgBox .px1{
    height: 12px;
    width: 32px;
    background-image: url(images/px1.svg);
    background-repeat: no-repeat;
      background-position: center;
      align-self: baseline;
}
.homeContent .imgBox .px2{
    height: 12px;
    width: 32px;
    background-image: url(images/px2.svg);
    background-repeat: no-repeat;
      background-position: center;
      align-self: baseline;
}
.homeContent .imgBox .px3{
    height: 12px;
    width: 32px;
    background-image: url(images/px3.svg);
    background-repeat: no-repeat;
      background-position: center;
      transform: rotate(90deg);
      align-self: baseline
}
.homeContent .imgBox .px4{
    height: 12px;
    width: 32px;
    background-image: url(images/px4.svg);
    background-repeat: no-repeat;
      background-position: center;
      align-self: baseline;
}

.homeContent img{
    width: 100%;
    max-width: 250px;
    min-width: 150px;
    margin: auto;
}


/* DIGITAL PAGE */

.Dlightbox01 {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.Dlightbox01:target {
  display: block;
}

.Dlightbox01 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.Dlightbox02 {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.Dlightbox02:target {
  display: block;
}

.Dlightbox02 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.Dlightbox03 {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.Dlightbox03:target {
  display: block;
}

.Dlightbox03 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.Dlightbox04 {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.Dlightbox04:target {
  display: block;
}

.Dlightbox04 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.Dlightbox05 {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.Dlightbox05:target {
  display: block;
}

.Dlightbox05 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.Dlightbox06 {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.Dlightbox06:target {
  display: block;
}

.Dlightbox06 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.blurb2{
    margin: 16px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 20px;
}

.blurb2 h2 {
    font-weight: 200;
}

.blurb2 img {
    width: 40%;
    transform: rotate(180deg);
}


.imgContainer {
    max-width: 1024px;
    margin: auto;
      display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  justify-content: center;
}

.imgContainer .imgGroup {
      flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}

.imgContainer .imgGroup img {
  vertical-align: middle;
  width: 100%;
}

.DigidImgBox {
    position: relative;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2);
    width: 90%;
    margin: 0 auto 16px auto;
}
.imgOverlay{
    position: absolute;
    top: 0px;
    width: calc(100% - 64px);
    margin: 32px;
    padding: 8px 16px;
    
    transition: .3s ease;

  background-color: rgba(239,245,245,0.9);
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2);
  opacity:0;
  z-index: 10;
}

.imgOverlay p {
    color: var(--col1); 
    
}

.DigidImgBox:hover .imgOverlay {
    opacity:1;
}

.whirl {
    max-width: 96px;
} 

/* VIDEO PAGE */

  

    .vidBox {
     text-align: center;


    }
    iframe {
          aspect-ratio: 16/9;
 
        padding: 12px 24px 0 24px;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        max-width: 512px;
        
   
    }



    @media screen and (max-width: 600px) {
.imgContainer .imgGroup  {
    flex: 100%;
    max-width: 96%;
    margin:  16 auto;
    
  }
      }

      /* PRINT PAGE */
.lightbox01 {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.lightbox01:target {
  display: block;
}

.lightbox01 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.close {
  color: #333333;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  z-index: 21;
}

.close:hover {
 color: white;
}


.lightbox02 {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}



.lightbox02:target {
  display: block;
}

.lightbox02 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.lightbox03 {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.lightbox03:target {
  display: block;
}

.lightbox03 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.lightbox04 {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.lightbox04:target {
  display: block;
}

.lightbox04 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.lightbox05 {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(128, 128, 128, 0.8);
}

.lightbox05:target {
  display: block;
}

.lightbox05 span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}



  /* FOOTER */
.foot {
    position: relative;
}

.foot .whirl {
    display: block;
    margin: 64px auto 16px auto;
    max-width: 96px;
}

.foot  p {

    text-align: center;
    font-size: .8rem;

  }
      .social {
        /* position: absolute;
        bottom: 20px; */
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .social li a {
        display: inline-block;
        /* filter: invert(1); */
        margin-right: 10px;
        transform: scale(40%);
        transition: .3s;
    }
   
        .social li a:hover {
            transform: scale(40%) translateY(-15px);
            
        }