@font-face {
	font-family: 'Proxima Nova';
	src: url('../fonts/ProximaNova-Bold.eot');
	src: url('../fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/ProximaNova-Bold.woff') format('woff'),
	url('../fonts/ProximaNova-Bold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Bliss Pro';
	src: url('../fonts/BlissPro-Heavy.eot');
	src: url('../fonts/BlissPro-Heavy.eot?#iefix') format('embedded-opentype'),
	url('../fonts/BlissPro-Heavy.woff') format('woff'),
	url('../fonts/BlissPro-Heavy.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	}
body, html {
	margin: 0;
	padding: 0;
	font-family: 'Proxima Nova';
	font-weight: 700;
	color: white;
	background: #161515;
	background-size: cover;
	overflow-x: hidden;
}
body {
	box-sizing: border-box; 
	text-align: center; 
	display: flex; 
	flex-direction: column;
	justify-content: space-between; 
	align-items: center; 
	min-height: 100vh;
}
ul {list-style: none; padding: 0; margin: 0;}

.bgTopper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: url('../images/bgTopper.png') no-repeat center;
	background-size: cover;
	z-index: 5;
	pointer-events: none;
}
.map, .pins {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	/* overflow: hidden; */
	z-index: 3;
}
.map img {height: 100%;}

.pins {width: 100%; z-index: 15;}
.pin {
	position: absolute;
	width: 88px;
	height: 108px;
	background-image: url('../images/pin.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	z-index: 15;
}
.pin:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/pin-active.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 15;
	opacity: 0;
	transition: opacity 0.2s;
}
.pin:hover:before {opacity: 1;}
.pin::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top 30px center;
	z-index: 16;
}
.pin-auto {left: 37%; bottom: 29%;}
.pin-auto::after {background-image: url('../images/iconAuto.png');}
.pin-police {left: 26%; bottom: 34%;}
.pin-police::after {background-image: url('../images/iconPolice.png'); background-position: top 25px center;}
.pin-movie {left: 37%; bottom: 44%;}
.pin-movie::after {background-image: url('../images/iconMovie.png'); background-position: top 25px center;}
.pin-mountain {left: 56%; bottom: 26%;}
.pin-mountain::after {background-image: url('../images/iconMountain.png'); background-position: top 25px center;}
.pin-army {left: 43%; bottom: 7%;}
.pin-army::after {background-image: url('../images/iconArmy.png'); background-position: top 25px center;}
.pin-opg {left: 47%; top: 9%;}
.pin-opg::after {background-image: url('../images/iconOpg.png'); background-position: top 25px center;}

.contentContainer {
	position: relative;
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: end;
	z-index: 10;
}
.content {
	width: 1170px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100vh;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: auto 90%;
}

.download-wrapper {
	width: 1200px;
	text-align: right;
}
.downloadContainer {
	position: relative;
	display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
	color: white;
	width: 460px;
	height: 520px;
	background: url('../images/download-container.png') no-repeat center;
	background-size: cover;
	box-sizing: border-box;
    padding-bottom: 44px;
	z-index: 20;
}
.downloadContainer h1 {font-size: 35px; letter-spacing: 1px; margin-top: 0; margin-bottom: 14px; font-weight: 600;}
.downloadContainer p {font-size: 14px; letter-spacing: 1.5px; margin-top: 0; margin-bottom: 30px; font-weight: 600;}

.playBtn {
	position: relative;
	display: inline-block;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 30px;
	letter-spacing: 1.5px;
	width: 260px;
	height: 70px;
	line-height: 70px;
	background: #e70909;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 0 20px rgba(0,0,0,0.7) inset, 0 0 13px rgba(0,0,0,0.5);
	transition: box-shadow 0.2s;
}
.playBtn:hover {box-shadow: 0 0 20px rgba(0,0,0,0.7) inset, 0 0 13px rgba(0,0,0,0.5), 0 0 20px #d91b17;}
.playBtn:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../images/btn-blic.png') no-repeat top center;
	opacity: 0;
	transition: opacity 0.2s;
}
.playBtn:hover:before {
	opacity: 1;
}
.playBtn:after {
	content: '';
	position: absolute;
	top: -9px;
	right: -12px;
	width: 67px;
	height: 103px;
	background: url('../images/btn-image.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    bottom: 0;
    z-index: 20;
    width: 1200px;
}
.footer-title {font-size: 18px;}
.footer-links li {display: inline-block; font-size: 18px; margin-left: 70px;}
.footer-links li a {
	position: relative; 
	color: rgba(255,255,255,0.2); 
	text-decoration: none; 
	font-weight: 600;
	transition: color 0.2s, text-shadow 0.2s;
	cursor: pointer;
}
.footer-links li a:hover {
	color: rgba(255,255,255,1); 
	text-shadow: 1px 1px 0 black, 2px 2px 0 #f42c2c, 0 0 20px rgba(255,255,255,0.8);
}

.modalContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.98);
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}
.modaled .modalContainer {display: flex;}
.modal {position: relative;}
.iconClose {
	display: inline-block;
	position: absolute;
	bottom: calc(100% + 100px);
	left: calc(100% + 30px);
	cursor: pointer;
}
.iconArrowLeft {
	display: inline-block;
	position: absolute;
	top: calc(50% - 45px);
	right: calc(100% + 30px);
	cursor: pointer;
}
.iconArrowRight {
	display: inline-block;
	position: absolute;
	top: calc(50% - 45px);
	left: calc(100% + 30px);
	cursor: pointer;
}
.modalContent {
	width: 930px;
	height: 350px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.modalInfo {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.modalSteps {margin-top: 30px;}
.modalStepCircle {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin: 0 5px;
	background: white;
	opacity: 0.04;
	cursor: pointer;
	transition: opacity 0.2s;
}
.modalStepCircle-active {opacity: 1;}

.steps {width: 100%; position: relative;}
.step {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.stepActive {opacity: 1;}

.stepPin {
	display: inline-block;
	position: absolute;
	top: -16px;
    left: -16px;
	width: 88px;
	height: 107px;
	background: url('../images/pin.png') no-repeat center;
	background-size: cover;
}
.stepPin::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top 25px center;
}
.step-0 .stepPin::before {background-image: url('../images/iconAuto.png'); background-position: top 30px center;}
.step-1 .stepPin::before {background-image: url('../images/iconPolice.png');}
.step-2 .stepPin::before {background-image: url('../images/iconMovie.png');}
.step-3 .stepPin::before {background-image: url('../images/iconMountain.png');}
.step-4 .stepPin::before {background-image: url('../images/iconArmy.png');}
.step-5 .stepPin::before {background-image: url('../images/iconOpg.png');}

.stepImage {
	width: 460px;
	height: 300px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(255,255,255,0.1); 
	margin-right: 30px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.step-0 .stepImage {background-image: url('../images/step-auto.jpg');}
.step-1 .stepImage {background-image: url('../images/step-police.jpg');}
.step-2 .stepImage {background-image: url('../images/step-movie.jpg');}
.step-3 .stepImage {background-image: url('../images/step-mountain.jpg');}
.step-4 .stepImage {background-image: url('../images/step-army.jpg');}
.step-5 .stepImage {background-image: url('../images/step-opg.jpg');}

.stepText {
	position: relative;
	width: 465px;
	text-align: left;
}
.stepText h3 {
	margin-left: 96px;
    margin-bottom: 65px;
    margin-top: -14px;
    font-size: 56px;
    font-family: 'Bliss Pro';
    font-weight: 900;
}
.stepText-desc {
	line-height: 22px;
	font-size: 15px;
	letter-spacing: 0.5px;
}