html, body {
    margin: 0;
    padding: 0;
    /*font-family: 'Lato', sans-serif;*/
    font-family: 'Lora', serif;
    /*font-family: 'Quattrocento', serif;*/
    background-color: #f5f5f5;
    height: 100%;
    font-size: 16px;
}

.white {
    background-color: #ffffff;
}
.missionStatement {
    padding: 20px;
    line-height: 1.5em;
}
.missionStatement img{
    width: 100%;
}

.imageContainer {
    width: 20%;
    min-width: 150px;
    height: 180px;
    margin-right: 2%;
    float: left;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.imageContainer img {
    width: 100%;
    height: auto;
}

.men {
    width: 18%;
    margin-right: 2.5%;
}
.women {
    width: 30%;
    margin-right: 5%;
}
.last {
    margin-right: 0;
}

h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}

p {
    font-size: 1em;
}

ul {
    margin-left: 2em;
    padding: 0;
    list-style: none;
}

li {
    margin-bottom: 1em;
}

li a:link, li a:hover, li a:visited, li a:active {
    font-weight: bold;
}

a:link, a:hover, a:visited, a:active {
    color: #4c4c4c;
    text-decoration: none;
}

p a:link, p a:hover, p a:visited, p a:active {
    font-weight: bold;
}

a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

span.strong {
    font-weight: bold
}

span.space {
    margin-left: 0.5em;
}

span.small {
    font-size: 0.5em;
}

span.error {
    color: red;
    font-size: 12px;
}

#header {
    position: fixed;
    top: 0;
    margin: 0;
    width: 100%;
    height: 80px;
    background: #9CBA7F;      /* #8fc790 */
    box-sizing: border-box;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    color: white;
    z-index: 1;
}

#header div a:link, #header div a:visited, #header div a:active {
    color: white;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: normal;
}

.logo {
    margin: auto;
    margin-top: 20px;
    padding: 0;
    text-align: center;
    font-size: 2em;
    height: 50px;
    color: white;
    letter-spacing: 2px;
    cursor: default;
}

.logo.holding {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.logo_visible {
    transition: all 0.3s ease-in-out;
    font-weight: bold;
    position: relative;
    bottom: 0px;
    margin-left: 2px;
    margin-right: 2px;
}

.logo_visible_on{
    bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.hidden {
    display: none;
}

.huge {
    font-size: 4em;
}
.big {
    font-size: 3em;
}

.center {
    text-align: center;
}

.grey {
    color: #cccccc;
}

.clear {
    clear: both;
}

.mainContainer {
    position: relative;
    padding-top: 120px;
    margin: auto;
    width: 84%;
    max-width: 1300px;
    height: 100%;
    padding-bottom: 20px;
}

.container {
    position: relative;
    float: left;
}

._left {
    margin-right: 2%;
    width: 35%;
}

._right {
    width: 63%;
}

.mainInfoContainer {
    width: 100%;
}

.infoContainer {
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: rgba(0,0,0,0.08) 0 1px 2px;
    -moz-box-shadow: rgba(0,0,0,0.08) 0 1px 2px;
    box-shadow: rgba(0,0,0,0.08) 0 1px 2px;
    border: 1px solid #e4e4e4;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.16);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.16);
    border: none;
    width: 22%;
    margin-bottom: 20px;
    float: left;
    padding: 15px;
    color: #4c4c4c;
    box-sizing: border-box;
}

.infoContainer img {
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
    margin-right: 2em;
    margin-bottom: 2em;
}

.infoContainer img.small {
    max-width: 300px;
}

.infoContainer img.small.right {
    max-width: 300px;
    float: right;
}

._half {
    width: 48%;
    margin-right: 4%;
}

._last {
    margin-right: 0;
}

#why {
    background-color: #ffffff;
}
#why.highlight {
    background-color: #d4ccda;
}
#why.highlight .grey {
    color: #ffffff;
}
.why {
    width: 100%;
    height: 100%;
}

._left .infoContainer {
    width: 100%;
}

._75full {
    width: 100%;
    height: 100px;
    margin-bottom: 4%;
    padding: 20px;
    box-sixing: border-box;
}
    
.submit-button {
    float: right;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 15px;
    color: #FFF;
    border: none;
    text-decoration: none;  
    background-color: #3498DB;
    text-shadow: 0px -2px #2980B9;
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
    cursor: pointer;
}

#mc_embed_signup input.submit-button {
    border: 0px;
    -webkit-appearance: none;
}

#mc_embed_signup #mce-success-response {
    color: #9CBA7F;
    display: none;
}

#mc_embed_signup {
    clear:left;
}

#mc_embed_signup div.mce_inline_error {
    font-family: sans-serif;
    font-weight: normal;
}

input.submit-button {
    margin-right: 0;
}

/*-----------------holding page----------------------------*/

.infoContainer.holding {
    overflow: hidden;
    height: auto;
    padding: 0;
}

.infoContainer.transparent {
    background: none;
    border: none;
    box-shadow: none;
}

.infoContainer.holding img{
    width: 100%;
    margin: 0;
}

.why p {
    /* visibility: hidden; */
    display: none;
}
.infoContainer.rightFull {
    width: 100%;
}

/* ------------------------ footer --------------------------------- */
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -40px;
}

.footer, .push {
	height: 70px;
	clear: both;
}

.footer {
    width: 100%;
    background: #cde3b7;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    color: #4c4c4c;
    z-index: 1;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    font-style: italic;
    font-size: 1em;
}

/* ------------------------ media --------------------------------- */

@media only screen and (max-width: 900px) {
    .infoContainer {
        width: 100%;
    }
    .footer {
        height: 100px;
        padding-top: 20px;
    }
    .imageContainer {
        height: 120px;
    }
}

@media only screen and (max-width: 800px) {
    .huge {
        font-size: 3.5em;
    }
}


@media only screen and (max-width: 600px) {
    #header {
        position: absolute;
    }
    .mainContainer {
    }
    .container {
        width: 100%;
    }
    .imageContainer {
        height: 60px;
    }
}

@media only screen and (max-device-width: 900px) {
    .infoContainer {
        width: 100%;
    }
    .footer {
        height: 100px;
        padding-top: 20px;
    }
    .imageContainer {
        width: 20%;
        height: 120px;
    }
}

@media only screen and (max-device-width: 800px) {
    .huge, .big {
        font-size: 5em;
    }
}

@media only screen and (max-device-width: 600px) {
    .missionStatement {
        font-size: 2em;
        line-height: 2.5em;
    }
    #header {
        position: absolute;
    }
    .mainContainer {
        position: relative;
        padding-top: 200px;
    }
    .container {
        width: 100%;
    }
    .footer {
        font-size: 2em;
    }
    .logo {
        font-size: 3em;
    }
    #header {
        padding: 20px;
        height: 160px;
    }
    .imageContainer {
        height: 100px;
    }
}