pre {background:#ffffd1;padding:15px;font:12px monospace;color:#333 }
/*
    Project categories transitions 
=========================*/

/*Link*/
.categories .nav-link span.item {
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}
/*Image*/
.categories .nav-link img {
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;

/* hover delay */
    -moz-transition-delay:1s;
        -o-transition-delay:1s;
-webkit-transition-delay:1s;
            transition-delay:1s;
}
/*Caption*/
.categories .nav-link .nav-caption {
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}

@media only screen and (min-width: 641px) and (max-width: 1023px) {
    #about nav#secondary ul li {
        float: right;
        padding: 0 1rem;
    }
}
@media only screen and (min-width:1024px) {
    #about nav#secondary ul li.first.last {
        float: left;
        position: relative;
    }
}
/* Careers */

.mediaWrapper {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100vw;
    max-width: 1366px;
    height: 36.6032211vw;
    max-height: 500px;
    left: 50%;
    margin: 0 auto 50px;
    -webkit-transform: translate(-50%,0);
       -moz-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
         -o-transform: translate(-50%,0);
            transform: translate(-50%,0);
}

.mediaWrapper .videoHolder,
.mediaWrapper img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.mediaWrapper .videoHolder {
    background: #946844;
}

.mediaWrapper .videoHolder:after {
    display: block;
    position: absolute;
    width: 105px;
    height: 105px;
    top: 50%;
    left: 50%;
    content: "";
    -webkit-transform: translate(-50%,-50%);
       -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
         -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    -webkit-border-radius: 100%;
            border-radius: 100%;
    background-color: rgba(32,31,31,0.4);
    background-image: url(../images/library/play-button.png);
    background-repeat: no-repeat;
    background-position: 58% 50%;
    background-attachment: scroll;
    -webkit-background-size: 31px 42px;
         -o-background-size: 31px 42px;
            background-size: 31px 42px;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

.mediaWrapper .videoHolder:hover:after {
    background-color: rgba(32,31,31,0.8);
}