/* ==========================================================================
   Header
   ========================================================================== */

@media only screen {

    .state #page-box {
        margin-top: -84px;
    }

    #page-content {
        padding-bottom: 5rem;
    }

    .content-title,
    .content-section.shaded,
    .content-section.profile-form {
        clear: right;
    }

    #header-placeholder {
        height: 2.5rem;
    }

    #page-mandatories {
        padding-bottom: 15px;
        position: relative;
    }

    #footer {
        margin-top: -15px;
        position: relative;
        background-color: #7d7d7d;
        border-bottom: 5px solid #7d7d7d;
    }

    .phone-label {
        font-weight: 600;
    }

    .phone-description {
        font-style: italic;
    }




    /* Primary Navigation */

    #header-label {
        float: left;
        text-align: left;
    }

    #header-state {
        padding-left: 15px;
        padding-right: 15px;
        vertical-align: top;
        float: left;
        display: none;
    }

    #header-state a {
        font-weight: 600;
        color: #ffffff;
        text-decoration: none;
    }

    #header-nav {
        display: inline-block;
        margin: -5px 0 0 0;
        padding: 0;
    }

    /* Primary Navigation Dropdown Menu Button */
    #header-nav #header-nav-menu {
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 0;
        float: none;
    }

    #header-nav #header-nav-menu a:link #nav-box .nav-box-bar,
    #header-nav #header-nav-menu a:visited #nav-box .nav-box-bar {
        background-color: #ffffff !important;
    }

    #header-nav #header-nav-menu a:hover #nav-box .nav-box-bar,
    #header-nav #header-nav-menu a:active #nav-box .nav-box-bar {
        background-color: #ffffff !important;
    }

    #header-nav #header-nav-menu .label {
        display: none;
    }

    #header-nav #header-nav-menu a,
    #header-nav #header-nav-menu a:link,
    #header-nav #header-nav-menu a:visited,
    #header-nav #header-nav-menu a:hover,
    #header-nav #header-nav-menu a:active {
        text-decoration: none;
    }

    #header-nav #header-nav-menu a:hover .label {
        text-decoration: underline;
    }

    #header-nav #header-nav-menu .arrow {
        margin: -9px 0 0 0;
        padding: 0;
        color: #ffffff;
        display: block;
        text-align: center;
    }

    #header-nav.closed #header-nav-menu .arrow.close,
    #header-nav.opened #header-nav-menu .arrow.open {
        display: none;
    }


    #page-box {
        background: transparent url('../img/layout/state-background.png') center top repeat-y;
    }

    #page-box #page-nav {
        padding: 0;
        position: fixed;
        width: 260px;
        height: 100%;
        box-shadow: 5px 0 8px rgba(125, 125, 125, 0.75);
    }

    #page-box.load #page-nav {
        margin-left: -380px;
    }

    #page-box.opened #page-nav {
        animation-name: open-page-box;
        animation-duration: 1s;
        margin-left: 0;
    }

    @keyframes open-page-box {
        0%   { margin-left: -380px; }
        100% { margin-left: 0; }
    }

    #page-box.closed #page-nav {
        animation-name: close-page-box;
        animation-duration: 1s;
        margin-left: -380px;
    }

    @keyframes close-page-box {
        0%   { margin-left: 0; }
        100% { margin-left: -380px; }
    }

    #page-box #page-nav #state-nav-links {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }

    #page-box #page-nav #state-nav-links a,
    #page-box #page-nav #state-nav-links a:link,
    #page-box #page-nav #state-nav-links a:visited {
        color: #ffffff;
        text-decoration: none;
        display: block;
        padding: 0.5rem 20px;
        margin: 0.25rem 0;
        -moz-border-radius: 1rem;
        border-radius: 1rem;
        font-size: 1.6rem;
    }

    #page-box #page-nav #state-nav-links a:focus,
    #page-box #page-nav #state-nav-links a:hover,
    #page-box #page-nav #state-nav-links a:active {
        color: #ffffff;
        background-color: rgba(255,255,255,0.5);
    }

    #page-box #page-nav #state-nav-links ul {
        list-style-type: none;
        padding-left: 0;
    }

    #page-box #page-nav #state-nav-links ul li {
        border-bottom: 1px solid rgba(255,255,255,0.5);
    }

    #page-box #page-nav #state-nav-links ul li.contact {
        border-bottom: none;
    }

    #page-box #page-nav #state-nav-links ul li.nav-group-title a {
        font-weight: 600;
    }

    #page-box #page-nav #state-coordinator-photo {
        width: 325px;
        margin-top: -15px;
    }

    #page-box #page-nav #state-coordinator-photo .img-box {
        float: right;
    }

    #page-box #page-content {
        padding-top: 2rem;
        width: 100%;
    }

    #page-box #page-content #state-logo {
        max-width: 70%;
        margin: auto;
        padding-top: 1rem;
        padding-bottom: 3rem;
    }

    ul.connect-numbers {
        list-style-type: none;
        padding: 2rem 0;
        width: 100%;
    }

    ul.connect-numbers li:nth-child(odd) {
        background-color: #f2f2f2;
    }

    ul.connect-numbers li span {
        display: inline-block;
        padding: 1rem;
        border-bottom: 1px solid #f2f2f2;
    }

    .contact-phone-label,
    ul.connect-numbers li span.phone-label {
        white-space: nowrap;
    }



    #outreach-coordinator2,
    #outreach-coordinator3 {
        margin-top: 2rem;
    }

    .outreach-coordinator {
        background-color: #f2f2f2;
        padding: 2rem;
        border: 1px solid #003399;
        border-radius: 1rem;
    }

    /*
    body#state-contact-info .outreach-coordinator {
        background-color: transparent;
        padding: 0;
        border-width: 0;
        border-radius: 0;
    }
    */

    .outreach-coordinator div.name,
    .outreach-coordinator div.title,
    .outreach-coordinator div.photo,
    .outreach-coordinator div.hometown,
    .outreach-coordinator div.recipe,
    .outreach-coordinator div.video,
    .outreach-coordinator div.email,
    .outreach-coordinator div.quote,
    .outreach-coordinator div.contact-button  {
        display: block;
        margin-bottom: 0.5rem;
    }

    .outreach-coordinator div.title {
        margin-bottom: 2.5rem;
    }

    .outreach-coordinator div.quote {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .outreach-coordinator div.contact-button {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .outreach-coordinator div.name {
        font-weight: 700;
        font-size: 2.6rem;
        color: #003399;
    }

    .state-contact {
        padding-bottom: 2rem;
    }

    .state-contact .contact-name {
        font-weight: 700;
        font-size: 2.6rem;
        color: #003399;
        margin-bottom: 1rem;
    }

    .state-contact .contact-title,
    .outreach-coordinator div.title {
        font-style: italic;
        color: #003399;
    }

    .state-contact .contact-phone-label,
    .state-contact .contact-email-label,
    .state-contact .contact-website-label,
    .outreach-coordinator span.label {
        margin-right: 5px;
        display: inline-block;
        font-weight: 600;
    }

    .outreach-coordinator div.photo {
        margin-top: 1rem;
    }

    .outreach-coordinator div.photo .img-box {
        border: 10px solid #003399;
        max-width: 250px !important;
    }

    /*
    body#state-contact-info .outreach-coordinator div.photo .img-box {
        max-width: 150px !important;
    }

    body#state-contact-info .outreach-coordinator div.email,
    body#state-contact-info .outreach-coordinator div.hometown,
    body#state-contact-info .outreach-coordinator div.recipe,
    body#state-contact-info .outreach-coordinator div.video,
    body#state-contact-info .outreach-coordinator div.quote,
    .outreach-coordinator div.photo .img-box.default {
        display: none;
    }
    */

    .outreach-coordinator div.email span.at {
        margin: 0 -3px;
    }

    .outreach-coordinator .button-box {
        /* text-align: center; */
    }

    #how-it-works-content .img-box.icon {
        display: none;
    }

    /* equipment */

    .content-title.order-options {
        margin-top: 2rem;
    }

    /* resources */
    .content-section.brochures,
    .content-section.profile-guide,
    .content-section.call-me-cards {
        padding-bottom: 5rem;
    }

    /* relay friendly */

    body#state-relay-friendly .state-contact {
        padding-bottom: 3rem;
    }

    body#state-relay-friendly .state-contact .contact-name {
        margin-bottom: 0.25rem;
    }

    /* relay friendly business */

    .content-title.become-rfb {
        margin-top: 2rem;
    }

    .content-section.become-rfb {
        padding-bottom: 3rem;
    }

    /* contact form */

    .content-title.contact-form {
        margin-top: 2rem;
    }


    /* webinar fields in RCC form */

    .form-row.data-event-is-recurring-details,
    .form-row.data-event-platform,
    .form-row.data-event-platform-token,
    .form-row.data-event-webinar-details,
    .form-row#data-event-has-captions,
    .form-row#data-event-has-breakout-rooms,
    .form-row.data-event-call-in-number,
    .form-row.data-has-rcc-approval-process,
    .form-row.data-has-auto-approve,
    .form-row.data-auto-approve-delay,
    .form-row.data-timestamp,
    #caption-direction-notice {
        display: none;
    }


}


@media only screen and (min-width: 600px) {

    .outreach-coordinator {
        padding: 5rem;
    }

    .outreach-coordinator div.info {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .outreach-coordinator div.photo .img-box {
        margin-left: 2rem;
        margin-bottom: 2rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
    }

    .outreach-coordinator div.email span.label {
        display: inline;
    }

    .outreach-coordinator div.quote {
        /* text-align: center; */
        font-size: 3rem;
    }

}


/* Media Queries */

@media only screen and (min-width: 500px) {

    #header-state {
        display: inline-block;
    }

    #page-box #page-nav #state-nav-links ul li.nav-group-title {
        display: none;
    }

    #page-content #state-logo {
        float: right;
        padding-right: 1rem;
        padding-left: 3rem;
        max-width: 40%;
    }

}

@media only screen and (min-width: 700px) {

    #header-nav {
        width: auto;
    }

    #header-nav-menu {
        display: block;
    }

    ul.connect-numbers {
        display: table;
    }

    ul.connect-numbers li {
        display: table-row;
    }

    ul.connect-numbers li span {
        display: table-cell;
    }

}

@media only screen and (min-width: 1200px) {

    #header-nav {
        display: none;
    }

    #page-box #page-box-content {
        width: 1200px;
        margin: 0 auto;
    }

    #page-box #page-nav {
        margin-left: -20px !important;
        box-shadow: none;
        padding-top: 15px;
    }

    #page-box #page-nav #state-nav-links ul li {
        padding: 10px 0;
    }

    #page-box #page-nav #state-coordinator-photo {
        margin-top: -30px;
    }

    #page-box #page-content {
        width: 940px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 60px;
        padding-top: 35px;
        margin-left: 260px;
    }

}






/* ==========================================================================
   News and Events Content
   ========================================================================== */


@media only screen {

    .content-section.news-events .button.secondary {
        margin-bottom: 5rem;
    }

    /* Search Form */

    form#news-search-form {
        font-size: 0.875em;
        margin-top: 5rem;
        margin-bottom: 8rem;
        background-color: #c2c2c2;
        padding: 4rem 1rem;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid #7d7d7d;
    }

    form#news-search-form .form-row,
    form#news-search-form .form-label,
    form#news-search-form .form-field {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 1px !important;
        width: auto !important;
    }

    form#news-search-form .form-row {
        display: inline-block;
    }

    form#news-search-form .button-box {
        min-width: 1px !important;
    }

    form#news-search-form .button {
        font-size: 0.875em !important;
        min-width: 1px !important;
        white-space: nowrap;
    }

    form#news-search-form .form-label {
        white-space: nowrap;
        text-align: left !important;
        vertical-align: middle !important;
        display: none !important;
    }

    form#news-search-form .form-label-submit {
        display: none !important;
    }

    form#news-search-form .form-field {
        padding-right: 10px !important;
    }

    form#news-search-form .form-row-input.data-title {
        width: 100% !important;
    }

    form#news-search-form .form-row-input.data-title .form-field {
        width: 100% !important;
    }

}

@media only screen and (min-width: 550px){

    form#news-search-form {
        text-align: center;
    }

}

@media only screen and (min-width: 500px) {

    form#news-search-form .form-row-input.data-title {
        width: 60% !important;
    }


}

@media screen and (max-width: 999px) {
    .state #page-box {
        margin-top: -81px;
    }
}

@media screen and (max-width: 699px) {
    .state #page-box {
        margin-top: -56px;
    }
}