img{
	border:solid;
	border-radius:60px;
}
body{
	background-image:url(../images/s1.jpg);
	background-size:cover;
background-attachment: fixed;
	}
	h2{
	text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 30px;
	position:absolute;
top:415%;
left:35%;
}
	header{
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 30px;
	height:10%;
}
a{text-decoration: none;}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.wrap{
  width: 250px;
  height:100%;
  float:left;
  padding: 10px;
}
.menu a{
	font-family: 'Bangers', cursive;
  background: none;
  color: #fff;
  padding: 10px;
  display: block;
  border-bottom: 1px solid;
  border:solid;
  border-color:Yellow;
  margin:5px;
  transition: 0.5s all;
}
.menu a:hover{
	 border-radius:8px 8px;
 
  padding: 10px 0 10px 30px;
}
.ml{
  position: relative;
}
.menu2{
  position: absolute;
  width: 75%;
  left: 100%;
  top:-9999em;
  opacity: 0;
  border-left: 10px solid transparent;
  transition: 0.5s opacity;
}
.ml:hover .menu2{
  opacity: 1;
  top: 0;
}
.content{
	width:75%;
float:right;
margin:0;
}
.f1{
width:220px;
height:300px;
position:absolute;
top:23%;
left:20%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f2{
width:220px;
height:300px;
position:absolute;
top:23%;
left:57%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f3{
width:220px;
height:300px;
position:absolute;
top:79%;
left:20%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f4{
width:220px;
height:300px;
position:absolute;
top:83%;
left:57%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f5{
width:220px;
height:300px;
position:absolute;
top:138%;
left:20%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f6{
width:220px;
height:300px;
position:absolute;
top:135%;
left:57%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f7{
width:220px;
height:300px;
position:absolute;
top:194%;
left:20%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f8{
width:220px;
height:300px;
position:absolute;
top:190%;
left:57%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f9{
width:220px;
height:300px;
position:absolute;
top:254%;
left:20%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f10{
width:220px;
height:300px;
position:absolute;
top:250%;
left:57%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f11{
width:220px;
height:300px;
position:absolute;
top:307%;
left:20%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f12{
width:220px;
height:300px;
position:absolute;
top:307%;
left:57%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f13{
width:220px;
height:300px;
position:absolute;
top:364%;
left:35%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f14{
width:220px;
height:300px;
position:absolute;
top:425%;
left:20%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f15{
width:220px;
height:300px;
position:absolute;
top:425%;
left:57%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f16{
width:220px;
height:300px;
position:absolute;
top:482%;
left:20%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f17{
width:220px;
height:300px;
position:absolute;
top:485%;
left:57%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f18{
width:220px;
height:300px;
position:absolute;
top:540%;
left:35%;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
@media screen and (max-width: 1200px) { 
.wrap{
margin:-44px 94px auto;
float:none;
}
.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 170px;
	width:100px;
}
.f1{
width:220px;
height:300px;
position:absolute;
top:491px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f2{
width:220px;
height:300px;
position:absolute;
top:903px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f3{
width:220px;
height:300px;
position:absolute;
top:1329px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f4{
width:220px;
height:300px;
position:absolute;
top:1734px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f5{
width:220px;
height:300px;
position:absolute;
top:2116px;
left:76px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f6{
width:220px;
height:300px;
position:absolute;
top:2500px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f7{
width:220px;
height:300px;
position:absolute;
top:2904px;
top:2904px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f8{
width:220px;
height:300px;
position:absolute;
top:3296px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f9{
width:220px;
height:300px;
position:absolute;
top:3708px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f10{
width:220px;
height:300px;
position:absolute;
top:4120px;
left:76px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f11{
width:220px;
height:300px;
position:absolute;
top:4532px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f12{
width:220px;
height:300px;
position:absolute;
top:4994px;
left:36px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f13{
width:220px;
height:300px;
position:absolute;
top:5456px;
left:50px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f14{
width:220px;
height:300px;
position:absolute;
top:5960px;
left:76px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f15{
width:220px;
height:300px;
position:absolute;
top:6379px;
left:50px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f16{
width:220px;
height:300px;
position:absolute;
top:6831px;
left:50px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f17{
width:220px;
height:300px;
position:absolute;
top:7264px;
left:50px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
.f18{
width:220px;
height:300px;
position:absolute;
top:7661px;
left:50px;
text-align:center;	
font-family: 'Bangers', cursive;
	color:yellow;
	font-size: 20px;
	margin:0 0 10px 10px;
}
h2{
	position:absolute;
top:5836px;
left:124px;	
	}
}