body    {
    font-size: 100%;
}
header  {
    background-color: #8fabe7;
    height: 14%;
    width: 99%;
    position: absolute;
    top: 0;
    margin-left: 0;
}
.nav    {
    list-style: none;
    position: relative;
    left: -1%;
}
.nav li {
    display: inline-block;
    position: relative;
    top: 13%;
    background-color: #e1ecff;
    padding: .5%;
    width: 12%;
    border-radius: 5%/15%;
    font-size: 2vw;
}
li a    {
    color: #0c1486;
    width: 13%;
    text-decoration: none;
}
.nav li :hover  {
    color: #5056a0;
}
p   {
    color: black;
}
em  {
    font-style: italic;
}
main    {
    position: absolute;
    top: 14%;
    width: 99%;
    height: 100%
}
#span-photo-div {
    width: 100%;
    display: block;
    margin-bottom: 0.5%;
}
#photo-div-foreground   {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 15%;
    height: auto;
}
#photo-div-text {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2%;
    height: 61%;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom-right-radius: 10% 20%;
    text-align: center;
}
#photo-div-text h2  {
    font-size: 3vw;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #0c1486;
}
#photo-div-text h3  {
    font-size: 1.75vw;
}
#photo-div-text h5  {
    color: #0c1486;
    font-size: 1.25vw;
}
#photo-div-background   {
    max-width: 100%;
    height: auto;
    opacity: 80%;
}
footer  {
    width: 99%;
    height: 9;
    text-align: center;
    background-color: lightgray;
    position: absolute;
    bottom: 0;
    margin-left: 0;
}
footer div  {
    padding: 0.75%;
    width: 30%;
    position: relative;
    left: 35%;
    text-align: center;
    font-size: 0.85vmax;
}
ol li a {
    color: navy;
}
#information-links li a {
    font-size: 1.5vw;
    text-decoration: none;
}
#resources li a  {
    font-size: 1.5vw;
    width: 30%;
    text-decoration: none;
}
#forms  {
    list-style: none;
}
#forms li a  {
    font-size: 1.5vw;
    width: 30%;
    text-decoration: none;
}
#information-links li   {
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #babde5;
}
#resources li  {
    padding: 5px;
    margin-bottom: 20px;
    display: inline-block;
    width: 24%;
    margin-right: 100px;
    border-radius: 10px;
    background-color: #babde5;
}
#forms li   {
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #babde5;
    width: 24%;
}
#information-links li :hover    {
    color: #5376b6;
}
#resources li :hover   {
    color:#5376b6
}

#forms li :hover   {
    color:#5376b6
}
#directions-page-setup div  {
    display: inline-block;
}
#map    {
    width: 75%;
}
#map img    {
    width: 75%;
    height: auto;
}
.too-long   {
    max-width: 100%;
}
.test ol, .test p   {
    font-size: 2vw;
}
.in-test-text   {
    color: #0d1257;
    text-decoration: underline;
}
.under-construction {
    position: absolute;
    bottom: 100px;
}
#text-directions    {
    position: absolute;
    right: 2.5%;
    top: 20%;
    font-size: 1.25vw;
    max-width: 37%;
}
.margin-left    {
    margin-left: 5px;
}
.direction-header   {
    position: absolute;
    top: 7%;
    right: 50px;
    width: 37%;
    text-align: center;
}
h2.direction-header {
    top: 14%;
    font-size: 1.25vw;
}
#photo-div-text {
    color: #0c1486;
    max-width: 50%;
}
#carseli p  {
    width: 76.25%;
    text-align: justify;
    font-size: 1.3vw;
    margin-left: 5px;
}
#carseli h1 {
    margin-left: 5px;
}
#carseli img    {
    width: 21%;
    height: auto;
    position: absolute;
    right: 0;
    top: 10.5%;
}
.under-construction {
    position: fixed;
    bottom: 8%;
}
#contact-us {
    background-color: #cecece;
    border-radius: 5%/10%;
    width: 25%;
    text-align: center;
    position: fixed;
    right: 40%;
    top: 25%;
}
#contact-us h1  {
    font-size: 2vw;
    padding: 0.5%
}
#contact-us h2  {
    font-size: 1.5vw;
    padding: 0.5%;
}
main h1 {
    font-size: 1.65vw;
}
#from-wherever-list-directions li   {
    font-size: 1.3vw;
}
@media (max-width: 1000px) {
    .nav    {
        left: -8%;
    }
    .nav li {
        top: 5%;
        width: 12.445%;
    }
    #photo-div-text {
        height: 90%
    }
    #photo-div-text h2  {
        font-size: 3.5vw;
    }
    #photo-div-text h3  {
        font-size: 2.5vw;
    }
    #photo-div-text h5  {
        font-size: 1.75vw;
    }
    .separate   {
        height: 10%;
    }
    footer  {
        position: fixed;
        bottom: 0;
        width: 99%;
        height: 9;
        text-align: center;
        background-color: lightgray;
        margin-left: 0;
    }
    footer div  {
        width: 90%;
        position: relative;
        left: 5%;
        text-align: center;
        font-size: 3vw;
    }
    #contact-us {
        width: 60%;
        right: 22%;
    }
    #contact-us h1  {
        font-size: 4vw;
    }
    #contact-us h2  {
        font-size: 3vw;
    }
    #carseli p  {
        width: 76.25%;
        text-align: justify;
        font-size: 1.65vw;
        margin-left: 5px;
    }
    #information-links li a {
        font-size: 3vw;
        text-decoration: none;
    }
    #information-links li   {
        width: 60%;
    }
    main h1 {
        font-size: 3.5vw;
    }
    #resources li a  {
        font-size: 1.7vw;
        width: 30%;
    }
    #resources li  {
        padding: .2%;
        margin-bottom: 1%;
        width: 30%;
        margin-right: 1%;
        height: 1%;
    }
    #forms li a  {
        font-size: 3vw;
    }
    .direction-header   {
        top: 10%;
        left: 5%;
        width: 50%;
    }
    h2.direction-header {
        top: 26%;
        font-size: 2vw;
    }
    #map    {
        position: relative;
        top: 16vh;
    }
    #text-directions    {
        position: absolute;
        right: 2.5%;
        top: 20%;
        font-size: 1.7vw;
        max-width: 45%;
    }
    #from-wherever-list-directions li   {
        font-size: 1.7vw;
    }
    @media (min-width: 450px)    {
        .nav    {
            left: -4%;
        }
        .nav li {
            width: 10%;
            border-radius: 5%/15%;
            font-size: 2vw;
        }
        #contact-us h1  {
            font-size: 2.5vw;
        }
        #contact-us h2  {
            font-size: 1.75vw;
        }
    }
}