@charset "UTF-8";

body{
	margin:0;
	padding:0;
	border:0;
	text-align: center;
	color:white;
	font-family:Museo500-Regular;
}
	
.orange-font-color{ color:#FFB900; }
.cyan-bg-color{ background-color:#2AACCD; }
.light-cyan-bg-color{ background-color:#7DCCE0; }
.cyan-font-color{ color:#2AACCD; }
.dark-blue-bg-color{ background-color:#001435; }
.dark-blue-90-bg-color{ background-color:rgba(0, 20, 53, 0.9); }


 #prev-item-btn{ left: 30px; animation: nav-motion 6s 3s infinite; }
 #next-item-btn{ right: 30px; animation: nav-motion 6s 6s infinite; }
 #prev-item-btn:before{ content:url(ui/prev-icon.svg); }
 #next-item-btn:before{ content:url(ui/next-icon.svg); }
 #prev-item-btn:hover{ animation: nav-motion paused; }
 #next-item-btn:hover{ animation: nav-motion paused; }

#next-item-btn,  #prev-item-btn{
	 position: absolute;
	 margin:auto;
 }


#select-box{
	padding:4px 0;
	 font-family:Museo300-Regular;
	 z-index: 2;
	 cursor: pointer;
}

#select-box, #select-box-content{
	border-radius: 15px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
#select-box>.icon-arrow-down{ 
	float: right;
	 line-height:0.7;
 }
	
#map>svg{ width:100%; position: relative; }
	

#top{ height: 250px; }

#top>.content{
	position: absolute;
	width:100%;
	height:100%;
}
#top>.content>.title{
	text-align: left;
	margin:20px 147px 15px 72px;
	line-height: 1;
}
#top>.content>.header{
	text-align: left;
	margin:0 10% 0 72px;
}
#top>.content>.title{ font-size: 18px; }
#top>.content>.header{ font-size: 12px; }

#next-item-btn,  #prev-item-btn{ width:52px; height:52px;  }
#select-box{  font-size: 15px; }
#select-box, #select-box-content{ width:170px; margin-top:10px; }
#select-box>.icon-arrow-down{  font-size: 30px;  }

@media (min-width: 375px){
#top>.content>.title{ font-size: 22px; }
#top>.content>.header{ font-size: 15px; }
}
@media (min-width: 450px){

#next-item-btn,  #prev-item-btn{ width:52px; height:52px;  }
#select-box{  font-size: 20px; }
#select-box, #select-box-content{ width:260px; }
}
@media (min-width: 510px){
	#top>.content>.title{ font-size: 27px; }
	#top>.content>.header{ font-size: 16px; }
}
	
@media (min-width: 730px){
	#top{ height: 200px; }
}
 @media (min-width: 930px){	
	#top{ height: 170px; }
	#map>svg{ top:20px; }
}
#ui{
	position:absolute;
	left:0;
	right:0;
	z-index: 1;
}

#footer{ 
	padding:10px;
	text-align: right;
	font-size: 12px;
	font-family:MuseoSans-700;
	position: absolute;
	bottom:0; right: 0;
}

#sources{ display: inline-block; }
#sources-icon{
	margin-left:5px; 
	display:inline-block; 
	vertical-align: middle;
}
#sources-icon:before{ content:url('ui/info-icon.svg'); }

#top{ position: relative; }




 @keyframes nav-motion{
	 from{ transform:none; }
	 8%{ transform:scale(1.25); }
	 16%{ transform:none; }
	 to{ transform:none; }
 }
 


#select-box:hover>*{ opacity: 0.5; }
#select-box:active>#choose{ transform: scale(1.25); }
#select-box>#choose{  transition: opacity 0.3s, transform 0.3s; }
#select-box>.icon-arrow-down{  transition: opacity 0.3s, transform 0.5s; }
#select-box[active]>.icon-arrow-down{ transform: rotate(180deg); }



#select-box>#choose{ display: inline-block; }

#select-box-content{
	z-index: 1;
	transition: padding 1s, height 1s, opacity 1s;
}

#select-box-content[status=visible]{
	padding: 42px 0 10px;
	height: 285px;
	opacity: 1;
}

#select-box-content[status=hidden]{
	padding: 0x;
	height: 30px;
	opacity: 0;
}


#select-box-content>box{
	 font-family:Museo300-Regular;
	 font-size: 16px;
	 line-height:1.3;
	text-align: left;
	display:block;
	height: 100%;
	margin: 0 13px;
}
#select-box-content>box item{
	display:block;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, transform 0.3s;
	transform-origin: 0 50%;
}
#select-box-content>box item:hover{
	background-color:#2AACCD;
	color: #FFFFFF99;
}
#select-box-content>box item:active{ transform: scale(1.15); }




#menu-window{
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	width: 90%;
	max-width: 649px;
	text-align: left;
	color: white;
	font-size: 15px;
	left:-100%;
	opacity:0;
	transition: 1s;
	transition-property: opacity left;
	z-index: 2;
}
#menu-title{ 
	padding: 20px 35px 0 35px;
	font-size: 18px;
}
@media (min-width: 450px){
 	#menu-window{ font-size: 20px; }
	#menu-title{  padding-top: 50px; font-size: 22px; }
}

#menu-window[active]{
	left:0;
	opacity:1;
}

#highlights>g{ transition: opacity 0.3s; }
.btn{ 
	transition: opacity 0.3s, transform 0.3s;
	cursor: pointer;
}
#highlights>g:hover, .btn:hover{ opacity: 0.5; }

.btn:active{ transform: scale(1.25); }

#menu-open-btn{ padding:20px 0 0 16px; float:left; }
#menu-open-btn:before{ content:url('ui/menu-icon.svg'); }

#menu-close-btn{ margin: 22px 16px; }
#menu-close-btn:before{ content:url('ui/close-icon.svg'); }


#menu-header{
	padding: 3px 0 24px;
	margin: 0 35px 30px  35px;
	font-size: 25px;
	border-bottom: 1px solid white;
}
#menu-window>.menu-item{
	margin-bottom: 8px;
	padding: 15px 36px;
	transition: background-color 0.3s, opacity 0.3s;
	cursor: pointer;
}

#menu-window>.menu-item:hover{ background-color: #00427B; opacity:0.5; }

#menu-window>.menu-item[selected]{ 
	background-color: #00427B;
	pointer-events: none;
 }
 

 
 
 #intro-window{
	pointer-events: auto;
	position: absolute;
	width:90%;
	max-width:700px;
	top: 250px; left: 0; right: 0;
	margin:auto;
 }
 


  #intro{
	  font-family:Museo300-Regular;
	  font-size: 13px;
	  text-align: justify;
	  padding: 40px 48px 30px;
  }
   @media (min-width: 470px){
 	#intro{
	  font-size: 16px;
	}
   }
  #explore-btn{
	 text-align: center;
	 display: inline-block;
	 cursor: pointer;
 }
   #explore-btn>.icon{ width:44px; height:44px;  }
 
 #explore-btn>#explore{
	  font-family:Museo300-Regular;
	 font-size: 23px;
	 padding-top: 5px;
	 margin-bottom:40px;
 }
 
 .country-bubble{
	 position: absolute;
	 pointer-events: none;
	 transform: translate(-50%, -120%) scale(1);
	 background-color:rgba(0, 20, 53, 0.9);
	 font-size: 18px;
	 font-family:Museo500-Regular;
	 padding:3px 13px;
	 border-radius: 11px;
	 opacity: 1;
	 transition: transform 0.25s, opacity 0.25s;
 }
 
 .country-bubble[deactivate]{
	  transform: translate(-50%, -120%) scale(0.1);
	  opacity: 0;
 }
 
 popup-container{
	pointer-events: auto;
	position: fixed;
	 top: 0;
	 left: 0;
	 opacity: 0;
	 width:100%;
	 height:100%;
	 background:rgba(0, 20, 53, 0.6);
	transition: opacity 0.5s;
	 z-index:5;
 }
 
 popup{
	background-color: white;
	width: 80%;
	max-width:772px;
	height:568px;
	padding:16px 26px;
	border-top-left-radius: 24px; 
	border-top-right-radius: 24px; 
	position: absolute;
	bottom: -100%;
	left: 0;
	right: 0;
	margin: auto;
	 z-index:6;
 	text-align: left;
	transition: bottom 0.5s;
 }
 
  popup-container[active]{  opacity: 1; }
  popup-container[active] popup{ bottom:0;}
 
 
  popup>header{
	  display: block;
	  font-size: 31px;
	  color: #FFB900;
  }
   
  popup>header>subtitle{ 
  	font-size: 20px; 
	display:block;
  }
  
  
  popup>header>.close-btn{ float: right; width: 28px; height: 28px; }
  
  popup>scroll{
	  font-size: 16px;
	  font-family:Museo300-Regular;
	  display: block;
	  color: #01335D;
	  margin-right: 30px;
  }
  
   popup.leak>header{ height: 56px; }
   popup.methodology>header{ height: 82px; }
   popup.leak>scroll{ height: 512px; }
   popup.methodology>scroll{ height: 486px; }
   
   
   popup>scroll item{
	  display: block;
	  padding-top:42px;
	  border-bottom: 1px solid;
	  text-align: justify;
  }
  popup>scroll item:first-of-type{ padding-top:0; }
  popup>scroll item:last-of-type{ border-bottom-style:none; }
   popup>scroll item b{
	  font-family:Museo500-Regular;
	  font-weight:normal;
  }
   popup>scroll item>status{
	  display: block;
	  font-family:Museo500-Regular;
	  color: #FF5600;
  }
   popup>scroll item>text{
	  padding: 22px 0 27px;
	  display: block;
  }
  
  
  popup>scroll item>doc{
	  display: block;
	  padding-bottom: 26px;
  }
  popup>scroll item>doc>inner{ display: inline-block; }
  popup>scroll item>doc>inner>img{
	  border:1px solid;
	  height: 188px;
	  margin-right: 8px;
	  vertical-align: bottom;
	  transition: width 0.5s, height 0.5s, margin-left 0.5s;
	  cursor: pointer;
  }
  popup>scroll item>doc>inner>btn{
	  display: inline-block;
	  border-radius: 50%;
	  width: 24px;
	  height: 24px;
	  background-color: #2AACCD;
	  vertical-align: bottom;
	  color: white;
	  transition: opacity 0.3s;
	  font-size:40px;
	  text-indent: -4px;
  }
  popup>scroll item>doc>inner>btn:before{
	  line-height:0.6;
  }
  
  popup>scroll item>doc>inner:hover>btn{ opacity: 0.5; }
  
  popup>scroll item>text>LEAKS{
	  display: block;
	  padding-top: 27px;
	  padding-bottom: 27px;
	  font-size: 18px;
	  font-family:Museo500-Regular;
  }
   popup>scroll item>text>LEAKS>a{ 
   	display: block;
	transition: opacity 0.3s;
	cursor: pointer;
	color: #FFB900;
	text-decoration: none;
   }
   popup>scroll item>text>LEAKS>a:hover{ opacity: 0.5; }
   
   popup>scroll item>block{
	   margin-bottom: 21px;
	   display: block;
   }
    popup>scroll item>block>b.title{
	   margin-bottom: 7px;
	   display: block;
	   color: #FFB900;
   }
   popup>scroll item>block>.list{ margin-top: 8px; }
   popup>scroll item>block>.list>div{ margin-top: 5px; }
   popup>scroll item>block>.list>div:first-of-type{ margin-top: 0; }
   popup>scroll item>credits{
		font-size: 13px;
		margin: 50px 0;
	}
	popup>scroll item>credits logo{ display:inine-block; }
	popup>scroll item>credits logo:before{ content:url("ui/studiov2_logo.svg"); }
 

	scroll-bar track{ height:8px; width:8px; border-radius:50%; }
	scroll-bar.horizontal ramp{ height:2px; margin:3px 0; }
	scroll-bar.horizontal track{ transform:translatex(-3px); }
	scroll-bar.vertical ramp{ width:2px; margin:0 3px; }
	scroll-bar.vertical track{ transform:translatey(-3px); }

	#select-box-content scroll-bar ramp, #select-box-content scroll-bar track{ background-color:white; }
	popup scroll-bar ramp, popup scroll-bar track{ background-color:#2AACCD; }
	popup scroll-bar.vertical{ transform:translatex(16px); }

	main{ display: none; }
	main[active]{ display: block; }
	
@keyframes loading-rotate{
	from{ transform: rotate(0deg); }
	to{ transform: rotate(360deg); }
}
loading-element:before{ content:url("ui/loading.svg"); }
loading-element{
	display:inline-block;
	position: absolute;
	left: 0; right: 0;
	top: 40%;
	margin: auto;
	animation: loading-rotate 2s infinite linear;
}