@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,700;0,800;1,400;1,700;1,800&display=swap');
html body {
    margin-top: 0px !important;
    font-family: 'Overpass', sans-serif;
    font-weight: 300;
    font-style: normal;
    background-color: #eff0f4 !important;
    color: #192e52 !important;
}

label.required:after {
    content: "";
}

footer {
    bottom: 0px;
    width: 100%;
    height: 60px;
    background-color: #343a40;
    color: #ffffff;
    position: fixed;
    display: block;
    clear: both;
}

.container .text-muted {
    margin: 20px 0;
}

.dashboard-title {
    color: #192e52;
    font-size: 36px;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: normal;
}

.dashboard-link {
    text-align: center;
    color: #424142;
    font-size: 24px;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: normal;
}

.menu-icon {
    width: 45px;
}

.social-icon {
    padding: 10px;
    width: 42px;
}

html .nav-link {
    color: #424142 !important;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: normal;
}

html .nav-item {
    color: #424142 !important;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: normal;
}


.makers {
    font-weight: bold;
    font-size: 18px;
    margin-top: 10px;
    color: #424142
}

.landingTitle {
    text-align: center;
    font-weight: bold;
    font-size: 32px;
    margin-top: 10px;
    color: #192e52
}

.version {
    font-size: 12px;
    margin-top: -10px;
    color: #424142
}

html .border-top-mil {
    border-top-width: 15px !important
}


html .border-dashboard {
    border-color: #ffd55c !important
}


html .border-howto {
    border-color: #b7dfe0 !important
}


html .border-generator {
    border-color: #b0d6af !important
}


html .border-shop {
    border-color: #fcc277 !important
}


html .border-media {
    border-color: #c3c0db !important
}

html .top-logo {
    height: 40px !important;
    max-height: 200px !important;
}


.btn-order {
    color: #424142 !important;
    background-color: #fcc277 !important;;
    border-color: #fcc277 !important;
}

.btn-order:hover {
    color: #424142 !important;
    background-color: #fcc277 !important;
    border-color: #fcc277 !important;
}

.btn-order:focus,
.btn-order.focus {
    box-shadow: 0 0 0 .2rem #fcc277 !important;
}

.alert-shop {
    background-color: #fcc277 !important;
    border-color: #fcc277 !important;
}

html h4 .invalid-feedback {
    display: none !important;
}


.btn-generator {
    color: #424142 !important;
    background-color: #b0d6af !important;;
    border-color: #b0d6af !important;
}

.btn-generator:hover {
    color: #424142 !important;
    background-color: #b0d6af !important;
    border-color: #b0d6af !important;
}

.btn-generator:focus,
.btn-generator.focus {
    box-shadow: 0 0 0 .2rem #b0d6af !important;
}

header {
    position: relative;
    background-color: #3070b3;
    height: 90vh;
    width: 100%;
    overflow: hidden;
}

header .front {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

@media only screen and (max-width: 480px) {
    html header {
        height: 35vh !important;
    }

    html header .front {
        top: 68%;
        width: 100% !important;
    }
}

header .container {
    position: relative;
    z-index: 2;
}

header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #424142;
    opacity: 0.1;
    z-index: 1;
}

@media all {
    .featherlight {
        display: none;
        /* dimensions: spanning the background from edge to edge */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2147483647;
        /* z-index needs to be >= elements on the site. */
        /* position: centering content */
        text-align: center;
        /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
        white-space: nowrap;
        /* styling */
        cursor: pointer;
        background: #fff;
        /* IE8 "hack" for nested featherlights */
        background: rgba(255, 255, 255, 0.95);
    }

    /* support for nested featherlights. Does not work in IE8 (use JS to fix) */
    .featherlight:last-of-type {
        background: rgba(255, 255, 255, 0.95);
    }

    .featherlight:before {
        /* position: trick to center content vertically */
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    .featherlight .featherlight-content {
        /* make content container for positioned elements (close button) */
        /* position: centering vertical and horizontal */
        text-align: left;
        vertical-align: middle;
        display: inline-block;
        /* dimensions: cut off images */
        overflow: hidden;
        /* dimensions: handling large content */
        margin-left: 5%;
        margin-right: 5%;
        max-height: 95%;
        /* styling */
        background: #fff;
        cursor: auto;
        /* reset white-space wrapping */
        white-space: normal;
    }

    /* contains the content */
    .featherlight .featherlight-inner {
        /* make sure its visible */
        display: block;
    }

    .featherlight .featherlight-close-icon {
        /* position: centering vertical and horizontal */
        position: absolute;
        z-index: 9999;
        top: 0px;
        right: 0px;
        outline: none;
        /* dimensions: 25px x 25px */
        line-height: 1;
        /* styling */
        cursor: pointer;
        text-align: center;
        font-family: 'Overpass', sans-serif;
        font-weight: 900;
        background: none;
        color: #424142;
        font-size: 30px;
        border: none;
        padding: 0;
    }

    /* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */
    .featherlight .featherlight-close-icon::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    .featherlight .featherlight-image {
        /* styling */
        width: 100%;
    }

    .featherlight-iframe .featherlight-content {
        /* removed the border for image croping since iframe is edge to edge */
        border-bottom: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }

    .featherlight iframe {
        /* styling */
        border: none;
    }

    .featherlight * {
        /* See https://github.com/noelboss/featherlight/issues/42 */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .featherlight .featherlight-next {
        right: 0;
    }

    .featherlight .featherlight-next:hover {
        background: none;
    }

    .featherlight .featherlight-next span {
        text-shadow: none;
        color: transparent;
    }

    .featherlight .featherlight-next span img.emoji {
        display: none !important;
    }

    .featherlight .featherlight-next span:before {
        content: ">";
        font-family: futura-pt, sans-serif !important;
        font-weight: 400;
        color: #424142;
        display: inline;
        position: absolute;
        right: 0;
    }

    .featherlight .featherlight-previous {
        left: 0;
    }

    .featherlight .featherlight-previous:hover {
        background: none;
    }

    .featherlight .featherlight-previous span {
        text-shadow: none;
        color: transparent;
    }

    .featherlight .featherlight-previous span img.emoji {
        display: none !important;
    }

    .featherlight .featherlight-previous span:before {
        content: "<";
        font-family: futura-pt, sans-serif !important;
        font-weight: 400;
        color: #424142;
        display: inline;
        position: absolute;
        left: 0;
    }

    .featherlight .featherlight-previous span,
    .featherlight .featherlight-next span {
        display: block;
    }
}

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
    .featherlight .featherlight-close-icon {
        font-size: 30px;
        top: -3px;
        right: -2px;
        padding: 0px;
    }
}