@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: 1136px;
    background-image:url(../img/page2_01.jpg) ;
}
#blowout {
    height: 1290px;
    background-image:url(../img/page2_02.jpg) ;
}
#naphtha {
    height: 844px;
    background-image:url(../img/page2_03.jpg) ;
}
#contracker {
    height: 1850px;
    background-image:url(../img/page2_04.jpg) ;
}
#ticket {
    height: 1116px;
    background-image:url(../img/page2_05.jpg) ;
}
#case1 {
    height: 1080px;
    background-image:url(../img/page2_06.jpg) ;
}
#case2 {
    height: 1242px;
    background-image:url(../img/page2_07.jpg) ;
}
#collection {
    height: 1704px;
    background-image:url(../img/page2_08.jpg) ;
}
#footer {
    height: 1568px;
    background-image:url(../img/page2_09.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;
}
#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;
    left: 165px;
    margin: -71px 0 0 -71px;
    opacity: 1;
    transition: opacity .1s ease .1s;
    pointer-events: none;
}
#intro .buttons a:hover ~ img {
    opacity: 0;
}
#btn_page_shark {
    left: 0;
}
#btn_page_ship {
    left: 327px;
}

#blowout .text:first-child {
	width: 100%;
	top: 314px;
	left: 0;
	color: #202020;
	font-weight: bold;
	text-shadow: none;
	font-size: 18px;
}

#blowout .text:last-child {
	width: 100%;
	top: 1195px;
	left: 0;
	text-align: center;
	font-size: 17px;
}
#blowout .map-screenshots {
    top: 506px;
    left: -71px;
}

#naphtha .text {
    width: 800px;
    top: 753px;
    left: 85px;
    text-align: center;
    font-size: 17px;
}
#naphtha .map-screenshots {
    top: 53px;
    left: -71px;
}

.map-screenshots {
    position: absolute;
    width: 1128px;
    height: 695px;
    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/scaffolding_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;
}

#contracker .text {
	width: 500px;
	top: 1308px;
	left: 654px;
	font-size: 20px;
	line-height: 1.4;
}

#contracker a {
	position: absolute;
	display: block;
	width: 765px;
	height: 520px;
	overflow: hidden;
	top: 1268px;
	left: -214px;
}
#contracker a img {
	width: 802px;
	height: 520px;
	opacity: 0;
	transition: opacity .2s ease;
	margin: 26px 0 0 -41px;
}
#contracker a:hover img {
    opacity: 1;
}

#ticket .text {
	width: 500px;
	top: 153px;
	left: -149px;
	font-size: 20px;
	line-height: 1.4;
}

#ticket a {
	position: absolute;
	display: block;
	width: 762px;
	height: 504px;
	overflow: hidden;
	top: 123px;
	left: 442px;
}
#ticket a img {
	width: 762px;
	height: 504px;
	opacity: 0;
	transition: opacity .2s ease;
	margin: 3px 0 0 3px;
}
#ticket a:hover img {
    opacity: 1;
}

.cosmetics-slideshow {
    position: absolute;
    width: 1140px;
    height: 850px;
    overflow: hidden;
}

.cosmetics-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease;
}
.cosmetics-slideshow .slide.visible {
    opacity: 1;
}
.cosmetics-slideshow .slide p {
	position: absolute;
	top: 323px;
	width: 400px;
	font-size: 18px;
	line-height: 1.4;
	left: 58px;
}

.cosmetics-slideshow > .arrow-left,
.cosmetics-slideshow > .arrow-right {
    position: absolute;
    bottom: 75px;
    display: block;
    width: 104px;
    height: 104px;
    transition: transform .2s ease, opacity .2s ease;
    cursor: pointer;
    opacity: 0.5;
}
.cosmetics-slideshow > .arrow-left:hover,
.cosmetics-slideshow > .arrow-right:hover {
    transform: scale(1.1);
    opacity: 1;
}
.cosmetics-slideshow > .arrow-left {
    left: 18%;
    background-image: url(../img/arrow_left.png);
}
.cosmetics-slideshow > .arrow-right {
    left: 40%;
    background-image: url(../img/arrow_right.png);
}

#case1 .cosmetics-slideshow {
    top: 236px;
}

#case2 .cosmetics-slideshow {
    top: 158px;
}
#case2 .cosmetics-slideshow span {
    bottom: 20px;
}

#collection .text {
    width: 560px;
    top: 175px;
    left: 205px;
    text-align: center;
    font-size: 18px;
}

#collection a {
	position: absolute;
	display: block;
	width: 1300px;
	height: 420px;
	overflow: hidden;
	top: 1220px;
	left: -165px;
}
#collection a img {
	width: 1240px;
	height: 168px;
	opacity: 0;
	transition: opacity .2s ease;
	margin: 124px 0 0 26px;
}
#collection a:hover img {
    opacity: 1;
}


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