.enrich {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    margin: 2px 0;
    overflow: hidden;
    height: 300px;
    cursor: default;
}
    .enrich-vert {
        display: none;
        height: 100%;
    }
    .enrich-horz {
        height: 100%;
    }
    .enrich-list {
        margin: 0 -1px;
        height: 100%;
    }
    .enrich-item {
        position: relative;
        height: 100%;
        margin-bottom: 0;
    }
    .enrich * {
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .enrich-inner {
        position: absolute;
        left:1px; right:1px; top:0; bottom:0;
    }
    .enrich-img {
        position: absolute;
        top:0; right:0; bottom:0; left:0;
        background-size: cover;
        background-position: center top;
    }
    .enrich-bg {
        position: absolute;
        top:0; right:0; bottom:0; left:0;
    }
    .enrich-item:nth-child(1) .enrich-bg {
        background: rgba(82,107,115,.53);
    }
    .enrich-item:nth-child(2) .enrich-bg {
        background: rgba(99,102,72,.53);
    }
    .enrich-item:nth-child(3) .enrich-bg {
        background: rgba(116,67,56,.53);
    }
    .enrich-item:nth-child(4) .enrich-bg {
        background: rgba(103,62,94,.53);
    }
    .enrich-item:nth-child(5) .enrich-bg {
        background: rgba(66,108,121,.53);
    }
    .enrich-item:nth-child(6) .enrich-bg {
        background: rgba(117,94,87,.53);
    }
    .enrich-overlay {
        opacity: 0;
        position: absolute;
        background: rgba(45,45,45,.9);
        left:0; right:0; top:0; bottom:0;

        -moz-transition-delay: .5s;
        -webkit-transition-delay: .5s;
        transition-delay: .5s;
    }
    .enrich-letter {
        position: absolute;
        line-height: 1em;
        text-transform: uppercase;
        font-family: 'kings-caslon-display', 'Times New Roman', serif;
        left:10px; right:10px; top:60px;
        font-size: 160px;

        -moz-transition-delay: .7s;
        -webkit-transition-delay: .7s;
        transition-delay: .7s;
    }
    .enrich-summary {
        opacity: 0;
        font-size: 13px;
        line-height: 1.923;
        position: absolute;
        left:10px; right:10px; top:50%;
        max-width: 220px;
        margin: 0 auto;

        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);

        -moz-transition-delay: .3s;
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
    }
    .enrich-title {
        position: absolute;
        left:10px; right:10px; bottom: 25px;
        font-family: 'proxima-nova', sans-serif;
        font-weight: bold;
        font-size: 20px;
        text-shadow: 0 2px 0 rgba(0,0,0,0.31);
    }
    /**
    * Start off with the letters invisible (initial state). JS removes this class once you scroll down
    */
    .enrich_initial .enrich-letter {
        -ms-transform: scale(0);
        -moz-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    /**
    * JS adds the animateIn class while the letters are appearing so that we can include the proper delays
    */
    .enrich_animateIn .enrich-item:nth-child(1) .enrich-letter {
        -moz-transition-delay: 0s;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    .enrich_animateIn .enrich-item:nth-child(2) .enrich-letter {
        -moz-transition-delay: .2s;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }
    .enrich_animateIn .enrich-item:nth-child(3) .enrich-letter {
        -moz-transition-delay: .4s;
        -webkit-transition-delay: .4s;
        transition-delay: .4s;
    }
    .enrich_animateIn .enrich-item:nth-child(4) .enrich-letter {
        -moz-transition-delay: .6s;
        -webkit-transition-delay: .6s;
        transition-delay: .6s;
    }
    .enrich_animateIn .enrich-item:nth-child(5) .enrich-letter {
        -moz-transition-delay: .8s;
        -webkit-transition-delay: .8s;
        transition-delay: .8s;
    }
    .enrich_animateIn .enrich-item:nth-child(6) .enrich-letter {
        -moz-transition-delay: 1s;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
    }
    /*
    * Hover animations for full width version
    */
    @media (min-width: 851px) {
        .enrich-item:hover .enrich-summary {
            opacity: 1;

            -moz-transition-delay: .3s;
            -webkit-transition-delay: .3s;
            transition-delay: .3s;
        }
        .enrich-item:hover .enrich-overlay {
            opacity: 1;

            -moz-transition-delay: .1s;
            -webkit-transition-delay: .1s;
            transition-delay: .1s;
        }
        .enrich-item:hover .enrich-letter {
            top: -40px;

            -ms-transform: scale(.2);
            -moz-transform: scale(.2);
            -webkit-transform: scale(.2);
            transform: scale(.2);

            -moz-transition-delay: 0s;
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
        }
    }
    @media (max-width: 1100px) {
        .enrich-letter {
            font-size: 140px;
        }
        .enrich-summary {
            line-height: 1.5;
        }
    }
    @media (max-width: 850px) {
        .enrich {
            height: 500px;
        }
        .enrich-item {
            width: 100%;
        }
        .enrich-summary {
            line-height: 1.923;
            font-size: 14px;
        }
        .enrich-vert {
            display: block;
            height: 100%;
            width: 150px;
            float: left;
        }
        .enrich-vert .enrich-item {
            height: 16.6666667%;
            border-bottom: 2px solid #fff;
        }
        .enrich-letter {
            left:0; right:0; top:16px;
            font-size: 50px;
        }
        .enrich-vert .enrich-item:last-child {
            border-bottom: none;
        }
        .enrich-horz {
            margin-left: 152px;
            width: auto;
            text-shadow: 0 2px 1px rgba(0,0,0,0.30);
        }
        .enrich-horz .enrich-summary {
            opacity: 1;
        }
        .enrich-horz .enrich-letter {
            font-size: 50px;
            top: 30px;
        }
        .enrich-item.selected .enrich-overlay {
            opacity: .7;

            -moz-transition-delay: 0s;
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
        }
    }
    @media (max-width: 520px) {
        .enrich {
            height: 350px;
        }
        .enrich-vert {
            width: 60px;
        }
        .enrich-letter {
            top: 4px;
        }
        .enrich-horz {
            margin-left: 62px;
        }
}