body {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

}

h1{
  color:white;
  margin: 0;

}

.infographics-container {
 /* background-image: url("bg/bg.png");*/
/*  background-image: url("bg/bg.jpg");*/
  position: relative;
  /*background: rgb(16,73,167); *//*49deg*/
  background-color: white;
/*  background: -webkit-linear-gradient(49deg, rgba(16,73,167,1) 0%, rgba(115,188,236,1) 65%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(49deg, rgba(16,73,167,1) 0%, rgba(115,188,236,1) 65%, rgba(255,255,255,1) 100%);
  background: linear-gradient(139deg, rgba(16,73,167,1) 0%, rgba(115,188,236,1) 65%, rgba(255,255,255,1) 100%);*/
/*  background-attachment: fixed;
  background-repeat:no-repeat;
  background-size:cover;*/
  /*background-position:right bottom;*/
}

.infographics-title {
  /*height:75vh;*/
  text-align: center;
  /*vertical-align: 10em;*/
  position: relative;
  /*margin: auto 0;*/
  /*top: 100px;*/
}

.infographics-title-vertical {
  text-align: center;
  /*vertical-align: 10em;*/
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}

h1.opening {
  /*font-size: 3em;*/
  font-size: 3vw;
  width: 70%;
  margin: 0 auto;
  vertical-align: middle;
  color: #2a498e;
}

.opening-vertical {
  width: 80%;
  margin: 0 auto;
  padding: 50px 20px;
/*  padding-top: 50px;
  padding-bottom: 50px;*/
  font-size: 20px;
  background-color: white;

}

.text {
  float: left;
  width: 30%;
  line-height: 1.5;
  font-size: 1.2em;
  color: white;
/*  position: relative;  
  width: 30%;*/
}

.text-container {
  position: absolute;
  /*top: 75vh;*/
  bottom: 0;
  left: 0;
/*  height: 100vh;*/
  width: 30%;
  background: #2a498e/*rgb(0,61,119)*/;
  background: -moz-linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%);
  background: -webkit-linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%);
  background: linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#003d77",endColorstr="#005bae",GradientType=1);
  -webkit-box-shadow: 8px 0px 21px 7px rgba(0,0,0,0.16); 
  box-shadow: 8px 0px 21px 7px rgba(0,0,0,0.16);
  background-attachment: fixed;
}

.left {

}

.right {
  
}

.scene {
  clear: both;
}

.textblock {
  height:100vh;
  padding: 15vw 3vw 2vw;
  /*padding: 100px 50px 75px 50px;*/
}

.stage{
/*  position: relative;
  top: 0;
  bottom: 0;*/
/*  padding-top: 100px;*/
  height:100vh;
  width: 70%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
/*  background: #262626;*/
}

/*#izmirrocket:hover {
  visibility: hidden;
}*/


.questionbase, .panel, .panelbox, .play, .bubble, .video, .link {
  cursor: pointer;
}


@media (orientation: portrait) {
  .container-header, #scene1, #main-container, #scene0 {
    display: none
  }

  .infographics-title {
    height: 15vh;
  }

}

@media (orientation: landscape) {
  .infographics-title-vertical {
    display: none
  }
}

@media (max-width:991.98px) {

  .textblock {
    height:100vh;
    padding: 12vw 4vw 6vw;
    /*padding: 100px 50px 75px 50px;*/
  }

  .text {
    font-size: 1.7vw;
/*    line-height: 1.2;
    font-size: 0.9em;*/
  }

  .basetext text, .citytext text {
    transform: scale(1.3) translate(0, 0.8px);
  }

  .baserect path, .cityrect path {
    transform: scale(1.3) translate(0px, 0.5px);
  }

  #textdallas text, #textmiami text {
    transform: scale(1.3) translate(4px, 0px);
  }

  #rectdallas path, #rectmiami path {
    transform: scale(1.3) translate(4px, 0px);
  }

  #cuba_9panel path {
    transform: scale(1.5) translate(50px, 0px);
  }

  #cuba_9text text {
    transform: scale(1.5) translate(50px, -15px);
  }

  #reyk_12 path {
    transform: scale(1.3) translate(0px, 0px);
  }

  #reyk_12text text {
    transform: scale(1.3) translate(0px, -10px);
  }

  #rus_13panel path {
    transform: scale(1.3) translate(-25px, 0px);
  }

  #rus_13text text {
    transform: scale(1.3) translate(-25px, -10px);
  }

  #eng_13panel path {
    transform: scale(1.3) translate(25px, 0px);
  }

  #eng_13text text {
    transform: scale(1.3) translate(25px, -10px);
  }

  #trump path {
    transform: scale(1.3) translate(-10px, -10px);
  }

  #trumptext text {
    transform: scale(1.3) translate(-10px, -30px);
  }

  #putin path {
    transform: scale(1.3) translate(20px, -5px);
  }

  #putintext text {
    transform: scale(1.3) translate(20px, -15px);
  }

  #russia-20 path {
    transform: scale(1.3) translate(0px, 0px);
  }

  #rus_20text text {
    transform: scale(1.3) translate(0px, -15px);
  }

  #usa-20 path {
    transform: scale(1.3) translate(0px, 0px);
  }

  #eng_20text text {
    transform: scale(1.3) translate(0px, -15px);
  }

}

/*.scrollBar {
  position: fixed;
  top: 0;
  z-index: 10;
  height: 12px;
  background: #f5c246;
  width: 0%;
  opacity: 1.0;
  border-radius: 6px;
}*/

/* Style the header: fixed position (always stay at the top) */
.container-header {
  z-index: 10;
  width: 100%;
  background-color: #f1f1f1;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #1ba085;
  width: 0%;
}


/* Remove focus frame from tooltipped elements*/
#usa_map:focus {
  outline: none;
}


.mfp-iframe {
  background: white!important;
}

.mfp-figure{
 /* display: none;*/
 width: 400px;
}