@charset "UTF-8";

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

@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;
}
loading-element[disabled]{ display: none; }

.btn:active{ transform: scale(1.25); }
.btn:hover{ opacity: 0.5; }
.btn{ 
	transition: opacity 0.3s, transform 0.3s;
	cursor: pointer;
}
	
.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); }


#ui{ opacity: 0; transition: opacity 0.5s; }
#ui[status="2"]{ opacity:1; }
#ui[status="1"]{ opacity:0.5; pointer-events:none; }

.intro-window{
	background-color: #151B32;
	font-family:Museo300-Regular;
	font-size: 16px;
	color: white;
	position: absolute;
  	margin: auto;
    position: absolute;
    top: 50%; left: 0; right: 0;
	transform: translatey(-50%);
	max-width: 687px;
	width: 90%;
}
.intro-window>.content{
	 text-align: justify; 
	padding: 58px 85px 0 88px;
	 }


.intro-window>.tuto-btn{
	text-align: center;
	display: inline-block;
	font-size: 23px;
	padding: 30px 0;
	
 }
.intro-window>.tuto-btn:before{ 
	width:44px; height:44px;
	content: url('ui/next-icon.svg');
}
.intro-window>.tuto-btn:after{ 
	padding-top: 6px;
	display: block;
	content:attr(label);
}

.intro-window>.close-btn{
	float: right;
	margin: 10px;
}
.intro-window>.close-btn:before{ content: url('ui/close-icon.svg'); }
 

#logo:before{
	padding: 14px 14px;
	position: absolute;
	top: 0; right: 0;
	content:url('ui/logo.svg');
}
#title{
	padding: 78px 52px 0;
	height: 84px;
	color:#FFB900;
	text-align: left;
}

#networks{ height:42px; }
#networks>#slider{
	padding: 0 10px;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
}
#networks>#slider:after{ content: url('ui/slider-left.svg'); }
#networks[index='1']>#slider:after{ content: url('ui/slider-right.svg'); }
#networks>.network-label{ vertical-align: middle; display:inline-block; }
#networks>#network0, #networks[index='1']>#network1{ color:white; pointer-events: none; }
#networks[index='1']>#network0, #networks>#network1{ color:#0060B4; pointer-events: auto; }
#networks>#network0{ transform-origin: 100% 50% }
#networks>#network1{ transform-origin: 0% 50% }

#frame{
	width: 100%;
	height: 730px;
	position:relative;
}
svg{ width: 100%; height: 100%; }

#frame>menu{
	display: block;
	position: absolute;
	bottom: 0;
	left:0;
	padding: 8px 34px 0 52px;
	background-color:#01335D;
	font-family:Museo300-Regular;
	font-size: 20px;
	color: white;
	text-align: left;
}

#frame>menu #reveal{ 
	padding-bottom: 12px; 
	font-family:Museo100-Regular;
	border-bottom: white 0.5px solid;
	margin-bottom: 16px;
}
#frame>menu #connections{ display: inline-block; }
connections{
	padding: 10px 0; 
	border-bottom: white 0.5px solid;
	border-top: white 0.5px solid;
	margin-top: 14px;
	 display: block;
}
#frame>menu #connections:before{ display: inline-block; vertical-align: middle; padding-right: 10px; content:url('ui/toggle-icon-off.svg'); }
#frame>menu #connections[selected]:before{ content:url('ui/toggle-icon-on.svg'); }
#frame>menu .community{ color:#0060B4; display:inline-block; }
#frame>menu .community:before{ display: inline-block; vertical-align: middle; padding-right: 10px; }
#frame>menu #community1{ padding-bottom: 2px; }
#frame>menu #community1:before{ content:url('ui/community-red-off.svg'); }
#frame>menu #community1[selected]:before{ content:url('ui/community-red-on.svg'); }

body[network=POLICY] #frame>menu #community2:before{ content:url('ui/community-blue-off.svg'); }
body[network=POLICY] #frame>menu #community2[selected]:before{ content:url('ui/community-blue-on.svg'); }
body[network=RELIGIOUS] #frame>menu #community2:before{ content:url('ui/community-orange-off.svg'); }
body[network=RELIGIOUS] #frame>menu #community2[selected]:before{ content:url('ui/community-orange-on.svg'); }




#footer{ 
	text-align:left;
	font-family:MuseoSans-700;
	color: white;
}
#footer>.left{ float: left; padding-right:16px; }
#footer>.right{ float: right; padding-left:24px; }
#footer>.right:after{  padding-left: 5px; vertical-align: middle; display: inline-block; }

#footer>#zoom-plus:before{ content: url('ui/plus-icon.svg'); }
#footer>#zoom-minus:before{ content: url('ui/minus-icon.svg'); }
#footer>#zoom-reset:before{ content: url('ui/reset-icon.svg'); }

#footer>#methodology:after{ content: url('ui/info-icon.svg'); }
#footer>#definiton:after{ content: url('ui/def-icon.svg'); }
#footer>#tutorial:after{ content: url('ui/tuto-icon.svg'); }
body[network=POLICY] #footer>#definiton{ display: none; }


.tuto-window-container{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0; left:0;
	backface-visibility: hidden;
	z-index:100;
}

.tuto-window{
	background-color: #151B32;
	font-family:Museo100-Regular;
	font-size: 16px;
	color: white;
  	margin: auto;
    position: absolute;
    top: 100px; bottom:0px; left: 0; right: 0;
	max-width: 860px;
	width: 90%;
	height: 740px;
}

.tuto-window .slide{
	height: 495px;
	position: relative;
	overflow: hidden;
	font-family:Museo500-Regular;
	font-size: 18px;
	text-align: left;
}

.tuto-window .text-block{
	margin: 0 85px 15px 70px;
	height: 142px;
	text-align: justify;
	position: relative;
}

.tuto-window .text-block>div{
	position: absolute;
	top: 0; left: 0;
	height: 100%;
}
.tuto-window .text-block>div scroll-bar.vertical{ transform:translatex(6px); }

.tuto-window .slide>div{
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	padding: 42px 0 0 70px;
	background-position: 50% 100%;
	background-repeat: no-repeat;
}

.tuto-window .slide>div:before{ content:attr(label); }

.tuto-window .next-btn{ display: inline-block; pointer-events: auto; }
.tuto-window .next-btn:before{ content:url(ui/next-icon.svg); }
.tuto-window .bullets{ margin-top: 14px; }
.tuto-window .bullets>div{
	display: inline-block;
	border-radius: 50%;
	width:8px; height: 8px;
	background-color: #0060B4;
	opacity: 0.3;
	margin: 0 8px;
	transition: opacity 0.5s;
}
.tuto-window .bullets>div[active]{ opacity:1; }

.tuto-window .close-btn{ 
	position:absolute;
	top: 10px; right: 0px;
	transform-origin: 73% 50%;
	pointer-events: auto;
}
.tuto-window .close-btn:before{ 
	font-family:Museo500-Regular;
	font-size: 12px;
	content:attr(label);
}
.tuto-window .close-btn:after{ 
	content:url(ui/close-icon.svg);
	vertical-align: middle;
	display: inline-block;
	margin: 0 8px;
 }
 
 .popup-container{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0; left:0;
 }
 .popup{
	 text-align: justify;
	 background-color: white;
	 border-top-left-radius: 24px;
	 border-top-right-radius: 24px;
	 width: 80%;
	 max-width: 732px;
	 height: 685px;
	 padding: 15px 57px 15px 30px;
	 font-size: 16px;
	 color: #01335D;
	font-family:Museo300-Regular;
	position: absolute;
	bottom: 0;
	margin: auto;
	left:0; right:0;
 }
 
 .popup .scroll-view{ padding-right: 5px; height:633px; }
 
 .popup .title:before{ content:attr(title); }
 
 .popup .title{ 
	font-family:Museo500-Regular;
	 font-size: 31px;
	 color: #FFB900;
	 height: 52px;
 }
.popup block{
	display: block;
	padding-bottom: 22px;
	border-bottom: 1px solid;
	margin-bottom: 25px;
}
.popup block:before{
	display: block;
	content:attr(id);
	 font-size: 20px;
	font-family:Museo500-Regular;
}

.popup.methodology block{
	 margin-bottom: 21px;
	 display: block;
}
.popup.methodology block:last-of-type{
	 margin-bottom: 0;
	border-bottom-style: none;
}

.popup.methodology block:before{
	 margin-top: 20px;
	 margin-bottom: 7px;
	 color: #FFB900;
	 font-size: 20px;
 }
 .popup.methodology block block:before{
	 color: black;
	 font-size: 17px;
 }
  .popup.methodology block block{
	border-bottom-style: none;
 }
 .popup.methodology list-item{
	 display: block;
	 margin-left: 20px;
 }
 
 
 
.popup .close-btn{ 
	float: right;
	margin: -7px -46px 0 0;
}
.popup .close-btn:before{ content:url(ui/close-icon.svg); }

credits{
	display: block;
	font-size: 13px;
}
credits logo{ display:inine-block; }
credits logo:before{ content:url("ui/studiov2_logo.svg"); }
	

 .info-tip{
	 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;
 }
 
 .info-tip[deactivate]{
	  transform: translate(-50%, -120%) scale(0.1);
	  opacity: 0;
 }
 
 
 
 .node-popup{
	 background-color: white;
	 position: absolute;
	 right: 0; top: 50%;
	 transform: translatey(-50%);
	 width: 200px;
	 padding: 15px 36px 74px 26px;
	 text-align: justify;
	 border-top-left-radius: 24px;
	 border-bottom-left-radius: 24px;
 }
 
  .node-popup .title{
	 color: #FFB900;
	 font-family:Museo500-Regular;
	 font-size: 22px;
	 padding-bottom: 16px;
	 text-align: left;
  }
  
    .node-popup .scroll-view{
	 color: #01335D;
	 font-family:Museo300-Regular;
	 font-size: 14px;
	 height: 288px;
  }
  .node-popup .scroll-view .item{
	  padding-bottom: 16px;
	  border-bottom: 1px solid;
	  margin-bottom: 14px;
  }
  .node-popup .scroll-view .item:last-of-type{ margin-bottom: 0; }

  .node-popup .scroll-view .item b{
		font-weight: normal;
		 font-family:Museo500-Regular;  
	} 
     
  .node-popup .scroll-view .item a:before{ content: "• Tweet"; } 
  .node-popup .scroll-view .item a:hover{ opacity: 0.5; }
  body[ntwrk="0"] .node-popup .scroll-view .item a[network="1"], body[ntwrk="1"] .node-popup .scroll-view .item a[network="0"]{ display: none; }
  .node-popup .scroll-view .item a{ 
  	display: block;
	margin-top: 16px;
	transition: opacity 0.3s;
	 font-family:Museo500-Regular;
	 font-size: 18px;
	cursor: pointer;
	color: #FFB900;
	text-decoration: none;
  }
.node-popup .close-btn{ 
	margin-left: -13px;
	margin-bottom: 48px;
	transform-origin: 15px 50%;
}
.node-popup .close-btn:before{ content:url(ui/close-icon.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; }

.node-popup scroll-bar.vertical{ transform:translatex(6px); }

#title{ font-size: 25px; }
#networks>.network-label{ font-size: 15px; }
#footer{ padding: 20px 10px 0;  font-size: 10px; }

@media (min-width: 490px){
#title{ font-size: 35px; }
#networks>.network-label{ font-size: 18px; }
#footer{ padding: 20px 52px 0;  font-size: 12px; }
}