@media (min-width: 1200px) {
	.container {
	    max-width: 960px;
	}
}

body {	
	font-family: 'Enriqueta', serif;
}

h1, .h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 2.1875rem;
	text-transform: uppercase;
	line-height: 2.5rem;
	font-weight: 300;
	color: #8b3c67;
}

h2, .h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.875rem;
	text-transform: uppercase;
	line-height: 2.25rem;
	font-weight: 300;
	color: #8b3c67;
}

h3, .h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.375rem;
	text-transform: uppercase;
	font-weight: 300;
	color: #8b3c67;
}

p {
	color: #485156;
}

#story p,
#story-alt p {
	font-size: 1.5rem;
	line-height: 2rem;
}

#products p {
	font-size: 1.125rem;
	line-height: 1.5rem;
}

#footer p {
	font-size: 0.75rem;
}

b, strong {
    font-weight: 700;
}

a {
	color: #485156;
	text-decoration: underline;
	transition: color .3s ease;
}

a:hover {
	color: #8b3c67;
}

.btn {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.6875rem;
	text-transform: uppercase;
}

hr {
	border-color: #485156;
	position: relative;
    margin-left: 1.3rem;
}

hr:before {
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7"><rect x="1.03" y="1.02" width="4.95" height="4.95" transform="translate(-1.45 3.5) rotate(-44.99)" fill="#485155"/></svg>');
    display: block;
    width: 0.625rem;
    position: absolute;
	left: -1rem;
    top: -0.9rem;
}

.down-arrow {
	position: absolute;
	left: 50%;
	margin-left: -1em;
}

.down-arrow svg {
	width: 2em;
}

@media (max-width: 991.99px) {

	h1, .h1 {
		font-size: 1.975rem;
		line-height: 2.25rem;
	}

	#story p,
	#story-alt p {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}

	.down-arrow {
		display: none;
	}

}

/* --== SECTIONS ==-- */

.section {
	position: relative;
}

.section .round-image {
	width: 25em;
}

@media (max-width: 991.99px) {
	.section .images-container {
		position: relative;
		text-align: center;
	}

	.section .round-image {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		top: auto !important;
	}
}

/* --== STORY ==-- */

#story {
	overflow: hidden;
	background: #f1d09f;
	padding-top: 3rem;
}

#story .logo svg {
	max-width: 11.875rem;
}

#story .logo svg .cls-1 {
	fill: #8b3c67;
}

#story .logo svg .cls-2 {
	fill: #f1d09f;
}

#story .story-piemonte {
	padding-bottom: 12rem;
}

#story .story-piemonte .round-image {
	position: absolute;
	right: -8em;
	top: -4em;  
}

#story .story-piemonte .texture {
	position: absolute;
    right: -23em;
    top: -7em;
    height: 12em;
    mix-blend-mode: multiply;
}

#story .story-piemonte .down-arrow {
	bottom: 4em;
}

#story .story-buono {
	padding-bottom: 10rem;
}

#story .story-buono .round-image {
	position: absolute;
	left: -11em;
    top: -9em;
}

#story .story-buono .texture {
	position: absolute;
    left: -2em;
    top: 2em;
    height: 12em;
    mix-blend-mode: multiply;
    transform: rotate(90deg);
}

#story .story-buono .down-arrow {
	bottom: 1em;
}

#story-alt {
	overflow: hidden;
	background: #fad2ca;
	padding-top: 6rem;
}

#story-alt .story-pratico {
	padding-bottom: 12rem;
}

#story-alt .story-pratico .round-image {
	position: absolute;
	right: -8em;
	top: 3em;  
}

#story-alt .story-pratico .texture {
	position: absolute;
    right: -22em;
    top: 7em;
    height: 12em;
    mix-blend-mode: multiply;
    transform: rotate(90deg);
}

#story-alt .story-pratico .down-arrow {
	bottom: 4em;
}

#story-alt .story-contemporaneo {
	padding-bottom: 12rem;
}

#story-alt .story-contemporaneo .round-image {
	position: absolute;
	left: -4em;
    top: 0em;  
}

#story-alt .story-contemporaneo .texture {
	position: absolute;
    left: -14em;
    top: -4em;
    height: 12em;
    mix-blend-mode: multiply;
}

#story-alt .story-contemporaneo .down-arrow {
	bottom: 1em;
}

@media (max-width: 991.99px) {

	#story .story-piemonte,
	#story .story-buono,
	#story-alt .story-pratico,
	#story-alt .story-contemporaneo {
		padding-bottom: 4rem;
	}

	#story .story-piemonte .texture {
	    left: 50%;
	    top: 50%;
	    margin-top: -6em;
	}

	#story .story-buono .texture {
		top: auto;
	    left: 50%;
	    bottom: 0;
	    transform: rotate(0deg);
	}

	#story-alt {
		padding-top: 4rem;
	}

	#story-alt .story-pratico .texture {
	    right: 50%;
	    top: auto;
	    bottom: 0;
	    transform: rotate(0deg);
	}

	#story-alt .story-contemporaneo .texture {
	    left: auto;
	    top: 50%;
	    right: 50%;
	    margin-top: -6rem;
	}

}

/* --== PRODUCTS ==-- */

#products {
	padding: 5rem 0;
	background: #f2ebe3;
}

#products img {
	mix-blend-mode: multiply;
}

@media (max-width: 991.99px) {

	#products {
		padding-bottom: 2rem;
	}

}