@charset "UTF-8";

body{
	margin:0;
	padding:0;
	border:0;
	text-align: center;
	color:white;
	font-family:Museo500-Regular;
	background-color:#01335D;
	font-size:16px;
	overflow: hidden;
}

@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;
}


.btn{ 
	transition: opacity 0.3s, transform 0.3s;
	cursor: pointer;
}
.btn:hover{ opacity: 0.5; }
.btn:active{ transform: scale(1.25); }

#title{ 
	font-size: 30px;
	margin-bottom:30px;
	padding: 20px 132px 0 132px;
}

#im-logo{
	padding-right:16px;
	position: absolute;
	top:0; right: 0;
}
#im-logo:before{ content: url('ui/logo.svg'); }

#header{ height:40px; }

#graph{  }
#graph svg{ width:100%; max-width:791px; height:auto; }



#play-state-btn{ display:inline-block; margin-top:20px; }
#play-state-btn[complete]:after{ content:url('ui/play-icon.svg'); }
#play-state-btn:after{
	margin-left:5px; 
	display:inline-block; 
	vertical-align: middle;
	content:url('ui/stop-icon.svg');
}

#sources-btn{
	display:block;
	padding-right:10px;
	position: absolute;
	bottom:0; right:0; 
	font-size: 12px;
	font-family:MuseoSans-700;
}
#sources-btn:after{
	margin-left:5px; 
	display:inline-block; 
	vertical-align: middle;
	content:url('ui/info-icon.svg');
}

#sources{
	position: absolute;	
	bottom: 40px;
	right: 15px;
	background: white;
	border-radius:15px;
	color:#01335D;
	font-size: 75%;
	padding:10px 20px;
	display: none;
}
#sources:after{ content:url("ui/studiov2_logo.svg"); display:inine-block; margin-left:5px; }



/************************************************************************************************************** SVG **************************************************************************************************************/

@keyframes sdtv2a0{
	from{ opacity:0; transform:translate(-100%, -100%); }
	to{ opacity:1; transform:none); }
}
@keyframes sdtv2a1{
	from{ opacity:0; transform:translatex(100%); }
	to{ opacity:1; transform:none; }
}
@keyframes sdtv2a2{
	from{ opacity:0; transform:translate(-100%, 100%); }
	to{ opacity:1; transform:none; }
}
@keyframes sdtv2a3{
	from{ opacity:0; transform:scale(0,0); }
	to{ opacity:1; transform:none; }
}
@keyframes sdtv2a4{
	from{ opacity:0; transform:translatey(100%); }
	to{ opacity:1; transform:none; }
}
@keyframes sdtv2a5{
	from{ opacity:0; transform:translatex(-100%); }
	to{ opacity:1; transform:none; }
}
@keyframes sdtv2zoom{
	from{ opacity:0; transform:scale(3); }
	to{ opacity:1; transform:none; }
}
@keyframes title{
	from{ opacity:0; transform:translatey(100%); }
	to{ opacity:1; transform:none; }
}
@keyframes header{
	from{ opacity:0; transform:translatey(-100%); }
	to{ opacity:1; transform:none; }
}

#sdtv2a3{ transform-origin: 392px 276px; } 
#sdtv2b0{ transform-origin: 198px 140px; } 
#sdtv2b1{ transform-origin: 362px 80px; } 
#sdtv2c0{ transform-origin: 480px 90px; } 
#sdtv2c1{ transform-origin: 496px 276px; } 
#sdtv2c2{ transform-origin: 614px 415px; } 
#sdtv2c3{ transform-origin: 480px 492px; } 

#sdtv2d0{ transform-origin: 348px 486px; } 
#sdtv2d1{ transform-origin: 178px 418px; } 
#sdtv2d2{ transform-origin: 278px 355px; } 
#sdtv2e0{ transform-origin: 392px 214px; } 
#sdtv2e1{ transform-origin: 392px 344px; } 
#sdtv2f0{ transform-origin: 288px 622px; } 
#sdtv2f1{ transform-origin: 364px 612px; } 
#sdtv2g0{ transform-origin: 158px 292px; } 

#title{ animation: title 0.8s; }
#header{ animation: header 0.8s; }
#play-state-btn{ animation: sdtv2zoom 0.8s; }
#sources-btn{ animation: title 0.8s; }
svg[running] #sdtv2a0{ animation: sdtv2a0 0.8s both; }
svg[running] #sdtv2a1{ animation: sdtv2a1 0.8s 0.3s both; }
svg[running] #sdtv2a2{ animation: sdtv2a2 0.8s 0.6s both; }
svg[running] #sdtv2a3{ animation: sdtv2a3 0.8s 0.9s both; }
svg[running] #sdtv2a4{ animation: sdtv2a4 0.8s 1.2s both; }
svg[running] #sdtv2a5{ animation: sdtv2a5 0.8s 1.5s both; }
svg[running] #sdtv2b0{ animation: sdtv2zoom 0.5s 2.0s both; }
svg[running] #sdtv2b1{ animation: sdtv2zoom 0.5s 2.2s both; }
svg[running] #sdtv2c0{ animation: sdtv2zoom 0.5s 2.8s both; }
svg[running] #sdtv2c1{ animation: sdtv2zoom 0.5s 3.0s both; }
svg[running] #sdtv2c2{ animation: sdtv2zoom 0.5s 3.2s both; }
svg[running] #sdtv2c3{ animation: sdtv2zoom 0.5s 3.4s both; }
svg[running] #sdtv2d0{ animation: sdtv2zoom 0.5s 4.0s both; }
svg[running] #sdtv2d1{ animation: sdtv2zoom 0.5s 4.2s both; }
svg[running] #sdtv2d2{ animation: sdtv2zoom 0.5s 4.4s both; }
svg[running] #sdtv2e0{ animation: sdtv2zoom 0.5s 5.0s both; }
svg[running] #sdtv2e1{ animation: sdtv2zoom 0.5s 5.2s both; }
svg[running] #sdtv2f0{ animation: sdtv2zoom 0.5s 5.8s both; }
svg[running] #sdtv2f1{ animation: sdtv2zoom 0.5s 6.0s both; }
svg[running] #sdtv2g0{ animation: sdtv2zoom 0.5s 6.6s both; }

@keyframes original{
	100%{ opacity:1; transform:none; }
}

#sdtv2a0, #sdtv2a1, #sdtv2a2, #sdtv2a3, #sdtv2a4, #sdtv2a5, 
#sdtv2b0, #sdtv2b1, #sdtv2c0, #sdtv2c1, #sdtv2c2, #sdtv2c3, #sdtv2d0, #sdtv2d1, #sdtv2d2, #sdtv2e0, #sdtv2e1, #sdtv2f0, #sdtv2f1, #sdtv2g0{ animation: original 0.1s; }


@keyframes rewind{
	from{ opacity:1; }
	to{ opacity:0; }
}

svg[rewind]{ animation: rewind 0.5s both; }

.node>*:nth-child(2){ transition: stroke-width 0.3s; }
.node:hover>*:nth-child(2){ stroke-width: 5px; }

.node, .item{ cursor: pointer; }
.node>*:first-child, .item *{ transition: fill 0.3s; }
#sdtv2a0:hover>*:first-child, .item_b:hover *{ fill:#cca15a; }
#sdtv2a1:hover>*:first-child, .item_c:hover *{ fill:#6a8d54; }
#sdtv2a2:hover>*:first-child, .item_d:hover *{ fill:#c8764f; }
#sdtv2a3:hover>*:first-child, .item_e:hover *{ fill:#3d799f; }
#sdtv2a4:hover>*:first-child, .item_f:hover *{ fill:#a75c5c; }
#sdtv2a5:hover>*:first-child, .item_g:hover *{ fill:#6f9093; }


popup>header.sdtv2a0{ color:#c3981c; }
popup>header.sdtv2a1{ color:#457f29; }
popup>header.sdtv2a2{ color:#c66123; }
popup>header.sdtv2a3{ color:#0d6598; }
popup>header.sdtv2a4{ color:#a8241d; }
popup>header.sdtv2a5{ color:#4b7d78; }


















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;
 }
 
 popup{
	background-color: white;
	width:80%;
	max-width:772px;
	height:664px;
	padding:16px 26px;
	border-top-left-radius: 24px; 
	border-top-right-radius: 24px; 
	position: absolute;
	bottom: -100%;
	left: 0;
	right: 0;
	margin: auto;
 	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.element>header{ height: 50px; }
   popup.item>header{ height: 72px; }
   popup.methodology>header{ height: 82px; }
   popup.element>scroll{ height: 614px; }
   popup.item>scroll{ height: 592px; }
   popup.methodology>scroll{ height: 582px; }
   
   
   popup>scroll item{
	  display: block;
	  text-align: justify;
  }
  
  popup>scroll item b{
	 font-family:Museo500-Regular;
	 font-weight:normal;
  }
  
  
   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); }
	scroll-bar ramp, scroll-bar track{ background-color:#2AACCD; }
	scroll-bar.vertical{ transform:translatex(16px); }