/* GENERAL */
@font-face {
	font-family:'Caslon';
	src:url(../fonts/Caslon.woff2) format('woff2');
}

@font-face {
	font-family:'Windlass';
	src:url(../fonts/Windlass.woff2) format('woff2');
}

body {
	margin:0px;
	margin-top:24px;
	padding:0px;
	background:url("https://www.octosharkstudios.com/pvkii/images/layout/mainbg.jpg");
	background-color:#00768C;
	background-position:center top;
	background-repeat:repeat-x;
	background-attachment:fixed;
	font-family:"Caslon";
	font-size:26px;
	line-height:1.25em;
	color:#210000;
	text-shadow:1px 1px 2px rgba(0,0,0,0.25);
}

h2, h3, ul {
	margin:0px;
}

h2, h3 {
	font-family:"Windlass";
}

h2 {
	font-size:26px;
	margin-bottom:10px;
}

h3, li {
	font-size:22px
}

#content {
	width:960px;
	margin:0 auto;
}

.section {
	position:relative;
}

.section>* {
	position:absolute;
}

/* HEADER */
#header {
	background:url("https://www.octosharkstudios.com/pvkii/images/layout/header.png");
	height:136px;
}

/* SECTION 0 */
#section0 {
	background:url("../images/section0.jpg");
	height:620px;
}

#trailer {
	border:2px solid #7F7059;
	background:#7F7059;
	top:68px;
	left:48px;
}

/* SECTION 1 */
#section1 {
	background:url("../images/section1.jpg");
	height:650px;
}

#section1 .textIntro {
	width:600px;
	top:220px;
	left:50px;
}

#section1 .textWeapons {
	width:100px;
	top:375px;
	left:50px;
}

#section1 .weapon {
	font-family:"Windlass";
	font-size:22px;
	width:200px;
	top:410px;
}

#section1 .textSledge {
	left:50px;
}

#section1 .textHatchet {
	left:270px;
}

#section1 .textHook {
	left:420px;
}

/* SECTION 2 */
#section2 {
	background:url("../images/section2.jpg");
	height:825px;
}

#section2 .textChanges {
	font-size:30px;
	text-align:right;
	width:600px;
	top:240px;
	right:50px;
}

#section2 .textChanges h2 {
	font-size:40px;
}

#section2 .textNotes1 {
	width:400px;
	top:240px;
	left:50px;
}

#section2 .textNotes2 {
	z-index:1; /* hack */
	width:380px;
	top:620px;
	left:50px;
}

/* SECTION 3 */
#section3 {
	background:url("../images/section3.jpg");
	height:900px;
}

#tutorial {
	border:2px solid #7F7059;
	background:#7F7059;
	top:22px;
	right:14px;
}

#section3 .textTutorial {
	text-align:center;
	width:516px;
	top:330px;
	right:14px;
}

/* SECTION 4 */
#section4 {
	background:url("../images/section4.jpg");
	height:1000px;
}

#section4 .textGamemodes {
	font-family:"Windlass";
	font-size:50px;
	text-align:center;
	width:760px;
	top:180px;
	left:100px;
}

#section4 .textCompetitive {
	text-align:center;
	width:370px;
	top:250px;
	left:100px;
}

#section4 .textCompetitiveDesc {
	text-align:center;
	width:370px;
	top:300px;
	left:100px;
}

#section4 .textDuel {
	text-align:center;
	width:370px;
	top:250px;
	right:100px;
}

#section4 .textDuelDesc {
	text-align:center;
	width:370px;
	top:300px;
	right:100px;
}

/* SECTION 5 */
#section5 {
	background:url("../images/section5.jpg");
	height:513px;
}

#section5 .textPlay, #section5 .textFray {
	font-family:"Windlass";
	font-size:65px;
	line-height:1.1em;
	text-align:center;
	color:#FFFAF0;
	text-shadow:0px 5px 3px rgba(0,0,0,0.5);
	width:350px;
	top:180px;
}

#section5 .textPlay {
	left:25px;
}

#section5 .textFray {
	right:25px;
}

#section5 .link {
	bottom:25px;
}

#section5 .link a {
	font-size:40px;
	color:#FFFAF0;
	text-decoration:none;
}

#section5 .link a:hover {
	color:#BFB7A8;
	text-decoration:underline;
}

#section5 .link img {
	height:70px;
	vertical-align:text-bottom;
}

#section5 .link a:hover img {
	filter:brightness(0) saturate(100%) invert(88%) sepia(10%) saturate(350%) hue-rotate(1deg) brightness(85%) contrast(84%);
}

#section5 .textDiscord {
	left:30px;
}

#section5 .textSteam {
	text-align:center;
	width:300px;
	left:330px;
}

#section5 .textSteam img {
	height:40px;
	margin-right:10px;
}

#section5 .textOctoshark {
	right:30px;
}

/* FOOTER */
#footer {
	background:url("https://www.octosharkstudios.com/pvkii/images/layout/footer.png");
	height:46px;
}