body {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: center;
}

.banner-img {
    width: 100%;
}

.row-flex {
    display: flex;
}

.column-flex {
    flex: 50%;
}

.logo {
    width: 70%;
    margin-top: 50px;
}

.topbar {
    background-color: limegreen;
    width: 100%;
    height: 12px;
    margin-bottom: 4px;
}

.underconstruction {
    font-family: 'Agency FB';
    background-color: black;
    opacity: 0.75;
    padding-top: 1px;
    padding-bottom: 5px;
    text-align: center;
}

button {
    border: none;
}

.btn1 {
    border-radius: 2px;
}

.btn2 {
    border-radius: 4px;
}

.btn3 {
    border-radius: 8px;
}

.btn4 {
    border-radius: 12px;
}

.btn5 {
    border-radius: 24px;
}

.btn6 {
    border-radius: 50%;
}

.support-text {
    text-align: left;
}

footer {
    font-family: Arial;
    font-size: 1rem;
    text-align: left;
}

hr {
    background-color: darkgray;
}

#more {
    display: none;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: cornflowerblue;
    color: #444;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .collapsible:hover {
        background-color: #ccc;
    }

/* Style the collapsible content. Note: hidden by default */
.content {
    display: none;
    overflow: hidden;
    margin-top: 1rem;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: none;
    overflow: hidden;
}

    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 7px 16px;
        text-decoration: none;
        font-size: 17px;
    }

/* Add an active class to highlight the current page */
.active {
    background-color: #04AA6D;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

    /* Style the dropdown button to fit inside the topnav */
    .dropdown .dropbtn {
        font-size: 17px;
        border: none;
        outline: none;
        color: white;
        padding: 7px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* Style the links inside the dropdown */
    .dropdown-content a {
        float: none;
        color: black;
        padding: 7px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 855px) {
    .topnav a:not(:last-child), .dropdown .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 855px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

        .topnav.responsive .dropdown {
            float:none;
        }

        .topnav.responsive .dropdown-content {
            position: relative;
        }

        .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Important part */
.modal-dialog {
    overflow-y: initial !important
}

/* Modal Header */
.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Modal Body */
.modal-body {
    font-family: 'Segoe UI', 'Arial Rounded MT', system-ui, -apple-system, san-serif;
    padding: 2px 16px;
    max-height: 75vh;
    overflow-y: auto;
}

/* Modal Footer */
.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #222222;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

/* Add Animation */
@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

@keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.center-content {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Float 1 column */
.column1 {
    float: left;
    width: 96%;
    padding: 0 1px;
    /*min-width: 23rem;*/
}

/* Float 1 column */
.column1-2 {
    float: left;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 0.5rem;
}

/* Float 2 columns side by side */
.column2 {
    float: left;
    width: 48%;
    padding: 0 1px;
    /*min-width: 23rem;*/
}

/* Float 2 columns side by side */
.column-sm2 {
    /* 
    float: left;
    width: 11rem;
    padding: 0 7px;
    margin-bottom: 0.7rem;
    */
    float: left;
    width: 9rem;
    height: auto;
    padding: 0 5px;
    margin-bottom: 0.7rem;
}

/* Float 3 columns side by side */
.column3 {
    float: left;
    width: 31%;
    padding: 0 10px;
    min-width: 20rem;
}

/* Float 3 columns side by side */
.column-btn3 {
    /*
    float: left;
    width: 7.75rem;
    height: 1rem;
    padding: 0 5px;
    margin-bottom: 1.5rem;
    */
    float: left;
    width: 9rem;
    height: auto;
    padding: 0 5px;
    margin-bottom: 0.7rem;
}

/* Float 4 columns side by side */
.column4 {
    float: left;
    width: 22.75%;
    padding: 0 10px;
    min-width: 20rem;
}

/* Remove extra left and right margins, due to padding in columns */
.row {
    margin: 0 -5px;
}

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 100px) {
    .column-sm2 {
        width: 96%;
        display: block;
        margin-bottom: 10px;
    }
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 450px) {
    .column-btn3 {
        width: 50%;
        display: block;
    }
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 700px) {
    .column3 {
        width: 96%;
        display: block;
        margin-bottom: 10px;
    }

    .column4 {
        width: 96%;
        display: block;
        margin-bottom: 10px;
    }
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 1010px) {
    .column1 {
        width: 96%;
        display: block;
        margin-bottom: 10px;
    }

    .column2 {
        width: 96%;
        display: block;
        margin-bottom: 10px;
    }
}

/* Loader Styles */
.loader {
    position: relative;
    margin: auto;
    box-sizing: border-box;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 14px solid rgba(255, 255, 255, 0.1);
    transform-origin: 50% 50%;
    transform: perspective(200px) rotateX(66deg);
    animation: spinner-wiggle 1.2s infinite;
}

    .loader:before,
    .loader:after {
        content: "";
        position: absolute;
        inset: -14px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 14px solid #0000;
        animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
    }

    .loader:before {
        border-top-color: #fff;
    }

    .loader:after {
        border-top-color: limegreen;
        animation-delay: 0.4s;
    }

@keyframes spinner-spin {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes spinner-fade {
    25%, 75% {
        opacity: 0.1
    }

    50% {
        opacity: 1
    }
}

.animation-swipebox {
    width: 100%;
    height: 100%;
    background-color: black;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.animation-box {
    width: 100%;
    height: 17rem;
    background-color: none;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.animation-container {
    width: 500rem;
    height: 15rem;
}

@-webkit-keyframes topFadeOut {
    0% {
        position: absolute;
        top: -3rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        top: 15%;
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes bottomFadeOut {
    0% {
        position: absolute;
        bottom: -5rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        bottom: 40%;
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes topFadeOutVertical {
    0% {
        position: absolute;
        top: -3rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        top: 45%;
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes rightFadeInOut {
    0% {
        position: absolute;
        right: -3rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        right: 10rem;
        opacity: 1;
    }

    100% {
        opacity: 0;
        right: 10rem;
    }
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0%;
    }
}

@-webkit-keyframes fadeInOutSwipe {
    0% {
        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0%;
    }
}

@-webkit-keyframes rightFadeInOutSwipe {
    0% {
        position: absolute;
        right: 1rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        right: 80%;
        opacity: 1;
    }

    100% {
        opacity: 0;
        right: 80%;
    }
}

.animationEvent1 {
    font-size: 1rem;
    padding-left: 6px;
    padding-right: 6px;
    position: absolute;
    top: 205px;
    left: 302px;
    opacity: 0;
    color: rgba(0,0,0,0.67);
    background-color: limegreen;
    animation-name: fadeInOut;
    animation-delay: 1.5s;
    animation-duration: 3s;
}

.animationEvent2 {
    font-size: 1rem;
    padding-left: 6px;
    padding-right: 6px;
    position: absolute;
    top: 200px;
    left: 330px;
    opacity: 0;
    color: rgba(0,0,0,0.67);
    background-color: limegreen;
    animation-name: fadeInOut;
    animation-delay: 2.25s;
    animation-duration: 3s;
}

.animationEvent3 {
    font-size: 1rem;
    padding-left: 6px;
    padding-right: 6px;
    position: absolute;
    top: 40px;
    left: 240px;
    opacity: 0;
    color: rgba(0,0,0,0.67);
    background-color: limegreen;
    animation-name: fadeInOut;
    animation-delay: 3s;
    animation-duration: 3s;
}

.animationEvent4 {
    font-size: 1rem;
    padding-left: 6px;
    padding-right: 6px;
    position: absolute;
    top: 172px;
    left: 249px;
    opacity: 0;
    color: rgba(0,0,0,0.67);
    background-color: limegreen;
    animation-name: fadeInOut;
    animation-delay: 3.75s;
    animation-duration: 3s;
}

.swipePrompt1 {
    font-size: 1rem;
    padding: 5px;
    position: absolute;
    top: 17px;
    right: 1rem;
    opacity: 0;
    color: limegreen;
    background-color: rgba(0,0,0,0.15);
    animation-name: fadeInOutSwipe;
    animation-delay: 3.75s;
    animation-duration: 0.75s;
}

.swipePrompt2 {
    font-size: 1rem;
    padding: 5px;
    position: absolute;
    top: 17px;
    right: 1rem;
    opacity: 0;
    color: limegreen;
    background-color: rgba(0,0,0,0.15);
    animation-name: fadeInOutSwipe;
    animation-delay: 4.5s;
    animation-duration: 0.75s;
}

.swipePrompt3 {
    font-size: 1rem;
    padding: 5px;
    position: absolute;
    top: 17px;
    right: 1rem;
    opacity: 0;
    color: limegreen;
    background-color: rgba(0,0,0,0.15);
    animation-name: fadeInOutSwipe;
    animation-delay: 5.25s;
    animation-duration: 0.75s;
}

.swipePrompt4 {
    font-size: 1rem;
    padding: 3px;
    position: absolute;
    top: 17px;
    right: 1rem;
    opacity: 0;
    color: limegreen;
    background-color: rgba(0,0,0,0.15);
    animation-name: fadeInOutSwipe;
    animation-delay: 6s;
    animation-duration: 3s;
}

.swipePrompt5 {
    font-size: 2rem;
    padding: 5px;
    position: absolute;
    top: 15px;
    opacity: 0;
    animation-name: rightFadeInOutSwipe;
    animation-delay: 6s;
    animation-duration: 4s;
    color: limegreen;
    background-color: rgba(0,0,0,0.15);
}

.first-text {
    font-size: 1.8rem;
    position: absolute;
    left: 180px;
    top: 5px;
    opacity: 0;
    animation-name: topFadeOut;
    animation-duration: 5s;
    color: limegreen;
}

.second-text {
    font-size: 1.4rem;
    position: absolute;
    top: 8.5rem;
    opacity: 0;
    animation-name: rightFadeInOut;
    animation-delay: 3s;
    animation-duration: 6s;
    color: white;
}

.third-text {
    transform: rotate(-90deg);
    font-size: 2rem;
    position: absolute;
    left: 45%;
    top: 45%;
    opacity: 0;
    animation-name: topFadeOutVertical;
    animation-delay: 7.5s;
    animation-duration: 6s;
    color: #A3DDF0;
    white-space: nowrap;
}

.fourth-text {
    font-size: 3.4rem;
    position: absolute;
    top: 10.5rem;
    left: 10%;
    opacity: 0;
    color: #F0A3BE;
    animation-name: fadeInOut;
    animation-delay: 8.5s;
    animation-duration: 3s;
}

.fifth-text {
    font-size: 2rem;
    position: absolute;
    left: 170px;
    bottom: 5px;
    opacity: 0;
    color: yellow;
    animation-name: bottomFadeOut;
    animation-delay: 6s;
    animation-duration: 9s;
}

* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column-left {
    float: left;
    width: 10%;
    max-width:300px;
    padding-left: 10px;
    background-color:grey;
    /* height: 300px; */ /* Should be removed. Only for demonstration */
}

.column-right {
    float: left;
    width: 90%;
    padding: 7px;
    /* background-color: darkgrey; */
    /* height: 300px; */ /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 955px) {
    .column-left {
        width: 100%;
    }

    .column-right {
        width: 0%;
    }

    .resources-lorez {
        display: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .resources-hirez {
        display: block;
    }
}

@media screen and (min-width: 955px) {
    .column-left {
        width: 100%;
    }

    .column-right {
        width: 100%;
    }

    .resources-lorez {
        display: block;
    }

    .resources-hirez {
        display: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}

@media screen and (min-width: 1538px) {
    .marquee-lorez {
        display: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .marquee-hirez {
        display: block;
    }
}

@media screen and (max-width: 1538px) {
    .marquee-lorez {
        display: block;
    }

    .marquee-hirez {
        display: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}

.horizontal-center {
    margin: 0;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        -moz-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: limegreen; /* #2196F3; */
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -moz-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }