/* accessible css */

:root {
    --accessible-link-border-color: blue; 
    --accessible-link-bg-color: #ccffff; 
    --accessible-contrast-color: black;
    --accessible-contrast-bg-color: white;
}

.accessible-menu {
    position: fixed;
    z-index: 1; /* Stay on top */
    top: 60px;
    left: 0;
    width: 0px;
    height: auto; /*33.5em;*/

    background-color: white;  
    
    overflow: hidden; /* Disable horizontal scroll */
    transition: width 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
.show-accessible-menu {
    border: 1px blue solid;
    width: 13.5rem;
}
.accessible-menu p {
    padding-right: 5px;
}

.accessible-menu a {
    margin: 5px;
    padding: 8px 8px 8px 32px;

    text-decoration: none;
    font-size: 1.1rem;
    /*color: #818181;*/
    width: 195px;
    display: block;
    overflow: hidden; /* Disable horizontal scroll */
    border: 1px solid transparent;
    
}

.accessible-menu a:hover {
    border: 1px dashed black;
}

.accessible-menu-link i {
    margin-left: 5px;
}

.accessible-btn {
    position: fixed;
    z-index: 1; /* Stay on top */
    top: 60px;
    left: 0px;

    background-color: DodgerBlue; /* Blue background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 10px; /* Some padding */
    font-size: 2em;  /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;

    transition: left 0.5s;
}

.show-accessible-btn {
    left: 13.5rem;
}

.bigfontsize1 {
    font-size: 110%;
}

.bigfontsize2 {
    font-size: 120%;
}

.bigfontsize3 {
    font-size: 130%;
}

/* highcontrast */
.highcontrast,
.highcontrast a,
.highcontrast button,
.highcontrast .accessible-menu,
.highcontrast .karin-footer-bar,
.highcontrast .recTablinks,
.inverse,
.inverse a,
.inverse button,
.inverse .mid-footer p,
.inverse .top-contact-bar,
.inverse .accessible-menu,
.inverse .karin-footer-bar,
.inverse .recTablinks 
{
    background-color: var(--accessible-contrast-bg-color);
    color: var(--accessible-contrast-color);
}

.highcontrast button,
.inverse button {
    border: 2px solid var(--accessible-contrast-color);
}

.highcontrast .page-header {
    border: 1px solid var(--accessible-contrast-color);
}

.highcontrast .article-btn {
    border: 1px solid var(--accessible-contrast-bg-color);
}
.highcontrast .article-btn.active-article {
    border: 1px solid var(--accessible-contrast-color);
}

/* Full-width input fields */
.highcontrast .left-footer input[type=text],
.highcontrast .left-footer input[type=email],
.highcontrast .left-footer #location,
.inverse .left-footer input[type=text],
.inverse .left-footer input[type=email],
.inverse .left-footer #location {
    background: var(--accessible-contrast-bg-color);
    color: var(--accessible-contrast-color);
    border: 1px solid var(--accessible-contrast-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875em; 
}

.highcontrast .footer,
.inverse .footer {
    height: auto;
    background-color: var(--accessible-contrast-bg-color);
    color: var(--accessible-contrast-color);
    background-image: none;
    border: 1px solid var(--accessible-contrast-color);
}


.highcontrast .tab-content,
.highcontrast .article-title,
.highcontrast .article-content,
.inverse .article-title,
.inverse .article-content,
.inverse .tab-content {
    background-color: var(--accessible-contrast-bg-color);
    color: var(--accessible-contrast-color);
    border: 1px solid var(--accessible-contrast-color);
}

.highcontrast .tab-btn,
.inverse .tab-btn {
    background-color: var(--accessible-contrast-bg-color);
    color: var(--accessible-contrast-color);
    border: 1px solid transparent;
}

.highcontrast .tab-btn:hover,
.inverse .tab-btn:hover {
    border-radius: 0px;
    border-top: 1px solid var(--accessible-contrast-color);
}

.highcontrast .active-tab,
.inverse .active-tab {
    position: relative;
    border: 1px solid var(--accessible-contrast-color);
}

.highcontrast button.active-tab:before,
.inverse button.active-tab:before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -2px;
    width: 100%;
    height: 2px;
    z-index: 99;
    background-color: var(--accessible-contrast-bg-color);
}

.highcontrast .article-title,
.inverse .article-title {
    position: relative;
}

.highcontrast .article-is-open:before,
.inverse .article-is-open:before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -2px;
    width: calc(100% - 100px);
    height: 2px;
    z-index: 99;
    background-color: var(--accessible-contrast-bg-color);
}

/* Create an active/current "tab button" class */
.highcontrast .rec-tab button,
.inverse .rec-tab button {
    border: 1px solid transparent;
}

.highcontrast .rec-tab button.active,
.inverse .rec-tab button.active {
    position: relative;
    background-color: var(--accessible-contrast-bg-color);
    color: var(--accessible-contrast-color);
    border: 1px solid var(--accessible-contrast-color);
}

.highcontrast .rec-tab button.active:before,
.inverse .rec-tab button.active:before {
    content: "";
    position: absolute;
    top: 0px;
    left: -3px;
    width: 3px;
    height: 100%;
    z-index: 99;
    background-color: var(--accessible-contrast-bg-color);
}

.highcontrast .rec-tab button:hover,
.inverse .rec-tab button:hover {
    background-color: var(--accessible-contrast-bg-color);
    color: var(--accessible-contrast-color);
    border-radius: 0px;
    border-right: 3px solid var(--accessible-contrast-color);
}

.highcontrast .recImgs {
    filter: grayscale(100%) contrast(500%) invert(100%);
    border: 2px solid black;
}

.inverse .recImgs {
    filter: grayscale(100%) contrast(500%);
    border: 2px solid black;
}


.highcontrast .contact-row-left input[type=text],
.highcontrast .contact-row-left input[type=email],
.highcontrast .contact-row-left #location,
.highcontrast .contact-row-left textarea,
.inverse .contact-row-left input[type=text],
.inverse .contact-row-left input[type=email],
.inverse .contact-row-left #location,
.inverse .contact-row-left textarea  {
    background: var(--accessible-contrast-bg-color);
    color: var(--accessible-contrast-color);
    border-radius: 5px;
    border: 1px solid var(--accessible-contrast-color);
}

.highcontrast .contact-footer,
.inverse .contact-footer {
    border-top: 2px solid var(--accessible-contrast-color);
}

.highcontrast .contact-footer p,
.inverse .contact-footer p {
    color:var(--accessible-contrast-color); 
}

.highcontrast .accessible-menu a:hover {
    border: 1px dashed var(--accessible-contrast-color);
}

.underlineLinks a {
    text-decoration: underline;
}

.grayfilter img,
.grayfilter button,
.grayfilter .accessible-menu,
.grayfilter .accessible-btn,
.grayfilter .topnav,
.grayfilter .before-footer
{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.readablefont {
    font-family: Verdana, Geneva, sans-serif;
}

/* big cursors */
.bigblackcursor,
.bigblackcursor .left-footer #location,
.bigblackcursor .contact-row-left #location {
    cursor: url("../pic/cursors/arrow.png") 15 8, auto;
}
.bigblackcursor a,
.bigblackcursor button,
.bigblackcursor .dot,
.bigblackcursor .article-title,
.bigblackcursor .accessible-btn,
.bigblackcursor .contact-row-left .btn,
.bigblackcursor .left-footer .btn {
    cursor: url("../pic/cursors/black-hand.png") 15 8, auto;
}


.bigwhitecursor,
.bigwhitecursor .left-footer #location,
.bigwhitecursor .contact-row-left #location {
    cursor: url("../pic/cursors/white-arrow.png") 15 8, auto;
}
.bigwhitecursor a,
.bigwhitecursor button,
.bigwhitecursor .dot,
.bigwhitecursor .article-title,
.bigwhitecursor .accessible-btn,
.bigwhitecursor .contact-row-left .btn,
.bigwhitecursor .left-footer .btn {
    cursor: url("../pic/cursors/white-hand.png") 15 8, auto;
}


.zoomout {
    width: 50%;
    
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
    
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.stopFlick .banner-figures {
    -webkit-animation: none;
    animation: none;
}

.stopFlick .banner-slider-dots {
    display: block;
}

.stopFlick #accessible-stop-flick-link,
.bigfontsize #accessible-big-font-link,
.highcontrast #accessible-contrast-high-link,
.inverse #accessible-contrast-inverse-link,
.grayfilter #accessible-contrast-gray-link,
.underlineLinks #accessible-show-links-link,
.readablefont #accessible-readable-font-link,
.zoomout #accessible-zoom-out-link, 
.bigwhitecursor #accessible-big-cursor-white-link,
.bigblackcursor #accessible-big-cursor-black-link {
    border: 1px solid var(--accessible-link-border-color);
    background-color: var(--accessible-link-bg-color);
}

@media only screen and (max-width: 1000px) {
    .highcontrast .article-is-open:before {
        width: 100%;
    }

    .inverse .article-is-open:before {
        width: 100%;
    }
}


@media only screen and (max-width: 860px) {
    .highcontrast .rec-tab button.active:before,
    .inverse .rec-tab button.active:before {
        content: none;
    }
}

@media only screen and (max-width: 600px) {
    /* For mobile phones: */

    .highcontrast .top-contact-bar,
    .inverse .top-contact-bar {
        border-bottom: 1px solid var(--accessible-contrast-color);
    }

    .highcontrast .topnav a,
    .inverse .topnav a {
        background-color: var(--accessible-contrast-bg-color);
        border: 1px solid var(--accessible-contrast-color);
        border-radius: 5px;
    }

    /*.highcontrast .row,
    .inverse .row {
        padding-top: 36px;
    }*/

    .highcontrast .extra-padding,
    .inverse .extra-padding {
        padding-top: 168px;
    }
    
    .highcontrast .topnav a.active,
    .inverse .topnav a.active {
        background-color: var(--accessible-contrast-bg-color);
        color: var(--accessible-contrast-color);
        border-top: 2px solid #c2ad30;
        border-bottom: 2px solid #c2ad30;
    }

    .highcontrast .rec-tab button:hover,
    .inverse .rec-tab button:hover {
        background-color: var(--accessible-contrast-bg-color);
        color: var(--accessible-contrast-color);
        border-radius: 10px;
        border: 1px solid var(--accessible-contrast-color);
    }
    
    .highcontrast .rec-tab button.active:before,
    .inverse .rec-tab button.active:before  {
        content: none;
    }

}