/********* CLEARFIX *********/
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}



/* photo1 */
#modal {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 300;
	}
#modal .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}
.modal-content {
	position: relative;
	z-index: 310;
}
.modal-content img {
	width: 100%;
}


/* photo2 */
#modal2 {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal2:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 300;
	}
#modal2 .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}


/* photo3 */
#modal3 {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal3:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 300;
	}
#modal3 .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}




/* photo4 */
#modal4 {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal4:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 300;
	}
#modal4 .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}



/* photo5 */
#modal5 {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal5:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 300;
	}
#modal5 .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}



/* photo6 */
#modal6 {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal6:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 300;
	}
#modal6 .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}


/* photo7 */
#modal7 {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal7:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 300;
	}
#modal7 .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}



/* photo8 */
#modal8 {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal8:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 300;
	}
#modal8 .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}



/* photo9 */
#modal9 {
	left: 50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	margin-top: -250px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -40%;
	width: 80%;
}
#modal9:target {
	opacity: 1;
	top: 40%;
	visibility: visible;
	z-index: 30s0;
	}
#modal9 .btn {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #FFF;
}






.modal-content {
	position: relative;
	z-index: 310;
}
.modal-content img {
	width: 100%;
}
#modal .overlay {
	background-color: #000;
	background: rgba(0,0,0,.5);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}