@charset "utf-8";

/* ------------------------------------------------------------------------- */

body {
    background-color: #000;
    min-width: 1440px;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #c2d1c4;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    font-size: inherit;
    font-weight: bold;
    transition: color 0.1s linear;
    color: #d9be93;
}

a:hover {
    color: #51adc2;
}

b {
    color: #d1e0d2;
}

div {
    position: relative;
    box-sizing: border-box;
    text-shadow: 2px 2px 4px #04090d;
}

img {
    display: block;
    border: 0;
}

/* ------------------------------------------------------------------------- */

.content {
    width: 970px;
    height: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.container {
    background-position: center top;
    background-repeat: no-repeat;
}
#intro {
    height: 1188px;
    background-image:url(../img/page1_01.jpg) ;
}
#trailer {
    height: 1295px;
    background-image:url(../img/page1_02.jpg) ;
}
#pressure {
    height: 1494px;
    background-image:url(../img/page1_03.jpg) ;
}
#aquarius {
    height: 910px;
    background-image:url(../img/page1_04.jpg) ;
}
#prop_pack {
    height: 1035px;
    background-image:url(../img/page1_05.jpg) ;
}
#taunt1 {
    height: 1130px;
    background-image:url(../img/page1_06.jpg) ;
}
#taunt2 {
    height: 1120px;
    background-image:url(../img/page1_07.jpg) ;
}
#footer {
    height: 1592px;
    background-image:url(../img/page1_08.jpg) ;
}


.img {
    display: block;
    position: absolute;
    background-position: center;
    opacity: 0;
    transition: opacity .2s;
}
.img:hover {
    opacity: 1;
}
#tf {
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    width: 335px;
    height: 102px;
    /*background-image: url(../img/team_fortress_2_logo.jpg);*/
}
#community_wrench {
    position: absolute;
    margin: 40px 0 0 469px;
    transform: scale(0.65) rotateZ(-5deg);
    pointer-events: none;
}
.text {
    width: 855px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

#intro .text {
    top: 1024px;
    left: 132px;
    width: 700px;
    font-size: 18px;
    text-align: center;
}
#intro .buttons {
    position: absolute;
    top: 697px;
    left: 255px;
    width: 460px;
    height: 142px;
}
#intro .buttons a {
    position: absolute;
    top: 0;
    display: block;
    width: 134px;
    height: 142px;
}
#intro .buttons a img {
    margin: -71px 0 0 -71px;
    opacity: 0;
    transition: opacity .1s ease;
    pointer-events: none;
}
#intro .buttons a:hover img {
    opacity: 1;
}
#intro .buttons > img {
    position: absolute;
    top: 0;
    margin: -71px 0 0 -71px;
    opacity: 1;
    transition: opacity .1s ease .1s;
    pointer-events: none;
}
#intro .buttons a:hover ~ img {
    opacity: 0;
}
#btn_page_barrel {
    left: 165px;
}
#btn_page_ship {
    left: 327px;
}

#trailer iframe {
    position: absolute;
    top: 70px;
    left: -117px;
}

#pressure .text {
	width: 800px;
	top: 550px;
	left: 85px;
	text-align: center;
	font-size: 18px;
}
#pressure .text + .text {
    width: 800px;
    top: 1423px;
    left: 85px;
    text-align: center;
}

#pressure .map-screenshots {
    top: 671px;
    left: -126px;
}

#aquarius .text {
	width: 100%;
	top: 785px;
	left: 0;
	text-align: center;
	font-size: 18px;
}

#aquarius .map-screenshots {
    top: 31px;
    left: -124px;
}

.map-screenshots {
    position: absolute;
    width: 1224px;
    height: 698px;
    overflow: hidden;
    border-radius: 20px;
}
.map-screenshots:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/screen_overlay.png);
    background-position: center center;
    pointer-events: none;
}
.map-screenshots > img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease;
}
.map-screenshots > img.visible {
    opacity: 1;
}
.map-screenshots > .arrow-left,
.map-screenshots > .arrow-right {
    position: absolute;
    top: 50%;
    margin-top: -52px;
    display: block;
    width: 104px;
    height: 104px;
    transition: transform .2s ease, opacity .2s ease;
    cursor: pointer;
    opacity: 0.5;
}
.map-screenshots > .arrow-left:hover,
.map-screenshots > .arrow-right:hover {
    transform: scale(1.1);
    opacity: 1;
}
.map-screenshots > .arrow-left {
    left: 5%;
    background-image: url(../img/arrow_left.png);
}
.map-screenshots > .arrow-right {
    right: 5%;
    background-image: url(../img/arrow_right.png);
}
.map-screenshots a {
    position: absolute;
    display: block;
    width: 670px;
    height: 200px;
    bottom: 30px;
    left: 50%;
    margin-left: -335px;
    overflow: hidden;
}
.map-screenshots a:hover img {
    transform: translateY(-200px);
}
.map-screenshots .map-credits {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -550px;
    pointer-events: none;
}


#prop_pack .text {
	width: 482px;
	top: 353px;
	left: 0;
	font-size: 20px;
	line-height: 1.4;
	color: #202020;
	text-shadow: none;
	font-weight: bold;
}
#prop_pack img {
    opacity: 0;
    transition: opacity .2s ease;
}
#prop_pack a {
    position: absolute;
    top: 681px;
    left: -62px;
    width: 540px;
    height: 197px;
}
#prop_pack a:hover img {
    opacity: 1;
}

#taunt1 .text {
	width: 410px;
	top: 705px;
	left: 570px;
	font-size: 18px;
}
#taunt1 a + img {
	position: absolute;
	top: 95px;
	left: -168px;
	width: 728px;
	height: 1092px;
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
    z-index: 1;
}
#taunt1 a {
	position: absolute;
	top: 375px;
	left: 99px;
	width: 413px;
	height: 664px;
}
#taunt1 a:hover + img {
    opacity: 1;
}
#taunt1 iframe {
    position: absolute;
    top: 808px;
    left: 563px;
}

#taunt2 .text {
    width: 318px;
    top: 344px;
    left: 28px;
    font-size: 18px;
}
#taunt2 a + img {
    position: absolute;
    top: -97px;
    left: 381px;
    width: 779px;
    height: 1096px;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
#taunt2 a {
    position: absolute;
    top: -16px;
    left: 446px;
    width: 694px;
    height: 986px;
}
#taunt2 a:hover + img {
    opacity: 1;
}
#taunt2 iframe {
    position: absolute;
    top: 440px;
    left: 26px;
}


#copyright {
    position: absolute;
    width: 96%;
    top: 22px;
    left: 156px;
    color: #4f504b;
}
#copyright a:not(:hover) {
    color: inherit;
}