@media only screen and (max-width:640px) {
    /*  typography
    ***************************************************/

    blockquote {
        font-family: Bodoni Italic;
        font-style: italic;
        color: #272727;
        padding: 5px 0px 5px 32px;
        background: url(../../images/branding/m-quote.png) top left no-repeat;
        font-weight: bold;
    }

    blockquote p:last-child:after {
        content: '';
        background: url(../../images/branding/m-quote-end.png) top left no-repeat;
        width: 23px;
        height: 16px;
        margin: 3px -21px 0 2px;
        display: inline-block;
        vertical-align: bottom;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 18px;
    }

    .body {
        background: #00cf91 url(../../images/branding/m-footer.png) center bottom no-repeat;
    }

    .clouds {
        padding: 0;
        background: none;
    }

    /* Header
    ***************************************************/

    .header-desktop {
        display: none;
    }
    .header-mobile {
        display: block;
    }

    .header {
        background: url(../../images/branding/m-header.png) top center no-repeat;
        overflow: hidden;
        height: auto;
        min-height: 190px;
        border-bottom: 1px solid #b2e4d6;
        position: relative;
    }

    .header .inner {
        height: 190px;
        position: relative;
    }

    a.logo {
        width:155px;
        height:52px;
        position: absolute;
        top: 33px;
        left: 20px;
        background: none;
        text-align: left;
    }

    .logo p, .logo h1 {
        font-size: 12px;
        color: #000;
    }

    .container {
        background: none;
    }

    .primary-content {
        width: 100%;
        float: none;
        clear: both;
    }

    .primary-content .inner {
        padding: 10px 4%;
        width: 93%;
        box-shadow: none;
    }

    .secondary-content {
        display: none;
    }

    .primary-nav {
        padding: 0 0 0 2%;
        margin: 0 1%;
        position: absolute;
        top: 147px;
        z-index:10;
        width: 58%;
    }
    .primary-nav ul {
        padding: 0;
    }

    .primary-nav li {
        display: inline-block;
        text-align: center;
        padding: 15px 4% 15px 3%;
        list-style: none;
        list-style-image: none;
        font-style: normal;
        font-size:14px;
        width: auto;
    }

    .primary-nav li.active {
        background: url(../../images/branding/m-menu-active.png) bottom no-repeat;
        color: #fff;
    }

    .primary-nav li a {
        color:#ffffff;
        text-decoration: none;
    }

    .primary-nav li.active a {
        color: #fff;
    }

    /* =Secondary-navigation
    ------------------------------------------------------*/

    .secondary-nav {
        position:absolute;
        top:153px;
        right:0;
        width: 100%;
        z-index:1;
    }

    .secondary-nav ul {
        padding:0 7px 0 0;
        float:right;
    }

    .secondary-nav li {
        display:block;
        float: left;
        font-style: normal;
        margin: 0 1px 0px 0;
        vertical-align: top;
        background-color: #00563b;
        height: 29px;
        padding: 4px;
    }

    .secondary-nav li.active {
        background: #00563b;
        height: 32px;
        width: 30px;
    }

    .secondary-nav li a {
        display:block;
        width:30px;
        height:30px;
        background:url(../../images/branding/icons1.png) no-repeat;
    }

    .secondary-nav li.search-icon a {
        background-position: 0 5px;
    }

    .secondary-nav li.links a {
        background-position: -28px 5px;
    }

    .secondary-nav li.social-icons a {
        background-position: -56px 5px;
    }


    /* =Secondary navigation content
    ------------------------------------------------------*/

    .secondary-nav-content {
        position: relative;
        margin-top: 190px;
        border-top: 2px solid #fff;
    }

    .secondary-nav-content div {
        display: none;
        position:relative;
        width:100%;
        background: #00563b;
        overflow: hidden;
        float:none;
        clear: both;
        padding: 14px 0 13px;
    }

    .secondary-nav-content div.show {
        display:block;
    }

    .secondary-nav-content div ul {
        padding: 0;
    }

    .secondary-nav-content div li {
        display: inline-block;
        font-style: normal;
    }

    .secondary-nav-content div li a {
        background: none;
        display:inline;
        color: #fff;
    }

    /* =Container
    ------------------------------------------------------*/

    .search-input {
        background-color: transparent;
        border: none;
        color: #fff;
        margin-left: 20px;
        font-size: 21px;
        width: 85%;
    }

    .search-content .search-submit {
        width: 27px;
        height: 27px;
        top: 18px;
        background-image: url(../../images/branding/m-search.png);
    }

    /* =Articles
    ***********************************************************/

    .articles {
        margin: -10px -5%;
        width: 110%;
    }

    .articles .article {
        width: 90%;
        padding: 20px 5% 15px;
        border-left: none;
        float: none;
    }

    .articles .article .image {
        float: left;
        width: 100px;
        height: 100px;
        margin: 20px 12px 20px 0;
    }

    .articles .article .image img.article-image {
        width: 100px;
        height: 100px;
        left: 0;
    }

    .articles .article .image img.mask {
        height: 160px;
        width: 160px;
        margin: -30px 10px 0 -30px;
    }

    .articles .article.first {
        width: 87%;
        margin: 10px 6% 30px 7%;
        border: none !important;
    }

    .articles .article.first .title {
        font-size: 24px;
        line-height: 28px;
    }

    .articles .article.first .image {
        float: none;
        clear: both;
        margin: 0 auto;
        width: 205px;
        height: 205px;
        padding: 0;
    }

    .articles .article.first .image img {
        width: 205px;
        height: 205px;
    }

    .articles .article.first .image img.mask {
        height: 305px;
        width: 305px;
        left: -20px;
        top: -20px;
    }

    .article .date {
        margin: 0 0 4px;
    }

    .articles .article.first .date {
        margin: 0;
    }

    .article:not(.article-content) .text {
        margin:0 0 0 110px;
    }

    .article:not(.article-content) .authors {
        margin:3px 0 0 112px;
    }

    .article:not(.article-content) .text p {
        margin: 0;
    }

    .article.first .text,
    .article.first .authors {
        margin: 5px 0 0;
    }

    .article .authors {
        font-size: 8px;
    }

    .article.first .authors {
        font-size: 10px;
    }

    .article .title {
        font-size: 18px;
        line-height: 19px;
        margin: 4px 0;
    }

    .article-content .image {
        max-width: 350px;
    }

    .articles .article.article-teaser {
        float: none;
        clear: both;
        width: 86%;
        border-left: none;
        border-right: none;
        padding: 15px 6% 20px 8%;
    }

    .articles .article.article-teaser .image {
        margin: 10px 5% 30px 0;
    }

    /* =Navigation
    ******************************************/

    .article-bc a.prev, .article-bc a.next {
        top: 150px;
    }

    a.prev, a.next {
        top: 130px;
    }

    .articles-nav a.prev, .articles-nav a.next {
        top: 60px;
    }


    /* =Footer
    **************************************************************/

    .footer {
        background: url(../../images/branding/m-clouds.png) top no-repeat;
    }

    .footer-text .column {
        float: none;
        clear: both;
        width: 90%;
        margin: 0 5% 40px !important;
    }

    .copyright {
        margin: 15px 20px 10px;
    }

    /* =Forms
    ****************************************************************/
    .ufo-customfields-invalid.ufo-hint-position-right  {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }

    div.ufo-form div.ufo-customform-row span.ufo-cell-center div,
    div.ufo-form div.ufo-customform-row div span.ufo-cell-center {
        width: 70% !important;
    }

    div.ufo-customform-row * {
        vertical-align: top !important;
    }

    #recaptcha_table td {
        padding: 0 3px;
    }

    #recaptcha_table img#recaptcha_logo,
    #recaptcha_table img#recaptcha_tagline {
        display: none;
    }

    #recaptcha_table.recaptchatable td.recaptcha_image_cell {
        padding-left:0 !important;
        padding-right:0 !important;
    }

    #recaptcha_table.recaptchatable td.recaptcha_image_cell img {
        max-width: 100%;
        height: auto;
    }

    /* =About
    ***********************************************************/

    .about-history {
        margin-top: 20px;
    }

    .about-time_line {
        display: none;
    }

    .about-history-photo {
        text-align: center;
        padding-top: 105px;
    }

    .about-history-photo h1 {
        font-size: 15px;
        margin: 0;
    }

    .about-steve .about-history-photo {
        background: url(../../images/branding/m-steve.png) top no-repeat;
    }

    .about-polly .about-history-photo {
        background: url(../../images/branding/m-polly.png) top no-repeat;
    }

}