@charset "UTF-8";
/* CSS Document */

/*	
==================================================
Table of Contents
==================================================
:: Typography
:: Colors
:: Layout
:: Buttons
:: Forms
:: Media Queries
*/

/*	Typography
================================================== */
/*.test { border: 1px solid black; }*/
body { font-family: "merel", sans-serif; color: #fff; font-size: 1.2em; line-height: 1.3em; }
h1, h2, h3, h4, h5, h6 { font-weight: 900; }
h1 { font-size: 1.9em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.4em; font-weight: 600; }
#details { line-height: 1.6em; }
.bolder { font-weight: 600; }
.secondary-top h1 { font-size: 1.5em; }

/*	Colors
================================================== */
.blue { background-color: #015a9e; }
.red { background-color: #ad0b46; }
.brown { background-color: #8b460f; }
.green { background-color: #006600; }
.purple { background-color: #88319a; }
.yellow { background-color: #fbf352; }

.yellow-text, .yellow-text:hover { color: #fbf352; }
.green-text, .green-text:hover { color: #005700 }
.blue-text, .blue-text:hover { color: #004d87; }
.red-text, .red-text:hover { color: #a5003a; }
.brown-text, .brown-text:hover { color: #7c3600; }
.purple-text, .purple-text:hover { color: #7d2184; }

a:link { color: white; }
a:visited { color: white; }
a:hover { color: white; }
a:active { color: white; }

/*	Layout
================================================== */
html { scroll-behavior: smooth; }
body { margin: 0; box-sizing: border-box; }
#intro { height: 70vh; background-size: cover; text-align: center; }

.center { text-align: center; }
.grid-container-one { display: grid; grid-template-columns: auto; grid-gap: 10px; }
.grid-container-two { display: grid; grid-template-columns: auto; grid-gap: 10px; /*min-height: 100vh;*/ }
.description, .candidate, .perks { padding: 10%; background-size: cover; }
.description { background-image: url(../images/bkgd-description.png); }
.candidate { background-image: url(../images/bkgd-candidate.png); }
.perks { background-image: url(../images/bkgd-perks.png); }
ul { padding-left: 0; }

/*  Secondary Pages  */
.secondary-top, .secondary-bottom { 
    min-height: 50vh; text-align: center; position: relative; background-size: cover; background-position: center center; }
.secondary-top { background-image: url(../images/bkgd-beans.png); }
.secondary-message { min-width: 290px; max-width: 700px; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/*  Thanks Pages  */
.thanks { background-image: url(../images/bkgd-thanks.png); }
.closed { background-image: url(../images/bkgd-closed.png); }
.rules { background-image: url(../images/bkgd-rules.png); background-position: left top; 
    background-repeat: repeat; background-size: auto; background-attachment: fixed; }

/*  Rules Page  */
.rules-text { max-width: 900px; text-align: left; font-size: 0.9em; line-height: 1.4em; padding: 50px; margin: auto; }
.rules-text ul li, .rules-text ul li:last-child { margin-bottom: 1em; list-style-type: disc; }
.rules-text ul > li > ul > li { margin-bottom: 0; list-style-type: disc; }
.card { background-color: transparent; border: 0; }
/*.btn-rules { color: #fff; font-weight: 600; }*/
.accordion-item, .accordion-button, .accordion-button:not(.collapsed) { 
    background-color: transparent; color: #fff; }
.accordion-button { text-decoration: underline; }
.accordion-button:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important; margin-left:0!important; margin-right:auto; }
.accordion-item button::after { position: absolute; z-index: 100; left: 48%; top: 2.5em; }
.accordion-button:not(.collapsed), .accordion-button:not(.collapsed):focus {
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px; }

/*	Carousel
================================================== */
.carousel-text { position: absolute; top: 0; left: 50%; min-width: 320px; margin: 6% auto; 
    z-index: 999; transform: translate(-50%, 0); min-height: 65vh; }
.carousel-text h1 { font-size: 1.9em; line-height: 1em; margin-bottom: 8px; }
.carousel-text p { font-size: 1.5em; font-weight: 600; line-height: 1em; }
.carousel-item { min-height: 70vh; }
.carousel-slide-1, .carousel-slide-2, .carousel-slide-3, .carousel-slide-4, 
.carousel-slide-5, .carousel-slide-6, .carousel-slide-7 {
    background-size: cover; background-position: center center; }
.carousel-slide-1 { background-image: url(../images/slide-carousel-1-xs.jpg); }
.carousel-slide-2 { background-image: url(../images/slide-carousel-2-xs.jpg); }
.carousel-slide-3 { background-image: url(../images/slide-carousel-3-xs.jpg); }
.carousel-slide-4 { background-image: url(../images/slide-carousel-4-xs.jpg); }
.carousel-slide-5 { background-image: url(../images/slide-carousel-5-xs.jpg); }
.carousel-slide-6 { background-image: url(../images/slide-carousel-6-xs.jpg); }
.carousel-slide-7 { background-image: url(../images/slide-carousel-7-xs.jpg); }
/*.carousel-item*/ div p.swipe { 
    font-weight: 600; font-size: 1em; position: absolute; bottom: 0; left: 0; text-align: center; 
    /*width: 100vw;*/ min-width: 100%; text-shadow: 2px 2px 5px rgba(0,0,0,.3); }

/*	Forms
================================================== */
/*  Backgrounds  */
#app-screen-1, #app-screen-2, #app-screen-3, #app-screen-4, #app-screen-5, #app-screen-6 { 
    min-height: 100vh; background-size: cover; padding: 50px; position: relative; background-position: center center; }
#app-screen-2 form, #app-screen-3 form, #app-screen-4 form, #app-screen-5 form, #app-screen-6 form { 
    margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#app-screen-1 { background-image: url(../images/bkgd-app-1.png); }
#app-screen-2 { background-image: url(../images/bkgd-app-2.png); }
#app-screen-3 { background-image: url(../images/bkgd-app-3.png); }
#app-screen-4 { background-image: url(../images/bkgd-app-4.png); }
#app-screen-5 { background-image: url(../images/bkgd-app-5.png); }
#app-screen-6 { background-image: url(../images/bkgd-app-6.png); }

/*  Controls  */
.progress { display: grid; width: 94px; margin: 20px auto 10px; background-color: transparent; 
    grid-template-columns: auto auto auto auto auto auto; grid-gap: 10px; }
.progress-indicator { 
    width: 10px; height: 10px; border-radius: 100%; background-color: rgb(255,255,255,.5); float: left; }
.progress-indicator-active { width: 10px; height: 10px; border-radius: 100%; background-color: #fff; }
.form-control, .form-check-input[type=checkbox] { border-radius: 0; color: #ffffff; }
.app-form input, .app-form input:checked, .form-control:active, .app-form .form-control:focus, .app-form .form-control:focus:active, .app-form input:checked[type=radio], .app-form textarea { 
    background-color: transparent; border-color: #fff; }
.form-control::placeholder { color: white; opacity: 1; }
.form-control:-ms-input-placeholder { color: white; }
.form-control::-ms-input-placeholder { color: white; }
.form-control:focus { 
    border-color: #fbf352; box-shadow: inset 0 1px 1px rgba(251, 243, 82, 0.075), 0 0 8px rgba(251, 243, 82, 0.6); color: #fff; }
input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button { background-color: #fff; }
.btn-light { border-radius: 0; min-width: 120px; font-weight: 600; }

/*  Layout  */
/*#app-screen-1 form, */#app-screen-2 form, #app-screen-3 form, #app-screen-4 form, #app-screen-5 form, #app-screen-6 form { width: 90vw; }

.multiple-choice-two, .multiple-choice-four { display: inline-grid; text-align: left; }

/*  Screen-1  */
#app-screen-1 h2 { font-size: 1.7em; }
#app-screen-1 h3 { font-size: 1.5em; }

/*  Screen-6  */
.email-signup { font-size: .8em; line-height: 1em; }

/* ================================================== */
/* ================================================== */
/*	MEDIA QUERIES
/* ================================================== */
/* ================================================== */

/* EXTRA SMALL DEVICES :: RED (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /*body { border: 3px solid red; }*/
} 

/* SMALL DEVICES :: ORANGE (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    /*body { border: 3px solid orange; }*/

    /*	Typography
    ================================================== */
    .secondary-top h1 { font-size: 2em; }

    /*	Layout
    ================================================== */
    #intro { height: 90vh; }

    /*	Carousel
    ================================================== */
    .carousel-item { min-height: 90vh; }
    .carousel-slide-1 { background-image: url(../images/slide-carousel-1.jpg); }
    .carousel-slide-2 { background-image: url(../images/slide-carousel-2.jpg); }
    .carousel-slide-3 { background-image: url(../images/slide-carousel-3.jpg); }
    .carousel-slide-4 { background-image: url(../images/slide-carousel-4.jpg); }
    .carousel-slide-5 { background-image: url(../images/slide-carousel-5.jpg); }
    .carousel-slide-6 { background-image: url(../images/slide-carousel-6.jpg); }
    
    .carousel-text { position: absolute; top: 0; left: 50%; min-width: 320px; margin: 6% auto; 
    z-index: 999; transform: translate(-50%, 0); min-height: 80vh; }
    
    /*.carousel-item*/ div p.swipe { 
    font-weight: 600; font-size: 1em; position: absolute; bottom: 0; left: 0; text-align: center; 
    /*width: 100vw;*/ min-width: 100%; text-shadow: 2px 2px 5px rgba(0,0,0,.3); }
    
    /*	Forms
    ================================================== */
    /*  Backgrounds  */
    #app-screen-1, #app-screen-2, #app-screen-3, #app-screen-4, #app-screen-5, #app-screen-6 { 
    min-height: 10vh; }
    
    /*  Layout  */
    #app-screen-1 form, #app-screen-2 form, #app-screen-3 form, #app-screen-4 form, #app-screen-5 form, #app-screen-6 form, #app-screen-2 h3, #app-screen-3 h3, #app-screen-4 h3, #app-screen-5 h3 { max-width: 55vw; margin: auto; }
    #app-screen-1, #app-screen-2, #app-screen-3, #app-screen-4, #app-screen-5, #app-screen-6 { 
    min-height: 10vh; }
    #app-screen-1 h2 { max-width: 40vw; margin: auto; }
    #app-screen-6 h3 { max-width: 50vw; margin: auto; }
} 

/* MEDIUM DEVICES :: YELLOW (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /*body { border: 3px solid yellow; }*/

    /*	Layout
    ================================================== */
    #intro { height: 320px; }
    .grid-container-one { grid-template-rows: 320px auto; /*min-height: 100vh;*/ }
    .grid-container-two { display: grid; grid-template-columns: auto auto; grid-gap: 10px; min-height: 300px; }
    .description { grid-row: 1 / 3; background-image: url(../images/bkgd-description-lg.png); background-size: cover; }
    .candidate { background-image: url(../images/bkgd-candidate-lg.png); background-size: cover; }
    .perks { background-image: url(../images/bkgd-perks-lg.png); background-size: cover; }
    .secondary-top { min-height: 320px; max-height: 320px; }

    /*	Carousel
    ================================================== */
    .carousel-text { top: 10%; left: 12%; text-align: left; width: 400px; transform:  translate(0%, 0%); }
    .carousel-text h1 { font-size: 1.75em; margin-bottom: 10px; }
    .carousel-text p { font-size: 1.25em; font-weight: 600; line-height: 1.2em; }
    .carousel-item { min-height: 320px; }
    .carousel-slide-1 { background-image: url(../images/slide-carousel-1-lg.jpg); }
    .carousel-slide-2 { background-image: url(../images/slide-carousel-2-lg.jpg); }
    .carousel-slide-3 { background-image: url(../images/slide-carousel-3-lg.jpg); }
    .carousel-slide-4 { background-image: url(../images/slide-carousel-4-lg.jpg); }
    .carousel-slide-5 { background-image: url(../images/slide-carousel-5-lg.jpg); }
    .carousel-slide-6 { background-image: url(../images/slide-carousel-6-lg.jpg); }
    .carousel-slide-7 { background-image: url(../images/slide-carousel-7-lg.jpg); }
    div p.swipe, div svg { display: none; }

    /*	Forms
    ================================================== */
    /*  Backgrounds  */
    #app-screen-1 form { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    #app-screen-1, #app-screen-2, #app-screen-3, #app-screen-4, #app-screen-5, #app-screen-6 { 
        height: 920px; background-size: cover; background-repeat: no-repeat; 
        background-position: center center; }
    #app-screen-1, #app-screen-6 { background-image: url(../images/bkgd-app-1-md.png); }
    #app-screen-2 { background-image: url(../images/bkgd-app-2-md.png); }
    #app-screen-3 { background-image: url(../images/bkgd-app-3-md.png); }
    #app-screen-4 { background-image: url(../images/bkgd-app-4-md.png); }
    #app-screen-5 { background-image: url(../images/bkgd-app-5-md.png); }

    /*  Layouts  */
    #app-screen-1 form { min-width: 75vw; margin: auto; }
    #app-screen-2 form, #app-screen-3 form, #app-screen-4 form, #app-screen-5 form, #app-screen-6 form { 
        max-width: 50vw; }

    #app-screen-1 h2, #app-screen-2 h3, #app-screen-3 h3, #app-screen-4 h3, #app-screen-5 h3, #app-screen-6 h3 { 
        max-width: 100vw; }

    .multiple-choice-two { max-width: 100%; display: inline-grid; grid-template-columns: auto auto; grid-gap: 20px; }
    .multiple-choice-four { max-width: 100%; display: inline-grid; grid-template-columns: auto auto auto auto; grid-gap: 20px; }

    /*  Screen-1  */
    #app-screen-1 form h2 { font-size: 1.9em; }
    #app-screen-1 form h3 { font-size: 1.7em; }
    .app-form-1 { display: grid; grid-template-columns: auto auto; grid-gap: 20px; width: 100%; }

    /*  Secondary Pages  */
    .secondary-top { background-image: url(../images/bkgd-beans-lg.png); }
}

/* EXTRA MEDIUM DEVICES :: GREEN (landscape tablets, 848px and up) */
@media only screen and (min-width: 848px) {
    /*body { border: 3px solid green; }*/

    /*	Carousel
    ================================================== */
    .carousel-text { top: 11%; left: 13%; }

    /*	Forms
    ================================================== */
    /*  Layout  */
    #app-screen-1 form { min-width: 67vw; max-width: 67vw; }
    #app-screen-2 form, #app-screen-3 form, #app-screen-4 form, #app-screen-5 form { 
        min-width: 45vw; max-width: 45vw; }

    /*  Secondary Pages  */
    /*  Thanks Page  */
    .thanks { background-image: url(../images/bkgd-thanks-lg.png); }
    .closed { background-image: url(../images/bkgd-closed-lg.png); }
    .rules { background-image: url(../images/bkgd-rules-lg.png); }
}

/* LARGE DEVICES:: BLUE (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /*body { border: 3px solid blue; }*/

    /*	Layout
    ================================================== */
    #intro { height: 400px; }
    .grid-container-one { grid-template-rows: 400px auto; /*min-height: 100vh;*/ }

    /*  Secondary Pages  */
    .secondary-top { min-height: 400px; max-height: 400px; }

    /*	Carousel
    ================================================== */
    .carousel-text { top: 10%; left: 11%; width: 460px; }
    .carousel-text h1 { font-size: 2em; }
    .carousel-text p { font-size: 1.5em; }
    .carousel-item { min-height: 400px; }

    /*	Forms
    ================================================== */
    /*  Layout  */
    #app-screen-1 form { min-width: 57vw; max-width: 57vw; }
    #app-screen-2 form, #app-screen-3 form, #app-screen-4 form, #app-screen-5 form { 
        min-width: 40vw; max-width: 40vw; }
}

/* MEDIUM LARGE DEVICES :: PURPLE (desktops, 1100px and up) */
@media only screen and (min-width: 1100px) {
    /*body { border: 3px solid purple; }*/

    /*	Carousel
    ================================================== */
    .carousel-text { top: 8%; left: 13%; width: 480px; }
    .carousel-text h1 { font-size: 2.1em; }    

    /*	Forms
    ================================================== */
    /*  Layout  */
    #app-screen-1 form, #app-screen-6 form { min-width: 52vw; max-width: 52vw; }
    #app-screen-2 form, #app-screen-3 form, #app-screen-4 form, #app-screen-5 form { 
        min-width: 35vw; max-width: 35vw; }
    #app-screen-1, #app-screen-6 { background-image: url(../images/bkgd-app-1-lg.png); }
    #app-screen-2 { background-image: url(../images/bkgd-app-2-lg.png); }
    #app-screen-3 { background-image: url(../images/bkgd-app-3-lg.png); }
    #app-screen-4 { background-image: url(../images/bkgd-app-4-lg.png); }
    #app-screen-5 { background-image: url(../images/bkgd-app-5-lg.png); }
}

/* EXTRA LARGE DEVICES :: BLACK (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /*body { border: 3px solid black; }*/

    /*	Layout
    ================================================== */
    #intro { height: 500px; }
    .grid-container-one { grid-template-rows: 500px auto; /*min-height: 100vh;*/ }
    .grid-container-two { display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 10px; min-height: 300px; }
    .description { grid-row: 1 / 2; }
    .secondary-top { min-height: 500px; max-height: 500px; }

    /*	Carousel
    ================================================== */
    .carousel-text { top: 14%; left: 12%; width: 620px; }
    .carousel-text h1 { font-size: 2.7em; line-height: 1em; }
    .carousel-text p { font-size: 1.75em; }
    .carousel-item { min-height: 500px; }

    /*	Forms
    ================================================== */
    /*  Layout  */
    #app-screen-2 form, #app-screen-3 form, #app-screen-4 form { 
        min-width: 30vw; max-width: 30vw; }
}

/* EXTRA EXTRA LARGE DEVICES :: PINK (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
    /*body { border: 3px solid pink; }*/

    /*	Layout
    ================================================== */
    .grid-container-two { display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 10px; min-height: 300px; }
    .description { grid-row: 1 / 2; }

    /*	Carousel
    ================================================== */
    .carousel-text { top: 12%; left: 12%; width: 660px; }
    .carousel-text h1 { font-size: 2.9em; line-height: 1em; }
    .carousel-text p { font-size: 1.75em; }

    /*	Forms
    ================================================== */
    /*  Layout  */
    #app-screen-1 form, #app-screen-6 form { min-width: 45vw; max-width: 45vw; }
}

/* EXTRA EXTRA EXTRA LARGE DEVICES :: WHITE (large laptops and desktops, 1800px and up) */
@media only screen and (min-width: 1800px) {
    /*body { border: 3px solid white; }*/

    /*	Carousel
    ================================================== */
    .carousel-text { top: 4%; left: 13%; width: 780px; }
    .carousel-text h1 { font-size: 3.4em; line-height: 1em; }
    .carousel-text p { font-size: 1.75em; }

    /*	Forms
    ================================================== */
    /*  Layout  */
    #app-screen-1 form, #app-screen-6 form { min-width: 40vw; max-width: 40vw; }
    #app-screen-2 form, #app-screen-3 form, #app-screen-4 form { 
        min-width: 25vw; max-width: 25vw; }
}