@font-face {
    font-family: 'Felten Shaded';
    src:  url('https://umb-4553t5.s3.eu-west-1.amazonaws.com/8573/fonts/FeltenShaded-Fill.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'Barmeno Extra';
    src: url('https://umb-4553t5.s3.eu-west-1.amazonaws.com/8573/fonts/Barmeno_Extra_Bold.woff2') format('woff2'),
        url('https://umb-4553t5.s3.eu-west-1.amazonaws.com/8573/fonts/Barmeno_Extra_Bold.woff') format('woff'),
        url('https://umb-4553t5.s3.eu-west-1.amazonaws.com/8573/fonts/Barmeno_Extra_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}




body {
    background-image:
    url('https://umb-4553t5.s3.eu-west-1.amazonaws.com/8573/media/original_bg.webp');
    background-repeat:no-repeat;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Barmeno Extra',"Arial Rounded MT Bold",Arial,sans-serif;
    font-weight: 700;
    line-height: normal;
    color: #ffffff;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    
}

.logos{
    width: 250px;
    height: auto;
}

.tagline{
    width: 226px;
    height: auto;
}

.headline {
    max-width: 320px;
    height: auto;
    width: 100%;
}



.subtitle,
.main-text,
.notes{
    font-weight: 700;
    color: white;
    -webkit-text-stroke: 7px #003B75;
    paint-order: stroke fill;
    -webkit-font-smoothing: antialiased;
    }


.big-title{
    text-align: center;
    text-shadow: 2px 3px 0 #003B75;
    font-family: 'Felten Shaded', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 37px;
    letter-spacing: -4.3px;
    text-transform: uppercase;
}

.subtitle{
    text-align: center;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #003B75;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 31px;
}

.main-text{
    text-align: center;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #003B75;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
}

.text-form{
    color: #003B75;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.notes{
    -webkit-text-stroke-width: 4px;
    -webkit-text-stroke-color: #003B75;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.75px;
}

.body-text{
    color: #FFF;
    font-size: 19px;
    font-style: normal;
    font-weight: 800;
    line-height: 26px;
}

.bg-pink{
    background: #EE799B;
}

.bg-lightBlue{ 
    background: #57C3E3;
}

.btn-danger,
.btn-danger:visited,
.btn-danger:active,
.btn-danger:focus {
    height: 60px;
    border-radius: 45px;
    background: #F263A5;
    color: white;
    border: 4px solid #FFF;
    text-align: center;
    font-size: 33px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    display: flex;
    text-transform: uppercase;
    width: 100%;

}

.btn-danger:hover {
    background: #c24e84;
    border: 4px solid #FFF;
}

.btn-secondary,
.btn-secondary:visited,
.btn-secondary:active,
.btn-secondary:focus {
    height: 53px;
    font-size: 16px;
    border-radius: 46px;
    border: 2px solid #FFF;
    background: #003B75;
    text-align: center;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.32px;
    align-items: center;
    justify-content: center;
    display: flex;
    text-transform: uppercase;
}

.btn-secondary:hover {
    background: #00254a;
    border: 2px solid #FFF;
}


.custom-upload-label {
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}


.custom-upload-label:hover {
    text-decoration: underline; }

.upload-label {
    min-height: 220px;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    cursor: pointer;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.22));
    }

.image-box {
    background-color: white;
    min-height: 220px;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.22));
}



.form-floating>.form-control,
.form-floating>.form-select {
    height: 38px;
    /* line-height: 1.25; */
    /* padding-left: 16px; */
    border-radius: 8px;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.22));
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    opacity: .65;
    transform: scale(.85) translateY(-7px) translateX(.15rem);
}

.form-floating>label {
    padding: 8px .75rem;
}


.form-check-input {
    width: 22px;
    height: 22px;
    border-radius: .25rem;
    padding: 0;
    display: flex;
    align-items: start;
    flex-shrink: 0;
}


.invalid-feedback {

    color: #ffffff;
    padding-left: 10px;
    text-align: left;
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
    color: white;
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: white;
}

.form-check-input.is-invalid, .was-validated .form-check-input:invalid {
    border-color: #dc3545;
    border: 2px solid #b90457;
}

.form-floating>.form-control-plaintext:focus,
.form-floating>.form-control-plaintext:not(:placeholder-shown),
.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
    color: #003B75;
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
    background-color: #F263A5;
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: #F263A5;
}

.form-check-input:checked {
    background-color: #F263A5;
    border-color: #F263A5;
}

.footer-images {
    position: relative;
    width: 100%;
    min-height: 300px;
    overflow: visible;
}


.footer-images .player {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200px;
    max-width: 450px;
    z-index: -1;
}


.footer-images .packs {
    position: absolute;
    bottom: 30px;
    right: 0;
    width: 200px;
    max-width: 380px;
    z-index: -1;
}

.modal-guide {
    background-color: #5ECAE7;
}

@media (min-width: 768px) {

    body {
        /* background-color: #57C3E3; */
        background-image:url('https://umb-4553t5.s3.eu-west-1.amazonaws.com/8573/media/original_bg.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom;
    }

    .big-title {
        text-shadow: 4px 5px 0 #003B75;
        font-size: 63px;
        line-height: 61px;
        letter-spacing: -6.3px;
    }

    .logos {
        width: 300px;
    }

    .tagline {
        width: 276px;
    }

    .headline{
        width: 520px;
    }

    .footer-images {
        width: 100%;
        min-height: 520px;
    }

    .footer-images .player {
        max-width: 300px;
        width: 100%;
        bottom: 134px;
    }


    .footer-images .packs {
        max-width: 300px;
        bottom: 182px;
        right: 0%;
        width: 100%;
    }

}
@media (min-width: 1000px) {

    .footer-images {
    min-height: 400px;
    }

}


@media (min-width: 1250px) {
    .footer-images {
    min-height: 500px;
    }

    .footer-images .player {
    max-width: 447px;
    }

    .footer-images .packs {
    max-width: 400px;
    }

}


.modal-content-faqs {
    background-color: #5ECAE7;

}

.modal-content-terms {
    background-color: #EE799B;

}

.modal-content-privacy {
    background-color: #EE799B;

}
.btn-close {
    filter: invert(1);
}

body.terms {
    background-image: none;
    background-color:#EE799B ;
    
}

body.faq {
    background-image: none;
    background-color: #5ECAE7;

}

body.privacy {
    background-image: none;
    background-color: #EE799B;

}

.terms .footer-images{
    display: none;
}
.faq .footer-images {
    display: none;
}

.privacy .footer-images {
    display: none;
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0;
    padding-left: 13px;
}