/**
 *  Crowdhandler
 */
/*  ========================================================================== */
/*  @group Base */
/*  ========================================================================== */

    /* apply a natural box layout model to all elements */
    *, *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    html,
    button,
    input,
    select,
    textarea {
        color: #333;
    }

    body {
        font-size: 1em;
        line-height: 1.3;
        font-family: "sofia-pro",Helvetica,Roboto,Arial,sans-serif;
        color: #fff;
        -webkit-font-smoothing: antialiased;
    }

    /*
     * Remove text-shadow in selection highlight: h5bp.com/i
     * These selection declarations have to be separate.
     * Customize the background color to match your design.
     */
    ::-moz-selection {
        background: #b3d4fc;
        text-shadow: none;
    }

    ::selection {
        background: #b3d4fc;
        text-shadow: none;
    }

    /*
     * A better looking default horizontal rule
     */
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }

    /*
     * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
     */

    img {
        vertical-align: middle;
    }

    /*
     * Remove default fieldset styles.
     */

    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }

    /*
     * Allow only vertical resizing of textareas.
     */

    textarea {
        resize: vertical;
    }

    /*
     * Clearfix
     */

    .cf:before, .cf:after { content: ""; display: table; }
    .cf:after { clear: both; }
    .cf { zoom: 1; }

/* @end */
/*  ========================================================================== */
/*  @group Theme */
/*  ========================================================================== */

/*  ========================================================================== */
/*  @group Theme - Typography */
/*  ========================================================================== */

    p {
        margin: 0 0 1em 0;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #fff;
        margin: 0 0 .5em 0;
        font-weight: normal;
    }
    h1 {
        padding: 0 0 3px 0;
        margin: 0 0 15px 0;
    }
    h1 { font-size: 2em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.3em; }
    h4 { font-size: 1.2em; }
    h5 { font-size: 1.1em; }
    h6 { font-size: 1em; }

/*  ========================================================================== */
/*  @group Theme - Layout */
/*  ========================================================================== */

    body, html {

        background: #1c223f;
    }
    .l-constrained {
        text-align: left;
        margin: 0 auto;
        width: 90%;
        max-width: 960px;
    }
    .main {
        font-size: 1em;
        background: #fff;
        padding-bottom: 30px;
    }
    .main__inner {
        background: #fff;
        margin-top: 25px;
        padding: 0 0 20px 0;
    }


/*  ========================================================================== */
/*  @group Theme - Global  */
/*  ========================================================================== */


    .global-header {
        padding: 15px 0 10px;
        background: #fff;
        border-bottom: 1px solid #ccc;
    }

    /**
     * Main Logo
     */
    .area-logo{
        display: block;
        margin: 0;
        padding: 0;
        width: 170px;
        height: 45px;
        position: relative;
        background-image: url(../img/mayflower-logo.svg);
        background-position: 0;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .area-logo .logo{
        width: 100%;
        height: 100%;
        display: block;
        margin: 0;
    }


    .global-footer {
        clear: both;
        background-color: #1c223f;
        padding: 20px 0;
    }
    .footer-inner{
        color: #878daf;
        padding-bottom: 30px;
    }
    .footer-inner p{
        margin: 5px 0 0 0;
        line-height: 1em;
    }
    .area-footer-copyright{
        border-top: 1px solid #2c324c;
        margin: auto;
        padding: 20px 0 40px 0;
        display: flex;
    }
    .area-footer-copyright p {
        display: inline;
        float: left;
        font-size: 12px;
        margin: 0;
        line-height: 1.4em;
        color: #878daf;
        text-rendering: optimizeLegibility;
    }

    .area-footer-copyright .by-crowdhandler {
        border: 0;
        text-indent: -999em;
        overflow: hidden;
        background-color: transparent;
        text-align: left;
        direction: ltr;
        background-image: url(../img/crowdhandler-logo-white.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        display: inline-block;
        height: 25px;
        width: 73px;
        margin-left: auto;
    }

    .svg .area-footer-copyright .by-crowdhandler {
        background-image: url(../img/crowdhandler-logo-white.svg);
    }

/* @end */
/*  ========================================================================== */
/*  @group Theme - Messages */
/*  ========================================================================== */

    .nojs-warning,
    .cookies-disabled {
        color: #000;
        background-color: #d00;
        padding: .5em;
        margin: 0 0 .75em 0;
    }
    .cookies-disabled {
        display: none;
    }

/* @end */
/*  ========================================================================== */
/*  @group Theme - Welcome Message */
/*  ========================================================================== */


    .welcome-message{
        padding-top: .75em;
        color: #333;

    }
    .welcome-message h1{
        font-size: 22px;
        color: #333;
        margin-bottom: 5px;
    }
    .welcome-message h2 {
        color: #333;
    }
    .queue-full {
        min-height: 300px;
    }
    .queue-full li {
        margin: 10px 0;
    }

/* @end */
/*  ========================================================================== */
/*  @group Theme - Queue */
/*  ========================================================================== */

    .queue-position {
        color: #fff;
        background-color: #876cd1;
        padding: 120px 5% 2.5% 5%;
        margin: 0 0 1em 0;
        text-align: center;
        background-image: url(../img/progress.gif);
        background-repeat: no-repeat;
        background-position: 50% 25%;
        background-size: 60px;
    }
    .queue-position h2{
        color: #fff;
    }
    #queue-position-value span:first-child {
      color: #fff;
      font-size: 30px;
      padding-right: 7px;
    }

/* @end */
/*  ========================================================================== */
/*  @group Theme - Media */
/*  ========================================================================== */

    .media-container {
        margin: 0 auto;
        color: #333;
        font-size: 14px;
    }
    .media-container h2{
        color: #333;
        display: block;
        text-align: left;
        margin: 0 0 30px 0;
        text-align: center;
        border-top: 1px solid #bd1b21;
        border-bottom: 1px solid #bd1b21;
        padding: 1em 0;
    }
    .media-item{
        width: 48%;
    }
    .media-item iframe{
        width: 100% !important;
        margin: auto !important;

    }
    .media-item-1{
        float: right;
    }
    .media-item-2{
        float: left;
    }
    .media-item-twitter iframe{
        height: 640px !important;
    }




/* @end */
/*  ========================================================================== */
/*  @group Theme - Additional Information */
/*  ========================================================================== */

    .additional-info {
        margin: 0 auto;
        padding: 10px 0 30px 0;
        margin-bottom: 30px;
        border-bottom: 1px solid #dedede;
    }
    .additional-info h3{
        padding: 0;
        font-size: 16px;
        color: #333;
        display: block;
        padding:0;
        margin: 0;
    }
    .additional-info ul {
        padding: 20px 0 20px 0;
        margin: 0;
        width:90%;
        color: #333;
    }
    .additional-info li{
        padding: 6px 0 6px 0;
        list-style: none;
    }
    .additional-info strong{
        color: #333;
        font-size: 14px;

    }
    .map, .map:visited{
        color: #2095e3;
    }
    .map:hover{
        color: #2095e3;
        text-decoration: underline;
    }


/* @end */
/*  ========================================================================== */
/*  @group Helpers */
/*  ========================================================================== */

    /*
     * Image replacement
     */
    .ir {
        background-color: transparent;
        border: 0;
        overflow: hidden;
        /* IE 6/7 fallback */
        *text-indent: -9999px;
    }

    .ir:before {
        content: "";
        display: block;
        width: 0;
        height: 150%;
    }

    /*
     * Hide from both screenreaders and browsers: h5bp.com/u
     */

    .hidden {
        display: none !important;
        visibility: hidden;
    }

    /*
     * Hide only visually, but have it available for screenreaders: h5bp.com/v
     */

    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    /*
     * Extends the .visuallyhidden class to allow the element to be focusable
     * when navigated to via the keyboard: h5bp.com/p
     */

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

    /*
     * Hide visually and from screenreaders, but maintain layout
     */

    .invisible {
        visibility: hidden;
    }

    /*
     * Clearfix: contain floats
     *
     * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    `contenteditable` attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that receive the `clearfix` class.
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */
    .group:before,
    .group:after,
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }
    .group:after,
    .clearfix:after {
        clear: both;
    }

/* @end */
/* @end */
/*  ========================================================================== */
/*  @group Print */
/*  ========================================================================== */

    @media print {
        * {
            background: transparent !important;
            color: #000 !important; /* Black prints faster: h5bp.com/s */
            box-shadow: none !important;
            text-shadow: none !important;
        }

        a,
        a:visited {
            text-decoration: underline;
        }

        a[href]:after {
            content: " (" attr(href) ")";
        }

        abbr[title]:after {
            content: " (" attr(title) ")";
        }

        /*
         * Don't show links for images, or javascript/internal links
         */

        .ir a:after,
        a[href^="javascript:"]:after,
        a[href^="#"]:after {
            content: "";
        }

        pre,
        blockquote {
            border: 1px solid #999;
            page-break-inside: avoid;
        }

        thead {
            display: table-header-group; /* h5bp.com/t */
        }

        tr,
        img {
            page-break-inside: avoid;
        }

        img {
            max-width: 100% !important;
        }

        @page {
            margin: 0.5cm;
        }

        p,
        h2,
        h3 {
            orphans: 3;
            widows: 3;
        }

        h2,
        h3 {
            page-break-after: avoid;
        }
    }
/* @end */

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


        h1 { font-size: 1.1em; }
        h2 { font-size: 1.1em; }
        h3 { font-size: 1.1em; }
        h4 { font-size: 0.850em; }

        .additional-info {
        margin-bottom: 40px;
        }
        .additional-info ul {
        width:100%;
        }
        .global-footer{
            background-size: 70%;
        }
        .area-footer-contact{
            margin-bottom: 1em;
        }
        .welcome-message h1 {
            font-size: 18px;
        }
        .welcome-message p{
            font-size: 15px;
        }
        .queue-position{
            background-position: 50% 25%;
            padding-top: 110px;
        }
        .queue-position h2{
            font-size: 20px;
        }
        .additional-info {
            padding: 5px 0;
        }
        .additional-info h3{
            font-size: 16px;
        }
        .additional-info strong{
            font-size: 16px;
        }
        .additional-info ul {
        width:100%;
        }
        .main__inner{
            margin-top: 10px;
            padding-bottom: 0;
        }

        .media-container{
            margin-top: 10px;

        }
        .media-container h2{
            width: 100%;
            margin-bottom: 15px;
        }
        .media-item{
            width: 100%;
            float: none;
            margin-bottom: 20px;
        }
        .media-item iframe{
            margin: auto;
            height: 200px !important;
        }
        .media-item-twitter iframe{
            height: 400px !important;
        }
        .area-footer-copyright{
            margin: auto;
        }
}
@media only screen and (max-width: 620px){

    .welcome-message p{
        font-size: 13px;
    }
    .additional-info ul, .welcome-message ul{
        font-size: 13px;
    }
    .queue-position h2{
        font-size: 18px;
    }
    .area-footer-contact {
        margin-top: 20px;
    }
    .area-footer-copyright {
        display: block;
        text-align: left;
    }
    .by-crowdhandler {
        margin-top: 20px;
    }

}
}
