/* **********************************************************************/
/* Mods/overrides of skeleton.css */

html, body {
    font-family: 'Lato', sans-serif;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

code {
    font-size: 1.1em;
}

/* Checkbox styles from
   https://stackoverflow.com/a/52683804
   */
input[type=checkbox] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    outline: none;
    content: none;
}
input[type=checkbox]:before {
    font-family: "FontAwesome";
    color: transparent !important;
    display: block;
    content: "\f00c";
    font-size: 1.2em;
    background: #fef2e0;
    width: 1em;
    height: 1em;
    border: 1px solid #666;
    border-radius: .2em;
    margin-right: 0;
}
input[type=checkbox]:checked:before {
    color: #333 !important;
}

/* **********************************************************************/
/* Helper classes */

.boxshadow {
    box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
}
    .boxshadow:hover {
        box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    }

.dropshadow {
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.4));
}
    .dropshadow:hover {
        filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.4));
    }

.onlydesktop {
    display: none;
}

/*  from
    https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting
*/
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.phantom { visibility: hidden; }

/* **********************************************************************/
/* Specific DOM classes */

.modal__overlay {
    z-index: 999;
}

.wrap {
    height: 100%;
}

.header {
    padding: .75em 1.125em;
    text-align: left;
    line-height: 1;
    color: #272727;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    z-index: 10;
}
    .header_wordmark {
        flex-grow: 0;
    }
        .wordmark, .wordmark:hover, .wordmark:active, .wordmark:visited {
            font-size: 1.5em;
            font-family: 'Permanent Marker', sans-serif;
            color: #272727;
            text-decoration: none;
            margin-right: .36em;
        }
        .header_by {
            font-size: .9em;
            font-style: italic;
        }
    .header_links {
        height: 1.5em;
        align-self: flex-end;
        margin-right: 5em;
        font-size: 1em;
        flex-grow: 0;
        display: none;
        justify-content: space-around;
    }
        .header_links > span {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin: .1em .5em .1em 0;
        }
            .header_links > span span {
                font-size: .8em;
                text-align: right;
            }
            .header_links > span input {
                width: 40;
                margin: 0 0 0 .7em;
                padding: .25em;
                height: 2em;
                border-bottom-left-radius: 4px;
                border-top-left-radius: 4px;
                border: 1px solid #ccc;
                color: #555;
            }
            .header_links > span button {
                padding: .2em .2em .2em .4em;
                height: 2em;
                margin-bottom: 0;
                position: relative;
                right: 1px;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
                .header_links > span button img {
                    height: 1.5em;
                }

        .header_links a {
            margin-left: 1em;
            background: url("copy.png") center right no-repeat;
            background-size: 1em;
            padding-right: 1.35em;
            text-decoration: none;
            color: #333;
        }
            .header_links a:hover {
                text-decoration: underline;
            }

.help_icon {
    z-index: 11;
    position: fixed;
    top: 1.45em;
    right: 1.45em;
    width: 3em;
    height: 3em;
    background-image: url("help.png");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
    p {
        margin-top: 1em;
        margin-bottom: 1em;
    }

.home_welcome {}
.landing_hero {
    background-color: #EB658A;
    background: url("cover.png") center no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    min-height: 500px;
    height: 100%;
    text-align: center;
}
.bglogo {
    background-color: #EB658A;
    background: url("cover.png") center no-repeat;
    background-size: cover;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.home_button_overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: flex-end;
    z-index: 1;
}
    .home_button_wrap {
        margin: 10vh auto;
    }
        .home_button {
            display: block;
            background-color: #0FA0CE !important;
            border: 6px solid #fff !important;
            line-height: inherit !important;
            font-family: 'Lato', sans-serif !important;
            text-transform: none !important;
            font-weight: normal !important;
            letter-spacing: normal !important;
            font-size: 1.3em !important;
            color: #fff !important;
            padding: .2em .8em !important;
            margin: 0 auto;
            border-radius: 2em;
            height: auto;
        }
        .home_button_subtext {
            margin-top: .6em;
            text-align: center;
            color: white;
            text-shadow: 0px 0px .4em black;
        }

.bgwhirl {
    background-color: #EB658A;
    background: url("bgwhirl.png") center no-repeat;
    background-size: cover;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.bgwhirl, .bgwhirl > * {
    flex-shrink: 0;
}

.questionsetmenu_wrap {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
    .questionsetmenu {
        font-size: 1em;
        display: inline-flex;
        background-color: #fff;
        border-radius: 1em;
        padding: 0 .5em;
        margin-bottom: 1em;
        height: 1.9em;
    }
    .questionsetmenu:hover {
        box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
    }
    .questionsetmenu label {
        margin: 0 .5em;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        font-weight: normal;
        font-size: .9em;
    }
        .questionsetmenu label:active {
            color: #0a0a0a;
        }
        .questionsetmenu label input {
            margin: 0 .58em 0 0;
            cursor: pointer;
        }

.main_wrap {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 1em 2em;
    flex-direction: column;
}
    .mobileprevnextbuttons {
        display: flex;
        flex-direction: row;
    }
    .onlymobile .prevbutton { margin-right: 1em; }
    .onlymobile .nextbutton { margin-left:  1em; }
    .onlydesktop.prevbutton { margin-right: .7em; }
    .onlydesktop.nextbutton { margin-left:  .7em; }
    .prevbutton, .nextbutton {
        cursor: pointer;
        margin-bottom: 1em;
    }
        .nextbutton span { background-image: url('next.png'); }
        .prevbutton span { background-image: url('prev.png'); }
        .prevbutton span, .nextbutton span {
            display: inline-block;
            width: 3em;
            height: 3em;
            background-position: 50% 50%;
            background-size: contain;
            background-repeat: no-repeat;
        }
    .cardstuff_wrap {
        width: 100%;
        max-width: 40em;
        margin: 0;
    }
        .party_card {
            padding: 2.5em 3em;
            background-color: #fcfcfc;
            border-radius: 18px;
            cursor: pointer;
        }
            .party_cardtext {
                text-align: left;
                font-size: 3em;
                line-height: 1.2;
                word-break: break-word;
                position: relative;
            }
                .party_cardnumber {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    color: #bbb;
                    font-size: .8em;
                }
        .card_footer {
            margin-top: .5em;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
            .twitterlink {
                font-size: 1.1em;
                display: inline-flex;
                align-items: center;
                background-color: #fff;
                border-radius: 1em;
                text-decoration: none;
            }
                .twitterlink .twittericon {
                    display: inline-block;
                    width: 1.5em;
                    height: 1.5em;
                    background-image: url('twitter.png');
                    background-position: 50% 50%;
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-color: #00aced;
                    border-radius: .75em;
                    margin: .2em 0 .2em .2em;
                }
                .twitterlink .linktext {
                    padding: 0 .6em 0 .4em;
                }

/* **********************************************************************/
/* Media styles */

@media (min-width: 850px) {
    .header {
        font-size: 1.666666666666em;
    }
        .header_links {
            margin-right: 3.5em;
            flex-direction: column;
            font-size: .7em;
            height: 2.15em;
        }
            .header_links a {
                margin-right: 0;
            }
    .help_icon {
        top: 1em;
        right: 1em;
    }

    .main_wrap {
        flex-direction: row;
    }
        .prevbutton, .nextbutton {
            margin-bottom: 2.37em;
        }

        .onlydesktop {
            display: initial;
        }
        .onlymobile {
            display: none;
        }
}

@media (min-width: 700px) {
    .header_links {
        display: flex;
    }
    .questionsetmenu {
        font-size: 1.1em;
    }
}