:root {
    --xl: 80px;
    --lg: 48px;
    --md: 38px;
    --sm: 20px;
    --xs: 10px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: var(--lg);
    padding-bottom: var(--lg);
    font-size: 16px;
}

footer p {
    margin-top: 30px;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    position: relative;
}

h1 {
    text-decoration: underline;
}

h1, h2 {
    margin-top: var(--md);
    margin-bottom: var(--lg);
}

h3, h4 {
    margin-top: var(--md);
    margin-bottom: var(--sm);
}

h5, h6 {
    margin-top: var(--sm);
    margin-bottom: var(--sm);
}

h1 {
    font-size: 3em;
    font-weight: 900;
}

h2 {
    font-weight: 900;
    font-size: 2.5em;
}

h3 {
    font-size: 2em;
    font-weight: 700;
}

h4 {
    font-size: 1.75em;
    font-weight: 700;
}

h5 {
    font-size: 1.50em;
    font-weight: 300;
}

h6 {
    font-size: 1.25em;
    font-weight: 300;
}

li {
    line-height: 1.5;
}

li, p {
    font-size: 1.25em;
}

.cursor-pointer:hover{
    cursor:pointer !important;
}

.super-script {
    position: relative;
    bottom: 10px;
}

.margin-top-sm {
    margin-top: var(--sm);
}

.margin-top-md {
    margin-top: var(--md);
}

.padded {
    padding: 0 7.2%;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: var(--md);
    padding-bottom: var(--md);
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.text-center {
    text-align: center;
}

.bold {
    font-weight: 700;
    margin-top: var(--sm);
}

.btn-blue {
    background-color: #31a4e7;
}


.site-nav {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.cta {
    display: flex;
    flex-direction: column;
    align-items:center;
}

    .cta img {
        max-height: 400px;
        max-width: 180px;
    }

.row {
    padding-bottom: var(--lg);
}

.nav-img {
    display: flex;
    align-items: center;
    float: right;
}

.upload-result, .upload-info {
    color: red;
    clear: both;
}


.error {
    border: 1px solid red;
}

.req-field-error {
    color: red;
}

#alert_content li {
    display: inline-block;
    font-size: 1em;
}

.contact_icon {
    display: inline-block;
    max-width: 16px;
    margin-right: 10px;
    position: relative;
    top: -2px;
}


.hover-title{
}
.hover-title:hover {
    color: #31a4e7;
    cursor:pointer;
}
.hover-title::after{
    content:'+';
}
.hover-title.opened::after {
    content: '-';
}

.normal-label {
    font-weight:400;
}
label{
    white-space:nowrap;
}

.d-flex {
    display:flex;
} 
.justify-content-center{
    justify-content:center; 
}
.align-items-center {
    align-items: center;
}
.align-items-start {
    align-items: start;
}
.flex-dir-column{
    flex-direction:column;
}
.position-relative{
    position:relative;
}

#img-slides {
    max-height: 600px;
    overflow: scroll;
}
#img-slides img {
    max-width:100%;
    height:auto;


}
address{
    font-size:1.5em;
}
p.contact-info {
    display: inline-block;
    white-space:nowrap;
}
.contact-info + address {
    font-size: 1.5em;
    padding-left: 8px;
    position:relative;
    bottom:5px;
    
    display: inline-block;
}

.foot-nav {
    font-size:14px;
}