/*
Theme Name: CastleWood Treetop Adventure
Template: generatepress
Theme URI: https://castlewoodtreetopadventure.com/
Author: jakewoods.io for Make it Pop
Author URI: https://makeitpop.agency/
Description: A Custom theme for CastleWood Treetop ADventure
Version: 0.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gpc
*/

/*
 * CONTENTS:
 * 1        GLOBALS & DEFAULTS  ----------------
 * 1.1      -   Custom Properties
 * 1.2      -   Overrides
 * 1.3      -   Helper Classes
 * 2        GLOBAL COMPONENTS & STYLES  --------
 * 2.1      -   Sections / Containers
 * 2.1.1    -   -   Inner Wrapper Container
 * 2.2      -   Grids
 * 2.3      -   Typography
 * 2.4      -   Links
 * 2.5      -   Buttons
 * 2.5.1	-	-	Button Wraps
 * 2.6      -   Images
 * 2.7      -   Forms
 * 2.7.1    -   -   Generic Form Styling
 * 2.7.2    -   -   Specific Form Styling
 * 2.8      -   Backgrounds
 * 2.9      -   Overlays
 * 2.10     -   GP Element Layouts
 * 3        HEADERS  ----------------------------
 * 3.1      -   Headers
 * 3.1.1    -   -   Mobile Header
 * 3.1.2    -   -   Slideout Panel
 * 3.1.3    -   -   Desktop Header
 * 3.1.4    -   -   Sticky Header
 * 3.2      -   Header Navigation 
 * 3.2.1    -   -   Mobile Navigation
 * 3.2.2    -   -   Slideout Navigation
 * 3.2.3    -   -   Desktop Primary
 * 3.2.4    -   -   Desktop Secondary
 * 3.2.5    -   -   Sticky Navigation
 * 3.3      -   Additional Elements
 * 4        FOOTERS  ----------------------------
 * 4.1      -   Global Footer
 * 4.1.1    -   -   Layout
 * 4.1.2    -   -   Footer Navigation
 * 4.1.3    -   -   Logo
 * 4.1.4    -   -   Content
 * 4.1.5    -   -   Copyright Bar    
 * 5        CONTENT BLOCKS ----------------------
 * 5.1		-	Top Banner
 * 5.2		-	Intro Content
 * 5.3      -   Adventure Section
 * 5.3.1	-	-	Adventure Section Item
 * 5.3.2	-	-	Adventure Item Modal
 * 5.4		-	Gallery Section
 * 5.5		-	Group Link Boxes
 * 5.6		-	Page Hero
 * 5.7		-	Logo Testimonial
 * 5.8		-	Groups Download Section
 * 6        GP ELEMENTS & TEMPLATES -------------
 * 6.1      -   Hooks
 * 6.2      -   Page Hero
 * 6.3      -   Content Template
 * 6.4      -   Loop Template
 * 6.5      -   Post Meta Template
 * 6.6      -   Post Navigation
 * 6.7      -   Archive Navigation
 * 6.8      -   Right Sidebar
 * 6.9      -   Left Sidebar
 * 7        PAGE TEMPLATES  -------------------- 
 * 7.1      -   404 Page
 * 7.2		-	Groups Template
 * 7.3		-	FAQ's Page
 * 7.4		-	Home Page Template
 * 7.5		-	Contact Page
 * 7.6		-	Terms & Conditions Page
 * 8        PLUGINS  ---------------------------
 * 8.1      -   Cookieyes - Cookies Consent
 * 9        PAGE SPECIFIC STYLES / OVERRIDES  --
 * 10       ANIMATIONS  ------------------------
 * 11       OTHER  -----------------------------
*/


/* 
 * =========================================== *
 * 1 - GLOBALS & DEFAULTS
 * =========================================== *
*/
/* 
 * NOTE: Colours set in theme customiser

 * Base		        	--base			    	#FFFFFF
 * Contrast		    	--contrast		    	#16241A
 * Contrast 2	    	--contrast-2	    	#000000
 * Accent		    	--accent		    	#70BD95
 * Dark Accent    		--dark-accent       	#146656
 * Secondary Accent		--secondary-accent		#E36312
 * Success        		--color-success     	#3f9582
 * Warning        		--color-warning     	#bc854a
 * Danger         		--color-danger      	#f44336
*/


body{
	background-color: var(--accent);
	color: var(--dark-accent);
	margin: 0;
	min-height: 100vh;
	min-width: 320px;
	padding: 0;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: none;
}
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

iframe{
	max-width: 100%;
}

.full-width-content .container.grid-container {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------
 * 1.1 - - Custom Properties
 * ---
   Sets custom properties to be used
   repeatedly and consistently across site. 
 * ---------------------------------------- */
:root {
    --body-font-letter-spacing: 1.618rem;
    --section-side-padding: 1.5rem;
    --section-vertical-padding: 6rem;
	--section-half-vertical-padding: 3rem;
    --section-main-width: 120rem;
}


/* -------------------------------------------
 * 1.2 - - Overrides
 * ---
   Removes potential theme conflicts. 
 * ---------------------------------------- */

/* --- fixes potential theme css conflict --- */
.acf-map img {
    max-width: inherit !important;
}

/* --- responsive embed --- */
.embed-container { 
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; 
}
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}

/* --- breadcrumbs --- */
.breadcrumbs {
    font-size: 14px;
    margin-bottom: 12px;
}


/* -------------------------------------------
 * 1.3 - - Helper Classes
 * ---
   Global utility classes
 * ---------------------------------------- */
/* Used to remove elements visually while preserving them in the DOM for SEO */
.hide-me {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}



/* 
 * =========================================== *
 * 2 - GLOBAL COMPONENTS & STYLES
 * ---
 * This is custom styling for global elements &
 * also additional styling for elements styled 
 * by GB Global Styles
 * =========================================== *
*/

/* -------------------------------------------
 * 2.1 - - Sections / Containers
 * --- 
   Styles the main "macro" spacing containers
   Outer divs/containers & wraps.
  
   Many of these will be set in the "Sections
   GB Global Style
 * ---------------------------------------- */
section {
	margin-bottom: 8rem;
}
section:last-child,
section:last-of-type {
	margin-bottom: 0;
}

.cta-container,
.gb-container-main {
	max-width: var(--section-main-width);
	margin: 0 auto;
	padding: 0 var(--section-side-padding);
	width: 100%;
}

.section-heading h2 {
    color: #146656;
    font-family: 'FakeEmpire', 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 10rem;
    line-height: 1;
    margin: 0 0 3rem;
    text-align: center;
    text-transform: uppercase;
}

@media only screen and (max-width : 1023px) {
	.section-heading h2{
		font-size: 7rem;
	}

	.cta-container,
	.gb-container-main {
		margin: auto;
		width: 100%;
	}
}

@media only screen and (max-width : 767px) {
	.section-heading{
		padding-bottom: 2rem;
	}
	.section-heading h2{
		font-size: 4.4rem;
	}
}

/* 
 * 2.1.1 - - - Inner Wrapper Container
   ---------------------------------------- */
/* Removes bottom margin on last inner child of outer wrapper to ensure consistent spacing */
.gb-container-main .gb-inside-container .gb-container:last-child,
.gb-container-main-half-pad .gb-inside-container .gb-container:last-child,
.gb-container-main-2x-pad .gb-inside-container .gb-container:last-child {
    margin-bottom: 0;
}


/* -------------------------------------------
 * 2.2 - - Grids
 * --- 
   Styles any grids required throughout.
  
   Many of these will be set in the "Grids"
   GB Global Style, but can also contain any
   custom written layout grids
 * ---------------------------------------- */



/* -------------------------------------------
 * 2.3 - - Typography
 * --- 
   Custom Typography Styles.
  
   Main typography will be set in GP customiser
   and within the Typography Global styles - this
   section will allow you to extend these styles,
   or add styling not yet possible in the customiser/
   GB UI editor
 * ---------------------------------------- */
 @font-face {
	font-family: 'Montserrat';
	src: url('./fonts/Montserrat-Medium.woff2') format('woff2'),
	url('./fonts/Montserrat-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('./fonts/Montserrat-Bold.woff2') format('woff2'),
	url('./fonts/Montserrat-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'FakeEmpire';
	src: url('./fonts/FakeEmpire-Regular.woff2') format('woff2'),
	url('./fonts/FakeEmpire-Regular.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

p:last-child {
    margin-bottom: 0;
}
/* Remove bottom margin on last paragraph in container (front end) */
.gb-container p:last-child:last-of-type {
    margin-bottom: 0px;
}
/* Remove bottom margin on last paragraph in container (editor) */
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}

/* -------------------------------------------
 * 2.4 - - Links
 * --- 
   Custom Links Styles.
  
   Basic link styles are set in GP customiser,
   but you can extend them here. 
 * ---------------------------------------- */
 a,
 .button,
 label,
 input[type="submit"]{
	 -webkit-transition: all 0.2s linear;
	 -moz-transition: all 0.2s linear;
	 -o-transition: all 0.2s linear;
	 transition: all 0.2s linear;
	 outline: none!important;
 }
 a{
	 color: #29ABE2;
	 display: inline-block;
	 text-decoration: none;
 }
 a:hover{
	 color: #1B2974;
 }

/* -------------------------------------------
 * 2.5 - - Buttons
 * --- 
   Custom Buttons Styles.
 
   Buttons will be GB Blocks usually, but add any
   custom CSS required here.
 * ---------------------------------------- */
.button,
.gb-button,
.gb-button-primary {
	background: var(--dark-accent);
	color: var(--base);
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;
	margin-right: 10px;
	padding: 1.05rem var(--section-side-padding);
	text-align: center;
	text-transform: uppercase;
}
.button:hover,
.gb-button:hover,
.gb-button-primary:hover {
	background: var(--contrast-2);
	color: var(--base);
}
.button:last-child,
.gb-button:first-child,
.gb-button-primary:first-child {
  margin-top: 0;
}
.button:last-child,
.gb-button:last-child,
.gb-button-primary:last-child {
  margin-right: 0;
}

.button-white,
.gb-button-white {
	background: var(--base);
	color: var(--dark-accent);
}
.button-white:hover,
.gb-button-white:hover {
	background: var(--accent);
	color: var(--dark-accent);
}

.gb-button-tertiary {
	display: block;
	padding-left: 0;
	width: 100%;
}

@media (max-width: 768px) {
	.gb-button {
		margin-right: 0;
		width: 100%;
	}
}

@media (min-width: 768px) {
	

    .button:last-child,
    a.gb-button:last-child {
        margin-right: 0;
    }
}

/* 
 * 2.5.1 - - - Button Wraps
   ---------------------------------------- */
.cta-button-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	padding-top: 3rem;
}

/* -------------------------------------------
 * 2.6 - - Images
 * --- 
   Custom Images Styles.
 
   Extend any GB Global Style image elements here,
   or write custom CSS for non-GB image elements
 * ---------------------------------------- */
img{
	display: inline-block;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}
img:last-child{
	margin-bottom: 0;
}
img:first-child{
	margin-top: 0;
}

/* -------------------------------------------
 * 2.7 - - Forms
 * --- 
   Custom Form Styles.
  
   Generally, Fluent Forms is my form plugin of choice.
 * ---------------------------------------- */
/* 
 * 2.7.1 - - - Generic Form Styling
   ---------------------------------------- */
form.frm-fluent-form .ff-el-group .ff-el-input--label label {
	color: var(--base);
}

form.frm-fluent-form .ff-el-group .ff-el-input--content input,
form.frm-fluent-form .ff-el-group .ff-el-input--content textarea,
form.frm-fluent-form .ff-el-group .ff-el-input--content select {
	background-color: transparent;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	color: var(--base);
	padding: 1rem 1.5rem;
}
form.frm-fluent-form .ff-el-group .ff-el-input--content input:focus,
form.frm-fluent-form .ff-el-group .ff-el-input--content textarea:focus,
form.frm-fluent-form .ff-el-group .ff-el-input--content select:focus {
	border-color: var(--accent);
}
form.frm-fluent-form .ff-el-group .ff-el-input--content input::placeholder,
form.frm-fluent-form .ff-el-group .ff-el-input--content textarea::placeholder,
form.frm-fluent-form .ff-el-group .ff-el-input--content select::placeholder {
	color: rgba(255, 255, 255, 0.618);
}

form.frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit {
	border: 0;
	border-radius: 0!important;
	color: var(--contrast);
	font-size: 20px;
	font-weight: bold;
	padding: 10.5px 15px;
	-webkit-border-radius: 0!important;
	-moz-border-radius: 0!important;
	-ms-border-radius: 0!important;
	-o-border-radius: 0!important;
	text-transform: uppercase;
	width: 100%;
}

.ff-message-success,
.ff-errors-in-stack {
	color: var(--base);
}



/* 
 * 2.7.2 - - - Specific Form Styling
   ---------------------------------------- */
/* --------- FOOTER SIGN-UP FORM ---------- */
#fluentform_2 {
	font-size: 1.2rem;
}

#fluentform_2 .ff-el-group:first-child {
	margin-bottom: .5rem;
}

#fluentform_2 .ff-el-group .ff-el-input--content input {
	color: var(--base);
	font-size: 1.4rem;
}
#fluentform_2 .ff-el-group .ff-el-input--content input::placeholder {
	color: var(--base)!important;
	opacity: 0.75;
}
#fluentform_2 .ff-el-group .ff-el-input--content input:focus {
	background-color: transparent;
	border: 1px solid var(--accent)!important;
}

form#fluentform_2 .frm-fluent-form .ff-t-container {
	gap: 5px;
}

form#fluentform_2.frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit {
	border-radius: 0!important;
	border: 1px solid var(--contrast);
	font-size: 1.4rem;
	-webkit-border-radius: 0!important;
	-moz-border-radius: 0!important;
	-ms-border-radius: 0!important;
	-o-border-radius: 0!important;
}
form#fluentform_2.frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:hover {
	border-color: var(--base);
	opacity: 1;
}


/* -------------------------------------------
 * 2.8 - - Backgrounds
 * --- 
   Set any class-assigned reusable background
   styles here
 * ---------------------------------------- */
.trees-bg{
	background-image: url('https://no79design.com/castlewoodtree/wp-content/uploads/2023/03/main-bg.svg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 0;
}
.wrapper{
	position: relative;
	z-index: 2;
}



/* -------------------------------------------
 * 2.9 - - Overlays
 * --- 
   Set any class-assigned overlays here
 * ---------------------------------------- */


/* -------------------------------------------
 * 2.10 - - GP Elements Layouts
 * ---- 
   Custom styles for GP defined layout elements
 * ---------------------------------------- */



/* 
 * =========================================== *
 * 3 - HEADERS & NAVIGATION
 * ---
 * Styles the global masthead, headers & main site 
 * navigation elements.
 * =========================================== *

/* -------------------------------------------
 * 3.1 - - Headers
 * --- 
   Styles the header wrapper and all non-nav
   elements within the #masthead and mobile
   versions
 * ---------------------------------------- */
/* Hide site logo */
@media(max-width: 768px) {
	header.site-header .inside-header .site-logo {
		display: none;
	}
}


/* 
 * 3.1.1 - - - Mobile Header
   ---------------------------------------- */
.site-header .inside-header {
    padding: calc( var(--section-side-padding) * 2 ) var(--section-side-padding);
}

@media (max-width: 768px) {
	.site-header .inside-header {
		padding: calc( var(--section-side-padding) * 1.5 ) var(--section-side-padding);
	}

	#mobile-menu-control-wrapper {
		justify-content: flex-end;
		width: 100%;
	}
	#mobile-menu-control-wrapper button.menu-toggle {
		display: flex;
		justify-content: flex-end;
	}
	#mobile-menu-control-wrapper a.header-cta-button {
		width: auto;
	}
}

/* 
 * 3.1.2 - - - Slideout Panel
   ---------------------------------------- */
#generate-slideout-menu {
	background-color: var(--contrast);
	padding: 1.5rem;
}
#generate-slideout-menu button.slideout-exit.has-svg-icon {
	padding: 2rem;
}
#generate-slideout-menu .inside-navigation {
	padding: 8rem 2rem;
}

@media (max-width: 768px) {
	#generate-slideout-menu button.slideout-exit.has-svg-icon {
		padding: 1rem;
	}

	#generate-slideout-menu .inside-navigation {
		padding: 3rem 1rem;
	}
}

/* 
 * 3.1.3 - - - Desktop Header
   ---------------------------------------- */

/* 
 * 3.1.4 - - - Sticky Header
   ---------------------------------------- */

/* 
 * 3.1.5 - - - Merged Header
   ---------------------------------------- */


/* -------------------------------------------
 * 3.2 - - Header Navigation
 * --- 
   Styles the header wrapper and all non-nav
   elements within the #masthead and mobile
   versions
 * ---------------------------------------- */
/* 
 * 3.2.1 - - - Mobile Navigation
   ---------------------------------------- */

/* 
 * 3.1.2 - - - Slideout Navigation
   ---------------------------------------- */
#generate-slideout-menu .main-nav .slideout-menu .menu-item a {
	padding: 1.2rem;
}

/* 
 * 3.1.3 - - - Desktop Primary
   ---------------------------------------- */

/* 
 * 3.1.4 - - - Desktop Secondary
   ---------------------------------------- */

/* 
 * 3.1.4 - - - Sticky Navigation
   ---------------------------------------- */


/* -------------------------------------------
 * 3.3 - - Additional Elements
 * --- 
   Style any additional / custom header/nav 
   elements here.

   Will usually be added by GB/GP Elements but
   can extend and further customise here
 * ---------------------------------------- */
#mobile-menu-control-wrapper a.header-cta-button {
	font-weight: bold;
	margin-left: 30px;
	order: 2;
	padding: 1.5rem 3rem;
}



/* 
 * =========================================== *
 * 4 - FOOTERS
 * =========================================== *
*/
/* -------------------------------------------
 * 4.1 - - Global Footer
 * --- 
   Styles the global footer element
 * ---------------------------------------- */
.site-footer {
	position: relative;
	z-index: 1;
}
.footer-top{
	background: var(--dark-accent);
	color: var(--accent);
	padding: 6rem 0 8rem;
}
.footer-top a{
	color: inherit;
}
.footer-top a:hover{
	color: var(--base);
}
.footer-row{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
}
.footer-header {
	margin-bottom: 4rem;
}
.footer-col-6{
	max-width: 46%;
}
.footer-col-4 {
	max-width: 33%;
}
.footer-col-3{
	max-width: 25%;
}
.footer-widget{
	color: var(--accent);
	line-height: 2rem;
}
.footer-widget h4{
	font-size: inherit;
	font-weight: bold;
	margin: 0 0 1.2em;
}
.footer-logo-wrap {
	width: 100%;
}
.footer-logo {
	max-width: 30rem;
}
.footer-menu-wrap ul {
	margin: 0;
	padding: 0;
}
.footer-menu-wrap ul li {
	list-style: none;
}
.footer-contacts ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.footer-social{
	padding-top: 2.2rem;
}
.footer-social ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.footer-social li{
	display: inline-block;
	margin-right: 1.2rem;
}
.footer-bot{
	background: var(--base);
	color: var(--contrast);
	padding: 1rem 0;
	text-align: center;
}
.footer-bot a{
	color: inherit;
}
.footer-bot a:hover{
	color: var(--dark-accent);
}
.footer-author{
	font-size: 1.6rem;
	font-weight: bold;
}
.footer-author a {
	display: inline-flex;
	align-items: center;
}
.footer-author svg{
	display: inline-block;
	height: auto;
	margin-left: 0.5rem;
	width: 2.5em;
}

.footer li a {
	padding: 0 0 5px;
}
.footer li:last-child a {
	padding-bottom: 0;
}

@media only screen and (max-width: 1023px) {
	.footer-col-6{
		max-width: 30%;
	}
	.footer-col-3{
		max-width: 50%;
	}
}

@media only screen and (max-width: 767px) {
	.footer-top{
		padding: 5rem 0 6rem;
	}
	.footer-col{
		max-width: 100%;
		padding-bottom: 2rem;
		width: 100%;
	}
	.footer-col-6{
		padding-bottom: 3rem;
	}
	.footer-col:last-child{
		padding: 0;
	}
	.footer-logo img{
		width: 24rem;
	}
	.footer-author{
		font-size: 1.4rem;
	}
}


/* 
 * =========================================== *
 * 5 - CONTENT BLOCKS
 * ---
   This is custom styling for site and theme 
   specific custom content blocks
 * =========================================== *
*/
/* -------------------------------------------
 * 5.1 - - Top Banner
 * --- 
   Intro Text Elements elements
 * ---------------------------------------- */
.top-banner{
	position: relative;
}
.top-banner img{
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 192rem;
	width: 100%;
}

@media only screen and (max-width : 1023px) {
	.top-banner img{
		left: -23%;
		margin: 0;
		max-width: 146%;
		position: relative;
		width: 146%;
	}
}

@media only screen and (max-width : 767px) {
	.scroll-down{
		display: none;
	}
	.top-banner{
		margin-top: 45px;
		overflow: hidden;
	}
}

/* -------------------------------------------
 * 5.2 - - Intro Text
 * --- 
   Intro Text Elements elements
 * ---------------------------------------- */
.intro-section{
	margin-top: -19rem;
	position: relative;
	overflow: hidden;
	z-index: 2;
}
.intro-grass{
	background-image: url('https://no79design.com/castlewoodtree/wp-content/uploads/2023/03/grass-line.svg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	content: "";
	display: block;
	padding-top: 3.8%;
	margin-left: -1.3%;
	margin-right: -2.1%;
	position: relative;
}
.intro-block{
	background: var(--dark-accent);
	color: var(--base);
	margin-top: -2px;
	padding: 9rem 2rem 9rem;
	position: relative;
}
.scroll-down{
	bottom: 0;
	color: var(--base);
	font-size: 1rem;
	font-weight: bold;
	left: 50%;
	line-height: 1.2;
	margin-top: 1rem;
	position: absolute;
	transform: translateX(-50%);
	top: 100%;
	z-index: 5;
}
.intro-content{
	margin: 0 auto;
	max-width: 86rem;
	text-align: center;
}
.intro-content h1{
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 3.2rem;
	margin: 0 0 1.7rem;
}



@media only screen and (max-width : 1023px) {
	.intro-section{
		margin-top: -15rem;
	}
}

@media only screen and (max-width : 767px) {
	.intro-block{
		padding: 3rem 2rem 4rem;
	}
	.intro-content h1{
		font-size: 2.2rem;
		line-height: 2.8rem;
	}
}


/* -------------------------------------------
 * 5.3 - - Adventure Section
 * --- 
   Adventure Section elements
 * ---------------------------------------- */
 @media only screen and (max-width : 767px) {
	.adventures-section{
		padding: 3.5rem 0 5rem;
	}
}

/* 
 * 5.3.1 - - - Adventure Section Item
   ---------------------------------------- */
.adventure-item{
	margin-bottom: 6rem;
	padding: 4rem 0;
}
.adventure-item:last-child{
	margin: 0;
}
.adventure-row{
	background: var(--dark-accent);
	color: var(--base);
	display: flex;
	flex-wrap: wrap;
	min-height: 30.8rem;
	position: relative;
}
.adventure-item:nth-child(3) .adventure-row{
	background: var(--contrast);
	color: var(--base);
}
.adventure-img-col{
	position: relative;
	width: 38.5%;
}
.adventure-img img {
	height: 110%;
	height: calc(100% + 8rem);
	max-width: 38.8rem;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: -4rem;
	width: 90%;
}
.adventure-text-col{
	padding: 4.8rem 3rem;
	width: 48.7%;
}
.adventure-text{
	margin: 0 auto;
	max-width: 44.2rem;
}
.adventure-text h3{
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 3.2rem;
	margin: 0 0 2rem;
}
.adventure-text .button{
	margin-top: 1.2em;
}
.adventure-icon-col{
	position: relative;
	width: 12.8%;
}
.adventure-icon img{
	height: 100%;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

a.adventure-item-button {
	margin-top: 1.5rem;
}

@media only screen and (max-width : 767px) {
	.adventure-item{
		margin-bottom: 2rem;
		padding: 0;
	}
	.adventure-img-col{
		width: 100%;
	}
	.adventure-img img{
		height: 26rem;
		max-width: 100%;
		position: relative;
		top: auto;
		width: 100%;
	}
	.adventure-text-col{
		padding: 3rem 2rem;
		width: 100%;
		z-index: 2;
	}
	.adventure-text{
		max-width: 100%;
	}
	.adventure-text h3{
		font-size: 2.2rem;
		line-height: 2.8rem;
	}
	.adventure-icon-col{
		display: none;
	}
	.adventure-text .button{
		font-size: 1.6rem;
		margin-top: 0.8em;
	}
}


/* 
 * 5.3.2 - - - Adventure Item Modal
   ---------------------------------------- */
.hystmodal.cta-adventure-modal {
	background-color: rgba(22,36,26, 0.9);
}

.hystmodal.cta-adventure-modal .hystmodal__wrap {
	min-height: 100vh;
	padding: 15px;
}

.hystmodal.cta-adventure-modal .hystmodal__wrap .hystmodal__window {
	background-color: var(--contrast)!important;
	color: var(--base);
    max-width: 1160px;
	position: relative;
    width: 100%;
	z-index: 120;
}

@media (max-width: 768px) {
	.hystmodal.cta-adventure-modal .hystmodal__wrap {
		padding: 24px;
	}
}


/* Close Button */
.hystmodal.cta-adventure-modal .hystmodal__wrap .hystmodal__window .cta-adventure-modal-close {
	height: 32px;
	padding: 0;
	position: absolute;
	top: -16px;
	right: -16px;
	width: 32px;
	z-index: 200;
}
.hystmodal.cta-adventure-modal .hystmodal__wrap .hystmodal__window .cta-adventure-modal-close svg {
	-webkit-box-shadow: 0px 13px 20px -8px rgba(22,36,26,0.27);
	-moz-box-shadow: 0px 13px 20px -8px rgba(22,36,26,0.27);
	box-shadow: 0px 13px 20px -8px rgba(22,36,26,0.27);
	fill: var(--base);
	height: 32px;
	width: 32px;
}

/* Modal Content */
.hystmodal.cta-adventure-modal .cta-adventure-modal-wrap {
	display: flex;
	flex-direction: wrap;
	position: relative;
	z-index: 150;
}
.hystmodal.cta-adventure-modal .cta-adventure-modal-wrap .cta-adventure-modal-col {
	width: 50%;
}
.hystmodal.cta-adventure-modal .cta-adventure-modal-wrap .cta-adventure-modal-text {
	height: 100%;
	margin: auto 0;
	padding: 45px;
}
.hystmodal.cta-adventure-modal .cta-adventure-modal-wrap .cta-adventure-modal-image {
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 767px) {
	.hystmodal.cta-adventure-modal .cta-adventure-modal-wrap {
		flex-direction: column;
	}
	.hystmodal.cta-adventure-modal .cta-adventure-modal-wrap .cta-adventure-modal-col {
		width: 100%;
	}
	.hystmodal.cta-adventure-modal .cta-adventure-modal-wrap .cta-adventure-modal-text {
		padding: 45px 15px 30px;
	}
}

/* Hystmodal Background element */
.hystmodal__shadow--show {
	opacity: 0;
	z-index: 10;
}



/* -------------------------------------------
 * 5.4 - - Gallery Section
 * --- 
   Gallery Section elements
 * ---------------------------------------- */
 .gallery-section{
	box-shadow: 0px 8px 10px rgba(0,0,0,0.2);
	padding-bottom: 11.3rem;
	position: relative;
	z-index: 2;
}
.gallery-block{
	display: flex;

	gap: 16px;
}
.gallery-col{

	width: 100%;
}
.gallery-col a {
	display: block;
	flex-grow: 1;
	max-width: calc( 33.333% - 16px );
	overflow: hidden;
	width: calc( 33.333% - 16px );
}
.gallery-image{
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 100%;
}
.gallery-image:before{
	background: var(--dark-accent);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: all 0.2s linear;
	width: 100%;
	z-index: 1;
}
.gallery-image:hover:before{
	opacity: 0.5;
}
.gallery-image:after{
	background-image: url('https://castlewoodtreetopadventure.local/wp-content/uploads/2023/03/enlarge-icon.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	bottom: 1rem;
	content: "";
	display: block;
	height: 5rem;
	position: absolute;
	right: 1rem;
	width: 5rem;
	z-index: 3;
}
.gallery-image img {
	aspect-ratio: 1 / 1;
	display: block;
	height: 100%;
	max-width: calc( calc( var(--section-main-width) - 16px ) / 3 );
	object-fit: cover;
	overflow: hidden;
	transition: all 0.35s ease;
	width: 100%;
}
.gallery-image:hover img{
	transform: scale(1.04);
}
.gallery-view-wrap{
	padding-top: 1.2rem;
	text-align: center;
}
.gallery-view{
	cursor: pointer;
	text-decoration: underline;
	transition: all 0.2s linear;
}
.gallery-view:hover{
	color: var(--base);
}
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover{
	border-color: var(--dark-accent);
}



@media only screen and (max-width : 767px) {
	.gallery-section{
		padding-bottom: 5rem;
	}
	.gallery-block{
		align-items: center;
		flex-direction: column;
		margin-left: -0.3rem;
		margin-right: -0.3rem;
	}
	.gallery-col{
		padding: 0 0.3rem 0.6rem;
	}
	.gallery-image:after{
		bottom: 0.5rem;
		height: 2.6rem;
		right: 0.5rem;
		width: 2.6rem;
	}
}


/* -------------------------------------------
 * 5.5 - - Group Link Boxes
 * --- 
   Styles for the groups pages link boxes 
 * ---------------------------------------- */
.cta--groups-link-box--wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cta--groups-link-box--wrap a.cta--groups-link-box--link {
	display: inline-block;
}

.cta--groups-link-box--wrap .cta--groups-link-box--item {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	height: 288px;
	justify-content: flex-end;
	overflow: hidden;
	padding: 24px 16px;
	position: relative;
	transition: all .3s linear;
	width: 100%;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
}
.cta--groups-link-box--wrap .cta--groups-link-box--item:hover {
	transform: scale(1.02);
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-ms-transform: scale(1.02);
	-o-transform: scale(1.02);
	transition: all .4s linear;
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
}
.cta--groups-link-box--item::before {
	background: rgba(22,36,26,0.4);
	background: linear-gradient(180deg, rgba(22,36,26,0) 40%, rgba(22,36,26,1) 100%);
	content: "";
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all .4s;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	width: 100%;
	z-index: 2;
}

.cta--groups-link-box--wrap .cta--groups-link-box--item h3 {
	color: var(--base)!important;
	display: inline;
	font-weight: 600;
	margin-bottom: 0;
	position: relative;
	z-index: 5;
}

@media (min-width: 768px) {
	.cta--groups-link-box--wrap {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.cta--groups-link-box--wrap a.cta--groups-link-box--link {
		width: calc( 50% - 8px );
	}

	.cta--groups-link-box--wrap .cta--groups-link-box--item {
		flex-grow: 1;
		height: 362px;
		padding: 24px;
		width: 100%;
	}
}


/* -------------------------------------------
 * 5.6 - - Page Hero
 * --- 
   Styles for the groups pages link boxes 
 * ---------------------------------------- */
.cta--page-hero {
	z-index: 5;
}

.cta--page-hero .cta--page-hero--inner {
	z-index: 7;
}


/* -------------------------------------------
 * 5.7 - - Logo Testimonials
 * --- 
   Featured at the top of the Groups template
 * ---------------------------------------- */
section.logo-testimonial {
	margin-bottom: 0;
}

.logo-testimonial .cta-container {
	max-width: 1024px;
	padding-top: 75px;
	text-align: center;
}

.logo-testimonial .cta--logo-testimonial--logo-wrapper {
	margin-bottom: 45px;
}
.logo-testimonial .cta--logo-testimonial--logo-wrapper img {
	max-width: 350px;
}

.logo-testimonial .cta--logo-testimonial--testimonial-wrapper p {
	color: var(--dark-accent);
	font-size: 25px;
	font-weight: bold;
}

.logo-testimonial span.cta--logo-testimonial--testimonial-author {
	align-items: center;
	color: var(--dark-accent);
	display: flex;
	font-weight: bold;
	justify-content: center;
}
.logo-testimonial span.cta--logo-testimonial--testimonial-author:before {
	background-color: var(--dark-accent);
	content: "";
	height: 2px;
	margin-right: 10px;
	width: 20px;
}

@media (min-width: 768px) {
	.logo-testimonial .cta--logo-testimonial--testimonial-wrapper {
		padding: 0 65px;
		position: relative;
		z-index: 5;
	}
	.logo-testimonial .cta--logo-testimonial--testimonial-wrapper:before {
		color: var(--dark-accent);
		content: "\0022";
		font-family: "FakeEmpire", sans-serif;
		font-size: 180px;
		opacity: 0.2;
		position: absolute;
		top: -70px;
		left: -10px;
		z-index: 1;
	}
	.logo-testimonial .cta--logo-testimonial--testimonial-wrapper:after {
		color: var(--dark-accent);
		content: "\0022";
		font-family: "FakeEmpire", sans-serif;
		font-size: 180px;
		opacity: 0.2;
		position: absolute;
		top: -70px;
		right: -10px;
		z-index: 1;
	}
}


/* -------------------------------------------
 * 5.8 - - Group Downloads
 * --- 
   The downloadable documents element on the 
   groups template page.
 * ---------------------------------------- */

.group-downloads .cta--group-downloads--wrap {
	background-color: var(--dark-accent);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 16px;
	padding: 60px 20px;
}
.group-downloads .cta--group-downloads--wrap a.cta--group-downloads--item {
	align-items: center;
	background-color: var(--accent);
	color: var(--dark-accent);
	display: flex;
	flex-grow: 1;
	font-size: 20px;
	font-weight: bold;
	justify-content: flex-start;
	padding: 20px 15px;
	transition: all .2s;
	width: 100%;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
}
.group-downloads .cta--group-downloads--wrap a.cta--group-downloads--item:hover {
	background-color: var(--base);
	transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
}
.group-downloads .cta--group-downloads--wrap a.cta--group-downloads--item span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right: 7.5px;
}

@media (min-width: 768px) {
	.group-downloads .cta--group-downloads--wrap a.cta--group-downloads--item {
		max-width: calc( 50% - 8px );
		width: calc( 50% - 8px );
	}
}



/* 
 * =========================================== *
 * 6 - GP ELEMENTS & TEMPLATES
 * ---
   This is custom styling for elements within 
   the standard GB Element templates

   See documentation here: 
   https://docs.generatepress.com/collection/elements/
 * =========================================== *
*/
/* -------------------------------------------
 * 6.1 - - Hooks
 * --- 
   Styles GP Element Hook Blocks
 * ---------------------------------------- */

/* -------------------------------------------
 * 6.2 - - Page Hero
 * --- 
   Styles GP Element Page Hero Blocks
 * ---------------------------------------- */

/* -------------------------------------------
 * 6.3 - - Content Template
 * --- 
   Styles GP Element Content Blocks
 * ---------------------------------------- */

/* -------------------------------------------
 * 6.4 - - Loop Template
 * --- 
   Styles GP Element Loop Template Blocks
 * ---------------------------------------- */

/* -------------------------------------------
 * 6.5 - - Post Meta Template
 * --- 
   Styles GP Element Post Meta Blocks
 * ---------------------------------------- */

/* -------------------------------------------
 * 6.6 - - Post Navigation
 * --- 
   Styles GP Element Post Navigation Blocks
 * ---------------------------------------- */

/* -------------------------------------------
 * 6.7 - - Archive Navigation
 * --- 
   Styles GP Element Archive Navigation Blocks
 * ---------------------------------------- */

/* -------------------------------------------
 * 6.8 - - Right Sidebar
 * --- 
   Styles GP Element Right Sidebar Blocks
 * ---------------------------------------- */

/* -------------------------------------------
 * 6.9 - - Left Sidebar 
 * --- 
   Styles GP Element Right Sidebar Blocks
 * ---------------------------------------- */


/* 
 * =========================================== *
 * 7 - PAGE TEMPLATES
 * ---
 * The styles for specific page templates
 * =========================================== *
*/
/* -------------------------------------------
 * 7.1 - - 404 Page
 * ---------------------------------------- */


/* -------------------------------------------
 * 7.2 - - Groups Template
 * ---------------------------------------- */
.page-template-groups button.menu-toggle {
	color: var(--base);
}

.page-template-groups .intro-section {
	margin-top: 60px;
	margin-bottom: 60px;
}

@media (max-width: 768px) {
	.page-template-groups section.adventures-section {
		padding-bottom: 0;
	}
}

/* -------------------------------------------
 * 7.3 - - FAQ's Page
 * ---------------------------------------- */
 .page-faqs button.menu-toggle {
	color: var(--base);
}

/* -------------------------------------------
 * 7.4 - - Home Page Template
 * ---------------------------------------- */
.page-template-castlewood-treetop header.site-header .inside-header .site-logo {
	display: none;
}

.page-castlewood-treetop-adventure .embed-container {
	margin-top: var(--section-vertical-padding);
}


/* -------------------------------------------
 * 7.5 - - Contact Page
 * ---------------------------------------- */
.page-contact button.menu-toggle {
	color: var(--base);
}

.page-contact .intro-section {
	margin-top: 60px;
	margin-bottom: 60px;
}

.cta--contact--wrap {
	background-color: var(--dark-accent);
	color: var(--base);
	display: flex;
	flex-direction: column;
	flex-wrap: no-wrap;
	gap: 30px;
	padding: 60px 15px;
}

.cta--contact--wrap .cta--contact--details ul {
	list-style: none;
	margin: 0;
}

.cta--contact--wrap .cta--contact--details ul li {
	margin-bottom: 5px;
}
.cta--contact--wrap .cta--contact--details ul li:last-child {
	margin-bottom: 0;
}

.cta--contact--wrap .cta--contact--details--address {
	margin-top: 20px;
}

@media (min-width: 1024px) {
	.cta--contact--wrap {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.cta--contact--wrap > div {
		flex-grow: 1;
		width: calc( 50% - 15px );
	}
}

/* -------------------------------------------
 * 7.6 - - Terms and Conditions Page
 * ---------------------------------------- */
.page-terms-and-conditions button.menu-toggle {
	color: var(--base);
}


/* -------------------------------------------
 * 7.7 - - Gift Vouchers Template
 * ---------------------------------------- */
.page-gift-vouchers button.menu-toggle {
	color: var(--base);
}

.page-gift-vouchers .intro-section {
	margin-top: 60px;
	margin-bottom: 60px;
}



/* 
 * =========================================== *
 * 8 -  PLUGINS
 * =========================================== *
*/
/* -------------------------------------------
 * 8.1 - - Cookieyes - Cookie Consent
 * ---------------------------------------- */
#cookie-law-info-bar {
    background-color: var(--contrast);
    
}
#cookie-law-info-bar h5 {
    color: var(--base-3);
    font-size: 1.618rem!important;
    font-weight: bold;
}
#cookie-law-info-bar .cli-bar-message {
    color: var(--base-2);
    font-size: 1rem;
}
#cookie-law-info-bar .cli-bar-btn_container a {
    background-color: var(--contrast)!important;
    border: 2px solid var(--base-3);
    color: var(--base-3)!important;
    font-size: 1rem;
    margin-right: .5rem;
    padding: 0.75rem 1rem;
}
#cookie-law-info-bar .cli-bar-btn_container a#wt-cli-accept-all-btn {
    background-color: var(--accent)!important;
    border-color: var(--accent);
    font-weight: bold;
}


/*
 * =========================================== *
 * 9 - PAGE SPECIFIC STYLES
 * ---
 * Overrides styles on specific pages
 * =========================================== *
*/




/* 
 * =========================================== *
 * 10 - ANIMATIONS
 * =========================================== *
*/

/* --- do all the preload stuff --- */
@media (min-width: 768px) {
    .preload * {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
    .has-js .prep-animation,
    .has-js .prep-scroll-animation {
        visibility: hidden;
    }
    .has-js .do-animation,
    .has-js .do-scroll-animation {
        visibility: visible;
    }
}

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @media (min-width: 768px) {
     .fade-in-left {
                animation: fade-in-left 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                -webkit-animation: fade-in-left 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
     .fade-in {
                animation: fade-in 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                -webkit-animation: fade-in 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
     
     .fade-in-bottom {
                animation: fade-in-bottom 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                -webkit-animation: fade-in-bottom 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
     
     .fade-in-right {
                animation: fade-in-right 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                -webkit-animation: fade-in-right 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
 }

/* --- animation fade-in-left --- */
@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-75px);
                transform: translateX(-75px);
        opacity: 0;
    }
    100% {
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1;
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
}
}
@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-75px);
                transform: translateX(-75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}

/* --- animation fade-in --- */
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* --- animation fade-in-bottom --- */
@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(75px);
                transform: translateY(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(75px);
                transform: translateY(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}  

/* --- animation fade-in-right --- */
@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(75px);
                transform: translateX(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(75px);
                transform: translateX(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
  
  
/* --- delay classes --- */
.delay-100 {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
}
.delay-200 {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}
.delay-300 {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}
.delay-400 {
    -webkit-animation-delay: 400ms;
    animation-delay: 4000ms;
}
.delay-500 {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}
.delay-750 {
    -webkit-animation-delay: 750ms;
    animation-delay: 750ms;
}
.delay-1000 {
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}



/* 
 * =========================================== *
 * 12 - OTHER
 * =========================================== *
*/