/*IM 2.00, Site Lite CSS !!!TEMPLATE!!!*/
/*general use CSS, no not modify--------------------------------------------------------------------------------------*/
.font-xxl {font-size:xx-large;}
.font-xl {font-size:x-large;}
.font-l {font-size:large;}
.font-m {font-size:medium;}
.font-s {font-size:small;}
.font-xs {font-size:x-small;}
.font-xxs {font-size:xx-small;}

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

.indent {text-indent:15px;}
.exdent {text-indent:-15px;}
.shift-r {position:relative; left:15px;}
.super {vertical-align:baseline; position:relative; top:-0.4em; font-size:smaller;}

.underline {text-decoration:underline;}
.bold {font-weight:bold;}
.unbold {font-weight:normal;}
.ital {font-style:italic;}

.border-0 {border-width:0;}
.border-1 {border:1px solid #000000;}

.float-left {float:left;}
.float-right {float:right;}
.clear-left {clear:left;}
.clear-right {clear:right;}
.clear-both {clear:both;}

.error {color:red; text-decoration:underline;}
.validator, .validator a:link, .validator a:visited {font-size:xx-small; text-align:left; background-color:#fff; color:#000; text-decoration:none;}
.validator a:hover {text-decoration:underline; color:#f00;}

/*site layout CSS--------------------------------------------------------------------------------------*/
/*
* {
padding:0;
margin:0;
}
*/

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    padding: 0 0 20px 0;
    margin:0;
    background-color:#efefee;
    text-align:center;
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

#container {
    width: 100%;
    margin:0 auto; /*centers main divs*/
    overflow:hidden;
}

#header {
    width: 100%;
    text-align:center;
    padding: 0;
    margin:0;
}

#main-wrapper {
    width: auto;
    max-width:1490px; /*page width*/
    padding: 0 20px;
    margin:0 auto;
    min-height:350px;
    height:auto !important;
    height:350px;
}

/*uncomment declarations in next IDs to accommodate sidebar(s), adjust width and margin-left per design*/
#main-content {
    width: 100%;
    padding:0;
    margin:0;
    text-align:left;
/*float:left;
width:700px;
margin-left:150px;
}

#left-sidebar {
float:left;
padding:0;
margin:0;
width:150px;
margin-left:-850px;
}

#right-sidebar {
float:left;
padding:0;
margin:0;
width:150px;*/
}

#footer {
    width: 100%;
    clear:both;
    text-align:center;
    padding:0;
    margin: 10px 0 0;
}

fieldset {
    border-width:0;
    margin-top: 0.5rem;
    display: inline-block;
}

legend {
    display:none;
}

/*contact form CSS------------------------------------------------Need form CSS here for widths, etc.... instead of php file--------------------------------------*/
#con-form {
    max-width:600px; /*contact form width*/
    width: 100%;
    text-align:left;
}

#con-form input, #con-form textarea {
    padding:1px;
    margin:1px;
    width: 100%;
}

/*menu links CSS--------------------------------------------------------------------------------------*/
/*Uncomment desired version*/

/*vertical links*/
/*
*/

/*horizontal links*/
div.links-main {
    height:24px;
}

div.links-main ul {
    float:left;/*remove to left justify menu*/
    position:relative;
    left:50%;
    padding:0;
    margin:0;
}

div.links-main ul li {
    float:left;
    position:relative;
    right:50%;
    padding:0;
    margin:0;
    display:block;
    list-style:none;
}

div.links-main a:link, div.links-main a:visited {
    padding:0;
    display:block;
    font-size:16px;
    line-height:24px;
    font-weight:bold;
    color: #000;
    text-align:center;/*optional*/
    width:100px;/*optional*/
    border: none;
}

div.links-main a:hover, div.links-main a:active {
    text-decoration:none;
}

div.links-main a:active, div.links-main a:focus {
    outline:0;
}

div.links-main ul li.soc-med a {
    display: inline;
    padding: 0 2px;
}

/*--------------------------------------------------------------------------------------*/
div.links-sec {
}

div.links-sec ul {
    float:left;/*remove to left justify menu*/
    position:relative;
    left:50%;
    padding:0;
    margin:0;
}

div.links-sec ul li {
    float:left;
    position:relative;
    right:50%;
    padding:0 5px;
    margin:0;
    display:block;
    list-style:none;
    font-size:12px;
    line-height:20px;/*accommodates 20px icon*/
}

div.links-sec a:link, div.links-sec a:visited {
    color:#000;
    border: none;
}

div.links-sec ul li.soc-med a {
    padding: 0 2px;
}

/*copyright notice CSS--------------------------------------------------------------------------------------*/
#copyright {
    clear:both;
    font-size:10px;
}

/*custom CSS, add additional CSS declarations here--------------------------------------------------------------------------------------*/
a:link, a:visited {
    text-decoration:none;
    color: #000;
    border: 1px dotted #b09162;
    border-width: 0 0 2px;
}

a:hover {
    text-decoration:underline;
    background-color: #e8dccb;
    border: none;
}

a:link.dark, a:visited.dark {
    color: #eee9e0;
    border-color: #ffffff;
}

a:hover.dark {
    background-color: #7b746b;
}

#header img {
    width: 100%;
    height: auto;
}

.flex-cont {
    display: flex;
}

.flex-rev {
    flex-flow: row-reverse;
}

div.album {
    background-color: #2d2d2d;
    background-image: url("/images/album-bg.jpg");
    padding: 20px;
}

.album .flex-cont {
    align-items: center;
}

.sponsors .flex-cont {
    flex-wrap: wrap;
    min-width: 260px;
}

.sponsors ul.flex-cont li {
    min-width: 220px;
}

.sponsors .flex-cont .flex-cont {
    flex-direction: column;
    text-align: center;
    justify-content: end;
}

.sponsors .flex-cont .flex-cont img {
    margin: 0 auto;
    max-width: 95%;
    height: auto;
}

.sponsors .flex-cont .flex-cont>a {
    display: flex;
    align-items: flex-end;
}

.sponsors .flex-cont .flex-cont > a:link, .sponsors .flex-cont .flex-cont > a:visited, .sponsors .flex-cont .flex-cont > a:hover {
    text-decoration: none;
    background-color: unset;
    border: unset;
}

.sponsors .flex-cont .flex-cont p a {
    padding: 0 10px;
}

.flex-cont .fw20 {
    width: 20%;
}

.flex-cont .fw25, .sponsors .flex-cont .flex-cont {
    width: 25%;
}

.flex-cont .fw33 {
    width: 33.333%;
}

.flex-cont .fw40 {
    width: 40%;
}

.flex-cont .fw50 {
    width: 50%;
}

.flex-cont .fw60 {
    width: 60%;
}

.flex-cont .fw66 {
    width: 66.666%;
}

.flex-cont .fw75 {
    width: 75%;
}

.flex-cont .fw100 {
    width: 100%;
}

.flex-cont div img.img-rt, .flex-cont div img.img-lf {
    height: auto;
    width: calc(100% - 20px);
}

.flex-cont div .img-rt {
    margin: 0 0 20px 20px;
}

.flex-cont div .img-lf, .logo, .oct-logo, .logo-1col {
    margin: 0 20px 20px 0;
}

.flex-cont div img.logo, p img.logo, p img.logo-1col {
    width: 25%;
    height: auto;
    border: 1px solid #777;
    border-width: 0 2px 2px 0;
    border-radius: 15%;
}

p img.logo-1col {
    width: 12.5%;
}

p img.oct-logo {
    width: 120px;
    vertical-align: top;
}

.w70-100 {
    width: 70%;
    margin: 0 auto;
}

.call-out {
    margin: 10px auto;
    background-color: #fff;
    padding: 0 10px;
    border: 1px solid #777;
}

/*newsletters page*/
.nl-list {
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.nl-link, .nl-link:link, .nl-link:visited {
    width: 155px;
    background-color: #bfaa85;
    border: none;
    color: white;
    text-decoration: none;
    margin: 5px;
    padding: 0.5em 0;
    border-radius: 10px;
}

.nl-link.active {
    background-color: #7e6440;
}

.nl-iframe {
    width: 100%;
    max-width: 1000px;
    height: 98vh;
    margin: 0 auto;
    display: block;
    border: none;
}

.nl-iframe-title {
    text-align: center;
    font-weight: bold;
}

/*history*/
div#history div.fw75 .img-left {
    float: left;
    margin-right: 10px;
}

div#history div.fw75 .img-center {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

div#history div.fw75 p.caption {
    text-align: center;
    font-size: 0.8em;
    margin: 0 0 30px;
}

div#history div.fw25 p {
    text-align: center;
    font-weight: bold;
}

div#history div.fw25 li {
    font-size: 0.8em;
}

div#history div.fw25 li.active {
    font-weight: bold;
}

.histTitle {
    padding: 50px;
    background-image: url("/docs/history/page-title-bg3.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
}

/*50th*/
.bacb50 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 10px 0;
}

.mobi {
    display: none;
}

/* Mobile */
@media all and (max-width: 799px) {
    .sponsors ul.flex-cont li {
        padding: 0 1em 0 0;
    }

    .no-mobi {
        display: none;
    }

    .mobi {
        display: unset;
    }
}

@media all and (max-width: 599px) {
    .flex-cont {
        display: block;
    }

    .sponsors .flex-cont {
        min-width: unset;
    }

    .sponsors ul.flex-cont li {
        padding: 0 1em 0 0;
    }

    .sponsors .flex-cont .flex-cont {
        width: unset;
        border-bottom: #aaa 3px solid;
        margin-bottom: 1em;
    }

    .sponsors .flex-cont:last-child {
        width: unset;
        border-bottom: unset;
        margin-bottom: unset;
    }

    .sponsors .flex-cont a img {
        width: unset !important;
    }

    .flex-cont div img {
        width: 100% !important;
        height: auto;
    }

    .flex-cont .fw20, .flex-cont .fw25, .flex-cont .fw33, .flex-cont .fw40, .flex-cont .fw50, .flex-cont .fw60, .flex-cont .fw66, .flex-cont .fw75 {
        width: 100%;
    }

    p img.logo, p img.logo-1col {
        width: 50% !important;
    }

    .flex-cont div .img-rt, .flex-cont div .img-lf {
        margin: 0;
    }

    /*.logo, .oct-logo, .logo-1col {*/
    /*    margin: 0 10px 10px 0;*/
    /*    float: none;*/
    /*}*/

    p img.logo, p img.oct-logo, p img.logo-1col {
        width: 25%;
    }

    .w70-100 {
        width: 100%;
    }

    .call-out {
        width: calc(100% - 22px);
    }

    /*newsletters*/
    .nl-link, .nl-link:link, .nl-link:visited {
        width: 100%;
    }

    /*history*/
    .histTitle {
        background-size: 100%;
    }
}

@media all and (max-width: 399px) {
    div.links-main ul li {
        width: 50%;
    }

    div.links-main ul li a {
        display: inline !important;
        text-align: center;
    }

    div.links-main ul li img {
        width: unset !important;
    }
}