* {
    box-sizing: border-box;
    margin: 0;
}

@font-face {
    font-family: 'Paulaner-reg';
    src: url('https://cdn.promo-now.com/site-files/6824aa1b68ad3efd69db988c/Paulaner1634-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'Paulaner-semiB';
    src: url('https://cdn.promo-now.com/site-files/6824aa1b68ad3efd69db988c/Paulaner1634-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

.Paulaner-semiB {
    font-family: 'Paulaner-semiB', sans-serif;
}

:root {
    --main-blue: #001c49;
    --white: #fff;
    --logo-gold: #CFB783
}

.container {
    padding: 0 16px;
    max-width: 1000px;
}

.marginC {
    margin: 0 auto;
}


.textC {
    text-align: center;
}

.posRel {
    position: relative;
}

.textXL {
    font-size: 7vw;
}

.pt {

    padding-top: 16px;
}

.pb {
    padding-bottom: 16px;
}

.textWhite {
    color: var(--white);
}

body {
    background: var(--main-blue);
    font-family: 'Paulaner-reg', sans-serif;
    color: var(--white);
}

.screenReaderText {
    position: absolute;
    overflow: hidden;
    color: transparent;
    user-select: none;
}

.headerMargin {
    /* margin-bottom: min(11.9vw, 238px); */
    margin-bottom: min(11.8vw, 120px);
}

.enterHeaderImg {
    width: 100%;
    height: 100%;
    max-width: 1000px;
}

.enterHeaderImg i {
    background: url(https://cdn.promo-now.com/site-files/6824aa1b68ad3efd69db988c/enterHeader.jpg) center no-repeat;
    width: 100%;
    /* padding-bottom: 57.5%; */
    /* padding-bottom: 60.9%; */

    display: block;
    background-size: contain;
    padding-bottom: min(61%, 70vh);
}

.logo {
    width: 20%;
    position: absolute;
    transform: translate(-50%, 88%);
    top: 50%;
    left: 50%;
    height: 35%;
    /* max-width: 400px; */
    max-width: 350px;


}

.logo i {
    background: url(https://cdn.promo-now.com/site-files/6824aa1b68ad3efd69db988c/paulanerLogo.svg) center no-repeat;
    width: 100%;
    padding: 57%;
    display: block;
    background-size: contain;
}


.building {
    width: 80%;
    height: 100%;
}

.building i {
    background: url(https://cdn.promo-now.com/site-files/6824aa1b68ad3efd69db988c/building.png) center no-repeat;
    width: 100%;
    padding: 50%;
    display: block;
    background-size: contain;
}

footer .footer-text {

    white-space: normal !important;
    padding: 0 16px;
    width: 100%;
    max-width: 1000px;

}

/* terms spacing */

.termsSpacing h3,
.termsSpacing p {
    margin: revert;

}

/* form  */

.form-stepper,
.form-card {
    background: var(--main-blue);
    color: #fff;
}

/* formfields border color */
.page .mat-form-field-appearance-outline .mat-form-field-outline,
app-preview-entrant .mat-form-field-appearance-outline .mat-form-field-outline {
    color: var(--logo-gold);
}

/* checkboxx frame */
.page .mat-checkbox-frame,
app-preview-entrant .mat-checkbox-frame {
    border-color: var(--logo-gold);
}

/* checkbox ripple */
.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
    background: #ffffff;
}

/* checkbox bg */
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: unset;
}

/* checkbox tick */
.mat-checkbox-checkmark-path {
    stroke: #ffffff !important;
}

/* active stepper number and submit button, popup terms button */
.mat-step-header.mat-accent .mat-step-icon-selected,
.mat-step-header.mat-accent .mat-step-icon-state-done,
.mat-step-header.mat-accent .mat-step-icon-state-edit,
.mat-flat-button.mat-accent,
.mat-step-header.mat-accent .mat-step-icon-selected,
.mat-raised-button.mat-accent,
.mat-fab.mat-accent,
.mat-mini-fab.mat-accent,
.mat-raised-button.mat-primary {
    background-color: transparent;
    border: 2px solid var(--logo-gold);
    color: #fff !important;
}

/* stepper circle untouched */
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon {
    border: 2px solid var(--logo-gold);
    color: #000;
}


/* form font, submit btn font */
.mat-form-field,
.mat-raised-button.mat-accen,
mat-button-wrapper {
    font-family: 'Paulaner-reg', sans-serif;
}

/* checkbox shorten form */
mat-checkbox {
    margin: 0 1rem !important;
}

/* changes for field removes margin */
.mat-form-field-appearance-outline .mat-form-field-wrapper {
    margin: 0;
}

/* age gate question label */
app-page-block-form-question-dob>section>div>p:first-child {
    margin: 0 1rem !important;
}

/* fot the bar stepper form size */
.mat-horizontal-stepper-header-container {

    display: none !important;
}


/* pop up terms */
.mat-dialog-container {
    background: var(--main-blue);

}

/* focus on form field */
.mat-form-field.mat-focused .mat-form-field-label {
    color: var(--white) !important;
}

.mat-focused .mat-form-field-required-marker {
    color: var(--logo-gold) !important;
}


.prize-content-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-block: 32px;
}

.prize-content-1 {
    position: relative;
    max-width: 500px;
    width: 100%;
}

.prize-content-1 span {
    padding-bottom: 65%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/6824aa1b68ad3efd69db988c/Paulaner_Munich.png") no-repeat center;
    background-size: cover;
}

.prize-content-2 {
    position: relative;
    max-width: 500px;
    width: 100%;
}

.prize-content-2 span {
    padding-bottom: 65%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/6824aa1b68ad3efd69db988c/prize-content-2-min.jpg") no-repeat center;
    background-size: cover;
}

/* stack prize images for mobile */
@media screen and (max-width: 1024px) {
    .prize-content-container {
        flex-direction: column;
        align-items: center;
    }
}

.barList {
    text-decoration: underline;
    cursor: pointer;
}

.mat-dialog-content {
    margin: 0 !important;
}

/* end of form */

/* desktop */
@media screen and (min-width: 600px) {
    .textXL {
        font-size: min(4vw, 60px);
    }

    .enterHeaderImg i {
        margin-bottom: min(7.7vw, 117px);
        padding-bottom: min(61%, 23vw);
    }

    .headerMargin {
        margin-bottom: min(7.9vw, 155px);

    }

    .building i {
        padding: 228px;
    }

    .logo {
        width: 21vw;

    }

    .logo i {
        padding: min(6vw, 121px);
    }

}