/*
 Theme Name:   Global Climate Strike theme
 Template: baseline
 Theme URI:    https://baseline.350.org
 Description:  Theme for 350-hosted Global Climate Strike sites, Baseline parent theme
 Author:       Matthew Hinders-Anderson
 Author URI:   https://baseline.350.org
 Version:      1.0.3
 Text Domain:  bl-strikes
*/

/* Override map CSS (remove when fixed) */
body{
	height:auto !important;}
@supports (font-size: calc(1vh + 1vw)) {
  html {
    font-size: calc(.15vw + .15vh + 15px) !important; }
  @media only screen and (min-width: 1260px) {
    html {
      font-size: calc(.25vw + .25vh + 12.85px) !important; }
	}
}
/* end map override CSS */

#container{
	max-width:100%;}

.button, button{
	border-radius:0;	padding-top:1.4em;	padding-bottom:1.4em;}
p .button{
	margin-top:0.3em;	margin-bottom:0.3em;}
button.submit.button-primary,
.button.button-primary{
	background-color:#231f20;	box-shadow:0.3em 0.3em 0 #4ee58b;	color:#fff;	font-family:klima-web,-apple-system,sans-serif;	font-size:1.2rem;}
button.submit.button-primary:hover,
.button.button-primary:hover{
	color:rgba(255,255,255,0.8);}

.text-highlight-white{
	border:0.1px solid #fff;	-webkit-box-shadow:
		-0.1em 0 0px 0px #fff,
		0.1em 0 0 #fff,
		0px 0px 0 10em #fff inset;	box-shadow:
		-0.1em 0 0px 0px #fff,
		0.1em 0 0 #fff,
		0px 0px 0 10em #fff inset;}
.text-highlight-dkgray{
	border:0.1px solid #231f20;	-webkit-box-shadow:
		-0.1em 0 0px 0px #231f20,
		0.1em 0 0 #231f20,
		0px 0px 0 10em #231f20 inset;	box-shadow:
		-0.1em 0 0px 0px #231f20,
		0.1em 0 0 #231f20,
		0px 0px 0 10em #231f20 inset;}
.text-highlight-green{
	border:0.1px solid #4ee58b;
	-webkit-box-shadow:
		-0.1em 0 0px 0px #4ee58b,
		0.1em 0 0 #4ee58b,
		0px 0px 0 10em #4ee58b inset;
	box-shadow:
		-0.1em 0 0px 0px #4ee58b,
		0.1em 0 0 #4ee58b,
		0px 0px 0 10em #4ee58b inset;}

#modal-site-nav li a{
	border-bottom:0 none;}

.en h1,
.en h2,
.en h3{
	-webkit-hyphens:manual;	-moz-hyphens:manual;	hyphens:manual;}

/* Custom styles for Greve display font */
h1, h2, h3, .text-style-title0, .text-style-title1, .text-style-title2, .text-style-title3, .text-style-title4, .text-display, .text-font-display {
  text-transform: uppercase;  letter-spacing: calc(.03rem - 0.01em);}

.text-font-secondary{
	font-family:klima-web,monaco,menlo,courier,monospace;	letter-spacing:0;}
.text-font-secondary.text-caps{
	letter-spacing:calc(.03rem + .02em);}

/* use border-bottom for text link styles */
.section:not(#site-header):not(.nav) a:not(.button):not(.expando-link){
	border-bottom:2px solid #4ee58b;	text-decoration:none;	transition:0.1s all;}
.section:not(#site-header):not(.nav) a:not(.button):not(.expando-link):hover {
  background-color:#4ee58b;  color:inherit;}
/* don't use border-bottom for some links*/
.mapboxgl-control-container a{
	border-bottom:0 none !important;}

html{
	font-size:calc(.15vw + .15vh + 13px);}
body{
	position:relative;}
@media screen and (max-width:600px){
	#site-title-link{
		font-size:1.4rem;}
}

#container{
	background-color:#fff;	padding:calc(4vh + 2.5vw) 0;}
@media screen and (min-width:600px){
	#container{
		padding:calc(4vh + 2.5vw) calc(2.5vh + 4vw);}
}


/* Strikes Translated Frame */
/* animate the frame with a slow scroll */
@keyframes frameScrollTop{
  from{
    transform:translateX(0);}
  to{
		transform:translateX( calc(100vw - 1518px) );}
}
@keyframes frameScrollBottom{
  from{
		transform:translateX( calc(-1518px + 100vw) );}
  to{
		transform:translateX(0);}
}
@keyframes frameScrollLeft{
  from{
    transform:
			translateY(0)
			rotate(-90deg);}
  to{
		transform:
			translateY( calc(1518px - 100vh) )
			rotate(-90deg);}
}
@keyframes frameScrollRight{
  from{
    transform:
			translateY( calc(1518px - 100vh) )
			rotate(90deg);}
  to{
		transform:
			translateY(0)
			rotate(90deg);}
}
.animate-fadeInOut{
	animation-name:fadeInOut;	animation-direction: alternate;	animation-duration:800ms;	animation-iteration-count: infinite;	animation-timing-function:ease-in-out;	transform:scale(0.75);}
@keyframes fadeInOut{
	from {
	  opacity:1;}
	to {
	  opacity:0;}
}


#strikes-frame{
	bottom:0;	height:100%;	left:0;	overflow:hidden;	pointer-events:none;	position:absolute;	top:0;	width:100%;	z-index:5;}
#strikes-frame::before{
	border-top:3px solid #4ee58b;	border-bottom:3px solid #4ee58b;	content:'';	height:100%;	left:0;	pointer-events:none;	position:absolute;	top:0;	width:calc(100% - 6px);	z-index:6;}
.strikes-frame{
	animation-direction:alternate;	animation-duration:140s;	animation-iteration-count:infinite;	animation-timing-function:linear;	background-image:url(images/strike-frame-edge.svg);	background-position:18px 5px;	background-repeat:repeat-x;	background-size:1536px 15px;	height:22px;	position:absolute;	width:1536px;}
#strikes-frame-top{
	animation-name:frameScrollTop;	top:3px;	left:0;}
#strikes-frame-bottom{
	animation-name:frameScrollBottom;	bottom:3px;	left:0;	transform:rotate(180deg);}
#strikes-frame-left,
#strikes-frame-right{
	display:none;}
/* Don't animate for people who don't like motion */
@media (prefers-reduced-motion: reduce) {
  .strikes-frame{
    animation:none !important;}
}

@media screen and (min-width:600px){
	.strikes-frame{
		animation-duration:100s;}
	#strikes-frame-left{
		animation-name:frameScrollLeft;		animation-duration:130s;		display:block;		left:3px;		bottom:0;		transform:translateY(0) rotate(-90deg);		transform-origin:left top;		position:fixed;}
	#strikes-frame-right{
		animation-name:frameScrollRight;		animation-duration:130s;		display:block;		right:3px;		bottom:0;		transform:translateY(1518px) rotate(90deg);		transform-origin:right top;		position:fixed;}
	/* Add border to conceal frame edges extending outside the rectangle */
	#strikes-frame::after{
		border:8px solid #fff;		content:'';		height:calc(100% - 16px);		left:0;		pointer-events:none;		position:absolute;		top:0;		width:calc(100% - 16px);		z-index:4;}
	/* add images in corners to cover up overlapping edges */
	#strikes-frame::before{
		background-image:
			url(images/strike-frame-corner.png),
			url(images/strike-frame-corner.png),
			url(images/strike-frame-corner.png),
			url(images/strike-frame-corner.png);		background-position:
			left top,
			right top,
			right bottom,
			left bottom;		background-repeat:
			no-repeat,
			no-repeat,
			no-repeat,
			no-repeat;		background-size:
			25px 25px,
			25px 25px,
			25px 25px,
			25px 25px;		border:3px solid #4ee58b;		width:calc(100% - 6px);	}

	@media screen and (min-width:1100px){
		.strikes-frame{
			animation-duration:60s;}
		#strikes-frame-left{
			animation-duration:90s;}
		#strikes-frame-right{
			animation-duration:90s;}
	}

	/* Don't animate for people who don't like motion */
	@media (prefers-reduced-motion: reduce) {
		#strikes-frame div{
			animation:none !important;}
	}
}

/* Homepage */

.homepage-logo{
	margin-left:auto;	margin-right:auto;	width:48vw;	max-width:13rem;	min-width:180px;}
#join .section-inner{
	max-width:30rem;}

#intro{
  overflow:hidden;}
/* Default banner */
.banner {
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0 5%;
  overflow: hidden;
  backface-visibility: hidden;}

/* Default image container */
.banner .background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transform: translate3d(0,0,0) scale(1.3);
  background: url(https://4bxy6j2b76081bdvp82332fi-wpengine.netdna-ssl.com/wp-content/uploads/sites/61/2019/09/strikes-bg-philippines-leo_sabangan-1199x800.jpg) no-repeat center center;
  background-size: cover;}

/* Loaded image container */
.loaded .banner .background {
  animation-duration: 30s;
  animation-name: zoom;
  animation-iteration-count: infinite;
  animation-direction: alternate;}

@keyframes zoom {
  from {
    transform: translate3d(0,0,0) scale(1.25);}
  to {
    transform: translate3d(0,0,0) scale(1);}
}


/* single page */
#page-header{
	color:initial;} /* fix white-on-white text */
#page-header .section-img-credit{
	display:none;}
.bg-on #post-subtitle{
	text-shadow:0 0 0 transparent;}
#post-meta,
#post-meta::after{
	background-color:transparent;	border-color:transparent;}

/* Slider */
.slideshow-wrapper{}

.slick-slider{
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color:transparent;}

.slick-list{
	position:relative;
	display:block;
	overflow:hidden;
	margin:0;
	padding:0;}
.slick-list:focus{
	outline: none;}
.slick-list.dragging{
	cursor:pointer;
	cursor:hand;}

.slick-slider .slick-track,
.slick-slider .slick-list{
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);}

.slick-track{
	position:relative;
	top:0;
	left:0;
	display:block;
	margin-left:auto;
	margin-right:auto;}
.slick-track:before,
.slick-track:after{
	display:table;
	content:'';}
.slick-track:after{
	clear:both;}
.slick-loading .slick-track{
	visibility:hidden;}

.slick-slide{
	display:none;
	float:left;
	height:100%;
	min-height:1px;
	margin:0 0.6em;}
[dir='rtl'] .slick-slide{
	float:right;}
.slick-slide img{
	display:block;
	margin:0 auto;}
.slick-slide.slick-loading img{
	display:none;}
.slick-slide.dragging img{
	pointer-events:none;}
.slick-initialized .slick-slide{
	display:block;}
.slick-loading .slick-slide{
	visibility:hidden;}
.slick-vertical .slick-slide{
	display:block;
	height:auto;
	border:1px solid transparent;}
.slick-arrow.slick-hidden {
	display: none;}

.slideshow-wrapper button {
	background: transparent;
	color: inherit;
	padding: 0.8em 1em;
	margin: 0 0.2em;
	border-radius: 3px;
	font-family: klima-web,-apple-system,BlinkMacSystemFont,arial,sans-serif;
	font-size: 0.75em;
}
.slideshow-controls-prevnext{
	display:flex;
	justify-content:space-between;
	padding:1em;}
.slick-prev::before{
	content:"← ";}
.slick-next::after{
	content:" →";}

.slideshow-controls-play-pause{
	display:none;}
@media screen and (min-width:600px){
	.slideshow-controls-play-pause{
		display:block;
		margin-top:-3.2em;}
	.slick-control-play,
	.slick-control-pause{
		display:none;}
	.slick-control-active{
		display:inline;}
}

/* lightbox */
.slbOverlay,.slbWrapOuter,.slbWrap{position:fixed;top:0;right:0;bottom:0;left:0}.slbOverlay{overflow:hidden;z-index:2000;background-color:#000;opacity:0.7;-webkit-animation:slbOverlay 0.5s;-moz-animation:slbOverlay 0.5s;animation:slbOverlay 0.5s}.slbWrapOuter{overflow-x:hidden;overflow-y:auto;z-index:2010}.slbWrap{position:absolute;text-align:center}.slbWrap:before{content:"";display:inline-block;height:100%;vertical-align:middle}.slbContentOuter{position:relative;display:inline-block;vertical-align:middle;margin:0px auto;padding:0 1em;box-sizing:border-box;z-index:2020;text-align:left;max-width:100%}.slbContentEl .slbContentOuter{padding:5em 1em}.slbContent{position:relative}.slbContentEl .slbContent{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;background-color:#fff;box-shadow:0 0.2em 1em rgba(0,0,0,0.4)}.slbImageWrap{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;position:relative}.slbImageWrap:after{content:"";position:absolute;left:0;right:0;top:5em;bottom:5em;display:block;z-index:-1;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background-color:#FFF}.slbDirectionNext .slbImageWrap{-webkit-animation:slbEnterNext 0.4s;-moz-animation:slbEnterNext 0.4s;animation:slbEnterNext 0.4s}.slbDirectionPrev .slbImageWrap{-webkit-animation:slbEnterPrev 0.4s;-moz-animation:slbEnterPrev 0.4s;animation:slbEnterPrev 0.4s}.slbImage{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:5em 0;margin:0 auto}.slbCaption{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-size:1.4em;position:absolute;left:0;right:0;bottom:0;padding:.71429em 0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbCloseBtn,.slbArrow{margin:0;padding:0;border:0;cursor:pointer;background:none}.slbCloseBtn::-moz-focus-inner,.slbArrow::-moz-focus-inner{padding:0;border:0}.slbCloseBtn:hover,.slbArrow:hover{opacity:0.5}.slbCloseBtn:active,.slbArrow:active{opacity:0.8}.slbCloseBtn{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;font-size:3em;width:1.66667em;height:1.66667em;line-height:1.66667em;position:absolute;right:-.33333em;top:0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbLoading .slbCloseBtn{display:none}.slbLoadingText{font-size:1.4em;color:#fff;color:rgba(255,255,255,0.9)}.slbArrows{position:fixed;top:50%;left:0;right:0}.slbLoading .slbArrows{display:none}.slbArrow{position:absolute;top:50%;margin-top:-5em;width:5em;height:10em;opacity:0.7;text-indent:-999em;overflow:hidden}.slbArrow:before{content:"";position:absolute;top:50%;left:50%;margin:-.8em 0 0 -.8em;border:.8em solid transparent}.slbArrow.next{right:0}.slbArrow.next:before{border-left-color:#fff}.slbArrow.prev{left:0}.slbArrow.prev:before{border-right-color:#fff}.slbIframeCont{width:80em;height:0;overflow:hidden;padding-top:56.25%;margin:5em 0}.slbIframe{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background:#000}@-webkit-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-moz-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-webkit-keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnter{from{opacity:0;-moz-transform:translate3d(0, -1em, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0);-moz-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);-o-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnterNext{from{opacity:0;-moz-transform:translate3d(4em, 0, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0);-moz-transform:translate3d(4em, 0, 0);-ms-transform:translate3d(4em, 0, 0);-o-transform:translate3d(4em, 0, 0);transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnterPrev{from{opacity:0;-moz-transform:translate3d(-4em, 0, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0);-moz-transform:translate3d(-4em, 0, 0);-ms-transform:translate3d(-4em, 0, 0);-o-transform:translate3d(-4em, 0, 0);transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}