/*!
Theme Name: Manzarek
Theme URI: https://en.wikipedia.org/wiki/Ray_Manzarek/
Author: Luuk Arends
Author URI: https://luukarends.nl/
Description: Manzarek is born to be lightspeed fast, powerful and flexible. A custom theme that only brings the best WordPress has to offer.
Version: 1.3.0
Tested up to: 8.0
Requires PHP: 5.6
License: GNU General Public License v2 or later
Text Domain: manzarek
*/

/* Fonts */

@font-face {
	font-family: "Jakarta 200";
	src: url(fonts/PlusJakartaSans-Light.woff2);
	font-display: swap;
	font-weight: 200;
}

@font-face {
	font-family: "Jakarta 400";
	src: url(fonts/PlusJakartaSans-Medium.woff2);
	font-display: swap;
	font-weight: 400;
}
  
@font-face {
	font-family: "Jakarta 600";
	src: url(fonts/PlusJakartaSans-Bold.woff2);
	font-display: swap;
	font-weight: 600;
}

.jakarta-200 {
	font-family: "Jakarta 200";
}

/* Core */

body {
	color: #000;
	font-family: "Jakarta 400";
	overflow-x: hidden;
}

main {
	display: flex;
	flex-wrap: nowrap;
	height: 100vh;
	height: -webkit-fill-available;
	max-height: 100vh;
	overflow-x: auto;
	overflow-y: hidden;
}

/* Layout */

.vhmin-100 {
	min-height: 100vh;
}

/* Icons */

.bi {
	position: relative;
	top: -1px;
}

/* Headings */

h1, h2, h3, h4, h5 {
	font-family: "Jakarta 600";
}

/* Paragraphs */

p {
	line-height: 1.65;
}

/* Backgrounds */

.bg-purple {
	background-color: #5d2c86;
}

.bg-blue {
	background-color: #4092ce;
}

.bg-lightblue {
	background-color: #9fc3dc;
}

/* Texts */

.text-purple {
	color: #5d2c86;
}

/* Links */

a {
	text-decoration: none;
}

/* Buttons */

.btn-primary {
	padding: .75rem 1.5rem;
	background-color: #4192cf;
	border-color: #4192cf;
}

.btn-primary_purple {
	background-color: #5d2c86;
	border-color: #5d2c86;
}

/* Navbar */

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	background-color: rgba(255,255,255,0.15)
}

.navbar-left {
	position: relative;
	color: #fff;
	padding-top: 3rem;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	background-color: #5d2c86;
	width: 100%;
	height: 100%;
}

.navbar-left .nav-contact {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1.5rem;
}

/* Header */

.contact {
	position: absolute;
	top: 0;
	right: 0;
	padding: 1.5rem;
}

/* Content */

.home .content-right::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgb(62,139,203);
	background: linear-gradient(0deg, rgba(62,139,203,1) 0%, rgba(255,255,255,0) 100%);
}

.home .content-right .card {
	width: 18rem;
	position: Absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 10;
}

.home .content-right .content-right_title {
	position: absolute;
	z-index: 10;
	bottom: 5%;
	left: 0;
	padding: 6rem;
	max-width: 75%;
	color: #fff;
	line-height: 1.5;
	text-align: center;
	margin: 0 auto;
	right: 0;
	font-size: 3rem;
}

.content-right .content-right_bg__img {
	object-fit: cover;
}

.content-right_banner {
	height: 520px;
}

.content-right_banner .content-right_banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: grayscale(1);
}

.content-right_banner .content-right_banner__content {
	position: absolute;
	bottom: 3rem;
	left: 3rem;
	z-index: 10;
}

.content-right_content h2,
.content-right_content h3 {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.content-right_content h2:first-child {
	margin-top: 0;
	margin-bottom: 2.5rem;
}

.content-right .list-subnav li a {
	padding: .75rem 1rem;
	background-color: #fff;
	width: 100%;
	display: block;
	border-radius: .3rem;
	text-decoration: none;
	font-size: 1rem;
	color: #5d2c86;
	margin-bottom: 1rem;
}

.content-right_content ul,
.content-right_content ol {
	padding: 3rem;
	background-color: cornsilk;
	border-radius: .6rem;
}

/* Quiz */

.quiz .gf_progressbar.gf_progressbar_blue {
	background-color: #4192cf;
	border-radius: .6rem;
	overflow: hidden;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.quiz .gf_progressbar.gf_progressbar_blue .gf_progressbar_percentage {
	background-color: #fff;
}

.quiz .gfield {
	margin: 1.5rem 0;
}

.quiz .gfield_label {
	font-size: 1.5rem;
	font-family: "Jakarta 600";
	margin-bottom: .75rem;
}

.quiz .gfield input,
.quiz .gfield select {
	background-color: #fff;
	padding: .5rem;
	border: 1px solid #dee2e6 !important;
	border-radius: .6rem;
}

.quiz .gfield input[type="text"],
.quiz .gfield input[type="email"],
.quiz .gfield input[type="tel"] {
	width: 100%;
}

.quiz .gchoice {
	padding: .75rem;
	border-radius: .6rem;
	border: 1px solid #dee2e6;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
	margin-bottom: .75rem;
}

.quiz .gfield-choice-input { 
	margin-right: 1rem;
}

.quiz .button {
	padding: .75rem 1.5rem;
	background-color: #4192cf;
	color: #fff;
	box-shadow: none;
	border: 0;
	border-radius: .3rem;
}

.quiz select {
	font-family: "Arial", sans-serif;
}

/* Quick navigation */

.quick-navigation .qn-item {
	position: relative;
	border-radius: .3rem;
	overflow: hidden;
	height: 150px;
	background-color: #4192cf;
}

.quick-navigation .qn-item .qn-item_content {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1rem;
}

.quick-navigation .qn-item .qn-item_content h3 {
	color: #fff;
	font-size: 1.25rem;
	word-break: break-word;
}

/* Cart */

.woocommerce-notices-wrapper {
	display: none;
}

.shop_table .product-quantity,
.shop_table .product-thumbnail {
	display: none;
}

.cart_totals h2 {
	display: none;
}

/* Checkout */

form.checkout input,
form.checkout select {
	background-color: #fff;
	padding: .5rem;
	border: 1px solid #dee2e6 !important;
	border-radius: .6rem;
}

form.checkout button#place_order {
	padding: 1.5rem 3rem;
	background-color: #4192cf;
	border-color: #4192cf;
	font-family: "Jakarta 600";
	font-size: 1.25rem;
}

.woocommerce-billing-fields h3 {
	margin-top: 0;
}

#payment .woocommerce-terms-and-conditions-wrapper {
	display: none;
}

/* Footer */

.footer .footer-title {
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.footer .list-footer li {
	margin-bottom: .5rem;
}

.footer .list-footer li a {
	color: #4192cf;
	text-decoration: none;
}

/* Responsive */

@media (max-width: 992px ) {
	.p-5 { padding: 1.5rem !important; }
	.mx-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }

	.list-subnav { margin-bottom: 3rem !important; }

	.navbar-left { min-height: 550px; }
	.navbar-left .nav-pills { margin-bottom: 3rem !important; }

	.logo { max-width: 250px; }

	.home .content-right .content-right_title { font-size: 1.25rem; padding: 1.5rem; }

	.content-right_banner { height: 250px; }

	.contact { position: relative; }

	.footer .col-12 { margin-bottom: 1.5rem; }
	.copyright .text-end { text-align: left !important; }

}