@keyframes slidy {
    0% { left: 0%; }
    30% { left: 0%; }
    35% { left: -100%; }
    65% { left: -100%; }
    70% { left: -200%; }
    90% { left: -200%; }
    /*100% { left: 0%; }*/
}

body, figure {
    margin: 0;
}

div#captioned-gallery {
    width: 100%;
    overflow: hidden;
}

figure {
}

    figure.slider {
        position: relative;
        width: 300%;
        font-size: 0;
        animation: 30s slidy infinite;
    }

    figure.slider figure {
        width: 33.3333%;
        height: auto;
        display: inline-block;
        position: inherit;
    }

    figure.slider img {
        width: 100%;
        height: auto;
    }

    figure.slider figure figcaption {
        position: absolute;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
        padding: .6rem;
    }

.lasser-layout-transparent .mdl-layout__header {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bl-grid__text {

}

    .bl-grid__text .mdl-typography--display-1,
    .bl-grid__text .mdl-typography--display-1-color-contrast,
    .bl-grid__text .mdl-typography--body-1,
    .bl-grid__text .mdl-typography--body-1-color-contrast {
        max-width: calc(60em * 0.45);
        margin-left: auto;
        margin-right: auto;
    }

.bl-content {
    min-height: calc(100vh - 64px);
    display:flex;
    flex-direction:column;
}
    .bl-content .bl-content__vertical-fill {
        flex: 1;
    }

    .bl-content .bl-content__inner {
        display: inline-block;
    }

.bl-container--card {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px;
}

    .bl-container--card.bl-container--12-card {
        max-width: 1500px;
    }

    .bl-container--card.bl-container--4-card {
        max-width: 1200px;
    }

    .bl-container--card .mdl-card__media {
        overflow: hidden;
        background: transparent;
        text-align: center;
        padding: 4px 4px 0;
    }

    .bl-container--card .mdl-card__media img {
        width: 100%;
    }

.bl-section--text-only {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mdl-card__supporting-text {
    margin-bottom: auto;
}

.bl-card__center-text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: auto;
}

.play_background {
    min-height: 400px;
    background: url(/images/home/play_challenge.png);
    background-size: auto 100%;
    -webkit-animation: backgroundScroll 15s linear infinite;
    animation: backgroundScroll 15s linear infinite;
}

    @media (min-width: 480px) and (max-width: 839px) {

        .play_background {
            min-height: 340px;
            -webkit-animation: backgroundScrollTablet 15s linear infinite;
            animation: backgroundScrollTablet 15s linear infinite;
        }
    }

    @media (max-width: 479px) {

        .play_background {
            min-height: 280px;
            -webkit-animation: backgroundScrollPhone 15s linear infinite;
            animation: backgroundScrollPhone 15s linear infinite;
        }

    }

@-webkit-keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position: -3071px 0;}
}

@keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position: -3071px 0;}
}

    @-webkit-keyframes backgroundScrollTablet {
        from {background-position: 0 0;}
        to {background-position: -2610px 0;}
    }

    @keyframes backgroundScrollTablet {
        from {background-position: 0 0;}
        to {background-position: -2610px 0;}
    }

    @-webkit-keyframes backgroundScrollPhone {
        from {background-position: 0 0;}
        to {background-position: -2150px 0;}
    }

    @keyframes backgroundScrollPhone {
        from {background-position: 0 0;}
        to {background-position: -2150px 0;}
    }

.bl-section--white {
    background-color: white;
    color: rgb(0,0,0) !important;
}

.bl-section--blue {
    background-color: #3D4549;
}

.bl-section--transparent {
    background-color: transparent;
}

.bl-section--transparent .mdl-typography--display-1-color-contrast,
.bl-section--transparent .mdl-typography--headline-color-contrast,
.bl-section--transparent .mdl-typography--body-1-color-contrast{
    opacity: 1;
}

.bl-horizontal-layout-spacer {
    margin: 0;
}

.bl-section--faq-navigation {

}

    .bl-section--faq-navigation section {
        margin: 0 auto 30px;
        max-width: 960px;
        display: flex;
    }

    .bl-section--faq-navigation .mdl-typography--headline-color-contrast {
        display: flex;
        width: 210px;
        padding: 8px;
    }

    .bl-section--faq-navigation nav {
        display: flex;
    }

    .bl-section--faq-navigation .mdl-list {
        border-left: solid 3px #da3028;
        padding: 0;
        margin: 0;
    }

.bl-section--faq-content {

}

    .bl-section--faq-content section {
        margin: 0 auto 30px;
        max-width: 960px;
    }

        .bl-section--faq-content section > div {
            padding-bottom: 30px;
        }

        .bl-section--faq-content section > div:nth-child(2n) {
            padding-bottom: 60px;
            max-width: calc(120em * 0.45);
        }


blockquote.bl-section--quote {
    font-family: Georgia, serif;
    font-size: 16px;
    font-style: italic;
    max-width: 500px;
    margin: 0.25em auto;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

    blockquote.bl-section--quote:before {
        display: block;
        content: "\201C";
        font-size: 80px;
        position: absolute;
        left: -20px;
        top: -20px;
        color: #7a7a7a;
    }

    blockquote.bl-section--quote cite {
        color: #999999;
        font-size: 12px;
        display: block;
        margin-top: 5px;
    }

    blockquote.bl-section--quote cite:before {
        content: "\2014 \2009";
    }

.bl-popup__suggestion {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 100;
}

    .bl-popup__suggestion .bl-popup__suggestion-close {
        float: right;
    }

    .bl-popup__suggestion img {
        float: right;
        padding-right: 74px;
    }

    .bl-popup__suggestion .bubble {
        position: relative;
        width: 250px;
        height: 130px;
        background: #d40a00;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        border: #7a7a7a solid 1px;
        padding: 8px;
        margin: 16px 32px;
    }

    .bl-popup__suggestion .bubble:after {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 15px 15px 0;
        border-color: #d40a00 transparent;
        display: block;
        width: 0;
        z-index: 1;
        bottom: -15px;
        left: 178px;
    }

    .bl-popup__suggestion .bubble:before {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 16px 16px 0;
        border-color: #887F7F7F transparent;
        display: block;
        width: 0;
        z-index: 0;
        bottom: -18px;
        left: 177px;
    }