* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'UnityHeadlineBold';
    src: url('fonts/TCCC-UnityHeadline-Bold.ttf');
}

@font-face {
    font-family: 'UnityTextRegular';
    src: url('fonts/TCCC-UnityText-Regular.ttf');
}

@font-face {
    font-family: 'NocturnoStdBold';
    src: url('fonts/NocturnoStd-Bld1.otf');
}

/* Keyframes for slide-in animation */
@keyframes dropInTop {
    0% {
        transform: translateY(-50vh);
    }

    60% {
        transform: translateY(+20px);
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes dropInBottom {
    0% {
        transform: translateY(+50vh);
    }

    60% {
        transform: translateY(-20px);
    }

    80% {
        transform: translateY(+10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes dropInTopH2 {
    0% {
        transform: translateY(-50vh);
        opacity: 0;
    }

    60% {
        transform: translateY(+20px);
        opacity: 1;
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes moveInLeft {
    0% {
        transform: translateX(+50vh);
    }

    60% {
        transform: translateX(-20px);
    }

    80% {
        transform: translateX(+10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes moveInRight {
    0% {
        transform: translateX(-50vh);
    }

    60% {
        transform: translateX(+20px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    background-color: #006633;
}

.container {
    width: 93%;
    height: 88%;
    display: flex;
    flex-direction: row;
    box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
    justify-content: center;
    /* moves everything towards center point */
    align-items: center;
    /* border-radius: 2vw 2vw 2vw 2vw; */
}

#exitContainer {
    box-shadow: none;
}

.imgsContainer {
    width: 65%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* margin-right: 2vw; */
}

.bgImage {
    width: 100%;
    height: 100%;
    /* border-radius: 2vw 0vw 0vw 2vw; */

    background-image: url(images/MB-BG-Web.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* ANIMATION */
    animation: moveInRight .75s ease-out forwards;

    /* box-sizing: border-box; */
    border: 8px solid #fff;
}

.yellowCD {
    width: 35%;
    height: 50%;
    background-image: url(images/CD-Yellow_BottleCan.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #D4B012;
    box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.5);
}

.logoBox {
    height: 15%;
    width: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.CDLogo {
    background-image: url(images/canada_dry_logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* ADJUST SIZE */
    /* height: 10vh; */
    scale: 100%;
    width: 4.7vw;
    margin-right: 2vw;
}

.MBLogo {
    background-image: url(images/MB-Logo_Black.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* ADJUST SIZE */
    /* height: 10vh; */
    scale: 100%;
    width: 9vw;
}

.formBox {
    width: 35%;
    background-color: #fff;
    height: 100%;
    /* includes padding INSIDE the total size of this div */
    box-sizing: border-box;
    padding: 6vh 4vw 6vh 4vw;
    overflow: hidden;
    /* border-radius: 0vw 2vw 2vw 0vw; */
    border: 8px solid #fff;

    /* vertically centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* moves everything towards center point */
    align-items: center;

    /* ANIMATION */
    animation: moveInLeft .75s ease-out forwards;
}

#exitFB {
    height: 50%;
    box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
}

#datecheckFB {
    width: 100%;
    height: 100%;

    /* ANIMATION */
    animation: moveInLeft .75s ease-out forwards;
}

form {
    text-align: center;
    width: 100%;
}

h1 {
    font-family: 'NocturnoStdBold';
    font-size: 3.8vw;
    color: #006633;
    text-align: center;
    line-height: 100%;
}

#exitH1 {
    font-size: 3.8vw;
    text-align: center;
    line-height: 100%;
}

h2 {
    font-family: 'NocturnoStdBold';
    font-size: 3vw;
    color: #006633;
    /* text-shadow: 0px 0px 60px rgb(0, 0, 0, 0.2); */
    position: absolute;
    top: 8%;
    left: 5%;
    /* transform: translate(20%, -20%); */

    /* ANIMATION */
    animation: dropInTopH2 1.2s ease-out forwards;
}


p {
    font-family: 'NocturnoStdBold';
    line-height: 3.3vh;
    font-size: 1.1vw;
    text-align: center;
    color: #006633;

    /* SPACING */
    margin-bottom: 5vh;
    margin-top: 5vh;
}

#successP {
    margin-top: 5vh;
    margin-bottom: 0vh;
}

fieldset {
    border: none;
    display: flex;

    /* SPACING */
    margin-bottom: 2vh;
}

#firstname {
    width: 50%;
    margin-right: 1vw;

    border-radius: 0;
    box-shadow: 0 2px 0 0 #221F20;
}

#lastname {
    border-radius: 0;
    width: 50%;
    margin-left: 1vw;
}

#email {
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;

    /* SPACING */
    margin-bottom: 2vh;
}

#province {
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    border: none;
    color: #221F20;
    border-radius: 0;

    font-family: 'UnityTextRegular';
    font-size: 1em;
    background-color: transparent;
    box-sizing: border-box;

    /* SPACING */
    padding-left: 0vw;
    padding-bottom: .3vw;
    margin-bottom: 9vh;

    /* this is the bottom border */
    box-shadow: 0 2px 0 0 #221F20;

}

input {
    font-family: 'UnityTextRegular';
    font-size: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;

    /* SPACING */
    padding-left: 0vw;
    padding-bottom: .3vw;

    /* this is the bottom border */
    box-shadow: 0 2px 0 0 #221F20;
}

::placeholder {
    color: #221F20;
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'NocturnoStdBold';
    font-size: 1.51vw;
    line-height: 3.5vh;
    border: none;
    cursor: pointer;
    padding: 1vh 4vw 1vh 4vw;
    border-radius: 0px;
}

#buttonStyle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #006633;
    border: solid 2px #006633;
    color: #fff;
}

#buttonStyle:hover {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #CFA300;
    color: #FFF;
    border: solid 2px #CFA300;
}

footer {
    font-family: 'UnityTextRegular';
    font-size: 0.7em;
    position: fixed;
    bottom: 0;
    padding-bottom: 2.5vh;
    display: flex;
    flex-direction: row;
}

footer a {
    text-decoration: none;
    margin-right: 1vw;
}

/* stops last link from introducing the margin-right above */
footer a:last-child {
    margin-right: 0vw;
}

footer a:hover {
    text-decoration: underline;
}

footer a:link {
    color: #221F20;
    text-underline-offset: .3vh;
}

footer a:visited {
    color: #221F20;
}


/* MOBILE - PORTRAIT */
@media screen and (max-width:1024px) {
    h2 {
        display: none;
    }

    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: #006633;
    }

    .container {
        width: 80%;
        height: 88%;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
        justify-content: center;
        /* moves everything towards center point */
        align-items: center;
        /* border-radius: 2vw 2vw 2vw 2vw; */
    }

    .imgsContainer {
        width: 100%;
        height: 40%;
        flex-direction: column;
    }

    .bgImage {
        width: 100%;
        height: 100%;

        background-image: url(images/MB-BG-Web.jpg);
        background-repeat: no-repeat;

        background-size: cover;
        background-position: center;

        /* ANIMATION */
        animation: dropInTop .75s ease-out forwards;

        box-sizing: border-box;
        border: 6px solid #fff;
    }

    .logoBox {
        width: 100%;
    }

    .CDLogo {
        /* ADJUST SIZE */
        scale: 170%;
        margin-right: 10vw;
    }

    .MBLogo {
        /* ADJUST SIZE */
        scale: 170%;
    }

    .formBox {
        width: 100%;
        height: 60%;
        padding: 6vh 10vw 6vh 10vw;
        border: 6px solid #fff;

        /* ANIMATION */
        animation: dropInBottom 1s ease-out forwards;
    }

    p {
        line-height: 3.3vh;
        font-size: 2.5vw;

        /* SPACING */
        margin-bottom: 4vh;
        margin-top: 4vh;
    }

    button {
        /* width: 100%; */
        font-size: 2.5vw;
        line-height: 3.3vh;
        padding: .5vh 10vw .5vh 10vw;
    }

    fieldset {
        width: 100%;
        /* SPACING */
        margin-bottom: 2vh;
    }

    #firstname {
        box-shadow: 0 1.5px 0 0 #221F20;
    }

    #lastname {
        margin-left: 2vw;
    }

    #email {
        /* SPACING */
        margin-bottom: 2vh;
    }

    #province {
        font-size: .8em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;
        /* locates the button */
        margin-bottom: 6vh;

        /* this is the bottom border */
        box-shadow: 0 1.5px 0 0 #221F20;

    }

    input {
        font-size: .8em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;

        /* this is the bottom border */
        box-shadow: 0 1.5px 0 0 #221F20;
    }

    footer {
        padding-bottom: 0vh;
        font-size: 0.6em;
    }

    footer a:link {
        text-underline-offset: .2vh;
    }

    #exitH1 {
        font-size: 12vw;
        text-align: center;
        line-height: 100%;
    }

    #exitFB {
        height: 50%;
        box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
    }

    #successP {
        line-height: 3.3vh;
        font-size: 4.5vw;
    }

}

@media screen and (max-width:500px) {
    h2 {
        display: none;
    }

    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: #006633;

        background-image: url(images/MB-BG-Web.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .container {
        width: 100%;
        height: 88%;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
        justify-content: center;
        /* moves everything towards center point */
        align-items: center;
        /* border-radius: 2vw 2vw 2vw 2vw; */
    }

    .imgsContainer {
        width: 80%;
        height: 30%;
        flex-direction: column;
    }

    .bgImage {
        width: 100%;
        height: 100%;

        background-image: url(images/CD-Yellow-BottleCan-Mobile2.jpg);
        background-repeat: no-repeat;

        background-size: 330%;
        background-position: 50% 76%;

        /* ANIMATION */
        animation: dropInTop .75s ease-out forwards;

        box-sizing: border-box;
        border: 6px solid #fff;
    }

    .logoBox {
        width: 100%;
        height: 10%;
    }

    .CDLogo {
        /* ADJUST SIZE */
        width: 24vw;
        margin-right: 0vw;
        scale: 100%;
    }

    .MBLogo {
        /* ADJUST SIZE */
        width: 27vw;
        scale: 100%;
    }

    .formBox {
        width: 80%;
        height: 70%;
        padding: 1vh 10vw 6vh 10vw;
        border: 6px solid #fff;

        /* ANIMATION */
        animation: dropInBottom 1s ease-out forwards;
    }

    p {
        line-height: 3.3vh;
        font-size: 3.5vw;

        /* SPACING */
        margin-bottom: 4vh;
        margin-top: 2.5vh;
    }

    button {
        width: 100%;
        font-size: 3.5vw;
        line-height: 3.3vh;
        padding: 1vh 10vw 1vh 10vw;
    }

    fieldset {
        /* SPACING */
        margin-bottom: 2vh;
    }

    #firstname {
        box-shadow: 0 1.5px 0 0 #221F20;
    }

    #lastname {
        margin-left: 2vw;
    }

    #email {
        /* SPACING */
        margin-bottom: 2vh;
    }

    #province {
        font-size: .8em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;
        /* locates the button */
        margin-bottom: 6vh;

        /* this is the bottom border */
        box-shadow: 0 1.5px 0 0 #221F20;

    }

    input {
        font-size: .8em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;

        /* this is the bottom border */
        box-shadow: 0 1.5px 0 0 #221F20;
    }

    footer {
        padding-bottom: 0vh;
        font-size: 0.6em;
    }

    footer a:link {
        text-underline-offset: .2vh;
    }

    #exitH1 {
        font-size: 12vw;
        text-align: center;
        line-height: 100%;
    }

    #exitFB {
        height: 50%;
        box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
    }

    #successP {
        line-height: 3.3vh;
        font-size: 4.5vw;
    }
}

@media screen and (max-width:414px) {

    #email {
        /* SPACING */
        margin-bottom: 1.5vh;
    }

    #province {
        font-size: .8em;

        /* SPACING */
        padding-bottom: 0.75vh;
        /* locates the button */
        margin-bottom: 6vh;
    }

    input {
        font-size: .8em;
        /* SPACING */
        padding-bottom: 0.75vh;
    }
}

@media screen and (max-width:412px) {
    .container {
        width: 90%;
        height: 88%;
    }

    .imgsContainer {
        width: 100%;
        height: 30%;
    }

    .bgImage {
        width: 100%;
        height: 100%;

        background-size: 180%;

        border: 5px solid #fff;
    }

    .logoBox {
        height: 12%;
        width: 100%;
    }

    .CDLogo {
        /* ADJUST SIZE */
        width: 18vw;
        margin-right: 4vw;
    }

    .MBLogo {
        /* ADJUST SIZE */
        width: 8vw;
    }

    .formBox {
        width: 100%;
        height: 70%;
        padding: 1vh 10vw 0vh 10vw;
        border: 5px solid #fff;
    }

    p {
        line-height: 2.5vh;
        font-size: 5vw;

        /* SPACING */
        margin-bottom: 5vh;
        margin-top: 3vh;
    }

    button {
        width: 100%;
        font-size: 5vw;
        line-height: 3.3vh;
        padding: 1vh 10vw 1vh 10vw;
        margin-bottom: 3vh;
    }

    fieldset {
        /* SPACING */
        margin-bottom: 1.5vh;
    }

    #firstname {
        box-shadow: 0 1.5px 0 0 #221F20;
    }

    #lastname {
        margin-left: 5vw;
    }

    #email {
        /* SPACING */
        margin-bottom: 1.5vh;
    }

    #province {
        font-size: .9em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;
        /* locates the button */
        margin-bottom: 6vh;
    }

    input {
        font-size: .9em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;
    }

    footer {
        padding-bottom: 0vh;
        font-size: 0.6em;
    }

    footer a:link {
        text-underline-offset: .2vh;
    }
}

@media screen and (max-width:430px) {
    .container {
        width: 90%;
        height: 88%;
    }

    .imgsContainer {
        width: 100%;
        height: 30%;
    }

    .bgImage {
        width: 100%;
        height: 100%;

        background-size: 380%;
        background-position: 50% 77%;
    }

    .logoBox {
        height: 10%;
        width: 100%;
    }

    .CDLogo {
        /* ADJUST SIZE */
        width: 19vw;
        margin-right: 3vw;
    }

    .MBLogo {
        /* ADJUST SIZE */
        width: 28vw;
    }

    .formBox {
        width: 100%;
        height: 70%;
        padding: 1vh 10vw 0vh 10vw;
    }

    p {
        line-height: 2.5vh;
        font-size: 5vw;

        /* SPACING */
        margin-bottom: 5vh;
        margin-top: 3vh;
    }

    button {
        width: 100%;
        font-size: 5vw;
        line-height: 3.3vh;
        padding: 1vh 10vw 1vh 10vw;
        margin-bottom: 3vh;
    }

    fieldset {
        /* SPACING */
        margin-bottom: 1.5vh;
    }

    #lastname {
        margin-left: 5vw;
    }

    #email {
        /* SPACING */
        margin-bottom: 1.5vh;
    }

    #province {
        font-size: 1em;

        /* SPACING */
        padding-bottom: 0.75vh;
        /* locates the button */
        margin-bottom: 6vh;
    }

    input {
        font-size: 1em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;
    }

    footer {
        padding-bottom: 0vh;
        font-size: 0.6em;
    }
}

@media screen and (max-width:390px) {

    .logoBox {
        height: 10%;
        width: 100%;
    }

    .CDLogo {
        /* ADJUST SIZE */
        width: 14vw;
        margin-right: 5vw;
    }

    .MBLogo {
        /* ADJUST SIZE */
        width: 28vw;
    }

    #email {
        /* SPACING */
        margin-bottom: 1.5vh;
    }

    #province {
        font-size: .8em;

        /* SPACING */
        padding-bottom: 0.75vh;
        /* locates the button */
        margin-bottom: 6vh;
    }

    input {
        font-size: .8em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;
    }
}

@media screen and (max-width:375px) {
    .container {
        width: 90%;
        height: 93%;
    }

    .imgsContainer {
        width: 100%;
        height: 30%;
    }

    .bgImage {
        width: 100%;
        height: 100%;

        background-size: 320%;
        background-position: 50% 76%;
    }

    .logoBox {
        height: 10%;
    }

    .CDLogo {
        /* ADJUST SIZE */
        width: 17vw;
        margin-right: 4vw;
    }

    .MBLogo {
        /* ADJUST SIZE */
        width: 26vw;
    }

    .formBox {
        width: 100%;
        height: 70%;
        padding: 0vh 10vw 0vh 10vw;
    }

    p {
        line-height: 3.25vh;
        font-size: 4.25vw;

        /* SPACING */
        margin-bottom: 4vh;
        margin-top: 4vh;
    }
}

/* MOBILE - LANDSCAPE */

@media screen and (max-width:950px) and (orientation:landscape) {
    body {
        height: 100vh;
        background-color: #006633;
    }

    .container {
        width: 93%;
        height: 90%;
        display: flex;
        flex-direction: row;
        box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
        justify-content: center;
        /* moves everything towards center point */
        align-items: center;
        /* border-radius: 2vw 2vw 2vw 2vw; */
    }

    .imgsContainer {
        width: 40%;
        height: 100%;
        flex-direction: column;
    }

    .bgImage {
        width: 100%;
        height: 100%;

        background-image: url(images/MB-BG-Web.jpg);

        /* ANIMATION */
        animation: dropInTop .75s ease-out forwards;

        border: 6px solid #fff;
    }

    .CDLogo {
        /* ADJUST SIZE */
        scale: 100%;
        width: 4.5vw;
        margin-right: 4vw;
    }

    .MBLogo {
        /* ADJUST SIZE */
        scale: 100%;
        width: 10vw;
    }

    .formBox {
        height: 100%;
        width: 60%;
        padding: 1vh 6vw 6vh 6vw;
        border: 6px solid #fff;

        /* ANIMATION */
        animation: dropInBottom 1s ease-out forwards;
    }

    h2 {
        font-size: 2.25vw;
    }

    p {
        line-height: 5.25vh;
        font-size: 2vw;

        /* SPACING */
        margin-bottom: 5vh;
        margin-top: 3.5vh;
    }

    button {
        width: 100%;
        font-size: 2vw;
        line-height: 5.25vh;
        padding: 2vh 10vw 2vh 10vw;
    }

    fieldset {
        /* SPACING */
        margin-bottom: 2vh;
    }

    #firstname {
        box-shadow: 0 1.5px 0 0 #221F20;
    }

    #lastname {
        margin-left: 2vw;
    }

    #email {
        /* SPACING */
        margin-bottom: 2vh;
    }

    #province {
        font-size: .8em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;
        /* locates the button */
        margin-bottom: 7vh;

        /* this is the bottom border */
        box-shadow: 0 1.5px 0 0 #221F20;

    }

    input {
        font-size: .8em;

        /* SPACING */
        padding-left: 0vw;
        padding-bottom: 0.75vh;

        /* this is the bottom border */
        box-shadow: 0 1.5px 0 0 #221F20;
    }

    footer {
        padding-bottom: 0vh;
        font-size: 0.5em;
    }

    #exitH1 {
        font-size: 5.25vw;
        text-align: center;
        line-height: 100%;
    }

    #exitFB {
        height: 50%;
        box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
    }

    #successP {
        line-height: 3.3vh;
        font-size: 2vw;
    }
}

@media screen and (max-width:670px) and (orientation:landscape) {
    .container {
        width: 94%;
        height: 90%;
    }

    .imgsContainer {
        width: 40%;
        height: 100%;
    }

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

    .CDLogo {
        /* ADJUST SIZE */
        width: 5vw;
        margin-right: 4vw;
    }

    .MBLogo {
        /* ADJUST SIZE */
        width: 12vw;
    }

    .formBox {
        width: 60%;
        padding: 1vh 6vw 6vh 6vw;
        border: 6px solid #fff;
    }

    p {
        line-height: 4.25vh;
        font-size: 2vw;

        /* SPACING */
        margin-bottom: 5vh;
        margin-top: 3.5vh;
    }

    button {
        width: 100%;
        font-size: 2vw;
        line-height: 4.25vh;
        padding: 2vh 10vw 2vh 10vw;
    }

}