@media only screen and (max-width:1400px) {
	#hero .bg {top: -12vw; height: 150%}
}


@media only screen and (max-width:1199px) {
	#hero .bg {top: -30vw}
}

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

	.container {max-width: 95vw}

}


@media (max-width: 767px) {


	.container {max-width: 100%}
	.spacer-lg {height: 11vw}
	.spacer-md {height: 7vw}

	h3 {font-size: 7vw; margin-bottom: 3vw}
	p {font-size: 3vw; margin-bottom: 3vw}
	p.large {font-size: 4.5vw}

	header .logo {width: 55%; transition: all .3s ease; z-index: 90; position: relative;}
	header .inside {padding: 3vw 0}
	header.affix {}
	header.affix .logo {width: 40%}


	.button {font-size: 3vw}

	.brown {margin-top: 15vw}
	.black {margin-top: 15vw}
	

	.hamburger {position: absolute; width: 6vw; right: 3vw; top: 50%; height: 5vw; display: flex; justify-content: space-between; flex-direction: column; transform: translateY(-50%); cursor: pointer; z-index: 90}
	.hamburger .line {height: 2px; width: 100%; background: #FFF; transition: all .3s ease;}
	.hamburger.active .line:nth-child(2) {opacity: 0;}
	.hamburger.active .line:nth-child(1) {transform-origin:100% 100%; transform: rotate(-45deg);}
	.hamburger.active .line:nth-child(3) {transform: rotate(45deg) translateX(0vw); transform-origin: top right;}

	.rellax {transform: none !important}

	.mobile-menu-div {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.9); z-index: 20; display: none}
	.mobile-menu-div .menu-main-container {height: 100%}
	.mobile-menu-div ul {text-align: center; display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center;}
	.mobile-menu-div ul li {display: block;}
	.mobile-menu-div ul li a {font-size: 6vw; color: #FFF; padding: 2vw 0; display: block;}
	.mobile-menu-div .logo {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; top:10vw; }
	header .separator {opacity: 0.2; display: none}
	header ul li a:before {margin-right: 3vw}
	header ul li:hover:before {display: none}
	header .separator:nth-child(2) {left: 15%}
	header .separator:nth-child(3) {left: 85%}




	#hero {padding: 35vw 0 25vw !important; height: auto !important}
	#hero .bg {top: 0; width: 100%; left: 0; height: 100%}
	#hero h1 {font-size: 8vw; margin: 0;}
	#hero h1 br {display: none}
	#hero .slashes {max-width: 80%}
	#hero .circles {bottom: 6vw}
	#hero .square {display: none}
	#hero .plus {display: none}
	#hero .breadcrumbs a {font-size: 4vw}
	#hero.standard.project h1 {text-align: left; max-width: 100%; font-size: 8vw}
	#hero.standard.project.project-species-biobank h1 {font-size: 8vw; max-width: 100%}

	#intro {padding-bottom: 10vw}
	#intro p {font-size: 3vw}
	#intro h2 {font-size: 6vw}
	#intro .slashes-1 {width: 15%}

	#intro.standard.program h2 {font-size: 5.5vw}
	#intro.standard.program h2 br {display: none}
	#intro.standard.program p {font-size: 3vw}
	#intro .square {display: none;}

	#colossal-problem .meter {font-size: 14vw; left: 0;}
	#colossal-problem .mid {font-size: 3.5vw}
	#colossal-problem .mid span {display: block; padding-left: 0; font-size: 3vw}
	#colossal-problem .constrain {padding: 0;}
	#colossal-problem .quote {font-size: 3vw}
	#colossal-problem .quote img {left: 0; top: -6vw}
	#colossal-problem .author div {font-size: 5vw}
	#colossal-problem .author {font-size: 3vw}
	#colossal-problem .ben {max-width: 130%}

	#three-programs p.medium strong {font-size: 6vw; display: block;}
	#three-programs p.medium {padding-top: 7vw; font-size: 4vw}
	#three-programs .program {aspect-ratio: auto; padding: 5vw; margin-bottom: 5vw}
	#three-programs .program .num {font-size: 14vw}
	#three-programs .program .link {position: static; font-size: 4vw}
	#three-programs .program h4 {font-size: 6vw}
	#three-programs .program p {font-size: 3vw}

	#status-quo .large {font-size: 5vw; margin-bottom: 3vw}
	#status-quo .img-1 {max-width: 125%; float: left; margin-top: -3vw}
	#status-quo .slashes.a {display: none}
	#status-quo .quote {margin: 10vw 5vw 0; font-size: 4vw}
	#status-quo .quote img {margin: 0;}
	.slashes.b {width: 30%}

	#possibility .square {display: none;}
	#possibility .plus {display: none;}
	#possibility .img-1 {max-width: 140%; margin-top: 22vw}


	#project-list .specie-group .icon {width: 9vw; margin-right: 3vw}
	#project-list .specie-group h3 {font-size: 4.5vw}
	#project-list .specie-group h4 {font-size: 5vw}
	#project-list .specie-group .partner p {font-size: 2.4vw; margin-bottom: 5vw;}
	#project-list .specie-group .partner img {max-height: 9vw; }


	#better-world .img-1 {width: 30%; margin-bottom: 5vw}
	#better-world p:not(.large) {font-size: 4vw}
	#better-world .side {width: 55%; opacity: 0.2; max-width: 2000%}
	#better-world h3 {font-size: 6vw}
	#better-world .lower a {font-size: 4vw}
	#better-world .lower .row {margin-bottom: 8vw}
	#better-world .lower p {padding-left: 0}
	#better-world .lower a {padding-left: 0}
	#better-world .lower p img {display: none}


	#species .upper .slashes {max-width: 60%; width: 60%}
	#species .upper h3 {font-size: 8vw}

	#species .accordion-link {height: auto; line-height: 1.4; padding: 2vw 0}
	#species .accordion-link span {font-size: 4vw; padding-right: 10%}
	#species .accordion-link img {width: 10%; height: 8vw}
	#species .accordion-link {font-size: 2.4vw}
	#species .accordion-link:after {top: 50%; transform: translateY(-50%);}

	#species .description h3 {font-size: 8vw}
	#species .description .iucn img {display: block; max-width: 20%; margin-bottom: 2vw}
	#species .description .iucn {font-size: 2vw}
	#species .description h4 {font-size: 4vw}
	#species .description ul li {font-size: 2.4vw; padding: 1vw 0}
	#species .description .globe {top: 30vw; right: 0}

	#threats h4 {font-size: 4vw}
	#threats ul li img {width: 6vw}
	#threats ul li {font-size: 3.5vw; padding: 3vw 0}
	#threats .quote {font-size: 4vw; padding: 0.3vw 2vw; margin-bottom: 2vw; line-height:1.5; display: inline-block; margin-top: 5vw}
	#threats em {font-size: 4vw}

	#programs {padding: 4vw}
	#programs h4 {font-size: 8vw; margin-bottom: 3vw}
	#programs .program {font-size: 4vw; margin-bottom: 4vw}
	#programs .program .img-container {width: 10vw; height: 10vw; padding: 1vw}
	
	#specie-partner {padding: 7vw 5vw}
	#specie-partner h4 {font-size: 4.5vw}
	#partner p {font-size: 2.3vw}

	.page-template-page-about #intro.standard.program h2 {font-size: 8vw}
	.page-template-page-programs #intro.standard p {font-size: 3.1vw; margin-bottom: 0}


	#stats .stat {font-size: 11vw}
	#stats .description {font-size: 3vw}

	#program-list .slashes {width: 60%}
	#program-list h4 {font-size: 5vw}
	#program-list .img-container {margin-top: 2vw; width: 110%}
	#program-list a {display: block; margin-bottom: 10vw}

	#news {padding-top: 10vw}
	#news .post {margin-bottom: 15vw; padding: 4vw 0 0}
	#news h4 {font-size: 5vw; height: auto;}
	#news h5 {font-size: 3vw}
	#news h5:after {font-size: 6vw; top: 1vw}

	#news-feed .feat .post img {aspect-ratio: 5 / 3}
	#news-feed h4 {font-size: 5vw; height: auto}
	#news-feed h5 {font-size: 2vw}
	#news-feed .post {margin-bottom: 11vw}
	#news-feed .post .source-logo {max-height: 10vw; max-width: 15vw}
	#news-feed h5:after {font-size: 6vw; top: 1vw}

	#ongoing-projects {padding-top: 10vw}
	#ongoing-projects h3 {margin-bottom: 10vw; font-size: 8vw}
	#ongoing-projects .square,
	#ongoing-projects .plus {display: none}

	#project-details h3 {font-size: 6vw}
	#project-details p {font-size: 3vw}
	#project-details .container {margin-left: 5vw; padding-right: 10vw !important}

	#select-features {padding-top: 10vw}
	#select-features #logo-grid div {width: 25%; margin: 0 3% 7vw}
	#select-features #logo-grid div img {max-height: 12vw;}

	.single-project #partner p {font-size: 5vw; margin-bottom: 5vw}
	.single-project #partner p.right {font-size: 3.3vw}
	p.wp-caption-text {font-size: 2.5vw; line-height: 1 !important;}
	.single-project #partner img {max-height: 100%; max-width: 90%}
	.alignleft {min-width: 50%; margin: 0 5vw 5vw 0 }
	.alignright {min-width: 50%; margin: 0 0 5vw 5vw }
	#modules .col {min-width: 50%; max-width: 50%; margin-bottom: 5vw}

	#quote-module .quote {padding-right: 0; font-size: 3.5vw}
	#quote-module .quote img {top: -7vw; width: 9%; left: 0;}
	#quote-module .quote img:last-child {bottom: -5vw}
	#quote-module .square,
	#quote-module .plus {display: none}
	#quote-module .title {-webkit-text-stroke-width:2px; font-size: 15vw}
	#quote-module.larger .quote {font-size: 5vw}
	#quote-module.larger {padding-bottom: 20vw; padding-top: 20vw}

	#species-capsule-includes {margin-top: -12vw}
	#species-capsule-includes .cap {text-align: center;}
	#species-capsule-includes .cap img {margin: 0 auto 5vw; width: 50%; display: block;}
	#species-capsule-includes p.medium {font-size: 4vw}
	#species-capsule-includes .img-1 {width: 70%; top: -vw}
	#species-capsule-includes h3 {text-align: center; margin-bottom: 0vw}

	#colossal-100 p {font-size: 4vw; margin-top: 10vw}
	#colossal-100 .coming-soon {max-width: calc(100% + 20px); margin-left: -10px}

	#partner-list h2 {-webkit-text-stroke-width:1px}
	#partner-list p br {display: none}
	#partner-list #logo-grid div {width: 25%; margin: 0 3% 7vw}
	#partner-list #logo-grid div img {max-height: 12vw;}
	#partner-list .plus,
	#partner-list .square {display: none;}

	.founder {text-align: center; margin-bottom: 10vw}
	.founder p {font-size: 4vw}
	#quote-module .funding {height: 12vw; max-width: 70%}

	#work-together .img {margin-bottom: 5vw; width: 110%}
	#work-together p.large {font-size: 7vw}
	#work-together p {font-size: 3vw}
	body input[type="email"] {height: 12vw !important; line-height: 12vw !important}
	body ::placeholder {font-size: 5vw !important; }
	body .btn {font-size: 4vw !important}
	.gform-theme--foundation .gform_fields {row-gap: 10px !important}


	footer .left p {font-size: 4vw}
	.gform-theme--foundation .gfield {}



	#gallery .tag, 
	#gallery .tag .square, 
	#gallery .plus.a, 
	#gallery .plus.b, 
	#gallery .square.a, 
	#gallery .slashes-1 {display: none}
	#gallery .img-1 {max-width: 80%}
	#gallery .img-2 {transform: none; width: 80%; margin-top: -10vw; float: right; margin-right: -5vw; position: relative;}
	#gallery .img-2 img {position: relative; z-index: 4}
	#gallery .img-2 .box {top: 4vw; left: -4vw; width: 95%; z-index: 0}
	#gallery .img-3 {width: 60%; transform: none; margin-top: -5vw; margin-left: -4vw}
	#gallery .img-3 .box {display: none}
	#gallery .img-4 {display: none}

	#gallery .img-5 {width: 89%; margin-left: -9vw}
	#gallery .img-6 {margin-top: -10vw; width: 50%; z-index: 10; position: relative;}
	#gallery .img-7 {margin-top: -4vw; width: 80%}
	#gallery .img-8 {width: 40%; margin-top: -5vw}
	#gallery.black .slashes {margin-top: -15vw; width: 50%}
	#gallery .img-9 {display: none}

	.vid .play {width: 15%}

}