body {
	color: #948C8A;
	font-family: "forma-djr-text", sans-serif;
	font-size: 16px;
}

body strong,
body b {
	font-family: "forma-djr-text", sans-serif;
	font-weight: 500;
}

footer {
	background-color: #1D160F;
	margin-top: 150px;
	padding-top: 100px;
	padding-bottom: 100px;
}

h1, h2, h3, h4 {
	color: #1D160F;
}
footer h2, footer h3, footer h4 {
	color: #FBF4F2;
}

footer a {
	color: #E9E4E3;
	text-decoration: none
}
footer a:hover {
	color: #FBF4F2;
	text-decoration: underline;
}

.mb-5 {
	margin-bottom: 5rem!important;
}

#logo {
	z-index: 10;
}

/* Carousel Hero */
#carouselHero .carousel-item, #ottago-hero {
	min-height: 100vh;
	padding: 90px 0;
}
#ottago-hero {
	background-image: url('/tdg/hero-slider/slide-bg-1.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	position: relative;
}
#carouselHero .carousel-item .img-fluid, #ottago-hero .img-fluid {
	position: relative;
	z-index: 2;
}

#carouselHero .gradient, #ottago-hero .gradient {
	animation: woaoh 7s infinite linear;
	opacity: 0.6;
}
#carouselHero .gradient.color-1, #ottago-hero .gradient.color-1 {
	background: rgb(216,110,112);
	background: radial-gradient(circle, rgba(216,110,112,1) 0%, rgba(216,110,112,1) 5%, rgba(216,110,112,0) 65%);
}
#carouselHero .gradient.color-2 {
	background: rgb(68,84,67);
	background: radial-gradient(circle, rgba(68,84,67,1) 0%, rgba(68,84,67,1) 5%, rgba(68,84,67,0) 65%);
}
#carouselHero .gradient.color-3 {
	background: rgb(185,177,175);
	background: radial-gradient(circle, rgba(185,177,175,1) 0%, rgba(185,177,175,1) 5%, rgba(185,177,175,0) 65%);
}

#carouselHero .gradient.gradient-1, #ottago-hero .gradient.gradient-1 {
	height: 2000px;
	left: -1150px;
	top: -1000px;
	width: 2300px;
}
#carouselHero .gradient.gradient-2, #ottago-hero .gradient.gradient-2 {
	height: 1600px;
	margin-top: -1000px;
	right: -600px;
	top: 50%;
	width: 1600px;
}
#carouselHero .gradient.gradient-3, #ottago-hero .gradient.gradient-3 {
	bottom: -600px;
	height: 1200px;
	left: 50%;
	margin-left: -600px;
	width: 1400px;
}

#carouselHero .gradient.gradient-2, #ottago-hero .gradient.gradient-2 { animation-delay: 2s; }
#carouselHero .gradient.gradient-2, #ottago-hero .gradient.gradient-2 { animation-delay: 3s; }

@keyframes woaoh {
	0% {
		opacity: 0.6;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
	25% {
		opacity: 0.9;
		transform: translate3d(75px, -50px, 50px) scale3d(0.8, 0.8, 0.8);
	}
	50% {
		opacity: 1;
		transform: translate3d(150px, -100px, 0) scale3d(0.9, 0.9, 0.9);
	}
	75% {
		opacity: 0.8;
		transform: translate3d(75px, -150px, 50px) scale3d(0.7, 0.7, 0.7);
	}
	100% {
		opacity: 0.6;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
}

@keyframes woaohMobile {
	0% {
		opacity: 0.7;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
	25% {
		opacity: 0.9;
		transform: translate3d(25px, 15px, 25px) scale3d(0.8, 0.8, 0.8);
	}
	50% {
		opacity: 1;
		transform: translate3d(50px, 50px, 0) scale3d(0.9, 0.9, 0.9);
	}
	75% {
		opacity: 0.8;
		transform: translate3d(75px, 15px, 25px) scale3d(0.7, 0.7, 0.7);
	}
	100% {
		opacity: 0.7;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
}

@media screen and (max-width: 980px) {
	#carouselHero .gradient-3,
	#ottago-hero .gradient-3 {
		display: none;
	}
	#carouselHero .gradient,
	#ottago-hero .gradient {
		animation: woaohMobile 8s infinite linear;
		opacity: 0.7;
	}
	#carouselHero .gradient.gradient-1,
	#ottago-hero .gradient.gradient-1 {
		height: 600px;
		left: -100px;
		top: -250px;
		width: 600px;
	}
	#carouselHero .gradient.gradient-2,
	#ottago-hero .gradient.gradient-2 {
		bottom: 0;
		height: 600px;
		margin-top: 0px;
		right: 0px;
		top: initial;
		width: 600px;
	}
}


/* CSS animation for translating text in #ottagoMainTitle */
#ottagoMainTitle .color-slate {
	position: relative;
	display: inline-block;
	overflow: hidden;
	height: 100px;
	top: 0;
	width: 500px;
}
#ottagoMainTitle .color-slate .to-rotate {
	position: absolute;
	width: 100%;
	height: 100%;
	top: -50px;
	opacity: 0;
	transform: translateY(0px);
	animation: rotateTranslate 12s infinite ease-in-out;
}
#ottagoMainTitle .color-slate .to-rotate:nth-child(1) { animation-delay: 0s; }
#ottagoMainTitle .color-slate .to-rotate:nth-child(2) { animation-delay: 2s; }
#ottagoMainTitle .color-slate .to-rotate:nth-child(3) { animation-delay: 4s; }
#ottagoMainTitle .color-slate .to-rotate:nth-child(4) { animation-delay: 6s; }
#ottagoMainTitle .color-slate .to-rotate:nth-child(5) { animation-delay: 8s; }
#ottagoMainTitle .color-slate .to-rotate:nth-child(6) { animation-delay: 10s; }

@keyframes rotateTranslate {
	0% {
		opacity: 0;
		transform: translateY(0px);
	}
	10% {
		opacity: 1;
		transform: translateY(50px);
	}
	30% {
		opacity: 0;
	}
	40% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 0;
		transform: translateY(100px);
	}
}

@media screen and (max-width: 768px) {
	#ottagoMainTitle h1 {
		flex-wrap: wrap;
	}
	#ottagoMainTitle .color-slate {
		padding-left: 0 !important;
		width: 100%;
	}
}


/* CSS for accordion */
.accordion-item {
	border: none;
}
.accordion-button {
	background-color: transparent !important;
}
.accordion-button:not(.collapsed) {
	box-shadow: none;
}
.show-on-hover {
	display: none;
}
.accordion-button:hover .show-on-hover,
.accordion-button:not(.collapsed) .show-on-hover {
	display: block;
}
.accordion-button:hover .hide-on-hover,
.accordion-button:not(.collapsed) .hide-on-hover {
	display: none;
}
#ottagoAccordion .accordion-button::after {
	display: none;
}
.accordion-body {
	padding: 0 0 3rem 0 !important;
}
#progettoAccordion .accordion-item,
#metodoAccordion .accordion-item {
	background-color: #1D160F;
	border-radius: 0;
}
#progettoAccordion button.accordion-button,
#metodoAccordion button.accordion-button {
	color: #FBF4F2 !important;
	padding: 20px;
}
#progettoAccordion .accordion-body {
	padding: 0 20px 20px 20px !important;
}
#metodoAccordion .accordion-body {
	border-top: 1px solid #948C8A;
	padding: 20px !important;
}
#progettoAccordion .accordion-button::after,
#metodoAccordion .accordion-button::after {
	background-image: url('./images/close-icon.svg');
	display: block;
	transform: none !important;
}
#progettoAccordion .accordion-button:not(.collapsed)::after,
#metodoAccordion .accordion-button:not(.collapsed)::after {
	background-image: url('./images/open-icon.svg');
}

@media screen and (max-width: 1400px) {
	.accordion-body {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

.accordion-header {
	background-color: transparent;
}


/* Various */
.separator {
	border-top: 2px solid #E9E4E3;
}

.special-link {
	color: #1D160F !important;
	font-weight: 500;
	padding-right: 25px;
	position: relative;
	text-decoration: none;
	transition: all 0.12s ease-in-out;
}
.special-link.olive {
	color: #6D886B !important;
}
.special-link:after, .my-button:after {
	background-image: url('./images/arrow-right.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	height: 18px;
	position: absolute;
	right: 0;
	top: 1px;
	width: 18px;
}
.special-link.olive:after {
	background-image: url('./images/arrow-right-olive.svg');
}
.special-link:hover {
	opacity: 0.65;
	padding-right: 30px;
}

.my-button {
	align-items: center;
	background-color: #000;
	border-radius: 25px;
	color: #fff !important;
	display: flex;
	font-weight: 500;
	line-height: 1;
	padding: 12.5px 45px 12.5px 25px;
	position: relative;
	text-decoration: none;
	transition: all 0.12s ease-in-out;
}
.my-button.olive {
	background-color: #6D886B !important;
}
.my-button:after {
	background-image: url('./images/arrow-right-white.svg');
	right: 25px;
	top: auto;
	transition: all 0.12s ease-in-out;
}
.my-button:hover {
	opacity: 0.8;
}
.my-button:hover:after {
	right: 20px;
}
.my-button .whatsapp, .my-button .calendar {
	background-image: url('./images/whatsapp-icon.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	height: 20px;
	margin-right: 15px;
	width: 20px;
}
.my-button .calendar {
	background-image: url('./images/calendar-icon.svg');
}

.color-limestone {
	color: #FBF4F2;
}
.bg-limestone {
	background-color: #FBF4F2;
}
.color-sandstone {
	color: #E9E4E3;
}
.color-slate {
	color: #948C8A;
}
.color-basalt {
	color: #1D160F;
}

#bgPromo {
	background-image: url('./images/bg-promo-grigio.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 75px;
	padding: 0 30px 90px 30px;
}

#ottagoMainTitle {
	padding-top: 150px;
	padding-bottom: 100px;
}


/* Carousel Manifesto */
@media only screen and (max-width: 767px) {
	.my-carousel .carousel-inner .carousel-item > div {
		display: none !important;
	}
	.my-carousel .carousel-inner .carousel-item > div:first-child {
		display: block !important;
	}
}

.my-carousel .carousel-control-next,
.my-carousel .carousel-control-prev {
	height: 37px;
	left: auto !important;
	opacity: 1;
	right: 10px !important;
	top: 0;
	width: 37px;
}
.my-carousel .carousel-control-prev {
	top: 37px;
}
.my-carousel .carousel-control-next:hover,
.my-carousel .carousel-control-prev:hover {
	opacity: 0.7;
}
.my-carousel .carousel-control-prev-icon {
	background-image: url(./images/to-left.svg);
}
.my-carousel .carousel-control-next-icon {
	background-image: url(./images/to-right.svg);
}

#carouselManifesto .carousel-inner .carousel-item > div {
	background-color: #fbf4f2;
}

.my-carousel .carousel-inner .carousel-item.active,
.my-carousel .carousel-inner .carousel-item-next,
.my-carousel .carousel-inner .carousel-item-prev {
	display: flex !important;
}

@media only screen and (min-width: 768px) {
	#carouselSpazio .carousel-item img,
	#carouselProgetto .carousel-item img,
	#carouselCostruzione .carousel-item img {
		height: 500px;
		object-fit: cover;
		width: 100%;
	}
}