﻿/* Oxygen */

@font-face {
    font-family: 'Oxygen-Bold';
    src: url('../../fonts/Oxygen/Oxygen-Bold.eot');
    src: local('☺'), url('../../fonts/Oxygen/Oxygen-Bold.woff') format('woff'), url('../../fonts/Oxygen/Oxygen-Bold.ttf') format('truetype'), url('../../fonts/Oxygen/Oxygen-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oxygen-Light';
    src: url('../../fonts/Oxygen/Oxygen-Light.eot');
    src: local('☺'), url('../../fonts/Oxygen/Oxygen-Light.woff') format('woff'), url('../../fonts/Oxygen/Oxygen-Light.ttf') format('truetype'), url('../../fonts/Oxygen/Oxygen-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oxygen-Regular';
    src: url('../../fonts/Oxygen/Oxygen-Regular.eot');
    src: local('☺'), url('../../fonts/Oxygen/Oxygen-Regular.woff') format('woff'), url('../../fonts/Oxygen/Oxygen-Regular.ttf') format('truetype'), url('../../fonts/Oxygen/Oxygen-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Antonio-Bold';
    src: url('../../fonts/Antonio/Antonio-Bold.eot');
    src: local('☺'), url('../../fonts/Antonio/Antonio-Bold.woff') format('woff'), url('../../fonts/Antonio/Antonio-Bold.ttf') format('truetype'), url('../../fonts/Antonio/Antonio-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-size: 16px;
    font-family: 'Oxygen-Light', Verdana;
    min-width: 400px;
    background-color: #1e62a9;
}

.requiredFieldValidator {
    color: #ff0505;
    font-size: 12px;
}

input[type] {
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Oxygen-Light', Verdana;
}

input[type=text],
input[type=password] {
    outline: 0;
    height: 26px;
    width: 200px;
    border: 1px solid #d3d3d3;
    background-color: #fff;
    padding: 5px;
}

input[type=submit] {
    outline: 0;
    border: 1px solid #d3d3d3;
    background-color: #1e62a9;
    color: #fff;
    padding: 8px 20px;
}

    input[type=submit]:hover {
        cursor: pointer;
        background-color: #2453b0;
    }

    input[type=submit].DangerButton {
        background-color: #AB0011;
    }

    input[type=submit]:hover.DangerButton {
        background-color: #CF0013;
    }

/*select {
    outline: 0;
    width: calc(200px + 12px);
    height: 38px;
    border: 1px solid #d3d3d3;
    background-color: #fff;
    cursor: pointer;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Oxygen-Light', Verdana;
}*/

a {
    color: #1e62a9;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

h1 {
    font-size: 30px;
    margin: 0;
}

h2 {
    font-size: 22px;
    margin: 0;
}

h3 {
    font-size: 18px;
    margin: 0;
}

p {
    margin: 0;
    margin: 5px;
}

br {
    content: " ";
    display: block;
    margin: 5px;
    margin: 0;
}

img {
    display: block;
    position: relative;
}

    img[alt]::after {
        display: grid;
        justify-content: center;
        align-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--hex-10);
        text-align: center;
        content: attr(alt);
    }

iframe {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    height: 100%;
    width: 100%;
}



.header {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-flow: column;
    grid-gap: 25px;
    align-items: center;
    background-color: #fff;
    padding: 25px 50px;
}

    .header > div:last-of-type {
        font-family: 'Antonio-Bold', Verdana;
        font-size: 40px;
        font-weight: bold;
    }

    .header a img {
        max-width: 100%;
    }

.footer {
    display: grid;
    justify-items: center;
    padding: 25px 50px 100px 25px;
}

    .footer > div:first-of-type {
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-auto-flow: column;
        grid-gap: 15px;
        align-items: center;
    }

        .footer > div:first-of-type > div:first-of-type {
            display: grid;
            align-items: flex-end;
            align-items: center;
            justify-items: right;
        }

            .footer > div:first-of-type > div:first-of-type > a > img {
                width: 100%;
                height: auto;
            }

        .footer > div:first-of-type > div:last-of-type {
            font-family: 'Antonio-Bold', Verdana;
            font-size: 26px;
            font-weight: bold;
            color: #fff;
        }

.menu {
    display: grid;
    grid-template-columns: 1fr min-content;
    padding: 25px;
    grid-gap: 25px;
}

    .menu > div {
        font-size: 18px;
        background-color: #1e62a9;
        display: flex;
        grid-gap: 25px;
        white-space: nowrap;
    }

        .menu > div a {
            color: #fff;
            text-decoration: none;
        }

            .menu > div a:hover {
                text-decoration: underline;
            }

.subMenu {
    font-size: 18px;
    padding: 25px;
    background-color: #fff;
    display: flex;
    grid-gap: 25px;
}

    .subMenu a {
        color: #1e62a9;
        text-decoration: none;
    }

        .subMenu a:hover {
            text-decoration: underline;
        }

table {
    border-top: solid 1px #d3d3d3;
    border-right: solid 1px #d3d3d3;
}

    table th {
        background-color: #1e62a9;
        color: #fff;
        border-left: solid 1px #d3d3d3;
        border-bottom: solid 1px #d3d3d3;
    }

    table tr:nth-child(odd) {
        background-color: #fff;
    }

    table tr:nth-child(even) {
        background-color: #f6f5f5;
    }

    table td {
        border-left: solid 1px #d3d3d3;
        border-bottom: solid 1px #d3d3d3;
    }

        table td div {
            display: flex;
            align-items: center;
            white-space: nowrap;
            gap: 10px;
        }

            table td div img {
                display: block;
                margin: 0;
                height: 50px;
                width: auto;
            }

        table td img {
            display: block;
            margin: 0 auto;
        }

.bg1 {
    display: grid;
    grid-gap: 20px;
    padding: 25px;
    background-color: #e8e8e8;
    box-sizing: border-box;
}

    .bg1 > div {
        display: grid;
        grid-gap: 20px;
        box-sizing: border-box;
    }

.carousel {
    width: 100%;
    height: 100vh;
    position: relative;
}

    .carousel > ul {
        margin: 0;
        padding: 0;
        list-style: none;
        pointer-events: none;
    }

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
}

    .slide[data-active] {
        opacity: 1;
        z-index: 1;
        transition-delay: 0ms;
    }

    .slide .original {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border-radius: 50px;
        position: relative;
        transition: opacity 300ms ease;
    }

    .slide .enhanced {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border-radius: 50px;
        position: absolute;
        transition: opacity 300ms ease;
        z-index: -1;
    }


    .slide .video {
        display: block;
        width: auto;
        height: auto;
        max-width: min(100%, 1425px);
        max-height: 100%;
        border-radius: 50px;
        cursor: pointer;
    }     


    /*.slide .video {
        display: block;
        width: auto;
        height: auto;
        max-width: 1425px;
        max-height: 100%;
        border-radius: 50px;
        cursor: pointer;
        border: solid 1px red;
    }*/

    /*.slide .video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 50px;
        cursor: pointer;
    } */

    .slide[data-active] .original {
        pointer-events: auto;
    }

    .slide .original:hover {
        opacity: 0;
        cursor: pointer;
    }

        .slide .original:hover + .enhanced {
            opacity: 1;
        }

.carousel-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-family: 'Feather', sans-serif;
    font-size: 4rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, .1);
}

    .carousel-button:hover,
    .carousel-button:focus {
        color: white;
        background-color: rgba(0, 0, 0, .2);
    }

    .carousel-button:focus {
        outline: 1px solid rgba(255, 255, 255, .5);
    }

    .carousel-button.prev {
        left: 5px;
    }

    .carousel-button.next {
        right: 5px;
    }

    .carousel-button.play {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 3rem;
        width: 4rem;
        height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 50;
    }

        .carousel-button.play[hidden] {
            display: none;
        }

/* Toast Message */

#toast {
    position: absolute;
    z-index: -1;
    opacity: 0;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #fff;
    color: var(--hex-8);
    padding: 15px 25px;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -20%);
}