/*
This CSS file contains the CSS needed for the core Hopp FAW Campaigns experience.

@package Hopp FAW Campaigns
@since 1.0.0
@version 1.0.10

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
Typography (T)
Cards (CA)
	CA - Blocks
Columns (CO)
	CO - Blocks
Left Right Paddles (LRP)
	LRP - Blocks
		LRP_B - Responsive
	LRP - Animations
	LRP_A - Links (incl. Buttons)
Modules (MO)
	MO - Core
		MO_C - Group
			MO_C_G_E - Gradient effect
	MO - Hopp
		MO_H - Accordion
Forms (F)
	F - MailChimp Styles

--------------------------------------------------------------*/
/*--------------------------------------------------------------
Typography (T)
--------------------------------------------------------------*/
.is-style-faw-h1-xxxxl,
.is-style-faw-h1-xxxl {
	font-size: 5rem;
	font-family: inherit;
	font-weight: normal;
}

.is-style-faw-h1-xxl {
	font-size: 3.5rem;
	font-family: inherit;
}

.is-style-faw-h1-xl,
.is-style-faw-h1-l {
	font-size: 4rem;
	font-family: inherit;
}

.is-style-faw-h1-l {
	font-weight: normal;
}

.is-style-faw-h3-l {
	font-size: 2.2rem;
	font-family: inherit;
}

.is-style-faw-text-xxl {
	font-size: 1.8rem;
}

.is-style-faw-text-xl {
	font-size: 1.4rem;
}

.is-style-faw-text-l {
	font-size: 1.6rem;
}

.is-style-faw-text-s {
	font-size: 1.4rem;
}

.is-style-faw-h1-xxxxl sub,
.is-style-faw-h1-xxxl sub {
	bottom: 0;
	font-size: 4rem;
}

@media (min-width: 400px) {
	.is-style-faw-h1-xxxxl,
	.is-style-faw-h1-xxxl {
		font-size: 6rem;
	}
}

@media (min-width: 520px) {
	.is-style-faw-h1-xxxxl,
	.is-style-faw-h1-xxxl {
		font-size: 8rem;
	}

	.is-style-faw-h1-xxxl {
		line-height: 7rem;
	}
}

@media (min-width: 768px) {
	.is-style-faw-h1-xxl {
		font-size: 9rem;
	}

	.is-style-faw-h1-xl {
		font-size: 7.5rem;
	}

	.is-style-faw-h1-l {
		font-size: 6rem;
	}

	.is-style-faw-h3-l {
		font-size: 3.5rem;
	}

	.is-style-faw-text-xxl {
		font-size: 3rem;
	}

	.is-style-faw-text-xl {
		font-size: 2.2rem;
	}

	.is-style-faw-text-l {
		font-size: 1.8rem;
	}
}

@media (min-width: 1100px) {
	.is-style-faw-h1-xxxxl {
		font-size: 15rem;
	}

	.is-style-faw-h1-xxxl {
		font-size: 12rem;
		line-height: 9.1rem;
	}

	.is-style-faw-h1-xxxxl sub,
	.is-style-faw-h1-xxxl sub {
		font-size: 7.5rem;
	}
}

/*--------------------------------------------------------------
Cards (CA)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
CA - Blocks
--------------------------------------------------------------*/
.faw-campaign-card-wrapper {
	margin-top: -30rem;
	position: relative;
	z-index: 1;
}

/*--------------------------------------------------------------
Columns (CO)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
CO - Blocks
--------------------------------------------------------------*/
@media (min-width: 768px) {
	.faw-md-12-in-8 .col-md-5 {
		-ms-flex: 0 0 37.5%;
			flex: 0 0 37.5%;
		max-width: 37.5%;
	}

	.faw-md-12-in-8 .offset-md-1 {
		margin-left: 12.5%;
	}
}

/*--------------------------------------------------------------
Left Right Paddles (LRP)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
LRP - Blocks
--------------------------------------------------------------*/
.main-wrapper {
	position: relative;
}

#primary + #primary {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.lrp-prev-enter #primary,
.lrp-next-enter #primary,
.lrp-prev-leave-ani #primary,
.lrp-next-leave-ani #primary {
	overflow-x: hidden;
}

/*--------------------------------------------------------------
LRP_B - Responsive
--------------------------------------------------------------*/
@media (max-width: 575px) {
	.feature-nav {
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		height: 5em;
		margin: 0;
		z-index: 1000;
		top: auto;
		bottom: 0;
	}

	#feature-nav {
		transition: all .2s ease-in-out;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	#feature-nav.feature-nav--visible {
		opacity: 1;
		visibility: visible;
		pointer-events: all;
	}

	.feature-nav:before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.4);
		-webkit-backdrop-filter: blur(.5rem);
				backdrop-filter: blur(.5rem);
	}
}

/*--------------------------------------------------------------
LRP - Animations
--------------------------------------------------------------*/
/* https://stackoverflow.com/questions/12686738/css-fade-left-to-right */
.nextFadingIn,
.lrp-next-leave-ani #primary + #primary .entry-content {
	-moz-animation: showNext 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-ms-animation: showNext 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-o-animation: showNext 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	animation: showNext 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-webkit-animation: showNext 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	animation-iteration-count: 1;
}

@-webkit-keyframes showNext {

	/* Chrome, Safari */
	0% {
		transform: translateX(100%);
		/* opacity: 0; */
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.lrp-next-leave-ani #primary + #primary .container {
	-moz-animation: showNextContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	-ms-animation: showNextContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	-o-animation: showNextContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	animation: showNextContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	-webkit-animation: showNextContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	animation-iteration-count: 1;
}

@-webkit-keyframes showNextContent {

	/* Chrome, Safari */
	0% {
		transform: translateX(25%);
		/* opacity: 0; */
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.prevFadingIn,
.lrp-prev-leave-ani #primary + #primary .entry-content {
	-moz-animation: showPrev 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-ms-animation: showPrev 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-o-animation: showPrev 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	animation: showPrev 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-webkit-animation: showPrev 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	animation-iteration-count: 1;
}

@-webkit-keyframes showPrev {

	/* Chrome, Safari */
	0% {
		transform: translateX(-100%);
		/* opacity: 0; */
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.lrp-prev-leave-ani #primary + #primary .container {
	-moz-animation: showPrevContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	-ms-animation: showPrevContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	-o-animation: showPrevContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	animation: showPrevContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	-webkit-animation: showPrevContent 1s cubic-bezier(0.76, 0, 0.24, 1) .05s; /* easeInOutQuart */
	animation-iteration-count: 1;
}

@-webkit-keyframes showPrevContent {

	/* Chrome, Safari */
	0% {
		transform: translateX(-25%);
		/* opacity: 0; */
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.nextFadingOut,
.lrp-next-leave-ani .entry-content {
	-moz-animation: showNextOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-ms-animation: showNextOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-o-animation: showNextOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	animation: showNextOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	-webkit-animation: showNextOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@-webkit-keyframes showNextOut {

	/* Chrome, Safari */
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		transform: translateX(-100%);
		/* opacity: 0; */
	}
}

.prevFadingOut,
.lrp-prev-leave-ani .entry-content {
	-webkit-animation: showPrevOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	   -moz-animation: showPrevOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	 	-ms-animation: showPrevOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	  	 -o-animation: showPrevOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
			animation: showPrevOut 1s cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@-webkit-keyframes showPrevOut {

	/* Chrome, Safari */
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		transform: translateX(100%);
		/* opacity: 0; */
	}
}

/*--------------------------------------------------------------
LRP_A - Links (incl. Buttons)
--------------------------------------------------------------*/
.wp-block-button__link.lrp-next-link,
.wp-block-button__link.lrp-prev-link {
	position: absolute;
	padding: 0;
	width: 3.2rem;
	height: 3.2rem;
	z-index: 1;
	border: none;
	outline: none;
	cursor: pointer;
	border-radius: 6rem;
	-webkit-box-shadow: 0 0 0.5rem rgb(0 0 0 / 16%);
	-moz-box-shadow: 0 0 .5rem rgb(0 0 0 / 16%);
	box-shadow: 0 0 0.5rem rgb(0 0 0 / 16%);
	text-indent: -9999px;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.lrp-link {
	transition: all .2s ease-in-out-out;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.lrp-link--visible, 
.lrp-link--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.wp-block-button__link.lrp-next-link {
	right: 2rem;
}

.wp-block-button__link.lrp-prev-link {
	left: 2rem;
}

.lrp-next-link:before,
.lrp-prev-link:before {
	content: '';
	position: absolute;
	border: 1px solid currentColor;
	border-width: 0.2rem 0 0 0.2rem;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	width: 1.2rem;
	height: 1.2rem;
	transform: rotate(140deg);
}

.lrp-next-link:before {
	left: -.5rem;
}

.lrp-prev-link:before {
	transform: rotate(-40deg);
	right: -.5rem;
}

@media (max-width: 575px) {
	#faw-carousel-menu-id--prev ~ .back-top-btn-wrapper,
	#faw-carousel-menu-id--next ~ .back-top-btn-wrapper {
		display: none;
	}
}

@media (min-width: 576px) {
	.wp-block-button__link.lrp-next-link, 
	.wp-block-button__link.lrp-prev-link {
		height: 6rem;
		position: fixed;
	}

	.lrp-next-link:hover,
	.lrp-prev-link:hover,
	.lrp-next-link:focus,
	.lrp-prev-link:focus {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}	

}

/*--------------------------------------------------------------
Modules (MO)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
MO - Core
--------------------------------------------------------------*/

/*--------------------------------------------------------------
MO_C - Group
--------------------------------------------------------------*/

/*--------------------------------------------------------------
MO_C_G_E - Gradient effect
--------------------------------------------------------------*/
/* https://stackoverflow.com/questions/48668918/how-to-stick-an-element-to-the-bottom-once-the-bottom-is-in-view */
.is-style-sticky-fade-in-out-group .wp-block-group:first-of-type,
.is-style-sticky-fade-in-out-group .wp-block-group:last-of-type {
	z-index: 1;
	position: -webkit-sticky;
	position: sticky;
}

/* Top 'clip' gradient. Position from top inc sticky nav */
.is-style-sticky-fade-in-out-group .wp-block-group:first-of-type {
	top: -1px;
	position: sticky;
}

#faw-carousel-menu-id--prev ~ article .is-style-sticky-fade-in-out-group .wp-block-group:first-of-type,
#faw-carousel-menu-id--next ~ article .is-style-sticky-fade-in-out-group .wp-block-group:first-of-type {
	top: 84px;
}

/* Bottom 'clip' gradient */
.is-style-sticky-fade-in-out-group .wp-block-group:last-of-type {
	top: auto;
	bottom: 0;
}

/* First column with sticky text */
.is-style-sticky-height-column {
	z-index: 1;
}

/* Text container */
.is-style-sticky-fade-in-out-container {
	position: relative;
	/* Give our first col full content height */
}

#faw-carousel-menu-id--prev ~ article .is-style-sticky-height-column .is-style-faw-sticky,
#faw-carousel-menu-id--next ~ article .is-style-sticky-height-column .is-style-faw-sticky {
	top: 203px;
}

/* Tablet and smaller */
@media (max-width: 768px) {

	.is-style-sticky-height-row {
		position: relative;
	}

	/* On mobile need to move the content down for the abs pos header */
	.is-style-sticky-height-row .col-md-8 {
		padding-top: 143px;
	}

	.is-style-sticky-height-column {
		height: 100%;
		top: 0;
		position: absolute;
	}

	.is-style-sticky-fade-in-out-group {
		position: relative;
	}

	.is-style-sticky-fade-in-out-group .is-style-faw-sticky {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.is-style-sticky-fade-in-out-group .wp-block-group:first-of-type {
		top: -1px;
	}

	.is-style-sticky-height-column .is-style-faw-sticky .wp-block-group.has-background {
		width: 100%;
	}

	.is-style-sticky-height-column .is-style-faw-sticky .is-style-faw-h3-l {
		margin-bottom: 0;
	}

	#faw-carousel-menu-id--prev ~ article .is-style-sticky-height-column .is-style-faw-sticky,
	#faw-carousel-menu-id--next ~ article .is-style-sticky-height-column .is-style-faw-sticky {
		top: 63px;
	}
	
}

/* Tablet and larger */
@media (min-width: 768px) {
	/* Override the padding added via js */
	.is-style-sticky-height-row .col-md-8 {
		padding-top: 0 !important;
	}

	/* Position header from top inc sticky nav */
	.is-style-sticky-height-column .is-style-faw-sticky {
		top: 11rem;
	}

	.is-style-sticky-height-column .is-style-faw-sticky .pb-md-0,
	.is-style-sticky-height-column .is-style-faw-sticky .py-md-0 {
		padding-bottom: 0 !important;
	}

}

/*--------------------------------------------------------------
MO - Hopp
--------------------------------------------------------------*/
/*--------------------------------------------------------------
MO_H - Accordion
--------------------------------------------------------------*/
.is-style-faw-cam-acc .faw-acc__header {
	font-family: ff-good-headline-web-pro, sans-serif;
}

.is-style-faw-cam-acc .faw-acc--rounded__excerpt {
	margin: 0;
}

.is-style-faw-cam-acc .faw-acc__header > span > strong {
	padding-top: 0;
	padding-bottom: 0.5rem;
	display: block;
}

.is-style-faw-cam-acc .faw-acc__header > span {
	padding: 3rem 0 2.5rem;
}

.is-style-faw-cam-acc .faw-acc__header[aria-expanded="true"] > span {
	padding-bottom: 1rem;
}

.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__panel {
	border-color: #fff;
}

.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__panel {
	color: #fff;
}

.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:hover,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:active,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:focus {
	color: #fff;
}

.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header > span > strong:before,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header > span > strong:after,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:hover > span > strong:before,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:active > span > strong:before,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:focus > span > strong:before,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:hover > span > strong:after,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:active > span > strong:after,
.faw-acc__wrapper .is-style-faw-cam-acc .faw-acc__header:focus > span > strong:after {
	background: #fff;
}

.is-style-faw-cam-acc .faw-acc__header,
.is-style-faw-cam-acc .faw-acc__header:hover,
.is-style-faw-cam-acc .faw-acc__header:active,
.is-style-faw-cam-acc .faw-acc__header:focus {
	border-color: #fff;
}

/*--------------------------------------------------------------
Forms (F)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
F - MailChimp Styles
--------------------------------------------------------------*/
.entry-content #faw-contact-form {
    background: #2c2c2c;
	color: #fff;
}

.entry-content #faw-contact-form label {
	font-size: 1.4rem;
	margin-bottom: 1rem;
	display: block;
}

.entry-content #faw-contact-form input:not([type="submit"]) {
	box-shadow: 0 0 0.5rem #00000029;
    border-radius: 0.5rem;
}

.entry-content #faw-contact-form .indicates-required {
	text-align: right;
	margin-bottom: 1rem;
}

.entry-content #faw-contact-form .indicates-required span,
.entry-content #faw-contact-form label span {
	color: #e5231b;
}

.entry-content #faw-contact-form .mc-field-group {
	min-height: 5rem;
	margin-bottom: 1.5rem;
}

.entry-content #faw-contact-form #mc-embedded-subscribe-form div.mce_inline_error {
	font-size: var(--wp--preset--font-size--small) !important;
	color: #e5231b;
	margin-top: 1rem;
}

.entry-content #faw-contact-form .wp-block-button {
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.entry-content #faw-contact-form label {
		font-size: 2.2rem;
	}
}