/*This here's the CSS for that there slider*/
#slider {
  bottom:2%;
  left: -4%;
  margin: 0 auto;
  position: relative;
  top:65px;
  z-index: 15;
}
.slider. {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
height:370;
width: 860px;
}
.slider li {
    -webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
list-style: none; 
position:absolute;
}
.slider img {
    -webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
  margin: 0 auto;
height:370;
width:860px;
vertical-align: top;
}

.slider input {
display: none;
}
.slider label {
background-color:#003754;
bottom: 0px;
cursor: pointer;
display: block;
height: 13px;
position:absolute; 
width: 13px; 
border-radius: 10px;
z-index: 10; 

-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
}
.slider li a:hover label {
  background-color: #3eafea;
}

.slider li a:hover label:after  {
  background-color: #3eafea;
}


.slider li:nth-child(1) label {
margin-bottom: 1.1%;
left: 40%;
} 
.slider li:nth-child(2) label {  
margin-bottom: 1%;
left: 45%;
}
.slider li:nth-child(3) label {
margin-bottom: 1%;
left: 50%;
}
.slider li:nth-child(4) label {
margin-bottom: 1%;
left: 55%; 
}
.slider img {
opacity: 0; 
visibility: hidden;
}

.slider li input:checked ~ img {
opacity: 1; 
visibility: visible; 
z-index: 10; 
}