/*
Theme Name: qzr-theme
Theme URI: http://underscores.me/
Author: QZR Studio
Author URI: https://qzrstudio.com/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: qzrstudio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

qzrstudio is based on Underscores http://underscores.me/, (C) 2012-2016 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 http://necolas.github.io/normalize.css/
*/

/* GENERAL FIX */

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	text-underline-offset: 2px;
	-webkit-appearance: none;
	border-radius: 0;
}

/* DEFAULT */

#page {
	min-height: calc(100vh + 100px);
}

img {
	width: 100%;
	border: 0;
	display: block;
}

.left {
	float: left;
}
.right {
	float: right;
}
.center {
	position: relative;
	margin: 0 auto;
}
.clear {
	clear: both;
}

/* PADDING */

.col-padding {
	padding-left: 25px;
	padding-right: 25px;
}
.double-col-padding {
	padding-left: 50px;
	padding-right: 50px;
}
.row-padding {
	padding-top: 25px;
	padding-bottom: 25px;
}
.double-row-padding {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* 12 COLONNE */
.main-column {
	z-index: 1;
	clear: both;
	position: relative;
	margin: 0 auto;
	height: auto;
	max-width: 1200px;
	width: 90%;
}

.column-of-1 {
	width: 100%;
}
.column-of-2 {
	width: 50%;
}
.column-of-3 {
	width: 33.33%;
}
.double-column-of-3 {
	width: 66.66%;
}
.column-of-4 {
	width: 25%;
}
.column-of-5 {
	width: 20%;
}

.columns-1 {
	width: 8.33%;
}
.columns-2 {
	width: 16.66%;
}
.columns-3 {
	width: 25%;
}
.columns-4 {
	width: 33.33%;
}
.columns-5 {
	width: 41.66%;
}
.columns-6 {
	width: 50%;
}
.columns-7 {
	width: 58.33%;
}
.columns-8 {
	width: 66.66%;
}
.columns-9 {
	width: 75%;
}
.columns-10 {
	width: 83.33%;
}
.columns-11 {
	width: 91.66%;
}
.columns-12 {
	width: 100%;
}

.column-of-1,
.column-of-2,
.column-of-3,
.double-column-of-3,
.column-of-4,
.column-of-5,
.columns-1,
.columns-2,
.columns-3,
.columns-4,
.columns-5,
.columns-6,
.columns-7,
.columns-8,
.columns-9,
.columns-10,
.columns-11,
.columns-12 {
	position: relative;
}

/* TYPOGRAPHY */

body,
html {
	min-height: -webkit-fill-available;
	height: 100%;
	font-size: 20px;
	line-height: 1.4;
	font-family: droid-sans, sans-serif;
}

.regular {
	font-weight: normal;
}

.bold {
	font-weight: bold;
}

.uppercase {
	text-transform: uppercase;
}

p {
	display: inline-block;
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
.etna {
	margin-bottom: 1rem;
	font-family: etna, sans-serif;
	line-height: 1.15;
}

.is-style-title-uppercase {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 3rem;
	margin: 0;
}

.is-style-title-tiny {
	font-weight: normal;
	font-size: 1.7rem;
}
.is-style-sticky {
	font-family: etna, sans-serif;
	font-size: 1.2rem;
	margin-bottom: 1rem;
}
.is-style-title {
	font-size: 2.4rem;
	line-height: 1.1;
	font-weight: normal;
}
.is-style-tiny {
	font-size: 0.7rem;
}

.droid {
	font-family: droid-sans, sans-serif;
	line-height: 1.4;
}

.droid.l {
	font-size: 1.2rem;
}

.droid.s {
	font-size: 0.9rem;
}
.droid.xs {
	font-size: 0.8rem;
}
.droid.xxs {
	font-size: 0.7rem;
}

.align-center {
	text-align: center;
}
.align-right {
	text-align: right;
}

.is-style-label {
	font-family: etna, sans-serif;
	font-weight: bold;
	margin-top: 1rem;
}

.is-style-label + p {
	display: inline-block;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.is-style-label + p:last-of-type {
	border: 0;
}

/* MENU */

.wpml {
	justify-content: flex-end;
}

ul.wpml li a {
	text-transform: uppercase;
	margin-left: 6px;
}
ul.wpml li::after {
	content: '/';
	color: #797261;
	transition: 0.3s color;
	margin-left: 6px;
}
.open ul.wpml li::after {
	color: #fff9f2;
}

ul.wpml li:last-child::after {
	display: none;
}

.site-content {
	padding-top: 160px;
}

header {
	padding: 40px 0;
	position: fixed;
    z-index: 3;
    width: 100%;
	height: auto;
	transition: 0.3s all;
}

header.open {
	box-shadow: 0px 0px 32px 0 rgb(0 0 0 / 30%);
	padding: 8px 0;
	background: #fff9f2;
}

header .logo {
    display: inline-block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	transition: 0.3s all;
}

header .logo svg {
	height: 4rem;
	transition: 0.3s all;
	fill: #797261;
}
header.open .logo svg {
	height: 2rem;
	fill: #797261;
}

header .wp-block-columns {
	align-items: center;
}

header ul {
	display: flex;
	justify-content: space-between;
}

header ul li {
	list-style: none;
	font-size: 0.7rem;
}

header ul li a {
	border-bottom: 1px solid;
	transition: 0.3s all;
	color: #797261;
	border-color: transparent;
	text-decoration: none;
}

a:hover {
	color: rgba(0,0,0,0.6);
}
a {
	transition: 0.3s all;
	color: rgba(0,0,0,0.3);
}

/* COLORS */

.yellow-light-bkg {
	background-color: #fff9f2;
}
.brown-bkg {
	background-color: #797261;
}
.green-bkg {
	background-color: #afc791;
}
.green-dark-bkg {
	background-color: #223b26;
}

.white-txt textarea,
.white-txt input,
.white-txt ::placeholder,
.white-txt {
	color: #fff;
}
.yellow-light-txt textarea,
.yellow-light-txt input,
.yellow-light-txt ::placeholder,
.yellow-light-txt {
	color: #fff9f2;
}

.brown-txt input,
.brown-txt textarea,
.brown-txt ::placeholder,
.brown-txt a,
.brown-txt {
	color: #797261;
}

.green-txt input,
.green-txt textarea,
.green-txt ::placeholder,
.green-txt a,
.green-txt {
	color: #afc791;
}
.green-dark-txt input,
.green-dark-txt textarea,
.green-dark-txt ::placeholder,
.green-dark-txt a,
.green-dark-txt {
	color: #223b26;
}

/* MENU RESPONSIVE */

#menu-btn {
	position: absolute;
	top: -10px;
	right: -15px;
	transition: 0.3s all;
	z-index: 10;
	transform: translate(-50%, 0);
	cursor: pointer;
	display: none;
}
.open #menu-btn {
	top:0;
}
.bar-icon-wrapper {
	padding: 5px;
}
.bar-icon-wrapper.active {
	z-index: 99;
}

.bar-icon-wrapper.active .bar-icon {
	background-color: #000;
}

.bar-icon {
	height: 2px;
	width: 25px;
	background: #fff;
	display: block;
	opacity: 1;
	margin-top: 5px;
	transition: all 0.15s linear;
	transform-origin: 50% 50%;
}

.active .bar-icon {
	width: 20px;
}
.active .bar-icon:nth-child(1) {
	transform: rotate(45deg) translate3d(5px, 5px, 0);
}

.active .bar-icon:nth-child(2) {
	opacity: 0;
}

.active .bar-icon:nth-child(3) {
	transform: rotate(-45deg) translate3d(5px, -5px, 0);
}

/* ASSETS */

.current {
	border-color: unset;
}

.logo {
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.half-col-padding {
	padding: 20px 0;
}

.col-padding {
	padding: 40px 0;
}
.double-col-padding {
	padding: 80px 0;
}

*[data-rounded="1"] {
	border-radius: 10px;
}

/* CORE BLOCKS */

*[data-main-title="1"] {
	max-width: 400px;
	text-align: center;
	margin: auto;
	margin-bottom: 2rem;
}

.wp-block-image[data-fullscreen="1"] img {
	max-width: 90vw;
	max-height: calc(100vh - 200px);
	height: auto;
	position: relative;
	z-index: 1;
	margin: auto;
	object-fit: cover;
	object-position: bottom;
}

/* QZR DYNAMIC BLOCKS */

.qzr-dynamic-blocks[data-type="panel"] {
	position: relative;
}

div[data-margin-top-negative="1"] {
    margin-top: -160px;
    padding-top: 320px;
}

div[data-card-mode="1"] {
	margin-top: -240px;
    border-radius: 10px;
}

div[data-more-padding-bottom="1"] {
	padding-bottom: 320px;
}

.qzr-dynamic-blocks[data-type="counters"] {
	position: relative;
	display:flex;
	gap: 1rem;
	margin-bottom: 3rem;
	margin-top: 2rem;
}

.counter {
	display: inline-block;
	text-align: center;
	width: 100%;
    border-radius: 10px;
    background: #F7ECDF;
}

.counter .number{
	border-bottom: 1px solid rgba(0,0,0,0.1);
	font-size: 3rem;
	font-weight: normal;
	font-family: etna, sans-serif;
    margin-top: 25px;
}

.counter div:last-child {
	margin: 12.5px 0;
}

.qzr-dynamic-blocks[data-type="carousel"] {
	position: relative;
}

.qzr-dynamic-blocks[data-type="carousel"] .slide {
	margin: auto;
    height: 600px;
}
.qzr-dynamic-blocks[data-type="carousel"] .image {
	max-width: 100%;
	object-fit: cover;
	margin: auto;
	height: 600px;
    width: auto;
}

.qzr-dynamic-blocks[data-template="multi"] {
	width: 100%;
}

.qzr-dynamic-blocks[data-type="contact"] {
    position: absolute;
    bottom: 0;
    top: 0;
    right: -68.33%;
    left: 108.33%;
}

.qzr-dynamic-blocks[data-type="contact"] .qzr-dynamic-blocks[data-type="button"] {
	width: 100%;
	margin-top: 1rem;
}

.qzr-dynamic-blocks[data-type="contact"] .sticky {
	top: 140px;
    background: #fff;
    z-index: 999;
    padding: 25px;
    position: sticky;
    box-shadow: 0 0 20px -7px rgb(0 0 0 / 30%);
}

.qzr-dynamic-blocks[data-type="button"] {
	padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
	text-align: center;
    display: inline-block;
	text-transform: uppercase;
	transition: 0.3s filter;
	color: #fff;
}

.qzr-dynamic-blocks[data-type="button"]:hover {
	filter: brightness(1.2);
}

.qzr-dynamic-blocks[data-type="maps"] a:hover .image {
	opacity: 0.6;
}
.qzr-dynamic-blocks[data-type="maps"] {
	position: relative;
}

#map-canvas {
	height: 600px;
	margin-bottom: 40px;
}

.card {
	text-decoration: none;
	display: inline-block;
	width: 100%;
	min-height: 250px;
	overflow: hidden;
    border-radius: 10px;
	text-align: center;
}

.card .title {
	font-size: 1.7rem;
	font-weight: normal;
	width: 90%;
	margin: auto;
	margin-bottom: 1rem;
	font-family: etna, sans-serif;
}
.card .indications {
	font-size: 0.7rem;
	opacity: 0.6;
	max-width: 90%;
    margin: 1rem auto;
	margin-bottom: 0.5rem;
}

.card .image {
	padding-top: 75%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.qzr-dynamic-blocks[data-type="form"] {
	position: relative;
	margin-top: 2.2rem;
	height: 100%;
}

form {
	height: 100%;
	position: relative;
}

input, textarea {
	outline: 0 !important;
	width: 100%;
    display: inline-block;
    padding: 10px;
	padding-left: 0;
    margin-bottom: 6px;
    font-family: droid-sans, sans-serif;
    background: none;
    border: 0;
    border-bottom: 1px solid #fff9f2;
}

textarea {
	min-height: 200px;
}

input[type="button"]:hover,
input[type="submit"]:hover {
	background-color: rgba(0,0,0,0.5);
	cursor: pointer;
}
input[type="button"],
input[type="submit"] {
	position: relative;
	transform: translateX(-50%);
	font-family: droid-sans, sans-serif;
	font-size: 0.7rem;
	text-transform: uppercase;
	left: 50%;
	max-width: 250px;
	border: 0;
	transition: background 0.3s;
	background-color: rgba(0,0,0,0.3);
	padding: 10px 25px;
    border-radius: 25px;
}

::placeholder {
	opacity: 0.6;
}

.contact-reply {
	position: absolute;
    top: calc(50% - 2.2rem);
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    font-size: 1.7rem;
    font-family: 'etna';
    text-align: center;
    line-height: 1;
}

/* FOOTER */

footer {
	text-align: center;
	padding: 80px 0;
	background-color: #151311;
	color: #fff;
	font-size: 12px;
}

footer .logo svg {
	height: 2rem;
    fill: #fff9f2;
    width: 10rem;
}

/* FIX */

.wp-block-columns {
	margin: 0;
}

.wp-block-image {
	margin: 0;
}

img {
	height: auto;
}

figcaption {
	z-index: 1;
    position: relative;
    text-align: center;
	margin: 0 !important;
    font-size: 13px;
    padding: 10px 0;
    color: #fff9f2;
}

.owl-dots {
	display: flex;
    justify-content: center;
    padding: 15px;
    gap: 10px;
}

.owl-dots .owl-dot.active {
	background-color: #fff;
}
.owl-dots .owl-dot {
	height: 8px;
    width: 8px;
    border: 1px solid #fff !important;
    border-radius: 100%;
	margin: 0 6px;
}

/* SPACING BETWEEN PANELS */

.qzr-dynamic-blocks.yellow-light-bkg + 
.qzr-dynamic-blocks.yellow-light-bkg {
	padding-top: 0;
	margin-top: -80px;
}

.yellow-light-bkg .owl-dots .owl-dot {
    border: 1px solid #223b26 !important;
}

.yellow-light-bkg .owl-dots .owl-dot.active {
	background-color: #223b26;
}