* {margin: 0; padding: 0; outline: none;}
html {height: 100%; font-size: 18px;}
html, body, div, #pano { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-style: normal; }
h1, h2, ul, span, #start, #mainstart { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-style: normal; }
li { font-family: 'Roboto Condensed', sans-serif; font-weight: 300; font-style: normal; }

body {background: #0a62b4 url(../img/baikonur_pad-1-1.jpg) 50% 50% no-repeat; background-size: cover;}

#start {padding: 2%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; cursor: pointer;}
#mainstart {padding: 2%; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
#start, #start * {box-sizing: border-box;}
#start *, #mainstart * {color: #fff;}

.header {width: 100%; text-align: center;}
.logo {margin: 0 auto 30px auto; width: 200px; height: 100px; background: url(../img/360russian-space_rus.svg) 50% 100% no-repeat;}
.logo.en {background: url(../img/360russian-space_eng.svg) 50% 100% no-repeat;}
#series {position: relative; font-size: 1vw; text-align: center;}
#series li {display: inline;}
#series li.current, #series li.current a {color: #00aeff;}
#series li:before {
	content: '\00a0\2022\00a0\00a0';
}
#series li:first-child:before {
	content: '';
}
#series li a {margin: 0 5px}

.title, .maintitle {text-align: center;}
h1 {padding: 20px; font-size: 4vw; letter-spacing: 0.04em}
.maintitle h1 {padding: 20px; font-size: 2vw; letter-spacing: 0.04em}
.title span {font-size: 2.5vw}

.tools {width: 100%; display: flex; justify-content: stretch;}
.tools_block { width: 50%; display: flex;}
.rtools {justify-content: flex-end;}

.tool {margin: 0 1vw; width: 4vw; height: 60px; background-size: cover; }
.t1 {background: url(../img/360desktop.svg) 50% 50% no-repeat; margin-right: 0;}
.t2 {background: url(../img/360mobile.svg) 50% 50% no-repeat;}
.t3 {background: url(../img/360vr.svg) 50% 50% no-repeat;}

.partner {margin: 0 0.5vw; width: 4vw; height: 60px; background-size: cover; cursor: pointer; }
.p1 {background: url(../img/partner_360pano.svg) 100% 30% no-repeat; width: 6vw; height: 70px;}
.p2 {background: url(../img/partner_cone-center.svg) 50% 50% no-repeat;}
.p3 {background: url(../img/partner_fkr.svg) 50% 50% no-repeat;}
.p4 {background: url(../img/partner_star-trek.svg) 50% 50% no-repeat;}
.p5 {width: 6vw; background: url(../img/partner_space-club.svg) 50% 50% no-repeat;}
.p6 {width: 3vw;background: url(../img/partner_alima.svg) 50% 50% no-repeat;}
.p7 {width: 2.5vw;background: url(../img/partner_ppk.svg) 50% 50% no-repeat;}
.p8 {width: 2vw;background: url(../img/partner_carbon-based-lifeforms.svg) 50% 50% no-repeat;}
.p9 {width: 2vw;background: url(../img/partner_astropilot.svg) 50% 50% no-repeat;}
.p10 {width: 2vw;background: url(../img/partner_stellardrone.svg) 50% 50% no-repeat;}
.p11 {width: 1vw;background: url(../img/partner_pushnoy.svg) 50% 50% no-repeat;}
.p12 {width: 3.5vw;background: url(../img/partner_rock-privet.svg) 50% 50% no-repeat;}
.p13 {width: 3.5vw;background: url(../img/partner_dreamstatelogic.svg) 50% 50% no-repeat;}

.menu {
 	width: 100%;
	margin: 40px 0;
 	max-width: 640px;
 	display: block;
 	font-size: 22px;
	list-style-type: none;
	text-align: left;
}

.menu li {
 	background-color: rgba(0,0,0,0.2);
}

.menu a, .menu span {
	display: inline-block;
    border-bottom: 1px solid #fff;
    width: 100%;
    box-sizing: border-box;
 	text-decoration: none;
 	color: #fff;
 	padding: 12px;
 	-webkit-transition: all 0.25s ease;
 	-o-transition: all 0.25s ease;
 	transition: all 0.25s ease;
 }
.menu a:hover {
 	background: #ff9924;
 	color: #000 !important;
}

@media screen and (min-width: 1600px){
  ul.menu {
	margin: 10vh 0;
 	max-width: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
	column-gap: 10vw;
  }
}

@-ms-viewport { width:device-width; }

@media screen and (max-width: 1050px){
  .logo {margin: 0 auto 10px auto; width: 140px; height: 70px;}
  #series {font-size: 2vw;}
  h1 {font-size: 6vw;}
  .title span {font-size: 3vw}
}
@media screen and (max-width: 769px){
  #start {padding: 0.2% 2%;}
  .logo {margin: 0 auto 10px auto; width: 100px; height: 50px;}
  #series {font-size: 2vw;}
  h1 {font-size: 5vw;}
  .maintitle h1 {font-size: 4vw;}
  .title span {font-size: 3vw}
  .tool, .partner {width: 5vw;}
  .p1 {}
  .p5 {width: 7vw;}
  .p6 {width: 4vw;}
  .p7 {width: 3.5vw;}
  .p8 {width: 3vw;}
  .p9 {width: 3vw;}
  .p10 {width: 3vw;}
  .p11 {width: 1.5vw;}
  .p12 {width: 4vw;}
  .p13 {width: 5vw;}
}
@media screen and (max-width: 415px){
  .logo {margin: 0 auto 10px auto; width: 140px; height: 70px;}
  #series {font-size: 5vw;}
  h1 {font-size: 10vw;}
  .maintitle h1 {font-size: 8vw;}
  .title span {font-size: 7vw}
  .tools {flex-direction: column; justify-content: center;}
  .tools_block {width: 100%; justify-content: center}
  .tool, .partner {margin: 0 2vw; width: 10vw;}
  .p1 {width: 14vw;}
  .p5 {width: 14vw;}
  .p6 {width: 8vw;}
  .p7 {width: 7.5vw;}
  .p8 {width: 7vw;}
  .p9 {width: 7vw;}
  .p10 {width: 7vw;}
  .p11 {width: 4vw;}
  .p12 {width: 8vw;}
  .p13 {width: 9vw;}
}