/* Global Styles */

 @import url("//fonts.googleapis.com/css?family=Poiret+One|Josefin+Sans");

 html,body {
  color:#333;
  font-family:"Josefin Sans", sans-serif;
  font-size:100%;
  height:100%;
  line-height:1.45;
  
}


/* Video Overlay */

#overlay {
  /*background-color:rgba(0,0,0,.65);
  height:100%;*/
  left:0;
  position:relative;
  top:0;
  transition:background-color 300ms ease;
  width:100%;
}

.fade { background-color:rgba(0,0,0,.85) !important; }


/* Hero Video + Fallback */

#hero-vid {
  backface-visibility:hidden;
  background:url("img/microsys.jpg") no-repeat scroll 0 0 #000;
  background-size:cover;
  bottom:0;
  height:auto;
  min-height:100%;
  min-width:100%;
  perspective:1000;
  position:fixed;
  right:0;
  width:auto;
  z-index:-1;
}

#hero-pic {
  display:block;
  height:auto;
  width:100%;
}

#state {
  bottom:0;
  cursor:pointer;
  font-size:2.25rem;
  left:0;
  line-height:1;
  padding:2rem 2.5rem 1.65rem;
  position:absolute;
}


/* Content Styles */

#title {
  backface-visibility:hidden;
  left:0;
  perspective:1000;
  position:fixed;
  width:100%;
}

#title h1 {
  background-color:rgba(0,0,0,.5);
  font-family:"Poiret One", sans-serif;
  font-size:2.5rem;
  padding:1rem 1.75rem;
}

#content {
  /*background-color:#151515;*/
  padding:2.5rem;
  position:relative;
  z-index:1;
}

#content p {
  font-size:1.25rem;
  letter-spacing:.02rem;
  margin-bottom:1.3rem;
}


/* Media Queries */

@media only screen and (max-width:768px) {
  #overlay { height:auto; }
}


/* Visibility Helpers */

@media only screen and (min-width:769px) {
  .visible-mobile,.visible-tablet,.hidden-desktop { display:none !important; }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .visible-mobile,.hidden-tablet,.visible-desktop { display:none !important; }
}

@media only screen and (max-width:479px) {
  .hidden-mobile,.visible-tablet,.visible-desktop { display:none !important; }
}