/*-- SLIDER -- */
#body {
  opacity: 1;
  height:80%;
  -webkit-transition:opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

#body.unactive {
  opacity: 0;
   -webkit-transition:opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}


.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider .inner {
  height:100%;
  width:1200%;
  margin-left: 0;
  -webkit-transition: margin 0.8s ease-out;
  transition: margin 0.8s ease-out;
}

.slider .inner [class^="slide-"] {
  position: relative;
  overflow: hidden;
  width: 8.3333%;
  height:100%;
  float:left;
  font-size: 15em;
  position:relative;
}

.slider img {
  position:absolute;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  min-width: 100%;
  min-height: 100%;
}


/*********************************************/
/*********************************************/
/*             < 850 px
/*********************************************/
/*********************************************/



@media (min-width:0px) and (max-width:850px) {
  
 
  
  /*-- SLIDER -- */
  #body {
    opacity: 1;
    height: 82%;
    -webkit-transition:opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
  }

  #body.unactive {
    opacity: 0;
     -webkit-transition:opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
  }

  .slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .slider .inner {
    height:100%;
    width:1200%;
    margin-left: 0;
    -webkit-transition: margin 0.8s ease-out;
    transition: margin 0.8s ease-out;
  }

  .slider .inner [class^="slide-"] {
    position: relative;
    overflow: hidden;
    width: 8.3333%;
    height:100%;
    float:left;
    font-size: 15em;
    position:relative;
  }

  .slider img {
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    height: 100%;
  }
}