/* ======================== */
/* SECTION 1 - HEADER       */
/* ======================== */

.section1 {
	background-image:url("../images/classicvision/section1.jpg");
	height:470px;
}

#classicvision {
	top:306px;
}

#textClassicvision {
	position:absolute;
	top:356px;
	left:50px;
	width:900px;
}

/* ======================== */
/* SECTION 2 - SCREENSHOTS  */
/* ======================== */

.section2 {
	background-image:url("../images/classicvision/section2.jpg");
	height:520px;
}

#feature {
	display:flex;
	margin:0px auto;
	margin-bottom:10px;
	width:700px;
}

.screenshot {
	position:relative;
	flex:1 1 0;
	border:2px solid #FFFFFF;
}

.screenshot:after {
	position:absolute;
	inset:0;
	content:"";
}

.screenshot:hover:after, .screenshot:focus:after {
	background:rgba(255, 255, 255, 0.15);
}

.screenshot:active:after {
	background:rgba(0, 0, 0, 0.15);
}

.screenshot img {
	display:block;
	border:2px solid #000000;
	width:100%;
}

#characters {
	position:absolute;
	bottom:125px;
	left:25px;
	pointer-events:none;
	user-select:none;
}

#sentry {
	position:absolute;
	right:25px;
	bottom:125px;
	pointer-events:none;
	user-select:none;
}

#characters img, #sentry img {
	display:block;
	filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.5));
}

#screenshots {
	display:flex;
	gap:10px;
	margin:0px auto;
	width:700px;
}

/* ======================== */
/* SECTION 3 - MAPS         */
/* ======================== */

.section3 {
	background-image:url("../images/classicvision/section3.jpg");
	height:360px;
}

#maps {
	top:10px;
}

#textMaps {
	position:absolute;
	top:60px;
	left:50px;
	width:900px;
}

#textList {
	position:absolute;
	top:135px;
	left:50px;
	width:900px;
}

/* ======================== */
/* SECTION 4 - MAPS CONT.   */
/* ======================== */

.section4 {
	background-image:url("../images/classicvision/section4.jpg");
	height:990px;
}