body {
 overflow-x:hidden;
} 


 
/*--------------------------*/

#container {
  z-index:10;
  width:100%;
  width:100vw; 
  height:300px; /* 16:9 ratio */
  position:relative;
  top:32px;
  
  }

#image {
  z-index:1;
  position:absolute;
  top:0;
  width:100%; height:100%;
  
  background-image:url("../images/Banner-Image_Whole_02.jpg");
  background-size:100% 100%;
  background-position:center center;
  transition:all .5s ease-out;
  background-repeat:no-repeat;
  -webkit-filter:
    blur(0px),
    grayscale(0),
    hue-rotate(0deg);
  filter:
    blur(0px),
    grayscale(0),
    hue-rotate(0deg);
  
}

.buttons {
  position:absolute;
  top:270px;
  width:100%;
  z-index:10000;
  
  text-align:center;
  list-style:none;
}

.buttons li {
  display:inline-block;
  box-sizing:border-box;
  box-shadow:0 0 0.2em #000;
  margin:0 5px;
  cursor:pointer;
  width:1vw;
  height:1vw;
  background:#AAA;
  border-radius:60%;
  transition:all .3s linear;
}

.buttonsactive {
  background:#FFF !important;
  
  box-shadow:
    0 0 .3rem .1rem #000,
    inset 0 0 1rem #000;
  -webkit-animation:rotation 6s linear infinite;
  animation:rotation 6s linear infinite;
}

.buttons li:hover {
  background:#777;
}


#gear {
  padding:.3rem;
  position:absolute;
  top:-4.25rem;
  left:0;
  z-index:1000;
  width:3vw;
  height:3vw;
  border-radius:0 50% 50% 0;
  background-color:#333;
  box-shadow: 
    0 0 1px #000,
    0 0 .5rem #000,
    -.2rem .2rem 1rem transparent;
  cursor:pointer;
  transition:box-shadow .2s linear;
}

#gear:hover {
  box-shadow: 
    0 0 1px #000,
    0 0 .5rem #000,
    -.2rem .2rem 1rem #000;
}

#gearimg {
  position:absolute;
  left:10%; top:11%;
  width:80%;
  height:80%;
  background:#FFF;
  box-shadow: 0 0 .1rem .1rem #000;
  border-radius:100%;
  background-image:url(http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-gear-outline.svg);
  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;
  transform:rotate(0deg);
  transition:all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -webkit-backface-visibility: hidden;
  
}

#filtercontainer {
  position:absolute;
  top:-4rem;
  left:-90%;
  width:80%;
  white-space: nowrap;
  text-align:center;
  transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);

}

#filtercontainer > li {
  display:inline-block;
  width:20%;
  margin:0 2.2%;
  height:3rem;
  
  line-height:3rem;
  text-align:center;
  text-transform:uppercase;
  font-size:1.7rem;
  font-family: 'Lato', sans-serif;
  font-weight:400;
  letter-spacing:.2rem;
  color:#CCC;
  text-shadow:
    0 0 .3rem #000,
    .1rem 0 #111,
    -.1rem 0 #111,
    0 .1rem #111,
    0 -.1rem #111;
  
  transition:
    all .3s linear,
    box-shadow .3s linear,
    color .3s linear;
  -webkit-font-smoothing:subpixel-antialiased;
  cursor:pointer;
}

#filtercontainer>li:hover{
  color:#FFF;
  text-shadow:none;
}

.active {
  color:orange !important;
}

@-webkit-keyframes rotation {
  from {transform:rotate(0);}
  to   {transform:rotate(360deg);}
}

@media screen and (max-width:600px) {
  #showcase {
    display:none;
  }
}

/* CSS NEEDS SOME PREFIXES*/