section{
	float: left;
	/*padding-top: 50px;*/
	padding-bottom: 50px;
	width: 100%;
	padding-left:0;
	padding-right:0;
}

#icon-wrapper{
	width:100%;
	float:left;
	height:280px;
}

.icons {
	width:25%;
	float:left;
	position:relative;
}
.icons2 {
	width:25%;
	float:left;
	position:relative;
	margin-left:25%;
}
.icons3 {
	width:25%;
	float:left;
	position:relative;
	margin-left:50%;
}
.icons4 {
	width:25%;
	float:left;
	position:relative;
	margin-left:75%;
}

.icon-slide-container{
	height:260px;
	overflow:hidden;
	text-align: left;
	position: absolute;
	float: left;
	width: 315px;
	left: 50%;
	margin-left: -150px;
	/*border: 1px solid #ccc;*/
}

span.foot{
	top: 235px;
}


.slide-icon{
  width:300px;
  height:auto;
  position:absolute;
  margin-top:-300px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4 ease;
}
	
.slide-icon:hover{
  position:absolute;
  margin-top:0;
}

@media only screen and (max-width: 1300px) {
  #icon-wrapper{
		width:100%;
		float:left;
		height:220px;
	}
	
	span.foot{
		top: 205px;
	}
	
  .icon-slide-container {
		height: 220px;
		overflow: hidden;
		text-align: left;
		position: absolute;
		float: left;
		width: 240px;
		left: 45%;
		margin-left: -100px;
	}
  .slide-icon {
		width: 200px;
		height: auto;
		position: absolute;
		margin-top: -200px;
	}
   .clasf{
	    font-size: 1em;
    }
   .indlab {
		font-size: 0.9em;
	}
   .fig{
	   font-size: 1.5em;
   }
   
}

@media only screen and (max-width: 1100px) {
  #home-social-container{
		margin-right: 0;
		margin-left: 0;
		width: 100%;
		padding: 0;
		float: left;
		left: 0;
	}
	
	#flags{
		width: 690px;
	}
	.flagimg{
		border: 1px solid #ccc;
		width: 14px;
	}

	.flagimgsel{
		width: 12px;
		border: 2px solid steelblue;
	}
	.flaginimg{
		border: 1px solid #ccc;
		width: 14px;
	}
	.flag{
		margin: 2.5px;
	}
	.flagin{
		margin: 2.5px;
	}
	.flagin span{
		font-size: 0.9em;
	}
}

@media only screen and (max-width: 1000px) {
  #icon-wrapper{
		width:100%;
		float:left;
		height:550px;
	}
	
	.icon-slide-container {
		height: 250px;
		overflow: hidden;
		text-align: left;
		position: absolute;
		float: left;
		width: 300px;
		left: 50%;
		margin-left: -150px;
	}
	
	.slide-icon {
		width: 300px;
		height: auto;
		position: absolute;
		margin-top: -300px;
	}	
	.icons {
		width: 50%;
		float: left;
		position: relative;
	}
	.icons2 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 50%;
	}
	.icons3 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 0%;
		margin-top: 300px;
	}
	.icons4 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 50%;
	}
	#I1 {
		width: 80%;
		margin-left: auto;
		height: 180px;
		margin-right: auto;
	}
	#I1indi {
		width: 45%;
		text-align: right;
	}
	#I1Control{
		width: 75%;
	}
	#I1 div.data{
		margin-top: 80px;
		width: 30%;
		margin-right: 0px;
		text-align: left;
	}
	.toplbl{
		font-size: 0.7em;
	}
	#barchart1000{
		display: none;
	}

	#barchart650{
		display: block;
	}

	#barchart560{
		display: none;
	}

	#barchart300{
		display: none;
	}
	span.foot{
		top: 230px;
	}
	.footnote div{
		width: 650px;
		font-size: 0.8em;
		padding-left: 20px;
	}
}
						
@media only screen and (max-width: 690px) {
	#icon-wrapper {
		height: 450px;
	}
	#section{
		width: 90%;
		padding-left:5%;
		padding-right:5%;
	}
	.slide-icon {
		width: 200px;
		height: auto;
		position: absolute;
		margin-top: -200px;
	}
	.icon-slide-container {
		height: 210px;
		width: 230px;
		left: 45%;
		margin-left: -100px;
	}
	.icons3 {
		width: 50%;
		position: relative;
		margin-left: 0%;
		margin-top: 230px;
	}
	#cflags{
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		display: inline;
	}	
	#sflags{
		width: 100%;
		float: left;
		display: none;
	}
	#I1indi {
		width: 45%;
	}
	#I1 div.data{
		margin-top: 60px;
	}
	.toplbl{
		font-size: 0.7em;
	}
	#barchart1000{
		display: none;
	}

	#barchart650{
		display: none;
	}

	#barchart560{
		display: block;
	}

	#barchart300{
		display: none;
	}
	span.foot{
		top: 195px;
	}
	.footnote div{
		width: 560px;
		font-size: 0.8em;
		padding-left: 20px;
	}
	#embedID{
		right: 5%;
	}
}
								  
@media only screen and (max-width: 570px) {
	#icon-wrapper {
		height: 360px;
		min-width: 330px;
	}
	.slide-icon {
		width: 150px;
		height: auto;
		position: absolute;
		margin-top: -150px;
	}
	.icon-slide-container {
		height: 180px;
		width: 150px;
		left: 50%;
		margin-left: -75px;
	}
	.icons3 {
		width: 50%;
		float: left;
		margin-left: 0%;
		margin-top: 190px;
	}
	#cflags{
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		display: inline;
	}	
	#sflags{
		width: 100%;
		float: left;
		display: none;
	}
	.subt{
		font-size: 0.9em;
	}
	h1{
		font-size: 1.2rem;
	}
	.fig {
		font-size: 1.5em;
		margin-top: 5px;
	}
	.indlab {
		font-size: 0.9em;
		margin: 2px;
	}
	.clasf {
		font-size: 0.9em;
	}
	#I1{
		height: 120px;
	}
	#I1indi {
		width: 150px;
		margin-left: 10%;
		margin-top: 40px;
		text-align: center;
	}
	#I1 div.data{
		margin-top: 60px;
		text-align: center;
		margin-right: 10px;
	}
	#I1Fig{
	}
	.toplbl{
		font-size: 0.5em;
	}
	.tick text{
		font-size: 0.6em;
	}
	#barchart1000{
		display: none;
	}

	#barchart650{
		display: none;
	}

	#barchart560{
		display: none;
	}

	#barchart300{
		display: block;
	}
	span.foot{
		font-size: 0.7em;
		margin-left: 10px;
		position: absolute;
		top: 160px;
		left: 0px;
	}
	.footnote div{
		width: 340px;
		font-size: 0.7em;
		padding-left: 10px;
	}
}

@media only screen and (max-width: 370px) {
	#icon-wrapper {
		height: 360px;
		min-width: 300px;
	}
	.slide-icon {
		width: 150px;
		height: auto;
		position: absolute;
		margin-top: -150px;
	}
	.icon-slide-container {
		height: 180px;
		width: 150px;
		left: 50%;
		margin-left: -75px;
	}
	.icons3 {
		width: 50%;
		float: left;
		margin-left: 0%;
		margin-top: 190px;
	}
	#cflags{
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		display: inline;
	}	
	#sflags{
		width: 100%;
		float: left;
		display: none;
	}
	.subt{
		font-size: 0.9em;
	}
	h1{
		font-size: 1.2rem;
	}
	.fig {
		font-size: 1.5em;
		margin-top: 5px;
	}
	.indlab {
		font-size: 0.9em;
		margin: 2px;
	}
	.clasf {
		font-size: 0.9em;
	}
	#I1{
		height: 120px;
		min-width: 300px;
	}
	#I1Control{
		width: 80%;
	}
	#I1indi {
		width: 150px;
		margin-left: 5%;
		margin-top: 40px;
		text-align: center;
	}
	#I1 div.data{
		margin-top: 60px;
		text-align: center;
		margin-right: 5%;
	}
	#I1Fig{
	}
	.toplbl{
		font-size: 0.5em;
	}
	.tick text{
		font-size: 0.6em;
	}
	#barchart1000{
		display: none;
	}

	#barchart650{
		display: none;
	}

	#barchart560{
		display: none;
	}

	#barchart300{
		display: block;
	}
	span.foot{
		font-size: 0.7em;
		margin-left: 10px;
		position: absolute;
		top: 160px;
		left: 0px;
	}
	.footnote div{
		width: 340px;
		font-size: 0.6em;
		padding-left: 10px;
	}
}