@charset "utf-8";
/* CSS Document */

<style>
*{
	margin:0;
	padding: 0;
}
#promo1{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo1:target{
	display: block;
}
#promo1:target ~ .box1{
	top: 2000px;
	transition: all .3s;
	transition-fade: .2s;

}
.box1{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}

#promo2{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo2:target{
	display: block;
}
#promo2:target ~ .box2{
	top: 2000px;
	transition: all .3s;
	transition-fade: .2s;

}
.box2{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}
#promo3{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo3:target{
	display: block;
}
#promo3:target ~ .box3{
	top: 2000px;
	transition: all .3s;
	transition-fade: .2s;

}
.box3{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}

#promo4{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo4:target{
	display: block;
}
#promo4:target ~ .box4{
	top: 2600px;
	transition: all .3s;
	transition-fade: .2s;

}
.box4{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}

#promo5{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo5:target{
	display: block;
}
#promo5:target ~ .box5{
	top: 2600px;
	transition: all .3s;
	transition-fade: .2s;

}
.box5{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}

#promo6{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo6:target{
	display: block;
}
#promo6:target ~ .box6{
	top: 2600px;
	transition: all .3s;
	transition-fade: .2s;

}
.box6{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}
#promo7{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo7:target{
	display: block;
}
#promo7:target ~ .box7{
	top: 3200px;
	transition: all .3s;
	transition-fade: .2s;

}
.box7{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}

#promo8{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo8:target{
	display: block;
}
#promo8:target ~ .box8{
	top: 3200px;
	transition: all .3s;
	transition-fade: .2s;

}
.box8{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}
#promo9{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	display:none;
}
#promo9:target{
	display: block;
}
#promo9:target ~ .box9{
	top: 3200px;
	transition: all .3s;
	transition-fade: .2s;

}
.box9{
	height:350px;
	position:absolute;
	margin-left: -150px;
	left: 50%;
	top: 100px;

}





#close{ 
	color: #fff;
	font-family:'Arial';
	text-decoration: none;
	font-size: 35px;
	position: absolute;
	background-color: #000;
	width: 40px;
	height: 40px;
	text-align: center;
	right: 0;
	bottom: -15px;
}
#close:hover{
	opacity: .6;
}
</style>