html, body, p, h1, h2, h3 {margin:0; padding:0;}

body {font-family: fonts, "Segoe UI", sans-serif; font-size: 16px;}

@font-face {
    font-family: 'fonts';
    src: url('/static/fonts/robotocondensed-regular.eot');
    src: url('/static/fonts/robotocondensed-regular.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/robotocondensed-regular.woff') format('woff'),
         url('/static/fonts/robotocondensed-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fonts2';
    src: url('/static/fonts/robotocondensed-light.eot');
    src: url('/static/fonts/robotocondensed-light.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/robotocondensed-light.woff') format('woff'),
         url('/static/fonts/robotocondensed-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


button.show {width: 40px; height: 40px; background: #ccc; color: #fff; font-size: 180%; position: fixed; z-index: 97; top: 20px; left: 20px;}

.header {overflow: hidden; box-sizing: border-box; background: #fff; position: fixed; z-index: 90; top: 0; left: 0; width: 100%; height: 80px;
  transition: transform 0.7s ease-out;
  transform:translateY(0px);
}
.header.hidden {
  transform:translateY(-80px);
}

.header .roscosmos {display: inline-block; float: left; padding: 0 20px; margin: 15px 0 10px 85px; border-left: 1px solid #e4e4e4; border-right: 1px solid #e4e4e4;}
.header .roscosmos img {width: 50px; height: 50px;}
.header .logo {height: 45px; margin: 15px 30px 15px 25px; float: left;}
.header .title { float: left; margin-top: 15px;}
.header h1, .header h2 {margin: 0; padding: 0; font-weight: normal;}
.header h1 {padding: 0px 0 0px 23px; color: #00489a; border-left: 3px solid #00489a; font-size: 34px; line-height: 32px; font-family: 'Ubuntu'; font-weight: 700;}
.header h2 {padding: 6px 0 2px 25px; color: #4dacff; border-left: 3px solid #4dacff; font-size: 14px; line-height: 15px; letter-spacing: 1.1px; text-transform: uppercase;}


button {outline: none; transition: all 0.2s linear; background: #00489a; color: #fff; border: none; border-radius: 0; cursor: pointer; padding: 0; margin: 0;}
button:hover, .active button:hover {background-color: #4dacff; color: #fff !important;}
.active button {background-color: #002f7e;}
button.active {color: #4dacff;}

a {color: #4dacff; text-decoration: none; outline: none;}

.projects-block {color: #fff; z-index: 98;
  top: 80px;
  position: fixed;
  height: calc(100% - 80px);
  width: 400px;
  background: rgba(0, 47, 126, 0.95);
  overflow_: hidden;
  transition: transform 0.7s ease-out;
  transform:translateX(-400px);
}
.projects-block.active {
  transform:translateX(0);
}
.projects-block.hidden {transform:translateX(-500px) !important;}
.projects-block .btn-list {height: 60px; line-height: 50px; width: 60px; position: absolute; top: 0; right: -60px; font-size: 130%; display: table-cell; vertical-align: middle; box-sizing: border-box;}
.active .btn-list {right: 0; background: none;}
.projects-block.hidden .btn-list {right: -60px !important; background: #00489a; color: #fff;}

.projects-block h5 {height: 30px; line-height: 30px; font-size: 120%; text-transform: uppercase; margin: 15px 20px 10px 20px;}

.projects-block .info-tab {
  display: none;
}
.projects-block .info-tab.active {
  display: block;
}
.projects-block .content {height: 90%; margin-right: 5px;
  overflow-y: auto;
}
.projects-block .content .info-tab {
  display: none;
}
.projects-block .content .info-tab.active {
  display: block;
}

.projects-block table {margin: 0 5px 0 20px; color: #fff;}
.projects-block tr.active td {color: #9ad0ff;}
.projects-block td {box-sizing: border-box; border-bottom: 1px solid #1b5bab; padding: 10px 0px 5px 0; font-family: fonts2;}
.projects-block td:hover {color: #9ad0ff; cursor: pointer;}



.project-info {color: #fff; position: relative; font-family: fonts2;
  display: block;
  position: fixed;
  z-index: 97;
  width: 450px;
  right: 0;
  top: 0;
  height: 100%;
  transition: transform 0.7s ease-out;
  transform:translateX(450px);
}
.project-info.active {
  transform:translateX(0);
}
.project-info.hidden {transform:translateX(550px) !important;}
.project-info .arr, .project-info .area, .project-info .photo {z-index: 91; height: 50px; width: 50px; position: absolute; top: 80px; left: -50px; font-size: 130%; box-sizing: border-box;}
.project-info .arr {margin-top: 0px;}
.project-info .area {margin-top: 60px;}
.project-info .photo {margin-top: 120px;}
.photo-play {transition: none !important; position: absolute; left: -75px; top: 228px; background: url("/static/images/play.png") 0 0 no-repeat; background-size: cover; display: block; width: 21px; height: 21px; border-radius: 11px;}
.photo-play.active {background-position: 0 100%; background-color: transparent !important;}
.photo-play, .photo-play.active, .active .photo-play, .active .photo-play:hover, .photo-play:hover {background-color: none !important;}

.project-info .tab-content {background: #00489a; scroll-behavior: smooth; margin-top: 80px; padding: 0 5px 0 20px; overflow-y: auto; height: calc(100% - 80px);}
.project-info .tab-content a {color: #4dacff; display: inline-block; background: url("/static/images/ic_web.png") 0 50% no-repeat; line-height: 20px; padding-left: 25px; margin: 0 0 5px 0;}
.project-info .tab-content a:after {display: block; height: 1px;}
.project-info .tab-content a.linkfoto {display: inline-block;  color: #fff; text-shadow: 1px 1px 3px #000; background: rgba(0,0,0,0.3); position: relative; top: -25px; left: 5px; padding: 3px 5px;}

.project-info .tab-content h3 {font-weight: normal; font-size: 170%; margin: 10px 0 5px 0;}
.project-info .tab-content h4 {font-weight: normal; font-size: 150%; margin: 10px 0 0 0; color: #9ad0ff;}
.project-info .tab-content h4:after {content: ""; display: block; border-bottom: 1px solid #4dacff; width: 100%; height: 1px; margin-bottom: 15px;}
.project-info #history:before {color: #9ad0ff; border-bottom: 1px solid #4dacff; font-size: 140%; line-height: 140%; text-transform: uppercase; width: 100%; display: block; margin: 5px 0 10px 0;}
.project-info .content {
  position: absolute;
  z-index: 91;
  top: 0;
  height: 100%;
  width: 100%;
}
.project-info p {
  padding: 0 0 10px 0; line-height: 130%;
  color: #fff;
}


.project-info .tab-content img {
  width: 100%;
}
.project-info hr {
  border: none;
  align: center;
  background-color: #4dacff;
  color: #4dacff;
  height: 2px;
}
.languages {
    padding: 20px;
    text-align: right;
}

.project-info .nav {background: #4dacff; position: absolute; z-index: 98; top: 45px; left: 0; height: 35px; margin: 0; padding: 0; list-style: none; width: 100%;}
.nav-tabs li {display: inline-block; margin: 0px 1px 0 0; font-size: 90%; text-transform: uppercase; float: left;}
.nav-tabs > li a {display: inline-block; background: #002f7e; transition: all 0.2s linear; line-height: 35px; padding: 0px 23px; letter-spacing: 1px;}
.nav-tabs > li a:hover, .nav-tabs > li a:focus {color: #fff;}
.nav-tabs > li a:hover {background: #4dacff;}

.leaflet-popup-content {margin: 0 !important;}
.leaflet-popup-content-wrapper {border-radius: 0px !important; padding: 0px !important;}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {color: #fff; background: #00489a; font-family: fonts !important; font-size: 130% !important;}
.leaflet-container a.leaflet-popup-close-button {font-size: 130% !important; transition: all 0.2s linear;}

.leaflet-popup-content p {display: block; padding: 10px 25px 10px 20px; margin: 0 !important;}
.leaflet-popup-content a {padding: 5px 20px 15px 20px;}
.leaflet-popup-content a, .leaflet-popup-close-button {display: block; color: #4dacff !important; font-size: 80% !important; text-transform: uppercase;}
.leaflet-popup-content a:hover {color: #fff !important;}
.leaflet-popup-close-button:hover {color: #fff !important; background: #4dacff;}
.leaflet-popup-content img {width: 300px; display: block;}
.leaflet-bar a {
  background: #5eb6de;
  color: #fff;
}
.leaflet-bar a:hover {
  background: #3c94bc;
  color: #fff;
}
#map {
  position: fixed; z-index: 0;
  width: 100%;
  height: 100%;
}

.invisible {
    opacity: 0;
}

::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:6px;
height:0px
}

::-webkit-scrollbar-track {
background: none;
box-shadow_: 0px 0px 5px #000 inset;
border-radius_: 5px;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#4dacff;
box-shadow:0px 1px 1px #fff inset;
background-image:url('/static/images/scroll.png');
background-position:center;
background-repeat:no-repeat;
}

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}

::-webkit-scrollbar{
width: 11px;
}


.dates-block {font-family: fonts; position: absolute; z-index: 90; width: 100px; right: 450px; top: 255px; text-align: right;
 transition: transform 0.3s ease-out;
 transform:translateX(100px);
}
.dates-block.active {
  transform:translateX(0px);
}
.dates-block button {font-size: 100%; font-family: inherit; display: inline-block; margin: 0 0 5px 5px; background: #fff; padding: 3px 5px; border-right: 2px solid #00489a; color: #002f7e;}
.dates-block button:hover {color: #fff !important; background: #00489a !important;}
.dates-block button.active {background: #4dacff; color: #fff;}




/* SCREEN
-----------------------------------------------------------------*/

@media screen and (max-width: 1366px) {
.header h1, .header h2 {font-weight: normal !important;}
.projects-block {width: 300px; transform: translateX(-300px); font-size: 85% !important;}
.project-info {width: 350px; transform: translateX(350px); font-size: 85% !important;}
.dates-block {right: 350px;}
}

@media all and (max-width: 768px) {
.header .title { margin-top: 13px;}
.header h1 {font-size: 22px; line-height: 20px; padding-top: 2px;}
.header h2 {font-size: 10px; line-height: 12px; letter-spacing: 0; padding-top: 3px; padding-bottom: 0;}
.header {height: 55px;}
.header .roscosmos {margin-left: 0px; border-left: none !important;}
.header .roscosmos img {width: 30px; height: 30px;}
.header .logo {width: 107px; height: 30px; margin: 15px 30px 15px 25px; float: left;}

.project-info .arr, .project-info .area, .project-info .photo {top: 55px;}
.dates-block button {font-size: 90%; margin: 0 0 2px 5px; padding: 2px 3px;}
.dates-block {right: 220px; top: 220px;}
.project-info .photo-play {top: 193px;}
.project-info .area {margin-top: 55px;}
.project-info .photo {margin-top: 110px;}
.projects-block {width: 250px; transform: translateX(-250px); top: 55px; height: calc(100% - 55px);}
.projects-block .btn-list {height: 50px; line-height: 45px; width: 50px; right: -50px;}
.projects-block .btn-list.active {right: 0;}
.projects-block table {margin: 0 5px 0 10px;}
.projects-block h5 {margin-left: 10px;}
.project-info {width: 220px; transform: translateX(220px);}
.project-info .tab-content {padding: 0 5px 0 10px; font-size: 90%; margin-top: 55px; height: calc(100% - 55px);}
.project-info .tab-content h3 {font-size: 150%;}
.project-info .tab-content h4 {font-size: 140%;}
.project-info .nav {top: 20px;}
.nav-tabs > li a {padding: 0px 10px; letter-spacing: 0px;}
.leaflet-popup-content p {line-height: 100%; font-size: 85%; padding: 10px 15px;}
.leaflet-popup-content a {font-size: 80%; padding: 10px 20px 10px 15px;}
.leaflet-popup-content, .leaflet-popup-content img {width: 200px;}
button.show {display: none;}
}

@media all and (max-width: 400px) {
.header .title { margin-top: 13px;}
.header h1 {padding-left: 7px;}
.header h2 {padding-left: 7px;}
.header .roscosmos {padding: 0 5px;}
.header .logo {margin: 15px 8px 15px 8px;}
}

@media screen and (orientation:landscape) and (max-device-width: 720px) {
.dates-block {right: 300px; top: 5px; transform:translateX(200px);}
}

#copyrights {
  opacity: .7;
  height: 80px;
  width: 100vw;
  position: fixed;
  bottom: -80px;
  z-index: 5;
  font-size: medium;
}

#copyrights .image_operator {
  height: 20px;
  width: 100px;
  color: #fff;
  position: relative;
  text-align: center;
  text-shadow: 1px 1px 4px black, 0 0 2em #071422;
  top: -30px;
  left: 40%;

}