.demoqs span {
	color: unset;
}

#vg {
	color: hsl(228, 100%, 48%);
}	

#vg:hover {
	color: hsl(228, 100%, 72%);
}	

#pdf {
	height: 735px; 
	width: 1200px;
}

.testimonials .tesimonial{
	padding-top: 42px;
	max-width: 2000px;	
} 

.slider_container{
	max-width: 2000px;
}

.pshadow {
    margin-top: -3px;	
    background: url("/?originalUrl=https%3A%2F%2Fvisualreasoning.org%2Fimg%2Fpshadow18.png") repeat-x;
	background-size: 100% 40%;
}

.pshadow.down {
    margin-top: -1px;	
}

.sshadow{
    position: absolute;
    width: 100%;
    height: 69px;
    left: 0;
    background: url("/?originalUrl=https%3A%2F%2Fvisualreasoning.org%2Fimg%2Fpshadow20.png") repeat-x;
    margin-top: -89px;
	background-size: 100% 100%;
}

.sshadow.pdf{
    margin-top: -121px;
}

.testimonials.pdf.plots {
	padding: 7.5vw 0 6vw 0;
}

.sshadow.pdf.plots{
    background: url("/?originalUrl=https%3A%2F%2Fvisualreasoning.org%2Fimg%2Fpshadow22.png") repeat-x;
    margin-top: -7.51vw;
    background-size: 100% 60%;
}

.testimonials.a {
	background: linear-gradient(#4799ff ,#d6d6ff);
}

.testimonials.b {
	background: white;
	box-shadow: 0px -1px 8px 0 rgba(0, 0, 0, 0.15), 0px 4px 12px 0 rgba(0, 0, 0, 0.14)	
}

.testimonials.pdf.plots.b {
    padding: 6vw 0 6vw 0;
}

.testimonials.c {
	background: linear-gradient(#d6d6ff, #f8d7fa);
	box-shadow: 0px 1px 8px 0 rgba(0, 0, 0, 0.15), 0px 3px 12px 0 rgba(0, 0, 0, 0.14) inset;
}

.testimonials.d {
	background: linear-gradient(#f8d7fa, #f2f7ff);
	box-shadow: 0px 1px 8px 0 rgba(0, 0, 0, 0.15), 0px 3px 12px 0 rgba(0, 0, 0, 0.14) inset;
}

.testimonials.pdf {
	padding: 5vw 0 4.25vw 0;
}

.testimonials.pdf.plots.c {
    padding-top: 7.9vw;
    padding-bottom: 5.4vw;
}

.testimonials.pdf.plots.b.e {
    padding-top: 5.6vw;
}

.testimonials.pdf.plots.d {
    padding-top: 6vw;
    padding-bottom: 6.5vw;    
}

@media only screen and (max-width: 900px){
	.testimonials.pdf.plots {
		padding: 15vw 0 6vw 0;
	}

	.sshadow.pdf.plots{
	    margin-top: -15.01vw;
	}

}

#sunc {
  width: 50%; 
  display: inline-block; 
  float: left; 
  height: 25vw;
}

#c4 {
  width: 100%; 
  display: inline-block; 
  float: left; 
  height: 25vw;
}

#c4c {
  width: 43%;
  display: inline-block; 
  position: relative; 
  float: left; 
  padding-left: 45px
}

#c1c {
  width: 33%; 
  height: 16vw; 
  display: inline-block; 
}

#c2c {
  width: 33%; 
  height: 16vw; 
  display: inline-block; 
}

#c3c {
  width: 33%; 
  height: 16vw; 
  display: inline-block; 
}

#i1i {
  width: 40%; 
  display: inline-block; 
  float: left;
}

#i2i {
  width: 60%; 
  display: flex; 
  float: left; 
  margin-left: 3.5vw;
}

#ii {
	width: 100%; 
	display: flex; 
	padding: 0 14% 0 14%;
}

#p1p {
  width: 48%; 
  height: 18vw; 
  display: inline-block;
}

#p2p {
  width: 48%; 
  height: 18vw; 
  display: inline-block;
}

#p3p {
  width: 48%; 
  height: 18vw; 
  display: inline-block;
}

#p4p {
  width: 48%; 
  height: 18vw; 
  display: inline-block;
}

#p1 {
  padding-top: 2.1vw; 
  width: 100%; 
  height: 100%
}  

#p2 {
  padding-top: 2.1vw; 
  width: 100%; 
  height: 100%
} 

#p3 {
  padding-top: 2.1vw; 
  width: 100%; 
  height: 100%
}  

#p4 {
  padding-top: 2.1vw; 
  width: 100%; 
  height: 100%
} 

#pp1 {
  width: 100%; 
  display: block; 
  padding: 0 11.5% 0 13.5%
}  

#pp2 {
  width: 100%; 
  display: block; 
  padding: 3.5vw 11.5% 0 13.5%
}   

#cc {
  width: 100%;
  display: block; 
  padding: 0 8% 0 13%;
}

#l1l {
  width: 32%;
}

#l2l {
  width: 32%;
}

#l3l {
  width: 32%;
}

#ll {
	width: 100%; 
	display: block; 
	padding: 0 14% 0 13%;
}

#suntl {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-top: -3.45vw; 
  margin-left: 12.4vw;
}

#ctl {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-top: -3.45vw; 
  margin-left: -13px
}

#c1t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw
}

#c2t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw
}

#c3t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw
}

#i1t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw; 
  margin-top: -3.4vw;
} 

#i2t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw; 
  margin-top: -3.4vw;
} 

#p1t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw; 
  margin-top: -0.2vw;
}   

#p2t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw; 
  margin-top: -0.2vw;
}   

#p3t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw; 
  margin-top: -0.2vw;
}   

#p4t {
  position: absolute; 
  font-size: 1.25vw; 
  font-weight: 600; 
  margin-left: 0.3vw; 
  margin-top: -0.2vw;
}  

.demoqs {
	font-family: "raleway-light";
	font-size: 27.45px;
	color: #0b00ac;
	line-height: 1.9;	
	text-align: justify;
}

.demoimgc {
	/* box-shadow: 35px 35px 70px 0 #240067 inset, -35px -35px 70px 0 #240067 inset; */
	float: left;
 	width: 20.5%;
 	margin-left: -8px;
 	padding-left: 0px;
}

.demoqsc {
	float: left;
	padding-top: 0px;
	padding-left: 50px;
    /* margin-top: -1px; */
    width: 79.5%;
}

#finalsent {
	margin-top: 35px;
}

#secimg {
	margin-top: 52px;
}

#about {
	padding-left: 70px;
    padding-right: 70px;
}

#topstats {
	padding-left: 0px;
    padding-right: 0px;
}


#topstats2 {
    padding-left: 0px;
    padding-right: 0px;
}

.mean_title {
    color: #940000;
    font-family: "raleway-bold";
}

.sub_title {
	color: #80007f;
    /* font-family: "raleway-bold"; */
    margin-top: -2px;
}

@media only screen and (max-width: 1500px){
	.demoqsc {
		width: 100%;
		padding-left: 0;
	}

	.demoimgc {
		padding-top: 40px;
		width: 100%;
	}

	.demoimgc img {
		width: 30%;
		max-width: 300px;
	}

	#secimg {
		margin-top: 0;
		margin-left: 20px;
	}

	.testimonials .tesimonial {
		padding-top: 15px;
	}

	.sub_title {
		line-height: 1.6;
	}

	#pdf {
		height: 620px; 
		width: 1000px;
	}	
}

@media only screen and (max-width: 901px){
	#about {
		padding-top: 95px;
	}
}

@media only screen and (max-width: 1200px){
	.demoqs {
		font-size: 24.45px;
	}

	#pdf {
		height: 565px; 
		width: 900px;
	}	
}

@media only screen and (max-width: 1050px){
	#pdf {
		height: 60vw; 
		width: 100vw;
	}	
}

@media only screen and (max-width: 750px){
	.demoimgc img {
		width: 42%;
	}
	.demoqs {
		font-size: 22.45px;
		text-align: justify;
	}
	#about {
	    padding-left: 38px;
	    padding-right: 38px;
	}	
}

@media only screen and (max-width: 650px){
	.mean_title{
		font-size: 30px;
	}
	.sub_title{
		font-size: 25px;
	}
	.testimonials.pdf {
		padding: 120px 0 15vw 0;
	}	
}

@media only screen and (max-width: 500px){
	.demoimgc img {
		width: 95%;
	}

	#secimg {
		margin-top: 20px;
		margin-left: 0px;
	}
	
	.demoqs {
		font-size: 20.45px;
	}

	#pdf {
		height: 248px; 
		width: 400px;
	}	
}

@media only screen and (max-width: 385px){
	.mean_title{
		font-size: 29px;
	}
	.sub_title{
		font-size: 23px;
	}

	#pdf {
		height: 238px; 
		width: 360px;
	}
}

@media only screen and (max-width: 357px){
	.mean_title{
		font-size: 26px;
	}
	.sub_title{
		font-size: 20px;
	}
	#pdf {
		height: 230px; 
		width: 320px;
	}
}

@media only screen and (max-width: 327px){
	#pdf {
		height: 230px; 
		width: 300px;
	}
}

d3-tip, svg {
  font: 0.65vw sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bara1 {
  fill: #00b6f0; /* hsl(267, 100%, 73%) 87  hsl(348, 100%, 73%) hsl(144, 77%, 64%) 84 */
}

.bara1:hover {
  fill: hsl(195, 100%, 69%);
}

.bara2 {
  fill: hsl(267, 100%, 73%); 
}

.bara2:hover {
  fill: hsl(267, 100%, 87%);
}

.bara3 {
  fill: hsl(348, 100%, 73%); 
}

.bara3:hover {
  fill: hsl(348, 100%, 87%);
}

.bara4 {
  fill: hsl(144, 77%, 64%); 
}

.bara4:hover {
  fill: hsl(144, 77%, 84%);
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  font-size: 20px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -3px 0 0 0;
  top: 100%;
  left: 0;
}

#explanation {
  font-family: 'Open Sans', sans-serif;
  font-size: 18.5px;
  font-weight: 400;
  margin: 0;
  /*  margin-top: -15px; */
  text-align: center;
  line-height: 1.3;
  color: #444;  
}

#main {
  float: right;
  overflow:hidden;
  margin: 0;
  width: 50%; 
  display: inline-block; 
  float: right; 
  height: 25vw;"
}

#sidebar {
  float: left;
  height: 18vw; 
  display: inline-block; 
  margin: auto; 
  margin-right: 5%; 
  margin-left: 25%;
}

#sequence {
  width: 35%;
  height: 20px;
  padding-left:12.5%;
  margin-top: 40px;
}

#legend {
  padding: 10px 0 0 3px;
  margin-left: 50%;
}

#sequence text, #legend text {
  font-weight: 600;
  fill: #fff;
  font-size: 16px;
}

#chart {
  position: relative;
}

#chart path {
  stroke: #ffffff40;
}

#percentage {
  text-align: center;
  color: #333;
}

#percentage {
  font-size: 31px;
}

#underexp {
	margin-top: 0px;
}

@media only screen and (max-width: 1175px){
	#sequence {
	  width: 85%;
	  height: 20px;
	  padding-left:12.5%;
	  margin-top: 58px;
	}

	#sequence text, #legend text {
	  font-weight: 600;
	  fill: #fff;
	  font-size: 16px;
	}

	#sunc {
	  width: 100%; 
	  display: inline-block; 
	  float: unset; 
	  height: 35vw;
	}

	#c4c {
	  width: 100%;
	  display: inline-block; 
	  position: relative; 
	  float: unset; 
	  padding-left: 0
	}

	#c1c {
	  width: 100%; 
	  height: 55vw; 
	  display: inline-block;
	  padding-top: 10vw; 
	}

	#c2c {
	  width: 100%; 
	  height: 55vw; 
	  display: inline-block; 
	  padding-top: 10vw; 
	}

	#c3c {
	  width: 100%; 
	  height: 55vw; 
	  display: inline-block; 
	  padding-top: 10vw; 	  
	}

	#i1i {
	  width: 100%; 
	  display: inline-block; 
	  margin: auto;
	  float: block;
	}

	#i2i {
	  width: 100%; 
	  display: block; 
	  margin: auto;
	  padding-top: 15vw;
	}

	#ii {
		display: block; 
	}

	#p1 {
	  padding-top: 2.1vw; 
	  width: 100%; 
	  height: 100%
	} 

	#p2 {
	  padding-top: 2.1vw; 
	  width: 100%; 
	  height: 100%
	} 

	#p3 {
	  padding-top: 2.1vw; 
	  width: 100%; 
	  height: 100%
	}  

	#p4 {
	  padding-top: 2.1vw; 
	  width: 100%; 
	  height: 100%
	} 	

	#p1p {
	  width: 90%; 
	  height: 38vw; 
	  display: inline-block;
	}

	#p2p {
	  width: 90%; 
	  height: 38vw; 
	  display: inline-block;
	}

	#p3p {
	  width: 90%; 
	  height: 38vw; 
	  display: inline-block;
	}

	#p4p {
	  width: 90%; 
	  height: 38vw; 
	  display: inline-block;
	}

	#cc {
	  width: 100%;
	  display: block; 
	  padding: 0 8% 0 18%;
	}

	d3-tip, svg {
	  font: 1.2vw sans-serif;
	}

	#l1l {
	  width: 32%;
	}

	#l2l {
	  width: 32%;
	}

	#l3l {
	  width: 32%;
	}

	#ll {
		width: 100%; 
		display: block; 
		padding: 0 5%;
	}

	#main {
	  float: unset;
	  width: 90%; 
	  height: 75vw;
	  margin: auto;
	  padding-top: 2vw;
	}

	#sidebar {
		display: none;
	}

	#c4 {
	  width: 100%; 
	  display: inline-block; 
	  float: left; 
	  height: 85vw;
	}	

	#suntl {
	  font-size: 3.2vw; 
	  margin-top: -8.45vw; 
	  margin-left: 12.4vw;
	}

	#ctl {
	  font-size: 3.2vw; 
	  margin-top: 8.2vw; 
	  margin-left: 12.4vw;
	}

	#c1t {
	  font-size: 3.2vw; 
	  margin-left: 0vw;
	  margin-top: -3.8vw; 
	}

	#c2t {
	  font-size: 3.2vw; 
	  margin-left: 0.3vw;
	  margin-top: -3.8vw; 	  
	}

	#c3t {
	  font-size: 3.2vw; 
	  margin-left: 0.3vw;
	  margin-top: -3.8vw; 	  
	}

	#i1t {
	  font-size: 3.2vw; 
	  margin-left: 0.3vw; 
      margin-top: -7vw;
	} 

	#i2t {
	  font-size: 3.2vw; 
	  margin-left: 0.3vw;
	  margin-top: -7vw; 
	} 

	#p1t {
	  font-size: 3.2vw; 
	  margin-left: 3.9vw; 
	  margin-top: -0.2vw;
	}  

	#p2t {
	  font-size: 3.2vw; 
	  margin-left: 3.9vw; 
	  margin-top: -0.2vw;
	}  

	#p3t {
	  font-size: 3.2vw; 
	  margin-left: 3.9vw; 
	  margin-top: -0.2vw;
	}   

	#p4t {
	  font-size: 3.2vw; 
	  margin-left: 3.9vw; 
	  margin-top: -0.2vw;
	}  

	#p1 {
	  padding-top: 5.1vw; 
	} 
	 
	#p2 {
	  padding-top: 5.1vw; 
	} 

	#p3 {
	  padding-top: 5.1vw; 
	}  

	#p4 {
	  padding-top: 5.1vw; 
	} 	

	#pp1 {
	  width: 100%; 
	  display: block; 
	  padding: 0 9.5% 0 11.5%
	}  

	#pp2 {
	  width: 100%; 
	  display: block; 
	  padding: 0 9.5% 0 11.5%
	} 

	#topstats2 {
	    padding-left: 4vw;
	    padding-right: 4vw;
	}

	.testimonials.pdf.plots.c {
	    padding-top: 21.9vw;
	    padding-bottom: 13.4vw;
	}	

	.testimonials.pdf.plots.d {
	    padding-top: 7.5vw;
	    padding-bottom: 8vw;
	}	

	.testimonials.pdf.plots {
		padding: 95px 0 17px 0;
	}

	.sshadow.pdf.plots{
	    margin-top: -96px;
	}

}


@media only screen and (max-width: 900px){
	.testimonials.pdf.plots {
		padding: 21.5vw 0 1.7vw 0;
	}

	.sshadow.pdf.plots{
	    margin-top: -18.51vw;
	}
}

@media only screen and (max-width: 700px){
	#pp1 {
	  width: 100%; 
	  display: block; 
	  padding: 0 4.5% 0 6.5%
	}  

	#pp2 {
	  width: 100%; 
	  display: block; 
	  padding: 0 4.5% 0 6.5%
	} 	

	#p1p {
	  height: 42vw; 
	}

	#p2p {
	  height: 42vw; 
	}

	#p3p {
	  height: 42vw; 
	}

	#p4p {
	  height: 42vw; 
	}

	#p1t {
	  margin-top: 1vw;								
	  margin-left: 6.2vw; 
	}  

	#p2t {
	  margin-top: 1vw;								
	  margin-left: 6.2vw; 
	}  

	#p3t {
	  margin-top: 1vw;								
	  margin-left: 6.2vw; 
	}   

	#p4t {
	  margin-top: 1vw;						
	  margin-left: 6.2vw; 
	} 	
}

@media only screen and (max-width: 500px){
	#pp1 {
	  width: 100%; 
	  display: block; 
	  padding: 0 3% 0 5%
	}  

	#pp2 {
	  width: 100%; 
	  display: block; 
	  padding: 0 3% 0 5%
	} 	

	#p1p {
	  height: 46vw; 
	}

	#p2p {
	  height: 46vw; 
	}

	#p3p {
	  height: 46vw; 
	}

	#p4p {
	  height: 46vw; 
	}

	#p1t {
	  margin-top: 1.5vw;						
	  margin-left: 10.2vw; 
	}  

	#p2t {
	  margin-top: 1.5vw;						
	  margin-left: 10.2vw; 
	}  

	#p3t {
	  margin-top: 1.5vw;						
	  margin-left: 10.2vw; 
	}   

	#p4t {
	  margin-top: 1.5vw;				
	  margin-left: 10.2vw; 
	}	
}

@media only screen and (max-width: 400px){
	#pp1 {
	  width: 100%; 
	  display: block; 
	  padding: 0 0% 0 2%
	}  

	#pp2 {
	  width: 100%; 
	  display: block; 
	  padding: 0 0% 0 2%
	} 

	#p1p {
	  height: 52vw; 
	}

	#p2p {
	  height: 52vw; 
	}

	#p3p {
	  height: 52vw; 
	}

	#p4p {
	  height: 52vw; 
	}

	#p1t {
	  margin-top: 2vw;				
	  margin-left: 13.2vw; 
	}  

	#p2t {
	  margin-top: 2vw;		
	  margin-left: 13.2vw; 
	}  

	#p3t {
	  margin-top: 2vw;		
	  margin-left: 13.2vw; 
	}   

	#p4t {
	  margin-top: 2vw;
	  margin-left: 13.2vw; 
	}
}