/*IE SVG Width Fix*/
#relativeAbundanceSVG,
#landUseSVG{
	width:100%;
	}

/*Universal Classes*/

.bg{
	background:rgb(63,136,189);
	color:#fff;
	min-height:200px;
	padding: 0 15px;
	}
	
.bgContent{
	min-height:100px;
	}
	
.bgContent h1{
	padding-top:15px;
	margin-bottom:0;
	font-size:1.5em;
	}
	
.bgContent p{
	margin-top:10px;
	}
	
.sectionContainer{
	padding:15px;
	margin:0 auto;
	position:relative;
	}
	
.text{
	clear:both;
	}
	
.text h3{
	margin-top:5px;
	}
	
.text p{
	font-size:1.1em;
	line-height:1.5em;
	margin-bottom:10px;
	}
	
.text ul{
	padding-left:20px;
	}
	
.text li{
	margin-top:10px;
	}
	
.figure{
	min-height:200px;
	max-width:960px;
	margin:10px auto;
	}
	
.bigNumber{
	font-size:3em;
	}
	
.spacer{
	margin-bottom:10px !important;
	}
	
.here{
	display:block !important;
	}
	
.gone{
	display:none;
	}
	
.left{
  margin-bottom:10px;
}
	
/*Keynote CSS*/

.keynote{
  height:100%;
  position:relative;
 }

#keynoteDiv1{
  background:url('../images/keynotes/bad_ds_oct2015.jpg');
}

#keynoteDiv2{
  background:url('../images/keynotes/mpsampling.jpg');
}

#keynoteDiv3{
  background:url('../images/keynotes/knownRisks.JPG');
}

#keynoteDiv4{
  background:url('../images/keynotes/kickHabit.jpg');
}

#keynoteDiv5{
  background:url('../images/keynotes/whereInWater.jpg');
}

#keynoteDiv6{
  background:url('../images/keynotes/howArePlastics.JPG');
}

#keynoteDiv7{
  background:url('../images/keynotes/whatsNext.jpg');
}

#keynoteDiv1,
#keynoteDiv2,
#keynoteDiv3,
#keynoteDiv4,
#keynoteDiv5,
#keynoteDiv6,
#keynoteDiv7{
  background-size:cover;
  -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.dimmer{
  background:none;
  background:rgba(0,0,0,.2);
  height:100%;
 }
 
 .keynoteContent{
   width:90%;
   height:150px;
   position:absolute;
   top:0;right:0;left:0;bottom:0;
   margin:auto;
   text-align:center;
   color:#fff;
 }
 
 .keynoteContent h1{
   font-weight:700;
   text-shadow:0 2px 5px rgba(0,0,0,.3);
 }

/*Section CSS*/

#intro{
	min-height:100px;
	}
	
#appTitle{
  font-size:1.5em;
  margin-bottom:10px;
}

#environmentalEffects,
#relativeAbundance,
#environmentalHazards,
#beadBan,
#landUse{
	min-height:100%;
	position:relative;
	}
	
#environmentalEffects{
	padding-bottom:20px;
	}

#environmentalEffects:after{
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

#environmentalHazards,
#beadBan,
#conclusion{
  min-height:100px;
  }

#landUse{
	background:rgb(100,0,0,.5);
	}
	
/*Figure 1*/
#figure1Table{
	min-height:100px;
	border:none;
	padding:10px;
	font-size:.9em;
	border-radius:5px;
	}
	
#figure1Table p{
	text-align:left;
	margin-bottom:10px;
	}
	
#figure1Table img{
	width:22%;
	display:none;
	}
	
#relativeAbundanceSVG{
	width:760px;
	}
	
.photo img{
	width:100%;
	}
	
.photo{
	min-height:150px;
	text-align:center;
	}
	

/*Figure 2*/

.subject{
	min-height:200px;
	margin:20px 0 0 0;
	position:relative;
	border-radius:5px;
	}
	
.subject:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
	 
.oneStat,
.twoStat{
	text-align:center;
	padding:10px 0;
	}
	
.oneStat p,
.twoStat p{
		max-width:250px;
		margin:0 auto;
	}
	
.pic{
	min-height:200px;
	text-align:center;
	}
	
.pic img{
	width:70%;
	}
	
/*Figure 3*/
#figure3Text h2{
	font-size:1.2em;
}

/*References*/
#referenceBox{
	min-height:50px;
	margin:0 0 20px 0;
	padding:10px;
	clear:both;
	}
	
#referenceTitle{
	background:rgb(63,136,189);
	height:35px;
	border-radius:5px 5px 0 0;
	color:#fff;
	position:relative;
	}
	
#arrow{
	width: 0; 
  	height: 0; 
  	border-top: 8px solid #fff;
  	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	position:absolute;
	right:10px;
	top:13px;
	}
	
.rotate{
	transform: rotate(90deg);
	}
	
.corners{
	border-radius:5px !important;
	}
	
#referenceTitle:hover{
	background:#387186;
	}
	
#referencePanels{
	border:1px solid rgb(190,190,190);
	padding:0 10px 10px 10px;
	border-radius:0 0 5px 5px;
	}
	
#referenceTitle h3{
	padding:6px 0 0 10px;
	}
	
.panel{
	margin:10px 0 0 0;
	padding-bottom:10px;
	border-bottom:1px solid rgb(190,190,190);
	}
	
.panel:last-child{
	border:none;
	padding-bottom:0;
	}
	
@media only screen
	and (min-device-width: 768px)
	and (max-device-width: 1024px)
	and (-webkit-min-device-pixel-ratio: 1){
		#keynoteDiv1,
		#keynoteDiv3,
		#keynoteDiv5,
		#keynoteDiv6,
		#keynoteDiv7{
			background-attachment: scroll !important;
		}
}

		
@media screen and (min-width:768px){
  
  .text p{
    font-size:1.5em;
  }
  
  .text h2{
    font-size:2em;
  }
  
  .text ul{
    font-size:1.2em;
  }
	
	.bgContent{
		width:730px;
		margin:0 auto;
		}
		
	.bgContent h1{
		padding-top:35px;
		font-size:2em;
		}
		
	.sectionContainer{
		width:730px;
		}

	.bigNumber{
		font-size:4.5em;
	}
	
	#appTitle{
    font-size:2.5em;
  }
		
	/*Figure 1*/
	#figure1Table{
		width:35%;
		position:absolute;
		top:102px;
		right:10px;
	}
	
	.left{
		width:49%;
		float:left;
		padding-right:1%;
	}
	
	.right{
		width:50%;
		float:right;
		position:relative;
		z-index:90000;
	}
	
/*Keynote CSS*/
#keynoteDiv1,
#keynoteDiv2,
#keynoteDiv3,
#keynoteDiv4,
#keynoteDiv5,
#keynoteDiv6,
#keynoteDiv7{
  background-attachment:fixed;
}

.keynoteContent{
  width:100%;
  font-size:2em;
}
		
	/*Figure 2*/
	.oneStat,
	.twoStat{
		width:35%;
		float:left;
		
		position:absolute;
		margin:auto 0;
		top:0; bottom:0;
	}
	
	.oneStat{
		height:170px;
	}
	
	.twoStat{
		height:340px;
	}
	
	.oneStat p,
	.twoStat p{
		font-size:1.1em;
		}
	
	.pic{
		width:65%;
		float:right;
	}
	
	/*Figure 3*/
	#figure3Text h2{
		font-size:1.5em;
		}
	
	
	#landUseFig{
		margin-bottom:-30px;
		}
		
	/*References*/
	#referenceBoxContent{
		width:760px;
		margin:0 auto;
		}
		
}

@media screen and (min-width:1024px){
	.bgContent{
		width:930px;
		}
		
	.sectionContainer{
		width:930px;
		}

	/*Figure 1 CSS*/	
	#figure1Table{
		top:83px;
		right:10px;
	}
	
	#figure1Table img{
		display:inline;
	}
		
	/*Figure 2*/
	#subjectContainer{
		width:960px;
		}

}

/* Parts:share */
.p-share {
  text-align: center;
}

.p-share a {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background-color: #263238;
  border-radius: 100%;
  color: #eceff1;
  margin: 0 .5rem;
}

.p-share div a{
  background-color:#eceff1;
  color:#263238 !important;
}

#socialMedia{
  height:100px;
  width:100%;
  text-align:center;
  position:absolute;
  bottom:0;
  margin-bottom:10px;
}