/*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-med, .float-left-sm , .float-left-xsm {float:left;}
.float-right, .float-right-med, .float-right-sm, .float-right-xsm {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--------------------------------------------------------------------------------------*/
*, ::after, ::before {
    box-sizing: border-box;
}

body {
font-family: 'Slabo 27px', serif;
font-size: 1.3em;
padding:20px;
margin:0;
background-color:#ffffff;
text-align:center;
}

#container {
/*width:1000px; !*page width*!*/
margin:0 auto; /*centers main divs*/
overflow:hidden;
}

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

#main-wrapper {
padding:0;
margin:0;
min-height:350px;
height:auto !important;
height:350px;
    text-align:left;
}

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

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

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

#footer {
clear:both;
text-align:center;
padding:0;
margin:0;
}

fieldset {
border-width: 0;
    padding: 0;
    margin: 0;
}

legend {
display:none;
}

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

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

#con-form input[type="submit"] {
    margin-top: 10px;
    width: 30%;
}

form.donate {
    margin:20px 5px;
    width:40%
}

form.donate select, form.donate input {
    margin: 2px 0;
}

/*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 10px;
display:block;
font-size:24px;
line-height:24px;
font-weight:bold;
text-align:center;/*optional*/
/*width:100px;!*optional*!*/
}

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:14px;
line-height:20px;/*accommodates 20 icon*/
}

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

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

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

/*custom CSS, add additional CSS declarations here--------------------------------------------------------------------------------------*/
a {
    outline: 0;
}

a:link, a:visited {
    text-decoration:none;
}

a:link, a:visited, div.links-main a:link, div.links-main a:visited, .mesa-blue {
    color: #3291cd;
}

a:hover {
    text-decoration:underline;
}

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

h1 {
    text-align: center;
}

h1, h2, .mesa-red {
    color: #d90000 !important;
}

h3, h4, h5, h6 {
    color: #000000;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Crete Round', serif;
}

.subheader {
    font-size: 1.5em;
}

.hr-m {
    width: 50%;
    margin: 0 auto;
}

img.float-right, img.float-right-med, img.float-right-sm, img.float-right-xsm {
    margin-left: 15px;
}

img.float-left, img.float-left-med, img.float-left-sm, img.float-left-xsm {
    margin-right: 20px;
}

img.float-left, img.float-right, img.float-left-med, img.float-right-med, img.float-left-sm, img.float-right-sm, img.float-left-xsm, img.float-right-xsm {
    height: auto;
}

img.float-left, img.float-right, p.caption {
    width: 45%;
}

img.float-left-med, img.float-right-med, p.caption-med {
    width: 35%;
}

img.float-left-sm, img.float-right-sm, p.caption-sm {
    width: 30%;
}

img.float-left-xsm, img.float-right-xsm, p.caption-xsm {
    width: 20%;
}

p.caption, p.caption-med, p.caption-sm, p.caption-xsm {
    font-size: 0.8em;
    margin-top: 0;
}

.float-cont ul.marg-left {
    margin-left: 45%;
}

.float-cont {
    clear: both;
    margin-bottom: 20px;
}

.flex-cont {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.flex-cont p, .volunteers div {
    width: 340px;
    text-align: center;
}

.volunteers div.center p {
    width: calc(100% - 40px);
}

.rnd-5per img {
    border-radius: 5%;
    margin-bottom: -0.3em;
}

/*media*/
.soundcloud iframe {
    display: block;
    clear: both;
}

/*video*/
.video-outer {
    margin: 20px 0;
    width: calc(50% - 5px);
}

.video-outer p {
    width: unset;
}

.video-outer img {
    width: 100%;
    height: auto;
}

.video {
    padding: 56.25% 0 0 0;
    position: relative;
    height: 0;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.indent-div {
    margin-left: 15px;
}

.needs {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 33.3333333%);
    grid-column-gap: 20px;
}

.home-call-out {
    padding: 0 12%;
}

.home-call-out p {
    padding: 0 20px;
}

.stats-box {
    font-family: Helvetica, Arial, Sans-Serif;
    border: solid 2px #777777;
    border-radius: 10px;
    margin-bottom: 1rem;
}

/*cta button*/
.cta-button {
    text-align: center;
    margin-bottom: 20px;
}

.cta-button a, .nl-link.active, .nl-link:link, .nl-link:visited {
    display: inline-block;
    border: 3px solid #ccc;
    padding: 0.5em 35px;
    border-radius: 25px;
    background-color: #f0f8ff;
}

.cta-button p {
    margin: 0;
}

/*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: 225px;
    /*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;
}

.nl-link.active {
    background-color: #0074bd;
    font-weight: bold;
}

/*top button*/
html {
    scroll-behavior: smooth;
}

#topBtn {
    display: none;
    position: fixed;
    bottom: 4em;
    right: 2em;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #d90000;
    color: white;
    cursor: pointer;
    padding: 0.7em;
    border-radius: 0.4em;
    text-decoration: none;
}

@media (hover: hover) {
    #topBtn:hover {
        background-color: #555;
    }
}

/*break point 1000px-------------------------------------------------------------------*/
@media all and (max-width: 999px) {

    .home-call-out {
        padding: 0;
    }

    #main-content {
        margin: 0;
    }

    .needs {
        grid-template-columns: repeat(2, 50%);
    }

    div.links-main ul li {
        width: 50%;
    }

    .video-outer {
        width: 100%;
    }

    .volunteers div.center {
        width: calc(50% - 20px);
    }

}

/*break point 500px-------------------------------------------------------------------*/
@media all and (max-width: 499px) {

    #header {
        padding:0;
    }

    img.float-left, img.float-right, p.caption, img.float-left-med, img.float-right-med, p.caption-med, img.float-left-sm, img.float-right-sm, p.caption-sm, img.float-left-xsm, img.float-right-xsm, p.caption-xsm, .soundcloud iframe {
        width: 100%;
    }

    .float-cont ul.marg-left {
        margin-left: unset ;
    }

    form.donate {
        width: 100%
    }

    .needs {
        grid: unset;
    }

    .float-cont .nl-co ul {
        display: block;
        text-align: left;
    }

    .partners-page .flex-cont {
        display: block;
    }

    .partners-page .flex-cont p {
        margin: 16px auto 25px;
        padding-bottom: 25px;
        text-align: center;
        max-width: 100%;
        border-bottom: #ccc solid 2px;
    }

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

    .volunteers div.center {
        width: 100%;
    }
}

html {
     visibility: visible;
     opacity: 1;
 }