/*=========================================
    Section hero
=========================================*/
.section-hero {
	position: relative;
	width: 100%;
	/* padding: 50px 0 425px; */
	height: 80vh;
	height: calc(100vh - 85px);
	padding-bottom: 80px;
	background: #fff;
	overflow: hidden;
	color: var(--text-color);
}

.hero-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom center;
}

.hero-overlay {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: rgba(255, 255, 255, 0.6); */
	background: rgba(0, 0, 0, 0.5);
}

.section-hero .container {
	position: relative;
}

.section-hero .container,
.section-hero .row {
	height: 100%;
}

.label-hero {
	font-size: 10px;
	letter-spacing: 5px;
	text-transform: uppercase;
	margin-bottom: 25px;
}

/* .section-hero h1 {
	font-size: 42px;
	line-height: 1.1;
	margin-bottom: 22px;
	color: var(--white);
} */
.title-home {
	font-size: 20px;
	text-transform: uppercase;
	color: var(--white);
	line-height: 1.5;
	letter-spacing: 1em;
	text-align: center;
	margin-right: -1em;
}

.section-hero .subtitle-hero {
	color: var(--light-grey);
	margin-bottom: 35px;
	font-size: var(--font-size-mobile);
}

/* .section-hero p.light {
	color: #e9e9e9;
} */

.no-touchevents .link-hero {
	display: none;
}

@media (min-width: 768px) {
	.section-hero {
		height: 50vh;
		min-height: 500px;
		padding: 0;
	}

	.label-hero {
		font-size: 12px;
		letter-spacing: 6px;
		margin-bottom: 40px;
	}

	.title-home {
		font-size: 24px;
	}

	/* .section-hero h1 {
		font-size: 48px;
		margin-bottom: 32px;
		max-width: 70%;
	} */

	.section-hero .subtitle-hero {
		max-width: 55%;
		margin-bottom: 55px;
	}

	.link-hero {
		display: none;
	}
}

@media (min-width: 992px) {
	.section-hero {
		height: 85vh;
		height: calc(100vh - 210px);
	}

	.hero-bg-image {
		object-position: top center;
	}

	.label-hero {
		margin-bottom: 50px;
	}

	.title-home {
		font-size: 30px;
	}

	/* .section-hero h1 {
		font-size: 60px;
		margin-bottom: 45px;
		max-width: 675px;
	} */

	.section-hero .subtitle-hero {
		max-width: 45%;
		font-size: var(--font-size-desktop);
	}
}

@media (min-width: 1200px) {
	.section-hero {
		height: 90vh;
		height: calc(100vh - 220px);
	}
}

/*=========================================
    Section bar
=========================================*/
.home-hero-bar {
	margin-bottom: 50px;
}

.home-hero-bar a {
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--new-joelle-color);
	text-decoration: none;
	padding-left: 30px;
	padding-right: 30px;
}

.home-hero-bar .title {
	font-size: 11px;
	line-height: 1.1;
	color: var(--white);
	font-weight: 300;
	text-align: center;
}

.home-hero-bar .title span {
	font-weight: 500;
}

/*.home-hero-bar a {
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--new-joelle-color);
	text-decoration: none;
	padding-left: 30px;
	padding-right: 30px;
}

.home-hero-bar .home-hero-bar-title {
	font-size: 14px;
	color: var(--white);
	text-align: center;
}

.no-touchevents .home-hero-bar a:hover .home-hero-bar-title {
	text-decoration: underline;
}*/

@media (min-width: 992px) {
	.home-hero-bar {
		margin-bottom: 100px;
	}

	.home-hero-bar .title {
		font-size: 14px;
		line-height: 1.2;
	}
}


/*=========================================
    Section recent posts
=========================================*/
.section-featured-posts {
	margin-top: 50px;
	margin-bottom: 50px;
}

@media (min-width: 992px) {
	.section-featured-posts {
		margin-top: 100px;
		margin-bottom: 100px;
	}
}

@media (min-width: 1200px) {
	.section-featured-posts {
		margin-bottom: 170px;
	}
}

.featured-posts-container {
	max-width: 1310px;
	margin-left: auto;
	margin-right: auto;
}


@media (min-width: 992px) {
	.featured-posts-container {
		padding-left: 25px;
		padding-right: 25px;
	}
}

/* @media (min-width: 1200px) {
	.featured-posts-container {
		padding-left: 45px;
		padding-right: 45px;
	}
} */

.section-featured-posts .title-caps {
	margin-bottom: 30px;
}

@media (min-width: 992px) {
	.section-featured-posts .title-caps {
		margin-bottom: 50px;
	}
}

.homeSwiperBox.swiper-container-horizontal>.swiper-pagination-bullets {
	bottom: 0;
}

.homeSwiperBox .swiper-wrapper {
	padding-bottom: 20px;
}

@media (min-width: 992px) {
	.homeSwiperBox .swiper-wrapper {
		padding-bottom: 0;
	}
}

.homeSwiperBox .swiper-slide {
	/* max-width: 440px; */
	height: auto;
}

.box-home .box-home-container {
	margin-left: 30px;
	margin-right: 30px;
	background-color: #F4F4F4;
	height: 100%;
}

@media (min-width: 992px) {
	.box-home .box-home-container {
		margin-left: 5px;
		margin-right: 5px;
	}
}

.box-home .box-home-image {
	position: relative;
	overflow: hidden;
}

.no-touchevents .box-home:hover .box-home-image img {
	transform: scale(1.1);
}

.box-home .box-home-image::before {
	content: "";
	display: block;
	padding-bottom: 71%;
}

.box-home .box-home-image img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease-out;
}

.box-home .box-home-content {
	position: relative;

}

/* .box-home .box-home-content::before {
	content: "";
	display: block;
	padding-bottom: 94%;
	/*@include for-tablet-portrait-up {
                padding-bottom: 350px;
            }
	;
} */

.box-home .box-home-content .box-home-inner {
	/* position: absolute;
	top: 0;
	left: 0; */
	width: 100%;
	height: 100%;
	padding: 24px 20px;
}

.box-home-cat {
	font-size: 12px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 6px;
	color: var(--text-color);
	margin-bottom: 20px;
}

.box-home .box-home-content .box-home-inner h3 {
	font-size: 26px;
	line-height: 1.1;
	color: var(--text-color);
	margin-bottom: 25px;
	font-weight: 500;
}

.box-home .box-home-content .box-home-inner p:not(.box-home-cat) {
	font-size: 16px;
	max-height: 100px;
	color: var(--text-color);
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 15px;
	display: none;
}

@media (min-width: 992px) {
	.box-home .box-home-content .box-home-inner p {
		display: block;
	}
}

.box-home .box-home-content .box-home-inner .box-home-label {
	/* text-decoration: underline; */
	position: relative;
	color: var(--new-joelle-color);
	font-size: 16px;
}


.box-home .box-home-content .box-home-inner .box-home-label::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--new-joelle-color);
	-webkit-transition: width 250ms ease 0s;
	transition: width 250ms ease 0s;
}

.no-touchevents .box-home:hover .box-home-content .box-home-inner .box-home-label::before {
	width: 100%;
}

.read-all-blogs {
	margin-top: 50px;
	text-align: center;
	font-size: 16px;
}

.read-all-blogs a {
	position: relative;
	color: var(--new-joelle-color);
	/* text-decoration: underline; */
}

.read-all-blogs a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--new-joelle-color);
	-webkit-transition: width 250ms ease 0s;
	transition: width 250ms ease 0s;
}

.no-touchevents .read-all-blogs a:hover::before {
	width: 100%;
}

/*=========================================
    Section services
=========================================*/

.section-services {
	position: relative;
	margin-top: 50px;
	margin-bottom: 50px;
	/* padding-top: 50px; */
}

/* .section-services::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 75%;
	background-color: #f4f4f4;
	z-index: -1;
} */

.section-services .container {
	padding-left: 0;
	padding-right: 0;
	/* max-width: 1600px; */
}

.section-services .title-caps {
	margin-bottom: 30px;
}

.section-services .col-12 {
	margin-bottom: 15px;
}

.services-wrapper {
	position: relative;
	width: 100%;
	background: #ECEBE9;
	overflow: hidden;
	color: #fff;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.services-wrapper::before {
	content: '';
	display: block;
	padding-bottom: 110%;
}

.services-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 50px 30px 30px;
	text-align: center;
}


.services-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}

/* .services-content {
	position: relative;
	padding: 30px;
} */

.services-logo {
	width: auto;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

.services-logo.degrade {
	height: 35px;
	margin-bottom: 37px;
	margin-top: 8px;
}

/* .services-label {
	color: #fff;
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 30px;
} */

.services-title {
	font-size: 26px;
	line-height: 1.2;
	color: var(--text-color);
	margin-bottom: 30px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.services-text {
	color: var(--text-color);
	font-size: 16px;
	margin-bottom: 30px;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

.services-link {
	position: relative;
	color: var(--new-joelle-color);
	/* text-decoration: underline; */
	font-size: 14px;
	font-weight: 300;
}

.services-link::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--new-joelle-color);
	-webkit-transition: width 250ms ease 0s;
	transition: width 250ms ease 0s;
}

.no-touchevents .services-link:hover::before {
	width: 100%;
}


@media (min-width: 768px) {



	/* .section-services {
		padding-top: 70px;
	} */


	.section-services .col-12 {
		margin-bottom: 40px;
	}

	/* Azzera il margine sulle ultime due card della griglia 2x2.
	   Prima erano :nth-child(3) e :nth-child(4): con la fascia Superlight in
	   testa alla row gli indici slittano, quindi contiamo dal fondo e solo
	   sulle colonne .col-md-6 (la fascia e' .col-12 senza .col-md-6). */
	.section-services .col-md-6:nth-last-child(-n+2) {
		margin-bottom: 0;
	}

	.services-content {
		padding-top: 30px;
	}

	.services-image {
		object-fit: cover;
	}
}

@media (min-width: 992px) {
	.section-services .container {
		padding-left: 30px;
		padding-right: 30px;
	}

	.services-wrapper::before {
		padding-bottom: 82%;
	}

	.section-services {
		margin-top: 100px;
		margin-bottom: 100px;
		/* padding-top: 100px; */
	}

	.section-services .col-12 {
		margin-bottom: 10px;
	}

	/* .section-services .title-caps {
		margin-bottom: 50px;
	} */

	.services-content {
		padding: 40px 60px 60px;
	}

	.services-label {
		font-size: 12px;
		letter-spacing: 6px;
		margin-bottom: 40px;
	}

	.services-title {
		font-size: 30px;
		/* margin-bottom: 40px; */
	}

	.services-text {
		margin-bottom: 45px;
	}
}

@media (min-width: 1200px) {

	/* .section-services .container {
		padding-left: 50px;
		padding-right: 50px;
	} */

	.section-services .title-caps {
		margin-bottom: 50px;
	}

	.services-content {
		padding: 60px 90px 90px;
	}

	.services-label {
		margin-bottom: 50px;
	}

	.services-title {
		font-size: 34px;
		margin-bottom: 40px;
	}

	.services-text {
		margin-bottom: 65px;
	}
}


/*=========================================
    Fascia tecnica in evidenza (Superlight)
    Quinto blocco a tutta larghezza, in testa alla griglia 2x2.
    Mobile/tablet: immagine sopra, testo sotto (impilati).
    Da 992px: fascia orizzontale, testo a sinistra e immagine a destra.
=========================================*/

/* Nessun margin-bottom dedicato: la fascia e' una .col-12 come le altre colonne
   della griglia, quindi eredita da `.section-services .col-12` lo stesso stacco
   a ogni breakpoint (15px / 40px da 768 / 10px da 992, uguale al gutter). */

/* La card standard ricava l'altezza dal padding-bottom di ::before.
   La fascia no: media e contenuto stanno nel flusso, quindi l'hack va spento. */
.services-wrapper.services-wrapper-featured::before {
	display: none;
}

.services-wrapper-featured {
	/* #FAFAFA e' il fondo della foto Superlight: evita lo stacco visibile sul
	   bordo dell'immagine (le altre card usano #ECEBE9). */
	background-color: #FAFAFA;
}

/* l'<a> avvolge due blocchi: senza questo resterebbe inline */
.services-featured-link {
	display: block;
}

.services-featured-media {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.services-featured-media::before {
	content: '';
	display: block;
	padding-bottom: 82%;
}

.services-featured-media picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* PROVVISORIO — superlight-hero.jpg e' un ritratto verticale (1295x1424):
   in una fascia orizzontale il soggetto risulterebbe minuscolo, quindi lo
   ingrandiamo oltre il "cover" e lo ancoriamo in alto sul viso.
   Da eliminare quando arriva il crop dedicato (vedi TODO ASSET in home.php). */
.services-image.services-image-featured {
	width: 150%;
	left: -25%;
	height: 100%;
	object-fit: cover;
	object-position: center 10%;
}

.services-content.services-content-featured {
	position: relative;
	top: auto;
	left: auto;
	height: auto;
	padding: 32px 25px 38px;
}

.services-badge {
	display: inline-block;
	margin-bottom: 20px;
	padding: 7px 13px 6px;
	background-color: var(--new-joelle-color);
	color: #fff;
	font-family: "Gotham";
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 3px;
	line-height: 1;
	text-transform: uppercase;
}

.services-wordmark {
	display: block;
	margin-bottom: 18px;
	color: var(--title-color);
	font-family: "Gotham";
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 7px;
	line-height: 1;
	text-transform: uppercase;
	/* il letter-spacing aggiunge spazio anche dopo l'ultima lettera:
	   lo compensiamo per tenere il testo otticamente centrato */
	text-indent: 7px;
}

.services-content-featured .services-title {
	margin-bottom: 22px;
	/* evita l'ultima riga con una parola orfana; dove non supportato
	   (browser vecchi) l'a capo resta quello normale */
	text-wrap: balance;
}

@media (min-width: 768px) {
	.services-featured-media::before {
		padding-bottom: 48%;
	}

	.services-image.services-image-featured {
		width: 135%;
		left: -17.5%;
		object-position: center 2%;
	}

	.services-content.services-content-featured {
		padding: 40px 30px 45px;
	}
}

@media (min-width: 992px) {
	.services-featured-link {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		min-height: 430px;
	}

	/* testo a sinistra (order 1), immagine a destra (order 2) */
	.services-featured-media {
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
		-ms-flex: 0 0 48%;
		flex: 0 0 48%;
		max-width: 48%;
	}

	/* qui l'altezza la detta il flex, non piu' il rapporto d'aspetto */
	.services-featured-media::before {
		display: none;
	}

	.services-image.services-image-featured {
		width: 128%;
		left: -14%;
		object-position: center 13%;
		/* sfuma il bordo sinistro della foto nel fondo della fascia */
		-webkit-mask-image: -webkit-linear-gradient(left, transparent 0%, #000 20%);
		mask-image: linear-gradient(to right, transparent 0%, #000 20%);
	}

	.services-content.services-content-featured {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		width: auto;
		padding: 60px 40px 60px 60px;
		text-align: left;
	}

	.services-badge {
		margin-bottom: 26px;
	}

	.services-wordmark {
		font-size: 32px;
		letter-spacing: 9px;
		text-indent: 0;
		margin-bottom: 24px;
	}

	.services-content-featured .services-title {
		font-size: 32px;
		margin-bottom: 28px;
		margin-left: 0;
		margin-right: 0;
		max-width: 440px;
	}
}

@media (min-width: 1200px) {
	.services-featured-link {
		min-height: 490px;
	}

	.services-content.services-content-featured {
		padding: 70px 50px 70px 90px;
	}

	.services-wordmark {
		font-size: 38px;
		letter-spacing: 11px;
	}

	.services-content-featured .services-title {
		font-size: 36px;
		max-width: 480px;
	}
}


/*=========================================
    Section Banner PRO
=========================================*/

.section-pro {
	margin-top: 50px;
	margin-bottom: 50px;
}

.section-pro-image {
	margin: 0 0 15px;
}

.section-pro-image img {
	width: 100%;
	height: auto;
	display: block;
}

.section-pro-text {
	font-size: 26px;
	line-height: 1.25;
	color: var(--title-color);
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.section-pro {
		position: relative;
		padding-bottom: 30px;
	}

	.section-pro::before {
		content: '';
		position: absolute;
		top: 40px;
		left: 0;
		width: 100%;
		bottom: 0;
		background-color: var(--light-grey);
	}

	.section-pro-image {
		position: relative;
		height: 100%;
		margin-bottom: 0;
	}


	.section-pro-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.section-pro-content {
		padding-top: 70px;
		padding-left: 30px;
		padding-bottom: 30px;
	}
}

@media (min-width: 992px) {
	.section-pro {
		margin-top: 80px;
		margin-bottom: 80px;
		padding-bottom: 60px;
	}

	.section-pro::before {
		top: 50px;
	}

	.section-pro-content {
		padding-top: 90px;
		padding-left: 40px;
		padding-bottom: 40px;
	}

	.section-pro-text {
		font-size: 32px;
	}
}

@media (min-width: 1200px) {
	.section-pro {
		margin-top: 120px;
		margin-bottom: 120px;
		/* padding-bottom: 60px; */
	}

	.section-pro::before {
		top: 70px;
	}

	.section-pro-content {
		padding-top: 120px;
		padding-left: 50px;
		padding-bottom: 50px;
	}

	.section-pro-text {
		font-size: 40px;
		margin-bottom: 40px;
	}
}

/* @media (min-width: 1600px) {
	.section-pro {
		margin-top: 200px;
	}
} */

/*=========================================
    Section inspired
=========================================*/
.section-inspired {
	/* position: relative; */
	margin-top: 50px;
	margin-bottom: 50px;

}

.container-inspired-content {
	max-width: 540px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.bg-inspired-mobile {
	margin-bottom: 30px;
	width: 100%;
	height: auto;
	display: block;
}

.bg-inspired-left,
.bg-inspired-right {
	display: none;
}

.content-inspired {
	text-align: center;
	padding-left: 30px;
	padding-right: 30px;
	margin-top: 55px;
}

.label-inspired {
	font-size: 10px;
	letter-spacing: 6px;
	text-transform: uppercase;
	margin-bottom: 35px;
}

.title-inspired {
	font-size: 26px;
	line-height: 1.2;
	color: var(--title-color);
	margin-bottom: 30px;
}

.title-inspired span {
	font-weight: 500;
}

.text-inspired {
	margin-bottom: 35px;
	color: var(--text-grey);
}


@media (min-width: 992px) {

	.section-inspired {
		position: relative;
		margin-top: 80px;
		margin-bottom: 100px;
		padding-top: 140px;
		padding-bottom: 140px;
	}

	.bg-inspired-mobile {
		display: none;
	}

	.bg-inspired-desktop {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top right;
	}

	.container-inspired {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.container-inspired-content {
		margin-left: 0;
		margin-right: 0;
	}

	.bg-inspired-left,
	.bg-inspired-right {
		position: relative;
		/* position: absolute;
		top: 0;
		bottom: 0; */
		flex: 0 0 calc(50% - 250px);
		max-width: calc(50% - 250px);
		/* object-fit: contain; */
		display: block;
		/* height: auto; */
	}

	.bg-inspired-left img,
	.bg-inspired-right img {
		display: block;
		position: absolute;
		height: auto;
		filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));

	}

	/* .bg-inspired-left,
	.bg-inspired-right {
		background-color: red;
	} */

	.bg-inspired-left::before,
	.bg-inspired-right::before {
		content: '';
		display: block;
		padding-bottom: 170%;
	}

	.bg-inspired-left img:first-child {
		top: 0;
		left: 0;
		width: 60%;

	}

	.bg-inspired-left img:nth-child(2) {
		top: 5%;
		right: 0;
		width: 50%;
		z-index: 2;

	}

	.bg-inspired-left img:nth-child(3) {
		bottom: 15%;
		right: 10%;
		width: 45%;
		z-index: 3;
	}

	.bg-inspired-left img:nth-child(4) {
		bottom: 0;
		left: 17%;
		width: 38%;
	}


	.bg-inspired-right img:first-child {
		top: 5%;
		right: 0;
		width: 20%;

	}

	.bg-inspired-right img:nth-child(2) {
		top: 0;
		right: 22%;
		width: 37%;
		z-index: 2;

	}

	.bg-inspired-right img:nth-child(3) {
		top: 20%;
		right: 38%;
		width: 50%;
		z-index: 3;
	}

	.bg-inspired-right img:nth-child(4) {
		bottom: 0;
		right: 0;
		width: 65%;
		z-index: 2;
	}

	.bg-inspired-right img:nth-child(5) {
		bottom: 10%;
		left: 0;
		width: 38%;
		z-index: 4;
	}

	.content-inspired {
		/* width: 500px; */
		flex: 0 0 500px;
		max-width: 500px;
		/* margin-left: auto;
		margin-right: auto;
		max-width: 600px; */
	}

	.label-inspired {
		font-size: 12px;
		margin-bottom: 70px;
	}

	.title-inspired {
		font-size: 32px;
		margin-bottom: 60px;
	}

	.text-inspired {
		margin-bottom: 70px;
	}
}


@media (min-width: 1200px) {
	.section-inspired {
		margin-top: 120px;
		margin-bottom: 150px;
		padding-top: 170px;
		padding-bottom: 170px;

	}

	.content-inspired {
		flex: 0 0 600px;
		max-width: 600px;
	}

	.bg-inspired-left,
	.bg-inspired-right {
		flex: 0 0 calc(50% - 300px);
		max-width: calc(50% - 300px);
	}
}

@media (min-width: 1600px) {
	.section-inspired {
		padding-top: 220px;
		padding-bottom: 220px;

	}
}



/*=========================================
    Section numbers
=========================================*/
.section-numbers {
	margin-top: 30px;
	/* margin-bottom: 50px; */
}

.section-numbers .col-4 {
	margin-bottom: 30px;
}

.digits {
	color: var(--title-color);
	font-size: 32px;
	letter-spacing: -1px;
}

.digits-label {
	color: var(--text-grey);
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
}

@media (min-width: 768px) {

	.section-numbers .col-4 {
		margin-bottom: 0;
	}
}

@media (min-width: 992px) {
	.section-numbers {
		margin-top: 60px;
		/* margin-bottom: 100px; */
	}

	.digits {
		font-size: 44px;
	}

	.digits-label {
		font-size: 12px;
	}
}



.section-find-joelle {
	margin-top: 50px;
	margin-bottom: 50px;
}

/* .section-find-joelle .container {
	max-width: 1600px;
} */

.section-find-joelle-inner {
	position: relative;
}

.bg-section-find-joelle {
	border-radius: 33px;
	overflow: hidden;
	margin: 0;
}

.bg-section-find-joelle img {
	width: 100%;
	height: auto;
	display: block;
}

.section-find-joelle-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 50px;
}

.section-find-joelle-title {
	font-size: 32px;
	color: var(--white);
	text-align: center;
	font-family: 'Gotham';
	font-weight: 500;
	margin-bottom: 20px;
}

.section-find-joelle-subtitle {
	font-size: 20px;
	color: var(--white);
	text-align: center;
	margin-bottom: 25px;
}

.section-find-joelle-content .button-container .button {
	width: 100%;
	display: block;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.section-find-joelle-content {
		padding-left: 50px;
		padding-right: 50px;
		padding-top: 80px;
	}

	.section-find-joelle-title {
		font-size: 44px;
		margin-bottom: 30px;
		max-width: 570px;
		margin-left: auto;
		margin-right: auto;
	}

	.section-find-joelle-subtitle {
		margin-bottom: 35px;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 992px) {

	.section-find-joelle .container {
		padding-left: 30px;
		padding-right: 30px;
	}

	.section-find-joelle-content {
		padding-top: 130px;
	}

	.section-find-joelle-title {
		font-size: 60px;
		margin-bottom: 40px;
		max-width: 900px;
	}

	.section-find-joelle-subtitle {
		margin-bottom: 40px;
		max-width: 640px;
	}
}

/* @media (min-width: 1200px) {

	.section-find-joelle .container {
		padding-left: 50px;
		padding-right: 50px;
	}
} */












.section-featured-left {
	background-color: var(--light-grey);
}


.featured-col-left {
	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 30px;
	padding-left: 30px;
}

.featured-label {
	color: var(--text-grey);
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.featured-title {
	font-size: 26px;
	line-height: 1.4;
	color: var(--title-color);
	margin-bottom: 30px;
}

.featured-text {
	color: var(--text-grey);
	margin-bottom: 30px;
}

.featured-col-right {
	position: relative;
}

.featured-small-picture {
	position: absolute;
	bottom: -20px;
	right: 0;
	width: 190px;
}

@media (min-width: 768px) {
	.section-featured-left {
		padding-bottom: 25px;
		margin-top: 25px;
		margin-bottom: 25px;
	}

	.section-featured-space {
		margin-bottom: 80px;

	}

	.featured-col-left {
		max-width: 655px;
		margin-left: auto;
		padding-bottom: 0;
		padding-top: 25px;
	}

	.featured-col-right {
		overflow-x: hidden;
		-webkit-transform: translateY(-25px);
		transform: translateY(-25px);
	}

	.featured-big-picture {
		width: 100%;
	}

	/*.featured-big-picture img {
		float: right;
	}*/
	.featured-title {
		font-size: 32px;
	}

	.featured-small-picture {
		bottom: -50px;
		right: auto;
		left: 40px;
		width: 300px;
	}
}

@media (min-width: 992px) {
	.section-featured-left {
		padding-bottom: 55px;
		margin-top: 45px;
		margin-bottom: 15px;
	}

	.section-featured-space {
		margin-bottom: 120px;

	}

	.featured-col-right {
		-webkit-transform: translateY(-45px);
		transform: translateY(-45px);
	}

	.featured-small-picture {
		bottom: -70px;
		left: 70px;
		width: 400px;
	}

	.featured-col-left {
		padding-top: 55px;
		padding-right: 50px;
	}

	.featured-label {
		font-size: 12px;
		margin-bottom: 50px;
	}

	.featured-title {
		font-size: 38px;
		margin-bottom: 55px;
	}

	.featured-text {
		margin-bottom: 50px;
	}
}

@media (min-width: 1200px) {
	.section-featured-left {
		margin-bottom: 45px;
	}

	.featured-label {
		margin-bottom: 60px;
	}

	.featured-text {
		margin-bottom: 70px;
	}

	.featured-small-picture {
		bottom: -100px;
		left: 120px;
		width: 455px;
	}
}

/*@media (min-width: 1600px) {
	.featured-big-picture img {
		float: left;
	}
}*/







@media (min-width: 1200px) {
	.section-testimonianze {
		padding: 120px 0 90px;
	}
}

.section-grey {
	background-color: #fafafa;
}


.section-resources {
	padding-top: 50px;
	padding-bottom: 30px;
}

.section-resources .title-caps {
	margin-bottom: 30px;
}

.resource-link {
	margin-top: 12px;
	text-align: center;
	line-height: 1;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.section-resources {
		padding-bottom: 50px;
	}

	.resource-link {
		margin-bottom: 0;
	}
}

@media (min-width: 992px) {
	.section-resources {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.section-resources .title-caps {
		margin-bottom: 50px;
	}
}

@media (min-width: 1200px) {
	.section-resources {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	.section-resources .title-caps {
		margin-bottom: 80px;
	}
}



/*=========================================
    Section Text Media
=========================================*/
.section-text-media {
	padding-top: 50px;
	background-color: var(--light-grey);
	margin-bottom: 50px;
}

.media-column {
	width: 100%;
	max-width: 700px;
}

.media-column.has-video .media-column-content {
	position: relative;
	background: var(--text-grey);
	cursor: pointer;
}

.media-column.has-video .media-column-content picture {
	-webkit-transition: opacity 200ms ease 0s;
	transition: opacity 200ms ease 0s;
}

.media-column.has-video.loading .media-column-content picture {
	opacity: 0;
}

.media-column.has-video.loaded .video-embed iframe {
	opacity: 1;
}

.video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .3;
	-webkit-transition: opacity 500ms ease 0s;
	transition: opacity 500ms ease 0s;
}

.text-column.left {
	width: 100%;
	padding: 30px 0 50px;
}

.text-column h2 {
	font-size: 26px;
	line-height: 1.4;
	color: var(--title-color);
	margin-bottom: 0;
}


@media (min-width: 768px) {
	.section-text-media {
		padding-top: 80px;
		margin-bottom: 25px;
	}

	.section-text-media .media-column-content {
		-webkit-transform: translateY(25px);
		transform: translateY(25px);
	}

	.text-column.left {
		width: 45%;
		padding: 25px 30px 30px 0;
	}
}

@media (min-width: 992px) {
	.section-text-media {
		padding-top: 20px;
		margin-bottom: 60px;
	}

	.section-text-media .media-column-content {
		-webkit-transform: translateY(60px);
		transform: translateY(60px);
	}

	.text-column.left {
		padding-bottom: 60px;
	}

	.text-column h2 {
		font-size: 32px;
	}
}

@media (min-width: 1200px) {
	.text-column.left {
		padding: 30px 50px 30px 0;
	}

	.text-column h2 {
		font-size: 38px;
	}
}





/* .section-featured-posts .col-12 {
	margin-bottom: 15px;
} */

.blog-item {
	position: relative;
	display: block;
	background: #f4f4f4;
}

.blog-item-image {
	position: relative;
}

.blog-item-image::before {
	content: '';
	display: block;
	padding-bottom: 56%;
}

.blog-item-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.blog-item-info {
	padding: 35px 30px 25px;
}

.blog-item-title {
	color: var(--title-color);
	font-size: 26px;
	margin-bottom: 30px;
}

.posted-on {
	color: var(--title-color);
	font-size: 10px;
	letter-spacing: 5px;
}

@media (min-width: 768px) {
	.section-recent-posts {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.section-recent-posts .col-12 {
		margin-bottom: 0;
	}

	.blog-item {
		height: 100%;
	}

	.blog-item-info {
		padding-top: 50px;
		padding-bottom: 60px;
	}

	.blog-item-title {
		font-size: 30px;
		margin-bottom: 0;
	}

	.posted-on {
		position: absolute;
		bottom: 25px;
		left: 30px;
		font-size: 12px;
		letter-spacing: 6px;
	}
}

@media (min-width: 992px) {
	.section-recent-posts .title-caps {
		margin-bottom: 50px;
	}

	.blog-item-info {
		padding-bottom: 70px;
	}
}

@media (min-width: 1200px) {
	.section-recent-posts {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	.section-recent-posts .title-caps {
		margin-bottom: 80px;
	}

	.blog-item-info {
		padding-bottom: 80px;
	}
}






.section-brands {
	padding-top: 50px;
	padding-bottom: 50px;
}

.container.container-brands {
	padding-left: 0;
	padding-right: 0;
}

.brands-container {
	overflow: hidden;
}

.brands-wrapper {
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.brands-wrapper::-webkit-scrollbar {
	display: none
}

.brands-inner {
	width: 100%;
}

.brands-item {
	padding-right: 15px;
	padding-left: 15px;
}

.brands-item:first-child {
	padding-left: 30px;
}

.brands-item:last-child {
	padding-right: 30px;
}


@media (min-width: 992px) {
	.section-brands {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.container.container-brands {
		padding-left: 30px;
		padding-right: 30px;
	}

	.brands-container {
		margin-left: -8px;
		margin-right: -8px;
	}

	.brands-item,
	.brands-item:first-child,
	.brands-item:last-child {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (min-width: 1200px) {
	.section-brands {
		padding-top: 90px;
		padding-bottom: 90px;
	}
}