#slides{
    position: sticky;
    height: 100%;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
#slides h2 {
  margin-top:-100px;

}
.slide{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing{
    opacity: 1;
    z-index: 2;
}


.controls{
    display: none;
}


/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide{
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;
  
  background-size: cover;
}
.slide a {
  width: 200px;
  background: #c5bb97;
  color:white;
  margin: 0 auto;
}
.slide a:hover{
  background: #f7e7af;
  color:white;
 
}


/* http://unrestrictedstock.com/wp-content/uploads/snowy-winter-vignette-bokeh-night-snow-falling-free-stock-photo.jpg */
.slide:nth-of-type(1){
  background-image: url('http://fmg-websites-custom.s3.amazonaws.com/348075-jones/images/banner.jpg');
background-position:50% 25%;
}

/* http://www.dawghousedesignstudio.com/wp-content/uploads/2010/01/25/free-stock-photos-1.jpg */
.slide:nth-of-type(2){
  background-image: url('http://fmg-websites-custom.s3.amazonaws.com/348075-jones/images/banner3.jpeg');
background-position:50% 25%;
}

/* http://www.dawghousedesignstudio.com/wp-content/uploads/2010/01/25/free-stock-photos-1.jpg */
.slide:nth-of-type(3){
  /* background-image: url('http://fmg-websites-custom.s3.amazonaws.com/348075-jones/images/banner2.jpg'); */
background-position:50% 25%;
}
.controls{
  background: #333;
  color: #fff;
  border: none;
  padding: 20px 0px;
  font-size: 20px;
  cursor: pointer;
  border: 2px solid #fff;
  margin: 10px 0px 0px 40px;
  width: 70px;
}

.controls:hover,
.controls:focus{
  background: #eee;
  color: #333;
}

.container{
  position: relative;
}

.hero-banner .buttons{
  position: relative;
  left: 0px;
  top: -100px;
  font-size: 0px;
  z-index:10;
}

.buttons #pause {
display:none !important;
}
.buttons #previous {
float:left !important;
}
.buttons #next  {
float:right !important;
margin-right:40px !important;
}