/*
 Theme Name: Moraine Valley Story Wall Child Theme
 Description: Child Theme for 911±¬ÁÏÍø
 Version: 1.0.0
 Author: The Nerdery
 Author URI: http://www.nerdery.com
 Template: morainevalley
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */



.child .wysiwyg h1 {
    text-transform: none;
}

/* Set up story tiles */

.story-tile-img {
    overflow: hidden;
    padding-bottom: 67.2%;
    position: relative;
}

.story-tile-link {
    text-decoration: none;
}

/* Story Wall images: fill space; crop sideas and bottom if too large */
.story-tile-img img {
    display: block;
    min-width: 100%;
    max-width: none !important; /* override 100% width limit */
    min-height: 100%;
    max-height: 120%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.story-glance {
    overflow: hidden;
    padding: 1% 1% 1% 2.2%;
    height: 53px;
}

.story_featured .story-glance {
    padding: 2% 0 5% 4%;
    height: 106px;
}

.story-glance-text {
    color: #ffffff;
}

.story-glance-text-title {
    color: #ffffff;
    font-family: "roboto_condensedlight",Helvetica,Arial,sans-serif;
    text-decoration: none;
    font-size: 2.4vw;
}

.story-glance-text-hometown {
    white-space: nowrap;
    font-size: 1.8vw;
}

.story_featured .story-glance-text-hometown {
    font-size: 25px;
    line-height: .8;
}

.story-glance_grey {
    background-color: #4b5049;
}

.story-glance_blue {
    background-color: #007ac3;
}

.story-glance_orange {
    background-color: #cc6d1b;
}

.story-glance_burgundy {
    background-color: #a50a34;
}

.story-glance_brown {
    background-color: #4c371c;
}

.story-glance_teal {
    background-color: #4e9fba;
}

.story-glance-icons {
    float: right;
    padding: 9px;
}

.story_featured .story-glance-icons {
    width: 140px;
    padding: 2px;
}

.story-glance-icon {
    display: inline-block;
    width: 2.8vw;
    height: 2.8vw;
    max-width: 35px;
    max-height: 35px;
    background: url(/storywall/wp-content/themes/mvccchild_storywall/assets/media/images/storywallicons.svg);
    background-repeat: no-repeat;
    background-size: 200%;
}

.story_featured .story-glance-icon {
    width: 55px;
    height: 55px;
    max-width: none;
    max-height: none;
}

.story-glance-icon-mic {
    background-position: 0 -3%;
}

.story-glance-icon-play {
    background-position: 0 30%;
    margin-left: 5px;
}

.story-glance-icon-slides {
    background-position: 0 66%;
    margin-left: 6px;
}

.story-glance-icon-abc {
    background-position: 0 105%;
    margin-left: 5px;
}

.story_featured .story-glance-icon-mic {
    margin-left: 15px;
    background-position: 0 -3%;
}

.story_featured .story-glance-icon-play {
    margin-left: 8px;
    background-position: 0 31%;
}

.story_featured .story-glance-icon-slides {
    background-position: 0 68%;
    margin-left: 8px;
    margin-top: 3px;
}

.story_featured .story-glance-icon-abc {
    background-position: 0 110%;
    margin-left: 5px;
}

.active-audio .story-glance-icon-mic {
    background-position: 95% -3%;
}

.active-video .story-glance-icon-play {
    background-position: 95% 30%;
}

.active-slides .story-glance-icon-slides {
    background-position: 95% 66%;
}

.active-text .story-glance-icon-abc {
    background-position: 105% 105%;
}

.story_featured .active-audio .story-glance-icon-mic {
    background-position: 95% -3%;
}

.story_featured .active-video .story-glance-icon-play {
    background-position: 95% 31%;
}

.story_featured .active-slides .story-glance-icon-slides {
    background-position: 95% 68%;
}

.story_featured .active-text .story-glance-icon-abc {
    background-position: 105% 110%;
}

.storylist-bd {
    padding: 25px 40px 0;
}

.pagination {
    clear: both;
}

/**/
/* Story detail */
/**/

.hero_story {
    min-height: 52px; /* keep content from colliding with header if no hero image or carousel */
}

.hero_story img {
    margin: 0 auto;
}

.storyName h1 {
    font-family: "roboto_condensedlight",Helvetica,Arial,sans-serif;
    font-size: 42px;
}

.categories {
    margin-top: 4px;
    margin-bottom: 32px;
}

.categories-item {
    margin-bottom: 10px;
    font-size: 21px;
}

.categories-item .label {
    font-weight: bold;
}

.sideMenu_story .youtube-embed {
    height: 0;
    margin-bottom: 10px;
    padding-top: 25px;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    display: block;
}

.sideMenu_story .youtube-embed iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.sideMenu_story .soundcloud-embed {
    height: 0;
    margin-bottom: 10px;
    padding-bottom: 90px;
    position: relative;
}

.sideMenu_story .soundcloud-embed iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.storyTags {
    border-top: 1px solid;
    font-style: italic;
    line-height: 2.5;
}

.storyTags a {
    color: #000000;
    transition: all .5s;
    text-decoration: none;
}

.storyTags a:hover {
    color: #000000;
    transition: all .3s;
    text-decoration: underline;
}

@media screen and (min-width: 575px) {

    /* Support carousel removal */
    .header-main,
    .child .header-main {
        position: static;
    }

    /* set up stacking for second half */
    .story.story_featured_last {
        float: right;
    }

    /* Wide sidebar for story */
    .sideMenu_story {
        width: 40%;
        margin-top: 20;
    }

    /* Make room for wide story sidebar */
    .article_story {
        width: 55%;
        margin: 35px 0;
    }

    /* Remove sidebar indent; provide padding so content doesn't hit header or viewport edges */
   .article_noSidebar {
        float: none;
        width: auto;
        padding: 45px 40px;
    }

    .wrapper_story {
        padding: 0 55px;
    }

    .story {
        float: left;
        width: 36%;
        margin-bottom: 5%;
    }

    .story_featured {
        width: 59%;
    }

    .story_featured .story-tile-img {
        padding-bottom: 86%;
        position: relative;
    }

    .story_featured_first {
        margin-right: 5%;
    }

    .story_featured_last {
        margin-left: 5%;
    }

    .story_featured .story-glance-text-title {
        font-size: 35px;
    }

    .story-featured .story-glance {
        height: 125px;
        padding: 1.7% 4%;
    }

    .mix-section_childPaddedTop {
        padding: 0 40px 40px;
        margin-top: -60px;
    }

}

@media screen and (max-width: 574px) {
    .story {
        float: left;
        width: 44%;
        margin: 3%;
    }

    .story_featured {
        width: 100%;
        margin: 0;
    }

    .story-glance {
        padding: 0 8px 3%;
        height: auto;
    }

    .story-glance-icons {
        padding: 5px;
    }

    .story-glance-icon {
        width: 4.2vw;
        height: 4.2vw;
        margin-left: 0.5vw;
    }

    .story_featured .story-glance {
        padding: 1% 0 4% 4%;
        height: auto;
    }

    .story_featured .story-glance-text-title {
        font-size: 6vw;
    }

    .story_featured .story-glance-text-hometown {
        font-size: 4vw;
        line-height: 1;
    }

    .story_featured .story-glance-icons {
        width: auto;
        margin-right: 10px;
    }

    .story_featured .story-glance-icon {
        width: 9vw;
        height: 9vw;
        margin-left: 15px;
    }

    .story_featured .story-tile-img {
        padding-bottom: 86%;
        position: relative;
    }

    .pagination {
        clear: both;
        padding: 4%;
    }

    .storyName h1 {
        font-size: 34px;
    }

    /* Extend hero image or slider to edges of screen and header on mobile */
    .hero_story {
        margin: -20px -10px 0;
    }

}

@media screen and (min-width: 850px) {

    /* Pad storywall */
    .storyList-bd {
        overflow: hidden;
        padding: 80px 44px 44px;
    }

    .mix-section_childPaddedTop {
        padding: 60px 40px 25px;
    }

    .story-featured .story-glance-text-title {
        font-size: 40px;
    }

    .carousel_child .carousel-slide,
    .carousel_hero .carousel-slide {
        height: 655px;
    }

    /* Larger text for tiles */    
    .story-glance-text-title {
        font-size: 19px;
    }

    .story-glance-text-hometown {
        font-size: 12px;
    }

    /* wide sidebar for stories */
    .sideMenu_story {
        width: 35%;
        margin-top: 20;
    }

    .article_story {
        width: 60.6%;
        margin: 47px 0;
    }
}

/* fix IE's weird understanding of percentile background */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .story-glance-icon {
        background-size: 400%;
    }

    .story-glance-icon-mic {
        background-position: 31% -4%;
    }

    .story-glance-icon-play {
        background-position: 31% 29%;
    }

    .story-glance-icon-slides {
        background-position: 31% 66%;
        margin-left: 6px;
    }

    .story-glance-icon-abc {
        background-position: 31% 106%;
        margin-left: 5px;
    }



    .active-audio .story-glance-icon-mic {
        background-position: 68% -4%;
    }

    .active-video .story-glance-icon-play {
        background-position: 68% 29%;
    }

    .active-slides .story-glance-icon-slides {
        background-position: 68% 66%;
        margin-left: 6px;
    }

    .active-text .story-glance-icon-abc {
        background-position: 68% 106%;
        margin-left: 5px;
    }
}

/* fix IE's weird understanding of percentile background */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .story-glance-icon {
        background-size: 400%;
    }

    .story-glance-icon-mic {
        background-position: 31% -4%;
    }

    .story-glance-icon-play {
        background-position: 31% 29%;
    }

    .story-glance-icon-slides {
        background-position: 31% 66%;
        margin-left: 6px;
    }

    .story-glance-icon-abc {
        background-position: 31% 106%;
        margin-left: 5px;
    }

    .active-audio .story-glance-icon-mic {
        background-position: 68% -4%;
    }

    .active-video .story-glance-icon-play {
        background-position: 68% 29%;
    }

    .active-slides .story-glance-icon-slides {
        background-position: 68% 66%;
        margin-left: 6px;
    }

    .active-text .story-glance-icon-abc {
        background-position: 68% 106%;
        margin-left: 5px;
    }
}