/* Section: Play  =====*/

.staff h1{text-transform:uppercase; font-size:60px; font-family:"Geogrotesque-SemiBold" sans-serif; color:#284358!important;}
.staff h2{font-size:36px;}
.staff .filter {background:url(img/prism-tri.png) top left no-repeat; padding:10px 0 30px 60px;}
.staff .filter .col{display:inline-block; padding-left:15px;}
.staff .filter label{font-size:16px;}
.staff .filter .col button{background-color:#e9e9e9; border:none; box-shadow:none; margin-top:7px; color:#333;}

.play #staff ul.items {list-style:none; position:relative; margin:20px auto; padding:0;}
.play #staff ul.items li {float:left; margin:5px; position:relative; border:3px solid #b0d135; background-color:rgba(4,124,175,0.8);}
.play #staff ul.items li.hover {border:3px solid #047caf;}
.play #staff ul.items li .set {overflow:hidden;}
.play #staff ul.items li .set,
.play #staff ul.items li .set img {display:block; position:relative; width:145px; height:145px;}

.play #staff ul.items li .set div {width:100%; height:100%; position:absolute; background-color:rgba(4,124,175,0.8);}
.play #staff ul.items li .set:hover div{top:0; left:0; right:0; bottom:0; display:block;}
.play #staff ul.items li .set div h4 {padding:40px 15px 15px 15px; color:#FFF; text-transform:none; font-size:14px; text-align:center;}
.play #staff ul.items li .set div h4 span {display:block; margin-top:5px; color:#C0DB5F;}

.play #feed {}

.play .top-bg, .news .top-bg{z-index:5; position:relative;  background:#b0d135 url(img/prisms/bg-prism-green.jpg) no-repeat; background-size:cover;}

.play .blurb{padding-bottom:150px;}

.play .interior{ margin-bottom:30px;}

.play .blurb .cut-off { height: 579px!important; background:url(img/bg-interior-cutout-top.png) bottom no-repeat, url(img/bg-banner-play.png) 95% 50px no-repeat!important;
background-size:100% 136px, auto!important; bottom:0;}
.play.news-events .blurb .cut-off{background:url(img/bg-interior-cutout-top.png) bottom no-repeat!important; background-size:100% auto!important;}

.play .content h1, .play .content h2{color:#047caf;}
.play .content h2{margin-top:20px;}
.play .content h3{font-size:18px; margin:15px 0; line-height:22px; color:#9A9A9A;}

.play .shenanigans {position:relative; margin-top:140px; width:100%; overflow:hidden;}
.play .shenanigans .top,
.play .shenanigans .bottom,
.play .shenanigans .top .cut-out {position:absolute; z-index:6; width:100%;}
.play .shenanigans .top,
.play .shenanigans .bottom {background:rgba(20, 38, 51, 0.90);}
.play .shenanigans .top {top:0; color:#FFF; box-shadow:inset 0 0 30px 0 rgba(0, 0, 0, 0.50), 0 5px 15px 0 rgba(0, 0, 0, 0.50);}
.play .shenanigans .top .cut-out {width:100%; height:112px; margin:0; background:url(img/cutouts/bg-play-shenanigans-top.png) no-repeat; background-size:100% 112px;}
.play .shenanigans .top .container {position:relative; z-index:10; padding:80px 0 40px 0; background:url(img/prism-tri.png) no-repeat 20px 88px;}
.play .shenanigans .top h1,
.play .shenanigans .top h2 {margin-left:110px; margin-bottom:0;}
.play .shenanigans .top h1 {font-size:60px; text-transform:uppercase;}
.play .shenanigans .top h2 {font:18px/20px 'Geogrotesque-Regular', sans-serif;}
.play .shenanigans .bottom {bottom:0; height:100px; box-shadow:inset 0 0 30px 0 rgba(0, 0, 0, 0.50), 0 -5px 15px 0 rgba(0, 0, 0, 0.50);}
.play .shenanigans .title {}
.play .shenanigans .photos {height:660px!important; margin:0px -300px; box-shadow:none;}
.play .shenanigans .photos .photo:hover {z-index:5;}
.play .shenanigans .photos .photo img {width:200px; opacity:0;
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
	/*filter:url(grayscale.svg);*/ /* Firefox 4+ */
	filter:gray; /* IE 6-9 */
	z-index:-1;
	-webkit-user-select:none;
}
.play .shenanigans .photos .photo img:hover {
	-webkit-transition: all .25s ease-out;
	-webkit-filter:none;
	-moz-filter:none;
	-ms-filter:none;
	-o-filter:none;
	filter:none;
	filter:none; /* IE 6-9 */
	-webkit-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	-webkit-transform: scale(1.2);
}

.careers .top-bg.interior{height:400px;}
.careers .content{margin-top:50px;}

.careers-box{background:url(img/prisms/bg-prism-navy.jpg) center; background-size:cover; color:white; padding:50px 0 150px; margin-top:100px;}
.careers-box h1, .careers-box h2{color:#b0d135;}
.careers-box h1{text-transform:uppercase; font:36px/36px "Geogrotesque-SemiBold" sans-serif;}
.careers-box h2{font-size:32px; border-bottom:1px solid #047caf; font-family:"Geogrotesque-Regular" sans-serif;}
.careers-box a{color:white;}
.careers-box a:hover{color:#047caf;}

.careers-box .key{color:white; font-size:12px; text-transform:uppercase; display:inline; top:-6px; position:relative;}
.careers-box .key abbr{  margin: 0 5px 0 40px;}

.careers-box .contain {padding:15px; background-color:#12212c; border:5px solid red margin-bottom:0; margin-top:25px;}
.careers-box .contain ul{margin-left:20px; padding-left:0; font-size:14px; line-height:18px;}
.careers-box .contain ul li{margin-bottom:5px;}

.careers-box .listing{margin-bottom:10px;}
.careers-box .listing span{margin-right:10px; position:absolute; left:15px;}
abbr.location{border:1px solid #047caf; font-size:12px; color:#047caf; display:inline-block; border-radius:5px; width:20px; height:20px; line-height:19px; text-align:center; margin-right:5px;}
abbr.location.active{background-color:#047caf; color:white;}

.top-bg .key{margin-left:15px; position:relative; top:-6px;}

.play.our-team .top-bg.envocean{height:700px!important; }
.play.our-team .envocean .cut-off, .play.careers .cut-off{background:url(img/cutouts/bg-play-top.png) bottom left no-repeat!important; background-size:100% auto!important; height:100px!important; bottom:0; top:auto;}

.play.our-team .bump{position:static; margin-top:20px; }
.play.our-team .blog-container{position:relative; z-index:10;}

.clear-bullet{list-style:none; margin:0; padding:0;}

.likes-dislikes{z-index:11;}
.likes-dislikes h3{color:#b0d135; font-size:100px; letter-spacing:-3px; text-transform:uppercase; font-family:"Geogrotesque-SemiBold" sans-serif; line-height:72px;}
.likes-dislikes h3 span{color:#284358; font-size:84px;}

.list-item{float:left; position:relative; -webkit-user-select:none;}
.list-item .thumbs{width:100%; height:100%; background-color:rgba(4,124,175,0.8); position:absolute; top:0;  text-align:center; color:#aed5e5; overflow:hidden; padding:5px;}
.list-item .thumb{width:100%; height:100%; margin-top:20%;}
.list-item .thumb span{text-shadow: 3px 4px 0 rgba(0,0,0,.33); font-size:80px;}
.list-item .title{width:100%; height:100%; display:none; text-shadow: 2px 2px 0 rgba(0,0,0,.33); line-height:20px; color:white;}

.list-item .thumbs:hover{background-color:rgba(4,124,175,0.5);}
.list-item .thumbs:hover .thumb{height:40%;  margin-top:10%;}
.list-item .thumbs:hover .thumb span{font-size:40px;}
.list-item .thumbs:hover .title{height:60%; display:block;}

.bio{position:relative; z-index:11;}
.couch-photo{position:absolute; z-index:10; /*top:100px;*/}
.couch-photo img{max-width:100%;}

.edge.navy{background:#263e4f url(img/cutouts/bg-play-bio.png) top left no-repeat; margin-top:50px; background-size:cover;}
.edge.navy{margin-bottom:0;}
.edge.navy h3{color:#b0d135; border-bottom:2px solid #057aad; text-transform:uppercase; padding-bottom:20px;}
.edge.navy blockquote{background-color:rgba(13,22,29,0.8);}

.isotope-item { z-index: 2 }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
.isotope,
.isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height,width; -moz-transition-property: height,width; -ms-transition-property: height,width; -o-transition-property: height,width; transition-property: height,width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform,opacity; -moz-transition-property: -moz-transform,opacity; -ms-transition-property: -ms-transform,opacity; -o-transition-property: -o-transform,opacity; transition-property: transform,opacity; }
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

/*.play .blog-container{ margin-top:-79px;}
*/

.event .date{
	background-color:#284358; color:#abde14; text-transform:uppercase; text-align:center;
}
.event .date span{
	color:white; display:block; font:36px 'Geogrotesque-SemiBold', sans-serif; line-height:26px;
}
.event h3{
	margin:0 0 5px 0;
	color:#284358;
	font:20px/24px 'Geogrotesque-SemiBold', sans-serif;
}
.event .meta{
	color:#284358;
}
.event .strong{text-transform:uppercase;}

.nav-tabs{
	padding-left:0;
	margin-top:15px;
	margin-bottom:30px;
	border-bottom:0;
}

.nav-tabs>li{
	list-style:none;
	display:inline-block;

}
.nav-tabs>li>a{
	text-transform:uppercase;
	color:#989a99;
	background-color:white;
	border:1px solid #989a99;
	padding:5px 20px;
	display:inline-block;
	font-family:'Geogrotesque-SemiBold', sans-serif;
	border-radius:0;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
	color:white;
	background-color:#b0d135;
	border:1px solid #b0d135;

}
.nav-tabs>li>a:hover{border-color:#ddd;}

.strong{font-family:'Geogrotesque-SemiBold', sans-serif;}

.meta a.map-link{text-decoration:none; margin:0 7px;}

.causes {margin-top:50px;}

.envocean-favorite-projects {
            color: #b0d135 !important;
            font-weight: 900 !important;
            text-transform: uppercase !important;
            letter-spacing: 1.2px !important;
    }



.profile-photo-container .profile-photo {
        object-fit: cover;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    margin-top:100px;
    float:right;
}

@media (max-width:767px) {
    .profile-photo-container {
    text-align:center;
        
    }
    .profile-photo-container .profile-photo {
        float:none;
        margin-top:10px;
    }
}

.envocean-embed-container {
    text-align:center;
    margin:50px 0;
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}

.envocean-embed-container iframe, .envocean-embed-container object, .envocean-embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (min-width:)

/* Medium Desktop - md */
@media screen and (max-width: 1200px) {


/*.play .blog-container{ margin-top:-19px;}
*/
.play .blurb .cut-off{background-size: 100% 136px, 60% auto!important;}
    


.couch-photo{top:100px;}

.likes-dislikes h3{font-size:64px; line-height:50px;}
.likes-dislikes h3 span{font-size:54px;}

.edge.navy{background-size:contain;}


}

/* Small Desktop to Landscape tablet - sm */
@media screen and (max-width: 992px) {

.couch-photo {top: 185px;}

.list-item .thumb {margin-top: 15%;}

.list-item .thumb span {font-size: 56px;}
.list-item .thumbs:hover .thumb span {font-size: 28px;}

.list-item .thumbs:hover .title{font-size: 14px; line-height: 14px;}

.play .blurb {padding-bottom:75px;}
.play .careers-box h2 {padding-bottom:5px;}
.play .careers-box .key abbr {position:relative; top:6px;}

.play.our-team #staff ul.items li a,
.play.our-team #staff ul.items li a img {width:100%; height:100%;}

.play.our-team .envocean .cut-off, .play.careers .cut-off{height:50%!important;}

.play.our-team .blog-container {margin-top:-16px;}

.event .date{text-align:left; padding:0 7px; margin-bottom:10px;}
.event .date span{font-size:16px; display:inline;}
}


/* Landscape phone to portrait tablet - xs */
@media screen and (max-width: 767px) {

.couch-photo {top: 250px;}
.play.our-team .top-bg.envocean{height:625px auto;}
.play .blurb{padding-bottom:70px;}
.play.our-team .bump{margin-top:0px;}
.likes-dislikes h3, .likes-dislikes h3 span{font-size:39px; letter-spacing:normal;}
.list-item{margin-bottom:20px;}


.list-item .thumbs:hover .title{font-size: 18px; line-height: 20px;}

.edge.navy h3{text-transform:none; padding-bottom:10px;}

.blog-container{margin-top:20px!important;}

.careers .top-bg.interior{height:auto; padding-bottom:50px;}

.careers .content{margin-top:0px;}

.careers-box{margin-top:50px; padding-bottom:50px;}
.careers-box h1{}
.careers-box h2{margin-top:20px;}
.careers-box .contain h2{margin-top:0;}
.careers-box h1, .careers-box h2{margin-bottom:10px;}
.careers-box .key{display:block; margin-top:10px;}
.careers-box .key abbr{margin-left:0; position:relative; top:6px;}
.careers-box .key abbr:nth-child(2){margin-left:15px;}

.staff .filter{background:none; padding-left:0;}
.staff h1{font-size:34px; text-transform:none;}
.staff h2{font-size:24px; margin-top:7px;}

.play .shenanigans .top h1 {font-size:40px; margin-bottom:5px;}
.play .shenanigans .top h2 {font-size:14px;}
.play .shenanigans .top h1,
.play .shenanigans .top h2 {margin-left:70px;}
.play .shenanigans .top .container {margin-left:30px; padding:50px 0 20px 0; background-position:left 50px;}
.play .shenanigans .bottom {height:50px;}



}

/* iphone5 landscape */
@media screen and (max-width: 480px) {
.couch-photo {top: 385px;}
.play.our-team .bump{margin-top:20px;}

.play .shenanigans .top h1 {font-size:32px; margin-bottom:0;}
.play .shenanigans .top h2 {font-size:15px;}
.play .shenanigans .top h1,
.play .shenanigans .top h2 {margin-left:0;}
.play .shenanigans .top .container {background-image:none; margin-left:20px;}

.play .shenanigans .photos {height:600px!important; margin:0px -150px;}
.play .shenanigans .photos .photo img {width:100px;}

}

/* iphone5 portrait */
@media screen and (max-width: 320px) {
.play #staff ul.items {height:auto!important;}
.play #staff ul.items li {width:135px; -webkit-transform:none!important; position:relative!important;}
.play #staff .filter {display:none;}

}
