/* Widths */

.entry-content,
header,
footer {
	margin: 0;
	padding: 0;

	> * {
		margin: 0;
		padding: calc(var(--bl) * 4) var(--col-gap);

		&:not(.wrapper-width--full) > * {
/*			max-width: var(--wrap-width--standard);*/
			width: 100%;
			@media(min-width: 1500px) {
				max-width: calc(100% - 264px);
			}
		}

		@media(min-width: 992px) {
			padding: calc(var(--bl) * 6) calc(var(--col-gap)*1.5);
		}

		@media(min-width: 1200px) {
			padding: calc(var(--bl) * 6) calc(var(--col-gap)*2);
		}
	}
}

a.wp-block-group {
	text-decoration: none;
}

.wp-block-group {
	position: relative;

	>* {
		position: relative;
		z-index: 1;
	}

	/* Background Colours */

	&:not(.has-background) + &:not(.has-background),
	&.has-contrast-background-color + &.has-contrast-background-color,
	&.has-base-background-color + &.has-base-background-color,
	&.has-accent-background-color + &.has-accent-background-color,
	&.has-body-background-color + &.has-body-background-color,
	&.has-mid-grey-background-color + &.has-mid-grey-background-color,
	&.has-light-grey-background-color + &.has-light-grey-background-color,
	&.has-accent-2-background-color + &.has-accent-2-background-color,
	&.has-accent-3-background-color + &.has-accent-3-background-color,
	&.has-accent-4-background-color + &.has-accent-4-background-color { 
		padding-top: 0; 
	}

	/* Background Overlay */

	&.background-overlay--dark,
	&.background-overlay--light,
	&.background-overlay--colour,
	&.background-overlay--gradient {
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: var(--wp--preset--color--contrast);
			opacity: 0.75;
			z-index: 0;
		}
	}

	&.background-overlay--gradient::after { opacity: 1;background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); }
	&.background-overlay--light::after { background-color: var(--wp--preset--color--base); }
	&.background-overlay--colour::after { background-color: var(--wp--preset--color--accent); }

	/* Widths */

	@media(min-width: 1500px) {
		&.wrapper-width--large > * { 
/*			max-width: var(--wrap-width--large); */
			max-width: calc(100% - 132px);
		}
		&.wrapper-width--small > * { 
/*			max-width: var(--wrap-width--small); */
			max-width: calc(100% - 384px);
		}
		&.wrapper-width--tiny > * { 
/*			max-width: var(--wrap-width--tiny); */
			max-width: calc(100% - 516px);
		}
	}

	&.auto-width { display: inline-flex; }

	/* Mobile Content Alignment */

	@media(max-width: 781px) {
		&.mobile-content-alignment--left {
			text-align: left;
			justify-content: flex-start;
			p,h1,h2,h3,h4,h5,h6,img,.wp-block-group,.wp-block-buttons,.wp-block-social-links,nav,a {
				text-align: left;
				justify-content: flex-start;
			}

			.wp-block-navigation { align-self: left; text-align: left; }
			.wp-block-navigation.is-vertical { align-items: flex-start; }
			.wp-block-image img { margin-right: auto; }
		}

		&.mobile-content-alignment--center {
			text-align: center;
			justify-content: center;
			p,h1,h2,h3,h4,h5,h6,img,.wp-block-group,.wp-block-buttons,.wp-block-social-links,nav,a {
				text-align: center;
				justify-content: center;
			}

			.wp-block-navigation { align-self: center; text-align: center; }
			.wp-block-navigation.is-vertical { align-items: center; }
			.wp-block-image img { margin-left: auto; margin-right: auto; }
		}

		&.mobile-content-alignment--right {
			text-align: right;
			justify-content: flex-end;
			p,h1,h2,h3,h4,h5,h6,img,.wp-block-group,.wp-block-buttons,.wp-block-social-links,nav,a {
				text-align: right;
				justify-content: flex-end;
			}

			.wp-block-navigation { align-self: right; text-align: right; }
			.wp-block-navigation.is-vertical { align-items: flex-end; }
			.wp-block-image img { margin-left: auto; }
		}
	}

	/* Background Shapes */

	&.background-shape--yellow,
	&.background-shape--yellow-bottom,
	&.background-shape--purple-bottom,
	&.background-shape--purple-side,
	&.background-shape--orange,
	&.background-shape--orange-side,
	&.background-shape--green-bottom,
	&.background-shape--peach-bottom,
	&.background-shape--spackle-right,
	&.background-shape--spackle-left,
	&.background-shape--parallax {
		&::after {
			position: absolute;
			font-size: 0;
		}
	}

	&.background-shape--yellow-bottom,
	&.background-shape--green-bottom,
	&.background-shape--peach-bottom,
	&.background-shape--purple-bottom,
	&.background-shape--orange,
	&.background-shape--spackle-right,
	&.background-shape--spackle-left,
	&.background-shape--parallax {
		overflow: hidden;
	}

	&.background-shape--yellow::after,
	&.background-shape--orange-side::after { 
		content: url('../../../assets/icons/group-shape-yellow.svg'); 
		top: 50%; 
		left: -80px; 
		transform: translateY(-50%); 
		z-index: 9;
		@media(max-width: 781px) {
			top: 25%;
		}
	}
	&.background-shape--yellow-bottom::after,
	&.background-shape--green-bottom::after,
	&.background-shape--peach-bottom::after,
	&.background-shape--purple-bottom::after { 
		content: url('../../../assets/icons/group-shape-purple.svg'); 
		left: 60%; 
		transform: translateX(-50%); 
		bottom: 0;
		@media (max-width: 781px) {
			bottom: -100px;
		}
	}
	&.background-shape--yellow-bottom::after { content: url('../../../assets/icons/group-shape-yellow-bottom.svg'); }
	&.background-shape--green-bottom::after { content: url('../../../assets/icons/group-shape-green-bottom.svg'); }
	&.background-shape--peach-bottom::after { content: url('../../../assets/icons/group-shape-peach-bottom.svg'); }

	&.background-shape--orange-side::after { content: url('../../../assets/icons/group-shape-orange-side.svg'); }
	
	&.background-shape--purple-side::after { 
		content: url('../../../assets/icons/group-shape-purple-side.svg'); 
		right: 2%; 
		bottom: -2%;
		/*@media (max-width: 768px) {
			bottom: -100px;
		}*/
	}
	&.background-shape--orange::after { 
		content: url('../../../assets/icons/group-shape-orange.svg'); 
		bottom: -1px;
		right: 0;
		z-index: 9;
		@media (max-width: 781px) {
			bottom: -70px;
		}
	}
	&.background-shape--spackle-right::after { 
		content: url('../../../assets/icons/group-shape-spackle.svg'); 
		bottom: 0;
		right: 0;
		@media (max-width: 991px) {
	        bottom: -50px;
	        right: -100px;
		}
	}
	&.background-shape--spackle-left::after {
		content: url('../../../assets/icons/group-shape-spackle-left.svg'); 
		bottom: -100px;
		left: 0px;
		@media (max-width: 1799px) {
			left: -75px;
			bottom: -200px;
		}
	}
	&.background-shape--parallax > * {
		max-width: 800px;
	}
	&.background-shape--parallax::before,
	&.background-shape--parallax::after { 
		content: '';
		background-image: url('../../../assets/icons/group-shape-parallax.svg');
		background-size: 1178px;
		background-position: center var(--after-top);
		background-repeat: no-repeat;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%; 
		transition: all .6s .01s;
		@media(min-width: 992px) {
			background-size: auto;
		}
	}
	&.background-shape--parallax::before {
		position: absolute;
		font-size: 0;
		background-image: url('../../../assets/icons/group-shape-parallax1.svg');
		transition: all .4s;
	}

	/* Border Radius */

	&[style*="border-radius"] {
		overflow: hidden;
	}
}

/* Padding - Mobile */

@media (max-width: 781px) {
	.wp-block-group {
		.wp-block-group,
		.wp-block-column {
			&[style*="padding-top:var(--wp--preset--spacing--40)"],
			&[style*="padding-top:var(--wp--preset--spacing--50)"],
			&[style*="padding-top:var(--wp--preset--spacing--60)"],
			&[style*="padding-top:var(--wp--preset--spacing--80)"] { 
				padding-top: calc(var(--bl) * 2)!important; 
			}
			
			&[style*="padding-top:var(--wp--preset--spacing--100)"],
			&[style*="padding-top:var(--wp--preset--spacing--120)"],
			&[style*="padding-top:var(--wp--preset--spacing--150)"] { 
				padding-top: calc(var(--bl) * 3)!important; 
			}

			&[style*="padding-bottom:var(--wp--preset--spacing--40)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--50)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--60)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--80)"] { 
				padding-bottom: calc(var(--bl) * 2)!important; 
			}
			
			&[style*="padding-bottom:var(--wp--preset--spacing--100)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--120)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--150)"] { 
				padding-bottom: calc(var(--bl) * 3)!important; 
			}

			&[style*="padding-right:var(--wp--preset--spacing--40)"],
			&[style*="padding-right:var(--wp--preset--spacing--50)"],
			&[style*="padding-right:var(--wp--preset--spacing--60)"],
			&[style*="padding-right:var(--wp--preset--spacing--80)"] { 
				padding-right: calc(var(--bl) * 2)!important; 
			}
			
			&[style*="padding-right:var(--wp--preset--spacing--100)"],
			&[style*="padding-right:var(--wp--preset--spacing--120)"],
			&[style*="padding-right:var(--wp--preset--spacing--150)"] { 
				padding-right: calc(var(--bl) * 3)!important; 
			}

			&[style*="padding-left:var(--wp--preset--spacing--40)"],
			&[style*="padding-left:var(--wp--preset--spacing--50)"],
			&[style*="padding-left:var(--wp--preset--spacing--60)"],
			&[style*="padding-left:var(--wp--preset--spacing--80)"] { 
				padding-left: calc(var(--bl) * 2)!important; 
			}
			
			&[style*="padding-left:var(--wp--preset--spacing--100)"],
			&[style*="padding-left:var(--wp--preset--spacing--120)"],
			&[style*="padding-left:var(--wp--preset--spacing--150)"] { 
				padding-left: calc(var(--bl) * 3)!important; 
			}
		}
	}
}

/* Hover Shape */

.wp-block-group.hover-shape--yellow,
.wp-block-group.hover-shape--green,
.wp-block-group.hover-shape--purple,
.wp-block-group.hover-shape--orange {
	position: relative;
	
	>* {
		z-index: 2;
	}

	&::before {
		content: '';
		position: absolute;
		top: -100%;
		right: 0;
		z-index: 1;
		width: 70%;
		height: 40%;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		transition: all .5s;
	}

	&:hover::before {
		top: 0;
	}
}

.wp-block-group.hover-shape--yellow::before { background-image: url('../../../assets/icons/hover-shape-yellow.svg'); }
.wp-block-group.hover-shape--green::before { left: 0; background-image: url('../../../assets/icons/hover-shape-green.svg'); }
.wp-block-group.hover-shape--purple::before { background-image: url('../../../assets/icons/hover-shape-purple.svg'); }
.wp-block-group.hover-shape--orange::before { background-image: url('../../../assets/icons/hover-shape-orange.svg'); }

.wp-block-group.hover-shape--green:hover::before { top: 15%; }
.wp-block-group.hover-shape--purple:hover::before { top: 15%; }

/* Show Animations */

header > .wp-block-group:not(.no-animation),
.entry-content > .wp-block-group:not(.no-animation),
footer > .wp-block-group:not(.no-animation) {
	.wp-block-group,
	.wp-block-column,
	p,
	h1,h2,h3,h4,h5,h6,
	img,
	.wp-block-safe-svg-svg-icon,
	li,
	a,
	button,
	form,
	cite,
	.wp-block-details,
	.wp-block-slider,
	&.background-shape--yellow::after,
	&.background-shape--purple-bottom::after,
	&.background-shape--purple-side::after,
	&.background-shape--orange::after,
	&.background-shape--orange-side::after,
	&.background-shape--spackle::after {
		opacity: 0;
	}

	&.show {
		.wp-block-group,
		.wp-block-column,
		p,
		h1,h2,h3,h4,h5,h6,
		img,
		.wp-block-safe-svg-svg-icon,
		li,
		a,
		button,
		form,
		cite,
		.wp-block-details,
		.wp-block-slider,
		&.background-shape--yellow::after,
		&.background-shape--purple-bottom::after,
		&.background-shape--purple-side::after,
		&.background-shape--orange::after,
		&.background-shape--orange-side::after,
		&.background-shape--spackle::after,
		&.background-shape--spackle-left::after,
		&.background-shape--spackle-right::after,
		&.background-shape--spackle-parallax::after {
			animation-name: slideDownShow;
	  		animation-duration: .5s;
	  		animation-iteration-count: 1;
	  		animation-direction: normal;
  			animation-fill-mode: forwards;
	  		animation-timing-function: ease;
	  		animation-delay: 0s;
	  	}

	  	&.background-shape--yellow::after,
		&.background-shape--purple-bottom::after,
		&.background-shape--purple-side::after,
		&.background-shape--orange::after,
		&.background-shape--orange-side::after,
		&.background-shape--spackle-left::after,
		&.background-shape--spackle-right::after,
		&.background-shape--spackle-parallax::after {
			animation-name: appear;
			animation-delay: .3s;
		}

		.wp-block-group,.wp-block-column,.wp-block-details > *:not(summary) { animation-delay: 0s; }
		img,.pre-title,.wp-block-safe-svg-svg-icon { animation-delay: .15s; }
		h1,h2 { animation-delay: .3s; }
		h3,h4,h5,h6 { animation-delay: .45s; }
	  	p,li,a,button,form,cite,.wp-block-details,.wp-block-slider { animation-delay: .6s; }

	  	/* Customs */
		.wp-block-hero-banner__logos img { animation-delay: .75s; }
		.sticky-header .wp-block-site-logo, .sticky-header img, .sticky-header li { animation-delay: .9s; }
	}
}

@keyframes appear {
	0% {
		opacity: 0;
	}
  	100% {
  		opacity: 1;
  	}
}

@keyframes slideDownShow {
	0% {
		opacity: 0;
		transform: translateY(-2rem);
	}
  	100% {
  		opacity: 1;
  		transform: translateY(0);
  	}
}