{
    display:none;
}
ul.slid {
    margin:0% 40% 0% 10%;
    height:337px;
    list-style:none;
    position:relative;
    width:600px;
}
ul.slid li {
    float:left;
    transition: 1s;
}
ul.slid li.slide {
    height:337px;
    overflow:hidden;
    position:relative;
	left:51px;
    width:600px;
    z-index:10;
    transition: 1s;
}
ul.slid li.slide img {
    display:block;
    left:50%;
    opacity:0; 
    position:absolute;
    top:0;
    transition: 1s;
}
ul.slid li.slide img.u1,
ul.slid li.slide img.u2,
ul.slid li.slide img.u3,
ul.slid li.slide img.u4,
ul.slid li.slide img.u5 {
    margin-left:-400px
}
ul.slid li.L,
ul.slid li.R {
    background-color:white;
  top:200px;
    position:relative;
  height:40px;
	width:40px;
    z-index:0;
}
ul.slid li.L{
	left:-98px;
	
}
ul.slid li.R {
	left:657px;
	top:-172px;
	
}
ul.slid li.L a,
ul.slid li.R a {
    display:block;
    position:absolute;
    top:5px;
    width:50px;	
	transition: all 2s;
}
ul.slid li.L a:before {
	content: "<<";
    margin-left:15px;
	font: bold 20px "Verdana, Arial, sans-serif";
	color:black;
}
ul.slid li.R a:after {
	content: ">>";
    margin-left:15px;
	font:bold 20px "Verdana, Arial, sans-serif";
	color:black;
}
ul.slid li.L:hover {
    background-color:yellow;
    border-radius:50%;
	transform: rotate(360deg);
}
ul.slid li.R:hover {
    background-color:yellow;
     border-radius:50%;
		transform: rotate(360deg);
}
ul.slid li.tr {
    background-color:rgba(254, 255, 224,0.4);
    clear:left;
    height:25px;
    margin-left:50px;
    margin-top:-39px;
    position:relative;
    text-align:center;
    width:503px;
    z-index:20;
}
ul.slid li.tr a {
    background-color:black;
    display:inline-block;
    height:15px;
	border-radius:50%;
    margin:5px;
    width:15px;
}
ul.slid li.tr a:hover {
    background-color:yellow;
}
span#s1:target ~ ul.slid li.slide .u1,
span#s2:target ~ ul.slid li.slide .u2,
span#s3:target ~ ul.slid li.slide .u3,
span#s4:target ~ ul.slid li.slide .u4,
span#s5:target ~ ul.slid li.slide .u5 {
    opacity:1;

}
ul.slid li.slide .u1{
    opacity:1;
}

span#s1:target ~ ul.slid li.tr .t1, 
span#s2:target ~ ul.slid li.tr .t2, 
span#s3:target ~ ul.slid li.tr .t3, 
span#s4:target ~ ul.slid li.tr .t4, 
span#s5:target ~ ul.slid li.tr .t5 {
    background-color:#ff0;
}

span#s1:target ~ ul.slid li.L a,
span#s1:target ~ ul.slid li.R a {z-index:10}
span#s1:target ~ ul.slid li.R .i2 {z-index:100}
span#s1:target ~ ul.slid li.L .i5 {z-index:100}

span#s2:target ~ ul.slid li.L a,
span#s2:target ~ ul.slid li.R a {z-index:10}
span#s2:target ~ ul.slid li.R .i3 {z-index:100}
span#s2:target ~ ul.slid li.L .i1 {z-index:100}

span#s3:target ~ ul.slid li.L a,
span#s3:target ~ ul.slid li.R a {z-index:10}
span#s3:target ~ ul.slid li.R .i4 {z-index:100}
span#s3:target ~ ul.slid li.L .i2 {z-index:100}

span#s4:target ~ ul.slid li.L a,
span#s4:target ~ ul.slid li.R a {z-index:10}
span#s4:target ~ ul.slid li.R .i5 {z-index:100}
span#s4:target ~ ul.slid li.L .i3 {z-index:100}

span#s5:target ~ ul.slid li.:L a,
span#s5:target ~ ul.slid li.R a {z-index:10}
span#s5:target ~ ul.slid li.R .i1 {z-index:100}
span#s5:target ~ ul.slid li.L .i4 {z-index:100}
@media screen and (max-width: 1200px) { 
.wrap{
margin:-661px 225px auto;
float:none;
z-index:1000;
}
.menu{
width:220px;
margin:0 auto;
height:100px;
}
.content{
	float:none;
}
header{
	text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 22px;
	margin: 0 0 0 300px;
	width:100px;
}
.container{
	float:none;
	margin:310px 50px auto;
}
}