#top {
	position: relative;
	width: 100%;
	background: url("../img/about/all.jpg");
	background-repeat: no-repeat;
	margin: 0 auto;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
}

#top:before {
	content: "";
	display: block;
	padding-top: 70%;
}

#bottom {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

#bottom:before {
	content: "";
	display: block;
	padding-top: 50%;
}
#ceo {
	position: absolute;
	width: 50%;
	height: 50%;
	left: 0;
	top: 0;
	opacity: 0;
	background-image: url("../img/about/ceo-1.jpg");
}

#plan {
	position: absolute;
	width: 50%;
	height: 50%;
	right: 0;
	top: 0;
	opacity: 0;
	background-image: url("../img/about/plan-1.jpg");
}

#hack {
	position: absolute;
	width: 33.33%;
	height: 50%;
	left: 0;
	bottom: 0;
	opacity: 0;
	background-image: url("../img/about/hack-1.jpg");
}

#art {
	position: absolute;
	width: 33.33%;
	height: 50%;
	left:33.33%;
	bottom: 0;
	opacity: 0;
	background-image: url("../img/about/art-1.jpg");
}

#video {
	position: absolute;
	width: 33.33%;
	height: 50%;
	right: 0;
	bottom: 0;
	opacity: 0;
	background-image: url("../img/about/video-1.jpg");
}

#ceo:hover, #plan:hover, #hack:hover, #art:hover, #video:hover {
	opacity: 1;
}

.modal {
	max-height: 1080px;
	height: 90%;
	overflow: hidden;
    top: 3% !important;
}

.bt {
	transition: opacity 0.7s;
	-moz-transition: opacity 0.7s;
	-webkit-transition: opacity 0.7s;
	-o-transition: opacity 0.7s;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
}

.border {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

.close {
	position: absolute;
	right: 0;
	top: 5;
}