:root {
    --darkgrey: #212329;
    --brightred: #f9423d;
    --white: #fff;
    --lightred:#f9433dcc;
}

@font-face {
    font-family:"Ephesis";
    src: url(fonts/Ephesis-Regular.ttf);
}

@font-face {
    font-family:"Oswald";
    src: url(fonts/Oswald-VariableFont_wght.ttf);
}

@font-face {
    font-family:"Proxima";
    src: url(fonts/Proxima-Nova-Font.otf);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Proxima";
}

h1{
    text-transform: uppercase;
    font-family: "Proxima";
    font-size: 6vw;
}

h2{
    text-transform: uppercase;
    font-family: "Proxima";
    font-size: 3vw;
}

h3{
    text-transform: uppercase;
    font-family: "Proxima";
    font-size: 2vw;
}

h4{
    text-transform: uppercase;
    font-family: "Proxima";
    font-size: 1.25vw;
}

h5{
    text-transform: uppercase;
    font-family: "Proxima";
    font-size: 0.75vw;
    text-align: left;
}

h6{
    font-family: "Proxima";
    text-align: center;
    font-style: italic;
    color:rgb(247, 140, 19);
    margin-left: 14%;
    margin-right: 14%;

    /* Extra small devices (phones, 600px and down)*/
    @media only screen and (max-width: 600px) {
        font-size: 5vw;
    }

    /* Small devices (phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        font-size: 2.5vw;
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        font-size: 2.75vw;
    }

    /* Medium devices (landscape tablets, 992px and up) */
    @media only screen and (min-width: 992px) {
        font-size: 1.75vw;
    }

    /* Medium devices (landscape tablets, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        font-size: 1.5vw;
    }
}

a {
    text-decoration: none
}

/* FORMAT CONTACT FORM */
TitleContact{
    font-family: "Proxima";
    font-size: 300%;
    font-weight: bolder;
    text-align: center;
}

inst{
    font-family: "Proxima";
    font-size: 20px;
    text-align: center;
}

label{
    font-family: "Proxima";
    font-size: 24px;
    text-align: center;
}

input{
    font-family: "Proxima";
    font-size: 20px;
    font-style: italic;
}

textarea{  
    font-family: "Proxima";
    font-style: italic;
    font-size: 20px;  
}

#submit_form{
    font-family: "Proxima";
    font-weight: bolder;
    font-style: italic;
    font-size: 24px;
    text-align: center; 
}
/* END FORMAT CONTACT FORM */

/* NAVBAR*/
.nav-container {
    width: 100%;
    background-color: whitesmoke;
}

.navbar{
    display: grid;
    grid-template-columns: 0.2fr auto 1fr;
    align-items: center;
    height: 70px;
    width: 100%;
    margin: 0 auto;
    display:flex;
    justify-content:space-between;
}

#navbar-logo {
    color: black;
    justify-self: start;
    margin-left: 8%;
}

#navbar-logo {
    cursor: pointer;
}

.nav-menu {
    display: grid;
    grid-template-columns: repeat(5, auto);
    list-style: none;
    text-align: right;
    width: 50%;
    justify-self: end;
    padding-right: 3%;
}

.nav-links {
    color: black;
    font-size: 1.25vw;
    text-decoration: none;
}

.activeLink {
    color: rgb(247, 140, 19);
    font-size: 1.25vw;
    font-weight: bolder;
    font-style: italic;
    padding: 2% 10%;
    text-decoration: none;
}

.nav-links:hover {
    color: black;
    font-weight: bolder;
    transition: all 0.2s ease-out;
}

.nav-links-btn {
    background-color: var(--brightred);
    padding: 6px 16px;
    border-radius: 4px;
}

.nav-links-btn:hover {
    background-color: transparent;
    color: var(--white);
    padding: 5px 15px;
    border-radius: 4px;
    border: solid 1px var(--brightred);
    transition: all 0.3s ease-out;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background: black;
}

@media only screen and (max-width: 768px) {
    .nav-container {
        position: relative;
    }

    .nav-menu {
        display: grid;
        grid-template-columns: auto;
        background: gainsboro;
        margin: 0;
        width: 50%;
        position: absolute;
        top: 70px;
        opacity: 0;
        transition: all 0.5s ease;
    }
    
    #navbar-logo {
        color: black;
        font-size: 4vw;
        margin-left:  1vw;
    }

    #navbar-logo {
        cursor:pointer
    }

    .nav-menu.active {
        background:gainsboro;
        width: 50%;
        right: 0;
        opacity: 1;
        transition: all 0.5s ease;
    }

    .nav-links {
        text-align: center;
        font-size: 2.75vw;;
        line-height: 200%;
        width: 100%;
        display: table;
    }

    .activeLink {
        background-color: whitesmoke;
        color: rgb(247, 140, 19);
        text-align: center;
        font-size: 3vw;
        font-weight: bolder;
        font-style: italic;
        line-height: 200%;
        width: 100%;
        display: table;
        text-decoration: none;
    }

    .nav-links:hover {
        background-color: whitesmoke;
        color: black;
        transition: all 0.4s ease-out;
    }

    .navbar {
        width: 100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .nav-links-btn {
        border: none;
        padding: 0;
        border-radius: 0;
        background-color: var(--darkgrey);
        color: black;
        transition: all 0.4s ease-out;
    }

    .nav-links-btn:hover {
        border: none;
        padding: 0;
        border-radius: 0;
        background-color: var(--brightred);
        color: black;
        transition: all 0.4s ease-out;
    }

    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);
    }

    .menu-toggle .bar {
        display: block;
        cursor: pointer;
    }

    .menu-toggle:hover {
        cursor: pointer;
    }

    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}
/* END NAVBAR*/
    
/* PAGE TITLE DISPLAY IN NAVBAR FOR SMALL DEVICES BUT NOT LARGER */
h2pt{
    text-transform: uppercase;
    font-family: "Proxima";
    font-size: 3vw;
    color: orange;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
}

/* Extra large devices (large laptops and desktops, 768px and up) */
@media only screen and (max-width: 769px) {
    .new_div{
        margin-right: 20%;
    }
}

/* Extra large devices (large laptops and desktops, 770px and up) */
@media only screen and (min-width: 770px) {
    .new_div{
        display: none;
    }
}
/* END PAGE TITLE DISPLAY */

/* FORMAT TITLES IN HEADER PHOTO DISPLAYS */    
.title1 {
    margin-right: 1%;
    float: right;
    clear: both;
    
    /* Extra small devices (phones, 600px and down)*/
    @media only screen and (max-width: 600px) {
        font-size: 4vw;
        padding-top: 2.5%;
    }

    /* Small devices (phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        font-size: 3vw;
        padding-top: 1.25%;
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        font-size: 2.5vw;
        padding-top: 1.5%;
    }

    /* Medium devices (landscape tablets, 992px and up) */
    @media only screen and (min-width: 992px) {
        font-size: 2vw;
        padding-top: 1%;
    }
        
    /* Medium devices (landscape tablets, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        font-size: 1.25vw;
        padding-top: 1%;
    }
}
      
.title2 {
    /* Extra small devices (phones, 600px and down)*/
    @media only screen and (max-width: 600px) {
        font-size: 8vw;
        margin-left: 0;
    }

    /* Small devices (phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        font-size: 5vw;
        margin-left: 3%;
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        font-size: 4.5vw;
        margin-left: 1%;
    }

    /* Medium devices (landscape tablets, 992px and up) */
    @media only screen and (min-width: 992px) {
        font-size: 4vw;
        margin-left: 10%;
    }
        
    /* Medium devices (landscape tablets, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        font-size: 3vw;
        margin-left: 15%;
    }
}
/* END FORMAT TITLES IN HEADER PHOTO DISPLAYS */

.box {
    display:inline-block;
    width:100%;
    text-align:center;
}

img {
    display:inline-block;
    width:55%;
    text-align: center;
    
    /* Next 2 lines disables right click to Save Image As - However, lets u take screenshots, etc */    
    pointer-events: none;
    -webkit-touch-callout: none;   
}
  
@media only screen and (min-width:1000px) and (max-width: 1200px) {
    img {
        width:90%;
        text-align: center;
    }
}

body {
    padding: 0;
    margin-top: 0;
    font-family: "Proxima";
    background-color: rgba(190, 234, 241, 0.712);
}

section{
    width:100%;
}

header{
    width: 100%;
    padding: 2px;
    border-bottom: 2px solid black;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 1%;
    position: sticky;
    top: 0;
    background-color: whitesmoke;
    z-index: 1;
}

footer{
    width: 100%;
    padding: 3px;
    border-top: 2px solid black;
    text-align: center;
    font-size: smaller;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    background-color: whitesmoke;
}

/*.C-TWOCOL == NEW VERSION */

    .container {
        position: relative;
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
      }

    .foo {
        position: relative;
        text-decoration:none;
        margin-bottom: 5%
    }
    
    .foo:hover:after {
        content:none;
        margin-bottom: -5%;
    }
    
    .image {
        opacity: 1;
        display: block;
        transition: .5s ease;
        backface-visibility: hidden;
    }

    .image2 {
        opacity: 1;
        display: block;
        width: 100%;
        height: auto;
        transition: .5s ease;
        backface-visibility: hidden;
        margin-bottom: -9%;
    }

    .foo1 {
        position: relative;
        text-decoration:none;
        margin-bottom: 12%;
    }
    
    .foo1:hover:after {
        content:none;
    }
      
    .middle {
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 0;
        text-align: center; 
        transform: translate(0%, 100%);
        -ms-transform: translate(0%, 100%);
    }

    .middle2 {
        transition: .5s ease;
        opacity: 0;
        position: relative;
        top: 0%;
        left: 0%;
        transform: translate(0%, -30%);
        -ms-transform: translate(0%, -30%);
    }
    
    .foo:hover .image {
        opacity: 0.3;
    }
      
    .foo:hover .middle {
        opacity: 1;
    }
      
    .foo:hover .middle2 {
        opacity: 1;
    }

    .foo1:hover .image {
        opacity: 0.3;
    }
      
    .foo1:hover .middle {
        opacity: 1;
    }
      
    .foo1:hover .middle2 {
        opacity: 1;
    }
    
    /* Extra small devices (phones, 600px and down)*/
    @media only screen and (max-width: 600px) {

    .c-twocol {
        column-width: 80vw;
    }
    
        .text1 {
            width: 25%;
            float: left;
            background-color: darkblue;
            color: white;
            font-size: 3vw;
            padding-left: .75vw;
            text-align: left; 
        }

        .text11 {
            margin-left: 25%;
            width: 75%;
            background-color: darkblue;
            color: white;
            font-size: 3vw;
            padding-left: .75vw;
            text-align: left; 
        }
    }

    /* Small devices (phones, 600px and up) */
    @media only screen and (min-width: 600px) {
    
    .c-twocol {
        column-width: 80vw;
    }
    
        .text1 {
            width: 25%;
            float: left;
            background-color: darkblue;
            color: white;
            font-size: 3vw;
            padding-left: .75vw;
            text-align: left; 
        }

        .text11 {
            margin-left: 25%;
            width: 75%;
            background-color: darkblue;
            color: white;
            font-size: 3vw;
            padding-left: .75vw;
            text-align: left; 
        }
    }

    /* Small devices (phones, 768px and up) */
    @media only screen and (min-width: 768px) {
    
    .c-twocol {
        column-width: 96vw;
    }
            
        .text1 {
            width: 25%;
            float: left;
            background-color: darkblue;
            color: white;
            font-size: 3vw;
            padding-left: .75vw;
            text-align: left; 
            }
        .text11 {
            margin-left: 25%;
            width: 75%;
            background-color: darkblue;
            color: white;
            font-size: 3vw;
            padding-left: .75vw;
            text-align: left; 
        }
    }

    /* Medium devices (landscape tablets, 992px and up) */
    @media only screen and (min-width: 992px) {

    .c-twocol {
        column-width: 48vw;
    }
            .text1 {
            width: 25%;
            float: left;
            background-color: darkblue;
            color: white;
            font-size: 1.5vw;
            padding-left: .75vw;
            text-align: left; 
        }

        .text11 {
            margin-left: 25%;
            width: 75%;
            background-color: darkblue;
            color: white;
            font-size: 1.5vw;
            padding-left: .75vw;
            text-align: left; 
        }
    }

    /* Medium devices (landscape tablets, 1200px and up) */
    @media only screen and (min-width: 1200px) {

    .c-twocol {
        column-width: 48vw;
    }
    
        .text1 {
            width: 25%;
            float: left;
            background-color: darkblue;
            color: white;
            font-size: 1.5vw;
            padding-left: .75vw;
            text-align: left; 
        }

        .text11 {
            margin-left: 25%;
            width: 75%;
            background-color: darkblue;
            color: white;
            font-size: 1.5vw;
            padding-left: .75vw;
            text-align: left; 
        }
    }

/**********  END .C-TWOCOL **********/

/**********  .C-MAIN  **********/
.c-main {
    /* Extra small devices (phones, 600px and down)*/
    @media only screen and (max-width: 600px) {
        column-width: 100vw;
        }

    /* Small devices (phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        column-width: 100vw;
        }

    /* Small devices (phones, 768px and up) */
    @media only screen and (min-width: 768px) {
        column-width: 100vw;
        }

    /* Medium devices (landscape tablets, 992px and up) */
    @media only screen and (min-width: 992px) {
        column-width: 50vw;
        }

    /* Medium devices (landscape tablets, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        column-width: 50vw;
        }
    
    gap: 0;
    text-align: center;
}

.post2{
    margin-top: 0;
    position: relative;
    break-inside: auto;
 
    img {
        width: 66%;
        display: block;      
        margin: 5px auto;
    }
}
/**********  END .C-MAIN  **********/

/*.C-MULTICOL == NEW VERSION */
.c-multicol {
    gap: 0;
    
    .post1h {
        position: relative;
        border-color: transparent;
        border-style: solid;
        border-width: 1px;
        break-inside: avoid;
        margin-bottom: -11%;
    }
      
    .image {
        opacity: 1;
        display: block;
        transition: .5s ease;
        backface-visibility: hidden;
    }
    
    .middle3 {
        transition: .5s ease;
        opacity: 0;
        position: relative;
        transform: translate(-0%, -100%);
        -ms-transform: translate(-0%, -100%);
    }
    
    .post1h:hover .image {
        opacity: 0.3;
    }
      
    .post1h:hover .middle3 {
        opacity: 0.7;
    }
    
    /* Extra small devices (phones, 600px and down)*/
    @media only screen and (max-width: 600px) {
        column-width: 49vw;
           
        .text {
            background-color: gainsboro;
            color: black;
            font-size: 18px;
            text-align: center;
            text-decoration: none;  
        }
        
        .text3 {
            background-color: gray;
            color: white;
            font-size: 10px;
            text-align: center;
            text-decoration: none;  
        }            
    }

    /* Small devices (portrait tablets and large phones, 600px and up)*/
    @media only screen and (min-width: 600px) {
        column-width: 49vw;
         
        .text {
            background-color: gainsboro;
            color: black;
            font-size: 28px;
            text-align: center;
            text-decoration: none;  
        }
        
        .text3 {
            background-color: gray;
            color: white;
            font-size: 18px;
            text-align: center;
            text-decoration: none;  
        }            
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        column-width: 33vw;
    
        .text {
            background-color: gainsboro;
            color: black;
            font-size: 20px;
            text-align: center; 
            text-decoration: none; 
        }
        
          .text3 {
            background-color: gray;
            color: white;
            font-size: 12px;
            text-align: center;
            text-decoration: none;  
        }            
    }

    /* Large devices (laptops/desktops, 992px and up)*/
    @media screen and (min-width: 992px) {
        column-width: 24vw;
         
        .text {
            background-color: gainsboro;
            color: black;
            font-size: 20px;
            text-align: center;
            text-decoration: none;  
        }
        
          .text3 {
            background-color: gray;
            color: white;
            font-size: 12px;
            text-align: center;
            text-decoration: none;  
        }            
    }

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        column-width: 24vw;

        .text {
            background-color: gainsboro;
            color: black;
            font-size: 28px;
            text-align: center;  
            text-decoration: none;
        }
            
        .text3 {
            background-color: gray;
            color: white;
            font-size: 20px;
            text-align: center;
            text-decoration: none;  
        }            
    }
}  
/**********  END .C-MULTICOL  **********/

/*.C-MULTICOL1 == NEW VERSION */
.c-multicol1 {
    gap: 0;

    .post1h {
        position: relative;
        border-color: transparent;
        border-style: solid;
        border-width: 1px;
        break-inside: avoid;
    }
              
    .image {
        opacity: 1;
        display: block;
        transition: .5s ease;
        backface-visibility: hidden;
    }
            
    .middle4 {
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 1%;
        left: 50%;
        transform: translate(-50%, -0%);
    }
           
    .post1h:hover .image {
        opacity: 0.3;
    }
              
    .post1h:hover .middle4 {
        opacity: 0.7;
    }
             
    /* Extra small devices (phones, 600px and down)*/
    @media only screen and (max-width: 600px) {
        column-width: 48vw;
    
        .text2 {
        background-color: gainsboro;
        color: black;
        font-size: 24px;
        text-align: center;  
        text-decoration: none;
        }
            
        .text21 {
            background-color: gray;
            color: white;
            font-size: 16px;
            text-align: center;
            text-decoration: none;  
        }            
    }
     
    /* Small devices (phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        column-width: 48vw;
        
        .text2 {
            background-color: gainsboro;
            color: black;
            font-size: 24px;
            text-align: center;  
            text-decoration: none;
        }
            
        .text21 {
            background-color: gray;
            color: white;
            font-size: 16px;
            text-align: center;
            text-decoration: none;  
        }            
    }
        
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        column-width: 48vw;
    
        .text2 {
            background-color: gainsboro;
            color: black;
            font-size: 24px;
            text-align: center;  
            text-decoration: none;
        }
            
        .text21 {
            background-color: gray;
            color: white;
            font-size: 16px;
            text-align: center;
            text-decoration: none;  
        }            
    }

    /* Large devices (laptops/desktops, 992px and up)*/
    @media screen and (min-width: 992px) {
        column-width: 33vw;

        .text2 {
            background-color: gainsboro;
            color: black;
            font-size: 24px;
            text-align: center;  
            text-decoration: none;
        }
            
        .text21 {
            background-color: gray;
            color: white;
            font-size: 16px;
            text-align: center;
            text-decoration: none;  
        }            
    }
 
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        column-width: 33vw;
    
        .text2 {
            background-color: gainsboro;
            color: black;
            font-size: 24px;
            text-align: center;  
            text-decoration: none;
        }
            
        .text21 {
            background-color: gray;
            color: white;
            font-size: 16px;
            text-align: center;
            text-decoration: none;  
        }            
    }
}  
/***************************** END *****************************/