@charset "utf-8";

/******************  COLOUR  ********************************/
/*primary*/
footer a, main a, .navbar a:hover, .btn-outline-primary, .slick-prev:before,
.slick-next:before {color:#0097AA !important;}
.bg-primary, .bg-primary a:hover, .btn-primary {background-color:#0097AA !important; border-color:#0097AA !important;}

/*secondary*/
.bg-secondary {background-color: #00728F !important;}

/*light*/
.bg-light {background-color:#f5f5eb !important;}

/*dark*/
a.bg-danger, a.bg-warning, .bg-none, .dark, .navbar-global a {color:#353535 !important;}
.bg-dark, .filters .dropdown-menu {background-color:#353535 !important;}

/*alerts*/
a:hover {color:#AFAD0C !important;} /*earth*/
.bg-warning, .btn:hover {background-color:#AFAD0C !important;} /*earth*/
a.bg-warning:hover {background-color:#7B8427 !important;} /*dark earth*/
.bg-danger {background-color:#AFAD0C !important;}
.bg-danger:hover {background-color:#7B8427 !important;}

/*black*/
.bg-black, .dropdown-menu, .dropdown-item:focus, .dropdown-item:hover {background-color:#000000 !important;}
.bg-screen {background-color: rgba(34, 34, 34, 0.75);}

/*med-light*/
body, blockquote, footer a, #mobilenav a, nav.bg-none a, .border-secondary, .gsc-cursor-page {color:#666 !important;}

/*light blue*/
.bg-primary a, .bg-secondary a {color:#B1DFDC !important;}

/*white*/
a.btn, figcaption, footer a:hover, nav ul li>a, .bg-alert, .bg-black, .bg-primary, .bg-dark, .bg-screen, .bg-secondary, .credit, .crumb a, .dropdown-menu a, .navbar-toggler-icon, .title, .title a, .white, a.white, a.white:hover {color:#FFFFFF !important;}
#mobilenav, .bg-none, .gsc-cursor-page, .navbar-global {background-color:#FFFFFF !important;}

/******************  TYPOGRAPHY  ********************************/
html {font-size: 1.1rem; line-height:1.4rem;}
@font-face{ 
font-family: 'WWF';
src: url('//arcticwwf.org/site/templates/assets/fonts/wwf-webfont.eot'),
 url('//arcticwwf.org/site/templates/assets/fonts/wwf-webfont.eot?#iefix') format('embedded-opentype'),
 url('//arcticwwf.org/site/templates/assets/fonts/wwf-webfont.woff') format('woff'),
 url('//arcticwwf.org/site/templates/assets/fonts/wwf-webfont.ttf') format('truetype'),
 url('//arcticwwf.org/site/templates/assets/fonts/wwf-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
blockquote cite, body, form, input, nav .dropdown-item, nav .nav-meta {font-family: 'Roboto', sans-serif;}
a, a:hover {text-decoration:none;}
blockquote, h1, h2, h3, input[type=submit], nav, .arcticmap, .btn, .gs-title, .wwf {font-family: 'WWF', sans;}

blockquote {font-size:200%; line-height:110%; padding:1rem 0 0 2rem; border-bottom: thin solid #CCCCCC; border-top: thin solid #CCCCCC; background: url("../assets/quote.png") no-repeat;}
blockquote cite {font-size:50%;}
figcaption {font-size:80%; line-height:120%; padding:1rem 0rem;}
h1 {text-align: center;}
/*@media (min-width: 770px) {h1 {font-size:220%;} }*/
h2 {font-size:225%; margin: 2% 0% 2% 0%; text-align:center;}
h2:after {content: ''; display:block; margin: 0 auto; width:5%; padding-top: 1%; border-bottom: 7px solid #0097aa;}
h3 {font-size:140%; margin: 2% 0% 1% 0%;}
h4 {font-size:90%; text-transform: uppercase;}
h5 {font-size:80%; font-weight:bold; text-transform:uppercase;}
h6 {font-size:65%; font-weight:normal; line-height:140%;}
input {padding:.5rem;}
p {margin-bottom:1.5rem;}
main ul {padding:0px; margin:0px 0px 25px 0px;}
main ul li {border-top: 1px solid #CCC; list-style-type: none; margin:0px; padding:10px 0px;}
main ul li:first-child {border-top: 0px;}
nav {text-transform: uppercase; font-size: 120%;}
nav .dropdown-menu {font-size:60%;}
small {font-size:60%;}
.btn {text-transform:uppercase;}
.display-1, .display-2, .display-3, .display-4 {line-height:90%;}
	@media (max-width: 768px) {.display-1, .display-2, .display-3, .display-4, .display-5 {font-size:150%;}}
.display-5 {font-size:120%;}
.header-int {padding:6rem 0rem 4rem 0rem; text-align: center;}
.lead {font-size:140%; text-align: center;}
.template-article .col-md-8 p:first-child {font-size:140%;}
.text-400 {font-size:400%;}
	@media (max-width: 768px) {.text-400 {font-size:250%;}}
.text-120 {font-size:120%;}
.text-80 {font-size:80%;}
.text-90 {font-size:90%;}
.text-60 {font-size:60%;}


/******************  BOOTSTRAP OVERRIDES  ********************************/
body {margin-top:50px;}
section {padding:40px 0px;}
#mobilenav {text-align: center; overflow:auto; position:fixed; z-index: 1001; margin-top:-30px;}
#mobilenav a {margin: 2rem 0rem;}
.bg-light {background-image:url('../assets/pattern-light.png')}
.jumbotron {background-size: cover; margin: 0 auto; height:550px; overflow-y:hidden;}
	@media (max-width: 768px) {.jumbotron {height:250px;}}
.jumbotron .container {position: relative; height:100%;}

.jumbotron .container .title {position: absolute; bottom:-5rem; width:100%; line-height:90%;  overflow:hidden;}
	@media (max-width: 768px) {.jumbotron .container .title {bottom:-2rem; width:100%; right:0; left:0; font-size:170%}}

.jumbotron.coverimg { height:700px; position:relative; overflow:auto;}
	@media (max-width: 768px) {.jumbotron.coverimg { height:auto;}}
	@media (min-width: 992px) {.jumbotron.coverimg .h1 { font-size:500%; line-height:100%; margin-top:30px;}}
	@media (min-width: 992px) {.jumbotron.coverimg .title-cover {width:40%; overflow:hidden;}}

.jumbotron.coverimg .wwf-cover .h3 span {  
  color:#131313;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.8);
  background-color: rgba(255,255,255,0.8);
  box-decoration-break: clone;
  line-height: 1.75;
}
.jumbotron.coverimg .wwf-cover .h1 {color:#FFF; background-color: rgba(0,0,0,0.8); padding: 0px 10px 10px 0px;}


.btn {border-radius: 0; border:0;}
.card {border-radius:0;}

.carousel span {padding:3rem;}
	@media (max-width: 992px) {.carousel-caption {position:relative; top:30%; left:0; font-size:80%; margin-top:1.1rem; min-height:200px;}}

	@media (max-width: 768px) {.collapse {height: 100%; max-height: 400px; width:100%; overflow-y:scroll;} }
	@media (max-width: 768px) {.dropdown-item {margin:0rem; padding:.5rem 0rem;}}
.dropdown-menu {border-radius: 0; opacity: .95; padding:1rem 0rem;}
	@media (max-width: 768px) {.dropdown-menu {padding:0rem;}}
.dropdown-wide .dropdown-menu {min-width:480px;}
	@media (min-width: 992px) {.dropdown-wide .dropdown-menu {min-width:992px;}}
	@media (min-width: 768px) {
		.dropdown-menu.places {columns: 2;}
		.dropdown-menu.countries {columns: 3;}
	}
.filters .dropdown .btn {width:100%;}
.filters .dropdown-menu {width:100%;}
.nav-social {position:absolute; top:80px; right:0;}
.navbar input.search {font-size:150%;}
.navbar .dropdown-menu.search {margin-top:60px;}
.navbar-toggler {float: right;}
.navbar-brand {position: absolute; top:0%; left:0%;}
.navbar-brand img {height:120px; margin-top:-20px;}
	@media (max-width: 991.9px) {.navbar-brand img {margin-top: -16px; height:65px;}}
.navbar-expand-md .navbar-nav .nav-link {padding-left:0rem; padding-right:1rem;}
	@media (max-width: 991.9px) {.navbar-global {height:50px; box-shadow: 0px 1px 10px 2px #333;}}
	@media (min-width: 768px) {.navbar-nav {margin-left:100px;}}
.show {transition: visibility 1s ease-in-out;}
.fixed-top-2 {margin-top: 40px;}

/******************  SLICK OVERRIDES  ********************************/
.slick-projects div {padding:0rem .5rem;}
.slick-images div {padding:0rem .5rem; position: relative;}
.slick-images figcaption {
	background: #222; padding:2rem; font-size:110%; margin-top:-50px; position:relative; width:70%; left:50%; transform: translateX(-50%);}
	@media (max-width: 768px) {.slick-images figcaption {font-size:110%; margin-top:0px; width:100%;}}

/******************  HELPERS  ********************************/
section.bg-light+section.bg-light, 
section.bg-secondary+section.bg-secondary,
section.bg-primary+section.bg-primary,
section.bg-dark+section.bg-dark{
	margin-top:-40px; padding-top:0px;} /*reduce gap between adjacent card rows*/

.arrow_box {position:relative;}
.arrow_box:after, .arrow_box:before {
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 151, 170, 0);
	border-width: 50px;
	margin-top: -50px;
	z-index:100;	
}
.arrow_box:after {
	left: 100%;
	border-left-color: #00728F;
}
.arrow_box:before {
	right: 100%;
	border-right-color: #00728F;
}
.article img {display: block; max-width: 100%; height: auto;}
.clear {clear:both;}
.contain {width: 100%; object-fit: contain}
.cover {background-size: cover; background-position:center; position: relative;}
.credit {position:absolute; top:5px; right:10px; font-size:55%; z-index:100;}
	@media (max-width: 767.9px) {.credit {display:none;}}
	@media (min-width: 992px) {.credit {top:70px;}}
.curl {position:relative; z-index: 1000;}
.curl:before {content: ""; position: absolute; top: 0; right: 0; border-width: 0 24px 24px 0; border-style: solid; border-color: #CCCCCC #fff; margin-right:14px;}
.gradient {
	height:300px; width:100%; z-index:0; position:absolute; bottom:0;
	background: rgb(34,34,34);
	/*background: -moz-linear-gradient(0deg, rgba(53,53,53,1) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(53,53,53,1) 0%, rgba(0,0,0,0) 100%);*/
	background: linear-gradient(0deg, rgba(53,53,53,1) 0%, rgba(0,0,0,0) 100%);
}
.gs-title, .gs-title *, .gs-result {font-size:1.5rem !important; height: auto !important;}
.gs-result .gs-title, .gs-result .gs-title * {text-decoration:none !important;}
.gs-visibleUrl, .gs-snippet {font-size:.8rem !important; height: auto !important;}
.gsc-cursor-page {font-size:.9rem !important;}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {background-color: #FFF !important;}
.gsc-webResult.gs-result {padding-bottom:1rem !important;}
.dark .text-right {background: linear-gradient(to right, rgba(1,0,0,0), rgba(1,0,0,.3));}
.mt-10 {margin-top:8rem;}
.opacity {opacity: 0.75;}
.overflow-hide {overflow: hidden}
.parallax {background-attachment: fixed;}
.pointer {cursor: pointer;}
.responsive {width:100%}
.shadow {box-shadow: 5px 10px 20px #cccccc;}
.square {width:100%; height:0; padding-bottom:100%;}
.text-shadow {text-shadow: 2px 2px 5px #222;}


/******************  CUSTOM  ********************************/
.article-header>div {min-height:400px;}
	@media (max-width: 767.9px) {.article-header>div {min-height:300px;}}
.crumb {position:absolute; top:60px; left:50%; transform: translateX(-50%); text-transform:uppercase; z-index:1000; text-shadow: 2px 2px 7px #222222;}
	@media (min-width: 992px) {.crumb {top:130px;}}

.fixednav, #fixedtoggle {padding: 15px; position: fixed;}
.fixednav {    
    top: 0;        
    margin-top:125px;
    width:175px;
    z-index:3;
}
.fixednav li {padding: 5px 0px; font-size:85%; line-height: 140%; border-bottom:1px solid #85cbd3;}
.fixednav ul:last-child  {border-bottom:0px;}
#fixedtoggle {    
    margin-left:155px; 
    margin-bottom:25px;
    transition: margin-left .5s;
}
.navhide {
    margin-left:-165px;
    transition: margin-left .5s;
}
@media (max-width: 1575px) {
    .fixednav {margin-left:-165px;}
    #fixedtoggle {margin-left:150px;}
    .navhide {margin-left:0px;}
}

.storyBgImage:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .3;
    background-size:cover; 
    background-attachment:fixed; 
    background-repeat: no-repeat;
    background-position: center;
}

/*map*/
#map {height: 400px; width: 100%; background: #FFFFFF;}
	@media (min-width: 768px) {#map {height: 500px;}}

.leaflet-popup-content { width:auto !important; min-width:300px; font-size:115%; }
	@media (min-width: 768px) {.leaflet-popup-content { min-width:480px; }}
/*social links*/
#sociallinks {position:fixed; color:white; width: 52px; height:104px; float:right; z-index:1200; right: 0px;}
#sociallinks a.facebook, #sociallinks a.twitter {width: 52px; height: 52px;display: none;}
	@media (min-width:47.5em){ #sociallinks a.facebook, #sociallinks a.twitter {display: block;} }
#sociallinks a.facebook {background: #f5f5f5 url('https://s3.amazonaws.com/wwfintcampaigns/walrus/facebook.gif') no-repeat left top;}
#sociallinks a.twitter {background: #f5f5f5 url('https://s3.amazonaws.com/wwfintcampaigns/walrus/twitter.gif') no-repeat left top;}
#sociallinks a.facebook:hover, #sociallinks a.facebook:active {background: #e5e5e5 url('https://s3.amazonaws.com/wwfintcampaigns/walrus/facebook2.gif') no-repeat left top;
} 
#sociallinks a.twitter:hover, #sociallinks a.twitter:active {background: #e5e5e5  url('https://s3.amazonaws.com/wwfintcampaigns/walrus/twitter2.gif') no-repeat left top;
} 


/*arctic map*/
.arcticmap {position:relative; z-index:0; width:600px; margin: 0 auto;}
	@media (max-width: 767.9px) {.arcticmap {display:none;}}
.arcticmap a.mapmarker {position:absolute; z-index:1; width:24px;height:24px;border-radius:12px; background:#0097aa;}
.arcticmap a.mapmarker.region {background:#AFAD0C;}
.arcticmap a.mapmarker span {display:none;}
.arcticmap a.mapmarker img {}
.arcticmap a.mapmarker:hover {color:#FFF; width:36px;height:36px;border-radius:18px; margin-right:-1%; z-index:200; position:absolute;}
.arcticmap a.mapmarker:hover span {display:block; z-index:9999; background:#222; white-space:nowrap; padding:12px; margin: 0px 0px 0px 40px; text-align:center; position:absolute; font-size:1.4rem;}
.arcticmap a.mapmarker:hover span:after {border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(34, 34, 34, 0);
	border-right-color: #222;
	border-width: 10px;
	margin-top: .5rem;
	left:-20px;
	}
.arcticmap.nopointer a.mapmarker:hover span:after {border-width:0;}
.arcticmap img {width:100%;}

/*Can get rid of imgholder once all cards converted */
.card-arctic {margin: 1rem 0rem;}
	@media (max-width: 767.9px) {.card-arctic>div {margin-bottom: 1rem;} }
.card-arctic .imgholder {height:100%; width:100%;}
	@media (max-width: 767.9px) {.card-arctic .imgholder {min-height:175px;} }
.card-arctic .card-img {overflow: hidden;}

/*Card with image overlay*/
.card-arctic.col_img_cap {position: relative; width:100%;}
.card-arctic.col_img_cap .col-text {position: absolute; top: 75%; height:25%; text-align:center; padding:0% 3%; width:100%; }
.card-arctic.col_img_cap .imgholder {height:375px; position: relative; width:100%;}

/*Card with image at top*/
.card-arctic.col_img_top .imgholder{height:275px;}
.card-arctic.col_img_top .card-img{height:275px;}

/*Card with round images*/
.card-arctic.col_circles {text-align:center; margin-bottom:3rem;}
.card-arctic.col_circles .wwf {text-transform: uppercase; }

	.card-arctic.col_circles .card-img {border-radius:50%; height:150px; width:150px; margin:auto; z-index:1;}
	.card-arctic.col_circles .card-img img {transform: scale(1); transition: all .7s; height:100%;}
	.card-arctic.col_circles .card-img:hover img {transform: scale(1.3); transition: all .7s;}
	.card-arctic.col_circles small {display:none;}

.card-arctic.col_plain .imgholder {min-height:400px;}

.card-arctic.col-text h3 {color:#222; font-size:200%;}

.featured {position:relative; height:auto;}
.featured div {padding: 4rem 2rem;}

.logo {position:absolute; top:0px; left:0px;}

.MarkupPagerNav {margin-top:2rem;}
.MarkupPagerNav li {display:inline; border:0px; margin-right:1rem;}
.MarkupPagerNavOn, .gsc-cursor-current-page {font-weight:bold;}

/*Cookie bar*/
 
.cookie-message {
 	 position:fixed;
 	 bottom:0;left:0;right:0;
 	 z-index: 99;
	text-align:center;
}
.cookie-message p {padding-top:15px;}
.cookiebar-close {
  cursor:pointer;
  border: 1px solid #FFF;
  text-align:center;	
  padding:7px;
  margin-bottom:10px;
}