@import url("https://use.typekit.net/ksg8yrk.css");

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.fatFrank_Regular {

    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.halyard_Display_Regular {

    font-family: "halyard-display", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.halyard_Display_Book {

    font-family: "halyard-display", sans-serif;
    font-weight: 300;
    font-style: normal;
}

:root {
    --darkGrey: #1d1d1b;
    --white: #fff;
    --red: #d02d26;
}

body {
    background: var(--darkGrey);
    font-family: "halyard-display", sans-serif;
    margin: 0;
}

/* nav  */
nav.open {
    width: 100% !important;
    max-width: unset !important;
}

.controls {
    right: 9vw !important;
    top: 2.5vw !important;
}

navButton {
    margin: 0 !important;
}

.logoMob {
    min-width: 163px;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: calc(2.5vw + 13px);
    left: calc(10vw - 25px);
}

nav a {
    position: relative;
}

nav a mat-icon {

    top: 30% !important;
    position: absolute !important;
    right: 20px !important;
}

.logo,
.logoMob {
    min-width: 163px;
    height: 10%;
}

.logo i,
.logoMob i {
    background: url(https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/SNG_LogosSNG_Logos-sq.png) center no-repeat;
    padding-bottom: 100%;
    width: 100%;
    padding-bottom: 16%;
    display: block;
    max-width: 163px;
    background-size: contain;
}

.logoMob i {
    background: url(https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/SNG_Logos-sq.png) center no-repeat;
    width: 100%;
    padding-bottom: min(25px, 7vw);
    display: block;
    max-width: 163px;
    background-size: contain;
}


.tuiLogo {
    width: 30%;
    height: 20%;
    margin: 0 auto;
    position: absolute;
    z-index: 1;
    top: calc(2.5vw + 13px);
    /* left: calc(15vw + 113px); */
    left: calc(10vw + 130px);
    max-width: 100px;
}

.tuiLogo i {
    background: url(https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/TUI_3CPM.svg) center no-repeat;
    display: block;
    width: 100%;
    padding-bottom: min(25px, 9.6vw);
}

.prizeImg {
    width: 100%;
    height: 100%;
}

.prizeImg i {
    background: url(https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/prizeImg.jpg) center no-repeat;
    width: 100%;
    padding-bottom: 54.8%;
    display: block;
    background-size: cover;
}

.navDesk {
    display: none;
}

.spacer {
    flex-grow: unset !important;
}

.headerImg {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: min(70px, 14vw);
}

/* old hero */
/* .headerImg i {
    background: url(https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/hero.jpg) center no-repeat;
    width: 100%;
    padding-bottom: 72.5%;
    display: block;
    background-size: contain;
} */

.headerImg i {
    background: url(https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/sxng_head_hero.png) center no-repeat;
    width: 100%;
    padding-bottom: 55%;
    display: block;
    background-size: contain;
}

/* .headerContainer {
    position: relative;
} */
.headerContainer {
    position: relative;
    height: 86vw;
}

/* .headerText {
    text-align: center;
    color: var(--white);
    position: absolute;
    transform: translate(-50%, -115%);
    left: 50%;
    top: 100%;
    width: 100%;
} */
.headerText {
    text-align: center;
    color: var(--white);
    position: absolute;
    transform: translate(-50%, -141%);
    left: 50%;
    top: 100%;
    width: 100%;
}

.headerText h1 {
    margin-bottom: 0;
    font-size: min(5.8vw, 90px);
    letter-spacing: 0.06em;
}

.headerText h2 {
    margin-top: 0;
    font-size: min(3.95vw, 52px);
    letter-spacing: 0.06em;
}

.mainContainer {
    max-width: 1000px;
    padding: 0 16px;
    margin: 0 auto;

}

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

.textC {
    text-align: center;
}

footer {
    background: var(--darkGrey);
    color: var(--white);
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.06em;
}

.flex {
    list-style: none;
    display: flex;
    justify-content: center;
    padding-left: 0;
}

footer li a {
    color: var(--white);
    padding: 0 8px;
}


footer p {
    margin-bottom: 0;
}

footer ul {
    margin-top: 0;
}

.footerTerms {
    text-align: left;
    padding: 16px;
}



/* form */

/* for the widget popup */
/* mat-dialog-container {
    background-color: transparent !important;
} */

.mat-dialog-container {}

.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick,
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: var(--white) !important;
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,
.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {
    color: var(--red) !important;
}

.mat-error {
    color: var(--red) !important;
    font-family: "halyard-display", sans-serif !important;
}

.invalid {
    border-top: 2px solid var(--red) !important;
    border-bottom: 2px solid var(--red) !important;
}

.mat-flat-button.mat-primary,
.mat-raised-button.mat-primary,
.mat-fab.mat-primary,
.mat-mini-fab.mat-primary {
    background-color: var(--red) !important;
}

.mat-raised-button {
    padding: 0px 43px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 1em !important;
}

.mat-flat-button.mat-accent,
.mat-raised-button.mat-accent,
.mat-fab.mat-accent,
.mat-mini-fab.mat-accent {
    background-color: var(--red) !important;
}

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: green !important;
}

.mat-dialog-actions {
    justify-content: center !important;
}


form .question-content {
    max-width: unset;
}



.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: white !important;
    font-weight: 800;
    border-radius: unset !important;
    transition: border .3s ease;
}

.mat-form-field-appearance-fill.mat-form-field-invalid .mat-form-field-flex {
    border: 2px solid var(--red);

}

.mat-form-field-underline {
    display: none !important;
}

.mat-checkbox-layout {
    align-items: start !important;
}

.mat-checkbox-inner-container {
    margin: unset !important;
    margin-top: 0px !important;
    margin-right: 10px !important;
    width: 23px !important;
    height: 23px !important;
    background: white;
    border-radius: 4px;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: transparent !important;
}

.mat-checkbox-checkmark-path {}

.invalid {
    border: none !important;
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {}

/* makes bg transparent on form */

.mat-card {
    background: transparent !important;
    box-shadow: none !important;
}


mat-checkbox {
    margin: unset !important;
}

app-page-block-form-question-checkbox section {
    padding: 0 !important;
}




/* // mat-icon-stepper selected color change  */
.mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {}

/* //input outline color */
.mat-form-field-appearance-outline .mat-form-field-outline {
    /* input bg  */
    background: transparent !important;
    border-radius: 5px !important;
    /* // opacity: 1!important; */
}

.mat-error {
    padding: 3px 0em 0 !important;
}

.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper {
    padding: unset !important;
}

.key-dob1 p,
.key-CompanionDOB p {
    margin: 0;
}

/* 
//mat-input focused color */
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {}



/* // mat-input error outline color */
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: var(--red) !important;
    opacity: 1 !important;
}

/* // mat-input carent color */
.mat-input-element,
.mat-form-field .mat-select-value {
    caret-color: var(--white) !important;
    color: var(--white) !important;
    font-family: "halyard-display", sans-serif !important;
    letter-spacing: 0;
}

/* // mat-input error carent color */
.mat-form-field-invalid .mat-input-element,
.mat-warn .mat-input-element {
    caret-color: var(--white) !important;
}

/* // mat-label normal state style */
.mat-form-field-label {
    color: var(--white) !important;
    font-family: "halyard-display", sans-serif !important;
    letter-spacing: 0;
    font-size: 18px;
}

/* // mat-label focused style */
.mat-form-field.mat-focused .mat-form-field-label {
    color: var(--white) !important;
    font-family: "halyard-display", sans-serif !important;
    letter-spacing: 0;
}

/* // mat-label error style */
.mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: var(--white) !important;
    font-family: "halyard-display", sans-serif !important;
    letter-spacing: 0;
}

.mat-checkbox {
    font-family: "halyard-display", sans-serif !important;
}







/* checkbox */
mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
    opacity: 0.03 !important;
    background-color: transparent !important;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: transparent !important
}

/* checkbox tick */
.mat-checkbox-checkmark-path {}

.best-before-date-modal h1 {
    line-height: 1em;
    font-size: 2.5em !important;
}

.codeBoxContainer {
    display: flex;
    justify-content: center;
}

.best-before-date-modal .example-image {
    width: 100%;
    max-width: 30em;
}


.mat-form-field-subscript-wrapper {
    margin-top: 1.8em;
}

.mat-form-field-appearance-fill .mat-form-field-subscript-wrapper {
    /* padding: 0 1em; */
    padding: 0 0 !important;
}

/* adjusting the form label focus */
/* mat-form-field.mat-focused label{
    transform: translateY(-0.89375em) scale(.75) !important;

} */


.key-dob1.question,
.key-CompanionDOB.question {
    margin: 0 auto -0.5rem !important;
}

app-page-block .mat-form-field-wrapper {
    padding-bottom: 0.1em;
}

.footerLogos {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    align-items: center;
}

.pNLogo {
    width: 10%;
    min-width: 90px;
}

.pNLogo i {
    display: block;
    width: 100%;
    padding-bottom: 70%;
    background: url(https://cdn.promo-now.com/site-files/696100a50fe8e0cbf41106eb/promonow-logo.svg) center no-repeat;
    background-size: contain;
}



@media only screen and (min-width:768px) {
    .headerContainer {
        height: 70vw;
        max-height: 720px;
    }

    .headerImg {
        margin-top: min(50px, 14vw);
    }

    .headerImg i {
        max-width: 1000px;
        padding-bottom: min(543px, 53%);
        margin: 0 auto;
    }


    /* old header */
    /* 
    .headerText {
        text-align: center;
        color: var(--white);
        position: absolute;
        transform: translate(-100%, -260%);
        left: 50%;
        top: 100%;
        width: unset;
    }


    .headerText h1 {
        font-size: min(3.2vw);
        letter-spacing: 0.06em;
    }

    .headerText h2 {
        font-size: min(1.81vw);
        letter-spacing: 0.06em;
    } */

    .headerText {
        transform: translate(-50%, -126%);
        left: 50%;
        top: 100%;
        width: 65%;
        max-width: 650px;
    }

    .headerText h1 {
        font-size: min(40px, 4vw);
        letter-spacing: 0.06em;
    }

    .headerText h2 {
        font-size: min(25px, 2.51vw);
        letter-spacing: 0.06em;
    }
}

@media only screen and (min-width: 1025px) {

    nav,
    .logoMob {
        display: none;
    }

    .logo {
        min-width: 163px;
        height: 100%;
    }

    .tuiLogo {
        top: calc(1.7vw + 3px);
        left: calc(3.1vw + 170px);
    }

    .logo i {
        background: url(https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/SNG_Logos-sq.png) center no-repeat;
        padding-bottom: 100%;
        width: 100%;
        padding-bottom: 16%;
        display: block;
        max-width: 163px;
        background-size: contain;
    }

    .navDesk {
        color: var(--white);
        width: 100%;
        position: absolute;
        display: flex;
        z-index: 1;
        justify-content: space-between;
        padding: 1.7vw 3.1vw;
        font-size: 17px;
        align-items: center;

        z-index: 1;
    }

    .navDesk ul,
    .navDesk li {
        text-decoration: none;
        list-style: none;
        display: flex;
        padding: 16px;
        justify-content: flex-end;
        margin: 0;
        padding: 0;

    }

    .navDesk li {
        margin-left: 2vw;
    }

    .navDesk li:last-child {
        padding: 11px 17px;
        background: var(--red);
        border-radius: 8px;
    }

    .navDesk a {
        color: var(--white);
        text-decoration: none;
        align-self: anchor-center;
    }
}


/* Changes to accommodate two logos */
.brand-logos {
    display: flex;
    align-items: center;
    gap: 30px;
    position: absolute;
    z-index: 1;
    padding: 1.7vw 3.1vw;
}

.brand-logo i {
    display: block;
    height: 48px;
    width: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.brand-logo--primary i {
    background-image: url("https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/SNG_Logos-sq.png");
}

.brand-logo--secondary i {
    background-image: url("https://cdn.promo-now.com/site-files/6960f3760fe8e0cbf41106ba/TUI_3CPM.svg");
}

.brand-logo--primary:hover i {
    opacity: 0.85;
}

.navDesk {
    justify-content: flex-end;
}

@media only screen and (max-width: 1025px) {
    .brand-logo i {
        height: 36px;
        width: 90px;
    }

    .brand-logos {
        top: 2.5vw !important;
    }
}

.mat-dialog-content {
	word-break: break-word;
}