/**
 * Theme Name: HO Soccer 2023
 * Author: Ian Berthon
 * Version: 3.2
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *
 * This theme, like WordPress, is licensed under the GPL.
 *
 */

@import "css/normalize.css";

:root {
	--theme-grey: #707070;
	--theme-grey-light: #CCCCCC;
	--theme-grey-dark: #999999;
	/*--theme-grey: #666666;*/

	--theme-gold: #CC9933;
	--theme-gold-dark: #996633;
	--theme-gold-medium: #CC9966;

	--theme-red: #FF2829;
	--theme-red-dark: #8E1A22;
	--theme-red-medium: #C82A23;

	--theme1: var(--theme-red);

	--font-body: 'Open Sans', sans-serif;
	--font-body-italic: 'Open Sans Italic', sans-serif;

	/*--font-bank: "bank-gothic-bt", sans-serif;*/
	--font-bank: "Squarish Sans CT Regular", sans-serif;

	--font-cuts: 'Digital Serial';
	--font-cuts-span: 'Digital Serial Bold Italic';

	--font-latex: 'Digital Serial Bold';
	--font-latex-span: 'Digital Serial';

	--font-palms: 'Koblenz Serial Light';
	--font-palms-span: 'Koblenz Serial Medium';

	--font-tech: 'Benjamin Gothic Pro Regular';
	--font-tech-span: 'Benjamin Gothic Pro Bold Italic';

	--font-pro-club: 'Quagga';

	--font-tech-text: 'Open Sans', sans-serif;

	/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
	--step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
	--step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
	--step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
	--step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
	--step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
	--step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
	--step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
}

@keyframes colour-fade {
	from {
		background: rgba(255, 255, 255, 0);
		color: var(--theme1);
	}
	50% {
		background: rgba(255, 0, 0, 0.5);
		color: white;
	}
	to {
		background: rgba(255, 255, 255, 0);
		color: var(--theme1);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
.fadeIn {
	animation-name: fadeIn
}

@keyframes fadeOut {
	from {
		opacity: 1
	}
	to {
		opacity: 0
	}
}
.fadeOut {
	animation-name: fadeOut
}

@keyframes never-beaten {
	from {
		color: white;
	}
	50% {
		color: var(--theme1);
	}
	to {
		color: white;
	}
}

/**
 * fonts
 *
 */

@font-face{
	font-display: swap;
	font-family: "Anaconda Pro Italic";
	src: url("Fonts/ancona-pro-italic-webfont.woff") format("woff"), url("Fonts/ancona-pro-italic-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Anaconda Pro Demi Italic";
	src: url("Fonts/ancona-pro-demiitalic-webfont.woff") format("woff"), url("Fonts/ancona-pro-demiitalic-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Benjamin Gothic Pro Regular";
	src: url("Fonts/benjamin-gothic-pro-regular-webfont.woff") format("woff"), url("Fonts/benjamin-gothic-pro-regular-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Benjamin Gothic Pro Italic";
	src: url("Fonts/benjamin-gothic-pro-italic-webfont.woff") format("woff"), url("Fonts/benjamin-gothic-pro-italic-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Benjamin Gothic Pro Bold";
	src: url("Fonts/benjamin-gothic-pro-bold-webfont.woff") format("woff"), url("Fonts/benjamin-gothic-pro-bold-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Benjamin Gothic Pro Bold Italic";
	src: url("Fonts/benjamin-gothic-pro-bolditalic-webfont.woff") format("woff"), url("Fonts/benjamin-gothic-pro-bolditalic-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Digital Serial";
	src: url("Fonts/digital-serial-regular-webfont.woff") format("woff"), url("Fonts/digital-serial-regular-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Digital Serial Bold";
	src: url("Fonts/digital-serial-bold-webfont.woff") format("woff"), url("Fonts/digital-serial-bold-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Digital Serial Bold Italic";
	src: url("Fonts/digital-serial-bolditalic-webfont.woff") format("woff"), url("Fonts/digital-serial-bolditalic-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Koblenz Serial Light";
	src: url("Fonts/koblenz-serial-light-webfont.woff") format("woff"), url("Fonts/koblenz-serial-light-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Koblenz Serial Light Italic";
	src: url("Fonts/koblenz-serial-lightitalic-webfont.woff") format("woff"), url("Fonts/koblenz-serial-lightitalic-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Koblenz Serial Medium";
	src: url("Fonts/koblenz-serial-medium-webfont.woff") format("woff"), url("Fonts/koblenz-serial-medium-webfont.ttf") format("truetype");
}

@font-face{
	font-display: swap;
	font-family: "Koblenz Serial Medium Italic";
	src: url("Fonts/koblenz-serial-mediumitalic-webfont.woff") format("woff"), url("Fonts/koblenz-serial-mediumitalic-webfont.ttf") format("truetype");
}

@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	src: url('Fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
	font-display: swap;
	font-family: 'Open Sans Italic';
	src: url('Fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
	font-display: swap;
	font-family: 'Quagga';
	src: url('Fonts/quagga-pro-regular-webfont.woff') format('woff'), url('Fonts/quagga-pro-regular-webfont.ttf') format('truetype');
}

@font-face {
	font-display: swap;
	font-family: 'Squarish Sans CT Regular';
	src: url('Fonts/Squarish Sans CT Regular.ttf') format('truetype');
}

html {
	font-size: 100%; /*16px*/
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.652rem + 1.739vw, 1rem);
	font-weight: 400;
	line-height: 1.75;
}

address {
	font-style: italic;
	margin: 0 0 2em;
}

b, strong, .strong {
	font-weight: bold;
}

blockquote {
	font-family: var(--font-bank);
	font-size: 32px;
	font-style: normal;
	font-weight: 200;
	margin: 1vh 1vw 1vh 2vw;
	padding-left: 1vw;
	border-left: 3px solid var(--theme-red);
}
.boxed-quote {
	background: #ffe6e6;
	border: 1px solid red;
	border-radius: 4px;
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 300;
	margin: 0.5rem auto;
	padding: 0.25rem;
	text-align: center;
	width: 96%;
	& cite,
	& small {
		font-weight: normal;
		text-transform: uppercase;
	}
}

code,
kbd,
pre,
samp,
.debug
{
	background: #DDFC96;
	color: #666;
	font-family: monospace, serif;
	flex: 0 0 auto;
	margin: 0;
	overflow: auto;
	padding: 0.25rem;
	white-space: pre-wrap;
	word-wrap: break-word;
	width: 100%;
}

del {
	color: #ccc;
	display: block;
	font-size: 0.8rem;
}

em {
	font-style: italic;
}

figcaption {
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--theme-grey);
	font-family: var(--font-bank);
	font-weight: 200;
	line-height: 1.15;
	/*margin: 2.75rem 0 1.05rem;*/
}

h1 {
	font-size: 6vh;
	text-transform: uppercase;
}

h2 {
	font-size: 5vh;
	text-transform: uppercase;
}

h3 {
	font-size: 4vh;
}

h4 {
	font-size: 3vh;
	text-align: center;
}

h5 {
	font-size: 2vh;
	text-transform: uppercase;
}

h6 {
	font-size: 1vh;
	text-transform: uppercase;
}

hr {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 153, 102, 0.75), rgba(0, 0, 0, 0));
	border: 0;
	height: 2px;
	margin: 1rem 0;
}

ins {
	border: none;
	color: white;
	text-decoration: none;
}

p {
	line-height: 1.65;
	margin: 0 0 1.15rem;
}

small, .text_small {
	font-size: 0.889em;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5rem;
}
sub {
	bottom: -0.25rem;
}


.flow {
	--flow-space: 1em;
}

.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
}

/* Step 1: Common Properties  These styles are required to make icons render reliably */
.icon::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.screen-reader-text {
	display: none;
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/**
 * Alignment
 *
 */

 .aligncenter {
	display: block;
	margin: 0 auto;
	text-align: center;
}

.alignnone {
	display: inline;
}
img.alignnone {
	margin: 0;
}

.alignleft {
	display: block;
	width: 100%;
	@media screen and (min-width: 640px) {
		flex: 0 0 auto;
		margin-right: 1rem;
		width: auto;
	}
	img {
		display: block;
		width: 100%;
	}
}
img.alignleft {
	margin-right: 2rem;
	margin-bottom: 1rem;
}

.alignright {
	display: block;
	width: 100%;
	@media screen and (min-width: 640px) {
		float: right;
		margin-left: 1em;
		width: auto;
	}
	img {
		display: block;
		width: 100%;
	}
}
img.alignright {
	margin-left: 0.5em;
	margin-bottom: 0.5em;
}

.inblock {
	display: inline-block;
}

.centred {
	text-align: center;
}

.clear-both {
	clear: both;
}
.clear-left {
	clear: left;
}
.clear-right {
	clear: right;
}

.margin-narrow {
	margin: 0 0.5rem;
}

.margin-wide {
	margin: 0 1rem;
}

/**
 * Images
 *
 */

img {
	border: none;
	height: auto;
	margin: 0;
	max-width: 100%;
	padding: 0;
}

.attachment-full {
	margin: 0 0 1rem;
}

.size-medium {
	width: 40%;
}

.size-45 {
	width: 45%;
}

.size-full {
	width: 100%;
}

.pdf-link {
	display: inline-block;
	img {
		display: block;
		margin: 0 auto;
		width: 200px;
	}
}


#mc4wp-form-1 {
	padding: 0;
	width: 100%;
	@media screen and (min-width: 1024px) {
		margin: auto;
		width: 80%;
	}

	h2 {
		color: var(--theme-red);
		font-size: 40px;
		margin: 0;
		text-align: center;
		@media screen and (min-width: 1400px) {
				font-size: 54px;
		}
	}

	p {
		color: var(--theme-grey);
		font-family: var(--font-bank);
		font-size: 24px;
		font-weight: 200;
		text-transform: uppercase;
	}

	.btn-primary {
		background: var(--theme-red-medium);
		border-color: var(--theme-red-medium);
		font-family: var(--font-bank);
		font-size: 24px;
		font-weight: 200;
		text-transform: uppercase;
		&:hover {
			background: var(--theme-red-dark);
			border-color: var(--theme-red-dark);
		}
	}

	.mc4wp-response {
		text-align: center;
	}
	.mc4wp-error {
		background: red;
		padding: 0.5rem;
	}
}

#site-footer {
	background: #000;
	color: #fff;
	display: flex;
	flex-flow: row wrap;
	margin: 0 auto 1rem;
	padding: 1rem;
	width: 100%;
	.widget {
		flex: 0 0 auto;
		margin: 0 0 1rem;
		padding: 0 1rem;
		width: 100%;
		@media screen and (min-width: 768px) {
			width: 50%;
		}
		@media screen and (min-width: 1024px) {
			width: 25%;
		}
		h2 {
			color: white;
			font-size: 36px;
			text-align: center;
			@media screen and (min-width: 768px) {
				text-align: left;
			}
		}
	}
	.copyright {
		flex: 0 0 100%;
		font-size: 0.675rem;
		margin: 0;
		padding: 0.5rem 0;
		text-align: center;
	}
	.get-social {
		@media screen and (min-width: 768px) {
			ul {
				justify-content: flex-start;
				li {
					background-size: 50px;
					flex: 0 0 auto;
					height: 60px;
					width: 60px;
					a {
						i {
							font-size: 40px;
							line-height: 60px;
						}
					}
				}
			}
		}
	}
	.menu {
		list-style: none;
		margin: 0;
		padding: 0;
		li {
			font-size: 0.833rem;
			margin: 0.5rem 0;
			padding: 0.25rem 0;
			text-align: center;
			text-align: left;
			@media screen and (min-width: 768px) {
				text-align: left;
			}
			a {
				color: #a0a0a0;
				text-decoration: none;
				&:hover {
					color: #5c5c5c;
					text-decoration: underline;
				}
			}
			&:before {
				content: "\00bb";
				padding-right: 0.5rem;
			}
		}
	}
}

#site-header {
	align-items: center;
	background: #000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
			"header-center header-center"
			"header-left header-right";
	padding: 0.5rem;
	.site-header-left {
			grid-area: header-left;
			justify-self: start;
	}
	.site-header-centre {
			grid-area: header-center;
			justify-self: center;
			.site-logo {
					height: 100px;
					width: auto;
			}
	}
	.site-header-right {
			grid-area: header-right;
			justify-self: end;
	}
	.site-account {
			height: 60px;
	}
	.site-cart {
			height: 60px;
	}
	.site-search {
			height: 60px;
	}
	@media (min-width: 640px) {
			grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);
			grid-template-columns: 1fr 2fr 1fr;
			grid-template-areas: "header-left header-center header-right";
	}
}

.widget-area {
	display: flex;
	flex-flow: row nowrap;
	div {
		flex: 0 0 auto;
	}
	.input-search {
		width: 8rem;
		@media screen and (min-width: 1024px) {
			width: auto;
		}
	}
}

#mega-menu-wrap-main {
	font-family: var(--font-bank);
	font-weight: 200;
}

article {
	/*margin: 0 0.25vw;*/
	h2 {
		font-family: var(--font-bank);
		font-size: 40px;
		font-weight: 200;
	}
	@media screen and (min-width: 800px) {
		h2 {
			font-size: 54px;
		}
	}
}

.keeper-grid {
	display: grid;
	gap: 1vw;
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
	width: 100%;
	@media screen and (min-width: 640px) {
		grid-template-columns: repeat(3, 1fr);
	}
	@media screen and (min-width: 1024px) {
		grid-template-columns: repeat(4, 1fr);
	}
	@media screen and (min-width: 1280px) {
		grid-template-columns: repeat(5, 1fr);
		padding: 0 1vw;
	}
	.keeper-link {
		/*border: 1px solid #5c5c5c;*/
		position: relative;
		color: #5c5c5c;
		color: var(--theme1);
		display: flex;
		flex-flow: column nowrap;
		margin: 0;
		overflow: hidden;
		padding: 0;
		text-decoration: none;
		width: 100%;
		.image {
			border-radius: 0;
			flex: 0 0 auto;
			transition: all .4s ease-out;
			width: 100%;
		}
		.name {
			flex: 0 0 auto;
			width: 100%;
			h6 {
				color: var(--theme-grey);
				font-size: 1.25rem;
				margin: 0;
				padding: 0;
			}
			.club {
				font-family: var(--font-pro-club);
				font-size: 1.25rem;
			}
		}
		&:hover {
			h6 {
				color: var(--theme1);
			}
			span {
				color: var(--theme-grey);
			}
		}
	}
}

.content-keeper {
	margin: 1rem auto;
	max-width: calc(50 * var(--step-0));
	.keeper-biography {
		h2 {
			color: var(--theme-red-medium);
			font-size: var(--step-3);
		}
		p {
			font-size: var(--step-0);
			line-height: 1.5;
			margin: 1.25vh 0;
		}
		.wp-video {
			margin: 0 auto;
		}
	}
	.keeper-details {
		flex: 1 1 auto;
		margin-left: 1rem;
		h1 {
			margin: 0;
		}
		h3 {
			color: var(--theme-red);
			margin: 0;
		}
	}
	.keeper-gallery {
		display: grid;
		gap: 4px;
		grid-template-columns: repeat(2, 1fr);
		list-style: none;
		margin: 1rem 0;
		padding: 0;
		@media screen and (min-width: 640px) {
				grid-template-columns: repeat(3, 1fr);
		}
		@media screen and (min-width: 1024px) {
				grid-template-columns: repeat(4, 1fr);
		}
		@media screen and (min-width: 1280px) {
				grid-template-columns: repeat(5, 1fr);
		}
	}
	.keeper-header {
		align-items: center;
		display: flex;
		flex-flow: row nowrap;
		margin: 0 0 2vh;
	}
	.keeper-thumbnail {
		flex: 0 0 auto;
	}
}

#ho-cart-summary {
	align-items: center;
	background-image: url(images/basket_white.webp);
	background-repeat: none;
	background-size: cover;
	display: flex;
	flex-flow: column nowrap;
	font-size: 20px;
	font-weight: bold;
	height: 60px;
	justify-content: center;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 60px;
	span {
		aspect-ratio: 1;
		background: rgba(255, 0, 0, 0.75);
		border-radius: 50%;
		color: #fff;
		line-height: 1;
		padding: 0.25rem;
	}
}

#ho-my-account {
	background-image: url(images/user_white.webp);
	background-repeat: none;
	background-size: cover;
	color: var(--theme-red);
	display: flex;
	flex-flow: column nowrap;
	font-size: 20px;
	font-weight: bold;
	height: 60px;
	line-height: 60px;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 60px;
}

#ho-search {
	background-image: url(images/search_white.webp);
	background-repeat: none;
	background-size: cover;
	color: var(--theme-red);
	display: flex;
	flex-flow: column nowrap;
	font-size: 20px;
	font-weight: bold;
	height: 60px;
	line-height: 60px;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 60px;
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--theme-red-medium);
	--bs-btn-border-color: var(--theme-red-medium);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--theme-red-dark);
	--bs-btn-hover-border-color: var(--theme-red-dark);
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--theme-red-light);
	--bs-btn-active-border-color: var(--theme-red-light);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--theme-red-medium);
	--bs-btn-disabled-border-color: var(--theme-red-dark);
}

.btn-black-gold {
	--bs-btn-color: #DD9F34;
	--bs-btn-bg: #000;
	--bs-btn-border-color: #000;
	--bs-btn-hover-color: #E5B360;
	--bs-btn-hover-bg: #000;
	--bs-btn-hover-border-color: #E5B360;
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #E5B360;
	--bs-btn-active-bg: #000;
	--bs-btn-active-border-color: #000;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #BE8420;
	--bs-btn-disabled-bg: #4E4E4E;
	--bs-btn-disabled-border-color: #4E4E4E;
}

.btn-gold {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--theme-gold-medium);
	--bs-btn-border-color: var(--theme-gold-medium);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--theme-gold-dark);
	--bs-btn-hover-border-color: var(--theme-gold-dark);
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--theme-gold-light);
	--bs-btn-active-border-color: var(--theme-gold-light);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--theme-gold-medium);
	--bs-btn-disabled-border-color: var(--theme-gold-dark);
}

.btn-lime-black {
	--bs-btn-color: #000;
	--bs-btn-bg: #B0E229;
	--bs-btn-border-color: #B0E229;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #D8F197;
	--bs-btn-hover-border-color: #B0E229;
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #E5B360;
	--bs-btn-active-bg: #000;
	--bs-btn-active-border-color: #000;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #BE8420;
	--bs-btn-disabled-bg: #4E4E4E;
	--bs-btn-disabled-border-color: #4E4E4E;
}

.btn-white-black {
	--bs-btn-color: #000;
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #FFF;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #D8F197;
	--bs-btn-hover-border-color: #D8F197;
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #E5B360;
	--bs-btn-active-bg: #000;
	--bs-btn-active-border-color: #000;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #BE8420;
	--bs-btn-disabled-bg: #4E4E4E;
	--bs-btn-disabled-border-color: #4E4E4E;
}

.main_banner {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: auto;
	position: relative;
	width: 100%;
	img {
		display: block;
		width: 100%;
		min-width: 100px;
		max-width: 1920px; /*actual image width*/
		height: auto; /* maintain aspect ratio*/
		margin: auto; /*optional centering of image*/
		z-index: 100;
	}
	.slide {
		position: relative;
		width: 100%;
		div {
			position: absolute;
		}
		#button_html {
			align-items: center;
			color: #fff;
			display: flex;
			flex-flow: column nowrap;
			font-size: 24px;
			right: 5%;
			top: 30%;
			@media screen and (min-width: 1400px) {
				font-size: 48px;
			}
			a {
				font-family: var(--font-bank);
				font-size: 16px;
				font-weight: 500;
				text-transform: uppercase;
				@media screen and (min-width: 768px) {
					font-size: 20px;
				}
				@media screen and (min-width: 1024px) {
					font-size: 24px;
				}
				@media screen and (min-width: 1280px) {
					font-size: 32px;
				}
				@media screen and (min-width: 1400px) {
					font-size: 40px;
				}
				@media screen and (min-width: 1600px) {
					font-size: 48px;
				}
			}
			h3 {
				color: #fff;
				font-family: var(--font-bank);
				font-size: 20px;
				font-weight: 500;
				letter-spacing: 2px;
				text-align: center;
				text-shadow: 2px 2px 4px #000;
				text-transform: uppercase;
					@media screen and (min-width: 768px) {
					font-size: 40px;
					letter-spacing: 4px;
				}
				@media screen and (min-width: 1024px) {
					font-size: 52px;
					letter-spacing: 6px;
				}
				@media screen and (min-width: 1280px) {
					font-size: 64px;
					letter-spacing: 6px;
				}
				@media screen and (min-width: 1400px) {
					font-size: 72px;
					letter-spacing: 8px;
				}
				@media screen and (min-width: 1600px) {
					font-size: 92px;
					letter-spacing: 12px;
				}
			}
		}
		.winter-sale {
			align-items: center;
			display: flex;
			flex-flow: column nowrap;
			right: 5%;
			top: 0%;
			@media screen and (min-width: 768px) {
				top: 10%;
			}
			a {
				font-family: var(--font-bank);
				font-size: 16px;
				font-weight: 200;
				text-transform: uppercase;
				@media screen and (min-width: 768px) {
					font-size: 20px;
				}
				@media screen and (min-width: 1024px) {
					font-size: 24px;
				}
				@media screen and (min-width: 1280px) {
					font-size: 32px;
				}
				@media screen and (min-width: 1400px) {
					font-size: 40px;
				}
				@media screen and (min-width: 1600px) {
					font-size: 48px;
				}
			}
			h3 {
				color: #fff;
				font-size: 40px;
				text-align: center;
				-webkit-text-stroke-width: 1px;
				-webkit-text-stroke-color: #000;
				@media screen and (min-width: 768px) {
					font-size: 80px;
					-webkit-text-stroke-width: 2px;
				}
				@media screen and (min-width: 1024px) {
					font-size: 110px;
				}
				@media screen and (min-width: 1280px) {
					font-size: 140px;
				}
				@media screen and (min-width: 1600px) {
					font-size: 180px;
				}
			}
		}
	}
}

.hide {
	display: none;
}

.home-icons {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	justify-content: center;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 98vw;
	li {
		font-family: var(--font-bank);
		font-size: 24px;
		font-weight: 200;
		img {
			display: block;
			max-width: 200px;
			margin: 0 auto;
			width: 100%;
		}
	}
}

.product-carousel {
	background: var(--theme-grey-light);
	padding: 1vh 0;
	h2 {
		color: #000;
		font-family: var(--font-bank);
		font-size: 24px;
		font-weight: 200;
		text-align: center;
		@media screen and (min-width: 768px) {
			font-size: 36px;
		}
		@media screen and (min-width: 1024px) {
			font-size: 54px;
		}
	}
}

.product-grid {
	display: grid;
	gap: 0.5vw;
	/*grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));*/
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	width: 100%;
	@media screen and (min-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media screen and (min-width: 1024px) {
		grid-template-columns: repeat(4, 1fr);
	}
}
.grid-product {
	border-bottom: 2px solid transparent;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	padding: 0;
	text-align: left;
	text-decoration: none;
	height: 100%;
	&:hover {
		border-bottom: 2px solid var(--theme-grey);
	}
	img {
		display: block;
		flex: 0 1 auto;
		width: 100%;
	}
	.details {
		align-items: end;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		h3 {
			flex: 0 0 auto;
			font-size: 1.5rem;
			margin: 0;
			padding: 0.5rem 0;
			width: 60%;
		}
		.price-wrapper {
			color: var(--theme-grey);
			flex: 0 0 auto;
			font-size: 1.1rem;
			text-align: center;
			.woocommerce-Price-amount {
				color: var(--theme-grey-dark);
				display: block;
				font-size: 1.5rem;
			}
		}
	}
}

.flex-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 100%;
	@media screen and (min-width: 1280px) {
		flex-wrap: nowrap;
	}
}
.flex-row-section {
	@extend .flex-row;
	border-top: 1px solid #5f5f5f;
	border-bottom: 1px solid #5f5f5f;
	margin: 1em 0;
	padding: 1em 0;
}
.flex-item {
	flex: 1 1 auto;
	width: 100%;
	@media screen and (min-width: 768px) {
			width: 50%;
	}
}
.flex-item-fixed {
	flex: 0 0 auto;
}

.effect-zoom {
	overflow: hidden;
	img{
		transition: all .2s ease-out;
		&:hover {
			transform: scale(1.1);
		}
	}
}
.overflow-hidden {
	overflow: hidden;
}

.grid-box {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	width: 100%;
}
@media screen and (min-width: 640px) {
	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-5 {
		grid-template-columns: repeat(5, 1fr);
	}
}
.big-gap {
	margin: 1rem 0 2rem;
}

.search-keeper {
	.keeper-name {
		color: var(--theme-grey);
		font-family: var(--font-bank);
		font-size: 5vh;
		font-weight: 200;
		text-transform: uppercase;
	}
	.details {
		display: flex;
		flex-flow: row wrap;
		.thumbnail {
			flex: 0 0 auto;
			img {
				display: block;
			}
		}
		.description {
			flex: 1 1 auto;
			margin-left: 2vh;
		}
		@media screen and (min-width: 768px) {
				flex-flow: row nowrap;
		}
	}
}

.search-product {
	.product-name {
		color: var(--theme-grey);
		font-family: var(--font-bank);
		font-size: 5vh;
		font-weight: 200;
		text-transform: uppercase;
	}
	.details {
		display: flex;
		flex-flow: row wrap;
		.thumbnail {
			flex: 0 0 auto;
			img {
				display: block;
			}
			.product-price {
				text-align: center;
				.woocommerce-Price-amount {
					display: block;
					font-size: 5vh;
				}
			}
		}
		.description {
			flex: 1 1 auto;
			margin-left: 2vh;
		}
		@media screen and (min-width: 768px) {
			flex-flow: row nowrap;
		}
	}
}

.get-social {
	display: initial;
	flex: 1 1 auto;
	order: 3;
	margin: 0;
	padding: 0;
	@media screen and (min-width: 1280px) {
		order: 3;
	}
	h2 {
		color: var(--theme1);
		font-size: 1.375rem;
		margin: 0 0 1rem;
		text-align: center;
	}
	ul {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	li {
		background-image: url("images/circle.png");
		background-position: 50%50%;
		background-repeat: no-repeat;
		background-size: 40px;
		flex: 0 0 auto;
		width: 50px;
		height: 50px;
		a {
			color: black;
			display: block;
			margin: 0;
			padding: 0;
			position: relative;
			text-align: center;
			i {
				font-size: 30px;
				line-height: 50px;
				transition: all 1.2s ease;
				z-index: 100;
				&:hover {
					-webkit-transform: rotate(360deg);
					-ms-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
		}
		#facebook i:hover {
			color: #3c5a96;
		}
		#instagram i:hover {
			color: #bc2a8d;
		}
		#twitter i:hover {
			color: #1daeeb;
		}
		#youtube i:hover {
			color: #e52524;
		}
		@media screen and (min-width: 1024px) {
			background-size: 50px;
			width: 70px;
			height: 70px;
			margin: 0;
			a i {
				font-size: 40px;
				line-height: 70px;
			}
		}
	}
}
.front-page .get-social {
	display: none;
	@media screen and (min-width: 768px) {
		display: initial;
	}
}

.mega-menu-item img {
	display: block;
	width: 100%;
}

.required::after {
	color: #f00;
	content: '*';
	padding-left: 0.25rem;
}

.contact-us {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	header {
		flex: 0 0 50%;
		img {
			display: block;
			width: 100%;
		}
	}
	section {
		flex: 0 0 50%;
		padding: 0 1rem;
	}
	@media screen and (min-width: 768px) {

	}
}

h1.tech-archive {
	background-size: cover;
	color: #444;
	font-size: 50px;
	line-height: 100px;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	@media screen and (min-width: 640px) {
		font-size: 100px;
		line-height: 200px;
	}
}
h1.cuts-archive {
	background-image: url("images/background5.jpg");
}
h1.palms-archive {
	background-image: url("images/background1.jpg");
}
h1.technology-archive {
	background-image: url("images/background7.jpg");
}

.tech-section {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	article {
		font-family: var(--font-tech-text);
		margin: 0 0 2rem;
		padding: 0 1rem;
		width: 100%;
		figure {
			grid-area: figure;
			margin: 0;
			img {
				display: block;
			}
		}
		footer{
			grid-area: footer;
			display: none;
		}
		header {
			border-bottom: 1px solid #aaa;
			display: flex;
			flex-flow: row wrap;
			grid-area: header;
			justify-content: center;
			margin-bottom: 0.5rem;
			@media screen and (min-width: 640px) {
				flex-flow: row nowrap;
				justify-content: space-between;
			}
			h2 {
				flex: 0 0 auto;
				padding-bottom: 0.2rem;
				width: auto;
			}
			.gloves-link {
				align-self: end;
				flex: 0 0 auto;
				font-size: 0.8rem;
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		main {
			grid-area: main;
		}
	}
}
.cuts-section article {
	@media screen and (min-width: 640px) {
		display: grid;
		grid-template-columns: 1fr 3fr;
		grid-template-areas:
			"header header"
			"main figure"
			"footer footer";
	}
	@media screen and (min-width: 1280px) {
		grid-template-areas:
			"header header"
			"main figure"
			"footer footer";
	}
	header {
		padding: 0 0.5rem;
		h2 {
			font-family: var(--font-cuts);
			font-size: 4vh;
			span {
				color: var(--theme-gold);
				font-family: var(--font-cuts-span);
			}
		}
	}
	h6 {
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
	}
	main {
		margin: 0;
		padding: 0.5rem 0;
		p {
			margin: 1rem 0 0;
			&:first-of-type {
					margin: 0;
			}
		}
		@media screen and (min-width: 1280px) {
			font-size: 0.9rem;
			padding: 0.5rem 1rem;
		}
	}
}
.palms-section article {
	@media screen and (min-width: 640px) {
		display: grid;
		grid-template-columns: 1fr 3fr;
		grid-template-areas:
			"header header"
			"ratings figure"
			"main main"
			"footer footer";
	}
	@media screen and (min-width: 1280px) {
		grid-template-areas:
			"header header"
			"ratings figure"
			"main figure"
			"footer footer";
	}
	header {
		padding: 0 0.5rem;
		h2 {
			font-family: var(--font-palms);
			font-size: 4vh;
			span {
				font-family: var(--font-palms-span);
			}
		}
	}
	h6 {
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
	}
	main {
		font-family: var(--font-tech-text);
		margin: 0;
		padding: 0.5rem 0;
		p {
			margin: 1rem 0 0;
			&:first-of-type {
					margin: 0;
			}
		}
		@media screen and (min-width: 1280px) {
			font-size: 0.8rem;
			padding: 0.5rem 1rem;
		}
	}
	.ratings {
		grid-area: ratings;
		padding: 1rem;
		.rating {
			border: 1px solid #aaa;
			height: 16px;
			margin-bottom: 0.5rem;
			width: 100%;
			.value {
				background: red;
				color: #aaa;
				height: 14px;
				width: 0;
			}
		}
	}
}
.technology-section {
	@media screen and (min-width: 640px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	@media screen and (min-width: 1024px) {
		grid-template-columns: repeat(3, 1fr);
	}
	article {
		h2 {
			font-family: var(--font-tech);
			font-size: 3vh;
			span {
				font-family: var(--font-tech-span);
			}
		}
	}
}

.tech-list {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	li {
		font-family: var(--font-tech-text);
		margin: 0 0 2rem;
		padding: 0 1rem;
		width: 100%;
		figure {
			grid-area: figure;
			margin: 0;
			img {
				display: block;
			}
		}
		footer{
			grid-area: footer;
			display: none;
		}
		header {
			border-bottom: 1px solid #aaa;
			display: flex;
			flex-flow: row wrap;
			grid-area: header;
			justify-content: center;
			margin-bottom: 0.5rem;
			@media screen and (min-width: 640px) {
				flex-flow: row nowrap;
				justify-content: space-between;
			}
			h2 {
				flex: 0 0 auto;
				padding-bottom: 0.2rem;
				width: auto;
			}
			.gloves-link {
				align-self: end;
				flex: 0 0 auto;
				font-size: 0.8rem;
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		main {
			grid-area: main;
		}
	}
}

.cuts-list li {
	@media screen and (min-width: 640px) {
		display: grid;
		grid-template-columns: 1fr 3fr;
		grid-template-areas:
			"header header"
			"main figure"
			"footer footer";
	}
	@media screen and (min-width: 1280px) {
		grid-template-areas:
			"header header"
			"main figure"
			"footer footer";
	}
	header {
		padding: 0 0.5rem;
		h2 {
			font-family: var(--fonts-cuts);
			span {
				font-family: var(--fonts-cuts-span);
			}
		}
	}
	h6 {
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
	}
	main {
		margin: 0;
		padding: 0.5rem 0;
		p {
			margin: 1rem 0 0;
			&:first-of-type {
				margin: 0;
			}
		}
		@media screen and (min-width: 1280px) {
			font-size: 0.9rem;
			padding: 0.5rem 1rem;
		}
	}
}

.palms-list li {
	display: block;
	@media screen and (min-width: 640px) {
		display: grid;
		grid-template-columns: 1fr 3fr;
		grid-template-areas:
			"header header"
			"ratings figure"
			"main main"
			"footer footer";
	}
	@media screen and (min-width: 1280px) {
		grid-template-areas:
			"header header"
			"ratings figure"
			"main figure"
			"footer footer";
	}
	header {
		padding: 0 0.5rem;
		h2 {
			font-family: var(--font-palms);
			span {
				font-family: var(--font-palms-span);
			}
		}
	}
	h6 {
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
	}
	main {
		font-family: var(--font-tech-text);
		margin: 0;
		padding: 0.5rem 0;
		p {
			margin: 1rem 0 0;
			&:first-of-type {
				margin: 0;
			}
		}
		@media screen and (min-width: 1280px) {
			font-size: 0.8rem;
			padding: 0.5rem 1rem;
		}
	}
	.ratings {
		grid-area: ratings;
		padding: 1rem;
		.rating {
			border: 1px solid #aaa;
			height: 16px;
			margin-bottom: 0.5rem;
			width: 100%;
			.value {
				background: red;
				color: #aaa;
				height: 14px;
				width: 0;
			}
		}
	}
}

.technology-list {
	@media screen and (min-width: 640px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	@media screen and (min-width: 1024px) {
		grid-template-columns: repeat(3, 1fr);
	}
	li {
		h2 {
			font-family: var(--font-tech);
			span {
				font-family: var(--font-tech-span);
			}
		}
	}
}

.never-beaten {
	animation-duration: 6s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-name: never-beaten;
	color: white;
	font-family: var(--font-bank);
	font-size: 3rem;
	font-weight: 500;
	padding: 0;
	text-align: center;
	width: 100%;
	@media screen and (min-width: 640px) {
		font-size: 5rem;
	}
}

.picture-block {
	display: flex;
	flex-flow: row wrap;
	@media screen and (min-width: 1024px) {
		flex-flow: row nowrap;
	}
	.block-image {
		align-self: flex-start;
		flex: 0 0 auto;
		width: 100%;
		@media screen and (min-width: 1024px) {
			width: 30%;
		}
	}
	.block-content {
		flex: 1 1 auto;
		padding: 0 1vh;
	}
}