/* Storyboard - Media */

#media-nav-wrap { 
float:left;
width:100%;
display:block;
}

#media-nav {
display: inline-block;
list-style:none;
width:100%;
margin:0;
padding:0;
}

#media-nav li {
display:inline-block;
margin:0 5px 0 0;
padding:0;
}

#media-nav li a {
display:inline-block;
font-size:17px;
font-weight:400;
color:#000;
text-align:center;
text-decoration:none;
      padding:15px 35px;
      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius:15px 255px;
      border:3px solid #000;
  background-image: linear-gradient(#000,#000);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: .4s;
}
    
#media-nav li a:hover {
  box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
  cursor: pointer;
  background-size: 100% 100%;
  color:#FFF;
  }

.selected { 
background:rgba(0,0,0,1) !important; 
color:#FFF !important; 
-webkit-transition: all 0.1s ease-out;  
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out; 
      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius:15px 255px;
      border:3px solid #000;
}





@media only screen and ( max-width:768px ) {
#media-nav li {
display:inline-block;
margin:0 0 5px 0;
padding:0;
width:100%;
}

  #media-nav li a {
display:inline-block;
font-size:14px;
color:#333;
text-align:center;
text-decoration:none;
      padding:14px 5%;
      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius:15px 255px;
      border:2px solid rgba(0,0,0,1);
    width: 90%;
}
   
    }



/* Storyboard - Projects */

#film:hover, #theater:hover { cursor: pointer; }

.gypsy {
display:block;
background:url('images/photo-gypsy.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.treasure {
display:block;
background:url('images/photo-treasure.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.wolves {
display:block;
background:url('images/photo-wolves.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.yearone {
display:block;
background:url('images/photo-yearone.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.alice {
display:block;
background:url('images/photo-alice.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.ldos {
display:block;
background:url('images/photo-ldos.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.glo {
display:block;
background:url('images/photo-glo.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.butterfly {
display:block;
background:url('images/photo-butterfly.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.indecent {
display:block;
background:url('images/photo-indecent.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.crooked {
display:block;
background:url('images/photo-crooked.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.latimes {
display:block;
background:url('images/photo-latimes.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.strange {
display:block;
background:url('images/photo-strange.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.pledges {
display:block;
background:url('images/photo-pledges.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.adirondack {
display:block;
background:url('images/photo-adirondack.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.pickle {
display:block;
background:url('images/photo-pickle.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.darkness {
display:block;
background:url('images/photo-darkness.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.lightyears {
display:block;
background:url('images/photo-lightyears.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.bsw {
display:block;
background:url('images/photo-bsw.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.dial {
display:block;
background:url('images/photo-dial.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.valet {
display:block;
background:url('images/photo-valet.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;

transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.drunk {
display:block;
background:url('images/photo-drunk.jpg') 0px 0px #333;
  background-size: cover;
width:100%;
height:220px;
transition: height .5s;
-webkit-transition: height .5s;
margin-bottom:20px;
}

.gypsy:hover, .yearone:hover, .alice:hover, .ldos:hover, .glo:hover, .butterfly:hover, .indecent:hover, .crooked:hover, .latimes:hover, .strange:hover, .pledges:hover, .adirondack:hover, .pickle:hover, .darkness:hover, .bsw:hover, .lightyears:hover, .dial:hover, .valet:hover, .drunk:hover {
cursor:pointer;
}

.gypsy:hover .projects-name, .yearone:hover .projects-name, .alice:hover .projects-name, .ldos:hover .projects-name, .glo:hover .projects-name, .butterfly:hover .projects-name, .indecent:hover .projects-name, .crooked:hover .projects-name, .latimes:hover .projects-name, .strange:hover .projects-name, .pledges:hover .projects-name, .adirondack:hover .projects-name, .pickle:hover .projects-name, .darkness:hover .projects-name, .bsw:hover .projects-name, .lightyears:hover .projects-name, .dial:hover .projects-name, .valet:hover .projects-name, .drunk:hover .projects-name {
cursor:pointer;
color:#4DA1DD;
background-size: 100% 100%;
}

.projects-name {
float:left;
margin-top:20px;
margin-left:20px;
background:#000;
font-weight:300;
font-size:35px;
line-height:30px;
color:#FFF;
padding:12px 20px 10px 20px;
      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius:15px 255px;
  background-image: linear-gradient(#FFF,#FFF);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: .4s;
}
    


.projects-year {
float:right;
font-weight:300;
font-size:12px;
color:#999;
  letter-spacing:1px;
}

.about-text {
display:none;
}

.gypsy:hover .about-text, .treasure:hover .about-text, .wolves:hover .about-text, .yearone:hover .about-text, .alice:hover .about-text, .ldos:hover .about-text, .glo:hover .about-text, .butterfly:hover .about-text, .indecent:hover .about-text, .crooked:hover .about-text, .latimes:hover .about-text, .strange:hover .about-text, .pledges:hover .about-text, .adirondack:hover .about-text, .pickle:hover .about-text, .darkness:hover .about-text, .bsw:hover .about-text, .lightyears:hover .about-text, .dial:hover .about-text, .valet:hover .about-text, .drunk:hover .about-text {
display:block;
float:left;
margin-left:20px;
background:rgba(0,0,0,0.5);
background:#000\9;
font-weight:300;
font-size:16px;
color:#FFF;
padding:12px 20px 10px 20px;
  margin-top:10px;
}

.x { display:none; }

.gypsy-content, .treasure-content, .wolves-content, .yearone-content, .alice-content, .ldos-content, .glo-content, .butterfly-content, .indecent-content, .crooked-content, .latimes-content, .strange-content, .pledges-content, .adirondack-content, .pickle-content, .darkness-content, .bsw-content, .lightyears-content, .dial-content, .valet-content, .drunk-content {
  background: #FFF;
  padding:25px;
  margin:-35px 0 25px 0;
  box-shadow: 0 10px 100px #000;
  font-size:15px;
  line-height: 20px;
}

.bold { font-weight:900; text-transform:uppercase; font-size:16px; }


.gypsy-content img, .treasure-content img, .wolves-content img, .yearone-content img, .alice-content img, .ldos-content img, .glo-content img, .butterfly-content img, .indecent-content img, .crooked-content img, .latimes-content img, .strange-content img, .pledges-content img, .darkness-content img, .bsw-content img, .lightyears-content img, .dial-content img, .valet-content img, .drunk-content img {
transition:All 0.5s ease;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}

.gypsy-content img:hover, .treasure-content img:hover, .wolves-content img:hover, .yearone-content img:hover, .alice-content img:hover, .ldos-content img:hover, .glo-content img:hover, .butterfly-content img:hover, .indecent-content img:hover, .crooked-content img:hover, .latimes-content img:hover, .strange-content img:hover, .pledges-content img:hover, .darkness-content img:hover, .bsw-content img:hover, .lightyears-content img:hover, .dial-content img:hover, .valet-content img:hover, .drunk-content img:hover {
opacity:0.7;
filter:alpha(opacity=70);
cursor: pointer;
}