/* ==========================================================================
   Layout
   ==========================================================================
*/


@media only screen {

    html,
    body,
    #page-content {
        overflow-x: hidden;
    }

    body {
        color: #2e2e2e;
        background-color: #7d7d7d;
        font-family: "myriad-pro", sans-serif;
        font-weight: 400;
        padding: 0;
        font-size: 1.6rem;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: 400;
        padding: 0;
        margin: 0;
        color: #003399;
    }

    h1 {
        font-size: 3.5rem;
        line-height: 1.215;
        margin-bottom: 2rem;
    }

    a,
    a:link,
    a:visited {
        color: #992699;
    }

    a:focus,
    a:hover,
    a:active {
        color: #822082;
    }

    .button,
    .button:link,
    .button:visited {
        border: 2px solid #992699;
        color: #992699;
    }

    .button:hover,
    .button:active {
        border-color: #003399;
        background-color: #822082;
        color: #ffffff;
    }

    .button.primary,
    .button.primary:link,
    .button.primary:visited {
        border-color: #003399;
        background-color: #992699;
        color: #ffffff;
    }

    .button.primary:hover,
    .button.primary:active {
        background-color: #822082;
    }

    .button#emergency-911,
    .button#emergency-911:link,
    .button#emergency-911:visited {
        border-color: #720011;
        background-color: #a70011;
        color: #ffffff;
    }

    .button#emergency-911:hover,
    .button#emergency-911:active {
        background-color: #950011;
    }

    .button:focus {
        -webkit-box-shadow: 0 0 5px #7f99cc !important;
        -moz-box-shadow: 0 0 5px #7f99cc !important;
        box-shadow: 0 0 5px #7f99cc !important;
    }

    .button.inline {
        display: inline-block;
        min-width: auto;
        margin-right: 1rem;
    }

    table {
        max-width: 1000px;
        margin: 1rem auto;
    }

    td {
        border: 1px solid #cecece;
        padding: 0.7rem 1rem;
    }

    th {
        border: 1px solid #cecece;
        padding: 0.7rem 1rem;
        text-align: left;
        font-weight: 400;
    }

    tr.vertical-spacer th {
        padding: 0.7rem 1rem;
        background-color: #cecece;
        font-style: italic;
        font-weight: 600;
        padding-top: 2rem;
    }

    tr.col-header th {
        padding: 0.7rem 1rem;
        font-weight: 600;
        padding-top: 2rem;
        vertical-align: bottom;
        border: none;
        text-align: center;
    }
    .rcc-form th {
        font-weight: bold;
    }
    .sitemap-title h1,
    .sitemap-title h2,
    .content-title h1,
    .content-title h2,
    .content-section.profile-form form > fieldset > legend,
    .content-section.rcc-form form > fieldset > legend {
        max-width: 1200px;
        padding: 0 20px;
        margin: 0 auto;
        display: block;
        font-size: 3rem;
        line-height: 1.215;
        font-weight: 400 !important;
        color: #ffffff;
        padding-top: 55px;
        padding-bottom: 15px;
    }


    .content-section.profile-form form > fieldset > legend,
    .content-section.rcc-form form > fieldset > legend {
        width: 100%;
        margin-top: 2rem;
        margin-bottom: 2rem;
        display: block !important;
    }

    #page-content {
        display: block;
        width: 100%;
        margin: 0;
        background-color: #ffffff;
        z-index: 1000;
        /* margin-top: 125px; */
        margin-top: 88px;
    }

    .sitemap-section {
        max-width: 1200px;
        padding: 0 20px;
        margin: 0 auto;
        display: block;
    }

    .sitemap-title,
    .content-title,
    .content-section.profile-form form > fieldset > legend,
    .content-section.rcc-form form > fieldset > legend {
        background-color: #003399;
        border-bottom: 12px solid #c2c2c2;
        margin-bottom: 15px;
    }

    .sitemap-title h1 a,
    .sitemap-title h2 a,
    .content-title h1 a,
    .content-title h2 a {
        font-size: inherit;
        line-height: inherit;
        color: inherit;
        padding-top: inherit;
        padding-bottom: inherit;
        text-decoration: inherit;
    }

    #modal.video a#modal-close,
    #modal.video a#modal-close:link,
    #modal.video a#modal-close:visited {
        background-color: #992699;
    }

    #modal.video a#modal-close:focus,
    #modal.video a#modal-close:hover,
    #modal.video a#modal-close:active {
        background-color: #822082;
    }

    span.img-box {
        display: inline-block;
        vertical-align: bottom;
        margin-bottom: 0.5rem;
    }



    body#info-911 a.lang-toggle {
        float: right;
        padding: 4px 8px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        margin: 10px 0 20px 10px;
        text-decoration: none;
        font-size: 14px;
        line-height: 14px;
        border: 1px solid #992699;
    }

    body#info-911 a.lang-toggle:hover {
        color: #992699;
        border: 1px solid #003399;
    }




    .content-section.masthead {
        background-color: #f3f5fc;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
    }

    .content-section.masthead .img-box {
        margin: 0 auto;
    }

    /* shaded content section */
    .content-section.shaded {
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        background-color: #f3f5fc;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* padded content section */
    .content-section.padded {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Services option list */

    .content-section.services {
        clear: both;
    }

    dl .service-option {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    dl .service-option.alt {
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        background-color: #f3f5fc;
    }


    dl .service-option .icon {
        margin: -1rem auto -1rem auto;
        overflow: visible;
    }

    dl dd {
        margin-left: 0;
        padding-left: 0;
    }


    /* how it works */

    #how-it-works-content ul.content-list li
    {
        padding-bottom: 1.6rem;
    }

    ol.how-it-works
    {
        margin-top: 0;
        padding-left: 0;
        list-style: none;
        counter-reset:li; /* Initiate a counter */
    }

    ol.how-it-works.post-headline {
        margin-top: 3rem;
    }

    ol.how-it-works li
    {
        position: relative;
        margin-left: 8rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    ol.how-it-works li:before {
        content:counter(li); /* Use the counter as content */
        counter-increment:li; /* Increment the counter by 1 */
        position:absolute;
        margin-top: -3rem;
        top: 50%;
        left: -8rem;
        background-color: #003399;
        border-radius: 50%;
        color: #ffffff;
        font-size: 5rem;
        line-height: 5rem;
        font-weight: 600;
        width: 6rem;
        height: 6rem;
        text-align: center;
        display: inline-block;
        box-sizing:border-box;
    }

    #how-it-works-content .content-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    #how-it-works-content .content-section.intro {
        padding-top: 100px;
    }

    #how-it-works-content #placing-vco-device,
    #how-it-works-content #receiving-2line {
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        background-color: #f3f5fc;
    }

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

    #how-it-works-content .img-box.placing-calls,
    #how-it-works-content .img-box.receiving-calls-one-line,
    #how-it-works-content .img-box.receiving-calls-two-line,
    #how-it-works-content .img-box.how-hamilton-relay-rcc-works,
    #how-it-works-content .img-box.placing-calls-es,
    #how-it-works-content .img-box.receiving-calls-one-line-es,
    #how-it-works-content .img-box.receiving-calls-two-line-es,
    #how-it-works-content .img-box.how-hamilton-relay-rcc-works-es {
        margin: 0 auto;
    }

    #how-it-works-content table#captel-line-comparison {
        width: 100%;
        max-width: 100%;
    }

    #how-it-works-content table#captel-line-comparison th,
    #how-it-works-content table#captel-line-comparison td {
        padding: 1rem;
        vertical-align: top;
        text-align: left;
    }

    #how-it-works-content table#captel-line-comparison th {
        background-color: #003399;
        color: #ffffff;
    }

    #how-it-works-content table#captel-line-comparison th em {
        font-size: 1.6rem;
    }

    #how-it-works-content table#captel-line-comparison th a {
        color: #ffffff !important;
    }

    #how-it-works-content table#captel-line-comparison tr.alt {
        background-color: #f3f5fc;
    }

    #how-it-works-content .content-title.placing-calls-vasts,
    #how-it-works-content .content-title.user-training-line {
        margin-top: 2rem;
    }

    /* awards */
    ul.years {
        list-style-type: none;
        padding-left: 0;
        text-align: center;
    }

    .rcc-request form.ajax-form {
        padding-top: 0;
    }

    .rcc-request dl {
        margin-top: 0;
    }

    .rcc-request dl div {
        display: flex;
    }

    .rcc-request dd {
        width: 75%;
    }

    .rcc-request dt {
        font-weight: bold;
        flex-grow: 1;
    }


}

/* Media Queries */


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

    body {
        font-size: 1.8rem;
    }

}


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

    /* Services option list */

    dl .service-option .icon {
        float: right;
        margin: 0 0 1rem 1rem;
    }

    dl .service-option .content {
        /* width: 75%; */
        /* float: right; */
    }

    dl .service-option.alt .icon {
        /* float: right; */
    }

    dl .service-option.alt .content {
        /* float: left; */
    }

}


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

    .content-section.hamilton-icon {
        background-position: 80% 20%;
        background-repeat: no-repeat;
        top: 10%;
        right: 20%;
        background-image: url('../img/content/how-it-works/hamilton-icon.png');
    }

    /* Services option list */

    #how-it-works-content .img-box.icon {
        display: block;
        float: right;
        margin-left: 3rem;
        margin-bottom: 3rem;
        margin-top: -5rem;
    }


    /* awards */

    ul.years li {
        display: inline-block;
    }

    ul.years li .button.secondary {
        min-width: auto;
        margin-right: 1rem;
    }


    /* profile form */

    .content-section.profile-form form > fieldset > legend,
    .content-section.rcc-form form > fieldset > legend {
        margin-bottom: 50px;
    }

    .content-section.profile-form form > fieldset > p:first-of-type,
    .content-section.rcc-form form > fieldset > p:first-of-type {
        padding-top: 0;
        margin-top: 0;
    }

    .form-row.form-row-radio.data-preferred-contact-method-phone,
    .form-row.form-row-select.data-preferred-contact-method-phone-type,
    .form-row.form-row-radio.data-preferred-contact-method-fax,
    .form-row.form-row-input.data-preferred-contact-method-fax-number,
    .form-row.form-row-radio.data-making-calls-vco,
    .form-row.form-row-select.data-making-calls-vco-option,
    .form-row.form-row-radio.data-making-calls-vco2line,
    .form-row.form-row-select.data-making-calls-vco2line-option,
    .form-row.form-row-radio.data-making-calls-voice,
    .form-row.form-row-select.data-making-calls-voice-option,
    .form-row.form-row-radio.data-answering-calls-vco,
    .form-row.form-row-select.data-answering-calls-vco,
    .form-row.form-row-radio.data-answering-calls-vco2line,
    .form-row.form-row-select.data-answering-calls-vco2line,
    .form-row.form-row-radio.data-answering-calls-voice,
    .form-row.form-row-select.data-answering-calls-voice,
    .form-row.form-row-checkbox.data-relay-options-typing-buffer-speed,
    .form-row.form-row-select.data-relay-options-typing-buffer-speed-preferred,
    #data-greetings-tell em
    {
        display: inline-block;
    }

    .form-row.form-row-select.data-relay-options-typing-buffer-speed-preferred,
    #data-revoicing-repeat-options,
    #data-revoicing-assist-options,
    .form-row.form-row-textarea.data-revoicing-voice-synthesizer-device,
    .form-row.form-row-textarea.data-revoicing-call-by-name-directory,
    .form-row.form-row-input.data-revoicing-vasts-skype,
    .form-row.form-row-textarea.data-deaf-blind-communicator-device,
    .form-row.form-row-input.data-greetings-my-hello-hello,
    .form-row.form-row-input.data-greetings-first-name-name,
    #data-greetings-tell-option,
    #data-greetings-tell em
    {
        padding-left: 40px;
        margin-bottom: 2rem;
    }

    .form-row.form-row-textarea.data-revoicing-voice-synthesizer-device .form-label-textarea,
    .form-row.form-row-textarea.data-revoicing-call-by-name-directory .form-label-textarea,
    .form-row.form-row-input.data-revoicing-vasts-skype .form-label-input,
    .form-row.form-row-textarea.data-revoicing-standard-instructions .form-label-textarea,
    .form-row.form-row-textarea.data-revoicing-standard-message .form-label-textarea,
    fieldset#data-revoicing-contact legend,
    .form-row.form-row-input.data-revoicing-contact-days .form-label,
    .form-row.form-row-textarea.data-deaf-blind-communicator-device .form-label-textarea,
    .form-row.form-row-input.data-greetings-first-name-name .form-label-input,
    .form-row.form-row-input.data-greetings-my-hello-hello .form-label-input
    {
        width: 100%;
        text-align: left;
    }

    table.speed-dial-table {
        width: 100%;
    }

    table.speed-dial-table th
    {
        background-color: #003399;
        color: #ffffff;
    }

    table.speed-dial-table tr:nth-child(odd)
    {
        background-color: #f3f5fc;
    }


}


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

    /* Services option list */

    dl .service-option .icon {
        float: left;
        margin: 0;
        width: 30%;
    }

    dl .service-option .content {
        display: block;
        width: 70%;
        float: right;
    }

    body {
        font-size: 2rem;
    }

    h1,
    .content-title h1,
    .content-title h2,
    .content-section.profile-form form > fieldset > legend,
    .content-section.rcc-form form > fieldset > legend  {
        font-size: 4.2rem;
    }

    #how-it-works-content .img-box.placing-calls,
    #how-it-works-content .img-box.receiving-calls-one-line,
    #how-it-works-content .img-box.receiving-calls-two-line,
    #how-it-works-content .img-box.placing-calls-es,
    #how-it-works-content .img-box.receiving-calls-one-line-es,
    #how-it-works-content .img-box.receiving-calls-two-line-es {
        margin: -2rem 0 2rem 2rem;
        float: right;
        width: 50%;
    }

    #how-it-works-content .img-box.how-hamilton-relay-rcc-works,
    #how-it-works-content .img-box.how-hamilton-relay-rcc-works-es {
        margin: 0 4rem 2rem 0;
        float: left;
        width: 40%;
    }

}

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

    body {
        font-size: 2.2rem;
    }

    #how-it-works-content .img-box.icon {
        margin-left: 5rem;
        margin-bottom: 5rem;
    }

}







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

@media only screen {

    /* this is required when .hello-bar is displayed */
    .content-section {
        /* padding-top: 100px; */
    }

    .hello-bar {
        align-items: center;
        background: #2e2e2e;
        color: white;
        display: flex;
        font-size: 14px;
        /* height: 3.6rem; */
        justify-content: center;
        padding: 10px;
    }

    .hello-bar a {
        background: url('../img/layout/info.svg') center left / 16px no-repeat;
        color: white !important;
        font-weight: 600;
        padding-left: 24px;
        text-decoration: none;
    }

    .hello-bar a:hover {
        text-decoration: underline;
    }

    #header-placeholder {
        height: 7em;
        background-color: #ffffff;
    }

    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 90000;
    }

    #header-box {
        width: 100%;
        background-color: #ffffff;
        position: fixed;
    }

    #header-transition {
        display: none;
        width: 100%;
        height: 25px;
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0); /* IE6-9 */
        position: relative;
    }

    #header-main {
        width: 100%;
        background-color: #003399;
        position: fixed;
        /* top: 3.6rem; */
        left: 0;
        height: 5rem;
    }

    #header-stripe {
        width: 100%;
        background-color: #992699;
        height: 0.8rem;
        position: absolute;
        top: 5rem;
        left: 0;
    }

    .state #header-stripe {
        /* top: 8.6rem; */
    }

    #header-logo {
        margin-left: -5px;
        float: left;
        max-width: 170px;
        padding-bottom: 1rem;
        position: relative;
        padding-top: 3.8rem;
    }

    #header-logo img {
        width: 100%;
    }

    /* Header buttons for chat and text size */
    #header-functions {
        position: relative;
        display: block;
        text-align: right;
        padding-top: 1.2rem;
        white-space: nowrap;
    }

    .header-function {
        display: inline-block;
        color: #ffffff;
        margin-left: 1rem;
        font-size: 1.4rem;
        line-height: 1.75;
    }

    .header-function span,
    .header-function a,
    .header-function a:link,
    .header-function a:visited,
    .header-function a:hover,
    .header-function a:active {
        color: #ffffff;
        text-decoration: none;
        font-size: 1.4rem;
        line-height: 1.75;
    }

    .header-function a:hover,
    .header-function a:active {
        color: #003399;
        border-color: #003399;
        background-color: #ffffff;
    }

    #resize.header-function {
        padding: 0 0.5rem;
        -moz-border-radius: 0.7rem;
        border-radius: 0.7rem;
        border: 1px solid #ffffff;
        padding-left: 15px;
        display: none;
    }

    #resize.header-function a,
    #resize.header-function a:link,
    #resize.header-function a:visited,
    #resize.header-function a:hover,
    #resize.header-function a:active {
        display: inline-block;
        text-align: center;
        width: 2.5rem;
        padding: 0;
        margin: 0;
        border-left: 1px solid #ffffff;
    }

    html.text-size-default #resize.header-function .smaller a:hover,
    html.text-size-default #resize.header-function .smaller a:active,
    html.text-size-largest #resize.header-function .larger a:hover,
    html.text-size-largest #resize.header-function .larger a:active {
        color: #ffffff;
        border-color: #ffffff;
        background-color: #003399;
    }

    #resize.header-function .label {
        margin-right: 10px;
    }

    #chat.header-function a,
    #chat.header-function a:link,
    #chat.header-function a:visited,
    #chat.header-function a:hover,
    #chat.header-function a:active {
        display: inline-block;
        padding: 0 1.5rem;
        -moz-border-radius: 0.7rem;
        border-radius: 0.7rem;
        border: 1px solid #ffffff;
        background-color: #992699;
        font-size: 1.4rem;
        line-height: 1.75;
        font-weight: 600;
    }

    #chat.header-function a:hover,
    #chat.header-function a:active {
        border: 1px solid #822082;
        background-color: #822082;
        color: #ffffff;
    }

    #share.header-function {
        /* display: none; */
    }

    #share.header-function a,
    #share.header-function a:link,
    #share.header-function a:visited,
    #share.header-function a:hover,
    #share.header-function a:active {
        display: inline-block;
        padding: 0 1.5rem;
        -moz-border-radius: 0.7rem;
        border-radius: 0.7rem;
        border: 1px solid #ffffff;
        font-size: 1.4rem;
        line-height: 1.75;
        font-weight: 600;
        margin-right: 0;
    }

    #share.header-function a:hover,
    #share.header-function a:active {
        background-color: #ffffff;
    }

    /* Primary Navigation */
    #header-nav {
        text-align: left;
        font-size: 1.4rem;
        line-height: 1.575;
    }

    #header-nav #header-nav-links {
        clear: both;
        padding-bottom: 1px;
        margin-bottom: 20px;
        border-bottom: 4px solid #992699;
    }

    #header-nav #header-nav-links ul {
        list-style-type: none;
    }

    #header-nav #header-nav-links ul li {
        display: inline;
    }

    #header-nav.closed #header-nav-links {
        display: none;
    }

    #header-nav #header-nav-links a,
    #header-nav #header-nav-links a:link,
    #header-nav #header-nav-links a:visited {
        display: block;
        padding: 10px 0;
        text-decoration: none;
        white-space: nowrap;
        color: #000000;
        border-bottom: 1px solid #cecece;
    }

    #header-nav #header-nav-links a:hover,
    #header-nav #header-nav-links a:active {
        text-decoration: underline;
    }

    #header-nav #header-nav-links a em {
        font-style: normal;
        text-transform: uppercase;
        font-weight: 600;
    }

    #header-nav #header-nav-links .nav-arrow {
        display: none;
    }

    /* Primary Navigation Dropdown Menu Button */
    #header-nav #header-nav-menu {
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        margin-right: 12px;
        float: right;
    }

    #header-nav #header-nav-menu #nav-box {
        display: inline-block;
        padding-top: 5px;
        vertical-align: bottom;
    }

    #header-nav #header-nav-menu #nav-box .nav-box-bar {
        display: block;
        width: 35px;
        height: 4px;
        margin: 3px 0;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

    #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: #992699;
    }

    #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: #822082;
    }

    #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-left: 2px;
    }

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

}

/* Media Queries */

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

    #share.header-function {
        display: inline-block;
    }

    #resize.header-function {
        display: inline-block;
    }

}

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

    #header-placeholder {

    }

    #header-logo {
        padding-top: 2rem;
        max-width: 300px;
    }

    #header-functions {
        padding-top: 1rem;
    }

    /* Primary Navigation */

    #header-nav {
        margin-top: 2em;
        width: 100%;
        text-align: right;
        display: block;
        padding-bottom: 50px;
    }

    #header-nav #header-nav-links {
        clear: none;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
        display: inline !important;
    }

    #header-nav #header-nav-links a,
    #header-nav #header-nav-links a:link,
    #header-nav #header-nav-links a:visited {
        padding: 0 0 0 3rem;
        border-bottom: none;
        display: inline;
    }

    #header-nav #header-nav-links .nav-arrow {
        display: inline;
        color: #e1e1e1;
        padding-left: 0.5rem;
        margin-right: -2.5rem;
    }

    /* Primary Navigation Dropdown Menu Button */

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

}

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

    #header-functions {
        padding-top: 0.8rem;
    }

}





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

@media only screen {

    #footer-nav-box {
        display: block;
        width: 100%;
        margin: 15px 0 0 0;
        padding-top: 30px;
        padding-bottom: 20px;
        background-color: #464646;
        border-top: 2px solid #992699;
    }

    #footer-logo {
        width: 100%;
        max-width: 198px;
        margin-bottom: 20px;
    }

    #footer-nav .nav-group {
        padding: 0;
        margin: 0 0 20px 0;
        display: inline-block;
        vertical-align: top;
        width: 49%;
    }

    #footer-nav .nav-group.brand {
        width: 198px;
        padding-right: 30px;
        display: block;
        margin: 0 auto;
    }

    #footer-nav .nav-group ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #footer-nav .nav-group ul li {
        margin: 0;
        padding: 0 0.875rem 0.875rem 0;
        font-size: 1.4rem;
        line-height: 1.6rem;
    }

    #footer-nav .nav-group ul li a,
    #footer-nav .nav-group ul li a:link,
    #footer-nav .nav-group ul li a:visited,
    #footer-nav .nav-group ul li a:hover,
    #footer-nav .nav-group ul li a:active {
        color: #e1e1e1;
        text-decoration: none;
        padding: 0;
        margin: 0;
    }

    #footer-nav .nav-group ul li a:hover,
    #footer-nav .nav-group ul li a:active {
        text-decoration: underline;
    }

    #footer-nav .nav-group ul li a.nav-911-info,
    #footer-nav .nav-group ul li a.nav-911-info:link,
    #footer-nav .nav-group ul li a.nav-911-info:visited,
    #footer-nav .nav-group ul li a.nav-911-info:active,
    #footer-nav .nav-group ul li a.nav-911-info:hover,
    #footer-nav .nav-group ul li a.nav-911-info:focus {
        display: inline-block;
        padding: 0.5rem 1rem;
        -moz-border-radius: 0.7rem;
        border-radius: 0.7rem;
        text-decoration: none;
        border: 1px solid #4a000e;
        background-color: #720011;
        text-align: center;
        color: #ffffff;
        font-size: 1.4rem;
        line-height: 1.6rem;
        margin-left: -1rem;
    }

    #footer-nav .nav-group ul li a.nav-911-info:hover,
    #footer-nav .nav-group ul li a.nav-911-info:active,
    #footer-nav .nav-group ul li a.nav-911-info:focus {
        text-decoration: none !important;
        background-color: #9b0011;
    }

    #footer-nav .nav-group ul li.nav-group-title {
        font-size: 1.5rem;
        padding-bottom: 10px;
    }

    #footer-nav .nav-group ul li.nav-group-title a,
    #footer-nav .nav-group ul li.nav-group-title a:link,
    #footer-nav .nav-group ul li.nav-group-title a:visited,
    #footer-nav .nav-group ul li.nav-group-title a:hover,
    #footer-nav .nav-group ul li.nav-group-title a:active {
        color: #ffffff;
        font-weight: 600;
        text-transform: uppercase;
    }

    #footer-back-to-top {
        margin-top: 2rem;
        font-size: 1.4rem;
        line-height: 1.6rem;
        text-align: center;
    }

    #footer-back-to-top a,
    #footer-back-to-top a:link,
    #footer-back-to-top a:visited,
    #footer-back-to-top a:hover,
    #footer-back-to-top a:active {
        color: #e1e1e1;
        text-decoration: none;
        display: inline-block;
        height: 37px;
        border-bottom: 1px solid transparent;
        background: transparent url('../img/layout/back-to-top.png') 0 0 no-repeat;
        white-space: nowrap;
        padding: 4px 35px 0 35px;
    }

    #footer-back-to-top a:hover,
    #footer-back-to-top a:active {
        background-color: transparent;
        text-decoration: underline;
    }

    /* Social Media Icons */
    #social-media-sharing {
        padding: 3rem;
        background-color: #992699;
        margin: 0;
        -webkit-border-radius: 1rem;
        -moz-border-radius: 1rem;
        border-radius: 1rem;
    }

    #social-media-sharing h4,
    #social-media-sharing ul li a {
        color: #ffffff !important;
    }

    #social-media-sharing ul {
        list-style-type: none;
        padding-left: 0;
    }

    #social-media-sharing ul li {
        margin-bottom: 1rem;
        min-height: 30px;
    }

    #social-media-sharing ul li.facebook {
        background: transparent url('../img/layout/social-facebook.png') 0 5px no-repeat;
    }

    #social-media-sharing ul li.twitter {
        background: transparent url('../img/layout/social-twitter.png') 0 5px no-repeat;
    }

    #social-media-sharing ul li.google {
        background: transparent url('../img/layout/social-google.png') 0 5px no-repeat;
    }

    #social-media-sharing ul li.linkedin {
        background: transparent url('../img/layout/social-linkedin.png') 0 5px no-repeat;
    }

    #social-media-sharing ul li a {
        padding-left: 40px;
    }

    #footer-nav .nav-group.brand ul {
        display: block;
        width: 100%;
        max-width: 198px;
        text-align: center;
    }

    #footer-nav .nav-group.brand ul li {
        display: inline-block;
        width: 26px;
        height: 27px;
        margin-right: 6px;
        padding: 0;
    }

    #footer-nav .nav-group.brand ul li a,
    #footer-nav .nav-group.brand ul li a:link,
    #footer-nav .nav-group.brand ul li a:visited,
    #footer-nav .nav-group.brand ul li a:hover,
    #footer-nav .nav-group.brand ul li a:active {
        display: block;
        width: 26px;
        height: 27px;
        border-bottom: 1px solid transparent;
        text-indent: -9999em;
        background-color: rgba(70, 70, 70, 0.4);
    }

    #footer-nav .nav-group.brand ul li a:hover,
    #footer-nav .nav-group.brand ul li a:active {
        border-bottom: 1px solid #ffffff;
        background-color: transparent;
    }

    #footer-nav .nav-group.brand ul li.facebook {
        background: transparent url('../img/layout/social-facebook.png') 0 0 no-repeat;
    }

    #footer-nav .nav-group.brand ul li.twitter {
        background: transparent url('../img/layout/social-twitter.png') 0 0 no-repeat;
    }

    #footer-nav .nav-group.brand ul li.instagram {
        background: transparent url('../img/layout/social-instagram.png') 0 0 no-repeat;
    }

    #footer-nav .nav-group.brand ul li.linkedin {
        background: transparent url('../img/layout/social-linkedin.png') 0 0 no-repeat;
    }

    /* Website mandatories */
    .mandatories {
        color: #e1e1e1;
        font-size: 1.4rem;
        padding: 15px 0;
    }

    .mandatories ol,
    .mandatories ul {
        padding: 0;
        margin: 0;
    }

    .mandatories ol li,
    .mandatories ul li {
        padding-bottom: 7px;
    }

    .mandatories a,
    .mandatories a:link,
    .mandatories a:visited,
    .mandatories a:hover,
    .mandatories a:active {
        color: #e1e1e1;
    }

    #page-mandatories {
        padding-top: 0;
        padding-bottom: 0;
        background-color: #7d7d7d;
    }

    #page-mandatories ol,
    #page-mandatories ul {
        padding-top: 15px;
        padding-left: 0;
        list-style-type: none;
    }

    #page-mandatories ul.footnotes {
        list-style-type: none;
    }

    #page-mandatories ul.footnotes sup {
        margin-left: -13px;
        width: 13px;
        display: inline-block;
    }

    /* landing page footer */
    #footer #page-mandatories {
        padding-bottom: 2rem;
    }

    #footer #page-mandatories ol li,
    #footer #page-mandatories li li {
        margin-bottom: 0.75rem;
    }

}

/* Media Queries */

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

    #footer-nav-box {
        padding-bottom: 0;
    }

    #footer-nav .nav-group {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
        width: 19%;
        min-width: 4.25em;
        padding-bottom: 30px;
    }

    #footer-nav .nav-group.services {
        /* width: 22%; */
    }

    #footer-nav .nav-group.community {
        width: 22%;
    }

    #footer-nav .nav-group.about {
        width: 16%;
    }

    #footer-nav .nav-group.policies {
        /* width: 22%; */
    }

    #footer-nav .nav-group.brand {
        padding: 0;
        margin: 0;
        display: inline-block;
        float: right;
    }

    #footer-back-to-top {
        float: right;
        margin-top: -4rem;
        margin-bottom: 0;
    }

    #footer-back-to-top a,
    #footer-back-to-top a:link,
    #footer-back-to-top a:visited,
    #footer-back-to-top a:hover,
    #footer-back-to-top a:active {
        padding-right: 0;
    }

    /* Website mandatories */

    .mandatories ol li,
    .mandatories ul li {
        padding-bottom: 0;
    }

    #site-mandatories ul {
        list-style-type: none;
    }

    #site-mandatories ul li {
        width: 59%;
    }

    #site-mandatories ul li.copyright {
        float: right;
        list-style-type: none;
        display: inline-block;
        text-align: right;
        width: 39%;
    }

    /* landing page footer */
    #footer #page-mandatories {
        width: 60%;
        float: left;
        margin-top: -2rem;
    }

}














/* ==========================================================================
   CUSTOM Forms
   ========================================================================== */

@media only screen {

    .ajax-form-content.response {
        border: 1px solid #003399;
        background-color: #e5eaf5;
    }

    p.required-fields.error,
    .ajax-form-info .error,
    .ajax-form-info ul.error a {
        color: #cf1935;
    }

    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    input[type="file"],
    select,
    textarea {
        color: #5e5c5b;
        border: 1px solid #c7cdcd;
        background-color: #f9fafa;
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    input[type="text"].error,
    input[type="password"].error,
    input[type="date"].error,
    input[type="datetime"].error,
    input[type="datetime-local"].error,
    input[type="month"].error,
    input[type="week"].error,
    input[type="email"].error,
    input[type="number"].error,
    input[type="search"].error,
    input[type="tel"].error,
    input[type="time"].error,
    input[type="url"].error,
    input[type="file"].error,
    select.error,
    textarea.error {
        color: #5e5c5b;
        border: 1px solid #992699;
        background-color: #fef2e8;
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="date"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="month"]:focus,
    input[type="week"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="time"]:focus,
    input[type="url"]:focus,
    input[type="file"]:focus,
    select:focus,
    textarea:focus {
        border-color: #7f99cc;
        background: #f2f5fa;
        -webkit-box-shadow: 0 0 5px #7f99cc;
        -moz-box-shadow: 0 0 5px #7f99cc;
        box-shadow: 0 0 5px #7f99cc;
    }

    .form-row-checkbox a.checkbox-link {
        color: #c7cdcd;
        border: 1px solid #c7cdcd;
        background-color: #f9fafa;
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .form-row-checkbox a.checkbox-link.box-is-focused,
    .form-row-checkbox a.checkbox-link:hover,
    .form-row-checkbox a.checkbox-link:active {
        border-color: #992699;
        background-color: #ffffff;
        color: #992699;
        -webkit-box-shadow: 0 0 5px #7f99cc;
        -moz-box-shadow: 0 0 5px #7f99cc;
        box-shadow: 0 0 5px #7f99cc;
    }

    .form-row-checkbox a.checkbox-link.box-is-checked {
        border-color: #003399;
        background-color: #992699;
        color: #ffffff;
    }

    .form-row-checkbox a.checkbox-link.box-is-checked span,
    .form-row-checkbox a.checkbox-link.box-is-checked.box-is-focused span,
    .form-row-checkbox a.checkbox-link.box-is-checked:hover span,
    .form-row-checkbox a.checkbox-link.box-is-checked:active span {
        color: #ffffff;
    }

    .form-row-checkbox a.checkbox-link.box-is-focused span,
    .form-row-checkbox a.checkbox-link:hover span,
    .form-row-checkbox a.checkbox-link:active span {
        color: #992699;
    }

}









/* ==========================================================================
   Chat
   ========================================================================== */

@media only screen {

    body.support-launch-cobrowse-session .content-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    #chat-overlay {
        background-image: url(../img/layout/overlay-background.png);
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 999970;
        display: none;
    }

    #chat-modal {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 500px;
        height: 500px;
        overflow-x: hidden;
        overflow-y: hidden;
        background-color: #ffffff;
        -moz-border-radius: 10px;
        border-radius: 10px;
        border: 5px solid #992699;
        z-index: 999980;
        display: none;
    }

    html.text-size-default #chat-modal {
        font-size: 100%;
    }

    html.text-size-large #chat-modal {
        font-size: 83.3%;
    }

    html.text-size-larger #chat-modal {
        font-size: 69.4%;
    }

    html.text-size-largest #chat-modal {
        font-size: 62.5%;
    }

    #chat-modal #chat-standard-hours {
        padding: 20px 40px;
    }

    #chat-modal #chat-standard-hours h2 {
        padding-bottom: 20px;
    }

    #chat-modal #chat-form {
        padding-left: 20px;
        padding-right: 20px;
    }

    #chat-modal #chat-form .fieldset-fields .form-row.data-contact-name-first {
        display: inline-block;
        width: 37%;
    }

    #chat-modal #chat-form .fieldset-fields .form-row.data-contact-name-last {
        display: inline-block;
        width: 61%;
    }

    #chat-modal #chat-form .form-row.data-incident-customfields-c-service-inquiry .form-label,
    #chat-modal #chat-form .form-row.data-incident-customfields-c-service-inquiry .form-field {
        display: block;
        width: 100%;
        text-align: left;
    }

}

/* media queries */

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

    #chat-modal {
        max-height: calc(100% - 10px);
        width: 90%;
    }

}

@media only screen and (max-width: 599px) {

    html.text-size-large #chat-modal,
    html.text-size-larger #chat-modal,
    html.text-size-largest #chat-modal {
        font-size: 100%;
    }

}

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

    #chat-modal #chat-form .form-row .form-label,
    #chat-modal #chat-form .form-row .form-label-submit {
        width: 15%;
    }

}



/* ==========================================================================
   Print classes
   ========================================================================== */

@media only print {

    /* website */

    #header-functions,
    #header-nav,
    #footer-nav,
    #chat-modal,
    #footer-back-to-top,
    .modal-content .video-embed-box {
        display: none;
    }

    #header-logo {
        margin-top: -150px;
    }

    #page-mandatories {
        margin-top: 20px;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
    }

    body.modal-is-open #header-logo img {
        max-width: 150px !important;
    }

    #header-logo a[href]::after {
        content: none !important;
    }

}