/* 300px to 822px */
@font-face{
    font-family: montserrat; 
    src:url("../font/Montserrat-Regular.otf"); 
    /* need to change per server details */
  	font-display: swap;
}
html{
    font-family:montserrat, sans-serif; 
    overflow-x: hidden;
    overflow-y:scroll;

    scroll-behavior: smooth;
    
}    

body{
   font-size:16px;
   
    background-color:rgb(245, 245, 245);  

    margin:0;
}
.reCaptcha{
    grid-area: 4/1/4/span 2;
    color:#fff;
    padding-left:25px;
     font-size:0.6rem;
    font-style:italic;
}
.grecaptcha-badge { visibility: hidden; }

/* ----------------------------------------------NAV BAR------------------------------------------------------------------- */

#drop{display:none;}
.phone{display:none;}

.nav{
    display: grid;
    grid-template-columns: 4fr 5fr 0.5fr;
    height:54px;
   
    padding-top: 3px;
    padding-bottom:3px;
    
    background-image:linear-gradient(rgb(202, 202, 202),rgb(235, 235, 235));
    
}
.nav-scrolled{
    position:sticky;
    top:0;
    
    z-index:2;

    box-shadow:0 3px 20px rgba(0,0,0,0.3);
    background-image:linear-gradient(rgb(202, 202, 202),rgb(235, 235, 235));
    animation:nav linear 250ms;
   
}
@keyframes nav{
    0%{opacity:0;};
    100%{opacity:1;};
}
.logo{
    display: grid;
    align-content:center;
    width:150px;
}
.logo img{
    width:38%;
    max-width:54px;
    padding-left:10px;
    vertical-align: middle;
}
.logo a{
   color:rgb(95, 95, 95);   
    text-decoration: none; 
    font-style:italic;
    font-weight:bold;
}
.nav-btn{
    align-items: center; 
    background-color:rgba(0,0,0,0);
    color:rgb(95, 95, 95);   

    padding:10px;
    width:40px;
    cursor:pointer;
    border:0;
    border-radius:5px;  

    transition:all 250ms ease-in;
}

.nav-links a{
    text-decoration: none;
    color:#fff;
    padding:20px;
    transition:all 150ms ease-in;

}
.nav-links a:hover{
    background-color: rgba(255, 255, 255, 0.904);
    color:black;
    font-weight:600;
   

    transition:all 150ms ease-in;

}
.nav-links{  
    position:absolute;
     display:grid;
    grid-template-rows: auto;
    
    
    align-content:space-around;
    width:100%;
    padding:10px 0px;
    background:rgba(129, 15, 15,0.95); 
}
@keyframes navbar{
    0%{transform:translate(100%,-100%); opacity:0;};
    100%{transform:translate(0%, 0%); opacity:1;};
}
.collapsed{
  
    display: none;
     top:60px;
    z-index:2;
    box-shadow: 0px 9px 20px 0px rgba(0,0,0,0.3);

    animation:navbar linear 350ms;
    animation-direction: reverse;
    animation-fill-mode: reverse;

}
.expand{
    
    opacity:1;
    display: block;  
    top:60px;
    z-index:2;
    box-shadow: 0px 9px 20px 0px rgba(0,0,0,0.3);

    animation:navbar linear 350ms;
    animation-fill-mode: forwards;
}


.expand i{
    text-align:center;
    display: inline-block;
    
    width:30px; 
    padding-right:2vw;
    
    font-weight: bold;
}    
.expand a{
    display: block;
    
}
#close{
    
    display: block;
    margin-left:auto;
    margin-top:1.5vw;
    border:0;

    background: rgba(0,0,0,0);
    color:rgb(41, 41, 41);   
}
#close i{
    padding-left:10vw;
    font-size:6vw;
    color:rgb(41, 41, 41);   

}
.phone-mob{
    display: inline-block;        
    margin-top:auto;
    margin-bottom:auto;
    margin-left: auto;
    margin-right:20px;
   
}
.phone-mob i{
    margin-left:10px;
    float:right;
    font-size:1.5rem;
    color:rgb(0, 177, 0);
}
@media screen and (min-width: 600px){
    #close{
    
        display: block;
        margin-left:auto;
        margin-top:1.5vw;
        border:0;

        background: rgba(0,0,0,0);
        color:rgb(41, 41, 41);   

    }
    #close i{
        padding-left:10vw;
        font-size:3.5vw;
    } 
    .phone-mob{display:none;} 
    .phone{
    display: grid; 
    grid-template-columns:auto auto; 
    align-items:center;
    text-decoration:none; 
    color:rgb(95, 95, 95);      
    margin-top:auto;
    margin-bottom:auto;
    margin-left: auto;
    margin-right:20px; 
    } 
    .phone i{
    margin-left:10px;
    float:right;
    font-size:1.5rem;
    }
}