@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: 1351px;
    background-image:url(../img/page3_01.jpg) ;
}
#maps {
    height: 1602px;
    background-image:url(../img/page3_02.jpg) ;
}
#map_collection {
    height: 1162px;
    background-image:url(../img/page3_03.jpg) ;
}
#warpaint_cases {
    height: 1166px;
    background-image:url(../img/page3_04.jpg) ;
}
#weapon_unusual {
    height: 1370px;
    background-image:url(../img/page3_05.jpg) ;
}
#weapons {
    height: 1620px;
    background-image:url(../img/page3_06.jpg) ;
}
#credits {
    height: 3960px;
    background-image:url(../img/page3_07.jpg) ;
}
#credits:before {
    height: 1250px;
    background-image:url(../img/page3_08.jpg) ;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    top: 1350px;
}
#credits:after {
    height: 1360px;
    background-image:url(../img/page3_09.jpg) ;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    top: 2600px;
}
#footer {
    height: 1568px;
    background-image:url(../img/page3_10.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: 100%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#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: 327px;
    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_barrel {
    left: 165px;
}

.map-screenshots {
    position: absolute;
    width: 1170px;
    height: 650px;
    overflow: hidden;
}
.map-screenshots:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 5px rgba(0,0,0,1);
    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: 550px;
    height: 240px;
    bottom: 30px;
    left: 50%;
    margin-left: -275px;
    overflow: hidden;
}
.map-screenshots a:hover img {
    transform: translateY(-240px);
}
.map-screenshots .map-credits {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -550px;
    pointer-events: none;
}

#maps .text,
#map_collection .text {
    color: #202020;
	font-size: 18px;
    text-shadow: 1px 1px 4px rgba(0,0,0,.65);
    margin-top: -5px;
}

#content_cargo {
    height: 798px;
}

#content_cargo .map-screenshots {
	top: 107px;
	left: -100px;
}

#content_alongside .map-screenshots {
	top: 107px;
	left: -100px;
}

#map_collection a {
	position: absolute;
	display: block;
	width: 1300px;
	height: 420px;
	overflow: hidden;
	top: 92px;
	left: -164px;
}
#map_collection a img {
	width: 1158px;
	height: 162px;
	opacity: 0;
	transition: opacity .2s ease;
	margin: 139px 0 0 71px;
}
#map_collection a:hover img {
    opacity: 1;
}

#warpaint_cases .text {
    width: 855px;
    left: 57px;
	font-size: 18px;
    margin-top: -80px;
}

#weapon_unusual iframe {
	position: absolute;
	top: 654px;
	left: -208px;
}

#weapon_unusual a {
	position: absolute;
	display: block;
	width: 1300px;
	height: 420px;
	overflow: hidden;
	top: 952px;
	left: -164px;
}
#weapon_unusual a img {
	width: 1169px;
	height: 154px;
	opacity: 0;
	transition: opacity .2s ease;
	margin: 138px 0 0 61px;
}
#weapon_unusual a:hover img {
    opacity: 1;
}

#weapons a {
	position: absolute;
	display: block;
	width: 1300px;
	height: 420px;
	overflow: hidden;
	top: 1122px;
	left: -164px;
}
#weapons a img {
	width: 1158px;
	height: 165px;
	opacity: 0;
	transition: opacity .2s ease;
	margin: 134px 0 0 71px;
}
#weapons a:hover img {
    opacity: 1;
}

.cosmetics-slideshow {
    position: absolute;
    width: 651px;
    height: 557px;
    overflow: hidden;
}

.cosmetics-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.cosmetics-slideshow .slide iframe {
    display: none;
}
.cosmetics-slideshow .slide.visible {
    opacity: 1;
    pointer-events: all;
}
.cosmetics-slideshow .slide.visible iframe {
    display: block;
}
.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: 46px;
    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: 84px;
    background-image: url(../img/arrow_left.png);
}
.cosmetics-slideshow > .arrow-right {
    right: 84px;
    background-image: url(../img/arrow_right.png);
}

#content_warpaints1,
#content_warpaints2 {
    height: 570px;
}

#content_warpaints1 .cosmetics-slideshow {
    top: 0;
    left: 402px;
}

#content_warpaints1 .arrow-left,
#content_warpaints1 .arrow-right {
    bottom: 68px;
}
#content_warpaints1 .arrow-left {
    left: 64px;
}

#content_warpaints2 .cosmetics-slideshow {
    top: 0;
    left: -74px;
}

#weapons .cosmetics-slideshow {
	width: 1053px;
    height: 600px;
	top: 0;
	left: -16px;
	top: 314px;
}
#weapons .cosmetics-slideshow p {
    top: 123px;
    left: 38px;
}
#weapons .cosmetics-slideshow .arrow-left,
#weapons .cosmetics-slideshow .arrow-right {
    bottom: 98px;
}
#weapons .cosmetics-slideshow .arrow-left {
    left: 510px;
}
#weapons iframe {
	position: absolute;
	top: 384px;
	left: 37px;
}

#credits .text {
	width: 415px;
	left: 118px;
	font-size: 18px;
	text-align: left;
	top: 183px;
}

#credits_banners {
    left: -75px;
    top: 635px;
    width: 1130px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    z-index: 1;
}

#credits_banners a {
    position: relative;
	display: inline-block;
	width: 354px;
	height: 110px;
	background-image: url(../img/credits_banner.png);
	background-repeat: no-repeat;
	padding: 20px 20px 20px 100px;
	box-sizing: border-box;
    border-radius: 28px;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}
#credits_banners img {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 64px;
    height: 64px;
    margin-top: -34px;
    border-radius: 10px;
    border: 2px solid #999;
}
#credits_banners a span {
	font-size: 20px;
	color: #e6e6e6;
	transition: color .2s ease;
	width: 100%;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
}
#credits_banners a p {
    font-size: 14px;
    line-height: 20px;
    color: #999;
    margin: 0;
}
#credits_banners a:hover {
    border-color: #51adc2;
}
#credits_banners a:hover span {
    color: #51adc2;
}

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