/** Work Page */

#navbar-collapse-main .navbar-nav > li > a.work { color: #f15a55; }

#workMetroTiles { overflow: hidden; }
#siteheader-navigation-container .navbar-brand { display: none; }
.tile-item { width: 33.3333%; height: 43vh; float: left; position: relative; }
.tile-item .tile-name { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 225%; width: 100%; color: #fff; text-align: center; font-family: 'CeraGRBlack-Richkid', 'SimplerBold'; }
.tile-large { width: 66.666%; height: 86vh; }
.tile-large.box-right { float: right; }
.tile-inner-content { text-align: center; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
.tile-inner-content img {max-width: 200px;}
.tile-item.tile-normal .tile-inner-content img { max-height: 140px; }
.tile-links { margin: 30px 0 0 0; padding: 0; list-style: none; width: 100%; }
.tile-links > li { display: inline-block; /*border-bottom: 2px solid #fff;*/ line-height: 1.3; margin-left: 30px; position: relative; }
.tile-links > li:last-of-type { margin-left: 0; } 
.tile-links > li:not(:last-of-type):before { content: "/"; position: absolute; left: -22px; top: -2px; font-size: 145%; font-weight: bold; color: #fff; } 
.tile-links > li > a { color: #fff; /*margin-left: 8px;*/ }
.tile-links > li > svg, .tile-links > li a svg { width: 6px; fill: #fff; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.tile-links > li > a span { font-size: 118%; }
.tile-links a.hoverEffect:after { content: "";  width: 100%; height: 2px; background-color: #fff; display: block; transition: all 350ms ease-out; -webkit-transition: all 350ms ease-out; }
.tile-item .tile-front { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; visibility: visible; opacity: 1; -webkit-transition: visibility 0s linear 0s, opacity .5s, background-color .3s; transition: visibility 0s linear 0s, opacity .5s, background-color .3s; }


#OurClients { background: #fff; margin-bottom: 80px; }
#OurClients h2 { font-size: 185%; line-height: .85; margin: 120px 0 50px 0; text-align: center; }
#OurClients .clients-list { width: 80%; margin: 0 auto; overflow: hidden; }
#OurClients .clients-list-item { width: 16.666%; margin-bottom: 30px; float: right; text-align: center; }
#OurClients .clients-list-item img { width: 110px; -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all .5s ease; transition: all .5s ease; }
#OurClients .clients-list-item:hover img { -webkit-filter: grayscale(0%); filter: grayscale(0%); }


/*body.diffColor .tile-item:nth-child(2n+1) .tile-front { background-color: #4b4848 !important; }
body.diffColor .tile-item:nth-child(2n) .tile-front { background-color: #f15b56 !important; }
body.diffColor .tile-item:nth-child(3n+3) .tile-front { background-color: #fff !important; }
body.diffColor .tile-item:nth-child(3n+3) .tile-name { color: #4b4848; }*/

.tile-item:hover .tile-front { visibility: hidden; opacity: 0; transition: visibility 0s linear .3s, opacity .3s; }
.tile-back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background-size: cover; z-index: 1; }
.tile-back-title { position: absolute; left: 20px; top: 15px; color: #fff; font-size: 120%; font-family: 'CeraGRBlack-Richkid', 'SimplerBold'; }
.tile-links a.hoverEffect { height: 28px; }
video.projectVideo { height: 100%; min-width: 100%; min-height: 100%; max-width: 210%; width: auto; overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; }

body.diffColor .diffRed { background-color: #f15b56 !important; }
body.diffColor .diffWhite { background-color: #ececec !important; }
body.diffColor .diffWhite .tile-name { color: #4b4848 !important; }
body.diffColor .diffGray { background-color: #4b4848 !important; }

@media(max-width: 1170px) {
    #OurClients h2 { width: 565px; margin-left: auto; margin-right: auto; }

}

@media (max-width: 1024px){
    .tile-large { width: 100%; height: 62.5vw; }
    .tile-normal { width: 50%; height: 31.25vw; float: left; position: relative; }
    .tile-item .tile-name { font-size: 6vw; }
    .tile-inner-content img { max-width: 12vw; max-height: 12vw; }
    .tile-links { margin: 3vw 0 0 0; }
    .tile-back-title { font-size: 3vw; }
}
@media (max-width: 1024px) {
    .tile-item .tile-name { font-size: 5vw; }
    #OurClients .clients-list { max-width: 750px; }
}

@media (max-width: 991px) {
    #OurClients h2 { line-height: 1; font-size: 185%; }
    #OurClients .clients-list-item { width: 25%; }
    #OurClients .clients-list { width: 100%; max-width: 80vw; padding-bottom: 60px; }
}

@media (max-width: 767px) {
    #OurClients h2 { margin: 60px 0 10px 0; width: 100%; font-size: 9vw; }
    #OurClients .clients-list-item { width: 33.333%; padding: 0; }
    #OurClients .clients-list { max-width: 95vw; padding: 0 15px 15px; overflow: hidden; }
    #OurClients .clients-list-item img { padding: 10px; }
    .tile-normal { width: 100%;height: 62.5vw;  }
    .tile-item.tile-open .tile-front { visibility: hidden; opacity: 0; transition: visibility 0s linear .3s, opacity .3s; }
    .tile-item .tile-name   { font-size:7vw; }
    .tile-links > li    { margin-bottom:10px; }
    .tile-links a.hoverEffect { height: 22px; font-size: 80%; }
    .tile-links.nespresso-links { margin: 10px 0 0 0; }
    .tile-back-title    { top:4%; }
    .tile-large         { height: 100vw; }

    .tile-inner-content img { max-width: 125px; max-height: 125px; }
    video.projectVideo { max-width: 180%; }
}