/******** Base and Body Styles ********/

 
#aperture {
    margin: 0px 0px;
    padding: 0px 0px;
}

span.write {
    font-style: italic;
}

.miniList {
    font-size: 0.75em;
}

.a {
    position: relative;
    width: 200px;
    height: 200px;
    display:none;
    opacity:0;
    z-index: 9000;
    transform: translate(250%, 250%) scaleY(0.25) scaleX(0.25) rotate(90deg);
    /* transition: all 1s linear; */
    border-radius: 0% 100% 72% 28% / 100% 100% 0% 0%;
    background-color: white;
    box-sizing: content-box;
    transition: transform .3s ease-out 0s;
    -webkit-transition: transform .3s ease-out 0s;
    -moz-transition: transform .3s linear 0s;
    -ms-transition: transform .3s linear 0s;
    -o-transition: transform .3s linear 0s;
}
  .a:before {
    content: "";
    box-sizing: content-box;
    position: absolute;
    top: 5px;
    left: -215px;
    width: 200px;
    height: 200px;
    /* border: 20px solid red; */
    border-radius: 128% 113% 0% 0;
    box-shadow: 108px -5px 0px 0px white;
    /* transform: rotate(-45deg); */
    transition: transform .3s ease-out 0s;
    -webkit-transition: transform .3s ease-out 0s;
    -moz-transition: transform 1s linear 0s;
    -ms-transition: transform 1s linear 0s;
    -o-transition: transform 1s linear 0s;
  }
 




* {
    box-sizing: border-box;
    list-style-type: none;
    /* margin: 0;
    padding: 0; */

}


@media screen and (prefers-reduced-motion: no-preference){
html {
    scroll-behavior: smooth;
  }
}  


/******** Onload Nav Animations ********/


        /*****  Optional  *****/


/* opaque1 {
0%{opacity:0;}
50%{opacity:0.25;}
100%{opacity:1;}
}

@keyframes opaque2 {
0%{opacity:1;}
10%{opacity:0.1;}
100%{opacity:0;}
} */

/* lens 1  0%{transform:scaleY(1) scaleX(1);}
1%{opacity:1;}
25%{opacity:0;}
90%{opacity: 0.1};
100%{transform:scaleY(0.1) scaleX(1.3); opacity: 1;}

 lens2 {
    0%{transform:scaleY(0.1) scaleX(1.3);}
    100%{transform:scaleY(1) scaleX(1);}
} */


        /*****  Global Nav  *****/


/* Logo onload animation */


@keyframes navLogoLoad {
    0%{
        /* height:450px; */
        transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    50%{
        /* height:450px; */
        transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    55%{
        /* height:450px; */
        transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:0;
    }
    100%{
        /* height:0px; */
        transform: scaleY(0.5) translate(0px, -200px);
        z-index: -1;
        opacity:0;
    }
}

@-webkit-keyframes navLogoLoad  {
    0%{
        /* height:450px; */
        -webkit-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    50%{
        /* height:450px; */
        -webkit-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    55%{
        /* height:450px; */
        -webkit-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:0;
    }
    100%{
        /* height:0px; */
        -webkit-transform: scaleY(0.5) translate(0px, -200px);
        z-index: -1;
        opacity:0;
    }
}

@-moz-keyframes navLogoLoad  {
    0%{
        /* height:450px; */
        -moz-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    50%{
        -moz-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    55%{
        /* height:450px; */
        -moz-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:0;
    }
    100%{
        /* height:0px; */
        -moz-transform: scaleY(0.5) translate(0px, -200px);
        z-index: -1;
        opacity:0;
    }
}
@-ms-keyframes navLogoLoad  {
    0%{
        /* height:450px; */
        -ms-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    50%{
        /* height:450px; */
        -ms-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    55%{
        /* height:450px; */
        -ms-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:0;
    }
    100%{
        /* height:0px; */
        -ms-transform: scaleY(0.5) translate(0px, -200px);
        z-index: -1;
        opacity:0;
    }
}
@-o-keyframes navLogoLoad  {
    0%{
        /* height:450px; */
        -o-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    50%{
        /* height:450px; */
        -o-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:1;
    }
    55%{
        /* height:450px; */
        -o-transform: scaleY(1) translate(0px, -75px);
        z-index: 99;
        opacity:0;
    }
    100%{
        /* height:0px; */
        -o-transform: scaleY(0.5) translate(0px, -200px);
        z-index: -1;
        opacity:0;
    }
}



/* page navigation logo animation */



@keyframes navBtnLoad {
    0%{
        z-index: 99;
        opacity: 0;
        transform: scaleY(0.08) scaleX(1.144) translate(0px, -50px);
        background-image: var(--silver-lens);
    }

    20%{
        z-index: 99;
        transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
        background-image: var(--silver-lens);
        opacity: 1;
    }
    40%{
        opacity: 1;
    }
    50% {
        z-index: 99;
        transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);  
        background-image: var(--silver-lens);
    }
    60% {
        z-index: 1;
        background-image: var(--silver-border);  
    }
    100%{
        z-index: 1;
        transform:scaleY(1) scaleX(1) translate(0px, 120px);
        background-image: var(--silver-border);  
    }
}

@-webkit-keyframes navBtnLoad {
    
    0%{
        z-index: 99;
        opacity: 0;
        -webkit-transform: scaleY(0.08) scaleX(1.144) translate(0px, -50px);
    }
    30%{
        z-index: 99;
        -webkit-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
        opacity: 1;
        background-image: var(--silver-lens);
        -webkit-background-image: var(--silver-lens);
    }
    /* 40%{
        opacity: 1;
        background-image: var(--silver-lens);
        -webkit-background-image: var(--silver-lens);
    } */
    50% {
        z-index: 99;
        -webkit-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
        background-image: var(--silver-lens);
        -webkit-background-image: var(--silver-lens);
    }
    60% {
        z-index: 1;
    }
    100%{
        z-index: 1;
        -webkit-transform:scaleY(1) scaleX(1) translate(0px, 120px);
        -webkit-background-image: var(--silver-border);
    }
 
}

@-moz-keyframes navBtnLoad{
   
    0%{
        z-index: 99;
        opacity: 0;
        -moz-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
    }

    30%{
        z-index: 99;
        -moz-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
        opacity: 1;
        background-image: var(--silver-lens);
        -moz-background-image: var(--silver-lens);
    }
    /* 40%{
        opacity: 1;
        background-image: var(--silver-lens);
        -moz-background-image: var(--silver-lens);
    } */
    50% {
        z-index: 99;
        -moz-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
        background-image: var(--silver-lens);
        -moz-background-image: var(--silver-lens);
    }
    60% {
        z-index: 1;
    }
    100%{
        z-index: 1;
        -moz-transform:scaleY(1) scaleX(1) translate(0px, 120px);
        background-image: var(--silver-border);
        -moz-background-image: var(--silver-border);
    }
}
@-ms-keyframes navBtnLoad{
    
    0%{
        z-index: 99;
        opacity: 0;
        -ms-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
    }

    30%{
        opacity: 1;
        background-image: var(--silver-lens);
        -ms-background-image: var(--silver-lens);
        z-index: 99;
        -ms-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
    }
    /* 40%{
        opacity: 1;
        background-image: var(--silver-lens);
        -ms-background-image: var(--silver-lens);
    } */
    50% {
        z-index: 99;
        -ms-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
        background-image: var(--silver-lens);
        -ms-background-image: var(--silver-lens);
    }
    60% {
        z-index: 1;
        background-image: var(--silver-lens);
        -ms-background-image: var(--silver-lens);
    }
    100%{
        z-index: 1;
        -ms-transform:scaleY(1) scaleX(1) translate(0px, 120px);
        background-image: var(--silver-border);
        -ms-background-image: var(--silver-border);
    }
}
@-o-keyframes navBtnLoad{
    
    0%{
        z-index: 99;
        opacity: 0;
        -o-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
    }

    30%{
        opacity: 1;
        background-image: var(--silver-lens);
        -o-background-image: var(--silver-lens);
        z-index: 99;
        -o-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);
    }
    /* 40%{
        opacity: 1;
        background-image: var(--silver-lens);
        -o-background-image: var(--silver-lens);
    } */
    50% {
        z-index: 99;
        -o-transform:scaleY(0.08) scaleX(1.144) translate(0px, -50px);   
        background-image: var(--silver-lens);
        -o-background-image: var(--silver-lens);
    }
    60% {
        z-index: 1;
    }
    100%{
        z-index: 1;
        -o-transform:scaleY(1) scaleX(1) translate(0px, 120px);
        background-image: var(--silver-border);
        -o-background-image: var(--silver-border); 
    }
}



/* index logo image fade */


@keyframes imgTriggerLoad {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@-webkit-keyframes imgTriggerLoad {
    0%{
        -webkit-opacity:0;
    }
    100%{
        -webkit-opacity:1;
    }
}
@-moz-keyframes imgTriggerLoad {
    0%{
        -moz-opacity:0;
    }
    100%{
        -moz-opacity:1;
    }
}
@-ms-keyframes imgTriggerLoad {
    0%{
        -ms-opacity:0;
    }
    100%{
        -ms-opacity:1;
    }
}
@-o-keyframes imgTriggerLoad {
    0%{
        -o-opacity:0;
    }
    100%{
        -o-opacity:1;
    }
}

/* page navigation logo image fade */



@keyframes imgTriggerLoad2 {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@-webkit-keyframes imgTriggerLoad2 {
    0%{
        -webkit-opacity:0;
    }
    100%{
        -webkit-opacity:1;
    }
}
@-moz-keyframes imgTriggerLoad2 {
    0%{
        -moz-opacity:0;
    }
    100%{
        -moz-opacity:1;
    }
}
@-ms-keyframes imgTriggerLoad2 {
    0%{
        -ms-opacity:0;
    }
    100%{
        -ms-opacity:1;
    }
}
@-o-keyframes imgTriggerLoad2 {
    0%{
        -o-opacity:0;
    }
    100%{
        -o-opacity:1;
    }
}


/* background onload modal visibility onload animation */


@keyframes modal2Load {
    0%{
        visibility: visible;
        opacity: 1;
    }
    50%{
        visibility: visible;
        opacity: 1;
    }
    100%{
        visibility: hidden;
        opacity: 0;
    }
}
@-webkit-keyframes modal2Load {
    0%{
        -webkit-visibility: visible;
        -webkit-opacity: 1;
    }
    50%{
        -webkit-visibility: visible;
        -webkit-opacity: 1;
    }
    100%{
        -webkit-visibility: hidden;
        -webkit-opacity: 0;
    }
}
@-moz-keyframes modal2Load {
    0%{
        -moz-visibility: visible;
        -moz-opacity: 1;
    }
    50%{
        -moz-visibility: visible;
        -moz-opacity: 1;
    }
    100%{
        -moz-visibility: hidden;
        -moz-opacity: 0;
    }
}
@-ms-keyframes modal2Load {
    0%{
        -ms-visibility: visible;
        -ms-opacity: 1;
    }
    50%{
        -ms-visibility: visible;
        -ms-opacity: 1;
    }
    100%{
        -ms-visibility: hidden;
        -ms-opacity: 0;
    }
}
@-o-keyframes modal2Load {
    0%{
        -o-visibility: visible;
        -o-opacity: 1;
    }
    50%{
        -o-visibility: visible;
        -o-opacity: 1;
    }
    100%{
        -o-visibility: hidden;
        -o-opacity: 0;
    }
}


/*****  Index Nav *****/


@keyframes imgTrigger1Load {
    0%{
        opacity: 1;
        visibility: visible;
    }
    75%{
        opacity: 1;
        visibility: visible;
    }
    100%{
        opacity:0;
        visibility: hidden;
    }
}

@-webkit-keyframes imgTrigger1Load {
    0%{
        -webkit-opacity: 1;
        -webkit-visibility: visible;
    }
    75%{
        -webkit-opacity: 1;
        -webkit-visibility: visible;
    }
    100%{
        -webkit-opacity:0;
        -webkit-visibility: hidden;
    }
}
@-moz-keyframes imgTrigger1Load {
    0%{
        -moz-opacity: 1;
        -moz-visibility: visible;
    }
    75%{
        -moz-opacity:1;
        -moz-visibility: visible;
    }
    100%{
        -moz-opacity:0;
        -moz-visibility: hidden;
    }
}
@-ms-keyframes imgTrigger1Load {
    0%{
        -ms-opacity:1;
        -ms-visibility: visible;
    }
    75%{
        -ms-opacity:1;
        -ms-visibility: visible;
    }
    100%{
        -ms-opacity:0;
        -ms-visibility: hidden;
    }
}
@-o-keyframes imgTrigger1Load {
    0%{
        -o-opacity:1;
        -o-visibility: visible;
    }
    75%{
        -o-opacity:1;
        -o-visibility: visible;
    }
    100%{
        -o-opacity:0;
        -o-visibility: hidden;
    }
}


/* Index Page Logo animation */



@keyframes navBtn1Load {
    0%{
        z-index: 101;
        transform: translate(-170%, 0%) scaleX(1) scaleY(1);
        opacity: 1; 
        visibility: visible; 
    }
    20%{
        transform: translate(-170%, 0%) scaleX(1) scaleY(1);
        background-image: var(--silver-lens);     
    }
    40% {
        transform: translate(-170%, 0%) scaleX(0.4) scaleY(1.4);
    }
  
    50%{
        transform: translate(-100%, 0%) scaleX(0.4) scaleY(1.4);
        opacity: 0;
        visibility: hidden;
    }
    
    60%{
        opacity: 0;
        visibility: hidden;
        background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
    }
  
    75% {
        background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        transform: scaleX(0.2) scaleY(1.4) translate(1400%, 0%);   
    }
   
    90%{
        opacity: 1;
        visibility: visible;
        background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        transform: scaleX(0.2) scaleY(1.4) translate(-400%, 0%);   
    }
    100%{      
        background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        flex-basis: 3%;
        transform: scaleX(0.2) scaleY(1.4) translate(-250%, 0%);   
    }
}

/* linear-gradient(110deg, rgba(0,0,0, 0.6) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)60%, rgba(0,0,0, 0.6) 99%) */

@-webkit-keyframes navBtn1Load {
    0%{
        z-index: 101;
        -webkit-transform: translate(-170%, 0%) scaleX(1) scaleY(1);
        opacity: 1; 
        visibility: visible; 
    }
    10%{
         background-image: var(--silver-border);
        -webkit-background-image: var(--silver-border); 
    }
    20%{
        -webkit-transform: translate(-170%, 0%) scaleX(1) scaleY(1);
        background-image: var(--silver-lens);
        -webkit-background-image: var(--silver-lens);
    }
    40% {
        -webkit-transform: translate(-170%, 0%) scaleX(0.4) scaleY(1.4);
    }
  
    50%{
        -webkit-transform: translate(-100%, 0%) scaleX(0.4) scaleY(1.4);
        opacity: 0;
        visibility: hidden;
    }
    
    60%{
        opacity: 0;
        visibility: hidden;
        background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);   
        -webkit-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);   

    }
  
    75% {
        background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        -webkit-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        -webkit-transform: scaleX(0.2) scaleY(1.4) translate(150%, 0%); 
       }

    90%{
        opacity: 1;
        visibility: visible;
        background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        -webkit-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        -webkit-transform: scaleX(0.2) scaleY(1.4) translate(-1%, 0%);
        ;
       }
    100%{      
        background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        -webkit-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        flex-basis: 3%;
        -webkit-transform: scaleX(0.2) scaleY(1.4) translate(0%, 0%);
        ;
     }
}
@-moz-keyframes navBtn1Load {
    0%{
        z-index: 101;
         -moz-transform: translate(-170%, 0%) scaleX(1) scaleY(1);
        opacity: 1; 
        visibility: visible; 
    }
    20%{
        -moz-transform: translate(-170%, 0%) scaleX(1) scaleY(1);
        -moz-background-image: var(--silver-lens);
        }
    40% {
       -moz-transform: translate(-170%, 0%) scaleX(0.4) scaleY(1.4);
      }
  
    50%{
        -moz-transform: translate(-100%, 0%) scaleX(0.4) scaleY(1.4);
        opacity: 0;
        visibility: hidden;
    }
    
    60%{
        opacity: 0;
        visibility: hidden;
        -moz-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
         }
  
    75% {
       -moz-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
       -moz-transform: scaleX(0.2) scaleY(1.4) translate(1400%, 0%); 
        }
   
    90%{
        opacity: 1;
        visibility: visible;
       -moz-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
       -moz-transform: scaleX(0.2) scaleY(1.4) translate(-400%, 0%); 
        }
    100%{      
        -moz-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        flex-basis: 3%;
        -moz-transform: scaleX(0.2) scaleY(1.4) translate(-250%, 0%);
         }
}
@-ms-keyframes navBtn1Load {
    0%{
       -ms-transform: translate(-170%, 0%) scaleX(1) scaleY(1);
        opacity: 1; 
        visibility: visible; 
    }
    20%{
         -ms-transform: translate(-170%, 0%) scaleX(1) scaleY(1);
       -ms-background-image: var(--silver-lens);
    }
    40% {
       -ms-transform: translate(-170%, 0%) scaleX(0.4) scaleY(1.4);
    }
  
    50%{
       -ms-transform: translate(-100%, 0%) scaleX(0.4) scaleY(1.4);
        opacity: 0;
        visibility: hidden;
    }
    
    60%{
        opacity: 0;
        visibility: hidden;
       -ms-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
    }
  
    75% {
       -ms-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
       -ms-transform: scaleX(0.2) scaleY(1.4) translate(1400%, 0%); 
    }
   
    90%{
       -ms-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        -ms-transform: scaleX(0.2) scaleY(1.4) translate(-400%, 0%); 
    }
    100%{      
       -ms-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        flex-basis: 3%;
       -ms-transform: scaleX(0.2) scaleY(1.4) translate(-250%, 0%);
    }
}
@-o-keyframes navBtn1Load {
    0%{
        z-index: 101;
        -o-transform: translate(-170%, 0%) scaleX(1) scaleY(1);
        opacity: 1; 
        visibility: visible; 
    }
    20%{
       -o-transform: translate(-170%, 0%) scaleX(1) scaleY(1);
       -o-background-image: var(--silver-lens);  
    }
    40% {
        -o-transform: translate(-170%, 0%) scaleX(0.4) scaleY(1.4);
    }
  
    50%{
        -o-transform: translate(-100%, 0%) scaleX(0.4) scaleY(1.4);
        opacity: 0;
        visibility: hidden;
    }
    
    60%{
        opacity: 0;
        visibility: hidden;
        -o-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
    }
  
    75% {
       -o-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
       -o-transform: scaleX(0.2) scaleY(1.4) translate(1400%, 0%); 
    }
   
    90%{
        opacity: 1;
        visibility: visible;
        -o-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        -o-transform: scaleX(0.2) scaleY(1.4) translate(-400%, 0%); 
    }
    100%{      
        -o-background-image: linear-gradient(110deg, rgba(0,0,0, 0) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)70%);
        flex-basis: 3%;
       -o-transform: scaleX(0.2) scaleY(1.4) translate(-250%, 0%);
    }
}




        /*****  Base Styles *****/





/* rgba(0, 4, 24, 1); */

 :root {
    --titles-formal: 'Playfair Display', serif;
    --titles-landing: 'Lora', serif;
    --lighter-bc: rgb(84, 98, 165);
    --landing-bc: rgba(0, 4, 24, 1);
    --landing-h1: rgba(255, 255, 238, 0.9);
    --landing-nav-bi: linear-gradient(60deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
   --landing-borderimg: linear-gradient(90deg, rgba(0,0,0, 0) 25%, rgba(255, 198, 9, 0.6) 40%, rgba(255,255,255, 0.7) 80%, rgba(255, 198, 9, 0.6) 85%) 1 / 2px 1px 1px 0px / 0px 0px;
   --landing-nav-outline: rgb(0, 4, 24) solid 2px;
    --body-outline: 1px solid rgba(194, 194, 194, 0.2);
    --footer-outline: 1px solid rgba(194, 194, 194, 0.2);
    --footer-bc: #000a0a;
    --footer-text: rgba(194, 194, 194, 0.6);
    --gold-border: linear-gradient(110deg, rgba(255, 198, 9, 0.6) 20%, rgba(255,255,255, 0.8) 30%,rgba(255, 198, 9, 0.6)35%, rgba(255, 198, 9, 0.8) 50%, rgba(0,4,24, 1) 54.5%);
    --gold-lens: linear-gradient(90deg, rgba(0,0,0, 0.6) 1%, rgba(255, 198, 9, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(255, 198, 9, 0.6) 60%, rgba(0,0,0, 0.6) 99%);
    --silver-border: linear-gradient(110deg, rgba(160, 160, 160, 1) 20%, rgba(255,255,255, 0.8) 35%,rgba(160, 160, 160, 0.9) 40%, rgb(160, 160, 160, 0.6) 52%, rgba(0,4,24, 1) 52%);
    --silver-title: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 1px 1px 1px 0px / 0px 0px;
    --silver-lens: linear-gradient(110deg, rgba(0,0,0, 0.6) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)60%, rgba(0,0,0, 0.6) 99%);
}


body {
    margin: 0px 0px;
    /* height: 100%; */
    /* outline: 1px solid rgba(194, 194, 194, 0.2); */
    /* outline-offset: -3px; */
    background-color: var(--landing-bc);
}

#container {
	justify-content: center;
}

#container, #container4 {
    height:100%;
    margin: 0px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* flex-wrap: nowrap; */
    justify-items: center;
    align-items: center;
    font-family: "Raleway", sans-serif;
    background-color: var(--landing-bc);

}

#container2 {
    margin: 0px 0px;
    height: 100vh;
    /* padding: 0px 0px; */
    background-color: var(--landing-bc);
    /* outline: 1px solid rgba(194, 194, 194, 0.2);
    outline-offset: -3px; */
}

#container3 {
    /* height:100%;
    width:inherit; */
    /* margin: 0 0; */
    overflow-x: clip;
    display: grid;
    /* flex-direction: column;
    flex-wrap: nowrap; */
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr;
    grid-row-gap: none;
    grid-template-areas: 
    "globalNav";
    justify-items: center;
    justify-content: center;
    align-items: center;
    height: 200px;

    font-family: "Raleway", sans-serif;
    background-color: var(--landing-bc);
}





/********        ********
    Global Navigation
    (Excluding Index)  
********         ********/




 nav#logoNav.logoNav {
    /* grid-area: globalNav; */
    display: inline-flex;
    position: relative;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    align-content: center;
    z-index: -1;
    transform: translate(0px, -50px);
    -webkit-transform: translate(0px, -50px);
    -moz-transform: translate(0px, -50px);
    -ms-transform: translate(0px, -50px);
    -o-transform: translate(0px, -50px);
    left: 0px;
    opacity: 0;
    height: 450px;
    width: 500px;
    overflow: hidden;
    transition: .75s; 
    animation: navLogoLoad 2s linear 0s 1 normal;
    -webkit-animation: navLogoLoad 2s linear 0s 1 normal;
    -moz-animation: navLogoLoad 2s linear 0s 1 normal;
    -ms-animation: navLogoLoad 2s linear 0s 1 normal;
    -o-animation: navLogoLoad 2s linear 0s 1 normal;
}



/* Logo Navigation opacity change on click, and off click */


@keyframes opaque1 {
    0%{opacity:0;}
    50%{opacity:0.25;}
    100%{opacity:1;}
}
@-webkit-keyframes opaque1 {
    0%{-webkit-opacity:0;}
    50%{-webkit-opacity:0.25;}
    100%{-webkit-opacity:1;}
}@-ms-keyframes opaque1 {
    0%{-ms-opacity:0;}
    50%{-ms-opacity:0.25;}
    100%{-ms-opacity:1;}
}@-moz-keyframes opaque1 {
    0%{-moz-opacity:0;}
    50%{-moz-opacity:0.25;}
    100%{-moz-opacity:1;}
}@-o-keyframes opaque1 {
    0%{-o-opacity:0;}
    50%{-o-opacity:0.25;}
    100%{-o-opacity:1;}
}






@keyframes opaque2 {
    0%{opacity:1;}
    10%{opacity:0.1;}
    100%{opacity:0;}
}
@-webkit-keyframes opaque2 {
    0%{-webkit-opacity:1;}
    10%{-webkit-opacity:0.1;}
    100%{-webkit-opacity:0;}
}@-ms-keyframes opaque2 {
    0%{-ms-opacity:1;}
    10%{-ms-opacity:0.1;}
    100%{-ms-opacity:0;}
}@-moz-keyframes opaque2 {
    0%{-moz-opacity:1;}
    10%{-moz-opacity:0.1;}
    100%{-moz-opacity:0;}
}@-o-keyframes opaque2 {
    0%{-o-opacity:1;}
    10%{-o-opacity:0.1;}
    100%{-o-opacity:0;}
}


#openNavBtn, #openNavBtn1, .lens1, .lens2 {
    grid-area: globalNav;
    overflow: hidden;
    position: relative;
    height: 150px;
    width: 150px;

    transform: translate(0px, 120px);
    -webkit-transform: translate(0px, 120px);
    -moz-transform: translate(0px, 120px);
    -ms-transform: translate(0px, 120px);
    -o-transform: translate(0px, 120px);
    

    background-image: var(--silver-border);
    -webkit-background-image: var(--silver-border);
    -moz-background-image: var(--silver-border);
    -ms-background-image: var(--silver-border);
    -o-background-image: var(--silver-border);

    
    border-radius: 50%;
    border: double 2px transparent;

    background-origin: border-box;
    -webkit-background-origin: border-box;
    -moz-background-origin: border-box;
    -ms-background-origin: border-box;
    -o-background-origin: border-box;

    background-clip: border-box;
    -webkit-background-clip: border-box;
    -moz-background-clip: border-box;
    -ms-background-clip: border-box;
    -o-background-clip: border-box;

    animation: 2s linear 0s 1 normal forwards running navBtnLoad;
    -webkit-animation: 2s linear 0s 1 normal forwards running navBtnLoad;
    -moz-animation: 2s linear 0s 1 normal forwards running navBtnLoad;
    -ms-animation: 2s linear 0s 1 normal forwards running navBtnLoad;
    -o-animation: 2s linear 0s 1 normal forwards running navBtnLoad;
}



#openNavBtn.active {
    animation: lens1 1s linear 0s normal;
    -webkit-animation: lens1 1s linear 0s normal;
    -moz-animation: lens1 1s linear 0s normal;
    -ms-animation: lens1 1s linear 0s normal;
    -o-animation: lens1 1s linear 0s normal;
}

#openNavBtn.active2 {
    animation: lens2 .75s linear 0s normal;
    -webkit-animation: lens2 .75s linear 0s normal;
    -moz-animation: lens2 .75s linear 0s normal;
    -ms-animation: lens2 .75s linear 0s normal;
    -o-animation: lens2 .75s linear 0s normal;
}



#openNavBtn:hover {
    background-color:white;
}


#openNavBtn1 {
    grid-area: none;
    margin: 0px;
    opacity: 1;
    visibility: visible;
    z-index: 101;
    height: 250px;
    width: 250px;
    position: relative;
    border: double 3px transparent;

    background-image: linear-gradient(110deg, rgba(160, 160, 160, 1) 20%, rgba(255,255,255, 0.9) 35%, rgba(160, 160, 160, 1) 40%, rgb(160, 160, 160, 9) 52%, rgba(0,4,24, 1) 52%);
    -webkit-background-image: linear-gradient(110deg, rgba(160, 160, 160, 1) 20%, rgba(255,255,255, 0.9) 35%, rgba(160, 160, 160, 1) 40%, rgb(160, 160, 160, 9) 52%, rgba(0,4,24, 1) 52%);
    -moz-background-image: linear-gradient(110deg, rgba(160, 160, 160, 1) 20%, rgba(255,255,255, 0.9) 35%, rgba(160, 160, 160, 1) 40%, rgb(160, 160, 160, 9) 52%, rgba(0,4,24, 1) 52%);
    -ms-background-image: linear-gradient(110deg, rgba(160, 160, 160, 1) 20%, rgba(255,255,255, 0.9) 35%, rgba(160, 160, 160, 1) 40%, rgb(160, 160, 160, 9) 52%, rgba(0,4,24, 1) 52%);
    -o-background-image: linear-gradient(110deg, rgba(160, 160, 160, 1) 20%, rgba(255,255,255, 0.9) 35%, rgba(160, 160, 160, 1) 40%, rgb(160, 160, 160, 9) 52%, rgba(0,4,24, 1) 52%);
    /* background-image:linear-gradient(110deg,  rgba(160, 160, 160, 1) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 1)70%); */

    animation: 6s linear 0s 1 normal forwards running navBtn1Load;
    -webkit-animation: 6s linear 0s 1 normal forwards running navBtn1Load;
    -moz-animation: 6s linear 0s 1 normal forwards running navBtn1Load;
    -ms-animation: 6s linear 0s 1 normal forwards running navBtn1Load;
    -o-animation: 6s linear 0s 1 normal forwards running navBtn1Load;
}

#openNavBtn1 #imgTrigger1 {
    border-radius: 50%;
    opacity: 1;
    visibility: visible;
    height: 246px;
    z-index: 100;
    width: 246px;
    
    animation: 1s linear 0s 1 normal forwards running imgTrigger1Load;
    -webkit-animation: 1s linear 0s 1 normal forwards running imgTrigger1Load;
    -moz-animation: 1s linear 0s 1 normal forwards running imgTrigger1Load;
    -ms-animation: 1s linear 0s 1 normal forwards running imgTrigger1Load;
    -o-animation: 1s linear 0s 1 normal forwards running imgTrigger1Load;
}


/* Logo Navigation shape change on, and off click */

@keyframes lens1 {
    0%{transform:scaleY(1) scaleX(1) translate(0px, 120px);}
    1%{opacity:1;}
    25%{opacity:0;}
    90%{opacity: 0.1};
    100%{transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px);opacity: 1;}
}
@-webkit-keyframes lens1 {
    0%{-webkit-transform:scaleY(1) scaleX(1) translate(0px, 120px);}
    1%{opacity:1;}
    25%{opacity:0;}
    90%{opacity: 0.1};
    100%{-webkit-transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px); opacity: 1;}
}@-moz-keyframes lens1 {
    0%{-moz-transform:scaleY(1) scaleX(1) translate(0px, 120px);}
    1%{opacity:1;}
    25%{opacity:0;}
    90%{opacity: 0.1};
    100%{-moz-transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px); opacity: 1;}
}@-ms-keyframes lens1 {
    0%{-ms-transform:scaleY(1) scaleX(1) translate(0px, 120px);}
    1%{opacity:1;}
    25%{opacity:0;}
    90%{opacity: 0.1};
    100%{-ms-transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px); opacity: 1;}
}@-o-keyframes lens1 {
    0%{-o-transform:scaleY(1) scaleX(1) translate(0px, 120px);}
    1%{opacity:1;}
    25%{opacity:0;}
    90%{opacity: 0.1};
    100%{-o-transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px); opacity: 1;}
}

@keyframes lens2 {
    0%{transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px);}
    100%{transform:scaleY(1) scaleX(1) translate(0px, 120px);}
}@-webkit-keyframes lens2 {
    0%{-webkit-transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px);}
    100%{-webkit-transform:scaleY(1) scaleX(1) translate(0px, 120px);}
}@-moz-keyframes lens2 {
    0%{-moz-transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px);}
    100%{-moz-transform:scaleY(1) scaleX(1) translate(0px, 120px);}
}@-ms-keyframes lens2 {
    0%{-ms-transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px);}
    100%{-ms-transform:scaleY(1) scaleX(1) translate(0px, 120px);}
}@-o-keyframes lens2 {
    0%{-o-transform:scaleY(0.1) scaleX(1.3) translate(0px, -50px);}
    100%{-o-transform:scaleY(1) scaleX(1) translate(0px, 120px);}
}



#openNavBtn #imgTrigger {
    border-radius: 50%;
    height: 146px;
    width: inherit;
    opacity: 1;
   
    animation: imgTriggerLoad 2s linear 0s 1 normal;
    -webkit-animation: imgTriggerLoad 2s linear 0s 1 normal;
    -moz-animation: imgTriggerLoad 2s linear 0s 1 normal;
    -ms-animation: imgTriggerLoad 2s linear 0s 1 normal;
    -o-animation: imgTriggerLoad 2s linear 0s 1 normal;
}



#backToTop {
  display: none;
  position: fixed;
  z-index: 10;
  height: 75px;
  width: 75px;
  padding: 0px 0px;
  margin: 0px 0px;
  bottom: 5%;
  right: 5%;
  opacity: 1;

  background-image: var(--silver-border);
  -webkit-background-image: var(--silver-border);
  -moz-background-image: var(--silver-border);
  -ms-background-image: var(--silver-border);
  -o-background-image: var(--silver-border);
  
  cursor: pointer;

  border: double 2px transparent;

  background-origin: border-box;
  -webkit-background-origin: border-box;
  -moz-background-origin: border-box;
  -ms-background-origin: border-box;
  -o-background-origin: border-box;

  background-clip: border-box;
  -webkit-background-clip: border-box;
  -moz-background-clip: border-box;
  -ms-background-clip: border-box;
  -o-background-clip: border-box;
  border-radius: 50%;
  overflow: hidden; 

}

#topImg {
    /* display: inherit;
    position: fixed; */
    padding: 0 0;
    margin: 0 0;
    z-index: 11;
    border-radius: 50%;
    height: 71px;
    width: 71px;
    opacity: 1;
}

#backToTop:hover {
    background-color:white;
}


nav .title {
    text-align: center;
    position: relative;
	color: black;
    background-image: linear-gradient(110deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    -webkit-background-image: linear-gradient(110deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    -moz-background-image: linear-gradient(110deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    -ms-background-image: linear-gradient(110deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    -o-background-image: linear-gradient(110deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    color:rgba(255, 255, 238, 0.9);
    z-index: 1; 
    overflow: hidden;
    border: 2px solid;
    border-left: 0px;
    border-image:var(--silver-title);
    /* -webkit-border-image:var(--silver-title);
    -moz-border-image:var(--silver-title);
    -ms-border-image:var(--silver-title);
    -o-border-image:var(--silver-title); */
   animation: title0; 
    /* visibility: hidden; */
    opacity: 0;
}

nav .title:hover {
    background:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    -webkit-background:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    -moz-background:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    -ms-background:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    -o-background:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    outline: rgb(0, 4, 24) solid 2px;
    outline-offset: -5px;
}

/* Title fade In/Out Animation */

@keyframes title2 {
    0%{
      opacity: 0;
      /* visibility: hidden; */
    }
    50%{opacity: 0;}
    90%{opacity: 0.75;}
    100%{
         opacity: 1;
         /* visibility: visible; */
        }
}@-webkit-keyframes title2 {
    0%{
        opacity: 0; 
        /* visibility: hidden; */
    }
    50%{opacity: 0;}
    90%{opacity: 0.75;}
    100%{
        opacity: 1; 
        /* visibility: visible; */
    }
}@-ms-keyframes title2 {
    0%{opacity: 0;}
    50%{opacity: 0;}
    90%{opacity: 0.75;}
    100%{
        opacity: 1; 
        /* visibility: visible; */
    }
}@-moz-keyframes title2 {
    0%{opacity: 0;}
    50%{opacity: 0;}
    90%{opacity: 0.75;}
    100%{
        opacity: 1; 
        /* visibility: visible; */
    }
}@-o-keyframes title2 {
    0%{opacity: 0;}
    50%{opacity: 0;}
    90%{opacity: 0.75;}
    100%{
        opacity: 1; 
        /* visibility: visible; */
    }
}


/******** Global Navigation (n/a titles) ********/


nav div#gallery2.gallery {
    width: 205px;
    height: 225px;
    border-radius: 35% 1% 1% 35%;
    background-color:rgb(52, 52, 52);
    box-shadow: 0px 15px 15px 5px rgba(0, 0, 0, 0.7) inset, 0px -15px 10px 10px rgba(0, 0, 0, 0.9) inset;
    overflow: hidden;
    /* border: 1px solid black; */

    transform:rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    z-index: 1;
    position:relative;
}
/* 0px 25px 15px 5px rgba(0, 0, 0, 0.6) inset, 0px -30px 10px 10px rgba(0, 0, 0, 0.9) inset; */

nav div#services2.services {
    width: 175px;
    height: 200px;
    margin-bottom: -60px;
    position: relative;
    border-radius: 2% 2% 2% 2%;
    background-color:rgb(52, 52, 52);

    animation: services2 ease-in-out 1.5s;
    -webkit-animation: services2 ease-in-out 1.5s;
    -moz-animation: services2 ease-in-out 1.5s;
    -ms-animation: services2 ease-in-out 1.5s;
    -o-animation: services2 ease-in-out 1.5s;

    border: 1px solid black;
    box-shadow: 0px 18px 15px 5px rgba(0, 0, 0, 0.7) inset, 0px -18px 10px 10px rgba(0, 0, 0, 0.8)inset; 
    overflow: hidden;
    transform:rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    z-index: 1;
}



nav div#contact2.contact {
    width: 175px;
    height: 175px;
    margin-bottom: -80px;
    border-radius: 2% 1% 1% 2%;
    background-color:rgb(52, 52, 52);
    animation: contact2 ease-in-out 1s;
    -webkit-animation: contact2 ease-in-out 1s;
    -moz-animation: contact2 ease-in-out 1s;
    -ms-animation: contact2 ease-in-out 1s;
    -o-animation: contact2 ease-in-out 1s;
    
    border: 1px solid black;
    box-shadow: 0px 20px 15px 5px rgba(0, 0, 0, 0.7) inset, 0px -20px 10px 10px rgba(0, 0, 0, 0.8) inset; 
    overflow: hidden;
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    z-index: 1;
}


nav .gallery .title {
    padding: 19px 0px 19px 10px;
    width: 13.8em;
    top: 34%;
    left: 10%;
    box-shadow: 0px 15px 10px rgba(0,0,0,0.5), 0px -10px 12px rgba(0,0,0,0.5);
    transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
   
}
 
 nav .services .title {
    width: 12.12em;
    padding: 19px 0px 19px 10px;
    top: -67%;
    left: -3%;
    box-shadow: 0px 30px 20px  rgba(0,0,0,0.5), 0px -22px 28px rgba(0,0,0,0.5);
    transform:  rotate(90deg);
	-ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}


 nav .contact .title {
    width: 10.6em;
    padding: 19px 0px 19px 5px;
    top: -69%;
    left: 12%;
    box-shadow: 0px 10px 5px rgba(0,0,0,0.5), 0px -10px 8px rgba(0,0,0,0.5);
    transform:rotate(90deg);
	-ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}


nav .title h1 {
    z-index: 1;
    margin: 0 auto;
    font-weight: normal;
    font-family:  var(--titles-formal); 
}

nav .gallery .title h1 {
    font-size: 20px;
}
nav .services .title h1 {
    font-size: 18px;
}

nav .contact .title h1 {
    font-size: 16px;
}

nav .grip {
    width: 75px;
    margin: 0;
    background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -webkit-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -moz-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -ms-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -o-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    z-index: 0;
    height: 100%;
    transform: translate(125%, -31%);
    -ms-transform: translate(125%, -31%);
    -webkit-transform: translate(125%, -31%);
    -moz-transform: translate(125%, -31%);
    -o-transform: translate(125%, -31%);
    box-shadow: -5px -40px 7px  rgba(0,0,0,0.5) inset, -5px 30px 14px rgba(0,0,0,0.5) inset;
}

nav .grip2 {
    width: 25px;
    margin: 0px;
    padding: 0px;
    background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -webkit-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -moz-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -ms-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -o-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    z-index: 0;
    height: 100%;
    transform: translate(0%,-225%);
    -ms-transform: translate(0%, -225%);
    -webkit-transform: translate(0%, -225%);
    -moz-transform: translate(0%, -225%);
    -o-transform: translate(0%, -225%);
    box-shadow: -5px -75px 7px rgba(0,0,0, 0.6) inset, -5px 55px 14px rgba(0,0,0,0.6) inset;
}


nav .gallery .grip2 p#specs {
    color: rgba(235, 235, 235, 1);
    text-shadow: 0px .5px 2px rgba(0, 0, 0, 1);
    font-size: 9px;
    transform: translate(300%, 58%);
    -ms-transform: translate(300%, 58%);
    -webkit-transform: translate(300%, 58%);
    -moz-transform: translate(300%, 58%);
    -o-transform: translate(300%, 58%);
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;

}


nav .gallery .grip2 p#label {
    color:  rgba(235, 235, 235, 0.9);
    font-size: 8px;
    /* text-shadow: 0px .5px 2px rgba(0, 0, 0, 1); */
    transform: translate(364%, 310%) skewX(0.5deg);
    -ms-transform: translate(364%, 310%) skewX(0.5deg);
    -webkit-transform: translate(364%, 310%) skewX(0.5deg);
    -moz-transform: translate(364%, 310%) skewX(0.5deg);
    -o-transform: translate(364%, 310%) skewX(0.5deg);
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;

}

nav .gallery .grip2 #circle {
    background-color:  rgba(235, 235, 235, 1);
    width: 5px;
    height: 5px;
    transform: translate(600%, -500%);
    -ms-transform: translate(600%, -500%);
    -webkit-transform: translate(600%, -500%);
    -moz-transform: translate(600%, -500%);
    -o-transform: translate(600%, -500%);
    border-radius: 50%;
}


nav .greyLine {
    width: 35px;
    margin: 0;
    background-color: rgb(41, 41, 41);
    z-index: 0;
    height: 100%;
    box-shadow: -5px -28px 20px  rgba(0, 0, 0, 0.9) inset, 5px 20px 10px rgba(0,0,0, 0.7) inset;
    overflow: hidden;
}

nav .gallery div.greyLine {
    transform: translate(175%, -131%);
    -ms-transform: translate(175%, -131%);
    -webkit-transform: translate(175%, -131%);
    -moz-transform: translate(175%, -131%);
    -o-transform: translate(175%, -131%);
}

nav .services .greyLine {
    width: 15px;
    transform: translate(1000%, 0%);
    -ms-transform: translate(1000%, 0%);
    -webkit-transform: translate(1000%, 0%);
    -moz-transform: translate(1000%, 0%);
    -o-transform: translate(1000%, 0%);
}

nav .contact .greyLine {
    width: 12px;
    transform: translate(1200%, 0%);
    -ms-transform: translate(1200%, 0%);
    -webkit-transform: translate(1200%, 0%);
    -moz-transform: translate(1200%, 0%);
    -o-transform: translate(1200%, 0%);
}


nav .greyLine p#largeC {
    padding: 1px 2.5px;
    background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    -webkit-background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    -moz-background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    -ms-background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    -o-background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    text-shadow: -.5px .5px .5px rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    font-size: 7px;
    display: inline-block;
    color:rgb(190, 190, 190);
    z-index: 1;
    border: 0.1px solid rgba(0, 0, 0, 0.6);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.8);
    transform: translate(50%, 125%) scaleX(-1);
    -ms-transform: translate(50%, 125%) scaleX(-1);
    -webkit-transform: translate(50%, 125%) scaleX(-1);
    -moz-transform: translate(50%, 125%) scaleX(-1);
    -o-transform: translate(50%, 125%) scaleX(-1);
}


nav div#contact2.contact.active {
    animation: alen2 ease-in-out 1s;
    -webkit-animation: alen2 ease-in-out 1s;
    -moz-animation: alen2 ease-in-out 1s;
    -ms-animation: alen2 ease-in-out 1s;
    -o-animation: alen2 ease-in-out 1s;
}

nav div#services2.services.active {
    animation: alex2 ease-in-out 1.5s;
    -webkit-animation: alex2 ease-in-out 1.5s;
    -moz-animation: alex2 ease-in-out 1.5s;
    -ms-animation: alex2 ease-in-out 1.5s;
    -o-animation: alex2 ease-in-out 1.5s;
}

/* Global Nav animations. 'alen' and 'alex' are onclicks, 'services2' 
, and 'contact2' are for onload. */

@keyframes alen2 {
    0%{width: 175px; }
    50%{width: 200px;}
    100%{width: 175px;}
}
@-webkit-keyframes alen2 {
    0%{width: 175px; }
    50%{width: 200px;}
    100%{width: 175px;}
}
@-moz-keyframes alen2 {
    0%{width: 0px; }
    50%{width: 200px;}
    100%{width: 175px;}
}
@-ms-keyframes alen2 {
    0%{width: 0px; }
    50%{width: 200px;}
    100%{width: 175px;}
}
@-o-keyframes alen2 {
    0%{width: 0px; }
    50%{width: 200px;}
    100%{width: 175px;}
}


@keyframes alex2 {
    0%{width: 0px;}
    50%{width: 200px;}
    100%{width: 175px;}
}
@-webkit-keyframes alex2 {
    0%{width: 0px;}
    50%{width: 200px;}
    100%{width: 175px;}
}
@-moz-keyframes alex2 {
    0%{width: 0px;}
    50%{width: 200px;}
    100%{width: 175px;}
}
@-ms-keyframes alex2 {
    0%{width: 0px;}
    50%{width: 200px;}
    100%{width: 175px;}
}
@-o-keyframes alex2 {
    0%{width: 0px;}
    50%{width: 200px;}
    100%{width: 175px;}
}



@keyframes services2 {
    0%{
        transform: rotate(270deg) translateX(-10%) scaleX(.4);
    }
    40%{
        transform: rotate(270deg) translateX(2%) scaleX(1.1);
      }
    100%{
     transform: rotate(270deg)  translateX(0px) scaleX(1);
    }
}@-webkit-keyframes services2 {
    0%{
        -webkit-transform: rotate(270deg) translateX(-10%) scaleX(.4);
       }
    40%{
        -webkit-transform: rotate(270deg) translateX(2%) scaleX(1.1);
       }
    100%{
     -webkit-transform: rotate(270deg) translateX(0px) scaleX(1) ;
    }
}@-ms-keyframes services2 {
    0%{
       -ms-transform: rotate(270deg) translateX(0%) scaleX(1);
    }
    40%{
        -ms-transform: rotate(270deg) translateX(2%) scaleX(1.1);
    }
    100%{
     -ms-transform: rotate(270deg) translateX(0px) scaleX(1) ;
    }
}@-moz-keyframes services2 {
    0%{
       -moz-transform: rotate(270deg) translateX(0%) scaleX(1);
       }
    40%{
       -moz-transform: rotate(270deg) translateX(2%) scaleX(1.1);
       }
    100%{
        -moz-transform: rotate(270deg) translateX(0px) scaleX(1) ;
    }
}@-o-keyframes services2 {
    0%{
       -o-transform: rotate(270deg) translateX(0%) scaleX(1);
    }
    40%{
        -o-transform: rotate(270deg) translateX(2%) scaleX(1.1);
    }
    100%{
    -o-transform: rotate(270deg) translateX(0px) scaleX(1);
    }
}


@keyframes contact2 {
    0%{
        transform: rotate(270deg) translateX(-10%) scaleX(0.7);
        }
    65%{
        transform: rotate(270deg) translateX(0%) scaleX(1.05);
       }
    100%{
         transform: rotate(270deg)  translateX(0px) scaleX(1);
    }
}@-webkit-keyframes contact2 {
    0%{
        -webkit-transform: rotate(270deg) translateX(-10%) scaleX(0.7);
       }
    65%{
        -webkit-transform: rotate(270deg) translateX(0%) scaleX(1.05);
         }
    100%{
        -webkit-transform: rotate(270deg) translateX(0px) scaleX(1) ;
     }
} @-ms-keyframes contact2 {
    0%{
        -ms-transform: rotate(270deg) translateX(-5%) scaleX();
    }
    65%{
       -ms-transform: rotate(270deg) translateX(5%) scaleX(1.05);
    }
    100%{
    -ms-transform: rotate(270deg) translateX(0px) scaleX(1) ;
    }
} @-moz-keyframes contact2 {
    0%{
       -moz-transform: rotate(270deg) translateX(-5%) scaleX(1);
       }
    65%{
        -moz-transform: rotate(270deg) translateX(5%) scaleX(1.05);
       }
    100%{
        -moz-transform: rotate(270deg) translateX(0px) scaleX(1) ;
      }
} @-o-keyframes contact2 {
    0%{
        -o-transform: rotate(270deg) translateX(-5%) scaleX(1);
    }
    65%{
       -o-transform: rotate(270deg) translateX(5%) scaleX(1.05);
    }
    100%{
     -o-transform: rotate(270deg) translateX(0px) scaleX(1);
    }
} 

 




/********        ********
          Index  
********         ********/




/******** Index Main Area Base and titles ********/


 .header1 {
    /* grid-area: main; */
    z-index: 80;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--landing-bc);
    height: 515px;
    padding: 50px 0px 50px 0px;
    margin: 75px 0px 75px 0px;
}


.header1 .grip {
    width: 150px;
    margin: 0;
    background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -webkit-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -moz-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -ms-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -o-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    z-index: 0;
    height: 100%;
    transform: translate(125%,-30%);
    -ms-transform: translate(125%,-30%);
    -webkit-transform: translate(125%, -30%);
    -moz-transform: translate(125%, -30%);
    -o-transform: translate(125%, -30%);
    box-shadow: -5px -40px 7px  rgba(0,0,0,0.5) inset, -5px 30px 14px rgba(0,0,0,0.5) inset;
}



.header1 .grip2 {
    width: 40px;
    margin: 0;
    background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -webkit-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -moz-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -ms-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    -o-background-image: repeating-linear-gradient(black,rgb(52, 52, 52) 1%);
    z-index: 0;
    height: 100%;
    transform: translate(5%,-225%);
    -ms-transform: translate(5%, -225%);
    -webkit-transform: translate(5%, -225%);
    -moz-transform: translate(5%, -225%);
    -o-transform: translate(5%, -225%);
    box-shadow: -5px -40px 7px rgba(0,0,0, 0.7) inset, -5px 30px 14px rgba(0,0,0,0.7) inset;
}

.header1 .gallery1 .grip2 p#specs {
    color: rgba(235, 235, 235, 1);
    text-shadow: 0px .5px 2px rgba(0, 0, 0, 1);
    font-size: 18px;
    transform: translate(225%, 62%);
    -ms-transform: translate(225%, 62%);
    -webkit-transform: translate(225%, 62%);
    -moz-transform: translate(225%, 62%);
    -o-transform: translate(225%, 62%);
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;

}

.header1 .gallery1 .grip2 p#label {
    color:  rgba(235, 235, 235, 0.9);
    font-size: 15px;
    /* text-shadow: 0px .5px 2px rgba(0, 0, 0, 1); */
    transform: translate(308%, 360%) skewX(0.5deg);
    -ms-transform: translate(308%, 360%) skewX(0.5deg);
    -webkit-transform: translate(308%, 360%) skewX(0.5deg);
    -moz-transform: translate(308%, 360%) skewX(0.5deg);
    -o-transform: translate(308%, 360%) skewX(0.5deg);
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
}

.header1 .gallery1 .grip2 #circle {
    background-color:  rgba(235, 235, 235, 1);
    width: 10px;
    height: 10px;
    transform: translate(475%, -360%);
    -ms-transform: translate(475%, -360%);
    -webkit-transform: translate(475%, -360%);
    -moz-transform: translate(475%, -360%);
    -o-transform: translate(475%, -360%);
    border-radius: 50%;
}


 .header1 .greyLine {
    width: 75px;
    margin: 0;
    background-color: rgb(41, 41, 41);
    z-index: 0;
    height: 100%;
    box-shadow: -5px -40px 7px  rgba(0, 0, 0, 0.9) inset, -5px 30px 14px rgba(0,0,0, 0.6) inset;
    overflow: hidden;
}


.header1 .gallery1 .greyLine {
    transform: translate(150%,-130%);
    -ms-transform: translate(150%, -130%);
    -webkit-transform: translate(150%, -130%);
    -moz-transform: translate(150%, -130%);
    -o-transform: translate(150%, -130%);
}


.header1 .services1 .greyLine {
    width: 45px;
    transform: translate(545%, 0%);
    -ms-transform: translate(545%, 0%);
    -webkit-transform: translate(545%, 0%);
    -moz-transform: translate(545%, 0%);
    -o-transform: translate(545%, 0%);
}


.header1 .contact1 .greyLine {
    width: 30px;
    transform: translate(600%, 0%);
    -ms-transform: translate(600%, 0%);
    -webkit-transform: translate(600%, 0%);
    -moz-transform: translate(600%, 0%);
    -o-transform: translate(600%, 0%);
}


.header1 .greyLine p#largeC {
    padding: 4px 6px;
    background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    -webkit-background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    -moz-background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    -ms-background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    -o-background-image: linear-gradient(rgba(194, 194, 194, 1),rgb(235, 235, 235), rgba(194,194,194, 0.8));
    text-shadow: -.5px .5px .5px rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    font-size: 15px;
    display: inline-block;
    color:rgb(190, 190, 190);
    z-index: 1;
    border: .5px solid rgba(0, 0, 0, 0.6);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.8);
    transform: translate(50%, 150%) scaleX(-1);
    -ms-transform: translate(50%, 150%) scaleX(-1);
    -webkit-transform: translate(50%, 150%) scaleX(-1);
    -moz-transform: translate(50%, 150%) scaleX(-1);
    -o-transform: translate(50%, 150%) scaleX(-1);

}

.header1 .title {
    text-align: center;
    position: relative;
	background-image: linear-gradient(60deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    -webkit-background-image: linear-gradient(60deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    -moz-background-image: linear-gradient(60deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    -ms-background-image: linear-gradient(60deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
    -o-background-image: linear-gradient(60deg, rgba(0,0,0,0.5) 1%, rgb(0, 46, 116) 80%);
	top: 50%;
	left: 50%;
    color:rgba(255, 255, 238, 0.9);
    z-index: 1; 
    overflow: hidden;
    border: 2px solid;
    border-left: 0px;
    border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 0px / 0px 0px;
    /* -webkit-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 0px / 0px 0px;
    -moz-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 0px / 0px 0px;
    -ms-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 0px / 0px 0px;
    -o-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 0px / 0px 0px; */
    
    animation: title1 2s linear 6s;
    -webkit-animation: title1 2s linear 6s;
    -moz-animation: title1 2s linear 5s;
    -ms-animation: title1 2s linear 5s;
    -o-animation: title1 2s linear 5s;
    opacity: 0;
    /* visibility: hidden; */
}

.title:hover {
    background-image: linear-gradient(60deg, rgba(84, 98, 165, 0.9)1%, rgba(0, 46, 116, 1) 80%);
    -webkit-background-image: linear-gradient(60deg, rgba(84, 98, 165, 0.9)1%, rgba(0, 46, 116, 1) 80%);
    -moz-background-image: linear-gradient(60deg, rgba(84, 98, 165, 0.9)1%, rgba(0, 46, 116, 1) 80%);
    -ms-background-image: linear-gradient(60deg, rgba(84, 98, 165, 0.9)1%, rgba(0, 46, 116, 1) 80%);
    -o-background-image: linear-gradient(60deg, rgba(84, 98, 165, 0.9)1%, rgba(0, 46, 116, 1) 80%);
    outline: rgb(0, 4, 24) solid 2px;
    outline-offset: -5px;
}


/* Title fade In/Out Animation */

    @keyframes title1 {
        0%{opacity: 0;}
        50%{opacity: 0;}
        90%{opacity: .95;}
        100%{opacity: 1;}
    }

    @-webkit-keyframes title1 {
        0%{opacity: 0;}
        50%{opacity: 0;}
        90%{opacity: .95;}
        100%{opacity: 1;}
    } @-ms-keyframes title1 {
        0%{opacity: 0;}
        50%{opacity: 0;}
        90%{opacity: .95;}
        100%{opacity: 1;}
    } @-moz-keyframes title1 {
        0%{opacity: 0;}
        50%{opacity: 0;}
        90%{opacity: .95;}
        100%{opacity: 1;}
    } @-o-keyframes title1 {
        0%{opacity: 0;}
        50%{opacity: 0;}
        90%{opacity: .95;}
        100%{opacity: 1;}
    }


 .header1  .gallery1 .title {
    padding: 35px 0px 40px 0px;
    font-size: 35px;
    box-shadow: 0px 30px 15px rgba(0,0,0,0.5), 0px -22px 12px rgba(0,0,0,0.5);
    transform: translate(-53%,-55%);
	-ms-transform: translate(-53%, -55%);
    -webkit-transform: translate(-53%, -55%);
	-moz-transform: translate(-53%, -55%);
	-o-transform: translate(-53%, -55%);
}



 .header1 .services1 .title {
    padding: 30px 45px 35px 45px;
    font-size: 34px;
    box-shadow: 0px 30px 30px  rgba(0,0,0,0.5), 0px -22px 28px rgba(0,0,0,0.5);
    transform: translate(-54%,-410%);
	-ms-transform: translate(-54%, -410%);
    -webkit-transform: translate(-54%, -410%);
	-moz-transform: translate(-54%, -410%);
	-o-transform: translate(-54%, -410%);
}


 .header1 .contact1 .title {
    padding: 25px 45px 28px 45px;
    font-size: 32px;
    box-shadow: 0px 30px 30px rgba(0,0,0,0.5), 0px -22px 28px rgba(0,0,0,0.5);
    transform: translate(-55%,-412%);
	-ms-transform: translate(-55%, -412%);
    -webkit-transform: translate(-55%, -412%);
	-moz-transform: translate(-55%, -412%);
	-o-transform: translate(-55%, -412%);

}


.header1 .title h1 {
    z-index: 1;
    margin: 0 auto;
    font-family:  var(--titles-formal);    
    font-weight: normal;
    /* font-weight: 100; */
    /* font-style: italic; */
}

.header1 .gallery1 .title h1 {
    font-size: 40px;
}

.header1 .services1 .title h1 {
    font-size: 32px;
}

.header1 .contact1 .title h1 {
    font-size: 30px;
}



/******** Index Main Area Navigation (n/a titles) ********/



/*  .header1 .logo {
    width: 175px;
    height: 175px;
    background-image: url("../img/nav_background/ribbed_small.jpeg");
} */

 .header1 .gallery1 {
    opacity:0;
    /* visibility: hidden; */
    width: 400px;
    height: 450px;
    border-radius: 35% 1% 1% 35%;
    background-color:rgb(52, 52, 52);
    /* animation: gallery1 linear 2s;
    -webkit-animation: gallery1 linear 2s; */
    box-shadow: 0px 25px 15px 5px rgba(0, 0, 0, 0.6) inset, 0px -30px 10px 10px rgba(0, 0, 0, 0.9) inset;
    overflow: hidden;
    transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
}



 .header1 .services1 {
    width: 300px;
    height: 400px;
    opacity:0;
    /* visibility: hidden; */
    border-radius: 2% 2% 2% 2%;
    background-color:rgb(52, 52, 52);
    animation: services1 2s ease-in-out 3.5s;
    -webkit-animation: services1 2s ease-in-out 3.5s;
    -moz-animation: services1 2s ease-in-out 3.5s;
    -ms-animation: services1 2s ease-in-out 3.5s;
    -o-animation: services1 2s ease-in-out 3.5s;
    border: 1px solid black;
    box-shadow: 0px 25px 15px 5px rgba(0, 0, 0, 0.6) inset, 0px -30px 10px 10px rgba(0, 0, 0, 0.9)inset; 
    overflow: hidden;
    transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
}

 .header1 .contact1 {
    width: 250px;
    height: 350px;
    opacity:0;
    /* visibility: hidden; */
    border-radius: 2% 1% 1% 2%;
    background-color:rgb(52, 52, 52);
    animation: contact1 2s ease-in-out 3.5s;
    -webkit-animation: contact1 2s ease-in-out 3.5s;
    -moz-animation: contact1 2s ease-in-out 3.5s;
    -o-animation: contact1 2s ease-in-out 3.5s;
    -ms-animation: contact1 2s ease-in-out 3.5s;
    border: 1px solid black;
    box-shadow: 0px 25px 15px 5px rgba(0, 0, 0, 0.6) inset, 0px -30px 10px 10px rgba(0, 0, 0, 0.9) inset; 
    overflow: hidden;
    transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
}


/* @keyframes gallery1 {
    0%{width: 400px;}
    50%{width: 400px;}
    100%{width: 400px;}
} */
    
/* @-webkit-keyframes gallery1 {
    0%{width: 400px;}
    50%{width: 425px;}
    100%{width: 400px;}
} */

/* Index Services tab camera animation */

@keyframes services1 {
    0%{
        transform: translateX(-50%) scaleX(0.1);
        }
    50%{
        transform: translateX(10%) scaleX(1.15);
        }
    100%{
        transform: scaleX(1) translateX(0px);
        }
}
    
@-webkit-keyframes services1 {
    0%{
        -webkit-transform: translateX(-50%) scaleX(0.1);
       }
    50%{
        -webkit-transform: translateX(10%) scaleX(1.15);
       }
    100%{
        -webkit-transform: scaleX(1) translateX(0px);
        }
}@-ms-keyframes services1 {
    0%{
        -ms-transform: translateX(-50%) scaleX(0.1);
    }
    50%{
        -ms-transform: translateX(10%) scaleX(1.15);
    }
    100%{
       -ms-transform: scaleX(1) translateX(0px);
    }
}@-moz-keyframes services1 {
    0%{
        -moz-transform: translateX(-50%) scaleX(0.1);
        }
    50%{
        -moz-transform: translateX(10%) scaleX(1.15);
         }
    100%{
        -moz-transform: scaleX(1) translateX(0px);
        }
}@-o-keyframes services1 {
    0%{
       -o-transform: translateX(-50%) scaleX(0.1);
    }
    50%{
        -o-transform: translateX(10%) scaleX(1.15);
    }
    100%{
        -o-transform: scaleX(1) translateX(0px);
    }
}

/* Index Contact tab camera animation */


@keyframes contact1 {
    0%{
        transform: translateX(-150%) scaleX(0.1);
         }
    50%{
        transform: translateX(25%) scaleX(1.12);
       }
    100%{
        transform: translateX(0%) scaleX(1);
         }
} 
@-webkit-keyframes contact1 {
    0%{
        -webkit-transform: translateX(-150%) scaleX(0.1);
       }
    50%{
        -webkit-transform: translateX(25%) scaleX(1.12);
       }
    100%{
        -webkit-transform: translateX(0%) scaleX(1);
        }
}
@-ms-keyframes contact1 {
    0%{-ms-transform: translateX(-150%) scaleX(0.1)}
    50%{-ms-transform: translateX(25%) scaleX(1.12);}
    100%{-ms-transform: translateX(0px) scaleX(1);}
}@-moz-keyframes contact1 {
    0%{-moz-transform: translateX(-150%) scaleX(0.1);}
    50%{-moz-transform: translateX(25%) scaleX(1.12);}
    100%{-moz-transform: translateX(0px) scaleX(1);}
}@-o-keyframes contact1 {
    0%{-o-transform: translateX(-150%) scaleX(0.1)}
    50%{-o-transform: translateX(25%) scaleX(1.12);}
    100%{-o-transform: translateX(0px) scaleX(1);}
}




/********        ********
         Services 
********         ********/



/******** Services Main Area ********/


main#service3 {
    grid-area: main;
    display: flex;
    /* grid-row-gap: 50px; */
    margin: 215px 0px 145px 0;
    align-items: center;
    justify-items: center;
    background-color: inherit;
    flex-direction: column;
    /* visibility: hidden; */
    opacity: 0;
    animation: 3.5s ease-in-out 0s 1 normal forwards running services3;
    -webkit-animation: 3.5s ease-in-out 0s 1 normal forwards running services3;
    -moz-animation: 3.5s ease-in-out 0s 1 normal forwards running services3;
    -ms-animation: 3.5s ease-in-out 0s 1 normal forwards running services3;
    -o-animation: 3.5s ease-in-out 0s 1 normal forwards running services3;
}

@keyframes services3 {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
}
@-webkit-keyframes services3 {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
    }
@-moz-keyframes services3 {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
    }
@-ms-keyframes services3 {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
    }
@-o-keyframes services3 {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
    }


main#service3 .service-box {
    width: 550px;
    height: 650px;
    margin: 50px 0px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    outline: 1px solid var(--landing-bc);
    outline-offset: -2px;
    background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, rgba(84, 98, 165, 0.9)90%);
    -webkit-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, rgba(84, 98, 165, 0.9)90%);
    -moz-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, rgba(84, 98, 165, 0.9)90%);
    -ms-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, rgba(84, 98, 165, 0.9)90%);
    -o-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, rgba(84, 98, 165, 0.9)90%);
    border: 2px solid;
    border-image: linear-gradient(110deg, var(--landing-bc) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.7) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 2px / 0px 0px;
    /* -webkit-border-image: linear-gradient(110deg, var(--landing-bc) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.7) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 2px / 0px 0px;
    -moz-border-image: linear-gradient(110deg, var(--landing-bc) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.7) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 2px / 0px 0px;
    -ms-border-image: linear-gradient(110deg, var(--landing-bc) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.7) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 2px / 0px 0px;
    -o-border-image: linear-gradient(110deg, var(--landing-bc) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.7) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 1px 2px / 0px 0px; */
}

main#service3 .service-box img {
    width: 100%;
    opacity: 1;
    z-index: 0;
    align-self:flex-start;
}
 

main#service3 .service-box .serviceType {
    font-size: 1.5em;
    text-align: center;
    padding: 1em 2em;
    position: relative;
    top: -83px;
    z-index: 0;
    color: rgba(255, 255, 238, 0.9);
    outline: 1px solid var(--landing-bc);
    outline-offset: -2px;
    background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -webkit-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -moz-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -ms-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -o-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    border: 2px solid;
    border-right: 0px;
    /* border-left: 0px; */
    border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    /* -webkit-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -moz-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -ms-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -o-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px; */
    font-family: var(--titles-landing);
}

main#service3 .service-box.realEstate .serviceType {
    padding: 1em 1.5em;
}

main#service3 .service-box .descriptor {
    justify-content: center;
    justify-self: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    align-self: center;
    z-index: 0;
    color: rgb(187, 186, 186);
    position: relative;
    top: -112px;
    font-size: 1.15em;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 90%;
    padding: 40px 10px 180px 10px;
    text-align: center;
    outline: 2px solid var(--landing-bc);
    outline-offset: none;
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
main#service3 .service-box .descriptor::-webkit-scrollbar {
    display: none;
}


main#service3 .service-box .descriptor li.h1Descriptor {
    color: rgba(255, 255, 238, 0.8);
    font-size: 1.14em;
    font-weight: normal;
    font-family: "Playfair Display", serif;
}

main#service3 .service-box .descriptor li.h2Descriptor {
    color: rgba(255, 255, 238, 0.8);
    font-size: 1.14em;
    font-weight: normal;
    font-family: "Playfair Display", serif;
    /* text-decoration: underline; */
}

main#service3 .service-box .fromService {
    width: 50%;
    border-radius: 2px;
    font-size: 1.15em;
    text-align:center;
    cursor: pointer;
    color: #fff;
    position: relative;
    top: -83px;
    padding: 0.5em 1em;
    z-index: 1;
    color: rgba(255, 255, 238, 0.9);
    outline: 1px solid var(--landing-bc);
    outline-offset: -2px;
    background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -webkit-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -moz-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -ms-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -o-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    border: 2px solid;
    border-right: 0px;
    border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    /* -webkit-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -moz-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -ms-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -o-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px; */
}


main#service3 .service-box .fromService:hover {
    border-right: 0px;
    background:linear-gradient(110deg, rgba(84, 98, 165, 1)10%, rgba(0, 46, 116, 1) 50%);
}



/********        ********
         Gallery 
********         ********/



/******** Gallery Header Special Navigation ********/


ul#imgType {
    position: relative;
    grid-area: globalNav;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-self: center;
    justify-content: center;
    align-self: center;
    height: fit-content;
    width: 60%;
    padding:0px;
    margin: 120px 0px 0px 0px;
}


ul#imgType li.fromService, li#extraGallery.fromService {
    position:relative;
    color: black;
    font-size: 1.25em;
    width: 33%;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
    margin: 40px 10px 0px 10px;
    /* padding: 15px 60px; */
    height: 60px;
    color: rgba(255, 255, 238, 0.9);
    background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    border: 2px solid;
    border-right: 0px;
    border-left: 0px;
    border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    /* -webkit-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -moz-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -ms-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -o-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px; */
    font-family: var(--titles-landing);
    animation: .5s ease-in-out 0s 1 normal forwards running fromReveal;
    -webkit-animation: .5s ease-in-out 0s 1 normal forwards running fromReveal;
    -moz-animation: .5s ease-in-out 0s 1 normal forwards running fromReveal;
    -ms-animation: .5s ease-in-out 0s 1 normal forwards running fromReveal;
    -o-animation: .5s ease-in-out 0s 1 normal forwards running fromReveal;
    /* transition: transform ease-in-out .25s; */
}

@keyframes fromReveal {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
}
@-webkit-keyframes fromReveal {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
    }
@-moz-keyframes fromReveal {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
    }
@-ms-keyframes fromReveal {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
    }
@-o-keyframes fromReveal {
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;
    }
    }



ul#imgType > li.fromService:hover, ul#imgType > li#extraGallery.fromService:hover {
    background:linear-gradient(110deg, rgba(84, 98, 165, 1)10%, rgba(0, 46, 116, 1) 50%);
    outline: var(--landing-bc) solid 2px;
    outline-offset: -5px;
    /* transform: scale(1.02); */
}



/******** Gallery Main Area ********/



main.imgGallery  {
    grid-area: main;
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    border-top: 2px solid rgba(194, 194, 194, 0.2);
    justify-content: center;
    padding: 50px 20px 0px 20px;
    margin: 75px 10px 125px 10px;
    z-index: 0;
  }


  
  /* Create four equal columns that sits next to each other */
 
   .galleryColumn {
    -ms-flex: 33%; /* IE10 */
    flex: 33%;
    max-width: 30%;
    margin: 0px 7.5px;

  }

  /* @keyframes duration | easing-function | delay |
 iteration-count | direction | fill-mode | play-state | name 
animation: 3s ease-in 1s 2 reverse both paused slidein; */


  @keyframes galleryReveal1 {
      0%{
        /* visibility: hidden; */
        opacity: 0;
      }
      50%{
        /* visibility: hidden; */
        opacity: 0;
      }
      100%{
        /* visibility: visible; */
        opacity: 1;
      }
  }

  @-webkit-keyframes galleryReveal1 {
    0%{
      /* visibility: hidden; */
      opacity: 0;
    }
    50%{
        /* visibility: hidden; */
        opacity: 0;
      }
    100%{
      /* visibility: visible; */
      opacity: 1;
    }
}
  @-moz-keyframes galleryReveal1 {
    0%{
      /* visibility: hidden; */
      opacity: 0;
    }
    90%{
        /* visibility: hidden; */
        opacity: 0;
      }
    100%{
      /* visibility: visible; */
      opacity: 1;
    }
}
  @-ms-keyframes galleryReveal1 {
    0%{
      /* visibility: hidden; */
      opacity: 0;
    }
    90%{
        /* visibility: hidden; */
        opacity: 0;
      }
    100%{
      /* visibility: visible; */
      opacity: 1;
    }
}
  @-o-keyframes galleryReveal1 {
    0%{
      /* visibility: hidden; */
      opacity: 0;
    }
    90%{
        /* visibility: hidden; */
        opacity: 0;
      }
    100%{
      /* visibility: visible; */
      opacity: 1;
    }
}

   /* .galleryColumn img {
    margin-top: 5px; 
    padding: 1px 1px;
    vertical-align: middle;
     width: 100%; 
  } */


  /***** Gallery Modal Window *****/


  .img1 {
    display: block;
    cursor: pointer;
    /* background-image:linear-gradient(110deg, rgba(160, 160, 160, 1) 40%, rgba(255,255,255, 0.8) 55%,rgba(160, 160, 160, 0.9) 70%, rgb(160, 160, 160, 0.6) 80%); */
    transition: 0.1s;
    border: 0;
    height: auto;
    width: 100%;
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
    margin: 15px 0px;
    animation: 3.5s ease-in-out 0s 1 normal forwards running galleryReveal1;
    -webkit-animation: 3.5s ease-in-out 0s 1 normal forwards running galleryReveal1;
    -moz-animation: 3.5s ease-in-out 0s 1 normal forwards running galleryReveal1;
    -ms-animation: 3.5s ease-in-out 0s 1 normal forwards running galleryReveal1;
    -o-animation: 3.5s ease-in-out 0s 1 normal forwards running galleryReveal1;
  }
  
  .img1:hover {
      opacity: 0.6;
    }
  

  /* The Modal (background) */

  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 12; /* Sit on top */
    padding-top: 40px;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }

  #modal2, #modal3 {
    animation: 2s modal2Load linear 1 normal;
    -webkit-animation: 2s modal2Load linear 1 normal;
    -moz-animation: 2s modal2Load  linear 1 normal;
    -ms-animation: 2s modal2Load linear 1 normal;
    -o-animation: 2s modal2Load linear 1 normal;
    visibility: hidden;
    opacity: 0;
    /* transition: visibility 0s, opacity 0.5s linear; */
    position: fixed; /* Stay in place */
    /* padding-top: 40px; */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  }

  #modal3 {
    z-index: 80;
    animation: 3.5s modal2Load linear 1 normal;
    -webkit-animation: 3.5s modal2Load linear 1 normal;
    -moz-animation: 3.5s modal2Load  linear 1 normal;
    -ms-animation: 3.5s modal2Load linear 1 normal;
    -o-animation: 3.5s modal2Load linear 1 normal;
    background-color: rgb(0,0,0,); /* Black w/ opacity */
    background-color: rgba(0,4,24,1); /* Bkg colour */

  }
  
  
/* Modal Content (image) */

    .modal-content {
    margin: 5% auto;
    display: block;
    width: 100%;
    max-width: 700px;
    }

/* Caption of Modal Image */

/* #caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
} */

/* Add Animation */
.modal-content {  
  animation: zoom 0.5s ease-in-out;
  -webkit-animation: zoom 0.5s ease-in-out;
  -ms-animation: zoom 0.5s ease-in-out;
  -moz-animation: zoom 0.5s ease-in-out;
  -o-animation: zoom 0.5s ease-in-out;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)};
  }

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@-ms-keyframes zoom {
    from {-ms-transform:scale(0)} 
    to {-ms-transform:scale(1)}
  }
  @-moz-keyframes zoom {
    from {-moz-transform:scale(0)} 
    to {-moz-transform:scale(1)}
  }
  @-o-keyframes zoom {
    from {-o-transform:scale(0)} 
    to {-o-transform:scale(1)}
  }


/* The Close Button */
.closeModal {
  position: absolute;
  top: 15px;
  right: 30px;
  color: #f1f1f1;
  font-size: 35px;
  font-weight: bold;
  transition: 0.3s;
}

.closeModal:hover,
.closeModal:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}





  /********        ********
          Contact 
********         ********/





main.contact3, main.contact4 {
    /* grid-area: main; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    grid-row-gap: 50px;
    padding: 0px 50px 0px 50px;
    margin: 215px 0px 135px 0px;
    align-self: center;
    justify-self: center;
    background-color: inherit;
}

main.contact4 {
    padding: 0px 10px 0px 10px;

}

main.contact3 .contactBox {
    width: 550px;
    height: 1000px;
    padding: 2em;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    outline: 1px solid var(--landing-bc);
    outline-offset: -5px;
    background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    -webkit-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    -moz-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    -ms-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    -o-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    border-right: 2px solid;
    border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 2px 0px / 0px 0px;
    /* -webkit-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 2px 0px / 0px 0px;
    -moz-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 2px 0px / 0px 0px;
    -ms-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 2px 0px / 0px 0px;
    -o-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 2px 0px / 0px 0px; */
}

form.form {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
 

.form-group {
    margin-bottom:2.5em;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

.form-group input#userName, label#uLabel{
    width: 60%;
}

.form-group input#userEmail, label#eLabel{
    width: 60%;
}

.form-group input#userpNumber, label#pLabel {
    width: 60%;
}


.form-group .form-label {
    outline: 1px solid var(--landing-bc);
    outline-offset: -5px;
    font-size: 1.25em;
    font-family: var(--titles-formal);
    background-image:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    -webkit-background-image:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    -moz-background-image:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    -ms-background-image:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    -o-background-image:linear-gradient(110deg, rgba(84, 98, 165, 0.9)10%, rgba(0, 46, 116, 1) 50%);
    width: 100%;
    color: white;
    position: relative;
    display: block;
    opacity: 1;
    border-radius: 1% 1%;
    margin-bottom: 0px;
    padding: 10px 0px 10px 0px;
    transition: all .3s;
    font-weight: normal;
}


.form-control {
    box-shadow: none;
    font-family: var(--titles-formal);
    border-radius: 2% 1% 1% 2%;
    border-color:rgba(84, 98, 165, 1);
    padding: 20px 15px 20px 15px;
    border-style: none none solid none;
    width: 100%;
    font-size: 1.15em;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all  1s;
    height: 25px;
}


.form-control::placeholder {
    color: var(--landing-bc);
    font-family: var(--titles-formal);
    font-size: 0.8em;
    opacity: 0.7;
}

.form-control:focus {
    box-shadow: none;
    outline: none;
}

.form-group:focus-within{
    transform:scale(1.05, 1.05);
    -webkit-transform:scale(1.05, 1.05);
    -ms-transform:scale(1.05, 1.05);
    -moz-transform:scale(1.05, 1.05);
    -o-transform:scale(1.05, 1.05);

}

.form-control:invalid:focus{
    border-color: red;
}

.form-control:valid:focus{
    border-color:rgba(160, 160, 160, 0.6);
}


#socialLinks {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    width: 100%;
    margin: 50px 0px 0px 0px;
    font-size: 1.5em;
    padding: 15px 0px 10px 0px;
    align-self: center;
    font-family: var(--titles-formal);
    background:linear-gradient(110deg, rgba(84, 98, 165, 1)10%, rgba(0, 46, 116, 1) 50%);    
    color:rgba(255, 255, 238, 0.9);
    border-radius: 2% 1% 1% 2%;
    outline: 1px solid var(--landing-bc);
    outline-offset: -5px;
}



#socialLinks li.currentHandle, #socialLinksSent li.currentHandle  {
    padding: 0px 20px;
    margin: 0px 0px 10px 0px;
    text-align: center;
    font-style:italic;
}

#socialLinks li.icon img, #socialLinksSent li.icon img {
    width: 36px;
    height: 35px;
    border-radius: 30% 30%;
    background: black;
    transition: color .5s ease-in-out;
    -webkit-transition: color .5s ease-in-out;
    -ms-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
}

#socialLinks li.icon img:hover, #socialLinksSent li.icon img:hover {
    /* width: 38px;
    height: 37px; */
    background: rgba(160, 160, 160, 0.6);
}

#socialLinks li.icon:last-child img, #socialLinksSent li.icon:last-child img {
    border-radius: 20% 20% 20% 20%;
    background: white;
    transition: color .5s ease-in-out;
    -webkit-transition: color .5s ease-in-out;
    -ms-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
}


#socialLinks li.icon:last-child img:hover, #socialLinksSent li.icon:last-child img:hover {
    /* width: 38px;
    height: 37px; */
    background: rgba(160, 160, 160, 0.6);
}


.btn {
    width: 100%;
    align-self: center;
    font-family: var(--titles-formal);
    background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -webkit-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -moz-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -ms-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -o-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    border: 2px solid;
    border-right: 0px;
    border-left: 0px;
    border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
   /* -webkit-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
   -moz-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
   -ms-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
   -o-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px; */
    color:rgba(255, 255, 238, 0.9);
    border-radius: 2% 1% 1% 2%;
    font-size: 1.4em;
    margin: 25px 0px 0px 0px;
    padding: 16px 0px 16px 0px;
    font-weight: bolder;

}

.btn:hover {
    background: linear-gradient(110deg, rgba(84, 98, 165, 1)10%, rgba(0, 46, 116, 1) 50%);
    outline: 1px solid var(--landing-bc);
    outline-offset: -5px;
}

textarea.form-control {
    resize: none;
    height: 150px;
    font-family: var(--titles-landing);
    padding: 15px 15px 20px 15px;
}


/* .error {
    display: none;
    color: white;
    background-color: red;
    font-size: 1em;
    font-family: var(--titles-formal);
    text-align: center;
    margin: 0.5em 0px -2em 0px;
    padding: 10px 5px;
    width: 100%;
    font-weight: bold;
} */


#sentMessage {
    width: 100%;
    align-self: center;
    text-align: center;
    font-family: var(--titles-formal);
    font-style: normal;
/* background-image: linear-gradient(60deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%); */
    background-image: linear-gradient(110deg, rgb(0, 24, 0)10%, rgb(19, 84, 19)50%);
    -webkit-background-image: linear-gradient(110deg, rgb(0, 24, 0)10%, rgb(19, 84, 19)50%);
    -moz-background-image: linear-gradient(110deg, rgb(0, 24, 0)10%, rgb(19, 84, 19)50%);
    -ms-background-image: linear-gradient(110deg, rgb(0, 24, 0)10%, rgb(19, 84, 19)50%);
    -o-background-image: linear-gradient(110deg, rgb(0, 24, 0)10%, rgb(19, 84, 19)50%);
     border: 2px solid;
    border-right: 0px;
    border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    /* -webkit-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -moz-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -ms-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    -o-border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px; */
    color:white;
    border-radius: 2% 1% 1% 2%;
    font-size: 1.25em;
    margin-bottom: 2em;
    padding: 25px 25px;
}

#contactSentBox {
    /* width: 550px;
    height: 340px; */
    padding: 3em;
    font-size: .9em;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    outline: 1px solid var(--landing-bc);
    outline-offset: -5px;
    background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    -webkit-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    -moz-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    -ms-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    -o-background-image: linear-gradient(110deg, rgba(0, 46, 116, .8)10%, var(--landing-bc)90%);
    border: 2px solid;
    border-right:0px;
    border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1  / 2px 1px 2px 0px / 0px 0px;
    /* -webkit-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 2px 0px / 0px 0px;
    -moz-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 2px 0px / 0px 0px;
    -ms-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1/ 2px 1px 2px 0px / 0px 0px;
    -o-border-image: linear-gradient(110deg, rgba(0,0,0, 0) 25%, rgba(160, 160, 160, 0.6)  40%, rgba(255,255,255, 0.8) 80%, rgba(160, 160, 160, 0.9)  85%) 1 / 2px 1px 2px 0px / 0px 0px; */
}


#socialLinksSent, #downloadsLink {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0.5em;
    font-size: 1.5em;
    padding: 15px 0px 10px 0px;
    align-self: center;
    font-family: var(--titles-formal);
    background:linear-gradient(110deg, rgba(84, 98, 165, 1)10%, rgba(0, 46, 116, 1) 50%);  
    outline: 1px solid var(--landing-bc);
    outline-offset: -5px;  
    color:rgba(255, 255, 238, 0.9);
    border-radius: 2% 1% 1% 2%;
}

#downloadsLink {
    background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -webkit-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -moz-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -ms-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    -o-background-image: linear-gradient(110deg, var(--landing-bc)10%, rgba(0, 46, 116, 1) 50%);
    border: 2px solid;
    border-right: 0px;
    border-left: 0px;
    border-image: linear-gradient(110deg, rgba(160, 160, 160, 0.6) 1%, rgba(255,255,255, 0.7) 30%, rgba(160, 160, 160, 0.6) 35%, rgba(0,0,0, 0) 85%) 1 / 1px 0px 1px 1px / 0px 0px;
    outline: none;
    font-style: bold;
    padding: 0px;

    /* outline-offset: -5px;   */
}

#downloadsLink:hover {
    background:linear-gradient(110deg, rgba(84, 98, 165, 1)10%, rgba(0, 46, 116, 1) 50%);  
    outline: 1px solid var(--landing-bc);
    outline-offset: -5px;  
}

#downloadsLink a {
    width: 100%;
    padding: 15px;
    background: none;
    color:rgba(255, 255, 238, 0.9);
    text-decoration: none;
}

/********        ********
       Footer Area 
********         ********/


footer {
    grid-area: footer;
    margin: 100px 0px 0px 0px;
    padding: 40px 0px 25px 0px;
    position:relative;
    background-color: #000a0a;
    height: 100%;
    width: 100%;
    display: flex;
    font-family: var( --titles-landing);
    outline: 1px solid rgba(194, 194, 194, 0.2);
    outline-offset: -2px;
    color: rgba(160, 160, 160, 0.6);
    flex-direction: column;
    flex-wrap: nowrap; 
    justify-content: center; 
    align-items: center;
}


footer ul {
   /* padding: 0px 100px; */
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   font-style: italic;
   justify-content: center;
   padding: 0px;
   margin: 0px;
}


footer li {
    border-top: 1px solid rgba(160, 160, 160, 0.6);
    padding: 5px 2px;
}

footer p#photoCall {
    font-size: 1em;
    color: rgba(160, 160, 160, 0.1);
    padding: 0px;
    margin: 0px;
}


/********        ********
       Media Queries 
********         ********/



/* landing page margin fix for large resolutions */

/*@media screen and (min-width: 1150px) {
	.header1 {
		margin: 275px 0px 300px 0px
	}
}*/



/* Gallery Responsive layout - makes a two column-layout instead of three columns */

@media screen and (max-width: 1150px) {
   
    .galleryColumn {
      -ms-flex: 50%;
      -webkit-flex: 50%;
      -moz-flex: 50%;
      -o-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }

    ul#imgType li.fromService, li#extraGallery.fromService  {
        font-size: 1.25em;
    }

    ul#imgType {
        flex-wrap: wrap;
        margin-top: 160px;
    }

    ul#imgType li.fromService, li#extraGallery.fromService  {
        margin: 10px 10px;
    }

};
  

@media screen and (max-width: 1050px) {
    
    .header1 {
        transform:scaleX(0.9) scaleY(0.9);
        -ms-transform:scaleX(0.9) scaleY(0.9);
        -webkit-transform:scaleX(0.9) scaleY(0.9);
        -moz-transform:scaleX(0.9) scaleY(0.9);
        -o-transform:scaleX(0.9) scaleY(0.9);
        }
}

@media screen and (max-width: 1000px) {
   
    .header1 {
        transform:scaleX(0.8) scaleY(0.8);
        -ms-transform:scaleX(0.8) scaleY(0.8);
        -webkit-transform:scaleX(0.8) scaleY(0.8);
        -moz-transform:scaleX(0.8) scaleY(0.8);
        -o-transform:scaleX(0.8) scaleY(0.8);
        }
}



/* Gallery Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 900px) {
  
    .galleryColumn {
      -ms-flex: 100%;
      -webkit-flex: 100%;
      -moz-flex: 100%;
      -o-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }

    .header1 {
        transform:scaleX(0.7) scaleY(0.7);
        -ms-transform:scaleX(0.7) scaleY(0.7);
        -webkit-transform:scaleX(0.7) scaleY(0.7);
        -moz-transform:scaleX(0.7) scaleY(0.7);
        -o-transform:scaleX(0.7) scaleY(0.7);
        }
  }

  

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

     .modal-content{
        margin-top: 15px;
    }
  
}




  @media screen and (max-width: 800px) {
    
    .header1 {
        transform:scaleX(0.6) scaleY(0.6);
        -ms-transform:scaleX(0.6) scaleY(0.6);
        -webkit-transform:scaleX(0.6) scaleY(0.6);
        -moz-transform:scaleX(0.6) scaleY(0.6);
        -o-transform:scaleX(0.6) scaleY(0.6);
        }

     .modal-content{
        margin-top: 30px;
    }
    
}



@media screen and (max-width: 750px) {
 
    footer {
        padding: 70px 0px 55px 0px;
    }

    ul#imgType li.fromService, li#extraGallery.fromService  {
        font-size: 1.1em;
        /* padding: 3px 3px; */
        width: 75%;
    }

   

    .header1 {
        transform:rotate(270deg) scaleX(0.5) scaleY(0.5);
        -webkit-transform: rotate(270deg) scaleX(0.5) scaleY(0.5);
        -moz-transform:rotate(270deg) scaleX(0.5) scaleY(0.5);
        -ms-transform:rotate(270deg) scaleX(0.5) scaleY(0.5);
        -o-transform:rotate(270deg) scaleX(0.5) scaleY(0.5);
    }

    header.header1 div#openNavBtn1 {
        /* background-image: linear-gradient(210deg, rgba(0,0,0, 0.6) 1%, rgba(160, 160, 160, 0.6) 25%, rgba(255,255,255, 0.7) 55%, rgba(160, 160, 160, 0.6)60%, rgba(0,0,0, 0.6) 99%); */
        background-image: linear-gradient(209deg, rgba(160, 160, 160, 1) 20%, rgba(255,255,255, 0.9) 35%, rgba(160, 160, 160, 1) 40%, rgb(160, 160, 160, 9) 50%, rgba(0,4,24, 1) 50%); 
    }

    header.header1 div#openNavBtn1, header.header1 img#imgTrigger1 {
        transform:rotate(100deg);
        -webkit-transform:rotate(100deg);
        -moz-transform:rotate(100deg);
        -ms-transform:rotate(100deg);
        -o-transform:rotate(100deg);
    }
    

    .header1 div.gallery1, .header1 div.services1, .header1 div.contact1, .header1 div.gallery1 .greyLine {
     box-shadow: 0px 25px 15px 5px rgba(0, 0, 0, 0.6) inset, 0px -30px 10px 10px rgba(0, 0, 0, 0.6) inset;
    }    
    
    
    .header1 .gallery1 .title  {
        transform:rotate(90deg) translate(-15%, 130%);
        -ms-transform: rotate(90deg) translate(-15%,130%);
        -webkit-transform: rotate(90deg) translate(-15%,130%);
        -moz-transform: rotate(90deg) translate(-15%,130%);
        -o-transform: rotate(90deg) translate(-15%,130%);
        width: 450px;
    
    }  
    
    .header1 .services1 .title {
        transform:rotate(90deg) translate(-114%,200%);
        -ms-transform: rotate(90deg) translate(-114%,200%);
        -webkit-transform: rotate(90deg) translate(-114%,200%);
        -moz-transform: rotate(90deg) translate(-114%,200%);
        -o-transform: rotate(90deg) translate(-114%,200%);
        width: 400px;
    }

    .header1 .contact1 .title {
        transform: rotate(90deg) translate(-109.5%,225%);
        -webkit-transform: rotate(90deg) translate(-109.5%,225%);
        -moz-transform: rotate(90deg) translate(-109.5%,225%);
        -ms-transform: rotate(90deg) translate(-109.5%,225%);
        -o-transform: rotate(90deg) translate(-109.5%,225%);
        width: 375px;
    }

    .header1 .gallery1 .title h1 {
        padding-left: 15px;
    }  
    
}



  /* 100% Image Width on Smaller Screens */
  @media screen and (max-width: 700px) {
    .modal-content {
      width: 100%;
    }
  
    .closeModal {
    top:  10px;
    right: 25px;
      }
}


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

    main.contact3 .contactBox {
    width: 470px;
    height: 1000px;
    -moz-height: 1100px;
    }


}


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

    main#service3 .service-box {
        width: 475px;
        height: 700px;
    }

    .modal-content{
        margin-top: 30%;
    }

    main#service3 .service-box .descriptor {
        padding: 40px 10px 280px 10px;
        width: 85%;
        top: -110px;
        /* -moz-top: -115px; */
        font-size: 0.9em;
    }

}



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

    /*  Service  */ 
    main#service3 .service-box {
        width: 450px;
        height: 655px;
    }

    .modal-content{
        margin-top: 20%;
    }

    main#service3 .service-box .fromService {
        width: 60%;
    }

    main#service3 .service-box .descriptor {
        padding: 40px 10px 245px 10px;
        width: 85%;
        top: -105px;
        /* -moz-top: -115px; */
        font-size: 0.9em;
    }


}

@media screen and (-moz-max-width: 550px) {

    main#service3 .service-box .descriptor {
        padding: 40px 10px 245px 10px;
        width: 85%;
        top: -110px;
        font-size: 0.9em;
    }
}





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

     /*  Service  */ 
     main#service3 .service-box {
        width: 425px;
        height: 630px;
    }
  


    main#service3 .service-box .fromService {
        width: 65%;
    }

    /* main#service3 .service-box .descriptor {
        padding: 40px 10px 145px 10px;
    } */


    main#service3 .service-box .descriptor {
        /* padding: 120px 15px 120px 15px; */
        width: 85%;
        top: -108px;
        -moz-top: -112px;
        font-size: 0.9em;
    }



     /* Contact  */
     main.contact3 .contactBox {
        width: 425px;
        padding: 0px 30px;

    }

    .btn {
        width: 100%;
    }

    /* Gallery */

    .modal-content{
        margin-top: 20%;
    }

    .modal-content {
        width: 100%;
        margin-top: 30%;
        max-width: 475px;

      }

      .galleryColumn {
        /* -ms-flex: 100%;
        flex: 100%; */
        max-width: 100%;
      }
}


@media screen and (max-width: 450px) {
   div#contactBox .form div.form-group input, div#contactBox .form div.form-group label{
        width: 100%;
    }

    main#service3 .service-box .descriptor {
        /* padding: 120px 15px 120px 15px; */
        width: 85%;
        top: -107px;
        -moz-top: -107px;
        font-size: 0.9em;
    }

    main#service3 .service-box {
        width: 425px;
        height: 635px;
    }
}


@media screen and (max-width: 425px) {
    
    /*  Service  */ 

 
     main#service3 .service-box {
        width: 350px;
        height: 580px;
    }

  
    /* main#service3 .service-box .fromService {
        width: 65%;
    } */

    main#service3 .service-box .serviceType {
        font-size: 1.15em;
        top: -65px;
        -moz-top: -70px;
        width: 50%;
    }

    main#service3 .service-box .fromService {
        width: 65%;
        font-size: 1em;
        top: -65px;
        -moz-top: -70px;
    }


    main#service3 .service-box .descriptor {
        /* padding: 120px 15px 120px 15px; */
        width: 85%;
        top: -87px;
        -moz-top: -87px;
        font-size: 0.9em;
    }


     /* Contact  */

     main.contact3 .contactBox {
        width: 350px;
        padding: 0px 25px;
    }

    /* Gallery */
/* 
    .modal-content {
        width: 100%;
        max-width: 300px;
    } */

    .modal-content {
        width: 100%;
        margin-top: 35%;
        margin-bottom: 0;
        margin-left: 0;
        margin-right:0;
        max-width: 425px;
        left:0;

      }
    
    .closeModal {
        top:  10px;
        /* right: 60px; */
    }



   .galleryColumn img {
       /* margin-top: 5px; */
      padding: 15px 0px;
   }


   #errorMsg {
    font-size:1em;
    }

    .form-control{
        font-size: 1em;
    }

}


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

    /*  Service  */ 

    main#service3 .service-box {
        width: 325px;
        height: 560px;
    }


    /* .modal-content {
        width: 100%;
        max-width: 300px;
    } */

    /* main#service3 .service-box button {
        width: 65%;
    }
     */

    /* main#service3 .service-box .descriptor {
        padding: 130px 15px 130px 15px;
    } */

    main#service3 .service-box .descriptor {
        top: -87px;
        -moz-top: -87px;
        font-size: 0.8em;
    }

    /* Contact  */

    main.contact3 .contactBox {
        width: 340px;
        padding: 0px 20px;

    }

    main.contact3 {
        padding: 0px 0px;
    }

    main.contact4 {
        padding: 0px 15px;
    }

    #contactSentBox {
        padding: 4em 2em;
    }

    div#sentMessage {
        margin-bottom: 2em;
    }

    ul#socialLinksSent {
        margin-bottom: .25em;
    }

    /* Gallery */

    .modal-content {
        width: 100%;
        margin-top: 35%;
        margin-bottom: 0;
        margin-left: 0;
        margin-right:0;
        max-width: 375px;
        left:0;
    }

    .closeModal {
        top:  10px;
        /* right: 90px; */
    }

    .galleryColumn img {
    /* margin-top: 5px; */
    padding: 5px 0px;
    }


}


@media screen and (max-width: 350px) {
    
    /*  Service  */ 

    main#service3 .service-box {
       width: 275px;
       height: 522px;
   }


    main#service3 .service-box .serviceType {
        font-size: 1em;
        top: -57px;
        -moz-top: -62px;
        width: 60%;
    }

    main#service3 .service-box .fromService {
        font-size: 0.85em;
        top: -57px;
        -moz-top: -62px;
        width: 75%;
    }

    main#service3 .service-box .descriptor {
        /* padding: 110px 15px 110px 15px; */
        top: -76px;
        -moz-top: -76px;
        font-size: 0.8em;
    }

 
   

    /* Contact  */

    main.contact3 .contactBox {
       width: 300px;       
       padding: 0px 20px;
   }


    /* Gallery */

   .modal-content {
       width: 100%;
       margin-top: 40%;
       margin-bottom: 0;
       margin-left: 0;
       margin-right:0;
       max-width: 350px;
       left:0;

     }
   
   .closeModal {
       top:  10px;
       /* right: 105px; */
   }

  .galleryColumn img {
      /* margin-top: 5px; */
     padding: 8px 0px;
  }

}



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

    /*  Service  */ 


   main#service3 .service-box {
        width: 255px;
        height: 500px;
   }

 
    /* .modal-content {
        width: 100%;
        max-width: 300px;
    } */

    /* main#service3 .service-box button {
        width: 80%;
    } */

    main#service3 .service-box .serviceType {
        font-size: 1em;
        top: -57px;
        -moz-top: -62px;
        width: 60%;
    }

    main#service3 .service-box .fromService {
        font-size: 0.8em;
        top: -57px;
        -moz-top: -62px;
        width: 75%;
    }


    main#service3 .service-box .descriptor {
        /* padding: 100px 15px 85px 15px; */
        top: -77.5px;
        -moz-top: -77.5px;
        font-size: 0.75em;
    }
   



    /* Contact  */

    main.contact3 .contactBox {
        width: 300px;
        padding: 0px 15px;
    }


    /* Gallery */

    .modal-content {
        width: 100%;
        margin-top: 40%;
        margin-bottom: 0;
        margin-left: 0;
        margin-right:0;
        max-width: 325px;
        left:0;
    }

    .closeModal {
        top:  10px;
        /* right: 115px; */
    }



    .galleryColumn img {
        /* margin-top: 5px; */
        padding: 8px 0px;
    }

}

@media screen and (max-width: 300px) {
   
   
    /*  Service  */ 
 
 
    main#service3 .service-box {
        width: 225px;
        height: 480px;
    }


    /* .modal-content {
        width: 100%;
        max-width: 300px;
    } */

    main#service3 .service-box .serviceType {
        font-size: .8em;
        top: -47px;
        -moz-top: -52px;
        width: 60%;
    }

    main#service3 .service-box .fromService {
        font-size: 0.7em;
        top: -47px;
        -moz-top: -52px;
        width: 75%;
    }


    main#service3 .service-box .descriptor {
        /* padding: 90px 15px 90px 15px; */
        top: -63px;
        -moz-top: -63px;
        font-size: 0.65em;
    }

    main#service3 .service-box.realEstate .serviceType {
        padding: 1em .8em;
    }
    
    /* Contact  */

    main.contact3 .contactBox {
        width: 275px;
        padding: 0px 10px;
    }

    /* #contactSentBox {
        padding: 2.5em 2em;
    }

    div#sentMessage {
        margin-bottom: 1.75em;
    }

    ul#socialLinksSent {
        margin-bottom: .25em;
    } */
    
    /* Gallery */

    .modal-content {
        width: 100%;
        margin-top: 40%;
        margin-bottom: 0;
        margin-left: 0;
        margin-right:0;
        max-width: 300px;
        left:0;
    }
    
    .closeModal {
        top:  10px;
        /* right: 125px; */
    }
    

    
    .galleryColumn img {
        /* margin-top: 5px; */
        padding: 8px 0px;
    }
 


 }