*{
	box-sizing: border-box;
}

/* TYPOGRAPHY */
	@font-face{
		font-family: 'SuperPower';
	    font-style: normal;
	    font-weight: normal;
	    src: url('../fonts/SuperPower.woff2') format('woff2'),
	         url('../fonts/SuperPower.woff') format('woff');
	}

	@font-face{
		font-family: 'OpenSans';
	    font-style: normal;
	    font-weight: normal;
	    src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
	         url('../fonts/OpenSans-Regular.woff') format('woff');
	}

	@font-face{
		font-family: 'OpenSansBold';
		font-style: normal;
		font-weight: normal;
		src: url('../fonts/OpenSans-Bold.woff2') format('woff2'), 
			 url('../fonts/OpenSans-Bold.woff') format('woff');
	}

	@font-face{
		font-family: 'OpenSansItalic';
		font-style: normal;
		font-weight: normal;
		src: url('../fonts/OpenSans-BoldItalic.woff2') format('woff2'), 
			 url('../fonts/OpenSans-BoldItalic.woff') format('woff');
	}

	.displayType{
		font-family: 'SuperPower';
	}

	#mobNavExpand a, #tdHome, #tdMig, #tdFAQ, #tdDono, .bodyCopy, .button{
		font-family: 'OpenSans';
	}

	.bold{
		font-family: 'OpenSansBold';
	}

	.sansHead{
		font-family: 'OpenSansItalic';
	}

	#mobNavExpand a, .button{
		text-align: center;
		text-decoration: none;
	}
/**/

/* ///// SHARED GLOBAL STYLES ///// */

	/* POSITION/DISPLAY/LAYERING */
		section, .container, sub, .leaveHero, .bkgCirc, .resbox, footer{
			position: relative;
		}

		.bubble, .skySwoop, .donateDip, .introBottom, .statBottom, #oceanOdd .map, .odysseySwoop, .blueSwirl{
			position: absolute;
		}

		#mobNavExpand, .menuWrap, .answerOne, .answerTwo, .answerThree, .answerFour{
			display: none;
		}

		.flexbox{
			display: flex;
		}

		.introBottom, .skySwoop, #intro .odysseySwoop{
			transform: scaleX(-1);
		}

		.leaveHero, #resources{
			z-index: 2;
		}
	/**/

	/* MARGINS/PADDING */
		section, .container, .leaveHero, footer{
			margin-left: auto;
			margin-right: auto;
		}
	/**/

	/* HEIGHT/WIDTH */
		nav, #mobNavExpand, .skySwoop, .odysseySwoop, .blueSwirl, .donateDip, .introBottom, .statBottom{
			width: 100%;
		}

		.noFlow, #hero{
			min-height: 100vh;
		}
	/**/

	/* COLOR STYLES */
		#stat, #oceanOdd{
			background: #E8F9F9;
		}

		#letsdonate, footer{
			background: #042033;
		}

		#intro p, #stat h1, #stat p, #oceanOdd h1, #oceanOdd p, #resources h1{
			color: #042033;
		}

		#mobNavExpand a, #tdHome, #tdMig, #tdDono, #tdFAQ, #hero h1, #abt h1, #abt p, .diveIn, #letsdonate h1, #letsdonate p, .give, .resLabel, footer{
			color: #E8F9F9;
		}

		.menuStroke, .back, .showHide, .leave{
			fill: #E8F9F9;
		}

		.equalFill{
			fill: #042033;
		}

		#oceanOdd .map{
			opacity: 50%;
		}
	/**/

	/* IMAGE FITTING */
		.img{
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.statbg, .statWhale, .statTree, .donoprevbg{
			background-repeat: no-repeat;
			background-size: 100%;
		}
	/**/

		a, #faqOne, #faqTwo, #faqThree, #faqFour{
			cursor: pointer;
		}
/**/

.noFlow{
	overflow: hidden !important;
}

nav{
	background-color: #042033;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
	position: fixed;
	z-index: 99;
}

.logo{
	background-image: url(../images/logo.png);
	background-size: 100% !important;
}

a{
	display: block;
	text-decoration: none;
}

.skySwoop, .donateDip, .introBottom{
	background-image: url(../images/heroswoop.webp);
}

sub{
	bottom: -0.25em;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

.statBottom{
	background-image: url(../images/statswoopnew2.svg);
}

#oceanOdd .map{
	background-image: url(../images/Pacificmap.svg);
}

.odysseySwoop, .blueSwirl{
	background-image: url(../images/odysseyswoop.svg);
}

.shWrap{
	margin-left: auto;
	margin-right: 0;
}

.bubble{
	background-image: url(../images/bubble.svg);
	opacity: 25%;
	z-index: 0;
}

#letsdonate{
	z-index: 1;
}

#letsdonate .container{
	z-index: 10;
}

#stat .bubble{
	z-index: 4;
}

footer{
	z-index: 5;
}

#arrowSVG{
	transition: 350ms;
}

.flipFooter{
	animation: flipfoot 300ms ease forwards;
}

@keyframes flipfoot{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(180deg);
	}
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}

	/* TYPOGRAPHY */
		#stat h1, .copyright{
			text-align: right;
		}

	/* POSITION/DISPLAY/LAYERING */
		#mobNavExpand, #intro p, .statWhale, .statTree, .resLabel{
			position: absolute;
		}

		.tdNav{
			display: none;
		}

		.menuWrap, .xWrap{
			display: block;
		}
	/**/

	#mobNavExpand{
		background-color: #042033;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
		padding-bottom: 40%;
		padding-top: 7%;
		top: 0;
		z-index: 100;
	}

	#mobNavExpand a{
		font-size: 6vw;
		margin-bottom: 7.142857142857142%;
	}

	#mobNavExpand .bigBub{
		left: 36%;
		padding-top: 36%;
		top: 112%;
		width: 36%;
	}

	#mobNavExpand .medBub{
		left: 0%;
		padding-top: 25%;
		top: 100%;
		width: 25%;
	}

	#mobNavExpand .smallBub{
		left: 78%;
		padding-top: 20%;
		top: 90%;
		width: 20%;
	}

	.logWrap{
		margin-right: 44%;
		padding-bottom: 2%;
		padding-top: 2%;
		width: 46.428571428571429%;
	}

	.logo{
		height: 12vw;
		width: 100%;
	}

	.menuWrap{
		padding-top: 7%;
		width: 8%;
	}

	.xWrap{
		margin-left: 93%;
		width: 5%;
	}

	.button{
		border-radius: 2.5vw 0 2.5vw 0;
		font-size: 3vw;
		line-height: 8vw;
		width: 28%;
	}

	p{
		font-size: 3.5vw;
		line-height: 4.5vw;
	}

	.bigBub{
		padding-top: 36%;
		width: 36%;
	}

	.medBub{
		padding-top: 25%;
		width: 25%;
	}

	.smallBub{
		padding-top: 20%;
		width: 20%;
	}

	#stat h1:nth-of-type(2), #oceanOdd h1:nth-of-type(2), #letsdonate h1:nth-of-type(3){
		padding-bottom: 3.571428571428571%;
	}

	/* ///// HERO SECTION ////////// */
		.heroImg{
			background-image: url(../images/mobile/heroimg_m.webp);
		}

		#hero{
			margin-bottom: 8%;
		}

		#hero .container{
			z-index: 1;
		}

		#hero h1{
			font-size: 14vw;
			text-shadow: 1vw 1vw 3vw rgba(0, 0, 0, 0.70);
		}

		#hero h1:nth-of-type(1){
			padding-top: 28.571428571428571%;
		}

		#hero h1:nth-of-type(2){
			margin-left: 32.857142857142857%;
		}

		#hero h1:nth-of-type(3){
			margin-left: 5%;
			padding-bottom: 28.571428571428571%;
		}

		.leaveHero{
			filter: drop-shadow(0.5vw 0.5vw 0.5vw #000);
			padding-bottom: 48%;
			padding-top: 7.142857142857142%;
			width: 14.285714285714286%;
		}

		#hero .bigBub{
			left: 0%;
			top: 62%;
		}

		#hero .medBub{
			left: 72%;
			top: 64%;
		}

		#hero .smallBub{
			left: 45%;
			top: 84%;
		}

		.skySwoop{
			padding-top: 58%;
			top: -35%;
		}
	/**/

	/* ///// INTRO PANEL ////////// */
		#intro p{
			font-size: 3.25vw;
		}

		#intro p:nth-of-type(1){
			margin-right: 26.785714285714286%;
			padding-top: 7.142857142857142%;
		}

		#intro p:nth-of-type(2){
			margin-left: 26.785714285714286%;
			padding-top: 28.571428571428571%;
		}

		.whaleBreach{
			background-image: url(../images/mobile/newbreach_m.webp);
			padding-top: 150%;
		}

		#intro .odysseySwoop{
			padding-top: 60%;
			top: 68%;
		}
	/**/

	/* ///// WHAT WE DO ////////// */
		.abtbg{
			background-image: url(../images/mobile/abtbg_m.webp);
		}

		#abt h1{
			font-size: 10vw;
		}

		#abt h1:nth-of-type(1){
			padding-top: 7.142857142857142%;
		}

		#abt h1:nth-of-type(2){
			margin-bottom: 1rem;
			margin-left: 19.642857142857143%;
		}

		#abt p{
			margin-left: 26.785714285714286%;
			padding-bottom: 72%;
			text-shadow: 0 0.2vw 1.5vw #000000;
		}

		.introBottom{
			padding-top: 58%;
			top: 64%;
		}
	/**/

	/* ///// CO2 CHAMPS ////////// */
		.statbg{
			background-image: url(../images/mobile/statbg_m.webp);
		}

		#stat h1{
			font-size: 10vw;
		}

		#stat h1:nth-of-type(2){
			margin-right: 12.5%;
		}

		#stat p{
			margin-right: 26.785714285714286%;
			padding-bottom: 14.285714285714286%;
		}

		.bkgCirc{
			background-color: #042033;
			border-radius: 100%;
			box-shadow: 0vw 1vw 3vw 2vw rgba(0, 0, 0, 0.25);
			padding-top: 80%;
			right: 53.571428571428571%;
			width: 80%;
		}

		.circOne{
			right: 53.571428571428571%;
		}

		.statWhale{
			background-image: url(../images/mobile/statWhale_m.webp);
			left: 18%;
			padding-top: 44%;
			top: 32%;
			width: 130.714285714285714%;
		}

		.circTwo{
			left: 64%;
			margin-top: -20%;
		}

		.statTree{
			background-image: url(../images/mobile/statTree1_m.webp);
			padding-top: 40%;
			width: 48%;
			z-index: 2;
		}

		.treeOne, .treeThree{
			right: 47%;
		}

		.treeOne{
			top: -20%;
		}

		.treeTwo{
			right: 74%;
			top: 25%;
		}

		.treeThree{
			top: 60%;
		}

		#stat .bubble{
			z-index: 4;
		}

		#stat .bigBub{
			left: 62%;
			top: 96%;
		}

		#stat .medBub{
			left: 4%;
			top: 90%;
		}

		#stat .smallBub{
			left: 28%;
			top: 103%;
		}

		.statBottom{
			padding-top: 58%;
			top: -33%;
		}

		#stat .ghost{
			padding-top: 100%;
			width: 100%;
		}
	/**/

	/* ///// OCEAN ODYSSEY ////////// */
		#oceanOdd .map{
			padding-top: 91.428571428571429%;
			top: 6%;
			width: 100%;
		}

		#oceanOdd .container{
			padding-bottom: 52%;
			z-index: 2;
		}

		#oceanOdd h1{
			font-size: 15vw;
		}

		#oceanOdd h1:nth-of-type(1){
			padding-top: 21.428571428571429%;
		}

		#oceanOdd h1:nth-of-type(2){
			margin-left: 19.642857142857143%;
		}

		#oceanOdd p{
			margin-bottom: 7.142857142857142%;
			margin-left: 35.714285714285714%;
		}

		.diveIn{
			background-color: #18BFD1;
			margin-left: auto;
			margin-right: 0;
		}

		#oceanOdd .bigBub{
			left: -4%;
			top: 76%;
		}

		#oceanOdd .medBub{
			left: 40%;
			top: 90%;
		}

		#oceanOdd .smallBub{
			left: 70%;
			top: 74%;
		}

		.odysseySwoop{
			padding-top: 52%;
			top: -38%;
		}

		#oceanOdd{
			margin-bottom: 7.142857142857142%;
		}
	/**/

	/* ///// MAKE A SPLASH ////////// */
		.donoprevbg{
			background-image: url(../images/mobile/donoprevbg_m.webp);
		}

		#letsdonate h1{
			font-size: 15vw;
		}

		#letsdonate h1:nth-of-type(1){
			padding-top: 7.142857142857142%;
			margin-left: 50.357142857142857%;
		}

		#letsdonate h1:nth-of-type(2){
			margin-bottom: 1rem;
			margin-left: 46.428571428571429%;
		}

		#letsdonate p{
			margin-bottom: 7.142857142857142%;
			margin-left: 19%;
			margin-right: 26.785714285714286%;
		}

		.give{
			background-color: #18BFD1;
			margin-left: 0;
			margin-right: auto;
		}

		#letsdonate .container{
			padding-bottom: 56%;
		}

		#letsdonate .bubble{
			z-index: 4;
		}

		#letsdonate .bigBub{
			left: 40%;
			top: 92%;
		}

		#letsdonate .medBub{
			left: 74%;
			top: 69%;
		}

		#letsdonate .smallBub{
			left: 12%;
			top: 85%;
		}

		.donateDip{
			padding-top: 68%;
			top: -22%;
		}
	/**/

	/* ///// FURTHER INSIGHTS ////////// */
		.resBgImg{
			background-image: url(../images/mobile/resbgimg_m.webp);
		}

		#resources h1{
			font-size: 10vw;
		}

		#resources h1:nth-of-type(1){
			padding-top: 14.285714285714286%;
		}

		#resources h1:nth-of-type(2){
			margin-bottom: 7.142857142857142%;
			margin-left: 19.642857142857143%;
		}

		.resbox{
			border-radius: 8vw 0 8vw 0;
			box-shadow: 0px 0px 4px 0px #042033;
			padding-top: 36.607142857142857%;
			width: 73.214285714285714%;
		}

		.resLabel{
			font-size: 4.5vw;
			line-height: 5.5vw;
			left: 7.142857142857142%;
			text-shadow: 0.5vw 0.5vw 1vw #042033;
			top: 7.142857142857142%;
		}

		.blueco{
			background-image: url(../images/mobile/blueco_m.webp);
		}

		.blueco .resLabel{
			right: 20%;
		}

		.noaa{
			background-image: url(../images/mobile/noaa_m.webp);
		}

		.iwc{
			background-image: url(../images/mobile/iwc_m.webp);
			margin-bottom: 42%;
		}

		.blueco, .noaa{
			margin-bottom: 7.142857142857142%;
		}

		.blueco, .iwc{
			margin-left: 26.785714285714286%;
		}

		#resources .ghost{
			padding-top: 42.857142857142857%;
			width: 100%;
		}

		#resources .bubble{
			z-index: 4;
		}

		#resources .bigBub{
			left: 34%;
			top: 85%;
		}

		#resources .medBub{
			left: -3%;
			top: 87%;
		}

		#resources .smallBub{
			left: 80%;
			top: 79%;
		}
	/**/

	/* ///// FOOTER ////////// */
		.blueSwirl{
			padding-top: 70%;
			top: -54vw;
		}

		footer h2{
			font-size: 6vw;
			letter-spacing: 8%;
			padding-top: 7.142857142857142%;
			padding-bottom: 7.142857142857142%;
		}

		.question{
			padding-bottom: 3.571428571428571%;
		}

		.shWrap{
			width: 4%;
		}

		#faqOne, #faqTwo, #faqThree, #faqFour{
			border-bottom: 2px solid #E8F9F9;
		}

		#faqTwo, #faqThree, #faqFour{
			padding-top: 7.142857142857142%;
		}

		#faqFour{
			margin-bottom: 7.142857142857142%;
		}

		.answerOne, .answerTwo, .answerThree, .answerFour{
			font-size: 2.7vw;
			margin-bottom: 3.571428571428571%;
			margin-right: 19.642857142857143%;
		}

		.copyright{
			font-size: 2.5vw;
			padding-bottom: 3.571428571428571%;
		}
	/**/
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container{
		width:93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
	}

	/* POSITION/DISPLAY/LAYERING */
		#intro p, .statWhale, .statTree, .resLabel{
			position: absolute;
		}
	/**/

	.logWrap{
		margin-right: 46%;
		padding-bottom: 1.388888888888889%;
		padding-top: 1.388888888888889%;
		width: 22.222222222222222%;
	}

	.logo{
		height: 6vw;
		width: 100%;
	}

	.tdNav{
		padding-top: 3.5%;
	}

	#tdHome, #tdMig, #tdFAQ, #tdDono{
		display: inline;
		font-size: 2vw;
		padding: 0 1.5vw 0 1.5vw;
	}

	#tdHome, #tdMig, #tdDono{
		margin-right: 3%;
	}

	#tdFAQ{
		margin-right: 0;
	}

	.button{
		border-radius: 2.25vw 0 2.25vw 0;
		font-size: 2vw;
		line-height: 5.75vw;
		width: 17.222222222222222%;
	}

	p{
		font-size: 2.2vw;
		line-height: 3vw;
	}

	.bigBub{
		padding-top: 32%;
		width: 32%;
	}

	.medBub{
		padding-top: 21%;
		width: 21%;
	}

	.smallBub{
		padding-top: 17%;
		width: 17%;
	}

	/* ///// HERO SECTION ////////// */
		.heroImg{
			background-image: url(../images/tablet/heroimg_t.jpg);
		}

		#hero{
			padding-bottom: 20%;
		}

		#hero h1{
			font-size: 10vw;
			text-shadow: 1vw 1vw 3vw rgba(0, 0, 0, 0.70);
		}

		#hero h1:nth-of-type(1){
			margin-left: 8.611111111111111%;
			padding-top: 16.666666666666667%;
		}

		#hero h1:nth-of-type(2){
			margin-left: 31.25%;
		}

		#hero h1:nth-of-type(3){
			padding-bottom: 13.333333333333333%;
			margin-left: 13.888888888888889%;
		}

		.leaveHero{
			filter: drop-shadow(4px 4px 6px #042033);
			padding-bottom: 16.666666666666667%;
			padding-top: 3.333333333333333%;
			width: 6.666666666666667%;
		}

		#hero .bigBub{
			top: 45%;
			left: 4%;
		}

		#hero .medBub{
			top: 60%;
			left: 75%;
		}

		#hero .smallBub{
			top: 76%;
			left: 45%;
		}

		.skySwoop{
			padding-top: 60%;
			top: -46%;
		}
	/**/

	/* ///// INTRO PANEL ////////// */
		#intro .container{
			padding-bottom: 3.333333333333333%;
			padding-top: 6.666666666666667%;
		}

		#intro p{
			font-size: 2.15vw;
			line-height: 3vw;
		}

		#intro p:nth-of-type(1){
			margin-left: 17.222222222222222%;
			margin-right: 34.444444444444444%;
		}

		#intro p:nth-of-type(2){
			margin-left: 43.055555555555556%;
			margin-right: 8.611111111111111%;
			padding-top: 13.333333333333333%;
		}

		.whaleBreach{
			background-image: url(../images/tablet/newbreach_t.jpg);
			padding-top: 92%;
		}

		#intro .odysseySwoop{
			padding-top: 52%;
			top: 58%;
		}
	/**/

	/* ///// WHAT WE DO ////////// */
		.abtbg{
			background-image: url(../images/tablet/abtbg_t.jpg);
		}

		#abt h1{
			font-size: 6vw;
		}

		#abt h1:nth-of-type(1){
			margin-left: 17.222222222222222%;
			padding-top: 3.333333333333333%;
		}

		#abt h1:nth-of-type(2){
			margin-bottom: 3.333333333333333%;
			margin-left: 25.833333333333333%;
		}

		#abt p{
			margin-left: 34.444444444444444%;
			margin-right: 17.222222222222222%;
			padding-bottom: 50%;
			text-shadow: 0 0.2vw 1.5vw #000000;
		}

		.introBottom{
			padding-top: 58%;
			top: 46%;
		}
	/**/

	/* ///// CO2 CHAMPS ////////// */
		.statbg{
			background-image: url(../images/tablet/statbg_t.jpg);
		}

		#stat h1{
			font-size: 6vw;
		}

		#stat h1:nth-of-type(1){
			margin-left: 71%;
			margin-right: 17.222222222222222%;
		}

		#stat h1:nth-of-type(2){
			margin-left: 51.666666666666667%;
			margin-right: 22.5%;
			padding-bottom: 3.333333333333333%;
		}

		#stat p{
			margin-left: 25.833333333333333%;
			margin-right: 28%;
		}

		.bkgCirc{
			background-color: #042033;
			border-radius: 100%;
			box-shadow: 0 0.5vw 1vw 0.5vw rgba(0, 0, 0, 0.25);
			padding-top: 48.333333333333333%;
			width: 48.333333333333333%;
		}

		.circOne{
			right: 24%;
		}

		.statWhale{
			background-image: url(../images/tablet/statWhale_t.png);
			padding-top: 52%;
			top: 40%;
			width: 156%;
		}

		.circTwo{
			left: 68.888888888888889%;
			margin-bottom: 3.333333333333333%;
			margin-top: -18%;
			z-index: 2;
		}

		.statTree{
			background-image: url(../images/tablet/statTree_t.png);
			padding-top: 45%;
			width: 55%;
			z-index: 2;
		}

		.treeOne, .treeThree{
			right: 30%;
		}

		.treeOne{
			top: -30%;
		}

		.treeTwo{
			top: 14%;
			left: -27%;
		}

		.treeThree{
			top: 60%;
		}

		#stat .bigBub{
			top: 100%;
			left: 46%;
		}

		#stat .medBub{
			top: 74%;
			left: 8%;
		}

		#stat .smallBub{
			top: 98%;
			left: 20%;
		}

		.ghost{
			padding-top: 60%;
		}

		.statBottom{
			padding-top: 56%;
			top: -55%;
			z-index: 0;
		}
	/**/

	/* ///// OCEAN ODYSSEY ////////// */
		#oceanOdd .map{
			padding-top: 80%;
			top: 0%;
			width: 100%;
			z-index: 1;
		}

		#oceanOdd .container{
			padding-bottom: 48%;
			padding-top: 3.333333333333333%;
			z-index: 2;
		}

		#oceanOdd h1{
			font-size: 8vw;
		}

		#oceanOdd h1:nth-of-type(1){
			margin-left: 17.222222222222222%;
		}

		#oceanOdd h1:nth-of-type(2){
			margin-bottom: 3.333333333333333%;
			margin-left: 25.833333333333333%;
		}

		#oceanOdd p{
			margin-bottom: 3.333333333333333%;
			margin-left: 34.444444444444444%;
			margin-right: 31.111111111111111%;
		}

		.diveIn{
			background-color: #18BFD1;
			margin-left: 56.944444444444444%;
		}

		.odysseySwoop{
			padding-top: 52%;
			top: -57%;
		}

		#oceanOdd{
			margin-bottom: 3.333333333333333%;
		}
	/**/

	/* ///// MAKE A SPLASH ////////// */
		.donoprevbg{
			background-image: url(../images/tablet/donoprevbg_t.jpg);
		}

		#letsdonate{
			z-index: 2;
		}

		#letsdonate h1{
			font-size: 8vw;
		}

		#letsdonate h1:nth-of-type(1){
			margin-left: 54.027777777777778%;
			padding-top: 3.333333333333333%;
		}

		#letsdonate h1:nth-of-type(2){
			margin-bottom: 3.333333333333333%;
			margin-left: 51.666666666666667%;
		}

		#letsdonate p{
			margin-bottom: 3.333333333333333%;
			margin-left: 34.444444444444444%;
			margin-right: 31.111111111111111%;
		}

		.give{
			background-color: #18BFD1;
			margin-bottom: 6.666666666666667%;
			margin-left: 25.833333333333333%;
		}

		#letsdonate .container{
			padding-bottom: 32%;
		}

		#letsdonate .bigBub{
			top: 110%;
			left: 35%;
		}

		#letsdonate .medBub{
			top: 100%;
			left: 76%;
		}

		#letsdonate .smallBub{
			top: 92%;
			left: 10%;
		}

		.donateDip{
			padding-top: 66%;
			top: -35%;
		}
	/**/

	/* ///// FURTHER INSIGHTS ////////// */
		.resBgImg{
			background-image: url(../images/tablet/resbgimg_t.jpg);
		}

		#resources h1{
			font-size: 6vw;
		}

		#resources h1:nth-of-type(1){
			margin-left: 17.222222222222222%;
			padding-top: 6.666666666666667%;
		}

		#resources h1:nth-of-type(2){
			margin-bottom: 3.333333333333333%;
			margin-left: 25.833333333333333%;
		}

		.resbox{
			border-radius: 5vw 0 5vw 0;
			box-shadow: 0px 0px 4px 0px #042033;
			padding-top: 24.166666666666667%;
			width: 48.333333333333333%;
		}

		.resLabel{
			top: 6.666666666666667%;
			font-size: 2.2vw;
			left: 6.666666666666667%;
			right: 40%;
			text-shadow: 0.5vw 0.5vw 1vw #042033;
		}

		.blueco{
			background-image: url(../images/tablet/blueco_t.jpg);
		}

		.noaa{
			background-image: url(../images/tablet/noaa_t.jpg);
		}

		.iwc{
			background-image: url(../images/tablet/iwc_t.jpg);
			margin-bottom: 26.666666666666667%;
		}

		.blueco, .noaa{
			margin-bottom: 3.333333333333333%;
		}

		.blueco, .iwc{
			margin-left: 34.444444444444444%;
		}

		.noaa{
			margin-left: 17.222222222222222%;
		}

		#resources .ghost{
			padding-top: 20%;
			width: 100%;
		}

		#resources .bigBub{
			top: 88%;
			left: 32%;
		}

		#resources .medBub{
			top: 80%;
			left: 4%;
		}

		#resources .smallBub{
			top: 82%;
			left: 75%;
		}
	/**/

	/* ///// FOOTER ////////// */
		.blueSwirl{
			padding-top: 52%;
			top: -40vw;
		}

		footer h2{
			font-size: 4vw;
			letter-spacing: 5%;
			padding-bottom: 3.333333333333333%;
			padding-top: 3.333333333333333%;
		}

		.question{
			padding-bottom: 1.666666666666667%;
		}

		.shWrap{
			padding-top: 0.5%;
			width: 2.5%;
		}

		#faqOne, #faqTwo, #faqThree, #faqFour{
			border-bottom: 1.5px solid #E8F9F9;
		}

		#faqTwo, #faqThree, #faqFour{
			padding-top: 3.333333333333333%;
		}

		#faqFour{
			margin-bottom: 3.333333333333333%;
		}

		.answerOne, .answerTwo, .answerThree, .answerFour{
			font-size: 1.6vw;
			margin-bottom: 1.666666666666667%;
			margin-right: 5.277777777777778%;
		}

		.copyright{
			font-size: 1.5vw;
			padding-bottom: 1.666666666666667%;
			text-align: right;
		}
	/**/
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){
	.container{
		/*width:978px;*/
		width:95.5%;
	}

	.logWrap{
		margin-right: 59%;
		padding-bottom: 0.5%;
		padding-top: 0.5%;
		width: 17.177914110429448%;
	}

	.logo{
		height: 5.5vw;
		width: 100%;
	}

	.tdNav{
		padding-top: 1.6%;
	}

	.tdNav a{
		height: 3.2vw;
		line-height: 3.2vw;
	}

	#tdHome, #tdMig, #tdFAQ, #tdDono{
		font-size: 1.5vw;
	}

	#tdHome, #tdMig, #tdDono{
		margin-right: 5%;
	}

	#tdFAQ{
		margin-right: 0;
	}

	#tdHome, #tdMig, #tdFAQ, #tdDono{
		background: linear-gradient(#E8F9F9 0 0) var(--p, 0)/var(--p, 0) no-repeat;
		border-radius: 1.5vw 0 1.5vw 0;
		padding: 0 1vw 0 1vw;
  		transition: .4s, background-position 0s;
	}

	#tdHome:hover, #tdMig:hover, #tdFAQ:hover, #tdDono:hover{
		--p: 100%;
		color: #042033;
	}

	.button{
		border-radius: 1.5vw 0 1.5vw 0;
		font-size: 1.5vw;
		line-height: 4vw;
		width: 11.656441717791411%;
	}

	p{
		font-size: 1.5vw;
		line-height: 2.2vw;
	}

	.bigBub{
		padding-top: 24%;
		width: 24%;
	}

	.medBub{
		padding-top: 18%;
		width: 18%;
	}

	.smallBub{
		padding-top: 12%;
		width: 12%;
	}

	/* ///// HERO SECTION ////////// */
		.heroImg{
			background-image: url(../images/desktop/heroimg_d.jpg);
		}

		#hero{
			padding-bottom: 15.337423312883436%;
		}

		#hero h1{
			font-size: 7.5vw;
			text-shadow: 1vw 1vw 3vw rgba(0, 0, 0, 0.70);
		}

		#hero h1:nth-of-type(1){
			margin-left: 17.177914110429448%;
			padding-top: 12.269938650306748%;
		}

		#hero h1:nth-of-type(2){
			margin-left: 34.355828220858896%;
		}

		#hero h1:nth-of-type(3){
			margin-left: 22.699386503067485%;
			padding-bottom: 12.269938650306748%;
		}

		.leaveHero{
			filter: drop-shadow(4px 4px 6px #042033);
			padding-bottom: 16.666666666666667%;
			width: 8.588957055214724%;
		}

		.progress{
			transition: 300ms;
		}

		.progress:hover{
			scale: 1.2;
		}

		#hero .bigBub{
			left: 8%;
			top: 44%;
		}

		#hero .medBub{
			left: 74%;
			top: 62%;
		}

		#hero .smallBub{
			left: 45%;
			top: 77%;
		}

		.skySwoop{
			padding-top: 56%;
			top: -72%;
		}
	/**/

	/* ///// INTRO PANEL ////////// */
		#intro{
			margin-bottom: 9.202453987730061%;
		}

		#intro p{
			position: absolute;
		}

		#intro p:nth-of-type(1){
			margin-left: 17.177914110429448%;
			margin-right: 51.533742331288344%;
			padding-top: 3.067484662576687%;
		}

		#intro p:nth-of-type(2){
			margin-left: 51.533742331288344%;
			margin-right: 17.177914110429448%;
			padding-top: 15.337423312883436%;
		}

		.whaleBreach{
			background-image: url(../images/desktop/newbreach_d.jpg);
			padding-top: 61.349693251533742%;
		}

		#intro .odysseySwoop{
			padding-top: 52%;
			top: 36%;
		}
	/**/

	/* ///// WHAT WE DO ////////// */
		.abtbg{
			background-image: url(../images/desktop/abtbg_d.jpg);
		}

		#abt .container{
			margin-top: -8%;
		}

		#abt h1{
			font-size: 5.5vw;
		}

		#abt h1:nth-of-type(1){
			margin-left: 17.177914110429448%;
		}

		#abt h1:nth-of-type(2){
			margin-bottom: 3.067484662576687%;
			margin-left: 25.766871165644172%;
		}

		#abt p{
			margin-left: 34.355828220858896%;
			margin-right: 27.198364008179959%;
			padding-bottom: 50%;
			text-shadow: 0 0.2vw 1.5vw #000000;
		}

		.introBottom{
			padding-top: 60%;
			top: 34%;
		}
	/**/

	/* ///// CO2 CHAMPS ////////// */
		.statbg{
			background-image: url(../images/desktop/statbg_d.jpg);
		}

		#stat h1{
			font-size: 5.5vw;
		}

		#stat h1:nth-of-type(1){
			margin-left: 75%;
		}

		#stat h1:nth-of-type(2){
			margin-left: 58.282208588957055%;
			padding-bottom: 3.067484662576687%;
		}

		#stat p{
			margin-left: 42.94478527607362%;
			margin-right: 25.766871165644172%;
		}

		.bkgCirc{
			background-color: #042033;
			border-radius: 100%;
			box-shadow: 0 1vw 1vw 0.5vw rgba(0, 0, 0, 0.25);
			padding-top: 48.466257668711656%;
			width: 48.466257668711656%;
		}

		.circOne{
			margin-top: -10%;
			right: 23%;
		}

		.statWhale{
			background-image: url(../images/desktop/statWhale_d.png);
			padding-top: 54%;
			position: absolute;
			top: 40%;
			width: 160%;
		}

		.circTwo{
			left: 70%;
			margin-bottom: 3.067484662576687%;
			margin-top: -18%;
			z-index: 2;
		}

		.statTree{
			background-image: url(../images/desktop/statTree_d.png);
			padding-top: 45%;
			position: absolute;
			width: 54%;
			z-index: 2;
		}

		.treeOne, .treeThree{
			right: 38%;
		}

		.treeOne{
			top: -22%;
		}

		.treeTwo{
			top: 24%;
			right: 73%;
		}

		.treeThree{
			top: 60%;
		}

		#stat .bigBub{
			left: 48%;
			top: 108%;
		}

		#stat .medBub{
			left: 4%;
			top: 77%;
		}

		#stat .smallBub{
			left: 22%;
			top: 104%;
		}

		.ghost{
			padding-top: 45%;
		}

		.statBottom{
			padding-top: 60%;
			top: -63%;
			z-index: 1;
		}
	/**/

	/* ///// OCEAN ODYSSEY ////////// */
		#oceanOdd .map{
			padding-top: 80%;
			top: -6%;
			width: 100%;
			z-index: 1;
		}

		#oceanOdd .container{
			padding-bottom: 46.012269938650307%;
			padding-top: 6.134969325153374%;
			z-index: 2;
		}

		#oceanOdd h1{
			font-size: 7.5vw;
		}

		#oceanOdd h1:nth-of-type(1){
			margin-left: 17.177914110429448%;
		}

		#oceanOdd h1:nth-of-type(2){
			margin-bottom: 1.533742331288344%;
			margin-left: 25.766871165644172%;
		}

		#oceanOdd p{
			margin-bottom: 1.533742331288344%;
			margin-left: 34.355828220858896%;
			margin-right: 42.94478527607362%;
		}

		.diveIn{
			background-color: #18BFD1;
			margin-left: 51.533742331288344%;
			transition: 300ms;
		}

		.diveIn:hover{
			background-color: #042033;
			filter: drop-shadow(1px 1px 3px #042033);
			color: #E8F9F9;
			transition: 350ms;
		}

		.odysseySwoop{
			padding-top: 52%;
			top: -57%;
		}

		#oceanOdd{
			margin-bottom: 3.333333333333333%;
		}
	/**/

	/* ///// MAKE A SPLASH ////////// */
		.donoprevbg{
			background-image: url(../images/desktop/donoprevbg_d.jpg);
		}

		#letsdonate{
			z-index: 2;
		}

		#letsdonate h1{
			font-size: 7.5vw;
		}

		#letsdonate h1:nth-of-type(1){
			margin-left: 60.122699386503067%;
		}

		#letsdonate h1:nth-of-type(2){
			margin-bottom: 1.533742331288344%;
			margin-left: 57.05521472392638%;
		}

		#letsdonate p{
			margin-bottom: 3.067484662576687%;
			margin-left: 42.94478527607362%;
			margin-right: 31.288343558282209%;
		}

		.give{
			background-color: #18BFD1;
			margin-bottom: 13%;
			margin-left: 34.355828220858896%;
			position: relative;
			transition: 300ms;
			z-index: 10;
		}

		.give:hover{
			background-color: #E8F9F9;
			filter: drop-shadow(1px 1px 3px #042033);
			color: #042033;
			transition: 350ms;
		}

		#letsdonate .container{
			padding-bottom: 40%;
		}

		.donateDip{
			padding-top: 66%;
			top: -44%;
		}
	/**/

	/* ///// FURTHER INSIGHTS ////////// */
		.resBgImg{
			background-image: url(../images/desktop/resbgimg_d.jpg);
		}

		#resources h1{
			font-size: 5.5vw;
		}

		#resources .container{
			padding-top: 6.134969325153374%;
		}

		#resources h1:nth-of-type(1){
			margin-left: 17.177914110429448%;
		}

		#resources h1:nth-of-type(2){
			margin-bottom: 3.067484662576687%;
			margin-left: 25.766871165644172%;
		}

		.resbox{
			border-radius: 3vw 0 3vw 0;
			box-shadow: 0 0 0.5vw 0 #042033;
			padding-top: 15.644171779141104%;
			transition: 300ms;
			width: 39.877300613496933%;
		}

		.resbox:hover{
			filter: drop-shadow(1px 1px 3px #042033);
			transition: 350ms;
		}

		.resLabel{
			top: 9.202453987730061%;
			font-size: 2.2vw;
			left: 6.134969325153374%;
			line-height: 2.5vw;
			position: absolute;
			right: 30%;
			text-shadow: 0.5vw 0.5vw 1vw #042033;
		}

		.blueco{
			background-image: url(../images/desktop/blueco_d.jpg);
		}

		.noaa{
			background-image: url(../images/desktop/noaa_d.jpg);
		}

		.iwc{
			background-image: url(../images/desktop/iwc_d.jpg);
			margin-bottom: 26.666666666666667%;
		}

		.blueco, .noaa{
			margin-bottom: 3.067484662576687%;
		}

		.blueco, .iwc{
			margin-left: 42.94478527607362%;
		}

		.noaa{
			margin-left: 17.177914110429448%;
		}

		#resources .ghost{
			padding-top: 20%;
			width: 100%;
		}
	/**/

	/* ///// FOOTER ////////// */
		.blueSwirl{
			padding-top: 51%;
			top: -39vw;
		}

		footer h2{
			font-size: 3vw;
			letter-spacing: 8%;
			padding-bottom: 3.067484662576687%;
			padding-top: 3.067484662576687%;
		}

		.question{
			font-size: 1.75vw;
			padding-bottom: 1.533742331288344%;
		}

		.shWrap{
			padding-top: 1%;
			width: 2%;
		}

		#faqOne, #faqTwo, #faqThree, #faqFour{
			border-bottom: 1.5px solid #E8F9F9;
		}

		#faqTwo, #faqThree, #faqFour{
			padding-top: 3.067484662576687%;
		}

		#faqFour{
			margin-bottom: 3.067484662576687%;
		}

		.answerOne, .answerTwo, .answerThree, .answerFour{
			font-size: 1.4vw;
			margin-bottom: 1.533742331288344%;
			margin-right: 5.623721881390593%;
		}

		.copyright{
			font-size: 1vw;
			padding-bottom: 1.533742331288344%;
			text-align: right;
		}
	/**/
}