:root {
    --green    : #007d40;
    --text-grey: #585858;
    --swiper-theme-color: #e7e7e7;
}

html,
body {
    padding        : 0;
    margin         : 0;
    background     : white;
    font-family    : sans-serif;
    color          : var(--text-grey);
    scroll-behavior: smooth;
}

p {
    margin-top: 0.6em;
}

h1 {
    color    : var(--green);
    font-size: 2.5rem;
}

h2 {
    color        : var(--green);
    font-size    : 1.75rem;
    margin-bottom: 0;
}

h3 {
    color    : var(--green);
    font-size: 1.25rem;
}

a {
    color: var(--green);
}

section {
    margin   : 0 auto;
    padding  : 1em;
    max-width: 1200px;
}

header {
    margin   : 0 auto;
    max-width: 1200px;
}

header h1 {
    color: white;
}

header h2 {
    color      : white;
    font-weight: normal;
}

img {
    max-width: 100%;
}

video {
    width    : 600px;
    max-width: 100%;
}

hr {
    border       : none;
    border-top   : 2px solid #ddd;
    margin-bottom: 2em;
}

footer.footer {
    background: var(--green);
    margin-top: 2rem;
}

.footer-nav {
    display       : flex;
    align-items   : center;
    flex-direction: column;
    list-style    : none;
    padding       : 0;
    margin        : 0;
}

.footer-nav li {
    display    : block;
    line-height: 1;
    margin     : 0 0 25px;
}

.footer-nav li a {
    color          : white;
    text-decoration: none;
    transition     : .4s;
}

.footer-nav li a:hover {
    opacity: .4;
}

.readable {
    background: linear-gradient(to top, #000f, #0000);
}

.shadow {
    box-shadow: #5555 2px 2px 6px;
}

.textblock {
    margin: 0 0 2rem 0;
}

.p {
    padding: 0.5em;
}

.border {
    border: #ddd solid thin;
}

.content-link {
    border         : solid var(--text-grey) thin;
    padding        : 1em;
    margin         : 1em 0;
    display        : block;
    color          : black;
    text-decoration: none;
}

.content-link:hover {
    background: #8881;
}

.cta {
    padding        : 1em;
    margin         : 0.5em 0;
    display        : block;
    float          : right;
    text-decoration: none;
    background     : var(--green);
    color          : white;
}

.cta::after {
    content: ' >';
}

.card-container {
    display              : grid;
    grid-template-columns: 1fr;
    gap                  : 1rem;
}

.card {
    box-shadow: #333a 2px 2px 12px;
}

.card .card-medium {
    width           : 100%;
    height          : 320px;
    display         : inline-block;
    background-color: black;
    pointer-events  : auto;
    overflow        : hidden;
}

.card .card-medium img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.card a.card-medium img {
    opacity: 1;
}

.info-card-container {
    display              : grid;
    grid-template-columns: 1fr;
    gap                  : 1rem;
}

.info-card {
    display        : flex;
    flex-direction : column;
    text-decoration: inherit;
    color          : inherit;
    transition     : 0.4s;
}

.info-card.border:hover {
    border-color: var(--green);
}

.info-card .card-medium {
    object-fit      : cover;
    width           : 100%;
    max-height      : 270px;
    background-color: black;
    align-self      : center;
}

.info-card .card-content {
    flex   : 1;
    padding: 1em;
}

.info-card .link {
    color     : var(--green);
    text-align: right;
    font-size : 0.8rem;
}

.info-card .link::after {
    content: " >";
}

/* Style the tab */

.tab {
    overflow       : hidden;
    display        : flex;
    flex-direction : column;
    justify-content: stretch;
}

.tab button {
    background-color: #f2f2f2;
    border          : none;
    outline         : none;
    cursor          : pointer;
    padding         : 10px 16px;
    transition      : 0.4s;
    font-weight     : bold;
    color           : var(--text-grey);
    margin          : 0.3rem;
    font-size       : 1em;
    font-family     : sans-serif;
    flex-grow       : 1;
}

.tab button.active {
    background-color: var(--green);
    color           : white;
}

.tabcontent {
    display: none;
}

.tabheader {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

.contact-container {
    display       : flex;
    flex-direction: column;
    position      : relative;
}

.contact-container>.contact-image {
    border-left: #048244 solid 4px;
    background : linear-gradient(to right, #51b03729, #51b0370d);
}

.contact-container>.contact-text {
    border-image-source: url('/site/templates/res/ui/General_Popup_Background_Right.png');
    border-image-slice : 44 51 fill;
    border-image-width : 44px 51px 44px 0;
    border-image-repeat: stretch;
    padding            : 0.5em 1.5em;
    font-size          : 1.15em;
    flex               : 1;
}

.contact-container>.contact-image img.image {
    width     : 100%;
    max-width : 480px;
    height    : 100%;
    object-fit: cover;
    padding   : 1em;
    box-sizing: border-box;
}

.add-icon::before {
    content            : "";
    width              : 2em;
    height             : 1.2em;
    margin-right       : 1em;
    display            : inline-block;
    vertical-align     : bottom;
    background-size    : contain;
    background-position: center;
    background-repeat  : no-repeat;
}

.add-icon.tel::before {
    background-image: url('/site/templates/res/ui/Icon_Phone.png');
}

.add-icon.web::before {
    background-image: url('/site/templates/res/ui/Icon_Globe.png');
}

.add-icon.email::before {
    background-image: url('/site/templates/res/ui/Icon_Mail.png');
}

#webviewer {
    border: none;
    width: 100%;
    box-sizing: border-box;
}

/* DESKTOP only */
@media only screen and (min-width: 768px) {
    header {
        padding: 1em;
        padding-bottom: 0;
    }

    .card a.card-medium img {
        transition: all 0.3s ease-out;
    }

    .card a.card-medium img:hover {
        transform: scale(1.1);
        opacity  : 0.8;
    }

    .card-container {
        display              : grid;
        grid-template-columns: 1fr 1fr;
        gap                  : 1rem;
    }

    .info-card {
        flex-direction: row;
    }

    .info-card .card-medium {
        width: 290px;
    }

    .tab {
        flex-direction: row;
    }

    .tab button:not(.active):hover {
        color           : var(--green);
        background-color: #e5e5e5;
    }

    .tab button.active {
        transform: translateY(0.3rem);
    }

    .tabheader {
        flex-direction: row;
    }

    .contact-container {
        flex-direction: row;
    }

    .contact-container>.contact-image {
        max-width: 40%;
    }

    .footer-nav {
        flex-direction: row;
    }

    .footer-nav li {
        margin: 0 1em;
    }
}

/* MOBILE only */
@media only screen and (max-width: 767px) {
    .tab {
        margin-bottom: 1rem;
    }

    .tabimage {
        width       : 100%;
        /* max-width: 320px; */
        height      : 240px;
        object-fit  : cover;
    }

    .swiper-button-prev,
    .swiper-button-next {
        visibility: collapse;
    }
}