*{box-sizing: border-box;
    font-family: 'Lobster', cursive;   
}

span.cap {
    display:none;
}
ul.slider {
    margin:0 auto;
    height:534px;
    list-style:none;
    position:relative;
    width:900px;
}
ul.slider li {
    float:left;  
    transition: 1s;
}
ul.slider li.slides {
    height:534px;
    overflow:hidden;
    position:relative;
    width:800px;
    z-index:10; 
    transition: 1s;
}
ul.slider li.slides img {
    display:block;
    left:50%;
    opacity:0; 
    position:absolute;
    top:0; 
    transition: 1s;
}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5,
ul.slider li.slides img.g6 {
    margin-left:-400px
}
ul.slider li.lArrow,
ul.slider li.rArrow {

	top:200px;
    position:relative;
	height:40px;
	width:40px;
    z-index:5;
}
ul.slider li.lArrow {
	left:-15px;
	
}
ul.slider li.rArrow {
	left:15px;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
  
    display:block;
    position:absolute;
    top:5px;
    width:50px;	
}


ul.slider li.lArrow a:before {
    content: "< ";
    margin-left:15px;
	font: bold 20px "Verdana, Arial, sans-serif";
	color:rgb(250, 237, 237);
    height: 100px;
    width: 100px;
    display:inline-block;
}
ul.slider li.rArrow a:after {
    content: "> ";
 
    margin-left:15px;
	font: bold 20px "Verdana, Arial, sans-serif";
	color:rgb(250, 237, 237);
    height: 100px;
    width: 100px;
    display:inline-block;}
   

ul.slider li.lArrow:hover {
    background-color:rgb(182, 5, 87);
    width:55px;
    height: 50px;
 
}
ul.slider li.rArrow:hover {
    background-color:rgb(182, 5, 87);
    width:55px;
    height: 50px;

   
}



ul.slider li.track {
    background-color:rgba(0, 25, 248, 0.3);
    clear:left;
    height:25px;
    margin-left:41px;
    margin-top:-25px;
    position: relative;
    text-align:center;
    width:800px;
    z-index:20;
}
ul.slider li.track a {
    background-color:rgb(134, 14, 108);
    display:inline-block;
    height:10px;
    margin:5px;
    width:10px;
    border-radius: 70%;
}
ul.slider li.track a:hover {
    background-color:rgb(138, 207, 204);
}
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5,
span#slide6:target ~ ul.slider li.slides .g6 
{
    opacity:1;

}
ul.slider li.slides .g1{
    opacity:1;
}

span#slide1:target ~ ul.slider li.track .tr1, 
span#slide2:target ~ ul.slider li.track .tr2, 
span#slide3:target ~ ul.slider li.track .tr3, 
span#slide4:target ~ ul.slider li.track .tr4, 
span#slide5:target ~ ul.slider li.track .tr5, 
span#slide6:target ~ ul.slider li.track .tr6{
    background-color:rgb(14, 84, 177);
}

span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a6 {z-index:100}

span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}

span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}

span#slide5:target ~ ul.slider li.lArrow a,
span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}

span#slide6:target ~ ul.slider li.lArrow a,
span#slide6:target ~ ul.slider li.rArrow a {z-index:10}
span#slide6:target ~ ul.slider li.rArrow .a1 {z-index:100}
span#slide6:target ~ ul.slider li.lArrow .a5 {z-index:100}
img{
    width: 900px;
}