@import url(header.css);
@import url(content.css);
@import url(footer.css);

html {
	height: 100%;
	margin: 0 auto;
}

body {
	height: 100%;
	background-color: #0B2022;
}

body:after {
	position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   	content: url(/special/ucp/images/deforestation.jpg)
             url(/special/ucp/images/freshwatercrisis.jpg)
             url(/special/ucp/images/oceandeadzones.jpg)
             url(/special/ucp/images/temperaturesrising.jpg)
             url(/special/ucp/images/wildlifewipedout.jpg)
}

* {
	outline: none;
	focus: none;
}

#app {
	overflow-x: hidden;
}


@media screen and (max-width: 800px) {

	#header-ticker {
		height: 18vh;
	}

	.header-wt-logo {
		margin: 2em 0 0 5%;
	}

	.header-subText {
		margin-left: 5%;
	}

	.header-action-container {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		   -moz-box-orient: vertical;
		   -moz-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: left;
		-webkit-align-items: left;
		   -moz-box-align: left;
		    -ms-flex-align: left;
		        align-items: left;
		margin: 5% 0 5% 5%;
	}

	.header-cta {
		display: block;
		margin: 1% 0;
	}

	.header-takeAction-getinvolved, 
	.header-takeAction-photographers {
		font-size: 18px;
		font-size: 5.6vmin;
	}

	.header-arrow {
		display: inline;
		height: 3vmin;
	}

	.content-image-container {
		display: block;
		margin: 0 auto;
	}

	.content-fadeIn {
	    -webkit-animation: showImagesTwo 0.8s forwards;
	       -moz-animation: showImagesTwo 0.8s forwards;
	         -o-animation: showImagesTwo 0.8s forwards;
	            animation: showImagesTwo 0.8s forwards;
	    visibility: visible !important;
	}

	.content-photoheader {
		font-size: 5vmin;
	}

	.content-readnow {
		width: 60%;
	}

	.footer-row {
		display: block;
		-webkit-transform: translate(0, 0);
		   -moz-transform: translate(0, 0);
		    -ms-transform: translate(0, 0);
		     -o-transform: translate(0, 0);
		        transform: translate(0, 0);
	}

	.footer-column {
		margin: 0 auto;
	}

	.footer-getinvolved-container {
		margin: 4% 0 3% 5%;
	}


	.footer-give-adamn {
		margin: 0 0 2% 5%;
	}
	.footer-mobile-container { 
		margin:  5% 2% 10% 5%;
	}

	.footer-cta {
		min-width: 300px;
		margin: 0 0 2% 5%;
	}

	.footer-row {
		width: 90%;
		margin: 0 auto;
	}

	.footer-social-copy {
		margin-bottom: 10%;
	}

	.footer-twitter,
	.footer-facebook,
	.footer-copy-link {
		font-size: 38px;
		font-size: 9vmin;
	}

	#content-imageSix, 
	.content-offsetSix p,
	.content-offsetSix svg {
		display: none;
	}

}

@media screen and (max-width: 560px) {
	.content-photoheader {
		font-size: 20px;
	}

	.footer-shareText,
	.footer-partnership {
		font-size: 20px;
	}
}

@media screen and (max-width: 414px) {
	.footer-social:hover *,
	.header-cta:hover * {
		color: #ff3004;
		fill: #ff3004;
	}

	.footer-cta:hover rect {
		fill: #ff3004;
	}

	.footer-cta:hover path,
	.footer-cta:hover tspan {
		fill: #FAF6F6;
	}
}

@media screen and (max-height: 600px) {
	.content-photoheader {
		font-size: 20px;
	}
}

@media screen and (max-height: 450px) {

	.header-subText {
		font-size: 22px;
	}

	.header-takeAction-getinvolved, 
	.header-takeAction-photographers {
		font-size: 18px;
	}

	.header-arrow {
		height: 14px;
	}

	.footer-get-involved {
		font-size: 36px;
	}

	.footer-give-adamn {
		max-width: 750px;
		font-size: 26px;
	}

	.footer-shareText,
	.footer-partnership {
		font-size: 18px;
	}

	.footer-twitter,
	.footer-facebook,
	.footer-copy-link {
		font-size: 28px;
	}

	.footer-arrow {
		height: 20px;
	}
}