/*
Theme Name: Electricle
Author: R52
Author URI: https://rootfiftytwo.co.uk/
Version: 1.0.0

http://autoprefixer.github.io/
Before putting site live, copy css into the above url for cross browser fallbacks.
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@700&family=IBM+Plex+Sans:wght@400;500;700&family=Poppins:wght@500;700&display=swap');

:root {
	/* Colors */
	--white: #fff;
	--orange: #EA7C23;
	--black: #151515;
	--offwhite: #F2EFE6;
	--grey: #F5F5F5;
	/* Font Families */
	--ff-ibm: 'IBM Plex Sans', sans-serif;
	--ff-ibmc: 'IBM Plex Sans Condensed', sans-serif;
	--ff-p: 'Poppins', sans-serif;
	/* Font Weights */
	--fw-r: 400;
	--fw-m: 500;
	--fw-b: 700;
}
* {
	position: relative;
}

/* Type */
body {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.1px;
	font-family: var(--ff-ibm);
	font-weight: var(--fw-r);
	color: var(--black);
}
h1, .h1 {
	font-size: 12px;
	line-height: 1.3;
	font-family: var(--ff-ibmc);
	font-weight: var(--fw-b);
	letter-spacing: 2px;
}
h2, .h2 {
	font-size: 28px;
	line-height: 1.35;
	font-family: var(--ff-p);
	font-weight: var(--fw-b);
	color: var(--orange);
	letter-spacing: 0.1px;
}
h3, .h3 {
	font-size: 16px;
	line-height: 1.8;
	font-weight: var(--fw-b);
	letter-spacing: 0.1px;
}
h4, .h4 {
	font-size: 22px;
	line-height: 1.37;
	font-family: var(--ff-p);
	font-weight: var(--fw-b);
	letter-spacing: 0.1px;
}
h5, .h5 {
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.1px;
	font-family: var(--ff-p);
	font-weight: var(--fw-m);
	letter-spacing: 0.1px;
}
h6, .h6 {
	font-size: 12px;
	line-height: 1.25;
	font-weight: var(--fw-m);
	letter-spacing: 0.1px;
}
@media screen and (min-width: 991px) {
	h1, .h1 { font-size: 18px; }
	h2, .h2 { font-size: 40px; }
	h3, .h3 { font-size: 20px; }
	/*h4, .h4 { font-size: 18px; }*/
	h5, .h5 { font-size: 18px; }
	/*h6, .h6 { font-size: 18px; }*/
}
p {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.1px;
}
a {
	color: var(--orange);
	text-decoration: underline;
	font-weight: var(--fw-b);
}
a:hover {
	color: var(--black);
}
a.button,
button,
html [type="button"],
[type="reset"],
[type="submit"] {
	font-weight: var(--fw-b);
	color: #fff;
	background-color: var(--orange);
	border: none;
	border-radius: 25px;
	padding: 12px 25px;
	transition-property: border-radius;
	transition-duration: 350ms;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	font-size: 12px;
}
a.button:hover,
button:hover,
html [type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover {
	border-radius: 0;
}
a.button-alt {
	background-color: var(--offwhite);
	color: var(--orange);
}
@media screen and (min-width: 768px) {
	a.button,
	button,
	html [type="button"],
	[type="reset"],
	[type="submit"] {
		font-size: 18px;
	}
}
.bg-white { background-color: #fff; }
.bg-orange { background-color: var(--orange); }
.bg-black { background-color: var(--black); }
.bg-offwhite { background-color: var(--offwhite); }
.bg-grey { background-color: var(--grey); }
.fc-white { color: #fff; }
.fc-orange { color: var(--orange); }
.fc-black { color: var(--black); }
.fc-offwhite { color: var(--offwhite); }
.fc-grey { color: var(--grey); }
.ff-ibm { font-family: 'IBM Plex Sans', sans-serif; }
.ff-ibmc { font-family: 'IBM Plex Sans Condensed', sans-serif; }
.ff-p { font-family: 'Poppins', sans-serif; }

.wrapper {
	background-color: #fff;
}
.list-unstyled {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-top: 20px;
	margin-bottom: 60px;
}
.list-unstyled a {
	color: var(--black);
	font-weight: var(--fw-r);
	text-decoration: none;
}
.list-unstyled a:hover {
	color: var(--orange);
}
.w-100 {
	width: 100%;
}
.h-auto {
	height: auto;
}
.overhide {
	overflow: hidden;
}
/* Header Menu */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	transition-property: background-color;
	transition-duration: 500ms;
}
.admin-bar #header {
	top: 32px;
}
.logo {
	padding: 20px;
}
.logo img {
	width: 105px;
}
@media screen and (min-width: 992px) {
	.logo img {
		width: 155px;
	}
}
#footer .social-links {
	position: absolute;
	top: 15px;
	right: 15px;
}
.social-links a {
	text-decoration: none;
	width: 38px;
	height: 38px;
	background-color: var(--offwhite);
	border-radius: 999px;
	font-size: 20px;

	transition-property: color, background-color;
	transition-duration: 350ms;
}
.social-links a:hover {
	background-color: var(--orange);
	color: #fff;
}

#main_menu,
#footer_menu {
	list-style: none;
}
@media screen and (min-width: 992px) {
	#main_menu li {
		margin-left: 15px;
	}
}
#main_menu a {
	font-weight: var(--fw-m);
	color: var(--black);
}
#menu a {
	text-decoration: none;
}
.page-template-home #main_menu a {
	color: #fff;
}
.bg-white #main_menu a {
	color: var(--black);
}
@media screen and (max-width: 991px) {
	#menu {
		position: fixed;
		right: 0;
		top: 0;
		margin: 0;
		background-color: var(--orange);
		height: 100%;
		transform: translateX(100%);
		transition-property: transform;
		transition-duration: 350ms;
		transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	#menu.mobile-menu-active {
		transform: translateX(0);
	}
	#main_menu a {
		color: #fff !important;
		font-size: 28px;
		font-weight: var(--fw-b);
		font-family: var(--ff-p);
	}
	.menu-toggle {
		width: 34px;
		height: 24px;
	}
	.menu-toggle span {
		position: absolute;
		width: 100%;
		height: 3px;
		border-radius: 3px;
	}
	.menu-toggle span:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
	}
	.menu-toggle span:nth-child(3) {
		bottom: 0;
	}
	#menu .button-alt {
		position: absolute;
		top: 25px;
		left: 20px;
	}
	#menu .menu-toggle {
		position: absolute;
		top: 38px;
		right: 30px;
	}
	#menu .menu-toggle span:nth-child(2) {
		opacity: 0;
	}
	#menu .menu-toggle span:nth-child(1) {
		top: 50%;
		transform: rotate(45deg) translateY(-50%);
	}
	#menu .menu-toggle span:nth-child(3) {
		top: 50%;
		transform: rotate(-45deg) translateY(-50%);
	}
}
#main_menu a::after,
#footer_menu a::after {
	content: "";
	background-color: var(--orange);
	width: 100%;
	height: 4px;
	border-radius: 4px;
	position: absolute;
	left: 0;
	bottom: -10px;
	transform: translateY(-10px);
	opacity: 0;
	transition-property: transform, opacity;
	transition-duration: 350ms;
}
#main_menu a:hover::after,
#main_menu li.active a::after,
#footer_menu a:hover::after,
#footer_menu li.active a::after {
	transform: translateY(0);
	opacity: 1;
}
@media screen and (max-width: 991px) {
	#main_menu li.button {
		display: none;
	}
}
#main_menu li.button a {
	font-weight: var(--fw-b);
	color: #fff;
	background-color: var(--orange);
	border-radius: 25px;
	padding: 12px 25px;
	transition-property: border-radius;
	transition-duration: 350ms;
}
#main_menu li.button a::after {
	display: none;
}
#main_menu li.button a:hover {
	border-radius: 0;
}
/* Footer Menu */
#footer_menu a {
	color: var(--black);
	text-decoration: none;
	font-weight: var(--fw-m);
	margin-right: 15px;
	margin-bottom: 20px;
	display: inline-block;
}
@media screen and (min-width: 992px) {
	#footer_menu a {
		margin-bottom: 0;
		display: inherit;
	}
}
#footer_menu .button { 
	display: none;
}
.extra-links a {
	text-decoration: none;
}
/* Hero */
.background-image {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#hero .background-image {
	background-image: url('assets/images/hero-mob.jpg');
	height: 300px;
}
#howitworks .background-image {
	background-image: url('assets/images/map.svg');	
	height: 300px;
}
@media screen and (min-width: 992px) {
	#hero .background-image {
		background-image: url('assets/images/hero.jpg');
		height: 100%;
		position: absolute;
	}
	#howitworks .background-image {
		background-image: url('assets/images/map.svg');	
		background-position: 35%;
		position: absolute;
		height: 100%;
	}
}

/* Map Section */
.icons .icon::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 45px;
	height: 45px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.icon-book::before {
	background-image: url('assets/icons/icon-book.svg');;
}
.icon-collect::before {
	background-image: url('assets/icons/icon-collect.svg');;
}
.icon-explore::before {
	background-image: url('assets/icons/icon-explore.svg');;
}
.icon-return::before {
	background-image: url('assets/icons/icon-return.svg');;
}

/* Bikes Section */
.bikes a {
	width: 50%;
	text-decoration: none;
}
.bikes a span {
	color: var(--black);
	opacity: .25;
	position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: 100%;
}
.bikes a.active span {
	color: var(--orange);
	opacity: 1;
}
.bikes a img {
	width: 100%;
	height: auto;
	opacity: .25;
	transition-property: opacity;
	transition-duration: 350ms;
	z-index: 2;
}
.bikes a.active img,
.bikes a:hover img {
	opacity: 1;
}
.bikes a::after {
	content: "";
	background-image: url('assets/logos/electricle_circles.svg');
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translateX(-50%) translateY(-50%) scale(0);
	transform-origin: center;
	z-index: 1;
	opacity: 0;
	transition-duration: 350ms;
	transition-property: transform, opacity;
	transition-timing-function: cubic-bezier(0.000, 0.595, 0.755, 1.590);
	width: 100px;
	height: 100px;
	background-size: 100px;
}
@media screen and (min-width: 992px) {
	.bikes a::after {
		width: 145px;
		height: 145px;
		background-size: 145px;
	}
}
.bikes a.active::after {
	opacity: 1;
	transform: translateX(-50%) translateY(-50%) scale(1);
}
[data-bike-images] {
	transform: scale(0.9);
	transform-origin: center;
	transition-property: transform;
	transition-duration: 350ms;
}
[data-bike-images].active {
	transform: scale(1);
}
[data-bike-images] * {
	height: 200px;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition-duration: 350ms;
	transition-property: opacity;
}
@media screen and (min-width: 400px) {
	[data-bike-images] * {
		height: 250px;
	}
}
@media screen and (min-width: 550px) {
	[data-bike-images] * {
		height: 350px;
	}
}
@media screen and (min-width: 768px) {
	[data-bike-images] * {
		height: 400px;
	}
}
@media screen and (min-width: 992px) {
	[data-bike-images] * {
		width: calc(50% - 12.5px);
		height: 172px;
		margin: 0 12.5px 25px;
	}
	[data-bike-images] .image-1 {
		width: 100%;
		height: 395px;
		margin: 0 0 25px;
	}
}
[data-bike-images="rhino"] .image-1 {
	background-image: url('assets/images/EU_RadRhino_1.jpg');
	opacity: 0;
}
[data-bike-images="rhino"] .image-2 {
	background-image: url('assets/images/EU_RadRhino_2.jpg');
}
[data-bike-images="rhino"] .image-3 {
	background-image: url('assets/images/EU_RadRhino_3.jpg');
}
[data-bike-images="rhino"] .image-4 {
	background-image: url('assets/images/EU_RadRhino_4.jpg');
}
[data-bike-images="rhino"] .image-5 {
	background-image: url('assets/images/EU_RadRhino_5.jpg');
}
[data-bike-images="runner"] .image-1 {
	background-image: url('assets/images/RadRunner_1.jpg');
}
[data-bike-images="runner"] .image-2 {
	background-image: url('assets/images/RadRunner_2.jpg');
}
[data-bike-images="runner"] .image-3 {
	background-image: url('assets/images/RadRunner_3.jpg');
}
[data-bike-images="runner"] .image-4 {
	background-image: url('assets/images/RadRunner_4.jpg');
}
[data-bike-images="runner"] .image-5 {
	background-image: url('assets/images/RadRunner_5.jpg');
}
[data-bike-images].active * {
	opacity: 1;
}
.bike-specs .features {
	min-width: 60%;
}
.bike-specs[data-bike-spec="rhino"] .rhino {
	display: block;
}
.bike-specs[data-bike-spec="rhino"] .runner {
	display: none;
}
.bike-specs[data-bike-spec="runner"] .rhino {
	display: none;
}
.bike-specs[data-bike-spec="runner"] .runner {
	display: block;
}

/* FAQs */
.faq {
	border-bottom: 1px solid #BCBCBC;
}
.faq a {
	text-decoration: none;
}
.faq-question::after {
	content: "";
	background-image: url('assets/icons/icon-arrow.svg');
	background-size: 18px 15px;
	background-repeat: no-repeat;
	background-position: center;
	width: 18px;
	height: 15px;
	position: absolute;
    right: 0;
    top: 6px;
    transition-property: transform;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.faq-question::after:hover {
	transform: rotate(10deg);
}
.faq-question.active::after {
	transform: rotate(180deg);
}
/* Form */
#form {
	/*padding-bottom: 250px;*/
}
#form a {
	text-decoration: none;
}
.hidden {
	visibility: hidden;
}
#form form > div {
	margin-bottom: 40px;
}
.wpcf7 p {
	position: relative;
}
.wpcf7 label {
	width: 100%;
	position: absolute;
	color: var(--orange);
	font-weight: var(--fw-b);
	z-index: 2;
	pointer-events: none;
	transform: translateY(35px);
	transition-property: transform;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}
.wpcf7 label.active {
	transform: translateY(0);
}
input:not([type="submit"]), textarea {
	background-color: #fff;
	border: none;
	border-bottom: 1px solid var(--black);
	color: var(--black);
	font-size: 16px;
	font-weight: var(--fw-r);
	width: 100%;
    padding: 12px 0px;
}
.bg-grey input:not([type="submit"]), .bg-grey  textarea {
	background-color: var(--grey);
}
input:focus, textarea:focus {
	outline: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: var(--black) !important;
}
::placeholder {
	color: rgba(21,21,21,.5);
}

/* Footer */
@media screen and (min-width: 992px) {
	footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: -1;
		width: 100%;
	}
}
.newsletter {
	padding: 25px 35px;
}
@media screen and (min-width: 992px) {
	.newsletter {
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
	}
}
.newsletter input {
	border: none;
	padding: 12px 24px;
	border-radius: 24px;
}
.newsletter button {
	position: absolute;
	right: 12px;
	background: transparent;
	bottom: 9px;
	padding: 0;
}
div#mce-success-response {
	padding-top: 18px;
	font-size: 15px;
	line-height: 1.5;
}

/* Blog */
#articles a {
	text-decoration: none;
}
#articles article {
	height: 281px;
	width: 100%;
	padding: 20px;
}
#articles article::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #151515;
	opacity: .45;
	transition-duration: 350ms;
	transition-property: opacity;
}
#articles a:hover article::before {
	opacity: .8;
}
#articles .background-image {
	background-size: 100%;
	transition-duration: 350ms;
	transition-property: background-size;
}
#articles a:hover .background-image {
	background-size: 125%;
}
#articles a:hover h2 {
	text-decoration: underline;
}
#breadcrumbs a {
	text-decoration: none;
	color: var(--black);
	font-weight: var(--fw-m);
}
#breadcrumbs a:hover {
	color: var(--orange);
}

/* 404 */
#fourohfour li.button {
	display: none;
}
#fourohfour #main_menu {
	margin-left: -15px !important;
}
#fourohfour a {
	text-decoration: none;
	color: var(--orange);
	font-weight: var(--fw-b);
}

/* Shop */
.page-template-shop {
	overflow-y: hidden;
}
.page-template-shop header#header {
	position: relative;
}
#site-shop iframe {
	height: 100vh;
	border: 0;
}

.faq-question a {
	font-weight: 900 !important;
	width: 100%;
	display: block;
	padding-right: 25px;
}
.faq-answer p {
	margin: 0 !important;
	padding-top: 30px;
	padding-bottom: 0px;
}