/* Fonts (Futura Std) */

/* Medium */
@font-face {
    font-family: futuraStdMedium;
    src: url(/fonts/FuturaStd-Medium.otf);
}

/* Heavy */

@font-face {
    font-family: futuraStdHeavy;
    src: url(/fonts/FuturaStd-Heavy.otf);
}

/* Heavy Oblique */

@font-face {
    font-family: futuraStdHeavyOblique;
    src: url(/fonts/FuturaStd-HeavyOblique.otf);
}

/* Bold */
@font-face {
    font-family: futuraStdBold;
    src: url(/fonts/FuturaStd-Bold.otf);
    /* font-weight: bold; */
}

/* Bold Oblique */

@font-face {
    font-family: futuraStdBoldOblique;
    src: url(/fonts/FuturaStd-BoldOblique.otf);
}

/* Extra Bold */
@font-face {
    font-family: futuraStdExtraBold;
    src: url(/fonts/FuturaStd-ExtraBold.otf);
}

/* Body */

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* The Modal Styling for Success */

/* The Modal (background) */
.error-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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 */
}



/* Modal Content */
.error-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
}



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

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

/* Inner Modal Container */

.error-modal-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    /* Icon */

    .error-modal-inner img {
        width: 250px;
        height: 250px;
        margin-bottom: 20px;
    }



/* Title */

.error-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .error-modal-header h1 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 800;
        font-size: 60px;
        color: #3399cc;
        margin-bottom: 20px;
    }

/* Text */

.error-modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .error-modal-body a {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-size: 20px;
        color: black;
        margin-bottom: 20px;
        text-align: center;
    }

/* Button */

.error-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .error-modal-footer button {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-size: 20px;
        color: white;
        background-color: #3399cc;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        margin-bottom: 20px;
    }

        /* Button Hover */

        .error-modal-footer button:hover {
            background-color: #4db8ff;
            cursor: pointer;
        }

/* The Modal Styling for Info */

/* The Modal (background) */
.info-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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 */
}

/* Modal Content */
.info-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
}

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

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

/* Inner Modal Container */

.info-modal-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    /* Icon */

    .info-modal-inner img {
        width: 250px;
        height: 250px;
        margin-bottom: 20px;
    }

/* Title */

.info-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .info-modal-header h1 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 800;
        font-size: 60px;
        color: #3399cc;
        margin-bottom: 20px;
    }

/* Text */

.info-modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .info-modal-body a {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-size: 20px;
        color: black;
        margin-bottom: 20px;
        text-align: center;
    }

/* Button */

.info-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .info-modal-footer button {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-size: 20px;
        color: white;
        background-color: #3399cc;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        margin-bottom: 20px;
    }

        /* Button Hover */

        .info-modal-footer button:hover {
            background-color: #4db8ff;
            cursor: pointer;
        }

/* Success Animation */
.bounce-in-top {
    -webkit-animation: bounce-in-top 1.1s both;
    animation: bounce-in-top 1.1s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-10-17 14:28:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

/* Info Animation */

.swing-in-top-fwd {
    -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-10-17 14:32:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
}

@keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
}

/* Failed Animation */

.rotate-center {
    -webkit-animation: rotate-center 0.6s ease-in-out both;
    animation: rotate-center 0.6s ease-in-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-10-17 14:37:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* Mobile Portrait */

@media (max-width: 768px) and (orientation: portrait) {
    .error-modal {
        padding-top: 0;
    }

    .error-modal-content {
        width: 100%;
        height: 100%;
    }

    .error-modal-inner img {
        height: auto;
        width: 150px;
    }
}



/* Mobile Landscape */

@media (max-width: 846px) and (orientation: landscape) {
    .error-modal {
        padding-top: 0;
    }

    .error-modal-content {
        width: 100%;
        height: 100%;
    }

    .error-modal-inner img {
        height: auto;
        width: 150px;
    }
}



/* Tablet Portrait */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .error-modal {
        padding-top: 0;
    }

    .error-modal-content {
        width: 90%;
        height: 100%;
    }

    .error-modal-inner img {
        height: auto;
        width: 150px;
    }
}



/* Tablet Landscape */


@media only screen and (min-width: 1024px) and (max-width: 1112px) and (orientation: landscape) {
    .error-modal {
        padding-top: 0;
    }

    .error-modal-content {
        width: 90%;
        height: 100%;
    }

    .error-modal-inner img {
        height: auto;
        width: 150px;
    }
}


/* Bigger Tablet Portraight */

@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .error-modal {
        padding-top: 0;
    }

    .error-modal-content {
        width: 90%;
        height: 100%;
    }

    .error-modal-inner img {
        height: auto;
        width: 150px;
    }
}



/* Bigger Tablet Landscape */

@media only screen and (min-width: 1112px) and (max-width: 1366px) and (orientation: landscape) {
    .error-modal {
        padding-top: 0;
    }

    .error-modal-content {
        width: 90%;
        height: 100%;
    }

    .error-modal-inner img {
        height: auto;
        width: 150px;
    }
}