/* iPhone min portrait ----------- */
@media only screen 
 and (min-width : 320px) {


/* ------------------------------------------------------------------ */
/* General and Common Styles
/* ------------------------------------------------------------------ */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*::after, *::before {
  content: '';
}

.noscroll {
	position: absolute;
	overflow: hidden;
}


#hero a,
#details a,
#hero a:visited,
#details a:visited,
input {
	-webkit-transition:color .3s ease-in-out;
	-moz-transition:color .3s ease-in-out;
	-o-transition:color .3s ease-in-out;
	transition:color .3s ease-in-out;
	-webkit-transition:.5s;
	-moz-transition:.5s;
	-ms-transition:.5s;
	-o-transition:.5s;
	transition:.5s;

}

section p {
	text-align: left;
}

.section-head {
	padding:0 4%;
	text-align:center;
}

.section-head h1 {
	font:36px/48px montserrat-regular,sans-serif;
	color:#333;
	margin-bottom:22px;
}

/* for css animations */
.show {
	opacity:1;
}


.fancy a::before,.fancy a::after {
	pointer-events:none;
	backface-visibility:hidden;
}

/* Border */
a.link-border {
	color:#fff!important;
	-webkit-transition:-webkit-transform .2s;
	transition:transform .2s;
}

a.link-border:hover,.link-bordera:focus {
	-webkit-transform:scale(0.8333);
	transform:scale(0.8333);
	text-transform:uppercase;
	letter-spacing:1px;
	border-bottom:none;
}

a.link-border::before {
	position:absolute;
	top:-2px;
	left:-7px;
	box-sizing:content-box;
	padding:0 5px;
	width:100%;
	height:100%;
	border:2px solid #fff;
	content:'';
	opacity:0;
	-webkit-transition:opacity 0.2s,-webkit-transform .2s;
	transition:opacity 0.2s,transform .2s;
	-webkit-transform:scale(0.8333);
	transform:scale(0.8333);
}

a.link-border:hover::before,a.link-border:focus::before {
	opacity:1;
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
}

a.opennav {
	position:fixed;
	left:-100px;
	top:20px;
	z-index:900;
	color:#fff;
	padding:20px 12px 12px;
	height:70px;
	width:70px;
	text-align:center;
	background:rgba(54,49,49,0.4);
}

a.opennav:hover {
	color:#ffa492;
	background:#eb3833;
}

/* ------------------------------------------------------------------ */
/* Header Styles
/* ------------------------------------------------------------------ */
header {
	height:auto;
	padding-top: 5%;
	width:100%;
	background:none;
	position:absolute;
	left:0;
	top:0;
	z-index:990;
}

/* header logo */
header .logo {
		max-width:280px;
		height:auto;
/*
	width:365px;
	height:100px;
*/
	top:0px;
	left:5%;
	z-index:991;
	display:block;
	position:absolute;
}

header .logo a {
	display:block;
	margin:0 auto;
	padding:0;
	border:none;
	outline:none;
}


/* hidden stuff
--------------------------------------------------------------------- */

#nav-wrap-left a.close {
	display:block;
	padding:0;
	height:50px;
	width:50px;
	text-align:center;
	background:rgba(255,255,255,0);
	color:#ffffff;
	position:absolute;
	top:0px;
}

#nav-wrap-left a.close {
	font-size:26px;
	right:0px;
}


#nav-wrap-left a.close:hover {
	color:#eb3a34;
	background:rgba(255,255,255,1);
}

#nav-wrap-left,#nav-wrap-left ul,#nav-wrap-left li,#nav-wrap-left a {
	margin:0;
	padding:0;
	border:none;
	outline:none;
}

@keyframes animatedNavBackground {
	from {
		background-position:0 bottom;
	}
	
	to {
		background-position:100% bottom;
	}
}

@-webkit-keyframes animatedNavBackground {
	from {
		background-position:0 bottom;
	}
	
	to {
		background-position:100% bottom;
	}
}

@-ms-keyframes animatedNavBackground {
	from {
		background-position:0 bottom;
	}
	
	to {
		background-position:100% bottom;
	}
}

@-moz-keyframes animatedNavBackground {
	from {
		background-position:0 bottom;
	}
	
	to {
		background-position:100% bottom;
	}
}



#pageslide {
/* These styles MUST be included. Do not change. */
	display:none;
	position:absolute;
	position:fixed;
	top:0;
	height:100%;
	z-index:999999;
	overflow:auto;
/* Specify the width of your pageslide here */
	padding:0;
/* These styles are optional, and describe how the pageslide will look */
	color:#FFF;
	-webkit-box-shadow:inset -20px 0 20px 0 rgba(0,0,0,0.20);
	-moz-box-shadow:inset -20px 0 20px 0 rgba(0,0,0,0.20);
	box-shadow:inset -20px 0 20px 0 rgba(0,0,0,0.20);
}

#pageslide section {
	overflow-y:scroll;
}


/* nav-wrap */
#nav-wrap-left {
	font:13px montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1.5px;
	width:100%;
	height:100%;
	padding:20px;
	text-align:center;
	position:relative;
	overflow:hidden;
	background-color:#2269b3;
	background-image:url(../images/cloud3.jpg);
	background-position:200px 0;
	background-repeat:repeat-x;
	-webkit-box-shadow:inset -20px 0 20px 0 rgba(0,0,0,0.20);
	-moz-box-shadow:inset -20px 0 20px 0 rgba(0,0,0,0.20);
	box-shadow:inset -20px 0 20px 0 rgba(0,0,0,0.20);
	animation:animatedNavBackground 50s linear infinite;
	-ms-animation:animatedNavBackground 50s linear infinite;
	-moz-animation:animatedNavBackground 50s linear infinite;
	-webkit-animation:animatedNavBackground 50s linear infinite;
	display:none;
}

div#nav-left {
	min-height:54px;
	width:auto;
	position:relative;
	text-align:center;
}

div#nav-left {
	position:relative;
	list-style:none;
	height:54px;
}

div#nav-wrap-left .logo {
	margin: 30px auto;
	width: 200px;
	height: auto;
}

div#nav-wrap-left h4 {
	font:14px montserrat-regular,sans-serif;
	color:#fff;
	border:1px dotted rgba(255,255,255,0.5);
	line-height: 50px;
	width: 70%;
	margin: 0 auto 30px auto;
}



/* Links */
div#nav-left a {
/* 8px padding top + 8px padding bottom + 38px line-height = 54px */
	display:block;
	padding:8px 15px;
	line-height:34px;
	text-decoration:none;
	color:#fff;
	-webkit-transition:color .2s ease-in-out;
	-moz-transition:color .2s ease-in-out;
	-o-transition:color .2s ease-in-out;
	-ms-transition:color .2s ease-in-out;
	transition:color .2s ease-in-out;
}

div#nav-left a:hover {
	color:#eb3a34;
}

div#nav-left a:active {
	background-color:transparent!important;
}

div#nav-left .current a {
	color:#ffa492;
}

div#nav-left .accordionButton {
	cursor:pointer;
	clear:both;
	margin:0;
	padding:8px 15px 8px 30px;
	line-height:38px;
}

div#nav-left .accordionButton:before {
	font-size:22px;
	content:"+";
	float:right;
	color:#fff;
}

div#nav-left .accordionButton.active {
	color:#eb3a34;
}

div#nav-left .accordionButton.active:before {
	font-size:22px;
	content:"-";
	float:right;
	color:#eb3a34;
}

div#nav-left .accordionContent {
	display:block;
	text-align:center;
	padding:10px 0;
	margin:0 auto;
	max-width:320px;
}

div#nav-left .accordionContent a {
	font-size:12px;
	line-height:150%;
	padding:0!important;
	margin:15px auto;
}

.bubble {
	position:relative;
	padding:10px 0!important;
	background:rgba(255,255,255,0.2);
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:5px;
}

.bubble:after {
	content:'';
	position:absolute;
	border-style:solid;
	border-width:0 10px 10px;
	border-color:rgba(255,255,255,0.2) transparent;
	display:block;
	width:0;
	z-index:1;
	top:-10px;
	left:47%;
}

.sep {
	border-bottom:1px dotted rgba(255,255,255,0.5);
	display:block;
	height:2px;
	width:70%;
	margin:10px auto;
}




/* ------------------------------------------------------------------ */
/* Hero Section
/* ------------------------------------------------------------------ */

#hero {
/* 	height:100%; */
	color:#fff;
	z-index: 1000;
}


#hero .row {
	max-width:100%;
	width:100%;
}

#hero #facebook-login, #fb_box_fb_login_btn {
	top:20px;
	right:5%;
	z-index:991;
	display:block;
	position:absolute;
}



#hero .button {
	font:11px/30px montserrat-regular,sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	background:rgba(255,255,255,0.2);
	padding-right:20px;
	margin:30px auto;
	color:#fff;
	border:1px solid #fff;
}

#hero .button:hover {
	background:rgba(34,105,179,0.87);
}

#hero .button i {
	font-size: 18px;
	padding-right:13px;
	line-height:60%;
	padding-right:10px;
}


/* ------------------------------------------------------------------ */
/* Hero Slider Findings
/* ------------------------------------------------------------------ */

#hero {
	background-image:url(../images/hero-1.jpg);
	background-position: center center;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
	overflow:hidden;
	min-height:100%;
	height:100%;
	color:#fff;
}


/* ------------------------------------------------------------------ */
/* Hero FlexSlider
/* ------------------------------------------------------------------ */

ul.heroslider {
	height:100%;
	text-align:center;
	padding:0;
	margin:0;
}

ul.heroslider li {
	height:100%!important;
	text-align: center;
	margin-bottom:0px;
}

ul.heroslider li h2 {
	font:35px/50px montserrat-regular,sans-serif;
	color:#fff;
	text-align:center;
	padding-top:18%;
	margin:0 auto;
}

ul.heroslider li h3 {
	font:28px/46px opensans-light,sans-serif;
	color:#fff;
	text-align:center;
	padding: 20px 0px;
	margin:0 auto;
}



/* MainFindings BGs */
li#hero-1,li#hero-2,li#hero-3 {
	background-size:cover;
	background-repeat:no-repeat;
	overflow:hidden;
	height:100%!important;
}

li#hero-1 {
/*
	background-image:url(../images/hero-1.jpg);
	background-position: center center;
*/
}

/*
li#hero-2 {
	background-image:url(../images/hero-2.jpg);
}

li#hero-3 {
	background-image:url(../images/hero-3.jpg);
}
*/


#hero li .button {
	position:inherit;
	bottom: 20%;
	left: 0px;
	right: 0px;
	max-width: 260px;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-right: 40px;
}

#hero li .button i {
	font-size: 50px;
	line-height:60%;
	padding-right:10px;
}


.slider-prev a,.slider-next a {
	color:#fff;
	font-size: 30px;
}

.slider-prev a:hover,.slider-next a:hover {
	color:#eb3833;
}

.slider-prev {
	position:absolute;
	top:50%;
	left:30px;
	font-family:'Pe-icon-7-stroke';
}

.slider-next {
	position:absolute;
	top:50%;
	right:30px;
	font-family:'Pe-icon-7-stroke';
}

a.closecontent {
	font-size:15px;
	position:fixed;
	top:45%;
	left: 0;
	z-index:9999;
	color:#fff;
	padding:12px;
	height:70px;
	width:70px;
	text-align:center;
	background:rgba(235,58,52,0.9);
}

a.closecontent:hover {
	color:#eb3a34;
	background:rgba(255,255,255,0.5);
}


.sponsors {
  width: 320px;
  height: 65px;
  display: block;
  z-index: 999;
  position: absolute;
  bottom: 5%;
  right: 5%;
}

.sponsors a{
  background: transparent url(../images/sponsors.png) 0px 0px no-repeat;
  text-indent: -9999px;
  display: inline-block;
  width: 100px;
  height: 65px;
}

.sponsors a:hover{
  background-position-y: -64px!important;
}

.sponsors a.habitatseven{
  background: transparent url(../images/sponsors.png) 0px 0px no-repeat;
}

.sponsors a.climateinternational{
  background: transparent url(../images/sponsors.png) -110px 0px no-repeat;
}

.sponsors a.uscrt{
  background: transparent url(../images/sponsors.png) -220px 0px no-repeat;
  margin-right: 0px;
}



.disclaimer {
  display: block;
  z-index: 999;
  position: absolute;
  bottom: 5%;
  left: 5%;
  	font:10px/26px montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	color:#ffffff;
}

.disclaimer i {
	margin: 0 10px;
	line-height: 22px;
	margin-top:-6px;
}

.disclaimer:hover {
	color:#eb3a34;
}


#disclaimer, #aboutdata {
	width:100%;
	height:100%;
	padding:20px;
	text-align:left;
	position:relative;
/*
	overflow:hidden;
	background-color:#f7f7f7;
*/
	color: #5b5c61;
	display: none;
}

#disclaimer .heading, #aboutdata .heading  {
	font:20px/30px opensans-light,sans-serif;
	color:#2269b3;
	margin-top:100px;
	margin-bottom:12px;
}

#aboutdata .button {
	font:13px/40px montserrat-regular,sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	background:rgba(255,255,255,0.2);
	padding:12px 20px;
	margin:10px auto;
	color:#2269b3;
	border:1px solid #2269b3;
}

#aboutdata .button:hover {
	background:rgba(34,105,179,0.87);
	color:#fff;
}

#aboutdata .button i {
	font-size: 34px;
	padding-right:13px;
	line-height:60%;
	padding-right:10px;
}




/* ------------------------------------------------------------------ */
/* lightbox
/* ------------------------------------------------------------------ */
#imagelightbox {
	cursor:pointer;
	position:fixed;
	z-index:9999;
	-ms-touch-action:none;
	touch-action:none;
}

/* activity indication */
#imagelightbox-loading,#imagelightbox-loading div {
	border-radius:50%;
}

#imagelightbox-loading {
	width:2.5em;
/* 40 */
	height:2.5em;
/* 40 */
	background-color:#444;
	background-color:rgba(0,0,0,.5);
	position:fixed;
	z-index:999;
	top:50%;
	left:50%;
	padding:.625em;
/* 10 */
	margin:-1.25em 0 0 -1.25em;
/* 20 */
}

#imagelightbox-loading div {
	width:1.25em;
/* 20 */
	height:1.25em;
/* 20 */
	background-color:#fff;
	-webkit-animation:imagelightbox-loading .5s ease infinite;
	-moz-animation:imagelightbox-loading .5s ease infinite;
	-o-animation:imagelightbox-loading .5s ease infinite;
	animation:imagelightbox-loading .5s ease infinite;
}

@-webkit-keyframes imagelightbox-loading {
	from {
		opacity:.5;
		-webkit-transform:scale(.75);
	}
	
	50% {
		opacity:1;
		-webkit-transform:scale(1);
	}
	
	to {
		opacity:.5;
		-webkit-transform:scale(.75);
	}
}

@-moz-keyframes imagelightbox-loading {
	from {
		opacity:.5;
		-moz-transform:scale(.75);
	}
	
	50% {
		opacity:1;
		-moz-transform:scale(1);
	}
	
	to {
		opacity:.5;
		-moz-transform:scale(.75);
	}
}

@-o-keyframes imagelightbox-loading {
	from {
		opacity:.5;
		-o-transform:scale(.75);
	}
	
	50% {
		opacity:1;
		-o-transform:scale(1);
	}
	
	to {
		opacity:.5;
		-o-transform:scale(.75);
	}
}

@keyframes imagelightbox-loading {
	from {
		opacity:.5;
		transform:scale(.75);
	}
	
	50% {
		opacity:1;
		transform:scale(1);
	}
	
	to {
		opacity:.5;
		transform:scale(.75);
	}
}

/* lightbox overlay */
#imagelightbox-overlay {
	background-color:#383838;
	background-color:rgba(34,105,179,0.93);
	position:fixed;
	z-index:998;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

/* close button */
#imagelightbox-close {
	position:fixed;
	z-index:999;
	top:2.5em;
/* 40 */
	right:2.5em;
/* 40 */
}

#imagelightbox-close i {
	font-size:45px;
	line-height:50px;
	display:block;
	text-align:center;
	width:50px;
	height:50px;
	overflow:hidden;
	-webkit-box-shadow:0 0 2.5em rgba(0,0,0,.5);
/* 40 */
	-moz-box-shadow:0 0 2.5em rgba(0,0,0,.5);
/* 40 */
	box-shadow:0 0 2.5em rgba(0,0,0,.5);
/* 40 */
}

a#imagelightbox-close {
	color:#fff;
}

a#imagelightbox-close:hover,a#imagelightbox-close:focus {
	background:#fff;
	color:#d74528;
}

/* lightbox caption */
#imagelightbox-caption {
	text-align:center;
	color:#2269b3;
	background-color:#ffffff;
	position:fixed;
	z-index:999;
	left:0;
	right:0;
	bottom:0;
	padding:.625em;
/* 10 */
}

#imagelightbox-loading,#imagelightbox-overlay,#imagelightbox-close,#imagelightbox-caption {
	-webkit-animation:fade-in .25s linear;
	-moz-animation:fade-in .25s linear;
	-o-animation:fade-in .25s linear;
	animation:fade-in .25s linear;
}

@-webkit-keyframes fade-in {
	from {
		opacity:0;
	}
	
	to {
		opacity:1;
	}
}

@-moz-keyframes fade-in {
	from {
		opacity:0;
	}
	
	to {
		opacity:1;
	}
}

@-o-keyframes fade-in {
	from {
		opacity:0;
	}
	
	to {
		opacity:1;
	}
}

@keyframes fade-in {
	from {
		opacity:0;
	}
	
	to {
		opacity:1;
	}
}

@media only screen and (max-width: 41.250em) {
	/* 660 */
	#container {
		width:100%;
	}
	
	#imagelightbox-close {
		top:1.25em;
	/* 20 */
		right:1.25em;
	/* 20 */
	}
}


/* Portfolio Content */

.item {
	margin: 20px auto!important;
}

.item .item-wrap {
	background:none;
	overflow:hidden;
	position:relative;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}

/* overlay */
.item .item-wrap .overlay {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:0;
	-moz-opacity:0;
	filter:alpha(opacity=0);
	-webkit-transition:opacity .3s ease-in-out;
	-moz-transition:opacity .3s ease-in-out;
	-o-transition:opacity .3s ease-in-out;
	transition:opacity .3s ease-in-out;
	background:url(img/overlay-bg.png) repeat;
}

.item .item-wrap .link-icon {
	display:block;
	color:#fff;
	height:30px;
	width:30px;
	font-size:18px;
	line-height:30px;
	text-align:center;
	opacity:0;
	-moz-opacity:0;
	filter:alpha(opacity=0);
	-webkit-transition:opacity .3s ease-in-out;
	-moz-transition:opacity .3s ease-in-out;
	-o-transition:opacity .3s ease-in-out;
	transition:opacity .3s ease-in-out;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-15px;
	margin-top:-15px;
	z-index: 998;
}

.item .item-wrap img {
	vertical-align:bottom;
	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	-ms-transition:all .3s ease-out;
	transition:all .3s ease-out;
}

/* on hover */
.item:hover .overlay {
	opacity:1;
	-moz-opacity:1;
	filter:alpha(opacity=100);
}

.item:hover .link-icon {
	opacity:1;
	-moz-opacity:1;
	filter:alpha(opacity=100);
}


.item:hover .item-wrap img {
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}




/* ------------------------------------------------------------------ */
/* Footer
/* ------------------------------------------------------------------ */
footer {
	background:#f0f0f0;
	padding:50px 0 100px;
	font:11px/20px opensans-semibold,sans-serif;
	margin-bottom:0;
	font-weight:400;
	color:#2269b3;
}

footer a,footer a:visited {
	color:#eb3833;
}

footer a:hover,footer a:focus {
	color:#ffa492;
}

footer .footer-logo a {
	display:block;
	margin-bottom:12px;
	margin-top:12px;
	margin-left:3px;
}

footer .footer-logo a img {
	width:230px;
	height:120px;
}

footer .right-cols .columns {
	padding-right:5px;
	padding-left:5px;
	width:33.33333%;
}

footer .right-cols .columns p {
	margin-bottom:6px;
}

footer h3 {
	font:13px/24px opensans-semibold,sans-serif;
	margin-bottom:0;
	font-weight:400;
	color:#2269b3;
}

footer h3:before {
	font-family:'FontAwesome';
	margin:0 0 6px 3px;
	font-size:30px;
	line-height:48px;
	text-align:left;
	color:#eb3833;
	display:block;
}

footer h3.address:before {
	content:"\f041";
}

footer h3.social:before {
	content:"\f0c0";
}

footer h3.contact:before {
	content:"\f0e0";
}

footer ul {
	margin:0;
	padding:0;
}

footer ul li {
	margin:0;
	line-height:24px;
}

footer ul li a,footer ul li a:visited {
	color:#ffa492;
}

footer ul li a:hover,footer ul li a:focus {
	color:#eb3833;
}

/* copyright */
footer .copyright {
	margin:30px auto;
	padding:0 18px;
	clear:both;
}



/* ------------------------------------------------------------------ */
/* Content - Subpages
/* ------------------------------------------------------------------ */
@keyframes animatedBackground {
	from {
		background-position:100% 300px;
	}
	
	to {
		background-position:0 300px;
	}
}

@-webkit-keyframes animatedBackground {
	from {
		background-position:100% 300px;
	}
	
	to {
		background-position:0 300px;
	}
}

@-ms-keyframes animatedBackground {
	from {
		background-position:100% 300px;
	}
	
	to {
		background-position:0 300px;
	}
}

@-moz-keyframes animatedBackground {
	from {
		background-position:100% 300px;
	}
	
	to {
		background-position:0 300px;
	}
}

.content {
	background:#f3f3f3;
	padding:0;
	position:relative;
	width:100%;
	height:auto;
	background-image:url(../images/cloud1.png);
	background-position:0 300px;
	background-repeat:repeat-x;
	overflow:visible;
	animation:animatedBackground 50s linear infinite;
	-ms-animation:animatedBackground 50s linear infinite;
	-moz-animation:animatedBackground 50s linear infinite;
	-webkit-animation:animatedBackground 50s linear infinite;
/*
   padding-bottom: 120px;
*/
}

.content h1 {
	font:38px/46px opensans-light,sans-serif;
	color:#eb3a34;
	margin-bottom:30px;
}

.content .heading h4 {
	font:20px/30px opensans-light,sans-serif;
	color:#6d6e70;
	margin-top:120px;
	margin-bottom:12px;
	text-transform:uppercase;
	letter-spacing:2px;
}

.content p {
	font:15px/26px opensans-light,sans-serif;
	color:#353030;
}

.content .button {
	padding-right:50px;
	margin:30px auto;
	border:2px solid #ededed;
}

.content .button:hover {
	background:rgba(54,49,54,0.2);
}

.content .button i {
	padding-right:10px;
	line-height:80%;
}

.content .imagesummary {
	padding:0!important;
	position:relative;
	left:-10px;
	bottom:0;
	margin:0;
	max-height:300px;
	overflow:hidden;
}

.content .image {
	padding:0!important;
	position:relative;
	bottom:0;
	margin:0;
	overflow:hidden;
}

.content .image > img {
	border-bottom:1px solid #eb3833;
}


/* ------------------------------------------------------------------ */
/* Map Section
/* ------------------------------------------------------------------ */


#themap{
	background:#FFF;
	padding:0;
	position:relative;
	width:100%;
	height:100%;
}

#map {
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	display: inline-block;

}


/* ------------------------------------------------------------------ */
/* Hide Mobile Menu
/* ------------------------------------------------------------------ */

#mobile-menu, .cd-nav-trigger {
	display:none;
}

/* ------------------------------------------------------------------ */
/* Adjustments to account for mapbox.css box-sizing rules
/* ------------------------------------------------------------------ */


.leaflet-control-zoomslider-knob { width:14px; height:6px; }
.leaflet-container .leaflet-control-zoomslider-body {
  -webkit-box-sizing:content-box;
     -moz-box-sizing:content-box;
          box-sizing:content-box;
  }

#slider-wrapper, #controls-wrapper {
  position: absolute;
  left: 0;
  right:0;
  margin: 0 auto;
  width: 100%;
  height: 80px;
  background: #f0f0f0;
  z-index: 10000;
  text-align: center;
  display: block;
  }

#controls-wrapper {  
	top: 0%;
	-webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:    0px 10px 20px 0px rgba(0, 0, 0, 0.2);
	box-shadow:         0px 10px 20px 0px rgba(0, 0, 0, 0.2);
}

#slider-wrapper {  
	bottom: 0%;
	-webkit-box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:    0px -10px 20px 0px rgba(0, 0, 0, 0.2);
	box-shadow:         0px -10px 20px 0px rgba(0, 0, 0, 0.2);
}


#slider { 
  width:90%; 
  margin: 30px auto 0px auto;
  background: #2269b3 /* url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x */;
  height: 20px;
    border: none;
}

#slider.ui-corner-all {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#slider-wrapper .ui-slider-handle {
    border: none;
	width: 50px;
	height: 50px;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	margin-top: 15px;
	background: #fff /* url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x */;
	-webkit-box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:    0px 0px 17px 0px rgba(0, 0, 0, 0.3);
	box-shadow:         0px 0px 17px 0px rgba(0, 0, 0, 0.3);
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

a.ui-slider-handle.ui-state-default.ui-corner-all {
	font:12px/50px montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	text-align: center;
}

#slider-wrapper .ui-widget-header {
    border: none;
    background: #eb3a34;
    color: #ffffff;
    font-weight: bold;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: none;
    background: none;
    font-weight: bold;
    color: #2269b3;
}



.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: none;
    background: none;
    font-weight: bold;
    color: #2269b3;
}


.ui-slider-horizontal .ui-slider-handle {
	top: -30px;
	margin-left: -30px;
}

#themap .legend, #themap .legend-temp, #themap .legend-precip, #themap .legend-temp-other {
	width: 26px;
	height:383px;
	position: absolute;
	top: 50%;
	right: 40px;
	z-index: 8000;
	display: block;
	margin-top:-200px;
}


.leaflet-control-container {
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width: 30px;
	display: block;
	z-index: 9999;
}

.leaflet-top {
	height: 100%;
}

.leaflet-control {
	margin: 0!important;
}
.leaflet-control-mapbox-geocoder, .mapoptions-wrapper {
	top: 18%;
	left: 36px;
	width: 33px;
	height:33px;
	background: rgba(34,105,179,1)
}

.mapoptions-wrapper {
	top: 25%;
	position:absolute;
	display: block;
	z-index: 1000;
	border-radius: 100%;
	text-align: center;
}


.leaflet-control-mapbox-geocoder-toggle, .mapoptions {
	background: none;
	width: 33px!important;
	height:33px!important;
	font-family:'FontAwesome';
	margin:0;
	font-size:20px;
	line-height:35px;
	text-align:left;
	color:#ffffff;
	display:block;
	opacity: 1;
}

.leaflet-control-mapbox-geocoder-toggle:after, .mapoptions:after {
	content:"\f002";
	padding-left:3px;
	color:#ffffff;
}

.mapoptions:after {
	font-size:19px;
	content:"\f013";
	padding-left:8px;
	color:#ffffff;
}



.leaflet-control-mapbox-geocoder-toggle:hover, .mapoptions:hover {
    background: none!important;
    color: #2269b3;
   
}


.leaflet-control-mapbox-geocoder-results{
	width: 250px;
	position: absolute;
	left: 32px;
	top: 38px;
	border-radius: 5px;
	border:none!important;
	-webkit-box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	-moz-box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	
}

.leaflet-control-mapbox-geocoder-results a{
	color: #2269b3;
}

.leaflet-control-mapbox-geocoder-results a:hover {
	background: rgba(34,105,179,0.87);
	color:#fff;
	border-radius:5px!important;
}

/*
.leaflet-control-mapbox-geocoder .leaflet-control-mapbox-geocoder-wrap {
	background: #fff;
	position: absolute;
	border: none;
	border-color: rgba(0,0,0,.4);
	overflow: hidden;
	left: 32px;
	height: 33px;
	width: 280px!important;
	top: 0px;
	border-radius: 0 50px 50px 0;
	opacity: 0;
	-webkit-box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	-moz-box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);

	-webkit-transition: opacity 100ms;
	-moz-transition: opacity 100ms;
	-o-transition: opacity 100ms;
	transition: opacity 100ms;
}

.leaflet-control-mapbox-geocoder .leaflet-control-mapbox-geocoder-form input{
	font:20px/1.5em opensans-light,sans-serif;
	height: 33px;
	width: 280px;
}
*/

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
	color:#ffffff!important;
	background-color:rgba(34,105,179,0.87)!important;
}
::-webkit-input-placeholder {
   color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}
:-ms-input-placeholder {  
   color: #fff;  
}

.leaflet-control-zoomslider {
	left: 40px;
	margin: 0!important;
	top: 35%;
	-webkit-box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	-moz-box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
}

.leaflet-bar {
	border-radius: 50px;
	border: none;

}

.leaflet-control-zoomslider, .leaflet-bar a, .leaflet-bar a:hover, .leaflet-control-zoomslider-wrap {
	border: none;
}

.leaflet-bar a:hover:first-child {
	border-radius:50px;
}

.leaflet-bar a:hover:last-child  {
	border-radius:50px;
}

.leaflet-control-zoomslider-in {
	padding-top: 10px;
	margin-bottom: 10px;
}

.leaflet-control-zoomslider-out {
	padding-top: 10px;
	margin-bottom: 10px;
}

.leaflet-control-zoomslider-wrap {
	background-color: transparent;
}

.leaflet-control-zoomslider-body {
	border: none;
	background-color: white;
	border-radius: 50px;
}

.leaflet-control-zoomslider-knob {
	position: relative;
	width: 20px;
	height: 20px;
	background-color: #efefef;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	border: 1px solid rgba(109,110,112,0.56);
	margin-left: -9px;
}

#themap .logo, #themap .row, #themap #controls,#themap #facebook-share, #themap #gotodetails, #themap #opennasa , #themap #slider-holder{
	height:100%;
	display: block;
}

#themap .logo a {
	background: transparent  url(../images/controls-logo.png) center center no-repeat;
	text-indent: -9999px;
	display: block;
	height:100%;	
}

#themap .button {
	font:11px/1.3em montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	background:rgba(255,255,255,0.2);
	margin:0px auto;
	width: 100%;
	color:#2269b3;
	border:1px solid #fff;
	height:40px;
	overflow: hidden;
	float: left;
}

#themap .button:hover {
	background:rgba(34,105,179,0.87);
	color:#fff;
}

#themap .button i {
	padding-right:10px;
	line-height:100%;
	padding-right:10px;
}

#themap .scenarios, #themap .season, #themap .facebook-share {
	border:1px solid #fff;
	display: block;
	height:100%;
	padding: 10px;
	position: relative;
}

#fb_box_fb_logout_btn {
	position: absolute;
	top: 0;
	right:5px;
	font:9px/30px montserrat-regular,sans-serif;
}

#fb_share {
	position: absolute;
	top: 120px;
	right:24px;
	text-align: center;
	color: #fff;
	background: #2269b3;
	padding: 0px 20px 0px 5px;
	margin: 5px;
	border-radius: 30px;
	font:11px/36px montserrat-regular,sans-serif;
	cursor: pointer;
	overflow: hidden;
}

#fb_share:hover {
	background: rgba(34,105,179,0.87);
}

#fb_share i{
	font-size:18px;
	line-height: 36px;
	margin-right: 7px;
	margin-left: 7px;
}

#fb_box_fb_logout_btn:before {
	position: absolute;
	top: 0;
	left:-28px;
	font-family:'Pe-icon-7-stroke';
	margin:0 0 8px 3px;
	font-size:20px;
	line-height:28px;
	text-align:left;
	color:rgba(34,105,179,0.87);
	display:block;
	content:"\e681";
}


#themap span.smalltitle {
	font:8px/1.2em montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	position: relative;
	color: #6d6e70;
	display: block;
	width: 100%;
	text-align: left;
	padding: 0px 0px 5px 0px;	
}

#themap #facebook-share  {
	font:11px/50px montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	position: relative;
	color: #eb3a34;
	display: block;
	text-align: left;
}

#themap #facebook-share .fbpic {
	border-radius: 100%;
	width: 50px;
	height: 50px;
	vertical-align: middle;
	margin-right: 20px;
}


#themap #facebook-share .fbshare {
	vertical-align: middle;
	margin-right: 20px;
	cursor:pointer;
}


.pin {
	display: block;
	border:2px solid rgba(255,255,255,1);
	border-radius: 50% 50% 0 50%;
	overflow: hidden;
}



#themap .details, #themap .nasa {
	font:13px/1.3em montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	background:rgba(255,255,255,0.2);
	margin:0px auto;
	width: 100%;
	height: 100%;
	max-height: 100%;
	color:#2269b3;
	border:1px solid #fff;
}

#themap select {
	width: 100%;
	margin: 0 10px;
}

.temperature.active, .precipitation.active {
    border: none;
    background: #2269b3!important; 
    color: #FFF!important;
}

.scenarios-overlay{
	width: 100%;
	height: 100%;
	display: block;
	background: rgba(255,255,255,0.95);
	z-index: 10002;
	position: absolute;
	top: 0;
	left:0;
}

.scenarios-overlay h1{
	margin-top: 20%;
	margin-bottom: 20px;
	line-height: 1.4em;
}

.scenarios-overlay p {
	text-align: left;
}

.scenarios-overlay img {
	float: right;
	margin-left: 30px;
}

.scenarios-overlay .overlaybutton {
	font:11px/40px montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	background:rgba(255,255,255,0.2);
	padding: 20px;
	margin:0px auto;
	width: auto;
	color:#2269b3;
	border:1px solid rgba(34,105,179,0.87);
	overflow: hidden;
}

.scenarios-overlay .overlaybutton:hover {
	background:rgba(34,105,179,0.87);
	color:#fff;
	border:1px solid rgba(255,255,255,1);
}

.scenarios-overlay .overlaybutton i {
	padding-right:10px;
	line-height:100%;
	padding-right:10px;
}

.showoverlay {
	font-size: 20px;
	line-height: 25px;
	position: absolute;
	top: 0;
	right:5px;
	display: block;
	z-index: 9998;
}

.moveable {
  position: absolute;
  background:rgba(255,255,255,1);
  width: 2px;
  height: 100%;
  padding: 0!important;
  margin: 0;
  z-index: 100;
  top: 0;
  left: 0;
  cursor: col-resize;
/*
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow:    0px 10px 10px 0px rgba(0, 0, 0, 0.2);
  box-shadow:         0px 10px 10px 0px rgba(0, 0, 0, 0.2);
*/
}

#swipeImg {
	position: absolute!important;
	width: 70px!important;
	left: -34px!important;
	height: 36px!important;
	top: 45%!important;
	z-index: 90!important;
	display: block!important;
	border-radius: 20px!important;
	background: url(../images/swipe-arrows-stripe.png) center center rgba(34,105,179,0.87)!important;
}


#swipeImg .emissions-low, #swipeImg .emissions-high {
	position: absolute;
	width: 150px;
	height: 40px;
	display: block;
	text-align: center;
	margin-left: -180px;
	margin-top:-3px;
	background: rgba(255,255,255,0.83);
	font:12px/40px montserrat-regular,sans-serif;
	color:#2269b3;
	letter-spacing:1px;
	text-transform: uppercase;
	border: solid #fff 1px;
}

#swipeImg .emissions-high {
	margin-left: 100px;
}


.ol-control, .ol-control:hover {
	background: none;
}

.ol-zoom {
	top:32%;
	left: 37px;
	z-index:1000;
}
.ol-zoom span {
	display: none !important;
}
.ol-zoomslider {
	z-index:1000;
	top:40%!important;
	left:40px;
	background: #e9ebf4;
	border-radius: 20px;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2);
	background-color: rgba(255,255,255,0.5);
	}
.ol-zoomslider-thumb {
	z-index:1;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background:rgba(34,105,179,1);
	margin: 0;
}

.ol-zoom .ol-zoom-out{
	z-index:1;
	border-radius:0 0 20px 20px;
	background:rgba(34,105,179,1);
}

.ol-zoom .ol-zoom-in{
	z-index:1;
	border-radius:20px 20px 0 0;
	background:rgba(34,105,179,1);
}

.ol-zoom .ol-zoom-in:hover, .ol-zoom .ol-zoom-out:hover{
	background:rgba(34,105,179,0.8);
}

range {
	position: absolute;
	width: 100%;
}
/*
.leaflet-top .leaflet-control-zoom {
	top: 100px;
}
*/


/* SEARCHBOX AND RESULTS */

.rotate-north, #searchBox{
	position: absolute;
	top:115px!important;
	left:24px!important;
	z-index: 900;
}


  pre.ui-output {
    display:block;
    position:absolute;
    bottom:10px;
    left:10px;
    padding:5px 10px;
    background:rgba(0,0,0,0.5);
    color:#fff;
    font-size:11px;
    line-height:18px;
    border-radius:3px;
    max-height:50%;
    max-width:25%;
    overflow:auto;
    word-wrap: break-word;
    white-space:pre-wrap;
    }
    pre.ui-output:empty { padding:0; }


.searchlistresult{
	cursor:pointer;
	font:14px/30px 'opensans-regular',sans-serif;
    padding:10px 10px;
	min-width:400px;
    background:rgba(34,105,179,0.87);
    color:#fff;
	margin-left: 50px;
}

.searchlistresult:hover{
    background:rgba(34,105,179,1);
    color:#fff;
}
.searchlistresult:checked{
    background:rgba(255,74,74,1);
}

.searchlistresult:first-child { 
    border-radius:10px 10px 0 0;
}

.searchlistresult:last-child { 
    border-radius:0 0 10px 10px;
}



.leaflet-control-mapbox-geocoder .leaflet-control-mapbox-geocoder-wrap {
	background: #fff;
	position: absolute;
	border: none;
	border-color: rgba(0,0,0,.4);
	overflow: hidden;
	left: 32px;
	height: 33px;
	width: 280px!important;
	top: 0px;
	border-radius: 0 50px 50px 0;
	opacity: 0;
	-webkit-box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	-moz-box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);
	box-shadow:inset 0px 0 10px 0 rgba(0,0,0,0.20);

	-webkit-transition: opacity 100ms;
	-moz-transition: opacity 100ms;
	-o-transition: opacity 100ms;
	transition: opacity 100ms;
}

.rotate-north input, #searchBox input{
	background: url(../images/icon-search.png) 0px -3px no-repeat rgba(34,105,179,1);
	font:20px/1.5em opensans-light,sans-serif;
	height: 33px;
	width: 280px;
	border-radius: 20px;
	padding-left: 40px;
	color:#fff;

}


/* ------------------------------------------------------------------ */
/* Range Selector
/* ------------------------------------------------------------------ */


.range {
  position:relative;
  width:100%;
  top:75px!important;
  z-index: 10001!important;
  margin: 0;
  padding: 0;
}
  
.leaflet-top .leaflet-control-zoom {
  top:0px;
}

	input[type='range'] {
		-webkit-appearance: none;
		border-radius: 0px;
		box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2);
		background-color: rgba(255,255,255,0.5);
		height: 20px;
		vertical-align: middle;
	}
	input[type='range']::-moz-range-track {
		-moz-appearance: none;
		border-radius: 0px;
		box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2);
		background-color: rgba(255,255,255,0.5);
		height: 20px;
	}
	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none !important;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 20px 20px 0 20px;
		border-color: #2269b3 transparent transparent transparent;
		cursor:pointer;
	}

	input[type='range']::-moz-range-thumb {
		-moz-appearance: none;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 20px 20px 0 20px;
		border-color: #2269b3 transparent transparent transparent;
		cursor:pointer;

	}


	.emissions {
		display: block;
		position: absolute;
		top: 20%;
		left:0;
		right:0;
		width: 500px;
		margin: 0 auto;
		z-index: 9999;
		text-align: center;
	}
	
	.emissions .emissions-left, .emissions .emissions-right {
		background:rgba(255,255,255,0.9);
		border:1px solid rgba(235,58,52,1);
		margin: 10px;
		font:11px/50px montserrat-regular,sans-serif;
		text-transform:uppercase;
		letter-spacing:1px;
		color:#eb3a34;
		text-align: center;
		display: inline-block;
		position: relative;
		width: 40%;		
		cursor: default;
	}

	.emissions i {
		margin: 0 10px;
		line-height: 30px;
		margin: 0 10px;
		line-height: 48px;
		font-size: 28px;
		position: absolute;
		top: 0;
	}

	.emissions-left i {
		right: 0;
	}

	.emissions-right i {
		left: 0;
	}


	.scroll-helper {
		display: block;
		position: absolute;
		top:0;
		width:120px;
		height:100%;
	/*  background-color: rgba(255,74,93,0.24); FOR TESTING */
		text-indent: -9999px;
		z-index: 800;
	}

	.scroll-helper.right{
		right:0;
	}

	.scroll-helper.left{
		left:0;
	}



/* ------------------------------------------------------------------ */
/* Details Section
/* ------------------------------------------------------------------ */


#details {
	background: url(../images/details-bg1.jpg) center center #313336;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
	overflow:hidden;
	min-height:100%;
	color:#fff;
	font:14px/26px opensans-regular,sans-serif;
	padding-bottom: 80px;
}



#details h1, #details h3 {
	font:35px/50px montserrat-regular,sans-serif;
	color:#fff;
	text-align:center;
	padding: 20px 0px;
	margin:0 auto;
}

#details h3 {
	font:22px/38px opensans-light,sans-serif;
	margin-bottom: 20px;
}

#details #gotomap {
	height: 80px;
	text-align: center;
	
}

#details #gotomap .button {
	font:11px/1.3em montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	background:rgba(255,255,255,0.2);
	margin:0px auto;
	width: 100%;
	color:#2269b3;
	height:80px;
	overflow: hidden;
}

#details #gotomap .button:hover {
	background:rgba(34,105,179,0.87);
	color:#fff;
}

#details #gotomap .button i {
	padding-right:10px;
	line-height:100%;
	padding-right:10px;
}

#details #gotomap .gotomap {
	font:13px/1.3em montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	background:rgba(255,255,255,0.0);
	margin:0px auto;
	width: 100%;
	height: 100%;
	max-height: 100%;
	color:#ffffff;
	display: block;
}



}






/* ------------------------------------------------------------------ */
/* MEDIA QUERIES SMARTPHONES
/* ------------------------------------------------------------------ */




/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 768px) {

	.two-col {
	-moz-column-count:1;
	-moz-column-gap:0px;
	-webkit-column-count:1;
	-webkit-column-gap:0px;
	column-count:1;
	column-gap:0px;
	padding:0px;}


	#controls-wrapper {  
		display: none;
	}

	#gotodetails, #opennasa, #gotomap {
		display: none;
	}


	/* Header ----------- */

	header .logo{
		max-width:280px;
		height:auto;
		top:20px;
		left:auto;
		margin: 0 auto;
		z-index:991;
		display:block;
		position:relative;
	}

	#fb_box_fb_login_btn{
		margin:10px!important;
		top:0px;
		right:0px;
		border: none!important;
		background:none!important;
 		display: none; 
	}

	#fb_box_fb_login_btn span {
 		display: none; 
 	}

		/* Hero ----------- */

	#hero {
		min-height: 100%;
		height: auto;
		background-size:auto 100%;
		background-repeat:no-repeat;
		background-attachment:scroll;
	}




	ul.heroslider .row .eight{
		width:100%;
	}


	ul.heroslider li h2 {
		font:22px/30px montserrat-regular,sans-serif;
		color:#fff;
		text-align:center;
		padding:160px 10px 0px;
		margin:0 auto 30px;
		max-width:500px;
	}

	ul.heroslider li h3 {
/*
		font:16px/24px opensans-regular,sans-serif;
		color:#fff;
		text-align:center;
		padding: 20px 10px;
		margin:0 auto;
*/
		display: none;
	}

	#hero li .button {
		position:inherit;
		left: 0px;
		right: 0px;
		max-width: 260px;
		font-size: 16px;
		padding-right: 40px;
		letter-spacing: 1px;
		text-transform: uppercase;
		background:rgba(255,255,255,0.2);
		padding-right:20px;
		color:#fff;
		border:1px solid #fff;
		margin: 10px auto;
	}

	.disclaimer, .sponsors {
		position: relative;
		text-align: center;
		margin:20px auto;
		left: auto!important;
		right: auto!important;
		top: auto!important;
		bottom: auto!important;
		font:8px/26px montserrat-regular,sans-serif;
	}
	
	.disclaimer {
		width: 100px;
	}
		
		/* THE MAP ----------- */

	#mobile-menu, .cd-nav-trigger {
		display:block;
	}
	
		
	.scroll-helper {
		width:80px;
	}


	.ol-overlaycontainer-stopevent, .mapoptions-wrapper, #gotodetails, #opennasa {
		display: none!important;
	}

	#slider-holder.eight {
		width:100%;
	}
	
	#searchBox {
		top:0px!important;
		left: 0px!important;
		width: 100%!important;
	}

	.pad1{
		padding:0px!important;
	}

	#searchBox input{
		background: url(../images/icon-search.png) 10px 3px no-repeat rgba(34,105,179,1);
		font:22px/1.5em opensans-light,sans-serif;
		height: 50px;
		width: 100%;
		border-radius: 20px;
		padding-left: 50px;
		color:#fff;
		border-radius: 0px;
		-webkit-box-shadow: 0 10px 20px 1px rgba(0,0,0,.3);
		box-shadow: 0 10px 20px 1px rgba(0,0,0,.3);
	}


	#swipeImg {
		border-radius: 0px!important;
	}

	#swipeImg .emissions-low, #swipeImg .emissions-high {
		font:8px/40px montserrat-regular,sans-serif;
		margin-left: -110px;
		width: 100px;
	}

	#swipeImg .emissions-high {
		margin-left: 80px;
	}

	.searchlistbox {
	 max-width: 85%;
 	}


	#themap .legend, #themap .legend-temp, #themap .legend-precip, #themap .legend-temp-other{
		top: 55%;
		right: 10px;
	}





		/* Uncertainty ----------- */

	#details {
		background: #0f263e;
	}

	#details h1, #details h3 {
		font:22px/30px montserrat-regular,sans-serif;
		text-align: left;
	}



	.column.item {
		padding:0px;
	}


	
	/* ------------------------------------------------------------------ */
	/*  MOBILE MENU
	/* ------------------------------------------------------------------ */
	
	
	.cd-nav-trigger {
	  position: absolute;
	  display: inline-block;
	}
	
	.cd-nav-trigger {
	  top: 5px;
	  right: 5px;
	  height: 40px;
	  width: 40px;
	  z-index: 90005;
	  /* image replacement */
	  overflow: hidden;
	  text-indent: 100%;
	  white-space: nowrap;
	}
	.cd-nav-trigger .cd-icon {
	  /* icon created in CSS */
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  bottom: auto;
	  right: auto;
	  -webkit-transform: translateX(-50%) translateY(-50%);
	  -moz-transform: translateX(-50%) translateY(-50%);
	  -ms-transform: translateX(-50%) translateY(-50%);
	  -o-transform: translateX(-50%) translateY(-50%);
	  transform: translateX(-50%) translateY(-50%);
	  display: inline-block;
	  width: 18px;
	  height: 3px;
	  background-color: #ffffff;
	  z-index: 90010;
	}
	.cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon::after {
	  /* upper and lower lines of the menu icon */
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	  background-color: #ffffff;
	  /* Force Hardware Acceleration in WebKit */
	  -webkit-transform: translateZ(0);
	  -moz-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  -o-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	  /* apply transition to transform property */
	  -webkit-transition: -webkit-transform .3s;
	  -moz-transition: -moz-transform .3s;
	  transition: transform .3s;
	}
	.cd-nav-trigger .cd-icon::before {
	  -webkit-transform: translateY(-6px) rotate(0deg);
	  -moz-transform: translateY(-6px) rotate(0deg);
	  -ms-transform: translateY(-6px) rotate(0deg);
	  -o-transform: translateY(-6px) rotate(0deg);
	  transform: translateY(-6px) rotate(0deg);
	}
	.cd-nav-trigger .cd-icon::after {
	  -webkit-transform: translateY(6px) rotate(0deg);
	  -moz-transform: translateY(6px) rotate(0deg);
	  -ms-transform: translateY(6px) rotate(0deg);
	  -o-transform: translateY(6px) rotate(0deg);
	  transform: translateY(6px) rotate(0deg);
	}
	.cd-nav-trigger::before, .cd-nav-trigger::after {
	  /* 2 rounded colored backgrounds for the menu icon */
	  position: absolute;
	  top: 0;
	  left: 0;
	  border-radius: 50%;
	  height: 100%;
	  width: 100%;
	  /* Force Hardware Acceleration in WebKit */
	  -webkit-transform: translateZ(0);
	  -moz-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  -o-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	  -webkit-transition-property: -webkit-transform;
	  -moz-transition-property: -moz-transform;
	  transition-property: transform;
	}
	.cd-nav-trigger::before {
	  background-color: rgba(34,105,179,0.87);
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	  transform: scale(1);
	  -webkit-transition-duration: 0.3s;
	  -moz-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	  -webkit-transition-delay: 0.4s;
	  -moz-transition-delay: 0.4s;
	  transition-delay: 0.4s;
	}
	.cd-nav-trigger::after {
	  background-color: #eb3a34;
	  -webkit-transform: scale(0);
	  -moz-transform: scale(0);
	  -ms-transform: scale(0);
	  -o-transform: scale(0);
	  transform: scale(0);
	  -webkit-transition-duration: 0s;
	  -moz-transition-duration: 0s;
	  transition-duration: 0s;
	  -webkit-transition-delay: 0s;
	  -moz-transition-delay: 0s;
	  transition-delay: 0s;
	}
	.cd-nav-trigger.close-nav::before {
	  /* user clicks on the .cd-nav-trigger element - 1st rounded background disappears */
	  -webkit-transform: scale(0);
	  -moz-transform: scale(0);
	  -ms-transform: scale(0);
	  -o-transform: scale(0);
	  transform: scale(0);
	}
	.cd-nav-trigger.close-nav::after {
	  /* user clicks on the .cd-nav-trigger element - 2nd rounded background appears */
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	  transform: scale(1);
	  -webkit-transition-duration: 0.3s;
	  -moz-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	  -webkit-transition-delay: 0.4s;
	  -moz-transition-delay: 0.4s;
	  transition-delay: 0.4s;
	}
	.cd-nav-trigger.close-nav .cd-icon {
	  /* user clicks on the .cd-nav-trigger element - transform the icon */
	  background-color: rgba(255, 255, 255, 0);
	}
	.cd-nav-trigger.close-nav .cd-icon::before, .cd-nav-trigger.close-nav .cd-icon::after {
	  background-color: white;
	}
	.cd-nav-trigger.close-nav .cd-icon::before {
	  -webkit-transform: translateY(0) rotate(45deg);
	  -moz-transform: translateY(0) rotate(45deg);
	  -ms-transform: translateY(0) rotate(45deg);
	  -o-transform: translateY(0) rotate(45deg);
	  transform: translateY(0) rotate(45deg);
	}
	.cd-nav-trigger.close-nav .cd-icon::after {
	  -webkit-transform: translateY(0) rotate(-45deg);
	  -moz-transform: translateY(0) rotate(-45deg);
	  -ms-transform: translateY(0) rotate(-45deg);
	  -o-transform: translateY(0) rotate(-45deg);
	  transform: translateY(0) rotate(-45deg);
	}
	
	.cd-primary-nav {
	  /* by default it's hidden */
	  position: fixed;
	  left: 0;
	  top: 0;
	  height: 100%;
	  width: 100%;
	  padding: 80px 20%;
	  margin: 0;
	  z-index: 90003;
	  background-color: #f0f0f0;
	  overflow: auto;
	  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
	  -webkit-overflow-scrolling: touch;
	  visibility: hidden;
	  opacity: 0;
	  -webkit-transition: visibility 0s, opacity 0.3s;
	  -moz-transition: visibility 0s, opacity 0.3s;
	  transition: visibility 0s, opacity 0.3s;
	}
	.cd-primary-nav li {
	  margin: 5px auto;
	  max-width: 200px;
	  text-align: center;
	  text-transform: uppercase;
	}
	.cd-primary-nav {
	font:13px montserrat-regular,sans-serif;
	text-transform:uppercase;
	letter-spacing:1.5px;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  -webkit-transition: color 0.2s;
	  -moz-transition: color 0.2s;
	  transition: color 0.2s;
	}
	.no-touch .cd-primary-nav a:hover {
	  color: #eb3a34;
	}
	.cd-primary-nav.fade-in {
	  /* navigation visible at the end of the circle animation */
	  visibility: visible;
	  opacity: 1;
	}
/*
	@media only screen and (min-width: 768px) {
	  .cd-primary-nav li {
	    margin: 2em 0;
	  }
	  .cd-primary-nav a {
	    font-size: 28px;
	    font-size: 1.75rem;
	  }
	}
	@media only screen and (min-width: 1170px) {
	  .cd-primary-nav li {
	    margin: 2.6em 0;
	  }
	  .cd-primary-nav a {
	    font-size: 32px;
	    font-size: 2rem;
	  }
	}
*/
	
	.cd-overlay-nav, .cd-overlay-content {
	  /* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
	  position: fixed;
	  top: 0;
	  right: 0;
	  height: 4px;
	  width: 4px;
	  -webkit-transform: translateX(-20px) translateY(20px);
	  -moz-transform: translateX(-20px) translateY(20px);
	  -ms-transform: translateX(-20px) translateY(20px);
	  -o-transform: translateX(-20px) translateY(20px);
	  transform: translateX(-20px) translateY(20px);
	}
	.cd-overlay-nav span, .cd-overlay-content span {
	  display: inline-block;
	  position: absolute;
	  border-radius: 50%;
	  /* Force Hardware Acceleration in WebKit */
	  -webkit-transform: translateZ(0);
	  -moz-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  -o-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	  will-change: transform;
	  -webkit-transform-origin: 50% 50%;
	  -moz-transform-origin: 50% 50%;
	  -ms-transform-origin: 50% 50%;
	  -o-transform-origin: 50% 50%;
	  transform-origin: 50% 50%;
	  -webkit-transform: scale(0);
	  -moz-transform: scale(0);
	  -ms-transform: scale(0);
	  -o-transform: scale(0);
	  transform: scale(0);
	}
	.cd-overlay-nav.is-hidden, .cd-overlay-content.is-hidden {
	  /* background fades out at the end of the animation */
	  opacity: 0;
	  visibility: hidden;
	  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
	  -moz-transition: opacity .3s 0s, visibility 0s .3s;
	  transition: opacity .3s 0s, visibility 0s .3s;
	}
	
	.cd-overlay-nav {
	  /* main rounded colored bg 1 */
	  z-index: 90002;
	}
	.cd-overlay-nav span {
	  background-color: #f0f0f0;
	}
	
	.cd-overlay-content {
	  /* main rounded colored bg 2 */
	  z-index: 90004;
	}
	.cd-overlay-content span {
	  background-color: #eb3a34;
	}
	
	
	

/* 	veeery specific css */

 	.cd-primary-nav li.datasets{
	 	min-height: 80px;
	}

 	.cd-primary-nav .smalltitle{
	 	margin: 20px 0 0;
	}



.searchlistresult{
	min-width:200px;
	max-width:280px;
}



}


@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
	#hero {
		min-height: 100%;
		height: auto;
		background-size:auto 100%;
		background-repeat:no-repeat;
		background-attachment:scroll;
	}
	
	ul.heroslider li h3 {
		display: none;
	}

}



/* iPhone min portrait ----------- */
@media only screen 
 and (min-width : 0px) and (max-width : 321px) {

	#swipeImg .emissions-low, #swipeImg .emissions-high {
		display: none!important;
	}

}



/* iPhone min portrait ----------- */
@media only screen 
 and (min-width : 0px) and (max-width : 667px) {

	#searchBox {
		display: none!important;
	}

}