@charset "utf-8";
/* CSS Document */

#headerwrapper, #footerwrapper {
    background-color: #38383b;
}

#header, #footer {
    display: flex;
}

#header .leftcol, #footer .leftcol {
    padding: 35px 30px 35px 70px;
    display: table;
}

.infotext {
    font-family: "Mallory", Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    line-height: 21px;
    color: #b8b8b7;
    border-right: solid 1px #b8b8b7;
    padding-right: 40px;
}

.infotext .textblock.one {
    font-size: 16px;
}

.infotext .textblock.two {
    margin: 25px 0;
}

#header .rightcol img, #footer .rightcol img {
    height: 0;
}

#logo_mobile {
    display: none;
}

.colorbars {
    width: 100%;
    display: block;
    border-top: solid 6px #b51115;
    border-bottom: solid 6px #36699c;
    height: 6px;
    margin-bottom: 6px;
}

#pageupper {
    margin: 3em 70px;
}

#pageupper .leftcol {
    font-family: "Mallory-Light", Verdana, Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: #38383b;
    width: 25%;
    float: left;
    padding-right: 3em;
}

#pageupper .rightcol {
    display: table;
}

.headshot {
    width: 200px;
    display: inline-table;
    margin-right: 45px;
    margin-bottom: 2em;
    font-family: "Mallory-Light", Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #38383b;
}

.headshot.three {
    margin: 0;
}

.headshot img {
    width: 100%;
    margin-bottom: 0.7em;
}

.personname {
    font-family: "Mallory Bold", Verdana, Arial, Helvetica, sans-serif;
    color: #36699c;
}

#pagemiddlewrapper {
    background-color: #edebe8;
}

#pagemiddle {
    margin: 3em 0;
    padding: 3.5em 25px;
}

#pagemiddle .leftcol {
    width: 23%;
    text-align: center;
    border-right: solid 1px #38383b;
    float: left;
}

#pagemiddle .leftcol img {
    width: 35%;
}

#pagemiddle .rightcol {
    font-family: "Mallory-Light", Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #38383b;
    display: table;
    padding: 0 110px;
    min-height: 150px;
}

#pagemiddle .rightcol p {
    display: table-cell;
    vertical-align: middle;
}

#pagelower {
    margin: 3em 65px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#pagelower .photo {
    width: 100%;
    max-width: 370px;
    margin: 5px;
}

a {
    color: #87b6e4 !important;
    text-decoration: none !important;
}



/* ************ RESPONSIVE STYLES *************** */


@media only screen and (max-width:1030px){
    #pagemiddle .leftcol {
        width: 26%;
    }
    #pagemiddle .leftcol img {
        width: 40%;
    }
    #pagemiddle .rightcol {
        padding: 0 80px;
    }
}

@media only screen and (max-width:970px){
    #header, #footer {
        flex-direction: column-reverse;
        margin: 0 !important;
        text-align: center;
    }
    #header .leftcol, #footer .leftcol {
        padding: 0 35px !important;
    }
    .infotext {
        padding: 15px;
        border: 0 none;
        border-top: solid 1px #b8b8b7;
        display: flex;
        justify-content: center;
        align-items: baseline;
        font-size: 14px !important;
        line-height: 24px !important;
    }
    .infotext .textblock {
        margin: 0 10%;
    }
    .infotext .textblock.one {
        font-size: 16px !important;
    }
    #logo {
        display: none;
    }
    #logo_mobile {
        display: inline-block;
    }
}

@media only screen and (max-width:875px){
    #pagemiddle .leftcol {
        width: 28%;
    }
    #pagemiddle .leftcol img {
        width: 50%;
    }
    #pagemiddle .rightcol {
        padding: 0 65px;
    }   
    .infotext .textblock.one {
        margin-left: 0;
    }
    .infotext .textblock.three {
        margin-right: 0;
    }
    #pageupper .leftcol {
        width: 45%;
    }
}

@media only screen and (max-width:760px){
    #pageupper .leftcol {
        float: none;
        width: 100%;
        text-align: center;
    }
    #pageupper .rightcol {
        text-align: center;
        margin-top: 1em;
    }
    .headshot {
        margin: 25px !important;
        width: 100%;
        max-width: 240px;
    }
    #pagemiddle {
        margin: 10px;
    }
}

@media only screen and (max-width:600px){
    #pagemiddle .leftcol {
        float: none;
        border: 0 none;
        width: 100%;
    }
    #pagemiddle .leftcol img {
        width: 35%;
        margin-bottom: 3em;
    }
    #pagemiddle .rightcol {
        padding: 0 25px;
    }
    #pagelower {
        margin: 3em 20px;
    }
    #pagelower .photo {
        max-width: 90%;
    }
    #header .rightcol img, #footer .rightcol img {
        width: 85%;
        height: auto !important;
    }
    .infotext {
        display: block;
    }
    .infotext .textblock {
        margin: 25px !important;
    }
    #pageupper {
        margin-bottom: 1em;
    }
    .headshot {
        margin: 25px 5px !important;
    }
}