* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body { width: 100%; height: 450px; font-size: 14px; font-family: 'PT Sans', sans-serif; font-weight: 600; color: #48666F; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
.hidden { display: none !important; }
.container { position: relative; width: 100%; max-width: 660px; height: 100%; margin: 0 auto; }

/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ 
.camera { position: absolute; overflow: hidden; width: 100%; height: 100%; font-size: 150%; background: #d3e5ed; perspective: 110em; } 
.camera .face { box-shadow: inset 0 0 0 1px rgb(255, 255, 255); }
.camera .scene, .camera .shape, .camera .face, .camera .face-wrapper, .cr { position: absolute; transform-style: preserve-3d; } 
.camera .station { font-size: 30%; }
.camera .scene { top: 50%; left: 70%; width: 80em; height: 80em; margin: -40em 0 0 -40em; } 
.camera .shape { top: 50%; left: 50%; width: 0; height: 0; transform-origin: 50%; } 
.camera .face, .camera .face-wrapper { overflow: hidden; transform-origin: 0 0; backface-visibility: hidden; /* hidden by default, prevent blinking and other weird rendering glitchs */ } 
.camera .face { background-size: 100% 100% !important; background-position: center; } 
.camera .face-wrapper .face { left: 100%; width: 100%; height: 100% } 
.camera .photon-shader { position: absolute; top: 0; left: 0; width: 100%; height: 100% } 
.camera .side { left: 50%; }
.camera .cr, .camera .cr .side { height: 100%; }
.mobile .camera { font-size: 100%; }

.camera .scene-1 { top: 50%; left: 50%; -webkit-transform: rotateX(40deg) rotateY(-10deg) rotateZ(10deg); -moz-transform: rotateX(40deg) rotateY(-10deg) rotateZ(10deg); -ms-transform: rotateX(40deg) rotateY(-10deg) rotateZ(10deg); transform: rotateX(40deg) rotateY(-10deg) rotateZ(10deg); }
.camera .world-map { transform: translateY(7em) translateX(-3em); }
.camera #cn { fill: #ffebff; transition: .3s all ease; }
.camera.co-1 #cn { fill: #ffebff; transition: .3s all ease; }
.camera.co-2 #cn { fill: #ffebff; transition: .3s all ease; }
.camera.co-3 #cn { fill: #ffebff; transition: .3s all ease; }
.camera.co-4 #cn { fill: #ffebff; transition: .3s all ease; }
.camera.co-5 #cn { fill: #ffebff; transition: .3s all ease; }

.camera #corridor-1, .camera #corridor-2, .camera #corridor-3, .camera #corridor-4, .camera #corridor-5, .camera #corridor-6, .camera #corridor-7, .camera #sea-route { opacity: 0.2; }
#corridor-1-stations, #corridor-2-stations, #corridor-3-stations, #corridor-4-stations, #corridor-5-stations, #ports { opacity: .3; }
#corridor-1-stations rect, #corridor-2-stations rect, #corridor-3-stations rect, #corridor-3-stations polygon, #corridor-4-stations rect, #corridor-5-stations rect, #corridor-8-stations ellipse { opacity: .2; }
.camera.camera-cover #corridor-1 { animation: blink 2s infinite; }
.camera.camera-cover #kz, .camera.camera-cover #cn, .camera.camera-cover #ru path, .camera.camera-cover #pl, .camera.camera-cover #cz, .camera.camera-cover #by, .camera.camera-cover #de, .camera.camera-cover #nl { fill: #ffebff; transition: .3s all ease; }
.camera.co-1 #corridor-1 { animation: blink 2s infinite; }
.camera.co-1 #kz, .camera.co-1 #cn, .camera.co-2 #ru path, .camera.co-1 #ru path, .camera.co-1 #pl, .camera.co-1 #cz, .camera.co-1 #by, .camera.co-1 #de, .camera.co-1 #nl { fill: #ffebff; transition: .3s all ease;}
.camera.co-1 #corridor-1-stations { opacity: 1; }
.camera.co-1 #corridor-1-stations rect.active { animation: blink 2s infinite;  }
.camera.co-2 #corridor-2 { animation: blink 2s infinite; }
.camera.co-2 #cn, .camera.co-2 #ru path, .camera.co-2 #mn { fill: #f4f4f4; transition: .3s all ease; }
.camera.co-3 #corridor-3 { animation: blink 2s infinite; }
.camera.co-3 #cn, .camera.co-3 #kg, .camera.co-3 #tj, .camera.co-3 #uz, .camera.co-3 #tm, .camera.co-3 #ir, .camera.co-3 #tr { fill: #ebf8e0; transition: .3s all ease;}
.camera.co-3 #corridor-3-stations { opacity: 1; }
.camera.co-3 #corridor-3-stations rect.active, .camera.co-3 #corridor-3-stations polygon.active { animation: blink 2s infinite; }
.camera.co-4 #corridor-4 { animation: blink 2s infinite; }
.camera.co-4 #cn, .camera.co-4 #vn { fill: #ffebe9; transition: .3s all ease; }
.camera.co-4 #corridor-4-stations { opacity: 1; }
.camera.co-4 #corridor-4-stations rect.active { animation: blink 2s infinite; }
.camera.co-5 #corridor-5 { animation: blink 2s infinite; }
.camera.co-5 #cn, .camera.co-5 #pk { fill: #f7f2ff; transition: .3s all ease; }
.camera.co-5 #corridor-8-stations { opacity: 1 }
.camera.co-5 #corridor-8-stations ellipse { opacity: .3 }
.camera.co-5 #corridor-5-stations, .camera.co-5 #gwadar, .camera.co-5 #karachi { opacity: 1; }
.camera.co-5 #corridor-5-stations rect.active, .camera.co-5 #gwadar.active, .camera.co-5 #karachi.active { animation: blink 2s infinite; }
.camera.co-6 #corridor-5 { animation: blink 2s infinite; }
.camera.co-6 #cn, .camera.co-6 #pk { fill: #f7f2ff; transition: .3s all ease; }
.camera.co-6 #corridor-5-stations { opacity: 1; }
.camera.co-6 #corridor-5-stations rect.active { animation: blink 2s infinite; }
.camera.co-7 #corridor-7 { animation: blink 2s infinite; }
.camera.co-7 #cn, .camera.co-7 #in, .camera.co-7 #mm, .camera.co-7 #bd { fill: #f4f4f4;transition: .3s all ease; }
.camera.co-8 #corridor-8 { animation: blink 2s infinite; }
.camera.co-8 #cn, .camera.co-8 #vn, .camera.co-8 #id path, .camera.co-8 #my path, .camera.co-8 #in, .camera.co-8 #pk, .camera.co-8 #ke, .camera.co-8 #dj, .camera.co-8 #eg, .camera.co-8 #it, .camera.co-8 #gr, .camera.co-8 #lk { fill: #d9f3ff; transition: .3s all ease; }
.camera.co-8 #corridor-8-stations { opacity: 1; }
.camera.co-8 #corridor-8-stations ellipse.active { animation: blink 2s infinite; }
.camera.co-8 #sea-route {  animation: blink 2s infinite; }
.camera.moved { transition: all 3s ease; }
.camera.moved .scene-1 { left: 130% !important; -webkit-transform: rotateX(30deg) rotateY(3deg) rotateZ(5deg); -moz-transform: rotateX(30deg) rotateY(3deg) rotateZ(5deg); -ms-transform: rotateX(30deg) rotateY(3deg) rotateZ(5deg); transform: rotateX(30deg) rotateY(3deg) rotateZ(5deg); transition: all 3s ease; }

.window .title { position: absolute; top: 30px; left: 20px; width: calc(100% - 40px); font-size: 1.8em; line-height: 1.15; transition: all .5s ease; }
.window .title .title-small { margin-top: 12px; font-size: .7em; font-style: italic; line-height: 1.3; }
.window .title.title-top { top: 5px; font-size: .9em; text-align: center; color: #95A1A7; }
.window .title.title-top .title-small { display: none; }

.window .menu { display: table; position: absolute; top: 70%; left: 20px; width: calc(100% - 40px); height: 110px; background: rgba(178, 184, 187, .5); transition: all 1s ease; }
.window .menu .menu-header { position: absolute; bottom: 100%; padding-bottom: 3px; font-size: 1.1em; transition: all .5s ease; }
.window .menu .menu-title { display: table-cell; padding: 0 10px; font-size: 1.2em; text-align: center; vertical-align: middle; line-height: 1.2; cursor: pointer; z-index: 3; transition: all .5s ease; }
.window .menu .menu-title:hover { color: #4D8492; }
.window .menu .menu-controls .menu-button { position: absolute; font-size: 1.2em; text-align: center; cursor: pointer; z-index: 5; transition: all .5s ease; }
.window .menu .menu-controls .menu-button:hover { color: #698890; }
.window .menu .menu-controls.menu-controls-vertical .menu-button { left: calc(50% - 20px); width: 40px; line-height: 30px; }
.window .menu .menu-controls.menu-controls-vertical .menu-button.up-button { top: 0; }
.window .menu .menu-controls.menu-controls-vertical .menu-button.down-button { bottom: 0; }
.window .menu .menu-controls.menu-controls-horizontal .menu-button { top: calc(50% - 15px); width: 30px; line-height: 30px; opacity: 0; z-index: -1; }
.window .menu .menu-controls.menu-controls-horizontal .menu-button.left-button { left: 0; }
.window .menu .menu-controls.menu-controls-horizontal .menu-button.right-button { right: 0; }
.window .menu.menu-top { top: 15px; height: 80px; background: rgba(0, 0, 0, 0); }
.window .menu.menu-top .menu-header { opacity: 0; z-index: -1; }
.window .menu.menu-top .menu-title { padding: 0 30px; cursor: default; }
.window .menu.menu-top .menu-title:hover { color: #48666F; }
.window .menu.menu-top .menu-controls.menu-controls-vertical .menu-button { opacity: 0; z-index: -1; }
.window .menu.menu-top .menu-controls.menu-controls-horizontal .menu-button { opacity: 1; z-index: 5; }

.window .box { position: absolute; top: 95px; left: 20px; width: calc(100% - 40px); background: rgba(178, 184, 187, .5); overflow: hidden; opacity: 0; z-index: -1; transition: all .5s ease; min-height: 180px; }
.window .box.active { opacity: 1; z-index: 5; }
.window .box .box-details { position: absolute; top: calc(30px - 100%); left: 0; width: 100%; height: calc(100% - 30px); padding: 10px 3px 10px 10px; overflow: hidden; transition: all .5s ease; }
.window .box .box-details.active { top: 0; }
.window .box .box-details .box-description { font-size: 1.05em; font-family: 'PT Sans Narrow', sans-serif; }
.window .box .box-location { position: absolute; top: calc(100% - 30px); left: 0; width: 100%; height: 100%; transition: all .5s ease; }
.window .box .box-location.active { top: 0; }
.window .box .box-location .box-header { position: relative; width: 100%; height: 30px; background: rgba(255, 255, 255, .6); background: -moz-linear-gradient(left,  rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .6) 100%); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .6) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#99ffffff', GradientType=1=); background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .6) 100%); }
.window .box .box-location .box-header .box-header-button { position: absolute; top: 0; right: 10px; font-size: 1.1em; line-height: 30px; cursor: pointer; transition: all .5s ease; }
.window .box .box-location .box-header .box-header-button:hover { color: #698890; }
.window .box .box-location .box-header .box-header-button .fa { margin-left: 8px; }
.window .box .box-location .box-cities { width: 100%; height: calc(100% - 30px); padding: 0 3px 10px 5px; overflow: hidden; }
.window .box .box-location .box-cities .box-cities-content:after { content: ''; display: table; clear: both; }
.window .box .box-location .box-cities .box-city { display: inline-block; float: left; width: calc(50% - 10px); margin: 0 5px 3px 5px; cursor: pointer; transition: all .5s ease; }
.window .box .box-location .box-cities .box-city:hover { color: #698890; }
.window .box .box-location .box-cities .box-city.box-country { cursor: default; }
.window .box .box-location .box-cities .box-city.box-country:hover { color: #48666F; }
.window .box .box-location .box-cities .box-city .flag-icon { margin-right: 5px; }
.window .box .mCSB_scrollTools { background: rgba(0, 0, 0, 0); }
.window .box .mCSB_scrollTools .mCSB_draggerRail { background: #919596; }
.window .box .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #48666F; }
.window .box .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .window .box .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: #698890; }

@keyframes blink { 
 0% { opacity: 0.5 }
 50% { opacity: 1 }
 100% { opacity: 0.5 }
}

@media screen and (min-width: 360px) {
  .window .title { font-size: 2em; }
  .window .title .title-small { font-size: .65em; }
}
@media screen and (min-width: 440px) {
  .window .title { font-size: 2.5em; }
  .window .title .title-small { font-size: .6em; }
  .window .menu { left: calc(50% - 200px); width: 400px; }
  .window .menu.menu-top { left: 30px; width: calc(100% - 60px); height: 60px; }
  .window .box { top: 85px; left: calc(50% - 200px); width: 400px; }
}
@media screen and (min-width: 480px) {
  .window .title { left: 50px; width: calc(100% - 100px); }
  .window .title.title-top { font-size: 1em; }
}