@charset "UTF-8";

/* CSS Document */




/* section styles */

h2 {
	
	font-size:1.3rem;
	font-weight: bold;
	letter-spacing:0.2rem;
}


h3 {
	
	color: #fff; 
	font-family: 'roboto', sans-serif; 
	text-transform: uppercase; 
	font-weight: 700; 
	font-size: 16px; 
	line-height: 22px; 
	letter-spacing: 0.16rem; 	
	
}
.blue {
	 
	 color: #0191D2;
  	 letter-spacing: 0.1rem; 
 }
 
#header_bg {
	background-image: url("../img/header_bg.jpg");	
}
	

#header {
	background-image: url("../img/header_image.png");	
	height: 900px;
	
}

#social {
	background-color:#122245;
	padding:5px 5px 5px 30px;
	height:52px;
	width:320px;
}

#logo {
	background-color: rgba(0,0,0,0.5);	
	padding: 10px 5px 10px 5px;
	text-align:center;
}

#logo a {
	font-size:0.65rem;
	color:#fff;
	text-decoration:underline;
	letter-spacing:0.07rem;
}

#nav {
	padding:100px 0 0 0;
	position:fixed;
	text-transform:uppercase;
		
}

#title_desktop {
	padding-top: 5.5rem;
	text-align:center;

}

li a {
	font-family:'UniversLTStd-LightUltraCn', Arial, san-serif;
	font-size:1.6rem;
	letter-spacing:0.1rem;
	color: #ffffff;
	padding:0 20px 0 0;
	
}


.number {
	font-family:'UniversLTStd-LightUltraCn', Arial, san-serif;
	font-size:2rem;
	letter-spacing:0.1rem;
	color: #0191D2;
	padding:0 20px 0 0;
}


#section1_image {
	background-image: url("../img/section1_stars.jpg");
	min-height: 860px;
	padding-top: 4rem;
	overflow:hidden;
}


#sect1_left {
	padding: 3rem 3rem 0 3rem;
	text-align:center;
}

#sect1_right {
	padding: 1.5rem 3rem 0 3rem;
	text-align:center;
}


.sect1_icon {
	padding-top:1rem;	
}

.big_number {
	font-size:5rem;
	line-height:5rem;
	font-family:'UniversLTStd-LightUltraCn', Arial, san-serif;
}

.projections {
	border: 3px solid #ffffff;
	border-radius: 50%;
	width: 300px;
	height: 300px;
	text-align:center;
	padding-top:3rem;
}


.projections p {
	text-transform:uppercase;
	font-weight:bold;
	letter-spacing: 0.1rem;
}

.sub {
	font-size: 1.5rem;
}


.huge_number {
	font-size:7rem;
	line-height:7rem;
	font-family:'UniversLTStd-LightUltraCn', Arial, san-serif;
	color:#0190D2;
}
	
.big_circle {	
	background-color: rgba(0,0,0,0.3);
	border-radius: 50%;
	width: 200px;
	height: 200px;
	padding-top:2rem ;
	text-align:center;
	margin: 0 auto;
}

#section3{
	padding-top:4rem;
}

#section3_image {
	
	background-image: url("../img/cell.jpg");
	height: 703px;
	padding-top: 4rem;
	
}
#section3_left {
	padding: 7rem 2rem 0 0;	
	
}

#section3_mid {
	text-align:center;
	
}

.section3_icon{
	text-align:left;
	float:left;	
	padding-bottom:0.7rem;
}


.section3_description p {
	font-size:1.8rem;
	letter-spacing:0.1rem;
	text-transform:uppercase;
	font-family:'UniversLTStd-LightUltraCn', Arial, san-serif;
}

.section3_description {	
	float:right;	
	
}

#section3_right {
	text-align:center;
	margin-top:7rem;
}

#section3_right p {
	text-shadow: 0 0 2px #fff;
	line-height: 5rem;
	margin-bottom:0;
}

.blue_box {
	background-color: #0191D2;
}


#section4_image {
	
	background-image: url("../img/pollution_sources.jpg");
	height: 679px;
	margin-bottom:70px;
}


#section4_B{
	padding-bottom:100px;
}


#section5 p {
	font-size:0.8rem;
	
}
.defbox {
	border: 1px solid #ffffff;
	padding: 1.5rem;
	margin-bottom:20px;
}

.define {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.3rem;
}


.description {
	text-transform: uppercase;
	letter-spacing: 0.16rem;
	font-weight:bold;
}

.button {
	background-color: #035c97;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	border:none;
	color:#ffffff;
	text-decoration:none;
	padding:9px 31px;
	text-transform:uppercase;
	font-weight:bold;
	font-size:0.8rem;
	letter-spacing:0.4rem;
}

.button:hover, .button:focus {
	background-color: #0191d2;
	color:#ffffff;
}





/* map styles */

#slider { width: 750px; left: 50%; margin-left: -375px; position: absolute; top: 900px;}
#slider:before { content:"1992"; display: block; color: #fff; position: absolute; right: 100%; margin-right: 20px; padding: 10px; top: -26px;font-family:'UniversLTStd-LightUltraCn', Arial, san-serif; letter-spacing: 0.16rem; font-size: 22px;}
#slider:after { content:"2025"; display: block; color: #fff; position: absolute; left: 100%; padding: 10px; top: -26px; margin-left: 20px;font-family:'UniversLTStd-LightUltraCn', Arial, san-serif; letter-spacing: 0.16rem; font-size: 22px;}

.map-container { width: 100%; position: relative;}

.map { width: 574px; height: 888px; background-image: url(../img/bg-map.png); background-repeat: no-repeat; background-position: center; margin: 0 auto 200px auto;}
.overlay {width: 574px; height: 888px; background-repeat: no-repeat; background-position: center;}
.m1992 { background-image: url(../img/1992.png);}
.m1993 { background-image: url(../img/1993.png);}
.m1994 { background-image: url(../img/1994.png);}
.m1995 { background-image: url(../img/1995.png);}
.m1996 { background-image: url(../img/1996.png);}
.m1997 { background-image: url(../img/1997.png);}
.m1998 { background-image: url(../img/1998.png);}
.m1999 { background-image: url(../img/1999.png);}
.m2000 { background-image: url(../img/2000.png);}
.m2001 { background-image: url(../img/2001.png);}
.m2002 { background-image: url(../img/2002.png);}
.m2003 { background-image: url(../img/2003.png);}
.m2004 { background-image: url(../img/2004.png);}
.m2005 { background-image: url(../img/2005.png);}
.m2006 { background-image: url(../img/2006.png);}
.m2007 { background-image: url(../img/2007.png);}
.m2008 { background-image: url(../img/2008.png);}
.m2009 { background-image: url(../img/2009.png);}
.m2010 { background-image: url(../img/2010.png);}
.m2011 { background-image: url(../img/2011.png);}
.m2012 { background-image: url(../img/2012.png);}
.m2013 { background-image: url(../img/2013.png);}
.m2014 { background-image: url(../img/2014.png);}
.m2015 { background-image: url(../img/2015.png);}
.m2016 { background-image: url(../img/2016.png);}
.m2017 { background-image: url(../img/2017.png);}
.m2018 { background-image: url(../img/2018.png);}
.m2019 { background-image: url(../img/2019.png);}
.m2020 { background-image: url(../img/2020.png);}
.m2021 { background-image: url(../img/2021.png);}
.m2022 { background-image: url(../img/2022.png);}
.m2023 { background-image: url(../img/2023.png);}
.m2024 { background-image: url(../img/2024.png);}
.m2025 { background-image: url(../img/2025.png);}
.noUi-horizontal { height: 4px!important;}
.noUi-handle { top: -13px!important; height: 26px!important; width: 26px!important; left: -13px!important; border-radius: 13px!important;  background-color: #0190d2!important; box-shadow: none!important; border: 3px solid white!important;}

.noUi-handle:hover, .noUi-handle:focus {
	cursor:pointer;
}

.map_key {	background-image: url(../img/map_key.png);
	width:763px;
	height:59px;
	top: 560px; 
	left:-93px;
	position:relative;}
	

.cta {
	background-image: url(../img/cta.png);
	width:160px;
	height:86px;
	top: 590px; 
	left:-220px;
	position:relative;
}

.map_description {
	
	font-family:Georgia, "Times New Roman", Times, serif;
	width:300px;
	left:500px;
	top:170px; 
	position:relative;
}

.key_description {
	font-family:Georgia, "Times New Roman", Times, serif;
}

.noUi-handle::after, .noUi-handle::before { display: none!important;}
.tooltip {background-color: #0190d2; color: #fff; display: block; position: absolute; top: 35px; width: 70px; text-align: center; left: 0px; margin-left: -25px; border-radius: 20px; font-weight: 700; font-size: 14px; padding: 5px 0px;}

.BrightnessLiHoverState{
	background-color: rgb(1, 144, 210);
	background-image: url("../img/arrow.png");
	background-position: right;
	background-repeat: no-repeat;
}

.credits {
	text-align:center;
	font-size: 1.3rem;
}


@media only screen and (max-width: 900px) {
.map-container { background-image: url(../img/map.gif); background-repeat: no-repeat; background-size: cover; width: 100%; padding-top: 100%;}
.map { display: none;}
#slider { display: none;}
}

/* Key styles */

#section_key { margin-bottom:40px; }

#key {overflow:hidden; margin-top:85px;}
	
.brightness-scale {  top: 0px; }
.brightness-scale h3 { color: #fff;  padding: 10px;font-family: 'roboto'; sans-serif; text-transform: uppercase; font-weight: 600; font-size: 16px; line-height: 22px; text-align: center; letter-spacing: 0.17rem; /*position: relative;*/ margin: 40px 0 0 0}

.brightness-scale li { color: #fff; list-style:none; font-size: 14px; list-style-position: inside; padding: 5px 8px; margin: 0 15px 0 0px; font-family:'UniversLTStd-LightUltraCn', Arial, san-serif; counter-increment: bulNum;letter-spacing: 0.16rem; text-shadow: 0px 0px 6px #000;border-bottom: 1px solid #ffffff;
}
.brightness-scale li:hover { background-color:#0190D2; background-image: url("../img/arrow.png"); background-position:right; background-repeat:no-repeat;}

.brightness-scale li span { font-family: 'roboto', sans-serif; text-transform: uppercase; }
.brightness-scale li span.units { font-family:'UniversLTStd-LightUltraCn', Arial, san-serif; float: right; font-size:1.1rem; }

.factsbox { border: 1px solid #FFF; margin-top:55px; padding: 10px; text-align:center; text-transform:uppercase;}
.small_circle {  background-color:#0190D2; border-radius: 50%; padding:1rem 1rem; text-align:center; margin: 0 auto; font-size:4rem; font-family:'UniversLTStd-LightUltraCn', Arial, san-serif; }
.location { padding: 6px 0; }
.facts_rhs {border-left: 1px solid #fff; }

.hidden { display:none; }

li {
	cursor:pointer;	
}

.lumen {padding-right:0px; padding-left:30px; padding-top: 30px; color: #0191D2;}

/* Social styles */

.social {

    text-align: center;
}
a.mt-share-inline-square-sm img {
  width: 40px;
  height: auto;
  border: 0px none;
}
a.mt-share-inline-square-sm {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  margin-right: 4px;
}
.mt-google:hover {
  background-color: rgb(225, 95, 79);
}
.mt-google {
  background-color: rgb(221, 75, 57);
}
.mt-reddit {
  background-color: #CEE3F8;
}
.mt-stumble {
  background-color: #eb4924;

}
.mt-reddit:hover {
 	background-color: #b3d7fa; 
}
.mt-stumble:hover {
  background-color: #f56d4e;

}
.mt-twitter:hover {
  background-color: rgb(8, 187, 255);
}
.mt-twitter {
  background-color: rgb(0, 172, 238);
}
.mt-facebook:hover {
  background-color: rgb(66, 100, 170);
}
.mt-facebook {
  background-color: rgb(59, 89, 152);
}

#nav .menuitem {
  position: relative;
  margin-left: 10px;
  padding: .4em .5em;
  color: white;
  font-family: 'roboto', arial, san-serif;
  text-transform:uppercase;
  background-color:#0190D2;
  font-size: 0.75rem;
  top:4px;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

#nav a:hover .menuitem {
	opacity:1;
}

#nav a span {
  float: left;
  display: inline-block;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
}
#nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

#nav .menuno {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}


/*responsive styles*/

#key_table_mobile {display:none;}

@media only screen and (max-width: 64.063em) {
	
#nav {display:none;}
	
.wow {
  visibility: visible !important;
  -webkit-animation: none !important;
     -moz-animation: none !important;
       -o-animation: none !important;
      -ms-animation: none !important;
          animation: none !important;
}
#section3_mid {display:none;}
#section3_right {display:none;}

#key_table_desktop {display:none;}
#key_table_mobile {display:block;}

.brightness_table h3 { color: #fff;  padding: 10px;font-family: 'roboto'; sans-serif; text-transform: uppercase; font-weight: 600; font-size: 16px; line-height: 22px; text-align: center; letter-spacing: 0.17rem; position: relative; margin: 70px 0 0 20px;}

.brightness_table li { color: #fff; list-style:none; font-size: 14px; list-style-position: inside; padding: 5px; margin: 0 20px; font-family: 'roboto'; sans-serif; text-transform: uppercase; letter-spacing: 0.16rem; border-bottom: 1px solid #ffffff; }
.location {background-color:#035c97; font-weight:600;}

.section3_icon {padding: 0 20px 10px 40px}
.section3_description {float:left;}

}