/*.article-topper__width{
	text-align: center;
	margin:auto;
}*/
.article-topper--big-image .article-topper__meta-info, .article-topper--data-viz-white .article-topper__meta-info, .article-topper--image-side .article-topper__meta-info, .article-topper--simple-white .article-topper__meta-info {
    border-bottom: 0px solid rgba(0,0,0,0);
}
.article-topper--data-viz-white, .article-topper--simple-white {
    padding-top: 100px;
}
.article-content{
	padding-top:0px;
}

.article-topper--data-viz-white .article-topper__h, .article-topper--simple-white .article-topper__h {
    color: #000;
    font-family: 'harriet',sans-serif;
/*    font-size: 45px;*/
    font-weight: 800;
    font-style: normal;
    letter-spacing: -.02em;
    text-transform: none;
    line-height: 1.25;

}
.article-topper--data-viz-white .article-topper__hgroup+.article-topper__meta-info, .article-topper--simple-white .article-topper__hgroup+.article-topper__meta-info{
	border:none;
}

svg:not(:root) {
   
   overflow: visible;
}

.legend_circle{
	width:4px;
	height:4px;
}
.container_{
	width:100%;
	margin-top:30px;
}
.cont{
	width:60%;
	margin:auto;
	margin-bottom:50px;
}

.plot-container{
  width:80%;
  margin:auto;
  margin-bottom:75px;
}
.plot-container-wide{
	width:90%;
	margin-left:10%;
  margin-bottom:75px;
}
.cont-half{
	width:40%;
}
.plot-container-half{
	width:50%;
}
.p0margin{
	margin-left:30px;
}
#plot4-half{
	margin-left:20px;
}
#plot1, #plot2{
	width:70%;
	height:60vh;
	margin:auto;
  	margin-bottom:20px;
}
#plot4{
	width:100%;
	height:300px;
/*	margin:auto;*/
  	margin-bottom:20px;
}

#plot0{
	width:95%;
	height:40vh;
  	margin-bottom:20px;
}
#plot2legend{
	margin-top:10px;
	padding-top:10px;
	width:20%;
}
.text_legend{
	width:calc(90% - 5px);
}
.plot-citation{
	margin-top:10px;
	width:70%;
}
.plot-container-half .plot-citation{
	width:100%;
}
.cluster{
	width:30%;
	height:100px;

}
.cluster-text{
	width:66%;
	margin-bottom:30px;
}




.axis path, .line{
	stroke:#999;
	fill:none;
	stroke-width:1px;
	opacity:.5;
}
.line{
	stroke:#999;
	stroke-width:.75;	
}

.dash-line{
	stroke-width:.5;
	stroke:#999;
	opacity:.6;
}


.axis line{
	stroke:#999;
	fill:none;
	stroke-width:1px;
	opacity:.5;
}

.inline-block{
	display:inline-block;
	vertical-align:top;
	margin-right:5px;
}
.inline_row{
	margin-top:15px;
}
/*this is for between 480 and 770 tablet*/
@media screen and (min-width: 768px) and (max-width: 1060px) {

	.cont{
		width:70%;
	}

}
/*this is for between 480 and 770 tablet*/
@media screen and (min-width: 450px) and (max-width: 768px) {
	.cont{
		width:80%;
	}
	.plot-container, .plot-container-half, .cont-half, .plot-container-wide{
		width:92%;
	}



	#plot2legend{
		width:20%;
		margin-right:0px;
		padding-right:0px;
	}

	.text_legend{
		width:calc(90% - 15px);
	}

	.cluster{
		width:30%;
	}
	.cluster-text{
		width:60%;
	}
	.article-footer{
    	width:92.5%;
    	margin:auto;
  	}
    .plot-citation{
		width:100%;
	}
	#plot0{
		margin:auto;
	}



	#plot1, #plot2{
		width:100%;
		height:400px;
/*		height:300px;
		margin-top:30px;*/
		margin-bottom:0px;
	}
	#plot2legend{
		margin-top:0px;
		padding-top:0px;
		width:100%;
		margin-bottom:10px;
	}

#plot4-half{
	margin-left:0px;
}

}
/*this is only for iphone*/
@media only screen and (max-width: 449px) {
	.cont{
		width:92%;
		margin-bottom: 25px;
	}
	.plot-container, .plot-container-half, .cont-half, .plot-container-wide{
	  width:92%;
	  margin:auto;
	  margin-bottom:25px;
	}
.plot-container-half .plot-citation{
	margin-top:30px;
}

	#plot0legend{
		margin-top:10px;
	}
	#plot0{
		height:500px;
		margin-top:30px;
		margin-bottom:0px;
	}
	#plot1, #plot2, #plot4{
		width:100%;
		height:300px;
		margin-top:30px;
	}


	#plot2legend{
		margin-top:0px;
		padding-top:0px;
		width:100%;
		margin-bottom:10px;
	}
	#plot4-half{
		margin-left:0px;
	}
	.cluster{
		width:30%;
	}
	.cluster-text{
		width:60%;
	}
  	.p0margin{
		margin-left:0px;
	}
	.plot-citation{
		width:100%;
	}


	.article-topper__byline{
	text-align:left;
	margin-left:0px;
	}
	.article-topper__meta-info{
		margin:auto;
		text-align:left;
	}
	.article-topper__width{
		text-align: left;
		margin:auto;
	}
	.article-footer{
    	width:92.5%;
    	margin:auto;
  	}
}
