/*!
Theme Name: Find Spare Space
Theme URI: http:/findsparespace.com
Author: Design Project
Author URI: http://designproject.co.uk
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: findsparespace

Find Spare Space is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

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

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Root styles
	- Colors
	- Fonts
	- Font sizes
	- Typography

# Nav
	- Desktop
	- Tablet
	- Mobile

# Footer

# Images

# Buttons

# Page Layout
	- Sections and grid containers



# Swiper
# Form


--------------------------------------------------------------*/

html {
	font-size: 10px;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing:  grayscale;
	text-rendering: optimizeLegibility;
}

/*--------------------------------------------------------------
# Root style
--------------------------------------------------------------*/

/* Colors */
:root{
	--blue: #060EE5;
	--lightBlue: #B3B5F5;
	--cyan: #16F6E4;
	--lightCyan: #D0FDF9;
	--white: #ffffff;
}

.blue-text { color: var(--blue);}
.lightblue-text { color: var(--lightBlue);}
.cyan-text { color: var(--cyan); }
.lightcyan-text { color: var(--lightCyan);}
.white-text { color: var(--white);}

.blue-bg { background-color: var(--blue);}
.lightblue-bg {	background-color: var(--lightBlue);}
.cyan-bg { background-color: var(--cyan); }
.lightcyan-bg {	background-color: var(--lightCyan);}
.white-bg {	background-color: var(--white);}

/* Fonts */

@font-face { 
	font-family: "Inter"; 
	font-style: normal; 
	font-weight: 400; 
	font-display: swap; 
	src: url( "../findsparespace/fonts/Inter-Regular.woff2") format("woff2"); 
}

@font-face { 
	font-family: "InterBold"; 
	font-style: normal; 
	font-weight: 700; 
	font-display: swap; 
	src: url("../findsparespace/fonts/Inter-Bold.woff2") format("woff2"); 
}

:root {
	--inter: "Inter",  "Helvetica Neue", Helvetica, Arial, sans-serif;
	--interBold: "InterBold",  "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.inter {
	font-family: var(--inter);
	font-weight: 400;
}

.inter-bold, strong {
	font-family: var(--interBold);
	font-weight: 700;
}

.allcaps {
	text-transform: uppercase;
}
.no-underline {
	text-decoration: none;	
}

.underline {
	text-decoration: underline;
}

.underline:hover {
	text-decoration: none;
}

/* Remove Safari tap highlight */
a, button {
	-webkit-tap-highlight-color: transparent;
  }
  
  /* Remove focus outline on tap */
  a:focus, button:focus {
	outline: none;
  }
  

/* DESKTOP	 */
@media only screen and (min-width: 1181px){
	:root{
		--super: 8rem;
		--large: 4.8rem;
		--medLarge: 3.4rem;
		--med: 2.4rem;
		--para: 2rem;
		--small: 1.6rem;
	}
}

/* small screen */
@media only screen and (min-width: 1081px) and (max-width: 1280px){
	:root{
		--super: 7rem;
		--large: 4.3rem;
		--medLarge: 3.0rem;
		--med: 2.2rem;
		--para: 2rem;
		--small: 1.6rem;
	}
}


/* TABLET */
@media only screen and (min-width: 681px) and (max-width: 1080px){
	:root{
		--super: 6.5rem;
		--large: 3.8rem;
		--medLarge: 2.9rem;
		--med: 2rem;
		--para: 1.8rem;
		--small: 1.6rem;
	}
}

/* MOBILE */
@media only screen and (max-width: 680px){
	:root{
		--super: 4.4rem;
		--large: 2.9rem;
		--medLarge: 2.9rem;
		--med: 2rem;
		--para: 1.6rem;
		--small: 1.6rem;
	}

}

.super {
	font-size: var(--super);
	line-height:1.0124;
}
.large {
	font-size: var(--large);
	line-height:1.2;
}
.med-large {
	font-size: var(--medLarge);
	line-height:1.2;
}
.med {
	font-size: var(--med);
	line-height:1.2;
}
.para {
	font-size: var(--para);
	line-height:1.2;
}
.small {
	font-size: var(--small);
	line-height:1.2;
}

html {
	font-family: var(--inter);
} 

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	margin: 0;
	font-size: var(--large);
	font-family: var(--interBold);
	color: var(--blue);
}

p {
	clear: both;
	margin: 0;
	font-family: var(--inter);
	font-size: var(--para);
	color: var(--blue);
}

p + p, ul + p, ol + p{
	margin-top: 1.2em;
}

P + h1 {
	margin-top: 1.2em;
}

 

.section ul {
	font-size: var(--para);
	font-family: var(--inter);
	color: var(--blue);
	list-style: none; /* remove default bullets */
	padding-left: 0;
	margin: 0 0 0 0;
}

.section ul.med, p.med + ul,  .faq-answer ul {
	font-size: var(--med);
}

.section ul li::before {
	content: "– "; /* custom bullet character */
	margin-left: -1em; /* align bullet with text */
	position: absolute;
}

.section ul li {
	position: relative;
	padding-left: 1em;
}

.section ol {
	font-size: var(--para);
	font-family: var(--inter);
	color: var(--blue);
	list-style: decimal;
	margin: 0 0 0 0;
	padding-left: 2ch;
}


.column-text 
h1 + p {
	margin-top: 1.2em;
}

  

a, a:hover, a:visited {
	color: inherit;
}	
a.credit:hover {
	text-decoration: underline;
}

/* MOBILE */
@media only screen and (max-width: 680px){
	.super {
		line-height: 1.0226;
	}
}

/*--------------------------------------------------------------
- Page
--------------------------------------------------------------*/

#primary {
	border-top: 144px solid var(--blue);
}

/* Small screen and Tablet */
@media only screen and (min-width: 681px) and (max-width: 1280px) {
	#primary {
		border-top: 117px solid var(--blue);
	}
}

/* Mobile */
@media only screen and (max-width: 680px)  {
	#primary {
		border-top: 106px solid var(--blue);
	}
}

/*--------------------------------------------------------------
# Nav
--------------------------------------------------------------*/

#masthead  {
	width:100%;
	position: absolute;
	top: 0;
	z-index: 100;
	background-color: var(--blue);
	opacity: 1;


	  

}

#masthead.hidden {
	opacity: 1;
	pointer-events: all;
}

.site-header {
	display: grid;
	grid-template-columns: repeat(6, 1fr); 
	gap: 30px;
	max-width: 1350px;
	margin: 0 auto; 
	padding: 30px; 
}

.site-logo {
	grid-column: 1 / span 2;
	width: auto;
	max-height: 83px;
	height: 100%;
}

.site-logo a {
	display: block;
	width: auto; /* Fallback for older browsers */
	width: fit-content;
}

.site-logo svg {
	width: auto!important;
	max-height: 83px;
	text-align: left;
}

.site-logo  > svg {
	width: auto !important; /* Prevents forced width */
	height: auto !important; /* Optional: Adjust height as needed */
  }


#site-navigation {
	grid-column: 3 / 7;
}

.menu {
    display: flex;
    justify-content: flex-end;
	gap: 36px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; 
}

.menu-item {
    margin: 0; 
}

.menu-item a {
	font-family: var(--interBold);
	font-size: var(--small);
	line-height: 1;
    text-decoration: none;
	text-transform: uppercase;
    color: var(--white); 
	padding: 6px 0 8px;
    display: block;
    text-align: center;
	line-height: 1;
}

.menu-item a:hover, .menu-item.current_page_item a {
    color:var(--cyan);
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 8px;
}



#navToggle {
	display: none;
}
	
#navToggle {
	display: none;
}
#mob-navigation {
	display: none;
}

/* MOBILE and TABLET */
@media only screen and (max-width: 680px) {

	.site-header {
		grid-template-columns: repeat(4, 1fr); 
		gap: 16px;
		padding: 16px; 
	}

	.site-logo svg {
		max-height: 74px;
	}

	#site-navigation {
		display: none;
	}

	#navToggle {
		display:block;
		padding: 16px;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;	
	}

	.toggle {
		position: relative;
		width:20px; 
		height: 20px;
	}

	.toggle-bar {
		width: 20px;
		height: 2px;
		background-color: var(--cyan);
		position: absolute;
		left: 0;
	}

	.toggle-bar.top {	top: 0px;	}
	.toggle-bar.mid {	top: 9px;	}
	.toggle-bar.bot {	top: 18px;	}

	body.nav-open .toggle-bar.top {	width: 26px; top: 9px; left: -3px; transform: rotate(45deg);	}
	body.nav-open .toggle-bar.bot {	width: 26px; top: 9px; left: -3px; transform: rotate(-45deg);	}
	body.nav-open .toggle-bar.mid {	display: none;	}



	#mob-navigation {
		display: block;
		background-color: var(--cyan);
		width: 100%;
		max-width: 0%;
		height: 100%;
		max-height: calc(100dvh - 106px);
		height: calc(100dvh - 106px);
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		
		margin-top: 106px;
	}

	body.nav-open #masthead.hidden {
		opacity: 1;
	}
©
	body.nav-open #masthead {
		position: fixed;
	}


	body.nav-open #mob-navigation {
		display: block;
		max-width: 100%;
		transition: max-width 0.5s cubic-bezier(.25,.1,.13,1);
	}

	.mob-menu {
		display: grid;
		grid-template-rows:  repeat(5, auto) 1fr auto;
		list-style: none;
		width: 100vw; 
		height: 100%;
		padding: 30px 16px;
		margin: 0;
		position: relative;
	}

	.menu-item a {
		font-family: var(--interBold);
		font-size: var(--super);
		line-height: 1.024;
		text-decoration: none;
		text-transform: uppercase;
		color: var(--blue);
		padding:0;
		text-align: left;
	}

	.menu-item a:hover, .menu-item.current_page_item a  {
		color: var(--white);
		text-decoration: none;
	}

	.menu-msg.menu-item {
	grid-row: 7 / span 1;
	}
	
	.menu-msg.menu-item a {
		font-size: var(--large);
		line-height: 1.2;
		text-decoration: underline;
		text-decoration-thickness: 3px;
		text-transform: none;
	}

	.menu-msg.menu-item.current_page_item a {
		color: var(--blue);
	}

	.menu-msg.menu-item.current_page_item a:hover{
		color: var(--white);
	}

}

/* TABLET */
@media only screen and (min-width: 681px) and (max-width: 1280px) {
           
	.site-header {
		gap: 20px;
		padding: 20px; 
	}

	.menu-item { 
		grid-column: 1 / 4;
	}
	.menu-msg.menu-item { 
		grid-column: 1 / 3;
	}

}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#colophon {
	width:100%;
	background-color: var(--blue);
}

.footer.container {
	padding: 60px 30px;
	grid-template-rows: auto 1fr 1fr;
	row-gap: 0;
}

.footer-col-one {
	grid-column: 1 / span 1;
}
.footer-col-two {
	grid-column: 2 / span 2;

}

.footer-menu {
    display: block;
    list-style: none;
	text-align: left;
	padding: 0;
	margin: 0;
	font-size: var(--small);
	line-height: 1.2;
}

.site-footer ul {
	color: inherit;
}

.site-footer ul li {
	color: inherit;
	position: relative;
	padding-left: 0;
  }
.site-footer  ul li::before {
	content: none;
	display: none;  
}


.footer-menu .menu-item a {
	font-family: var(--interBold);
	font-size: var(--small);
	line-height: 1.438;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--white);
	padding: 0;
	display: inline-block;
	text-align: left;
}

.footer-menu .menu-item a:hover {
	color: var(--cyan);
}

#footer-menu-legal.footer-menu{
	margin-top: 1.2em;
}

.footer-social-title {
	margin-top:1.2em;
}

.footer-social {
	display: flex;
	flex-direction: row;
	margin-top: 15px;
	gap: 15px;
	justify-content:start;
}

.social-icon img {
	width: 100%;
	max-width: 40px;
}

.footer-logo-cont {
	grid-column: 1 / span 6;
	grid-row: 3 / span 1;
	display: grid;
	grid-template-rows: 75px 75px 75px;
	gap:18px;
}

.footer-logo-row {	
	display: grid;
	gap: 11px;
}

.footer-logo-text img {
	height: 75px;
	width: auto;
}

.footer-logo-square {
	border: 13px solid var(--cyan);
	height: 75px;
}

.footer-logo-row.left {
	grid-template-columns: min-content 1fr;
}
.footer-logo-row.right {
	grid-template-columns: 1fr min-content;
}


.footer-logo-row.left.footer-logo-square {
	grid-column: 1 / span 1;
}
.footer-logo-row.right.footer-logo-square {
	grid-column: 2 / span 1;
}

.footer-logo-row.left.footer-logo-text {
	grid-column: 1 / span 1;
}
.footer-logo-row.right.footer-logo-text {
	grid-column: 2 / span 1;
}

.footer-logo-mob {
	display: none;
}

/* TABLET */
@media only screen and (min-width: 681px) and (max-width: 1280px) {
	.footer.container {
		padding: 60px 20px;
	}
	.footer-col-one {
		grid-column: 1 / span 2;
	}
	.footer-col-two {
		grid-column: 3 / span 2;
	}
}

/* MOBILE */

@media only screen and (max-width: 680px)  {

	.footer.container {
		padding: 30px 16px;
		row-gap: 30px;
	}

	.footer-logo-row {
		gap: 9px;
	}

	.footer-col-one {
		grid-column: 1 / span 4;
	}

	.footer-col-two {
		grid-column: 1 / span 4;
	}
	.footer-logo-mob {
	display: block;
	grid-column: 1 / span 4;
	grid-row: 3 / span 1;
	}

	.footer-logo-mob img {
		width: 100%;
		height: auto;
		display: block;
	}

	.footer-logo-cont {
		display: none;
	}
}

/* IMAGES
--------------------------------------------- */
.image-cont {
	position: relative;
	width:100%;
	height: fit-content;
}

.image-cont img{
	width: 100%;
	height: auto;
	border-width: 30px;
	border-style: solid;
	border-color: var(--cyan);
	box-sizing: border-box;
}

.image-cont.border-cyan{
	background-color: var(--cyan);
}

.image-cont.border-blue {
	background-color: var(--blue);
}

.image-cont.border-cyan img{
	border-color: var(--cyan);
}

.image-cont.border-blue img{
	border-color: var(--blue);
}

.image-ratio-cont {
	aspect-ratio: 3 / 2;
	width: 100%;
	overflow: hidden;
	position: relative;
	border-width: 30px;
	border-style: solid;
	border-color: var(--cyan);
	box-sizing: border-box;
}

.image-ratio-cont img{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width:100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}


.image-cont img, .image-ratio-cont img {
	opacity: 0;
}
.image-cont img.loaded, .image-ratio-cont img.loaded {
	opacity: 1;
}
.image-ratio-cont.no-fade img {
	opacity: 1;
}

/*Tablet*/

@media only screen and (min-width: 681px) and (max-width: 1280px) {

	.image-cont img, .image-ratio-cont{border-width: 20px;}

}

/*Mobile*/

@media only screen and (max-width: 680px)  {

	.image-cont img, .image-ratio-cont{border-width: 16px;}

}


/*--------------------------------------------------------------
- Buttons
--------------------------------------------------------------*/

button.square-button,
.square-button a {
	display: block;
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 6px solid var(--blue);
	padding: 15px;
	font-family: var(--interBold);
	font-size: var(--para);
	line-height: 1;
	color: var(--blue);
	text-transform: uppercase;
	text-decoration: none;	
	text-align: center;
	cursor: pointer;


}


button.square-button:hover,
.square-button a:hover {
	color: var(--cyan);
	background-color: var(--blue);
}
.banner-contact .square-button  a,
.column-button .square-button  a {
	width: 100%; 
	max-width: 190px;

}


/*Tablet*/

@media only screen and (min-width: 681px) and (max-width: 1280px) {
	button.square-button,.square-button a {
		height: 50px;
		border: 5px solid var(--blue);
		padding: 11px 10px 10px;

	}

}

/*Mobile*/
@media only screen and (max-width: 680px)  {

	button.square-button,.square-button a {
		height: 45px;
		border: 5px solid var(--blue);
		padding: 9px 10px 10px;

	}

}

/*--------------------------------------------------------------
# Page layouts 
--------------------------------------------------------------*/


/*--------------------------------------------------------------
- Base Sections and containers 
--------------------------------------------------------------*/


.section {
	position: relative;
    width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.container {
	display: grid;
	grid-template-columns: repeat(6, 1fr); 
	column-gap: 30px;
	row-gap: 100px;
	max-width: 1350px;
	margin: 0 auto; 
	padding: 100px 30px; 
}

.container-title {
	grid-column: 1 / span 6;
	grid-row: 1 / span 1;
}

.container-title h1 {
 text-align: center;
}

.container.column {
	row-gap: 60px;
}

.column-title {
	grid-column: auto / span 4;
}

.column-text {
	grid-column: auto / span 4;
}
.column-button {
	grid-column: auto / span 4;
}

.column-image {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
	margin-top: 10px;
	height: fit-content;
}

.column.image .column-title {

	grid-column: 3 / span 4;

}
.column.image .column-text {
	grid-column: 3/ span 4;

}
.column.image .column-button {
	grid-column: 3 / span 4;

}





/*Small screen and Tablet*/
@media only screen and (min-width: 681px) and (max-width: 1280px) {

	.container {
		column-gap: 20px;
		row-gap: 60px;
		margin: 0 auto;
		padding: 60px 20px 100px;
	}
	.column-image {
		padding-top: 8px;}

}

@media only screen and (max-width: 680px) {
	.container {
		grid-template-columns: repeat(4, 1fr); 
		column-gap: 16px;
		row-gap: 60px;
		max-width: 1350px;
		margin: 0 auto;
		padding: 30px 16px 100px;
	}

	.container.column {
		row-gap: 60px;
	}

	.container-title {
	
		grid-column: 1 / span 4;
	}

	.home-reviews .container,
	.home-featured-spaces .container,
	.home-info .container {
		grid-template-columns: repeat(8, 1fr); 
	}

	.home-reviews .container-title,
	.home-featured-spaces .container-title,
	.home-info .container-title{ 
		grid-column: 1 / span 8;
	}

	.column-button .rounded-button {
		width:190px;
		margin: 0 auto;
	}

	.column-title {
		grid-column: 1 / 5;
	}
	
	.column-text {
		grid-column: 1 / 5;
	
	}

	.column-image {
		grid-column: 1 / span 4;
		grid-row: 2 / 3;
	}

	.column-image {
		grid-column: 1 / span 4;
		grid-row: 2 / 3;

	}

	
	.column.image .column-title {
		text-align: center;
		grid-column: 1 / 5;		
		grid-row: 1 / span 1;
	}
	.column.image .column-text {
		grid-column: 1/ 5;

	  }

	  .column.image .column-button {
		grid-column: 1 / 5;
	  }

}

/*--------------------------------------------------------------
- Hero-header
--------------------------------------------------------------*/

.container.hero-header {
	column-gap: 30px;
	row-gap: 100px;
	padding: 100px 30px;
}

.hero-header .header-title {
	grid-column: 1 / 5;
	grid-row: 1 /span 1;
	margin-top: 50px;
}

.hero-header .header-image {            
	grid-column: 5 / 7;
	grid-row: 1 /span 2;
}

.base-header .hero-header .header-image {
	grid-row: 1 /span 1;
}

.home-header h1,
.contact-header h1 {
	color: var(--cyan);
}



/* Image stack */
.image-stack-cont{
	position:absolute;
	top: 0;
	left:0;
	width:100%;
	height:100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
	padding:100px 60px;
	z-index: -1;
}

.image-stack {
	position: relative;
	grid-column: 3 / span 1;
	width: 100%;
	max-width: 540px;
	aspect-ratio: 1 / 1;
	justify-self: end;

}

.stack-image{
	width: 76%;
	position: absolute;
}

.stack-image.first {
	right: 0;
	top: 0;
	z-index: 1;
}

.stack-image.second {
	left: 0;
	bottom: 0;
	z-index: 2;
}


/* Image Small screens */

@media only screen and (min-width: 681px)  and (max-width: 1410px) {

	.image-stack-cont{
		position: relative;
		grid-column:5 / 7;
		grid-row: 1 / 3;
		grid-template-columns: 1fr;
		padding:0;
	}

	.image-stack {
		position: relative;
		grid-column: 1 / span 1;
		width: 100%;
		max-width: 100%;
	}

}


/*Small screen and Tablet*/
@media only screen and (min-width: 681px) and (max-width: 1280px) {
	.container.hero-header {
		column-gap: 20px;
		row-gap: 80px;
		padding: 60px 20px 100px;
	}
	

}

/* MOBILE */
@media only screen and (max-width: 680px) {

	.container.hero-header {
		column-gap: 16px;
		row-gap: 60px;
		padding: 30px 16px 100px;
	}

	.home-header .container.hero-header {
		row-gap: 30px;
		padding: 30px 16px 100px;
	}	
	.spaces-header .container.hero-header {
		padding: 30px 16px 100px;
	}

	.home-header .header-title {
		margin-bottom: 30px;
	}

	.hero-header .header-title {
		grid-column: 1 / 5;
		grid-row: 2 / 3;
		margin-top: 0px;
	}

	.hero-header .header-image {
		grid-row: 1 /span 1;
		grid-column: 2 / 5;
	}

	.image-stack-cont {
		position: relative;
		grid-column: 1 / 5;
		grid-row: 1 /span 1;
		position: relative;
		grid-template-columns: 1fr;
		padding: 0;
	}

	.image-stack {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 16px;
		grid-column: 1 / span 1;
		margin-right: 0px;
		aspect-ratio: auto;
	}
	.stack-image {
		width: 100%;
		position: relative;
	}
	
	.stack-image.first {
		grid-column: 3 / 5;
		grid-row: 1 / 3
	}
	
	.stack-image.second {
		grid-column: 2 / 4;
		grid-row: 2 / 4;
	}
}



/*--------------------------------------------------------------
- FORM MODAL
--------------------------------------------------------------*/
/* Modal background */

.modal-button {
	display: block;
	width: 100%;
	height: 60px;
	background-color: var(--white);
	border: 6px solid var(--blue);
	padding: 15px;
	margin-top: 8px;
	font-family: var(--interBold);
	font-size: var(--para);
	line-height: 1;
	color: var(--blue);
	text-transform: uppercase;
	text-decoration: none;	
	text-align: center;
	
}
	
.modal-button:hover{
	color: var(--cyan);
	background-color: var(--blue);
}

.modal {
	display: none; 
	position: fixed; 
	z-index: 1000; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	overflow: auto; 
	background-color: rgba(6,14,239,0.9);
	flex-direction: column;
    align-items: center;
    justify-content: center;
}
  
/* Modal content box */
.modal-content {
	position: relative;
	background-color: #fff;
	margin: 30px;
	padding: 10px 30px 30px 30px;
	border: 0px;
	width: 80%; 
	max-width: 410px;
}

/* Close button */
.close-cont  {
	position: absolute;
	right: 0;
	top: -60px;
}

img.close{
	cursor: pointer;
}


.modal-location {
	border-bottom: 1px solid var(--blue);
	padding: 20px 0;
	font-size: var(--small);
}

.modal-location p {
	font-size: var(--small);
}

/* TABLET */
@media only screen and (min-width: 681px) and (max-width: 1280px) {

	.modal-button {
		height: 50px;
		border: 5px solid var(--blue);
		padding: 9px 10px 10px 10px;
		margin-top: 0px;
	}

	.modal-content {
		margin: 20px;
		padding: 10px 20px 20px 20px;
		width: 80%; 
		max-width: 410px;
	}

	.close-cont  {
		right: 0;
		top: -50px;
	}
}

/* MOBILE */
@media only screen and (max-width: 680px) {

	.modal-button {
		height: 45px;
		border: 5px solid var(--blue);
		padding: 9px 10px 10px;
	}

	.modal-content {
		margin: 16px;
		padding: 8px 16px 16px 16px;
		width: calc(100% - 32px);
	}

	.close-cont  {
		top: -40px;
	}
	
}
/*--------------------------------------------------------------
- About Page - Team section
--------------------------------------------------------------*/

.container.team-content {
	row-gap: 60px;
}

.team-title {
	grid-column:  1 / 7;
	grid-row: 1 / 2;
}

.team-member {
	grid-column: auto / span 2;
	grid-row: auto / span 1;
}

.team-member-text {
	margin-top: 30px;
}

.team-member-text p {
	font-size: var(--med);
}

/* Tablet */
@media only screen and (min-width: 681px) and (max-width: 1280px) {

	.team-member-text {
		margin-top: 20px;
	}
	
	.team-member {
		grid-column: auto / span 3;
	}

}

/* Mobile */
@media only screen and (max-width: 680px) {
	.team-title {
		grid-column:  1 / 5;
	}

	.team-member {
		grid-column: auto / span 4;
	}

	.team-member-image { 
			width: calc(75% - 3px);
	}

}
/*--------------------------------------------------------------
- CONTACT Page
--------------------------------------------------------------*/
.contact-form {
	grid-column: 5 /span 2;
	background-color: white;
	height:fit-content;
	padding: 10px 30px 30px;
	min-height: 400px;
}

.contact-form input, .contact-form textarea {
	width:100%;
}

/*--------------------------------------------------------------
- Form
--------------------------------------------------------------*/
button,
input,
optgroup,
select,
textarea,
html input[type="button"],
input,
input[type],
input[type="reset"],
input[type="submit"],
button[disabled],
html input[disabled],
button::-moz-focus-inner,
input::-moz-focus-inner, 
input[type="checkbox"],
input[type="radio"], 
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button, 
input[type="search"], 
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{
    border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	resize: none;
	-webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none;
    border-radius: 0;  
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}


.wpcf7  {
	position: relative;
}

.wpcf7-submit, .contact-form input[type="submit"], .modal-content input[type="submit"] {
	display: block;
	width: 100%;
	height: 60px;
	background-color: var(--white);
	border: 6px solid var(--blue);
	padding: 15px;
	font-family: var(--interBold);
	font-size: var(--para);
	line-height: 1;
	color: var(--blue);
	text-transform: uppercase;
	text-decoration: none;	
	text-align: center;
}
	
.wpcf7-submit:hover, .contact-form input[type="submit"]:hover, .modal-content input[type="submit"]:hover {
	color: var(--cyan);
	background-color: var(--blue);
}
	
.wpcf7-text, .wpcf7-textarea {
	color: var(--blue);
	font-family: var(--inter);
	font-size: var(--small);
	border: none;
	line-height: 1em;
	padding: 20px 0px;
	border: 0;
	width: 100%;
}


.wpcf7-text::placeholder, .wpcf7-textarea::placeholder {
	color: var(--blue);
	font-family: var(--inter);
	font-size: var(--small);
	border: none;
	line-height: 1em;
	border: 0;
	width: 100%;
}

.form-field {
	border-bottom: 1px solid var(--blue)
}

.form-privacy {
	color: var(--blue);
	font-family: var(--inter);
	font-size: var(--small);
	padding:20px 0 60px;
	line-height: 1.2;
}

.wpcf7-text{
	height: 60px;
}

.wpcf7-textarea{
	height: 180px;
}

.wpcf7-spinner { 
	display: none;
}
.wpcf7-form.sent .form-field, .wpcf7-form.sent .form-privacy, .wpcf7-form.sent .form-button,
.wpcf7-form.resetting .form-field, .wpcf7-form.resetting .form-privacy, .wpcf7-form.resetting .form-button {
	display:none;
}

.wpcf7-form.submitting .form-field, .wpcf7-form.submitting .form-privacy, .wpcf7-form.submitting .form-button {
	opacity: 0.5;
}

.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-response-output {
	color: var(--blue);
	font-family: var(--inter);
	font-size: var(--small);
	line-height: 1.2;
	padding: none!important;
	border: none!important;
	margin: 0!important;
	width: 100%;
}

.wpcf7-form-control-wrap {
	display: block;
}
   
.wpcf7-not-valid-tip {
	color: var(--blue);
	font-size: 1em;
	font-weight: normal;
	display: block;
	position: absolute;
	top: 5px;
	right: 0px;
	text-align: right;
}

.wpcf7 form.invalid .wpcf7-response-output {
	display: none;
}

/* Tablet */
@media only screen and (min-width: 681px) and (max-width: 1280px) {

	.contact-form {
		padding: 10px 20px 20px 20px;
	}

	.wpcf7-text {
		height: 50px;
		padding: 16px 0px;
	}

	.wpcf7-text, .wpcf7-text::placeholder {
		padding: 16px 0px;
	}

	.wpcf7-submit, .contact-form input[type="submit"], .modal-content input[type="submit"] {
		height: 50px;
		border: 5px solid var(--blue);
		padding: 11px 10px 10px;
	
	}


}


@media only screen and (min-width: 681px) and (max-width: 860px) {

	.contact-header .header-title {
		grid-column: 1 / 7;
	}
	.contact-form {
		grid-column: 4 / 7;
	}
}

/* Mobile */
@media only screen and (max-width: 680px) {

	.contact-header   .hero-header .header-title {
		grid-row: 1 / 2;
	}

	.contact-content   .column-image {
		grid-column: 2 / 5;
		grid-row: 1 / 2;
	}

	.contact-content  .container.column {
		text-align: left;
	}

	.contact-form {
		grid-column: 1 / 5;
		grid-row: 2 / 3;
		padding: 8px 16px 16px 16px;
	}

	.wpcf7-form.sent .wpcf7-response-output,
	.wpcf7-response-output {
		font-size: var(--small);
	}

	.wpcf7-text, .wpcf7-text::placeholder, .wpcf7-textarea{
		padding: 16px 0px;
	}

	.wpcf7-text{
		height: 45px;
	}

	.wpcf7-textarea{
		height: 140px;
	}
	.form-privacy {
		padding: 16px 0 60px;
	}

	.wpcf7-submit, .contact-form input[type="submit"], .modal-content input[type="submit"] {
		height: 45px;
		border: 5px solid var(--blue);
		padding: 9px 10px 10px;

	}
		
}


/*--------------------------------------------------------------
- info-blocks
--------------------------------------------------------------*/

.info-block-cont {
	grid-column: 1 / 7;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 30px;
	padding: 0;
}

.square-cont {
	grid-column: auto / span 2;
}

.info-block {
	display: flex;
	flex-direction: column;
	height: auto;
	aspect-ratio: 1 / 1;
	min-width: 100px;
	box-sizing: border-box;
	justify-content: flex-start;
	align-items: flex-start;
	overflow-wrap: break-word;
	text-align: left;
	column-gap: 10px;
	row-gap: 40px;
	padding:30px;
	border-width: 30px;
	border-style: solid;
	border-color: var(--blue);
	

}

.info-block-title-icon {
	display: grid;
	grid-template-columns: 1fr 90px;
  	grid-template-rows: minmax(90px, auto);
	gap: 20px;
	width:100%;
}

.info-block-title {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}


.info-block-title h2, .info-block-title p  {
	font-family: var(--interBold);
	font-size: var(--large);
	line-height: 1.0835;
	transform: translateY(-8px);
}

.info-block-icon-cont {
	width:90px;
	height: 0;
	padding-bottom: calc(100% - 20px);
	position: relative;
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	border: 10px solid var(--blue);
}

.info-block-icon{
	width:  60%;
	height: 60%;
	max-width: 42px;
	max-height: 42px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);

}

.info-block-icon img {
	max-width: 100%;
	max-height: 100%;
}

.info-block-descritpion {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}

.info-block-descritpion p {
	font-size: var(--med);
}

.home .features-swiper-cont {
	display: none;
}

.spaces-swiper.swiper {opacity: 0;}
.spaces-swiper.swiper.swiper-initialized  {opacity: 1;}


/* Small screen and tablet*/
@media only screen and (min-width: 681px) and (max-width: 1280px) {

	.info-block-cont {	
		column-gap: 20px;
	}
	
	.info-block {
		border-width: 20px;
		row-gap: 20px;
		padding: 20px;
	}

	.info-block-title-icon {
		grid-template-columns: 1fr 70px;
		grid-template-rows: minmax(70px, auto);

	}

	.info-block-icon-cont {
		width: 100%;
		padding-bottom: calc(100% - 10px);
		border: 7px solid var(--blue);
	}

	.info-block-title h2 {
		line-height: 1.0835;
		transform: translateY(-3px);
	}

}

/* Tablet*/
@media only screen and (min-width: 681px) and (max-width: 960px) {

	.info-block-title-icon {
		grid-template-columns: 1fr minmax(auto, 50px);
		grid-template-rows: minmax(50px, auto);
	}

	.info-block-title h2 {
		font-size: var(--medLarge);
	}


	.info-block-icon-cont {
		border: 6px solid var(--blue);
	}
	
}


/* larger MOBILE */
@media only screen and (min-width: 480px) and (max-width: 680px) {

	.square-cont {
		aspect-ratio: 3 / 2;
		grid-column: auto / span 2;
	}
	

}

/* MOBILE */
@media only screen and (max-width: 680px) {


	.info-block-cont {
		grid-column: 2 / 8;
		row-gap: 16px;
	}

	.square-cont {
		grid-column: 1 / 7;
	}

	.info-block {
		border: 16px solid var(--blue);
		row-gap: 20px;
		padding: 16px;
	}

	.info-block-title-icon {
		grid-template-columns: 1fr 55px;
		grid-template-rows: minmax(55px, auto);
		width: 100%;
	}
	
	.info-block-icon-cont {
		width: 55px;
		height: 55px;
		border: 6px solid var(--blue);
	}

	.info-block-icon {
		width: 61%;
		height: 61%;
		max-width: 26px;
		max-height: 26px;
	}

	.info-block-title h2 {
		line-height: 1.0835;
		transform: translateY(-3px);
	}


	.home .features-swiper-cont {
		display: block;
	}
	.home .info-block-cont {
		display: none;
	}

	.home-features-swiper.swiper {
			overflow: visible!important;
		}

}
/*--------------------------------------------------------------
- review blocks 
--------------------------------------------------------------*/

.section .bg-image {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.section .bg-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 100%;
}

.section.home-reviews .container {
	position: relative;
}

.review-block {
	height: fit-content;
	border: 30px solid var(--cyan);
	padding:30px;
	background-color: var(--white);
}

.review-block-text {
	width:100%;
	height:100%;
}

.reviews-swiper-cont {
	grid-column: 1 / 7;
	grid-row: 2 / span 1;
}

/* Tablet */
@media only screen and (min-width: 681px) and (max-width: 1280px) {

	.review-block {
		border: 20px solid var(--cyan);
		padding:20px;	
	}
	
}

/* Mobile */
@media only screen and (max-width: 680px) {
	.reviews-swiper-cont {
		grid-column: 2 / 8;
		grid-row: 2 / span 1;
	}



	.review-block {
		border: 16px solid var(--cyan);
		padding:16px;
	}

	.reviews-swiper.swiper {
		overflow: visible;
	}
	
}



/*--------------------------------------------------------------
- Masonry reviews
--------------------------------------------------------------*/

.section.reviews-masonry-section {
padding: 85px 15px;
}
.reviews-masonry {
	width:100%;
	margin: 0 auto;
	padding: 0;
	max-width: 1310px;

}

.review-width, .review-block-cont {
	width:33.33%;
	padding: 15px;
}


/* Tablet */
@media only screen and (min-width: 681px) and (max-width: 1280px) {

	.section.reviews-masonry-section {
		padding: 60px 10px 60px;
	}
	
	.review-width, .review-block-cont {
		width:33.33;
		padding: 10px;
	}
	
}

/* Mobile */
@media only screen and (max-width: 680px) {
	
	.section.reviews-masonry-section {
		padding: 30px 8px 30px;
		display: grid;
		gap: 0px;
		grid-template-columns: repeat(8, 1fr);
	}

	.reviews-masonry {
		grid-column: 2 / 8;
	}

	.section.reviews-masonry-section {
		padding: 52.5px 8px 52.5px;
	}
	
	.review-width, .review-block-cont {
		width:100%;
		padding: 8px;
	}

}

/*--------------------------------------------------------------
- featured spaces
--------------------------------------------------------------*/

.featured-spaces-swiper-cont {
	grid-column: 1 / span 6;
	grid-row: 2 / span 1;
}

.space-block {
	background-color: white;
	box-sizing: border-box;
	height: min-content;
}

.space-block-text-cont {
	padding:30px;
	display: block;
}

.space-block-text {
	min-height: 140.8px;
	margin-bottom: 60px;
}

.space-block-text ul, .banner-contact ul {
	margin: 1.2em 0 1.2em 0
}

.space-block p + p, .space-block h2.med + p {
	margin-top: 1.2em;
}


/* Tablet */
@media only screen and (min-width: 681px) and (max-width: 1280px) {
	
	.space-block-text-cont {
		padding:20px;
	}
	
}

/* Mobile */
@media only screen and (max-width: 680px) {
	.space-block-text-cont {
		padding:16px;
	}

	.space-block-text {
		min-height: 140.8px;
		margin-bottom: 30px;
	  }
	
}



/*--------------------------------------------------------------
- Key features
--------------------------------------------------------------*/

.features-swiper-cont {
	grid-column: 1 / span 6
}

.info-block.features .info-block-title {
	grid-column: 1 / span 2;
}

.features-swiper-cont {
	grid-column: 1 / span 6;
}


/* Mobile */
@media only screen and (max-width: 680px) {


	.section.features .container {
		grid-template-columns: repeat(8, 1fr);
	}

	.section.features .container-title {
		grid-column: 1 / span 8;
	}

	.features-swiper-cont {
		grid-column: 2 / 8;
	}

	.features-swiper.swiper {
		overflow: visible;
	}

}


/*--------------------------------------------------------------
- FAQs
--------------------------------------------------------------*/

.container.faqs-cont {
	row-gap: 30px;
	padding: 100px 16px 100px;
}
.faq-block{
	grid-column: 1 / span 4;
	border: 30px solid var(--cyan);
	padding: 30px ;
}
.faq-question {
	cursor:pointer;
	display: grid;
	column-gap:15px;
	grid-template-columns: 1fr 60px;

}
.faq-question-text {
	padding:10px 0 0;
}

.faq-question-text h2 {
	font-size: var(--medLarge);
}

.faq-toggle {
	width:60px;
	height: 60px;
	border-width: 6px;
	border-style: solid;
	align-content: center;
	text-align: center;
	border-color: var(--blue);
}



.faq-toggle::before {
	content: '';
	background-image:url('../findsparespace/imgs/plus.svg');
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height:100%;
	display: inline-block;
	transform: rotate(0deg);
}

.active .faq-toggle::before  {
	transform: rotate(45deg);
}


.faq-answer-cont {
	display: none;
}

.faq-answer {
	padding-top: 15px;
	margin-top: 60px;
	border-top: 1px solid var(--blue);
}

.faq-answer p, .faq-answer ul {
	font-size: var(--med);
}

/* Tablet */
@media only screen and (min-width: 681px) and (max-width: 1280px) {
	.container.faqs-cont {
		row-gap: 20px;
	}
	.faq-block{
		padding: 20px ;
		border: 20px solid var(--cyan);
	}

	.faq-question-text h2 {
		font-size: var(--med);
	}

	.faq-answer {
		padding-top: 20px;
		margin-top: 30px;
		border-top: 1px solid var(--blue);
	}

	
	
}

/* Mobile */
@media only screen and (max-width: 680px) {
	
	.container.faqs-cont {
		row-gap: 16px;
	}
	.faq-block{
		padding: 16px ;
		border: 16px solid var(--cyan);
	}

	.faq-question {
		column-gap: 10px;
		grid-template-columns: 1fr 45px;
	}
	.faq-question-text {
		padding: 0;
		transform: translateY(-3px);
		max-height: 45px;
	}
	  
	.faq-question-text h2 {
		font-size: var(--med);
	}

	.faq-answer {
		padding-top: 16px;
		margin-top: 30px;
		border-top: 1px solid var(--blue);
	}

	.faq-toggle {
		width: 45px;
		height: 45px;
		border-width: 5px;
	}

	.faq-answer p, .faq-answer ul {
		font-size: var(--para);
	}
}



/*--------------------------------------------------------------
- Swiper
--------------------------------------------------------------*/

.swiper{
	width: 100%;
}

.swiper-slide{
	width:100%;
}

.swiper-controls{
  margin-top: 100px;
  grid-column: 3 / span 2;
  grid-row: 3 / span 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.button-prev {  
  width: min-content;
  justify-self: end;
}

.button-next {
  width: min-content;
}

.button-prev .swiper-arrow {  
  transform: rotate(180deg);
}

.button-next {
  width: min-content;
}

.swiper-arrow {
  width:60px;
  height: 60px;
  border-width: 6px;
  border-style: solid;
  align-content: center;
  text-align: center;
  Background-position: center;
  background-size: 60%;
  background-repeat: no-repeat;
  cursor:pointer;
}

.swiper-arrow.blue{
  border-color: var(--blue);
  background-image: url("../findsparespace/imgs/arrow-small-blue.svg");
}

.swiper-arrow.blue:hover{
  background-color: var(--blue);
  background-image: url("../findsparespace/imgs/arrow-small-cyan.svg");	
}

.swiper-arrow.white{
  border-color: var(--white);
  background-image: url("../findsparespace/imgs/arrow-small-white.svg");
}

.swiper-arrow.white:hover{
  background-color: var(--white);
  background-image: url("../findsparespace/imgs/arrow-small-blue.svg");
}



.swiper-pagination-bullets {
	position: relative!important;
	text-align: left!important;
	bottom: -28px!important;
	left: -5px!important;

}
.swiper-pagination-bullet {
	border-radius: 0!important;
	width:20px!important;
	height: 20px!important;
	border: var(--blue) solid 3px!important;
	background-color: transparent!important;
	opacity: 1!important;
	margin: 0 5px!important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--blue)!important;
}


/* Tablet */
@media only screen and (min-width: 681px) and (max-width: 1280px) {


.swiper-controls{
	margin-top: 60px;
	gap: 20px;
  }
  
  
  .swiper-arrow {
	width:50px;
	height: 50px;
	border-width: 5px;
	background-size: 20px;

  }

  

}

/* Mobile */
@media only screen and (max-width: 680px) {
	.swiper-controls{
		display: none;
	}

	.swiper.spaces-swiper {
		overflow: visible;
	} 

	.swiper-pagination-bullets {
		text-align: center!important;
		bottom: -28px!important;
		left: 0px!important;
		
	
	}
	.swiper-pagination-bullet {
		width: 16px !important;
		height: 16px !important;	
		margin: 0 5px !important;
	  }

}

/*--------------------------------------------------------------
- Post type Spaces
--------------------------------------------------------------*/

.space-info-cont {
	background-color: var(--white);
	padding: 30px;
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
	display: flex;
	row-gap: 48px;
	flex-direction: column;
	height: fit-content;
}

.space-info-cont h1 {
	font-size: var(--medLarge);
}
.info-title p + h1 {
	margin-top: 0;
}

.info-title p {
	margin-bottom: 1.2em;
}


.space-info-cont h2 {
	font-size: var(--para);
}

.space-info-cont p + h2{
	margin-top: 1.2em;
}
.info-title p  {
	font-size: var(--small);
}


.spaces-template-default .search-block-cont {
	grid-column: 5 / span 2;
	
}

.image-swiper-cont, .space-image-cont{
	grid-column:  4 / span 3;
	grid-row: 1 / 2;
}

.image-swiper-cont .image-cont {
	width:100%;
}


/*--------------------------------------------------------------
- Spaces search and results
--------------------------------------------------------------*/


/* search block */

.search-block-cont {
	grid-column: 1 / span 2;
	grid-row: 2 /span 1;
}

.search-block {
	width:100%;
	padding: 30px;
	background-color: var(--cyan);
	display: grid;
	gap: 10px;
	grid-template-rows: 60px 60px;
}

.search-block.cyan {
	background-color: var(--cyan);
}

.search-title {
	font-size: var(--med);
	font-family: var(--interBold);
	color: var(--blue);
	grid-row: 1 / 2;
}

.search-cont {
	font-size: var(--para);
	color: var(--lightBlue);
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 60px;
}

input.search-field {
	background-color: var(--white);
	color: var(--blue);
	height: 60px;
	padding: 15px;
	font-size: var(--small);
	line-height: 1;
	width: 100%;
	border: 0;
}


input.search-field::placeholder {
	color: var(--lightBlue);
	opacity: 1;
}

button.search-submit{
	border: 6px solid var(--blue);
	align-content: center;
	text-align: center;
	background-color: transparent;
	background-image: url("../findsparespace/imgs/arrow-small-blue.svg");
	Background-position: center;
	background-size: 60%;
	background-repeat: no-repeat;
	cursor:pointer;
}

button.search-submit:hover{
	border: 5px solid var(--blue);
	align-content: center;
	text-align: center;
	background-image: url("../findsparespace/imgs/arrow-small-cyan.svg");
	background-color: var(--blue);
}
button.search-submit:focus{
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Search form  */

.spaces-search-form-cont.container {
	padding: 100px 30px 0px;
}

.search-form-block {
	grid-column: auto / span 2;
	grid-row: 1 /span 1;
	width:100%;
	position: relative;
	padding: 30px;
	display: grid;
	gap: 10px;
	grid-template-rows: 60px 60px;
}

.search-form-block.location{
	background-color: var(--cyan);
}

.search-form-block.radius,
.search-form-block.type{
	background-color: var(--white);
}

/* Dropdown styling */
select.search-select {
    background-color: var(--white);
    color: var(--blue);
    height: 60px;
    padding: 15px;
    font-size: var(--small);
    line-height: 1.2;
    width: 100%;
    border: 2px solid var(--cyan);
    border-radius: 0px;
    appearance: none; /* Removes default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
	border-radius: 0;
}

/* Styling for the dropdown arrow */
.search-select-cont {
	position: relative;
}
.search-select-cont::after {
    content: '';
	width: 20px;
	height:10px;
	background-image: url("../findsparespace/imgs/dropdown.svg");
	background-repeat: no-repeat;
	background-size: cover;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Spaces results */
.section.spaces-search-results {
	overflow: unset;
}

.container.spaces-results-cont {
	row-gap: 30px;
	padding: 30px 30px 100px;
}

.spaces-results-count {
	grid-column: 1 / 7;
	grid-row: 1 / 1;
	font-family: var(--interBold);
	font-size: var(--med);
	color: var(--blue);
}

.spaces-results-map-cont {
	grid-column: 3 / 7;
	grid-row: 2 / 3;
	position: sticky;
	top: 30px;
  	left: 0;
  	align-self: start;
	aspect-ratio: 1/1;
}

.spaces-results-map {
	height:100%;
	width:100%;
}

.spaces-results-list{
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	display: grid;
	row-gap:30px;
}

.space-thumbnail {
	width: 100%;
}

.marker-text {
	font-size: var(--para);
	color: var(--blue);
	font-family: var(--interBold);
}



/* Small Screen and TABLET */
@media only screen and (min-width: 681px) and (max-width: 1280px) {

	

	.container.spaces-search-form-cont {
		padding: 60px 20px 0px;
	}
	
	.container.spaces-results-cont {
		row-gap: 20px;
		padding: 30px 20px 100px;
	}

	.search-form-block {
		padding: 20px;
		display: grid;
		gap: 10px;
		grid-template-rows: 50px 50px;
	}

	.space-info-cont {
		padding: 20px;
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		row-gap: 20px;
	}

	.spaces-template-default .search-block-cont {
		align-self: unset;
  		justify-self: unset;
	}

	.spaces-template-default .search-block {
		min-width: 100%;
	}


	.search-block {
		padding: 20px;
		grid-template-rows: 50px 50px;
	}

	.search-cont {
		grid-template-columns: 1fr 50px;
	}

	.search-field {
		height: 50px;
		padding: 10px;
	}

	.search-submit {
		border: 5px solid var(--blue);
		background-size: 20px 18px;
	}

	select.search-select {
		height: 50px;
		padding: 15px;
	}

	.spaces-results-list {
		row-gap: 20px;
	  }
	  input.search-field {
		background-color: var(--white);
		color: var(--blue);
		height: 50px;
		
	  }

}

/* Small screen and Tablet */
@media only screen and (min-width: 681px) and (max-width: 960px) {
	.search-block-cont {
		grid-column: 1 / span 3;
	}

	.spaces-results-list {
		grid-column: 1 / 4;
	}

	.spaces-results-map-cont {
		grid-column: 4 / 7;
	}
}



/* MOBILE */
@media only screen and (max-width: 680px) {
	.space-info-cont {
		padding: 16px;
		grid-column: 1 / 5;
		grid-row: 2 / 3;
		row-gap: 20px;
	}

	.image-swiper-cont, .space-image-cont{
		grid-column:  1 / 5;
		grid-row: 1 / 2;
	}


	.spaces-template-default .search-block-cont {
		grid-column: 1 / 5;
		align-self: unset;
  		justify-self: unset;
		
	}
	.spaces-template-default .search-block {
		min-width: 100%;
		max-width: 100%;
	  }

	.info-description {
		padding-bottom: 30px;
	}

	.info-description p {
		font-size: var(--med);
	}

	.space-info-cont h2 {
		font-size: var(--med);
	}

	.space-info-cont ul {
		font-size: var(--med);
	}

}


/* Mobile */
@media only screen and (max-width: 680px) {

	.search-block-cont {
		grid-column: 1 / 5;
		grid-row: 3 / 4;
	}
    
	.search-block {
		padding: 16px;
		gap: 10px;
		grid-template-rows: 45px 45px;

	}
	.search-cont {
		grid-template-columns: 1fr 45px;
	}

	input.search-field {
		background-color: var(--white);
		height: 45px;
		padding: 13px 16px;
		vertical-align: center;
		font-size: var(--small);
	}

	button.search-submit {
		border: 5px solid var(--blue);
		background-size: 16px 14px;
		background-repeat: no-repeat;
		cursor: pointer;
	}

	.search-form-block {
		padding: 16px;
		display: grid;
		gap: 10px;
		margin: 0px;
		grid-template-rows: 45px 45px;
	}

	.spaces-search-form-cont.container {
		padding: 30px 16px 0px;
		gap: 16px;
	}

	.search-form-block.location{
		grid-row: 1 / 2;
		grid-column: 1 / 5;
	}

	.search-form-block.radius{
		grid-row: 2 / 3;
		grid-column: 1 / 3;
	}

	.search-form-block.type{
		grid-row: 2 / 3;
		grid-column: 3 / 5;
	}

	.search-form-block.radius .search-title,	
	.search-form-block.type .search-title{
		font-size: var(--para);
	}

	select.search-select {
	  height: 45px;
	  padding: 10px;
	}

	.container.spaces-results-cont {
		gap:16px;
		row-gap: 60px;
		column-gap: 16px;
		padding: 16px 16px 100px;
	  }

	.spaces-results-count {
		display: none;
	}
	
	.spaces-results-map-cont {
		grid-column: 1 / 5;
		grid-row: 1 / 2;
		position: relative;
		top: 0px;
		  left: 0;
		  align-self: start;
		aspect-ratio: 1/1;
	}
	
	.spaces-results-list {
		grid-column: 1 / 5;
		grid-row: 2/3;
		display: grid;
		row-gap: 30px;
		grid-template-columns: repeat(8, 1fr)
	  }

	  .space-block {
		grid-column: 2 / 8;
	  }


}
/* COOKIE NOTICE */

#cookie-notice {
	font-family: var(--inter);
	font-weight: 400;
	font-size: var(--small);
	line-height: 1.2;
}

#cookie-notice .cookie-notice-container {
	max-width: 1350px !important;
	margin: 0 auto !important;
	text-align: left !important;
	padding: 15px 30px 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}  

.cn-close-icon {
	top: 0;
	margin-top: 16px;
	opacity: 1;
	padding: 0;
}

.cn-close-icon::after, .cn-close-icon::before {
	background-color: var(--blue);
}

#cookie-notice button {
	background-color: #fff!important;
	font-family: var(--inter)!important;
	font-weight: 400!important;
	font-size: var(--small)!important;
	line-height: 1.2!important;
	border-radius: 0!important;
	margin: 0!important;
}

.cn-text-container {
	margin: 0 0 0;
}



@media only screen and (max-width: 680px) {
	#cookie-notice .cookie-notice-container {
		padding: 16px 40px 16px 16px !important;
		display: flex;
		flex-direction: column;
		gap:16px;
	}

	.cn-close-icon::after, 
	.cn-close-icon::before {
		width: 1px;
	}


}