/* ------------------------------------------------------------
	Reset Styles (from meyerweb.com)
------------------------------------------------------------ */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

hr {
    border: 0 rgb(211, 211, 211) solid;
    border-top-width: 1px;
    clear: both;
    height: 0;
    margin: 10px 0px 20px 0px;
    box-shadow: 0 0 1px rgb(239, 239, 237);
}

/* Lists */
ul,
ol,
dd {
    margin: 0 0 28px 30px;
}

/* Unordered */
ul li {
    background-color: transparent;
    list-style: disc;
}

h1,
h2,
h3,
h4 {
    line-height: 1.3em;
    margin-bottom: 28px;
    letter-spacing: 0.04em;
    font-weight: normal;
}

p {
    margin: 0 0 28px 0;
}

h1 {
    font-size: 160%;
}

h2 {
    font-size: 140%;
}

h3 {
    font-size: 120%;
}

h4 {
    font-size: 100%;
}

/* ------------------------------------------------------------
	NUMBER OF COLUMNS: Adjust #primaryNav li to set the number
	of columns required in your site map. The default is 
	4 columns (25%). 5 columns would be 20%, 6 columns would 
	be 16.6%, etc. 
------------------------------------------------------------ */
#primaryNav li {
    width: 25%;
}

#primaryNav li ul li {
    width: 100% !important;
}

#primaryNav.col1 li {
    width: 99.9%;
}

#primaryNav.col2 li {
    width: 50.0%;
}

#primaryNav.col3 li {
    width: 33.3%;
}

#primaryNav.col4 li {
    width: 25.0%;
}

#primaryNav.col5 li {
    width: 20.0%;
}

#primaryNav.col6 li {
    width: 16.6%;
}

#primaryNav.col7 li {
    width: 14.2%;
}

#primaryNav.col8 li {
    width: 12.5%;
}

#primaryNav.col9 li {
    width: 11.1%;
}

#primaryNav.col10 li {
    width: 10.0%;
}

/* ------------------------------------------------------------
	General Styles
------------------------------------------------------------ */
body {
    background: rgb(247, 242, 233);
    color: #3e3e3e;
    padding: clamp(15px, 4vw, 40px);
    font-family: Gotham, Helvetica, Arial, sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-size: 90%;
    line-height: 1.4;
    padding: 40px;
}

span {
    color: rgb(183, 53, 53);
}

.sitemap {
    margin: 0 0 40px 0;
    float: left;
    width: 100%;
}

a {
    text-decoration: none;
}

ol,
ul {
    list-style: none;
}

/* ------------------------------------------------------------
	Site Map Styles
------------------------------------------------------------ */
/* --------	Top Level --------- */
#primaryNav {
    margin: 0;
    float: left;
    width: 100%;
}

#primaryNav #home {
    display: block;
    float: none;
    background: transparent url('images/L1-left.png') center bottom no-repeat;
    position: relative;
    z-index: 2;
    padding: 0 0 30px 0;
}

#primaryNav li {
    float: left;
    background: url('images/L1-center.png') center top no-repeat;
    padding: 30px 0;
    margin-top: -30px;
    list-style: none;
}

#primaryNav li a {
    margin: 0 20px 0 0;
    padding: 30px 5px;
    display: block;
    font-size: 85%;
    font-weight: bold;
    text-align: center;
    color: #3e3e3e;
    background: rgb(216, 214, 203);
    border-radius: 3px;
    text-transform: uppercase;
    transition: all .1s ease-in-out;
    /* Adds a hyphen where the word breaks */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

#primaryNav li a em {
    text-transform: none;
    color: #5c5c5c;
    display: block;
    margin-top: 5px;
    line-height: normal;
}

#primaryNav li a:hover {
    background-color: rgb(255, 255, 255);
    transform: scale(1.1);
}

#primaryNav li:last-child {
    background: url('images/L1-right.png') center top no-repeat;
}

a:link:before,
a:visited:before {
    /*    content: " "attr(href)" ";*/
    display: block;
    text-transform: lowercase;
    font-size: 10px;
    margin-bottom: 0px;
    word-wrap: break-word;
}

#primaryNav li a:link:before,
#primaryNav li a:visited:before {
    color: rgb(62, 62, 62);
}

/* --------	Second Level --------- */
#primaryNav li li {
    width: 100%;
    clear: left;
    margin-top: 0;
    padding: 10px 0 0 0;
    background: url('images/vertical-line.png') center bottom repeat-y;
}

#primaryNav li li a {
    background-color: #dae5e6;
    border-radius: 3px;
}

#primaryNav li li a:hover {
    background-color: #ffffff;
}

#primaryNav li li:first-child {
    padding-top: 30px;
}

#primaryNav li li:last-child {
    background: url('images/vertical-line.png') center bottom repeat-y;
}

#primaryNav li li a:link:before,
#primaryNav li li a:visited:before {
    color: rgb(62, 62, 62);
}

/* --------	Third Level --------- */
#primaryNav li li ul {
    margin: 10px 0 0 0;
    width: 100%;
    float: right;
    padding: 0;
    background: transparent center top no-repeat;
}

#primaryNav li li li {
    background: left center no-repeat;
    padding: 5px 0;
}

#primaryNav li li li a {
    background-color: rgb(250, 196, 156);
    font-size: 12px;
    padding: 20px 0;
    width: 75%;
    float: right;
    border-radius: 3px;
}

#primaryNav li li li a:hover {
    background-color: rgb(255, 255, 255);
}

#primaryNav li li li:first-child {
    padding: 15px 0 5px 0;
    background: left center no-repeat;
}

#primaryNav li li li:last-child {
    background: left center no-repeat;
}

#primaryNav li li li a:link:before,
#primaryNav li li li a:visited:before {
    color: rgb(62, 62, 62);
    font-size: 9px;
}

/* --------	Forth Level --------- */
#primaryNav li li li ul {
    margin: 0;
    width: 90%;
    float: right;
    padding: 9px 0 10px 0;
    background: transparent center top no-repeat;
}

#primaryNav li li li li {
    background: left center no-repeat;
    padding: 5px 0;
}

#primaryNav li li li li a {
    background-color: rgb(244, 194, 204);
    font-size: 11px;
    padding: 20px 0px;
    width: 80%;
    float: right;
    border-radius: 3px;
}

#primaryNav li li li li a:hover {
    background-color: rgb(212, 195, 195);
}

#primaryNav li li li li:first-child {
    padding: 15px 0 5px 0;
    background: left center no-repeat;
}

#primaryNav li li li li:last-child {
    background: left center no-repeat;
}

#primaryNav li li li li a:link:before,
#primaryNav li li li li a:visited:before {
    color: rgb(62, 62, 62);
    font-size: 9px;
}

/* ------------------------------------------------------------
	Utility Navigation
------------------------------------------------------------ */
#utilityNav {
    float: right;
    max-width: 50%;
    margin-right: 10px;
    margin-bottom: 0px;
}

#utilityNav li {
    float: left;
    margin-top: 0px;
    margin-bottom: 30px;
    list-style: none;
}

#utilityNav li a {
    margin: 0 10px 0 0;
    padding: 20px 10px;
    display: block;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #363636;
    border: 1px solid rgb(227, 227, 227);
    background: rgba(255, 255, 255, 0.29);
    border-radius: 3px;
}

#utilityNav li a:hover {
    background-color: rgb(255, 255, 255);
}

#utilityNav li a:link:before,
#utilityNav li a:visited:before {
    color: rgb(54, 54, 54);
    font-size: 9px;
    margin-bottom: 3px;
}

#utilityNav h3 {
    text-align: right;
    padding: 0 22px;
    font-size: 105%;
}

div.notes {
    clear: both;
    max-width: 500px;
    background-color: rgba(255, 255, 255, 0.29);
    padding: 30px 20px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    margin-bottom: 10px;
}

/* ============================================================
   RESPONSIVE
============================================================ */
/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
    #primaryNav li {
        width: 33.3% !important;
    }

    #primaryNav li a {
        padding: 20px 5px;
        font-size: 80%;
    }

    #utilityNav {
        max-width: 100%;
        float: left;
    }
}

/* ---------- Small tablet / large phone ---------- */
@media (max-width: 700px) {
    #primaryNav li {
        width: 50% !important;
        padding: 20px 0;
    }

    #primaryNav li a {
        padding: 18px 5px;
        font-size: 75%;
    }

    #primaryNav li a:hover {
        transform: none;
    }

    #utilityNav li {
        width: 50%;
    }
}