div#echo-accessiblity {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-image: url(../images/accessiblity.svg);
    background-size: 24px; background-repeat: no-repeat;
    background-position: center;
}

div#echo-accessiblity.on {
    background-image: url(../images/arrow-prev.svg);
}

div#echo-accessiblity,
div#echo-accessiblity-controls {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;    
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
    z-index: 99999;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;   
}

div#echo-accessiblity-controls {
    padding: 30px 30px 30px 60px;
    max-width: 120px;
}

div#echo-accessiblity-controls select {
    display: block;
    border: 1px solid #ddd;
    box-sizing: content-box;
    width: 100%;
}

/* Font control settings */
html body.echo-a-large,
html body.echo-a-large .cc-message,
html body.echo-a-large h1,
html body.echo-a-large h2,
html body.echo-a-large h3,
html body.echo-a-large h4,
html body.echo-a-large h5,
html body.echo-a-large h6,
html body.echo-a-large p,
html body.echo-a-large li:not(.a11y-toolbar-list-item),
html body.echo-a-large label,
html body.echo-a-large input,
html body.echo-a-large select,
html body.echo-a-large textarea,
html body.echo-a-large legend,
html body.echo-a-large code,
html body.echo-a-large pre,
html body.echo-a-large dd,
html body.echo-a-large dt,
html body.echo-a-large blockquote {
    font-size: 115% !important;
    line-height: 1.4em !important;
}

html body.echo-a-large h1,
html body.echo-a-large h2,
html body.echo-a-large h3,
html body.echo-a-large h4,
html body.echo-a-large h5,
html body.echo-a-large h6 {
    font-size: 220%!important;
    line-height: 1.4em !important;
}

/* Font control settings */
html body.echo-a-larger,
html body.echo-a-larger .cc-message,
html body.echo-a-larger h1,
html body.echo-a-larger h2,
html body.echo-a-larger h3,
html body.echo-a-larger h4,
html body.echo-a-larger h5,
html body.echo-a-larger h6,
html body.echo-a-larger p,
html body.echo-a-larger li:not(.a11y-toolbar-list-item),
html body.echo-a-larger label,
html body.echo-a-larger input,
html body.echo-a-larger select,
html body.echo-a-larger textarea,
html body.echo-a-larger legend,
html body.echo-a-larger code,
html body.echo-a-larger pre,
html body.echo-a-larger dd,
html body.echo-a-larger dt,
html body.echo-a-larger blockquote {
    font-size: 125% !important;
    line-height: 1.4em !important;
}

html body.echo-a-larger h1,
html body.echo-a-larger h2,
html body.echo-a-larger h3,
html body.echo-a-larger h4,
html body.echo-a-larger h5,
html body.echo-a-larger h6 {
    font-size: 280%!important;
    line-height: 1.4em !important;
}

@media screen and (max-width: 600px) {
    html body.echo-a-large,
    html body.echo-a-large h1,
    html body.echo-a-large h2,
    html body.echo-a-large h3,
    html body.echo-a-large h4,
    html body.echo-a-large h5,
    html body.echo-a-large h6,
    html body.echo-a-large p,
    html body.echo-a-large li:not(.a11y-toolbar-list-item),
    html body.echo-a-large label,
    html body.echo-a-large input,
    html body.echo-a-large select,
    html body.echo-a-large textarea,
    html body.echo-a-large legend,
    html body.echo-a-large code,
    html body.echo-a-large pre,
    html body.echo-a-large dd,
    html body.echo-a-large dt,
    html body.echo-a-large blockquote {
        font-size: 105% !important;
        line-height: 1.4em !important;
    }

    html body.echo-a-large h1,
    html body.echo-a-large h2,
    html body.echo-a-large h3,
    html body.echo-a-large h4,
    html body.echo-a-large h5,
    html body.echo-a-large h6 {
        font-size: 210%!important;
        line-height: 1.4em !important;
    }

    /* Font control settings */
    html body.echo-a-larger,
    html body.echo-a-larger h1,
    html body.echo-a-larger h2,
    html body.echo-a-larger h3,
    html body.echo-a-larger h4,
    html body.echo-a-larger h5,
    html body.echo-a-larger h6,
    html body.echo-a-larger p,
    html body.echo-a-larger li:not(.a11y-toolbar-list-item),
    html body.echo-a-larger label,
    html body.echo-a-larger input,
    html body.echo-a-larger select,
    html body.echo-a-larger textarea,
    html body.echo-a-larger legend,
    html body.echo-a-larger code,
    html body.echo-a-larger pre,
    html body.echo-a-larger dd,
    html body.echo-a-larger dt,
    html body.echo-a-larger blockquote {
        font-size: 115% !important;
        line-height: 1.4em !important;
    }

    html body.echo-a-larger h1,
    html body.echo-a-larger h2,
    html body.echo-a-larger h3,
    html body.echo-a-larger h4,
    html body.echo-a-larger h5,
    html body.echo-a-larger h6 {
        font-size: 270%!important;
        line-height: 1.4em !important;
    }
}


/* Echo accessiblity */
html body.echo-a-dark .textLink,
html body.echo-a-dark {
    color: #fff !important;
}

html body.echo-a-dark .customerBlock .box,
html body.echo-a-dark .accBox h3,
html body.echo-a-dark .counterBoxes .box {
    background-color: #0a2030 !important;
}

html body.echo-a-dark .block.flexText.hasImg:before {
    background-color: rgba(0, 0, 0, 0.8);
}

html body.echo-a-dark .boxesBlock .grid .box .textLink,
html body.echo-a-dark .boxesBlock .grid .box i,
html body.echo-a-dark .customerBlock .box,
html body.echo-a-dark h1,
html body.echo-a-dark h2,
html body.echo-a-dark h3,
html body.echo-a-dark h4 {
    color: #fff;
}

html body.echo-a-dark .textfootc span,
html body.echo-a-dark .addressc span,
html body.echo-a-dark .telcont span,
html body.echo-a-dark .global span {
    color: #fff !important;
}

html body.echo-a-dark .orangeBg,
html body.echo-a-dark .banner .scrollTo {
    background-color: #ff2d07;
}

html body.echo-a-dark,
html body.echo-a-dark .lGreyBg,
html body.echo-a-dark .signUpBlock .signUp,
html body.echo-a-dark .block,
html body.echo-a-dark .partnerBlock,
html body.echo-a-dark .breadCrumb,
html body.echo-a-dark .boxesBlock .grid .box,
html body.echo-a-dark .boxesBlock,
html body.echo-a-dark .whiteBg,
html body.echo-a-dark .default,
html body.echo-a-dark .whiteBoxes .box {
    background-color: #0a2030;
    background-color: #000000;
}

html body.echo-a-dark .jobsList .box h2 a,
html body.echo-a-dark form label,
html body.echo-a-dark .partnerTable .box p i,
html body.echo-a-dark .partnerTable .box li i,
html body.echo-a-dark.page-template-partners .partnerBlock .results strong,
html body.echo-a-dark.page-template-careers .partnerBlock .results strong,
html body.echo-a-dark .whiteBoxes .box p {
    color: #ddd;
}

html body.echo-a-dark .newsSlide .box {
    color: #fff;
    display: block;
    background: #222;
}

html body.echo-a-dark .button,
html body.echo-a-dark a.button,
html body.echo-a-dark form button,
html body.echo-a-dark input[type="submit"] {
    background-color: #94fff6;
}

html body.echo-a-dark .whiteBoxes .box .icon,
html body.echo-a-dark .product-key-features .icon,
html body.echo-a-dark iframe.pardotform {
    background: #fff;
}

html body.echo-a-dark .whiteBoxes .box .icon,
html body.echo-a-dark .product-key-features .icon {
    padding: 15px;
}


html body.echo-a-dark .searchForm form input[type="submit"] {
    background-color: transparent;
}


/* echo-accessiblity widget */


div#echo-accessiblity-controls label {
    display: block;
    padding: 7px 0;
    color: #0a2030;
}

div#echo-accessiblity-controls label,
div#echo-accessiblity-controls select {
    font-size: 13px !important;
}

div#echo-accessiblity-controls {
    display: none;
}

/* Snags */
body.echo-a-larger .prodSlider .box .inner:hover .content,
body.echo-a-larger .prodBlock.mainLoop .box .inner:hover .content,
body.echo-a-large .prodSlider .box .inner:hover .content,
body.echo-a-large .prodBlock.mainLoop .box .inner:hover .content {
    overflow: auto;
}

body.echo-a-larger .prodSlider .box p.textLink,
body.echo-a-larger .prodBlock.mainLoop .box p.textLink, 
body.echo-a-large .prodSlider .box p.textLink,
body.echo-a-large .prodBlock.mainLoop .box p.textLink {
    position: relative;
    left: auto;
    bottom: auto;
}

body.echo-a-larger .resIcons .resIcon,
body.echo-a-large .resIcons .resIcon {
    width: 100%;
}

body.echo-a-larger .prodGrid,
body.echo-a-larger .prodGrid,
body.echo-a-larger .customerBlock .grid,
body.echo-a-larger footer.mainFoot .menus,
body.echo-a-larger .searchResults .grid,
body.echo-a-large .searchResults .grid,
body.echo-a-larger .partnerTable,
body.echo-a-large .partnerTable,
body.echo-a-larger .prodLoop,
body.echo-a-large .prodLoop,
body.echo-a-large .whiteBoxes .grid,
body.echo-a-larger .whiteBoxes .grid {
    grid-template-columns: 1fr;
}

body.echo-a-larger .partnerBlock .filters h4,
body.echo-a-large .partnerBlock .filters h4,
body.echo-a-large .partnerBlock .filters .searchandfilter ul li>label.sf-label-checkbox,
body.echo-a-larger .partnerBlock .filters .searchandfilter ul li>label.sf-label-checkbox,
body.echo-a-larger .partnerBlock .filters .searchandfilter ul li ul.children li label,
body.echo-a-large .partnerBlock .filters .searchandfilter ul li ul.children li label {
    font-size: 20px !important;
}

body.echo-a-dark .inner.fiRight.animate.fadeInRight p span,
body.echo-a-dark .inner.fiRight.animate.fadeInRight p {
    background: transparent !important;
    color: #ffffff !important;
}

body.echo-a-dark.single-jobs .jTitle strong,
body.echo-a-dark .mainPost a,
body.echo-a-dark > *:not(header):not(footer) a:not(.button),
body.echo-a-dark p.date,
body.echo-a-dark [style*="color"],
body.echo-a-dark .bio .bioBox p.jtitle,
body.echo-a-dark .textBlock.darkImg.whiteBg *,
body.echo-a-dark .textBlock.darkImg.whiteBg {
    color: #ffffff !important;
}

body.echo-a-dark footer.mainFoot * { color: #000 !important; }

body.echo-a-dark .bio .bioBox {
    background-color: #999;
}


body.echo-a-dark .mainPost a.button {
    background-color: #94fff6 !important;
    color: #000 !important;
}

body.echo-a-dark .button.outline.blackoLine:hover,
body.echo-a-dark a.button.outline.blackoLine:hover,
body.echo-a-dark form button.outline.blackoLine:hover,
body.echo-a-dark input[type="submit"].outline.blackoLine:hover {
    background: #fff !important;
    color: #000 !important;
}

body.echo-a-dark .searchResults .box p.postType {
    background: #ff2d07;
}

body.echo-a-dark .popMenu {
    background: #000 !important;
}

body.echo-a-dark .wp-image-3048 {
    background: #ffffff !important;
    padding: 15px;
}

@media screen and (max-width: 600px) {
        
    div#echo-accessiblity,
    div#echo-accessiblity-controls {
        transform: none;
        top: auto;
        bottom: 15px;
    }
}