body {
    margin: 0;
}

body:after {
	content:"";
	background: url('http://d1diae5goewto1.cloudfront.net/_skins/pandaorg3/img/logo.png') no-repeat;
	background-size: contain;
	height: 80px;
	position:absolute;
		left:10px;
		top:0;
	width:102px;
	z-index:10001;
}

.contents { width:100%; max-width: 400px; margin: 0 auto; }


p {
	font-family: 'Open Sans', sans-serif;
	line-height:1.3em;
}

p.centralise { text-align: center; }

.wwf-button {
	float: left;
    margin: 0.3em 0 1em;
    text-align: center;
    width: 100%;
}

.wwf-button a, .wwf-button input[type="submit"], .wwf-button span {
	background:#FAA61A;
	border: none;
	border-bottom: solid 3px #F37043;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size:1.2em;
	padding:0.4em 0.5em;
	text-decoration: none;
}

.wwf-button.half {
	padding: 0 2%;
	text-align: left;
    width: 46%;
}

.wwf-button.half:nth-child(even) {
	text-align: right;
}

.wwf-button a.facebook {
	background:#3B5998;
	border-bottom: solid 3px #1d2c4c;
}

.wwf-button a.twitter {
	background:#00aced;
	border-bottom: solid 3px #0084b4;
}

h1, h2 {
	font-family: 'WWFRegular', sans-serif;
	font-weight: normal;
}

.hero {
    background: green;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 100px 5% 130px;
    position: relative;
    width: 90%;
}

.hero:before {
	content:"";
	background: rgba(0,0,0,0.3);
	height: 100%;
	position:absolute;
		left:0;
		top:0;
	width:100%;
	z-index: 1;
}

.hero:after {
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 82%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 82%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 82%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	content: "";
	height:60px;
	position: absolute;
		bottom:0;
		left:0;
	width:100%;
	z-index:2;
}

.feed:after {
	background: rgba(241,240,232,0);
	background: -moz-linear-gradient(top, rgba(241,240,232,0) 0%, rgba(241,240,232,0.47) 47%, rgba(241,240,232,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,240,232,0)), color-stop(47%, rgba(241,240,232,0.47)), color-stop(100%, rgba(241,240,232,1)));
	background: -webkit-linear-gradient(top, rgba(241,240,232,0) 0%, rgba(241,240,232,0.47) 47%, rgba(241,240,232,1) 100%);
	background: -o-linear-gradient(top, rgba(241,240,232,0) 0%, rgba(241,240,232,0.47) 47%, rgba(241,240,232,1) 100%);
	background: -ms-linear-gradient(top, rgba(241,240,232,0) 0%, rgba(241,240,232,0.47) 47%, rgba(241,240,232,1) 100%);
	background: linear-gradient(to bottom, rgba(241,240,232,0) 0%, rgba(241,240,232,0.47) 47%, rgba(241,240,232,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f0e8', endColorstr='#f1f0e8', GradientType=0 );
	content: "";
	height:60px;
	position: absolute;
		bottom:0;
		left:0;
	width:100%;
	z-index:2;
}

	.blue .hero:after {
		background: -moz-linear-gradient(top, rgba(68,200,245,0) 0%, rgba(68,200,245,1) 82%, rgba(68,200,245,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(68,200,245,0) 0%,rgba(68,200,245,1) 82%,rgba(68,200,245,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(68,200,245,0) 0%,rgba(68,200,245,1) 82%,rgba(68,200,245,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0044c8f5', endColorstr='#44c8f5',GradientType=0 ); /* IE6-9 */
		
	}

	.black .hero:after {
		background: rgba(255,255,255,0);
		background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(33,33,33,0.47) 47%, rgba(33,33,33,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(47%, rgba(33,33,33,0.47)), color-stop(100%, rgba(33,33,33,1)));
		background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(33,33,33,0.47) 47%, rgba(33,33,33,1) 100%);
		background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(33,33,33,0.47) 47%, rgba(33,33,33,1) 100%);
		background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(33,33,33,0.47) 47%, rgba(33,33,33,1) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(33,33,33,0.47) 47%, rgba(33,33,33,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#212121', GradientType=0 );
		
	}
	
	.green .hero:after {
		background: rgba(0,121,50,0);
		background: -moz-linear-gradient(top, rgba(0,121,50,0) 0%, rgba(0,121,50,0.47) 47%, rgba(0,121,50,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,121,50,0)), color-stop(47%, rgba(0,121,50,0.47)), color-stop(100%, rgba(0,121,50,1)));
		background: -webkit-linear-gradient(top, rgba(0,121,50,0) 0%, rgba(0,121,50,0.47) 47%, rgba(0,121,50,1) 100%);
		background: -o-linear-gradient(top, rgba(0,121,50,0) 0%, rgba(0,121,50,0.47) 47%, rgba(0,121,50,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,121,50,0) 0%, rgba(0,121,50,0.47) 47%, rgba(0,121,50,1) 100%);
		background: linear-gradient(to bottom, rgba(0,121,50,0) 0%, rgba(0,121,50,0.47) 47%, rgba(0,121,50,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007932', endColorstr='#007932', GradientType=0 );
	}

.hero img {
    left: 50%;
    height: 100%;
    margin-left: -50%;
    position: absolute;
}

.hero h1 {
    color: white;
	font-size: 2em;
	font-weight:normal;
	line-height: 1em;
	position:relative;
    text-transform: uppercase;
    text-align: center;
	z-index:2;
}

.hero h1 span {
    width: 100%;
    float: left;
    font-size: 2.5em;
    line-height: 0.8em;
	margin: 0.1em 0 0 0;
}

.intro, .feed {
	float: left;
    padding: 1em 5%;
    width: 90%;
}

	.intro { padding-top:0px; }

	.blue .intro { background: #44C8F5; color: white; }

	.black .intro { background: #212121; color: white; }

	.green .intro { background: #007932; color: white; }


.feed {
    background-position: 50% 0;
	background-size: cover;
	height: 500px;
	overflow: hidden;
	padding:0;
	position: relative;
	width:100%;
}

	.feed iframe {
		margin-top: -40px !important;
	}

	.feed .feed-overlay {
		background: rgba(0,0,0,0.4);
		color: white;
		height:600px;
		position: absolute;
			top: 0;
			left: 0;
		width:100%;
	}
	
	.feed .feed-overlay h2 {
		font-size: 2em;
		text-align: center;
		text-transform: uppercase;
		margin: 0 0 3em;
	}
	
.sign-up {
    background: white;
    float: left;
    width: 84%;
    margin: -250px 5% 20px 5%;
    padding: 3%;
    position: relative;
    z-index: 10001;
}

	.sign-up h2 {
		font-size: 2em;
		font-weight: normal;
		margin: 0 0 0.5em 0;
		text-align: center;
		text-transform: uppercase;
		width:100%;
	}

	.sign-up form {
		width:100%;
	}

	.sign-up form label {
		font-family: 'Open Sans', sans-serif;
		font-size:1em;
		line-height:1.3em;
		width:100%;
	}

	.sign-up form input[type="text"], .sign-up form input[type="email"],.sign-up form select {
		font-size: 1em;
		margin-bottom:0.5em;
		padding: 0.3em 0;
		width:100%;
	}


.slider, .slider a.item {
  float:left;
  position:relative;
  width:100%;
}

.slider {
	height:250px;
    padding: 2%;
	overflow-x:hidden;
	width:96%;
}

	.blue .slider{ background: #44C8F5; }

	.black .slider { background: #212121; }

	.green .slider { background: #007932; }

.slider.active a.item {
  margin-left:0;
  margin-right:0;
  opacity:1;
  position:absolute;
    left:5%;
    right:5%;
  transition: 1s;
  transform: scale(1);
  width:90%;
  z-index:2;
}

.slider.active#pos-1 a.item:nth-child(1){
  margin-left:-175%;
  opacity:0.7;
  transform: scale(0.8);
}

.slider.active#pos-1 a.item:nth-child(2){
  margin-left:-75%;
  opacity:0.7;
  transform: scale(0.8);
}

.slider.active#pos-2 a.item:nth-child(1){
  margin-left:-75%;
  opacity:0.7;
  transform: scale(0.8);
}

.slider.active#pos-2 a.item:nth-child(3){
  left: 80% !important;
  opacity:0.7;
  transform: scale(0.8);
  z-index:1;
}

.slider.active#pos-3 a.item:nth-child(2){
  left: 80% !important;
  opacity:0.7;
  transform: scale(0.8);
  z-index:1;
}

.slider.active#pos-3 a.item:nth-child(3){
  left: 180% !important;
  opacity:0.7;
  transform: scale(0.8);
  z-index:1;
}

.slider a.item img {
  width: 100%;
}

.slider a.item p.item-caption {
    color: white;
    font-size: 1em;
    padding: 2%;
	position: relative;
    margin: -50px 10% 0;
    width: 76%;
    z-index: 10000001;
}

	.slider a.item p.item-caption:before {
		background: black;
		content:"";
		height:100%;
		position: absolute;
			left:0;
			top:0;
		width:100%;
		z-index:-1;
	}

	.blue .slider a.item p.item-caption:before { background: #00728F; }

		.blue .slider a.item:hover p.item-caption:before { background: #007476; }
		
	.black .slider a.item p.item-caption:before { background: #BCB9B8; }
	
		.black .slider a.item p.item-caption{ color: #000000; }

		.black .slider a.item:hover p.item-caption:before { background: #D9D6D6; }
		
	.green .slider a.item p.item-caption:before { background: #B8DB9B; }
	
		.green .slider a.item p.item-caption{ color: #000; }

		.green .slider a.item:hover p.item-caption:before { background: #D3E27E; }

	.slider a.item:hover p.item-caption { background: black; }

	.slider a.item:hover p.item-caption { background: #BCB9B8; }

.slider .left-arrow, .slider .right-arrow {
  background: rgba(0,0,0,0.5) url('images/left.png');
  border-radius: 1em;
  cursor: pointer;
  display:none;
  height: 50px;
  margin-left:0;
  margin-right:0;
  position: absolute;
    top: 45%;
  transition: 1s;
  width:50px;
  z-index:4;
}

.slider.active .left-arrow, .slider.active .right-arrow { display: block; }

.slider .right-arrow {
  background: rgba(0,0,0,0.5) url('images/right.png');
  right: 25px;
}

.slider#pos-1 .right-arrow {
  margin-right: -150px;
}

.slider#pos-3 .left-arrow {
  margin-left: -150px;
}


footer {
	background: #f1f0e8;
	width: 100%;
}

footer .footer-logo {
    float: left;
}

footer .tagline {
    font-family: 'WWFRegular', sans-serif;
    font-size: 2.5em;
    line-height: 1em;
    padding: 0.4em;
    margin-top: 0.5em;
    /* float: left; */
}

footer .meta {
    padding: 0 5% 30px;
}