/*
Theme Name: WineExperts
Description: The Wine Experts theme
Author: Joinweb
Author URI: https://www.joinweb.gr
Template: joinwebBasic
Version: 1.0.0
*/


/* Global variables */
:root {
	--fontFamily: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
	--fontFamilySerif: 'Literata', 'Hoefler Text', 'Baskerville Old Face', Garamond, 'Times New Roman', serif;
	--colorBlack: #000;
	--colorRed: #c65156;
	--colorGreyDark: #484848;
	--colorGrey: #6b6b6b;
	--colorGreyLight: #dedede;
	--colorWhite: #fff;
	--colorWineRose: #eba5a8;
	--colorWineWhite: #e6d165;
}

body {
	font-family: var(--fontFamily);
	font-size: 1.8rem;
	background-color: var(--colorWhite);
	color: var(--colorBlack);
	position: relative;
}

/* Typography */
p {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

p + p { margin-top: 2rem; }

a {
	color: var(--colorBlack);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fontFamilySerif);
	line-height: 1.2;
	font-weight: 300;
}

h1, .h1 { font-size: 5.8rem; font-weight: 200; }
h2, .h2 { font-size: 4.8rem; }
h3, .h3 { font-size: 3.2rem; }
h4, .h4 { font-size: 2.3rem; }
h5, .h5 { font-size: 1.8rem; }
h6, .h6 { font-size: 1.6rem; }

.titleBorder {
	padding-bottom: 3rem;
	margin-bottom: 4rem;
	border-bottom: 1px solid var(--colorRed);
}

.small { font-size: 1.6rem; }
.caption { font-size: 1.2rem; }

/* Lists */
ul.unstyledList,
ol.unstyledList {
	list-style: none;
	margin: 0;
	padding: 0;
}

.unstyledList > li {
	line-height: 1.5;
}

/* Text styles */
.text p {
	line-height: 1.5;
}

.text p + p {
	margin-top: 2rem;
}

.centeredText {
	width: 50%;
	margin: 0 auto;
}

.centeredText h2 {
	text-align: center;
	margin-bottom: 4rem;
}

.wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

/* Sections */
.section + .section {
	margin-top: 12rem;
}

.section--top {
	margin-top: 4rem !important;
}

.section--hero {
	color: var(--colorWhite);
}


.section--hero__content {
	padding: 6rem 14rem;
	height: 600px;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
.section--hero__content__text {
	position: relative;
	z-index: 1;
}

.section--heroMedium .section--hero__content { height: 60rem; }
.section--heroSmall  .section--hero__content { height: 32rem; }

.section--bg {
	padding: 8rem 0;
	background: var(--colorGrey) url("https://dummyimage.com/1920x700") no-repeat top center #000;
	background-size: cover;
	color: var(--colorWhite);
	position: relative;
}
.section--bg:after,
.section--hero__content:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	top: 0;
	left: 0;
	z-index: 0;
}

.section--bg .wrapper,
.page-template-home .section--hero .wrapper {
	position: relative;
	z-index: 1;
}

.section--bg .wrapper:after,
.page-template-home .section--hero .wrapper:after {
	content: "";
	width: 1px;
	height: 65rem;
	background-color: var(--colorGreyDark);
	position: absolute;
	top: 0;
	left: 0;
}

.page-template-home .section--hero .wrapper:after {
	top: 7rem;
	left: 14rem;
	height: 90rem;
}

.foregroundImage {
	width: 70rem;
	height: 70rem;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

.section--promo {
	margin-bottom: -12rem; /* remove footer margin */
	padding: 10rem 0 25rem;
	background: var(--colorGrey) url("https://dummyimage.com/1920x800") no-repeat top center;
	background-size: cover;
}

.section--promo .wrapper {
	padding-bottom: 10rem;
	border-bottom: 1px solid var(--colorRed);
}

.section--promo__box {
	background: rgba(198, 86, 81, 0.9);
	color: var(--colorWhite);
	padding: 3rem 5rem 5rem;
	width: 50%;
}

.section--promo__box .button {
	font-size: 2.3rem;
}

/* Forms */
.form {
	margin: 0;
	padding: 0;
}

.fieldContainer + .fieldContainer {
	margin-top: 2rem;
}

.field {
	display: block;
	width: 100%;
	padding: 2.5rem 5rem;
	border: none;
	border-bottom: 1px solid var(--colorGreyLight);
	background: none;
	color: var(--colorGreyDark);
	font-family: var(--fontFamilySerif);
	font-size: 3.2rem;
}

.field:focus,
.field:active {
	border-color: var(--colorGreyDark);
	outline: none;
}

textarea.field {
	font-family: var(--fontFamilySerif);
	font-size: 3.2rem;
	height: 180px;
}

/* Buttons */
.buttonContainer {
	margin-top: 8rem;
}

.button {
	display: inline-block;
	padding: 2rem 6rem;
	font-size: 2.3rem;
	font-family: var(--fontFamilySerif);
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--colorRed);
	background: none;
	border: 2px solid var(--colorRed);
	cursor: pointer;
	border-radius: 0;
	transition: 0.5s;
}

.button:hover {
	text-decoration: none;
	color: var(--colorGrey);
	border-color: var(--colorGrey);
}

.button--secondary {
	color: var(--colorBlack);
	border-color: var(--colorGrey);
	font-size: 1.6rem;
	padding: 1.5rem 5rem;
}

.button--secondary:hover {
	border-color: var(--colorRed);
	color: var(--colorRed);
}

.button--tertiary {
	color: var(--colorBlack);
	border-color: var(--colorGreyLight);
	font-size: 1.6rem;
	padding: 1.5rem 5rem;
}

.button--tertiary:hover {
	border-color: var(--colorGrey);
	color: var(--colorBlack);
}

.button--white {
	border-color: var(--colorWhite);
	color: var(--colorWhite);
	font-size: 1.6rem;
	padding: 1.5rem 5rem;
}

.button--white:hover {
	border-color: var(--colorGreyLight);
	color: var(--colorGreyLight);
}

.button--underline {
	text-transform: none;
	border-width: 0 0 1px;
	border-color: var(--colorWhite);
	color: var(--colorWhite);
	font-size: 1.8rem;
	font-weight: 200;
	padding: 0 7rem 1rem 0;
}

.button--underline:hover {
	border-color: var(--colorWhite);
	color: var(--colorWhite);
	border-bottom-color: transparent;
}

/* Maps */
.mapContainer {
	position: relative;
	padding-bottom: 33%; // This is the aspect ratio
height: 0;
	overflow: hidden;
}

.mapContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border-radius: 20px;
}

/* Photos */
.photoContainer {
	margin: 13rem 0;
}

.photoRow {
	display: grid;
	grid-template-columns: minmax(0, 62fr) minmax(0, 95fr);
	gap: 7rem;
}

.photoRow--reverse {
	grid-template-columns: minmax(0,95fr) minmax(0, 62fr);
}

.photoRow img {
	width: 100%;
}

.photoGrid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 67rem 95rem;
	grid-template-areas: "A B"
                       "A C";
	overflow: hidden;
}

.photoGrid__A {
	grid-area: A;
}

.page-template-home .photoGrid__A {
	background: url("https://dummyimage.com/670x1080") no-repeat top left;
	color: var(--colorWhite);
	border-radius: 0 0 0 50px;
	padding: 7rem 14rem;
	position: relative;
}

.page-template-home .photoGrid__A:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--colorRed);
	opacity: 0.9;
	border-radius: 0 0 0 50px;
}

.page-template-home .photoGrid__A .button {
	font-size: 2.3rem;
}

.photoGrid__A__inner {
	position: relative;
	z-index: 1;
}

.photoGrid__B {
	grid-area: B;
}

.photoGrid__C {
	grid-area: C;
}

/* Contact */
.contactGrid {
	display: grid;
	gap: 3rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "A B"
                       "C C";
}

.contactGrid__A {
	grid-area: A;
}

.contactGrid__B {
	grid-area: B;
	text-align: right;
}

.contactGrid__C {
	grid-area: C;
}


/* Curves */
.curveTopLeft {
	border-radius: 120px 0 0 0;
	overflow: hidden;
}
.curveTopRight {
	border-radius: 0 120px 0 0;
	overflow: hidden;
}
.curveBottomLeft {
	border-radius: 0 0 0 120px;
	overflow: hidden;
}
.curveBottomRight {
	border-radius: 0 0 120px 0;
	overflow: hidden;
}

/* Categories */
.categories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8rem;
}

.category {
	text-align: center;
	position: relative;
}

.category h3 {
	margin-top: 2rem;
}

.category h3 span {
	padding: 0 6rem 2rem;
	border-bottom: 1px solid var(--colorBlack);
	transition: 0.5s;
}

.category > a {
	display: block;
	padding-top: 16rem;
}

.category > a:hover {
	text-decoration: none;
	color: var(--colorRed);
}

.category > a:hover h3 span {
	border-color: var(--colorRed);
}

.category:before {
	content: "";
	display: block;
	width: 40rem;
	height: 44rem;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
	border-radius: 200px 200px 0 0;
	z-index: -1;
}

.category--white:before { background: var(--colorWineWhite); }
.category--rose:before { background: var(--colorWineRose); }
.category--red:before { background: var(--colorRed); }

.category--image img {
	width: 350px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Products */
.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
}

.products > article {
	border: 1px solid var(--colorGreyLight);
	text-align: center;
	position: relative;
}

.products > article img {
	margin: 0 auto;
}

.products > article a {
	padding: 1.5rem 1.5rem 6rem;
	display: block;
}

.products > article a:hover {
	text-decoration: none;
}

.products > article h4 {
	margin-bottom: 3rem;
}

.product__category {
	margin-top: 1.5rem;
}

.product__meta {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
}

.product__type {
	display: block;
	width: 3rem;
	height: 3.6rem;
	text-indent: -9999em;
	margin-top: 1.5rem;
}

.product__type.bottle { background: url("images/icon-bottle.svg") no-repeat top center; }
.product__type.bag { background: url("images/icon-bag.svg") no-repeat top center; }

.product__category {
	color: var(--colorGrey);
	font: 1.8rem var(--fontFamilySerif);
	display: block;
	margin-bottom: 1.5rem;
}

.product__button {
	display: block;
	padding: 1.5rem 0;
	border-top: 1px solid var(--colorGreyLight);
	font: 2.1rem var(--fontFamilySerif);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.swatch {
	display: inline-block;
	vertical-align: text-bottom;
	width: 3rem;
	height: 3rem;
	margin-right: 1rem;
	border-radius: 50%;
	text-indent: -9999em;
}

.swatch--rose { background-color: var(--colorWineRose); }
.swatch--red  { background-color: var(--colorRed); }
.swatch--white { background-color: var(--colorWineWhite); }

/* Promo */
.promo {
	border: 1px solid var(--colorGrey);
	color: var(--colorGreyDark);
	padding: 8rem 12rem;
	background: url("images/icon-gift.svg") no-repeat 8rem 3rem;
}

.promo > h2 {
	padding-left: 16rem;
}

.promo > .button {
	display: block;
	background: var(--colorBlack);
	color: var(--colorWhite);
	border: none;
	text-transform: none;
	margin: 8rem -12rem -8rem;
}

/* Services */
.service {
	display: grid;
	grid-template-columns: 520px minmax(0, 1fr);
	grid-template-areas: "image text";
	gap: 7rem;
}
.service:nth-child(even),
.service--reverse {
	grid-template-columns: minmax(0, 1fr) 520px;
	grid-template-areas: "text image";
}

.service + .service {
	margin-top: 7rem;
}

.post-type-archive-services figure,
.service .roundImageContainer {
	grid-area: image;
}
.post-type-archive-services .service__text {
	grid-area: text;
	border-bottom: 1px solid var(--colorRed);
}
.service .service__text {
	grid-area: text;
}

.service__text h2 {
	margin-bottom: 3rem;
}

.servicesList {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	gap: 8rem;
	margin: 8rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: li;
}

.servicesList li {
	font: 3.2rem var(--fontFamilySerif);
	text-align: center;
	counter-increment: li;
	width: 33%;
}

.servicesList li:before {
	content: counter(li) ".";
	width: 3rem;
	text-align: right;
	display: inline-block;
	padding: 2rem 5rem 2rem 0;
	border-right: 1px solid var(--colorWhite);
}

.servicesList li span {
	padding-left: 3rem;
}

/* Carousel */
.carousel {
	background: var(--colorGreyDark) url("images/icon-quote.svg") no-repeat 7rem 50%;
	color: var(--colorGreyLight);
	padding: 5rem 7rem 5rem 28rem;
}

.carousel__quotes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 7rem;
	font-family: var(--fontFamilySerif);
}

.carousel__quotes blockquote {
	margin: 0 15px 2rem 0;
	font-size: 2.3rem;
	font-style: italic;
	font-weight: 200;
}

.carousel__nav {
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: row;
}

.carousel__nav > li {
	font-size: 0;
	width: 7rem;
	border-bottom: 1px solid var(--colorGrey);
}

.carousel__nav li + li {
	margin-left: 1rem;
}

.carousel__nav > li.active {
	border-color: var(--colorWhite);
}

.page-template-home .carousel {
	background: #1d1d1d;
	padding-right: 75rem;
	padding-left: 14rem;
	position: relative;
}

/* Breadcrumbs */

.breadcrumb,
.breadcrumb a {
	font-size: 1.6rem;
	font-family: var(--fontFamilySerif);
	color: var(--colorGrey);
}

/* Filters */
.filters {
	margin: 0 0 4rem;
	padding: 0;
	list-style: none;
}

.filters > li {
	display: inline-block;
}

.filters > li + li {
	margin-left: 1.5rem;
}

.filters > li > a {
	font-family: var(--fontFamilySerif);
	font-size: 2.3rem;
	color: var(--colorGreyDark);
	border: 1px solid var(--colorGreyLight);
	padding: 1rem 8rem;
	display: block;
	text-decoration: none;
	border-radius: 30px;
}

.filters > .filter__active > a,
.filters > li > a:hover {
	border-color: var(--colorRed);
}

/* Pagination */
.pagination {
	margin: 8rem 0 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.pagination > li {
	display: inline-block;
}

.pagination > li + li {
	margin-left: 1.5rem;
}

.pagination > li > a {
	font-family: var(--fontFamilySerif);
	color: var(--colorGreyDark);
	border: 1px solid var(--colorGreyLight);
	padding: 1.5rem 2rem;
	display: block;
	text-decoration: none;
}

.pagination > .pagination__current > a,
.pagination > li > a:hover {
	border-color: var(--colorRed);
}

/* Header */
.mainHeader {
	font-family: var(--fontFamilySerif);
	font-size: 1.6rem;
	margin: 1.5rem 0;
}

.mainHeader .grid {
	grid-template-columns: 18rem auto auto;
	align-items: center;
}

/* Menu */
.menu {
	justify-self: right;
}

.menu ul {
	align-items: stretch;
}

.menu li a {
	height: 100%;
	display: flex;
	align-items: center;
}

.menu li a:not(.button) {
	text-transform: uppercase;
	margin-left: 3rem;
	padding-left: 3rem;
	border-left: 1px solid transparent;
}

.menu li.current-menu-item a,
.menu li a:not(.button):hover {
	color: var(--colorRed);
	border-color: 1px solid var(--colorRed);
	text-decoration: none;
}

.menu li:first-child a {
	margin-left: 0;
}

.menu li:last-child a {
	margin-left: 3rem;
}

.menuTrigger {
	display: none;
	text-indent: -9999em;
	height: 2.2rem;
	text-align: right;
}

/* Language switch */
.languageSwitch {
	justify-self: right;
	position: relative;
}

.languageSwitch a {
	padding-right: 3rem;
	background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSItMjY1IDM4OC45IDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTI2NSAzODguOSA2NCA2NCI+PHBhdGggZD0ibS0yMTYuMSA0MTYuNy0xNS4xIDE0LjhjLS40LjMtMS4yLjMtMS42IDBsLTE1LjEtMTQuOGMtLjQtLjMuMS0uOC44LS44aDMwLjJjLjcgMCAxLjEuNC44Ljh6IiBmaWxsPSIjNDg0ODQ4IiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=") no-repeat center right;
}

.languageSwitch .sub-menu {
	display: none;
}
.languageSwitch .visible .sub-menu {
	display: block;
	position: absolute;
	top: 27px;
	right: 0;
	z-index: 111;
	background: #fff;
}
.languageSwitch .sub-menu a {
	background: transparent;
}

/* Footer */
.mainFooter {
	background-color: var(--colorGreyLight);
	color: var(--colorGreyDark);
	margin-top: 12rem;
	padding: 5rem 0;
	font-family: var(--fontFamilySerif);
	text-transform: uppercase;
}
.mainFooter .email {
	text-transform: lowercase;
}
.mainFooter h4 {
	margin-bottom: 2rem;
	color: var(--colorGrey);
}

.mainFooter h6 {
	font-weight: bold;
	margin-top: 3rem;
	margin-bottom: 2rem;
}

.mainFooter .caption {
	text-align: center;
	margin-top: 4rem;
}

.mainFooter .grid {
	grid-template-columns: 30rem minmax(0, 1fr) 60rem;
}

.mainFooter__contact {
	color: var(--colorGrey);
	font-size: 1.6rem;
}

/* Utilities */
.col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mt-s { margin-top: 1rem !important; }
.mt-m { margin-top: 1.5rem !important; }
.mt-l { margin-top: 3rem !important; }
.mt-xl { margin-top: 4rem !important; }
.mt-xxl { margin-top: 6rem !important; }

.mb-s { margin-bottom: 1rem !important; }
.mb-m { margin-bottom: 1.5rem !important; }
.mb-l { margin-bottom: 3rem !important; }
.mb-xl { margin-bottom: 4rem !important; }
.mb-xxl { margin-bottom: 6rem !important; }

.one-half { width: 50%; }
.one-third { width: 33.333333%; }
.one-quarter { width: 25%; }
.three-quarters { width: 75%; }

.text-left { text-align: left !important; }

.content-center { margin: 0 auto; }
.random-inset-left { margin-left: 14rem; }
.random-inset-right { margin-right: 14rem; }
.random-inset-both  {
	margin-left: 14rem;
	margin-right: 14rem;
}


/* joinweb */
.roundImageSection {
	overflow: hidden;
	padding-bottom: 50px;
}
.roundImageContainer {
	position: relative;
}
.roundImage {
	border-radius: 50%;
	overflow: hidden;
	max-width: 520px;
	width: 100%;
}
.roundImageContainer:after {
	content: "";
	display: block;
	position: absolute;
	top: 20%;
	left: 20%;
	width: calc(100% - 50px);
	height: calc(100% - 50px);
	max-width: 470px;
	max-height: 470px;
	border-radius: 50%;
	border: solid 1px var(--colorGreyDark);
	z-index: -1;
}

.languageSwitch ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.languageSwitch ul ul {
	display: none;
}
.carousel__nav button {
	opacity: 0;
	cursor: pointer;
	width: 100%;
}
.page-id-244 .contactGrid__B .button {
	display: none;
}
.menu li.specialMenuItem a:not(.button) {
	border: 2px solid var(--colorGreyLight);
	padding: 5px 20px;
	transition: 0.5s;
}
.menu li.specialMenuItem a:not(.button):hover {
	border-color: var(--colorGrey);
}

/* wine single */
.wineDetails {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);
	grid-gap: 70px;
	margin-top: 45px;
}
.wine__info__meta span {
	display: inline-block;
	margin: 0;
	vertical-align: baseline;
}
.wine__info__meta span:last-of-type {
	margin-left: 10px;
}
.wineDetails h1 {
	font-size: 2.3rem;
	font-weight: normal;
	margin-bottom: 21px;
}
.wineDetails p {
	font-size: 1.6rem;
	color: var(--colorGrey);
}
.wine__location h3 {
	font-size: 1.6rem;
	font-weight: normal;
	color: var(--colorGrey);
	margin-bottom: 15px;
}
.wine__location h4 {
	font-size: 2.1rem;
	font-weight: 300;
	color: #363636;
	position: relative;
}
.wine__location h4:after {
	position: absolute;
	content: "";
	display: block;
	width: 260px;
	height: 1px;
	background: #dedede;
	bottom: -15px;
	left: 0;
}

.terms_menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

/* menu */

.menuToggle {
	display: inline-block;
	position: relative;
	-webkit-user-select: none;
	user-select: none;
	background: transparent;
	border: transparent;
	cursor: pointer;
}
.menuToggle span {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;

	background: var(--colorBlack);
	border-radius: 3px;

	z-index: 1;

	transform-origin: 4px 0px;

	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	opacity 0.55s ease;
}
.menuToggle span:first-child {
	transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
	transform-origin: 0% 100%;
}
/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
.open .menuToggle span {
	opacity: 1;
	transform: rotate(45deg) translate(0, -20px);
}
/*
 * But let's hide the middle one.
 */
.open .menuToggle span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}
/*
 * Ohyeah and the last one should go the other direction
 */
.open .menuToggle span:nth-last-child(2) {
	transform: rotate(-45deg) translate(0, 20px);
}