@import url(http://fonts.googleapis.com/css?family=Varela+Round);

.slides {
  padding:  0;
  width:    892px;
  height:   274px;
  display:  block;
  margin:   0 auto;
  position: relative;
}

.slides * {
  user-select:           none;
  -ms-user-select:       none;
  -moz-user-select:      none;
  -khtml-user-select:    none;
  -webkit-user-select:   none;
  -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
  top:       0;
  opacity:   0;
  width:     892px;
  height:    274px;
  display:   block;
  position:  absolute;

  transform: scale(1);

#  transition: all 15.5s ease-in-out;
#transition-delay			Specifies when the transition effect will start 3 
#transition-duration		Specifies how many seconds or milliseconds a transition effect takes to complete 3 
#transition-property		Specifies the name of the CSS property the transition effect is for 3 
#transition-timing-function	Specifies the speed curve of the transition effect
#  transition: width 5s linear 10s;
#  transition-property: width;
#  transition-duration: 120s;
#  transition-timing-function: ease-in;
#  transition-delay: 60s;
  transition: all 15.5s ease-in;
}

.slide img {
  width:  100%;
  height: 100%;
}

.nav label {
  width:            100px;
  height:           100%;
  display:          none;
  position:         absolute;

  opacity:          0;
  z-index:          9;
  cursor:           pointer;

  transition:       opacity .2s;

  color:            #FFFFFF;
  font-size:        156pt;
  text-align:       center;
  line-height:      300px;
  font-family:      "Varela Round", sans-serif;
  background-color: rgba(255, 255, 255, .3);
  text-shadow:      0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container .slide {
  opacity:    1;
  transform:  scale(1);
#  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
  width:      100%;
  bottom:     9px;
  height:     11px;
  display:    block;
  position:   absolute;
  text-align: center;
}

.nav-dots .nav-dot {
  top:              -5px;
  width:            11px;
  height:           11px;
  margin:           0 4px;
  position:         relative;
  border-radius:    100%;
  display:          inline-block;
  background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
  cursor:           pointer;
  background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
  background: rgba(0, 0, 0, 0.8);
}