/*
Theme Name: Frank Intro
Theme URI: https://interplaycreative.com
Author: Interplay Design
Author URI: http://interplaycreative.com
Description: Simple, gutenberg-block-happy bespoke theme for professional, beautiful sites.
Version: 1.0.7
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mp-intro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Template:intro

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/*override base font size & increase it*/
body,
button,
input,
select,
optgroup,
textarea {
	font-size: 18px;
	font-size: 1.1rem;
}

@media (min-width: 1310px) {

	body,
	button,
	input,
	select,
	optgroup,
	textarea {
		font-size: 22px;
		font-size: 1.36rem;
	}
}

@media screen and (max-width: 990px) {
	#header-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	#header-wrapper .wp-block-group,
	#header-wrapper .intro-menu-mobile {
		margin: 0 !important
	}
}


a {
	color: var(--wp--custom--color--foreground);
}

a:hover {
	color: var(--wp--custom--color--foreground);
	opacity: 0.6;

}

.wp-block-button a:hover {
	opacity: 1;
}

.wp-block-button .wp-block-button__link {
	font-weight: var(--wp--custom--font--weight--normal);
}

.wp-site-blocks .alignfull,
.wp-site-blocks>.wp-block-group.has-background,
.wp-site-blocks>.wp-block-cover,
.wp-site-blocks>.wp-block-template-part>.wp-block-group.has-background,
.wp-site-blocks>.wp-block-template-part>.wp-block-cover,
body>.is-root-container>.wp-block-cover,
body>.is-root-container>.wp-block-template-part>.wp-block-group.has-background,
body>.is-root-container>.wp-block-template-part>.wp-block-cover,
.is-root-container .wp-block[data-align=full] {
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	width: unset;
}

#header-wrapper .wp-block-navigation .wp-block-navigation-item {
	border: 1px solid var(--wp--custom--color--foreground);
	padding: 0.5rem;
	width: 10rem;
	text-align: center;
}

#header-wrapper .wp-block-navigation .wp-block-navigation-item a:hover {
	opacity: 1;
}

.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:active,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:visited,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg {
	opacity: .9;
}

.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover {
	opacity: 1;
	transition: .5s opacity ease;
}

.wp-block-social-links.is-style-logos-only .wp-social-link svg {
	height: 1.75em;
	width: 1.75em;
}

/*create the yellow strikethrough if highlight colour is assigned in editor*/
h2 mark {
	position: relative;
	display: inline-flex;
	z-index: 1;
	overflow: hidden;
}

h2 mark .strikethrough {
	content: '';
	display: block;
	background: var(--wp--custom--color--secondary);
	width: 100%;
	height: .5em;
	position: absolute;
	top: .25em;
	z-index: -1;
	margin-left: -100%;
	/*transition: .4s margin-left ease-in;*/
}

[data-aos="yellow-strikethrough-heading-animate"] {
	transition-property: margin-left;
}

[data-aos="yellow-strikethrough-heading-animate"].aos-animate {
	margin-left: 0;
}

/*assign yellow strikethrough to main navigation*/
#header-wrapper .wp-block-navigation .wp-block-navigation-item a span {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	z-index: 1;
	overflow: hidden;
}

#header-wrapper .wp-block-navigation .wp-block-navigation-item a span:before {
	content: '';
	display: block;
	background: var(--wp--custom--color--secondary);
	width: 100%;
	height: .5em;
	position: absolute;
	top: .5em;
	z-index: -1;
	margin-left: -100%;
	transition: .4s margin-left ease-in;
}

/*Animation class*/
#header-wrapper .wp-block-navigation .wp-block-navigation-item a span.active:before {
	margin-left: 0%;
}

#header-wrapper .wp-block-navigation .wp-block-navigation-item a:hover span:before {
	margin-left: 0;
}

/*animation classes for bg floating images*/
@keyframes float-up-down {
	0% {
		transform: translate(0, 0) rotate(0);
	}

	50% {
		transform: translate(-7px, 7px) rotate(2deg);
	}

	100% {
		transform: translate(0, 0) rotate(0);
	}
}

.float-1 figure {
	animation: float-up-down 4s ease-in-out infinite;
	transform-origin: 20% 20%;
}

.float-2 figure {
	animation: float-up-down 5s ease-in-out infinite;
	transform-origin: 0% 0%;
}

.image-container [class*="bandaid"] figure img,
.image-container [class*="green-bg"] figure img {
	transition: .3s transform ease;
}

.image-container:hover [class*="bandaid-up-left"] figure img {
	transform: translate(-20px, -20px);
}

.image-container:hover [class*="bandaid-up-right"] figure img {
	transform: translate(20px, -20px);
}

.image-container:hover [class*="bandaid-down-left"] figure img {
	transform: translate(-20px, 20px);
}

.image-container:hover [class*="bandaid-down-right"] figure img {
	transform: translate(20px, 20px);
}

.image-container:hover [class*="green-bg"] figure img {
	transform: scale(1.05, 1.05);
}

/*set up the container so we can absoute position the children*/
.image-container {
	position: relative;
}

.wp-block-columns.alignwide {
	overflow: visible;
}

/*absolute position to overlap the bg images*/
.image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-image {
	z-index: 100;
	/*product always on toppy top*/
	position: relative;
	/*keep the height for page flow*/
}

.keep-height {
	position: relative;
	/*keep the height for page flow*/
}

/*some images don't look good squished to mobile so don't squish*/
.image-container.keep-large {
	overflow: hidden;
}

.image-container.keep-large .image {
	min-width: 700px;
}

/*DROP DOWN MENU*/
#provinceSelect {
	-js-display: flex;
	display: flex;
	justify-content: center;
}

.select-wrapper {
	align-items: center;
	background-color: transparent;
	background-image: transparent;
	border: 1px solid var(--wp--preset--color--foreground);
	border-radius: 0;
	cursor: pointer;
	display: grid;
	grid-template-areas: "select";
	line-height: 1.1;
	position: relative;
	text-align: center;
	padding-right: 20px;
}

select#province,
.select-wrapper:after {
	grid-area: select;
}

.select-wrapper:after {
	border: solid var(--wp--preset--color--foreground);
	border-width: 0 1px 1px 0;
	content: "";
	-js-display: flex;
	display: flex;
	display: inline-block;
	height: 2px;
	margin-left: auto;
	margin-right: 20px;
	padding: 3px 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 2px;
}

select#province {
	-webkit-appearance: inherit;
	color: var(--wp--custom--color--foreground);
	border-radius: 30px 0 0 30px;
	font-size: var(--wp--preset--font-size--normal);
}

select#province,
.select-wrapper:after {
	grid-area: select;
}

select#province {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	cursor: inherit;
	font-family: inherit;
	height: 44px;
	line-height: inherit;
	margin: 0;
	padding: 7.5px 50px 7.5px 50px;
	outline: none;
	text-align: center;
}

#province option {
	background: #4f447f;
}

#provinceSelect button {
	align-content: center;
	align-items: center;
	background: transparent;
	border-radius: 0;
	border: 1px solid var(--wp--preset--color--foreground);
	border-left: none;
	box-sizing: border-box;
	color: var(--wp--preset--color--foreground);
	-js-display: flex;
	display: flex;
	height: 46px;
	justify-content: center;
	line-height: 1.1;
	padding: 7.5px 15px;
	margin: 0;
}

/** Age Gate **/
body{
	--ag-input-radius: 0;
	--ag-button-radius: 0;
}
.age-gate-heading-title-logo, .age-gate__heading-title--logo{
	padding: 1em 2em 0em;
}
.simplebar-mask{
	border: 1px solid;
}

.age-gate-form, .age-gate__form{
	padding: 3vw;
}

.age-gate-label, .age-gate__label{
	display:none;
}
button.age-gate-button, button.age-gate-submit-no, button.age-gate-submit-yes, button.age-gate__button, button.age-gate__submit--no, button.age-gate__submit--yes{
	background: #fff;
	border: 1px solid #000;
	color: #000;
	font-weight: 500;
	padding-right: 4em;
	padding-left: 4em;;
}
button.age-gate-button:hover, 
button.age-gate-submit-no:hover, 
button.age-gate-submit-yes:hover, 
button.age-gate__button:hover, 
button.age-gate__submit--no:hover, 
button.age-gate__submit--yes:hover{
	border: 1px solid #000;
}

/** Age Gate order **/
.age-gate__heading{
	order: 0;
}

.age-gate__region{
	order: 20;
	margin: 15px 0 30px 0;
}

.age-gate__fields{
	order: 40;
}

.age-gate__challenge{
	font-weight: 700;
}
.age-gate__terms {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	justify-content: var(--ag-remember-align,center);
}
.age-gate__remember-wrapper,
.age-gate__terms{
	order: 30;
	margin: 0;
}
.age-gate__remember-field,
.age-gate__terms input{
	height: 30px;
	width: 36px;
}
.age-gate__remember-text,
.age-gate__terms-text{
	font-size: var(--ag-remember-size,.9rem);
	font-weight: var(--ag-remember-weight,normal);
	margin-left: var(--ag-remember-spacing,5px);
	text-align: left;
	margin-left: 1em;
}
.age-gate__terms-text a{
	text-decoration: underline;
}

.age-gate__subheadline{
	order: 20;
	margin-bottom: 0;
}
.age-gate__additional-information{
	order: 55;
	margin-bottom: 30px;
}
.age-gate__additional-information p{
	margin: 0 0 45px 0;
}
.age-gate__errors{
	order: 60;
}

.age-gate__submit{
	order: 70;
}