img, video {
    max-width: 100%;
    vertical-align: middle;
}
/* Masonry grid */
.masonry {
    transition: all .5s ease-in-out;
    column-gap: 15px;
    column-fill: initial;
}
/* Masonry item */
.masonry .brick {
    margin-bottom: 15px;
    display: inline-block; /* Fix the misalignment of items */
    vertical-align: top; /* Keep the item on the very top */
}
/* Masonry image effects */
.masonry .brick img {
    transition: all .5s ease-in-out;
    backface-visibility: hidden; /* Remove Image flickering on hover */
}
.masonry .brick:hover img {
    opacity: .75;
}
/* Bordered masonry */
.masonry.bordered {
    column-rule: 1px solid #eee;
    column-gap: 25px;
}
.masonry.bordered .brick {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}
/* Gutterless masonry */
.masonry.gutterless {
    column-gap: 0;
}
.masonry.gutterless .brick {
    margin-bottom: 0;
}
/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .masonry {
        column-count: 2;
    }
}
/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
    .desc {
        font-size: 1.25em;
    }
    .intro {
        letter-spacing: 1px;
    }
    .masonry {
        column-count: 3;
    }
}
/* BOX HACKING */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
/**
 * CLEAR FLOATS
 * Reference: http://w3bits.com/clearfix
 */
.cf:after, .lab-grid:after {
    content: "";
    display: table;
    clear: both;
}
/* CONTENT WRAPPER */
.wrapper {
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.5em;
    padding-right: 1.5em;
    padding-left: 1.5em;
    max-width: 1080px;
}

/* Grid */
.lab-grid {
    width: 100%;
}
.lab-grid .lab-grid-cell {
    margin-bottom: 1.5em;
}
.lab-grid .lab-grid-cell--mb-2x {
    margin-bottom: 3em;
}
.lab-grid-cell {
    padding-left: 0;
}
.w-full {
    width: 100%;
}
.w-three-quarters {
    width: 75%;
}
.w-two-thirds {
    width: 66.66666%;
}
.w-half {
    width: 50%;
}
.w-third {
    width: 33.33333%;
}
.w-quarter {
    width: 25%;
}
/**
* MEDIA SETTINGS
*/
@media only screen and (min-width: 320px) and (max-width: 759px) {
    .carbon-text {
        font-size: 14px;
    }
}
@media only screen and (min-width: 1024px) {
    .w-full--d {
        width: 100%;
    }
    .w-three-quarters--d {
        width: 75%;
    }
    .w-two-thirds--d {
        width: 66.66666%;
    }
    .w-half--d {
        width: 50%;
    }
    .w-third--d {
        width: 33.33333%;
    }
    .w-quarter--d {
        width: 25%;
    }
}
@media only screen and (max-width: 767px) {}
@media only screen and (min-width: 1024px) {}
@media only screen and (min-width: 768px) {
    .lab-grid {
        margin-left: -1.5em;
        width: calc( 100%+ 1.5em);
    }
    .lab-grid-cell {
        float: left;
        padding-left: 1.5em;
    }
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .lab-grid--3 .lab-grid-cell {
        width: 50%;
    }
    .w-full--t {
        width: 100%;
    }
    .w-three-quarters--t {
        width: 75%;
    }
    .w-two-thirds--t {
        width: 66.66666%;
    }
    .w-half--t {
        width: 50%;
    }
    .w-third--t {
        width: 33.33333%;
    }
    .w-quarter--t {
        width: 25%;
    }
}
@media only screen and (max-width: 767px) {
    .lab-share {
        text-align: right;
    }
    .w-full--m {
        width: 100%;
    }
    .w-three-quarters--m {
        width: 75%;
    }
    .w-two-thirds--m {
        width: 66.66666%;
    }
    .w-half--m {
        width: 50%;
    }
    .w-third--m {
        width: 33.33333%;
    }
    .w-quarter--m {
        width: 25%;
    }
}