/* ======= */
/* GENERAL */
/* ======= */

* {
	padding:0px;
	margin:0px;
}

body {
	color:#C9C9C9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background-position:top center;
	background-repeat:repeat-x;
	-webkit-text-size-adjust:none;
}

section[class*="day"][class*="section"] {
	box-sizing:border-box;
	position:relative;
	background-repeat:no-repeat;
	background-position:top center;
	margin:auto;
}

section[class*="day"][class*="section"] h1,section[class*="day"][class*="section"] h2 {
	display:none;
}

section[class*="day"][class*="section"] p {
	margin-bottom:1.2em;
	line-height:1.25em;
}

p {
	font-size:14px;
}

#logo {
	position:absolute;
	top:40px;
	width:150px;
	height:50px;
	background-image:url("../images/tf2c.png");
	background-position:top;
}

#logo:hover {
	background-position:bottom;
}

.day1 #logo {
	left:391px;
}

.day2 #logo {
	left:419px;
}

.day3 #logo {
	left:473px;
}

.day4 #logo {
	left:405px;
}

#footer {
	position:absolute;
	height:60px;
	width:800px;
	bottom:120px;
}

.day1 #footer {
	left:67px;
}

.day2 #footer {
	left:94px;
}

.day3 #footer {
	left:148px;
}

.day4 #footer {
	left:81px;
}

#copyrightValve {
	position:absolute;
	left:16px;
	top:15px;
	width:101px;
	height:30px;
	background-image:url("../images/copyright_valve.png");
	background-position:top;
}

#copyrightValve:hover {
	background-position:bottom;
}

#copyrightTF2C {
	position:absolute;
	left:127px;
	top:13px;
	width:100px;
	height:34px;
	background-image:url("../images/copyright_tf2c.png");
	background-position:top;
}

#copyrightTF2C:hover {
	background-position:bottom;
}

#copyright {
	position:absolute;
	width:547px;
	height:60px;
	display:flex;
	align-items:center;
	right:16px;
	font-size:11px;
	text-shadow:0px 0px 2px rgba(0,0,0,0.5);
	color:#A5A5A5;
}

#dayCounter {
	position:absolute;
}

#dayCounter a {
	text-decoration:none;
	display:inline-block;
	font-size:0px;
}

.dayCounterGlow {
	animation:dayCounterGlow 1s infinite ease-in-out alternate;
}

@keyframes dayCounterGlow {
	0% {
		filter:drop-shadow(0px 0px 5px rgba(237, 235, 227, 0.5)) drop-shadow(0px 0px 5px rgba(237, 235, 227, 0.5));
	}
	100% {
		filter:drop-shadow(0px 0px 5px rgba(237, 235, 227, 1)) drop-shadow(0px 0px 3px rgba(237, 235, 227, 0.75));
	}
}

.gallery {
	display:inline-grid;
	grid-template-columns:50% 50%;
	margin:-2px;
}

.gallery a {
	display:block;
	padding:2px;
}

.gallery a img {
	display:block;
}

#modal {
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background:rgba(0,0,0,0.5);
	backdrop-filter:blur(5px) grayscale(1);
	-webkit-backdrop-filter:blur(5px) grayscale(1);
	animation:modalFadeIn 0.5s cubic-bezier(0, 0.5, 0.1, 1);
	cursor:pointer;
	z-index:10;
}

@keyframes modalFadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

#modalImage {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	max-width:90vw;
	max-height:90vh;
	user-select:none;
	object-fit:contain;
	width:100%;
	height:100%;
	animation:modalImageZoom 0.5s cubic-bezier(0, 0.5, 0.1, 1);
}

@keyframes modalImageZoom {
	0% {
		transform:translate(-50%, -50%) scale(0.75);
	}
	100% {
		transform:translate(-50%, -50%) scale(1);
	}
}

.mapModal {
	width:120px;
	height:68px;
	border:1px solid #6D6D6D;
}

/* ===== */
/* DAY 1 */
/* ===== */

body.day1 {
	background-color:#bbaca5;
	background-image:url("../images/day1/day1_background.jpg");
}

body.day1 #dayCounter {
	top:398px;
	left:804px;
}

section.day1 {
	width:933px;
}

section.day1.section1 {
	background-image:url("../images/day1/day1_section1.jpg");
	height:805px;
}

section.day1.section2 {
	background-image:url("../images/day1/day1_section2.jpg");
	height:740px;
}

section.day1.section2 #vip-text {
	position:absolute;
	top:150px;
	left:102px;
	width:500px;
}

section.day1.section2 #red-plan {
	position:absolute;
	top:365px;
	left:40px;
	width:160px;
	height:200px;
	z-index:1;
}

section.day1.section2 #exhibit-a {
	position:absolute;
	top:530px;
	left:50px;
	width:148px;
	height:52px;
	z-index:4;
}

section.day1.section2 #exhibit-b {
	position:absolute;
	top:380px;
	left:190px;
	width:148px;
	height:100px;
	z-index:2;
}

section.day1.section2 #exhibit-c {
	position:absolute;
	top:480px;
	left:185px;
	width:140px;
	height:100px;
	z-index:3;
}

section.day1.section2 #civ-pic-2 {
	position:absolute;
	top:470px;
	left:325px;
	width:145px;
	height:105px;
	z-index:4;
}

section.day1.section2 #civ-pic-1 {
	position:absolute;
	top:390px;
	left:395px;
	width:148px;
	height:100px;
	z-index:3;
}

section.day1.section2 #civ-desc {
	position:absolute;
	top:490px;
	left:430px;
	width:148px;
	height:82px;
	z-index:5;
}

section.day1.section2 #blu-plan {
	position:absolute;
	top:375px;
	left:540px;
	width:155px;
	height:200px;
	z-index:1;
}

section.day1.section3 {
	background-image:url("../images/day1/day1_section3.jpg");
	height:629px;
}

section.day1.section3 #mineside-text {
	position:absolute;
	top:493px;
	left:367px;
	width:470px;
	text-align:right;
}

section.day1.section3 .gallery {
	position:absolute;
	top:421px;
	left:102px;
}

section.day1.section4 {
	background-image:url("../images/day1/day1_section4.jpg");
	height:566px;
}

section.day1.section4 #trainyard-text {
	position:absolute;
	top:432px;
	left:100px;
	width:470px;
}

section.day1.section4 .gallery {
	position:absolute;
	top:360px;
	right:102px;
}

section.day1.section5 {
	background-image:url("../images/day1/day1_section5.jpg");
	height:737px;
}

section.day1.section5 #harbor-text {
	position:absolute;
	top:432px;
	left:367px;
	width:470px;
	text-align:right;
}

section.day1.section5 .gallery {
	position:absolute;
	top:360px;
	left:102px;
}

/* ===== */
/* DAY 2 */
/* ===== */

body.day2 {
	background-color:#38383c;
	background-image:url("../images/day2/day2_background.jpg");
}

body.day2 #dayCounter {
	top:398px;
	left:832px;
}

section.day2 {
	width:988px;
}

section.day2.section1 {
	background-image:url("../images/day2/day2_section1.jpg");
	height:1211px;
}

section.day2.section1 #intro-text {
	position:absolute;
	top:1055px;
	left:155px;
	right:155px;
	text-align:center;
}

section.day2.section2 {
	background-image:url("../images/day2/day2_section2.png");
	height:1523px;
}

section.day2.section3 {
	background-image:url("../images/day2/day2_section3.png");
	height:1442px;
}

/* ===== */
/* DAY 3 */
/* ===== */

body.day3 {
	background-color:#2b2a25;
}

body.day3 #dayCounter {
	top:398px;
	left:885px;
}

section.day3 {
	width:1096px;
}

section.day3.section1 {
	background-image:url("../images/day3/day3_section1.jpg");
	height:837px;
}

section.day3.section2 {
	background-image:url("../images/day3/day3_section2.jpg");
	height:373px;
}

section.day3.section2 #domination-text {
	position:absolute;
	top:138px;
	left:423px;
	width:500px;
}

section.day3.section3 {
	background-image:url("../images/day3/day3_section3.jpg");
	height:577px;
}

section.day3.section3 #oil-canyon-text {
	position:absolute;
	top:460px;
	left:428px;
	width:490px;
	text-align:right;
}

section.day3.section3 .gallery {
	position:absolute;
	top:368px;
	left:175px;
}

section.day3.section4 {
	background-image:url("../images/day3/day3_section4.jpg");
	height:585px;
}

section.day3.section4 #four-team-text {
	position:absolute;
	top:450px;
	left:200px;
	width:692px;
	text-align:center;
}

section.day3.section5 {
	background-image:url("../images/day3/day3_section5.jpg");
	height:781px;
}

section.day3.section5 #hydro-text {
	position:absolute;
	top:644px;
	left:429px;
	width:490px;
	text-align:right;
}

section.day3.section5 .gallery {
	position:absolute;
	top:581px;
	left:178px;
}

section.day3.section6 {
	background-image:url("../images/day3/day3_section6.jpg");
	height:739px;
}

section.day3.section6 #flask-text {
	position:absolute;
	top:436px;
	left:180px;
	width:490px;
}

section.day3.section6 .gallery {
	position:absolute;
	top:368px;
	left:684px;
}

/* ===== */
/* DAY 4 */
/* ===== */

body.day4 {
	background-color:#8f8d81;
	background-image:url("../images/day4/day4_background.jpg");
}

body.day4 #dayCounter {
	top:398px;
	left:818px;
}

section.day4 {
	width:961px;
}

section.day4.section1 {
	background-image:url("../images/day4/day4_section1.jpg");
	height:795px;
}

section.day4.section2 {
	background-image:url("../images/day4/day4_section2.jpg");
	height:787px;
}

section.day4.section2 #badwater-text {
	position:absolute;
	top:655px;
	left:370px;
	width:490px;
	text-align:right;
}

section.day4.section2 .gallery {
	position:absolute;
	top:564px;
	left:115px;
}

section.day4.section3 {
	background-image:url("../images/day4/day4_section3.jpg");
	height:480px;
}

section.day4.section4 {
	background-image:url("../images/day4/day4_section4.jpg");
	height:880px;
}

section.day4.section4 #medals-text {
	position:absolute;
	top:130px;
	left:115px;
	width:360px;
}

section.day4.section5 {
	background-image:url("../images/day4/day4_section5.jpg");
	height:520px;
}

section.day4.section5 #bots-text {
	position:absolute;
	top:95px;
	left:115px;
	width:500px;
}

section.day4.section5 #bots-text .small {
	color:#808080;
	font-size:12px;
	margin-top:-4px;
}

section.day4.section6 {
	background-image:url("../images/day4/day4_section6.jpg");
	height:774px;
}

section.day4.section6 #achievements {
	position:absolute;
	top:102px;
	left:103px;
	right:103px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	text-shadow:0px 0px 2px rgba(0,0,0,1);
}

section.day4.section6 #achievements>* {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:64px;
	margin-bottom:10px;
	padding-left:72px;
	width:calc(50% - 98px);
}

section.day4.section6 #achievements>*:nth-child(odd) {
	margin-right:36px;
}

#textAchievements {
	position:absolute;
	bottom:18px;
	left:81px;
	width:800px;
	height:36px;
	display:flex;
	justify-content:center;
	align-items:center;
	text-shadow:0px 0px 2px rgba(0,0,0,1);
}

.hidden {
	opacity:0.5;
	font-style:italic;
}

#textAchievements a, #textAchievements a:visited {
	color:#DED9D4;
}

#textAchievements a:hover {
	color:#FFFFFF;
}

section.day4.section7 {
	background-image:url("../images/day4/day4_section7.jpg");
	height:783px;
}

section.day4.section7 a {
	position:absolute;
	top:450px;
	left:310px;
	right:310px;
	height:70px;
}

section.day4.section7 a:hover {
	background:rgba(232,234,228,0.15);
	backdrop-filter:saturate(3);
}

section.day4.section8 {
	background-image:url("../images/day4/day4_section8.jpg");
	background-repeat:repeat-y;
}

section.day4.section8 #changelog {
	padding:10px 120px;
}

section.day4.section8 #changelog h3 {
	margin-bottom:20px;
}

section.day4.section8 #changelog ul {
	margin-left:50px;
	margin-bottom:10px;
}

section.day4.section8 #changelog>ul {
	list-style:none;
	margin-left:0px;
}

section.day4.section8 #changelog li {
	margin:6px 0px;
}

section.day4.section9 {
	background-image:url("../images/day4/day4_section9.jpg");
	height:180px;
}