/*
Theme Name: Cheeky Monkey Child Theme
Template: theme360
Version: 1.0
Author: Respond Agency Ltd
Author URI: https://werespond.uk
Description: A Theme360 child theme for Cheeky Monkey
*/

@import url('https://fonts.googleapis.com/css2?family=Delius&family=Readex+Pro:wght@160..700&family=Roboto+Slab:wght@500&display=swap');

:root {
/* Fonts */
  --fnt_font-family: "Readex Pro", sans-serif;
  --fnt_font-size: 17px;
  --fnt_line-height: 1.7em;
  --fnt_font-weight: 300;
  
  --cta_fnt_font-size: 1rem;
  --cta_fnt_line-height: 1.3rem;
  --cta_fnt_font-weight: 400;
  --cta_fnt_text-transform: none;
  
  --cta-txt_fnt_font-size: 0.9rem;
  --cta-txt_fnt_font-weight: 500;
  --cta-txt_fnt_text-transform: uppercase;

  --psh_fnt_font-size: 0.9rem;
  --psh_fnt_line-height: 1.2rem;
  --psh_fnt_font-weight: 600;
  
  --pre_fnt_font-size: 0.8rem;
  --pre_fnt_line-height: 1.2rem;
  --pre_fnt_font-weight: 400;
  --pre_fnt_letter-spacing: 0.25rem;
  
  --hed_fnt_font-weight: 400;
  --hed_fnt_letter-spacing: -0.1rem;
  
  --h1_fnt_font-size: 4rem;
  --h1_fnt_line-height: 4.6rem;
  
  --h2_fnt_font-size: 2.8rem;
  --h2_fnt_line-height: 3.4rem;

  --h3_fnt_font-size: 1.9rem;
  --h3_fnt_line-height: 2.5rem;

  --h4_fnt_font-size: 1.5rem;
  --h4_fnt_line-height: 2.1rem;

/* Colours */
  --clrshadow: 1px 4px 10px 1px rgba(1,56,25,0.1);
  --clrblack: #213B21;
  --clrblack_alt: #012919;
  --clrwhite: #fff;
  --clrwhite_alt: #FBF9F4;
  --clrgrey: #F8F4EE;
  --clrgrey_alt: #FBF9F4;
  /* Green */
  --clr1: #A2BF52;
  --clr1_alt: #87A82B;
  --clr1_txt: #fff;
  /* Dark Green */
  --clr2: #013819;
  --clr2_alt: #012919;
  --clr2_txt: #fff;
  /* Brown */
  --clr3: #987749;
  --clr3_alt: #8B632C;
  --clr3_txt: #fff;
  /* Peach */ 
  --clr4: #FAC075;
  --clr4_alt: #EFA74A;
  --clr4_txt: #fff;

/* Corners */
  --radius_sm: 15px;
  --radius_md: 40px;
  --radius_cta: 50px;
  
/* Padding */
  --cntntpad: 80px;
  --cntntpad_slm: 40px;
  --ctapad: 12px 20px;
}

/* Less than Medium */		
@media screen and (max-width: 64em) { 
	:root {
	/* Fonts */
	  --fnt_font-size: 19px;
	  --fnt_line-height: 1.7em;
  
	  --cta_fnt_font-size: 0.9rem;
	  --cta_fnt_line-height: 1.2rem;
  
	  --h1_fnt_font-size: 2.5rem;
	  --h1_fnt_line-height: 2.9rem;
  
	  --h2_fnt_font-size: 2.2rem;
	  --h2_fnt_line-height: 2.6rem;

	  --h3_fnt_font-size: 1.6rem;
	  --h3_fnt_line-height: 2rem;

	  --h4_fnt_font-size: 1.4rem;
	  --h4_fnt_line-height: 1.8rem;

  
	/* Padding */
	  --cntntpad: 60px;
	  --cntntpad_slm: 40px;
	  --ctapad: 10px 18px;
	}
}


/* -- Overrides -- */
form input, form textarea, form select {
	border: solid #FAC075 1px;
}
	/* Header */
	header {
		background: var(--clrgrey);
		transition: all 0.5s;
	}
	
	.floating-header header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: none;
		z-index: 9999;
	}
	
	.scrolled-200 header {
		background: var(--clrgrey);
	}
	
	.header-container .logo img {
		width: 250px;
		display: block;
		transition: all 0.5s;
	}
	
		.header-container .logo img {
			display: none;
		}
		
		.header-container .logo img.alt {
			display: block;
		}
	
		.floating-header .header-container .logo img {
			display: block;
		}
		
		.floating-header .header-container .logo img.alt {
			display: none;
		}
	
	.floating-header .header-container .nav .primary-menu li a {
		text-decoration: none;
		color: var(--clrwhite);
	}
	
	.scrolled-200 .header-container .nav .primary-menu li a {
		color: var(--clr2);
	}
	
		.floating-header .header-container .nav .primary-menu li a:hover, .scrolled-200 .header-container .nav .primary-menu li a:hover {
			color: var(--clr1);
		}
	
	.scrolled-200 .header-container .logo img {
		display: none;
	}
	
		.scrolled-200 .header-container .logo img.alt {
			display: block;
		}
		
	.header-container .nav .primary-menu > .menu-item-has-children > ul {
		border-radius: var(--radius_sm);
	}
	
	.header-container .nav .primary-menu > .menu-item-has-children > ul li a {
		color: var(--clr2);
	}
	
		.header-container .nav .primary-menu > .menu-item-has-children > ul li a:hover {
			color: var(--clr1);
		}

.mob-menu-item {
    font-size: 28px;
    color: var(--clr3);
}

.nav-mobile {
	position: fixed;
}
	
	/* Footer */
	footer#main ul, footer#main ul li {
		font-size: 0.9rem;
	}
	
	footer#legal, footer#legal a, footer#legal a:link, footer#legal a:active, footer#legal a:visited {
		font-size: 0.8rem;
	}
	
	/* Headings */
	h1, h2, h3, h4, h5, h6 {
		 font-family: "Delius", cursive;
	}
	
	span.pre-title, legend, span.post-meta {
		color: var(--clr1);
	}
	
	
	
	/* Override Primary CTA */
	a.cta {
		font-family: "Roboto Slab", serif;
	}
	
	a.cta.primary, a.cta.primary:link, a.cta.primary:active, a.cta.primary:visited {
		background: var(--clr1);
		border: solid 3px var(--clr1);
		color: var(--clr1_txt);
	}

		a.cta.primary:hover {
			background: var(--clr1_alt);
			border-color: var(--clr1_alt);
		}
		
	.clr1-bg a.cta.primary, .clr1-bg a.cta.primary:link, .clr1-bg a.cta.primary:visited, .clr1-bg a.cta.primary:active {
		background: var(--clr2);
		border-color: var(--clr2);
		color: var(--clr2_txt);
	}
	
		.clr1-bg a.cta.primary:hover {
			background: var(--clr2_alt);
			border-color: var(--clr2_alt);
			color: var(--clr2_txt);
		}
		
	/* Override Secondary CTA */
		
	a.cta.secondary, a.cta.secondary:link, a.cta.secondary:active, a.cta.secondary:visited {
		background: var(--clr3);
		border: solid 3px var(--clr3);
		color: var(--clr3_txt);
	}

		a.cta.secondary:hover {
			background: var(--clr3_alt);
			border-color: var(--clr3_alt);
		}
		
	.clr2-bg a.cta.secondary, .clr2-bg a.cta.secondary:link, .clr2-bg a.cta.secondary:visited, .clr2-bg a.cta.secondary:active {
		background: var(--clr4);
		border-color: var(--clr4);
		color: var(--clr4_txt);
	}
	
		.clr2-bg a.cta.secondary:hover {
			background: var(--clr4_alt);
			border-color: var(--clr4_alt);
			color: var(--clr4_txt);
		}
		
	/* Backgrounds */
	.clr2-bg span.pre-title, .clr2-bg legend, .clr2-bg span.post-meta {
		color: var(--clr1);
	}
	
	.clr2-bg h1, .clr2-bg h2, .clr2-bg h3, .clr2-bg h4, .clr2-bg h5, .clr2-bg h6 {
		color: var(--clr4);
	}
	
	.clr3-bg .pre-title, .clr3-bg .post-meta {
    	color: var(--clr4);
	}
		
	/* Banner */
	.banner.background-image {
		color: #fff;
		position: relative;
		background-color: var(--clr2_alt) !important;
	/*	aspect-ratio: 3/1.2; */
		padding: 225px 0;
	}
	
	.banner.background-image .bg {
		display: block;
		height: 100%;
		width: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		color: #fff;
		position: absolute;
		opacity: 0.8;
		top: 0;
		left: 0;
		z-index: 0;
	}
	
		.banner.background-image:before {
			content: "";
			display: block;
			height: 75%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
background: #013819;
background: -webkit-linear-gradient(0deg,rgba(1, 56, 25, 0) 0%, rgba(3, 20, 11, 0.89) 75%);
background: -moz-linear-gradient(0deg,rgba(1, 56, 25, 0) 0%, rgba(3, 20, 11, 0.89) 75%);
background: linear-gradient(0deg,rgba(1, 56, 25, 0) 0%, rgba(3, 20, 11, 0.89) 75%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#013819",
  endColorstr="#03140B",
  GradientType=0
);
		}
		
		.banner.background-image * {
			position: relative;
			z-index: 3;
		}
		
		/* .banner.background-image .small-container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		} */
		
	.banner p {
		font-size: 1.2rem;
		line-height: 2rem;
	}
	
	/* Icons */
	.content-container.feature .content > svg {
		color: var(--clr1);
	}
	
	/* Features */
	.grid-container.box-in .content-container {
		z-index: 8888;
		position: relative;
		background: var(--clrwhite);
	}
	
	/* Media */
	.media img {
		border-radius: var(--radius_md);
	}
	
	/* Testimonials */
	.testimonials .grid-container {
		align-items: start;
	}
	
	.content-container.testimonial {
		display: block;
		position: relative;
		padding: 0 0 0 50px;
	}
	
		.testimonial .stars {
			color: var(--clr4);
			font-size: 1.4rem;
		}
		
		.testimonial svg.fa-quote-left {
			position: absolute;
			left: 0;
			top: 25px;
			z-index: 0;
			height: 150px;
			color: var(--clrgrey);
		}
		
			.clr3-bg .testimonial svg.fa-quote-left {
				color: var(--clrgrey);
				opacity: 0.2;
			}
			
			.clr2-bg .testimonial svg.fa-quote-left {
				color: var(--clrgrey);
				opacity: 0.1;
			}
		
		.testimonial blockquote {
			font-family: "Delius", cursive;
			font-size: 1.2rem;
			line-height: 2.2rem;
		}
		
		.testimonial blockquote p {
			padding-top: 10px;
			margin: 0;
		}
		
		.content-container.testimonial .content .bio .name {
			margin: 20px 0 0;
			color: var(--clr1);
			font-size: 0.8rem;
		}
		
	/* Image */
	img.rounded-corners {
		border-radius: var(--radius_md);
	}
	
	/* Content Rows */
	.content-container h2, .content-container p {
		position: relative;
		z-index: 999;
	}
	
	/* Gallery */
	.gallery-images {
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.gallery-images .thumbnail {
		display: block;
		aspect-ratio: 1/1;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    position: relative;
    overflow: hidden;
    margin: 5px;
	}
	
.gallery-images .thumbnail::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    transition: inherit;
}
	
.gallery-images .thumbnail:hover::before {
    transform: scale(1.2);
}

.featured-gallery {
	overflow: hidden;
}

	.featured-gallery .gallery-over-container {
		margin-top: 30px;
	}

		.featured-gallery .gallery-over-container .gallery-images {
			width: 100vw;
		}	
		
			.featured-gallery .gallery-over-container .gallery-images a.thumbnail {
				border-radius: var(--radius_md);
				margin: 0 10px;
			}
	
/* More than Medium */		
@media screen and (min-width: 64em) {	
	/* Content Rows */
	.two-thirds {
		position: relative;
		overflow: hidden;
	}
	
		.two-thirds .content-padding {
			padding: var(--cntntpad) 0 !important;
		}
	
		.two-thirds .content-container .pure-u-1:first-of-type {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			padding: 0;
		}
		
	.half-large {
		position: relative;
	}
	
		.half-large .content-container .pure-u-1:first-of-type {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			padding: 0;
		}
		
		.half-large .content-container .pure-u-1.image-last {
			left: 50%;
		}
		
   .half-large .content-container .content-last {
        left: 50%;
        position: relative;
    }
}
			
			
/* Less than Medium */		
@media screen and (max-width: 64em) {	
	.banner.background-image {
		padding: 150px 0;
	}
	
    .content-first, .content-last {
        margin: 30px 0 30px;
    }
}

/* Less than Small */	
@media screen and (max-width: 48em) { 

}

img.gform_ajax_spinner {
	max-width: 30px;
}