* {
    margin: 0px;
    padding: 0px;

}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px;
    height: 100%;
    background-color: #2a2a2a;

}



#background {
    background-color: #2a2a2a;
    height: 100%;
    z-index: 0;
    min-width: 380px;
}

#Desktop {
    background-color:#ff0000;
    z-index: 0;
    

} 

#page_content{
    position: relative;
    display: block;
    border: #fff;
    border-width: 1px;
    left: 0px;
    z-index: 0;
    background-color: #FFFFFF;

}



#logocontainer {
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    z-index: 3;
}

#logo {

    display: block; 
    margin-left: auto; 
    margin-right: auto;
    width: 225px; 
    top: 16px;
    left: 16px;
    position:absolute;
    z-index: 3;
}

#nav_mask{
    position: absolute;
    display: inline;
    background-image: url("images/navbg.png");
    top: 0px;
    width: 100%;
    Height: 90px;
    z-index: 1;
}

#nav {
    display: none;
}
#login {
    display: none;
}



        #footercontainer {
            display: flex;
            background-color: #ffffff;
            padding-bottom: 32px;
        }
        
                #footercontent {
                    margin: 0px;
                    height: 250px;
                }
        
                        #footerlogocontainer {
                            position: absolute;
                            padding: 32px;
                            z-index: 2;
                        
        
                        }
                        #footerlogo {
                            width: 200px;
                        }
        
                        #footerclientlogin {
                            position: relative;
                            display: flex;
                            top: 215px;
                            padding: 0px;
                            width: 100%;
                            z-index: 2;
                            
        
                        }
                        #footerclientlogintext{
                            flex-shrink: 0;
                            z-index: 2;
                            margin-left: 8px;
                            text-align: right;
                            vertical-align: middle;
                            margin: 0px;
                            margin-top: 3px;
                            padding-bottom: 6px;
                            margin-right: 16px;
                            font-family: Verdana, Geneva, Tahoma, sans-serif;
                            font-size: 11px;
                            font-weight: 600;
                            color: #88B9FF;
                            cursor: pointer;
                        }

                        #footerclientlogintext:hover {
                            border-bottom-color: #e05708;
                            border-bottom-style: solid;
                            padding-bottom: 4px;
                            border-bottom-width: 2px;
                            
                        }

                                #footertest{
                                    flex-grow: 1;
                                    z-index: 2;
                                }
                                #footerloginlock{
                                    width: 17px;
                                    height: 17px;
                                    margin-right: 8px;
                                    z-index: 2;
                                }
        
                #footerwave {
                    position: relative;
                    z-index: 1;
                    width: 100%;
        
                }
        
                
                #socialscontainer{
                    display: flex;
                    position: absolute;
                    z-index: 3;
                    padding-top: 12px;
                    width: 100%;
                }
                    #socialsspacer{
                        display: flex;
                        flex-grow: 1;
                        z-index: 3;
                    }
                    #linkedin {
                        width: 22px;
                        height: 22px;
                        margin-right: 8px;
                    }
                    #facebook {
                        width: 22px;
                        height: 22px;
                        margin-right: 8px;
                    }
                    #instagram {
                        width: 22px;
                        height: 22px;
                        margin-right: 8px;
                    }
                    #twitter {
                        width: 22px;
                        height: 22px    ;
                        margin-right: 16px;
                    }
        
                   #contactinfo {
                    position: absolute;
                    padding-top: 120px;
                    padding-left: 16px;
                    z-index: 3;
                    color: #999999;
                    font-size: 16px;
                    font-family:Arial, Helvetica, sans-serif;
                   } 
        
                   #footernav {
                    position: absolute;
                    display: flex;
                     z-index: 4;
                     width: 100%;
                     padding-top: 85px;
                    }
                    
                    #footernavspacer {
                        flex-grow: 1;
                    }
        
                    #footeritem {
                        margin-right: 16px;
                        font-family: "Avenir Next";
                        font-weight: 600;
                        color: #1C75BC;
                        cursor: pointer;
                    
                    }
        
                    #footeritemlast {
                        font-family: "Avenir Next";
                        font-weight: 600;
                        margin-right: 16px;
                        color: #1C75BC;
                        cursor: pointer;
                    }
        
                    #footeritem:hover {
                        border-bottom: 2px solid #e05708;
                    }

                    #footeritemlast:hover {
                        border-bottom: 2px solid #e05708;
                    }



                    #copywritecontainer {
                        position: relative;
                        display: flex;
                        width: 100%;
                        top: 160px;
                        z-index: 4;
                        justify-content: center;
                        align-items: center;
                    }
                    
                    #copywritespacer {
                        width: 8px;
                        height: 16px;
                    }
        
                    #copywrite {
                        display: block;
                        position: absolute;
                        top: 65px;
                        flex-grow: 1;
                        color: #999999;
                        font-size: 12px;
                        right: 16px;
                        font-family:Arial, Helvetica, sans-serif;
                        
                        
                    }


                    
                
                    











/* off-screen-menu */
.off-screen-menu {
    background-color:rgb(0, 0, 0, .85);
    height: 100vh;
    width: 100%;
    max-width: 450px;
    position: fixed;
    top: 0;
    right: -450px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content:start;
    text-align: left;
    font-size: 3rem;
    transition: .3s ease;
    padding-top: 16px;
    z-index: 12;
}
.off-screen-menu.active {
    right: 0;
}

#mobileNavItem {
    position: relative;
    opacity: 1.0;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;

}

#menulogo {
    padding-left:16px;
}
#contactmenu {
    margin-top: 32px;
    border-radius: 16px;
    border-width: 2px;
    border-color: #cccccc;
    border-style: solid;
    font-size: 16px;
    font-weight: 600;
    font-family: "Avenir Next";
    color: #cccccc;
    width: 175px;
    text-align: center;
    vertical-align: middle;
    padding-top: 3px;
    margin-left: 100px;

}



/* nav */
nav {
    position: absolute;
    display: flex;
    width: 100%;
    min-width: 325px;
    z-index: 13;
    
}



/* ham menu */
.ham-menu {
    height: 30px;
    width: 30px;
    margin-left: auto;
    margin-right: 24px;
    margin-top: 32px;
    position: relative;
    z-index: 12;
    border-color: #999;
    background-color: #000000;
    border-width: 2px;
    border-style: solid;
    border-radius: 8px;
    cursor: pointer;
}
.ham-menu span {
    height: 2px;
    width: 75%;
    background-color: #FFF;
    border-radius: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
    z-index: 12;
}
.ham-menu span:nth-child(1) {
    top: 8px;
}
.ham-menu span:nth-child(3) {
    top: 22px;
}
.ham-menu.active span {
    background-color: white;
}
.ham-menu.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.ham-menu.active span:nth-child(2) {
    opacity: 0;
}
.ham-menu.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}















@media screen and (min-width: 480px) {


nav {
    display: none;
}

.off-screen-menu {
    display: none;
}

.ham-menu {
    display: none;
}


    #logo {

        display: block; 
        margin-left: auto; 
        margin-right: auto;
        width: auto; 
        top: 32px;
        left: 32px;
        position:absolute;
        z-index: 3;
    }
    
#nav_mask{
    position: absolute;
    display: inline;
    /* background-color: rgb(255, 0, 0); */
    background-image: url("images/navbg.png");
    top: 0px;
    width: 768px;
    Height: 150px;
    z-index: 1;
}
  


#Desktop {
    min-width: 768px;
    background-color: rgb(0, 177, 21);
} 

#pagetitle {
    margin-top: 0px;
    margin-bottom: 16px;
    width: 100%;
    color: #0e4c7e;
    font-family: "Avenir Next";
    font-weight: 100;
    font-size: 40px;
}



#footercontainer {
    display: flex;
    background-color: #ffffff;
    padding-bottom: 32px;
}

        #footercontent {
            margin: 0px;
            height: 250px;
        }

                #footerlogocontainer {
                    position: absolute;
                    padding-left: 32px;
                    padding-top: 32px;
                    padding-bottom: 32px;
                    padding-right: 32px;
                    z-index: 2;

                }

                #footerlogo {
                    width: 348px;
                }

                #footerclientlogin {
                    display: flex;
                    position:relative;
                    top: 220px;
                    padding: 0px;
                    width: 100%;
                    z-index: 2;

                }
                #footerclientlogintext{
                    flex-shrink: 0;
                    z-index: 2;
                    text-align: right;
                    vertical-align: middle;
                    margin-top: 3px;
                    margin-right: 38px;
                    font-family: Verdana, Geneva, Tahoma, sans-serif;
                    font-size: 11px;
                    font-weight: 600;
                    color: #88B9FF;
                }
                        #footertest{
                            flex-grow: 1;
                            z-index: 2;
                        }
                        #footerloginlock{
                            width: 17px;
                            height: 17px;
                            z-index: 2;
                        }

        #footerwave {
            position: relative;
            z-index: 1;

        }

        
        #socialscontainer{
            display: flex;
            position: relative;
            z-index: 3;
            top: 24px;;
            width: 100%;
        }
            #socialsspacer{
                display: flex;
                flex-grow: 1;
                z-index: 3;
            }
            #linkedin {
                display: flex;
                width: 22px;
                height: 22px;
                margin-right: 8px;
            }
            #facebook {
                display: flex;
                width: 22px;
                height: 22px;
                margin-right: 8px;
            }
            #instagram {
                display: flex;
                width: 22px;
                height: 22px;
                margin-right: 8px;
            }
            #twitter {
                display: flex;
                width: 22px;
                height: 22px;
                margin-right: 38px;
            }

           #contactinfo {
            position: absolute;
            padding-top: 120px;
            padding-left: 60px;
            z-index: 3;
            color: #999999;
            font-size: 16px;
            font-family:Arial, Helvetica, sans-serif;
           } 

           #footernav {
            position: absolute;
            display: flex;
             z-index: 4;
             width: 100%;
             padding-top: 45px;
            }
            
            #footernavspacer {
                flex-grow: 1;
            }

            #footeritem {
                padding-right: 0px;
                font-family: "Avenir Next";
                font-weight: 600;
                margin-right: 16px;
                color: #1C75BC;
            
            }

            #footeritemlast {
                font-family: "Avenir Next";
                font-weight: 600;
                padding-right: 0px;
                margin-right: 38px;
                color: #1C75BC;
            }

            #footeritem:hover {
                border-bottom: 2px solid #e05708;
                cursor: pointer;
            }
            
            #footeritemlast:hover {
                border-bottom: 2px solid #e05708;
                cursor: pointer;
            }

            
            #copywritecontainer {
                position: relative;
                display: flex;
                width: 100%;
                top: 160px;
                z-index: 4;
            }
            
            #copywritespacer {
                width: 38px;
                height: 8px;
            }

            #copywrite {
                position: relative;
                display: flex;
                top: 35px;
                right: 0px;
                flex-grow: 1;
                color: #999999;
                font-size: 12px;
                justify-content: end;
                margin-left: auto;
                font-family:Arial, Helvetica, sans-serif;
            }
           

    #nav {
        position: absolute;
        top: 75px;
         width: 100%;
         display: inline-block;
         min-width: 768px;
         z-index: 4;
        }
        
        #item_one {
            float: right;
            padding-bottom: 8px;
            margin-top: 16px;
            margin-left: 16px;
            margin-bottom: 0px;
            margin-right: 38px;
            font-family: "Avenir Next";
            font-weight: 600;
            color: #ffffff;
            cursor: pointer;
        }
        
        #item {
            float: right;
            padding-bottom: 8px;
            margin-top: 16px;
            margin-left: 16px;
            margin-bottom: 0px;
            margin-right: 16px;
            font-family: "Avenir Next";
            font-weight: 600;
            color: #ffffff;
            cursor: pointer;
        }
        #item:hover {
            border-bottom: 2px solid #e05708;
          }

          #item_one:hover {
            border-bottom: 2px solid #e05708;
          }



    
    #login {
        position: relative;
        display: inline-block;
        opacity: 1;
        z-index: 5;
        width: 100%;
        min-width: 768px;
        margin-top: 16px;
        margin-right: 0px;
        padding-right: 0px;
        margin-left: auto;
        text-align: right;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 11px;
        font-weight: 600;  
        
    }
    #lockicon{
        position: relative;
        margin-left: auto;
        margin-right: 4px;
        top: 3px;
        display: inline-block;
    
    }
   #clientlogin{
        position: relative;
        margin-left: auto;
        margin-right: 38px;
        display: inline-block;
        color: #FFF;
        cursor: pointer;
        padding-bottom: 10px;
        
    
   }
   

#clientlogin:hover {
    border-bottom-color: #e05708;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-bottom: 8px;
}

   

}











@media screen and (min-width: 768px) {
    
    #heroimagecontainer {
        position: absolute;
        width: 100%;


    }
    #nav_mask{
        width: 100%;
    }
    
    #nav_grad{
        width: 100%;
    }
    


}


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

    
}



@media screen and (min-width: 1024px) {

    


    
}








@media screen and (min-width: 1200px) {

#page_content{
    display: block;
    position: absolute;
    display: block;
    margin-bottom: 0px;
    width: 100%;
    z-index: 0;
    left: 0px;
}


#logocontainer {
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
}

    #Desktop {
        display: block;
        position: relative;
        background-color: #ffffff; 
        width: 1196px;
        height: 2200px;
        margin-left: auto; 
        margin-right: auto;
        border-right-width: 2px; 
        border-left-width: 2px; 
        border-style: solid; 
        border-color: #000000; 
        border-top-width: 0px; 
        border-bottom-width: 0px; 
    }

    #heroimagecontainer {
        position: absolute;
        width: 100%;
    }
    

    #background {
        display: block;
        background-color: #2a2a2a;
        height: 100vh;

    }

    
}