@charset "utf-8";
@import 'https://wf.cdn.gmru.net/static/general/fonts/Quantico/font.css';
@import 'https://wf.cdn.gmru.net/static/general/fonts/Plumb/font.css';
@import 'https://wf.cdn.gmru.net/static/wf.mail.ru/img/main/page/icons/social_icons/font.css';

html {
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  color: #40eeff;
  font: 18px/20px Plumb, Arial, Helvetica, sans-serif;
}
main {
  width: 1900px;
  height: 960px;
  padding: 45px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  cursor: default;
  box-sizing: border-box;
}
main * {
  box-sizing: border-box;
}
main:before,
main:after {
  content: '';
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  pointer-events: none;
  z-index: 3;
}
main:before {
  top:57px;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/border-top.png") no-repeat 50% 0;
}
main:after {
  bottom:9px;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/border-bottom.png") no-repeat 50% 100%;
}

h1 {
  font: bold 34px/36px Quantico, sans-serif;
  color:#fff;
  text-transform: uppercase;
  margin: 0 0 20px;
  text-align: center;
}
h2 {
  text-transform: uppercase;
  font: bold 28px/32px Quantico, sans-serif;
  color: #00d0f5;
  margin: 0 0 15px;
}
h3 {
  text-transform: uppercase;
  font: bold 18px/20px Quantico, sans-serif;
  margin: 0 0 7px;
  color: #00d0f5;
}
h4 {
  margin: 25px 0 10px;
  text-transform: uppercase;
}
a {
  color: #ff4400;
}
a:hover {
  text-decoration: none;
}
p {
  margin: 0 0 10px;
}
.button {
	text-transform: uppercase;
  display: inline-block;
  font: 20px/48px Quantico, Arial, Helvetica, sans-serif;
	height: 48px;
	max-width: 280px;
  width: 100%;
	text-align: center;
	background: #40eeff;
	color: #fff;
  text-decoration: none;
	margin: auto;
	cursor: pointer;
}
.button:hover {
	background: #fff;
	color: #000;
}

/*----------content-----------------*/
.flex {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}

body header {
  position: absolute;
  z-index: 9;
  min-width: 1900px;
}
body header .content {
  width: 1900px;
  margin: auto;
}

	.user_header .itm.js-download,
	.user_header .itm.js-reg,
	.user_header .itm.js-reg-init,
	.user_header .itm.js-reg-project-init {
		color: #f00;
	}

.back__wrap {
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  height: 960px;
  width: 100%;
  z-index: 2;
  max-width: 2200px;
  overflow: hidden;
  min-width: 1900px;
  margin: auto;
}
.panorama__wrap {
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
}
.panorama {
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  transition: all .3s linear;
  z-index: 1;
}
.panorama__move {
  position: absolute;
  top: 0;
  width: 40%;
  bottom:0;
  z-index: 2;
}
.panorama__move--left {
  left:0;
}
.panorama__move--right {
  right:0;
}
.video-wrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index: 1;
  overflow: hidden;
}
.video-screen {
  position: absolute;
  width: 100%;
  min-height: 100%;
  left:0;
  top:0;
  z-index: 1;
}

.scope2 {
  display: none;
  position: absolute;
  width: 995px;
  width: 763px;
  left:50%;
  margin-left: 350px;
  height: 600px;
  bottom:0;
  background: rgba(0,0,0,0)  url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/scope2.png") no-repeat 50% 50%;
  z-index: 2;
}

@media screen and (min-width: 2000px) {
  .back__wrap:before,
  .back__wrap:after {
    content: '';
    position: absolute;
    top:0;
    bottom:0;
    z-index: 3;
    pointer-events: none;
  }
  .back__wrap:before {
    left:0;
    right:50%;
    margin-right: 950px;
    background: linear-gradient(to right, #000, transparent);
  }
  .back__wrap:after {
    right:0;
    left:50%;
    margin-left: 950px;
    background: linear-gradient(to left, #000, transparent);
  }
}


.navigation {
  position: absolute;
  left:0;
  right:0;
  top:45px;
  text-align: center;
  z-index: 15;
}
.logo {
  position: relative;
  display: inline-block;
  height: 76px;
  width: 404px;
  background: #000 url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/logo.png") no-repeat 50% 0;
}
.logo:before,
.logo:after {
  content: '';
  position: absolute;
  top:0;
  width:0;
  height:0;
  border-width: 38px;
  border-style: solid;
}
.logo:before {
  right:100%;
  border-color: #000 #000 transparent transparent;
}
.logo:after {
  left:100%;
  border-color: #000 transparent transparent  #000;
}
.share-link {
  position: absolute;
  left:50%;
  top:30px;
  margin-left:302px;
  padding: 8px 35px 6px 0;
  font-size: 18px;
  cursor: pointer;
}
.share-link:after {
  content: '';
  position: absolute;
  right:0;
  top:2px;
  width: 25px;
  height: 32px;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/share-icon.png") no-repeat 0 0;
}
.share-link:hover {
  color:#fff;
}
.share-link:hover:after {
  background-position: 0 100%;
}
.nav-links {
  position: absolute;
  top:30px;
  right:50%;
  margin-right:302px;
}

.nav-links span {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  cursor: pointer;
}
.nav-links span.active {
  cursor: default;
}
.nav-links span:not(.active):hover {
  color:#fff;
}

@-webkit-keyframes bump {
   0% {background: #ff0000;}
   50% {background: #ff0000;}
   51% {background: transparent;}
   100% { background: transparent}
}
@keyframes bump {
   0% {background: #ff0000;}
   50% {background: #ff0000;}
   51% {background: transparent;}
   100% { background: transparent}
}
.nav-links span.active:before {
  content: '';
  position: absolute;
  left:12px;
  top:4px;
  width:13px;
  height: 13px;
  box-sizing: border-box;
  border: 1px solid #40eeff;
  border-radius: 100%;
  background: #ff0000;
  -webkit-animation: bump 2s ease infinite;
          animation: bump 2s ease infinite;
}
.button-play {
  position: absolute;
  bottom:16px;
  margin: auto;
  left:0;
  right:0;
  width: 393px;
  max-width: 393px;
  z-index: 11;
}
.scope {
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: rgba(0,0,0,0)  url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/scope.png") no-repeat 50% 50%;
  z-index: 3;
}
.info {
  position: absolute;
  width: 500px;
  top:77px;
  bottom:26px;
  -webkit-flex-direction: column;
          flex-direction: column;
  z-index: 11;
}
.info > * {
  position: relative;
  text-transform: uppercase;
}
.info > *:hover {
  color: #fff;
}
.info--right {
  right: 0;
  padding-right: 70px;
  align-items: flex-end;
}
.info--left {
  left: 0;
  padding-left: 70px;
}


@-webkit-keyframes rotate360 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes rotate360 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.map {
  width: 248px;
  height: 240px;
}
.map:before {
  content: '';
  position: absolute;
  z-index: 1024;
  left: 10.5820106%;
  right: 10.5820106%;
  top: 10.5820106%;
  bottom: 50%;
  will-change: transform;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background-image: linear-gradient(135deg, rgba(5, 162, 185, 0.8) 0%, rgba(0, 0, 0, 0.02) 70%, rgba(0, 0, 0, 0) 100%);
  -webkit-clip-path: polygon(100% 0, 100% 10%, 50% 100%, 0 100%, 0 0);
          clip-path: polygon(100% 0, 100% 10%, 50% 100%, 0 100%, 0 0);
  -webkit-animation: rotate360 6s infinite linear;
          animation: rotate360 6s infinite linear;
  pointer-events: none;
  z-index: 1;
}
.map:after {
  content: '';
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/map.png") no-repeat 0 0;
  pointer-events: none;
  z-index: 2;
}
.map:hover:after {
  background-position: 0 100%;
}
.sed {
  width: 251px;
  height: 356px;
  padding: 27px 0 0 155px;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/sed.png") no-repeat 0 0;
}
.sed:hover {
  background-position: 100% 0;
}
.sed-r {
  position: absolute;
  right: 30px;
  top:55px;
  pointer-events: none;
  font: 10px/27px Quantico, Arial, Helvetica, sans-serif;
}
.sed-r span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
  width: 27px;
  height: 27px;
  text-align: center;
}
.sed-r span:before {
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  background-image: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/sed1.png");
  background-repeat: no-repeat;
  -webkit-animation: rotate360 10s infinite linear;
    animation: rotate360 10s infinite linear;
}
.sed-r-1:before {
  background-position: 0 0;
}
.sed-r-2:before {
  background-position: -32px 0;
}
.sed-r-3:before {
  background-position: -64px 0;
}
.sed:hover .sed-r-1:before {
  background-position: 0 100%;
}
.sed:hover .sed-r-2:before {
  background-position: -32px 100%;
}
.sed:hover .sed-r-3:before {
  background-position: -64px 100%;
}
.achieve {
  width: 376px;
  text-align: right;
  padding: 0 0 75px;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/achieve.png") no-repeat 0 100%;
}
.achieve:hover {
  background-position: 100% 100%;
}
.enemy {
  width: 291px;
  text-align: right;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/enemy.png") no-repeat 0 22px;
}
.enemy:hover {
  background-position: 100% 22px;
}
.enemy__items {
  padding-top: 110px;
  text-align: center;
  font-size: 10px;
  line-height: 12px;
}
.enemy__items span {
  display: inline-block;
  width: 83px;
}

@-webkit-keyframes show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

@keyframes show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
.mech {
  width: 289px;
  height: 241px;
  padding: 31px 0 0 20px;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/mech.png") no-repeat 0 0;
}
.mech:hover {
  background-position: 100% 0;
}
.mech:after {
  content: '';
  position: absolute;
  right:25px;
  top:81px;
  width:87px;
  height: 87px;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/mech1.png") no-repeat 0 0;
  -webkit-animation: rotate360 10s infinite linear;
    animation: rotate360 10s infinite linear;
    pointer-events: none;
}
.mech:hover:after {
  background-position: 0 100%;
}
.laser {
  position: absolute;
  left:30px;
  top:88px;
  width: 82px;
  pointer-events: none;
}
.laser span {
  position: absolute;
  left:0;
  width: 100%;
  border-top:1px solid #40eeff;
  border-bottom:1px solid #40eeff;
  -webkit-animation: show 3s infinite linear;
    animation: show 3s infinite linear;
}
.laser span:nth-child(1) {
  top:0;
  height: 59px;
}
.laser span:nth-child(2) {
  top:12px;
  height: 35px;
  animation-delay: 3s;
}
.laser span:nth-child(3) {
  top:24px;
  height: 47px;
  animation-delay: 1s;
}
.mech:hover .laser span {
  border-color: #fff;
}
.weapon {
  width: 419px;
  height: 136px;
  text-align: right;
  padding: 22px 5px 0 0;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/weapon.png") no-repeat 0 0;
}
.weapon:hover {
  background-position: 100% 0;
}

.video-link {
  position: relative;
  width: 268px;
  height: 151px;
  border: 2px solid #40eeff;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/video-bg.jpg") no-repeat 100% 0;
}
.video-link:after {
  content:'';
  position: absolute;
  margin: auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:47px;
  height:47px;
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/play.png") no-repeat 0 0;
}
.video-link:hover {
  border-color: #fff;
}
.video-link:hover:after {
  background-position: 0 100%;
}
.js-ovl-open {
  cursor: pointer;
}
.ovl-content .addthis_toolbox {
  padding: 30px 0 0;
  display: none;
}
.ovl-content .addthis_toolbox a {
  text-decoration: none;
  color:#00d0f5;
  font-size: 70px;
  line-height: 70px;
  height: 70px;
  overflow: hidden;
  display: inline-block;
  margin: 0 25px;
  cursor: pointer;
}
.addthis_toolbox a:hover {
  color:#fff;
}
.addthis_toolbox a i {
  display: inline-block;
  height: 70px;
  overflow: hidden;
  pointer-events: none;
}
.share-text {
  padding: 30px 0 0;
}
.share-text span {
  text-decoration: underline;
  cursor: pointer;
}
.share-text span:hover {
  text-decoration: none;
}

/*------------------sliders-------------------*/
.slider-item {
  position: relative;
}
.ovl-mech .slider-item:after,
.slider--full .slider-item:after {
  content: '';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: rgba(0,0,0,.15);
  z-index: 1;
}
.ovl-mech .slider-item:after {
  background: rgba(0,0,0,.3);
}
.ovl-info {
  width: 660px;
  margin: auto;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 20px;
  z-index: 2;
}
.slider-item .ovl-info {
  position: absolute;
  left:0;
  right:0;
  top:55px;
}
.share-ovl.ovl-info {
  width: 830px;
  margin: 0 auto 50px;
}
.ovl-info__title {
  font-size: 36px;
  line-height: 38px;
  margin: 0 0 30px;
}
.ovl-info__text {
  text-align: left;
}
.slider-item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}
.ovl-content {
  padding: 50px 0;
}

.sed-ovl .ovl-info {
  left:530px;
  right: auto;
}
.slider--weapon {
  width: 780px;
  margin: auto;
}

/*------------------achievement-------------------*/

.achievement {
  width: 95%;
  margin: 0 auto;
  font-size: 0;
}
.achievement__item {
  display: none;
}
.achievement__item:first-of-type {
  display: block;
}
.achievement__current {
  position: relative;
  margin: 43px 0;
}
.achievement__current img {
  transition: opacity 0.6s linear;
  position: relative;
  z-index: 1;
  opacity: 1;
}
.achievement__current img.opacity {
  opacity: 0;
}
.achievement__current img:first-child {
  position: absolute;
  z-index: 2;
}
.achievement__current img:nth-child(3) {
  z-index: 0;
  margin-left: -50px;
}
.achievement__column {
  display: inline-block;
  vertical-align: top;
  width: 127px;
  position: relative;
  margin: 0 60px;
  text-align: center;
}
.achievement__column.stripes {
  width: 512px;
}
.achievement__column img {
  max-height: 128px;
}


/*------------------footer-------------------*/
body footer {
  background: #000;
  padding: 10px 0 20px;
  height: auto;
}
body footer > div {
  max-width: 800px;
  width: 100%;
}
body footer > div > div {
  display: block;
  text-align: center;
}
footer > div.logos > div > * {
  display: inline-block;
  vertical-align: middle;
}

/* header mobile */

@media screen and (max-width: 1220px) {
  body footer {
    min-width: 1px;
  }
  footer .copyright p {
    padding: 0 5%;
  }
  main {
    padding-top: 20px;
  }
}

/* ----------------------------------------------------------- */
/* Popup */
/* ----------------------------------------------------------- */

body.ovl-opened {
  overflow:hidden!important;
}
body.ovl-opened .layout {
  height: auto;
  min-height: 100vh;
  overflow-x:hidden;
  overflow-y:scroll;
}
body.ovl-opened header {
  overflow-x:hidden;
  overflow-y:scroll;
}
.ovl-fade {
  background: rgba(0, 0, 0, .2);
  height: 100%;
  left: 0;
  visibility: hidden;
  overflow-y:scroll;
  position: fixed;
  top: 0;
  transition: opacity .2s, visibility .2s;
  width: 100%;
  z-index: 111;
}
.ovl-opened .ovl-fade {
  opacity: 1;
  visibility: visible;
}
.middle {
  display: inline-block;
  height:100%;
  vertical-align: middle;
}
.ovl-wrap {
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  text-align: center;
  top: 0;
  white-space: nowrap;
  width: 100%;
  z-index: 112;
}
.ovl {
  box-sizing: border-box;
	width: 1306px;
  max-height: 806px;
  display: inline-block;
  vertical-align: middle;
  background: rgba(0,0,0,.6);
	position: relative;
	margin: auto;
	white-space: normal;
	text-align: center;
  border: 3px solid #40eeff;
}
.ovl-opened .ovl {
  opacity: 1;
  visibility: visible;
}



.ovl-align {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  color: #a9aeb3;
  background: #000;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
  padding: 70px 0;
}
.middle {
  display: inline-block;
  height:100%;
  vertical-align: middle;
}
.ovl-opened .ovl-align {
	opacity: 1;
	visibility: visible;
}
.ovl-close {
  background: url("https://wf.cdn.gmru.net/static/wf.mail.ru/promo/specopmars/images/close.png") no-repeat 0 0;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  height: 38px;
  width: 37px;
  z-index: 10;
}
.ovl-close:hover {
  background-position: 0 100%;
}
.ovl.video {
  width:auto;
}
.ovl-video {
  background: #000;
  width:1300px;
  height:700px;
}
.ovl.video .ovl-close {
  right: -50px;
  top:0;
}


.js-ovl-open > * {
  pointer-events: none;
}