@import url('https://fonts.bunny.net/css?family=open-sans:400|oswald:400,700');
/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Oswald:wght@400;700&display=swap');
*/

html {

}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	overflow-x: hidden;
}

h1, .h1 {
	font-size: 27px;
	color: #f96f59;
	font-weight: bold;
	padding-bottom: 20px;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;

}

h2, .h2 {
	font-size: 27px;
	color: #198754;
	font-weight: bold;
	padding-bottom: 20px;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
}

h3, .h3 {
	font-size: 20px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
}

h4, .h4 {
	font-size: 22px;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
}

h5, .h5 {
	font-size: 20px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
}

.spothome {
	font-size: 30px;
	font-family: 'Oswald', sans-serif;
}

h6, .h6 {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 7px;
	font-family: 'Oswald', sans-serif;
}

.text-justify {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

a {
	color: #198754;
}

a:hover {

	color: #f96f59;
	text-decoration: none;
}
.arancione{
	color: #f96f59;
}
.ombratesto {
	text-shadow: 0 2px 3px #000000;
	text-shadow: 2px 3px 5px #000, 0 0px 15px rgba(0, 0, 0, 0.63);
	text-transform: uppercase;
}

.nonunder {
	text-decoration: none;
}

.celeste {
	color: #198754;
}

.bg-celeste {
	background-color: #0db5c0;
}

.topbar {
	background: #198754;
	height: 40px;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	transition: all 0.5s;
	color: #fff;
	padding: 0;
	flex-shrink: 0;
}
.topbar a {
	color:#fff;
	text-decoration: none;
}
.topbar a:hover {
	color:#f96f59;
	text-decoration: underline;
}
.topbar.cs-topbar-scrolled {
	position: fixed;
	top: -40px;
}

.topbar + .cs-topbar-scrolled {
	position: fixed;
	top: 0;
	z-index: 99999;
	left: 0;
	right: 0;
}

.topbar + .cs-topbar-scrolled + * {
	margin-top: 100px;
}

.navbar {
	background-color: #317b58 !important;
	font-family: 'Oswald', sans-serif;
	font-size: 17px;
	border-bottom: solid 2px #286f4d;
	transition: padding 0.5s;
	padding: 25px 0;
}

.cs-topbar-scrolled .navbar {
	padding: 5px 0;
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {

	color: #f96f59;

}

.navbar-dark .navbar-nav .nav-link {
	color: #ffffff;
	margin-left: 25px;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {

	color: #f96f59;

}

.navbar-dark .navbar-brand {
	font-family: 'Oswald', sans-serif;
	color: #fff;
	font-size: 27px;
	font-weight: bold;
}

.navbar ul {
	text-transform: uppercase;
}

.navbar ul.navbar-root > li > a {
	position: relative;
}

.navbar ul.navbar-root > li > a:before {
	content: "";
	position: absolute;
	height: 2px;
	bottom: -5px;
	left: -5px;
	background-color: #f85a40;
	visibility: hidden;
	width: 0;
	transition: all 0.3s ease-in-out 0s;
}

.navbar ul.navbar-root > li > a:hover:before,
.navbar ul.navbar-root > li:hover > a:before,
.navbar ul.navbar-root > li > a.active:before {
	visibility: visible;
	width: calc(100% + 5px);
}


/*.navbar .dropdown-menu-dark {
	--bs-dropdown-bg: #317b58;
}*/

.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:hover {
	background-color: #198754;
	color: #f96f59;
	text-decoration: underline;
}

/*Problema IOS safari*/
.nav-link {
	outline: none !important;
	box-shadow: none;
}

.navbar-dark .navbar-toggler {
	color: #198754;
	border-color: #198754;
}

.shadow-cs {
	box-shadow: 0 0.4rem 1rem rgba(47, 47, 47, 0.6) !important;
}

.logo {
	width: 260px;
	aspect-ratio: 2000 / 334;
}
.logo-alt {
	/*width: 22px;*/
	height: 40px;
	aspect-ratio: 304/541;
}
.logo-alt-footer {
	height: 32px;
	aspect-ratio: 304/541;
}

.logo-mini {
	width: 22px;
	height: 40px;
	aspect-ratio: 541 / 304;
}

.lang {
	height: 20px;
	margin-bottom: 2px;
	aspect-ratio: 1 / 1;
}

main > .container {
	padding: 60px 15px 0;
}

b, strong {

	font-weight: bold;

}

#slidehome {
	padding-top: 0;
}

#slidehome .carousel-item > img {
	aspect-ratio: 1920 / 770;
}
#slidehome .carousel-indicators [data-bs-target]
{
	background-color: #317b58;
}
#slidehomesmall .carousel-indicators [data-bs-target]
{
	background-color: #317b58;
}
.carousel-caption {
	bottom: 7rem;
}

.text-sh {
	text-shadow: 0 2px 3px #000000;
}

.header-foto {
	background-color: #ffffff;
	min-height: 170px;
	/*margin-top: 55px;*/
	/*background-image: url('../img/header.jpg');*/
	background-image: url('../img/header.jpg');
	text-align: center;
	background-position: center center;
}

.header-foto H1 {
	font-size: 24px;
	color: #ffffff;
	margin: 0 auto;
	text-shadow: 0 2px 3px #000000;
	text-transform: uppercase;
}

.foto-cv {
	max-width: 230px;
}

.grigetto {
	background-color: #f4f4f4;
}

.acqua {
	background-color: #198754;;
}

.ondagrigia {
	background-repeat: round;
	/*background-position: center center;*/
	background-image: url('../img/curva-canepuccia.png');
	height: 208px;
	width: 100%;
	background-size: cover;
}

.ondablu {
	background-repeat: round;
	/*background-position: center center;*/
	background-image: url('../img/curva-grigio-acqua.png');
	height: 208px;
	width: 100%;
	background-size: cover;
}

.list-group-item-action:focus, .list-group-item-action:hover {
	color: #fff;
	text-decoration: none;
	background-color: #198754;
}

.aspectra1 {
	aspect-ratio: 1920 / 770;
}

.aspectra2 {
	aspect-ratio: 460 / 570;
}

.accordion-button {
	font-weight: bold;
}

.dropdown-item.active, .dropdown-item:active {
	background-color: #198754;
}

.titoletto {
	padding-right: 10px;
}
.logo-sc{
		width: 25%;
	}

.jumbotron {
	padding: 2rem 2rem;
	background-color: #42bdb330;
}

.g-recaptcha {
	display: flex;
	justify-content: center;
}

.contacts-icons {
	font-size: 2.5em;
	color: #f96f59;
}

.social-links a {
	white-space: nowrap;
	display: inline-block;
}

/* Animazioni */
.animated {
	-webkit-animation-duration: 1.5s;
			animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
}

@keyframes fadeInLeft {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(-40%, 0, 0);
			transform: translate3d(-40%, 0, 0);
	}

	100% {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
	}
}
.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
			animation-name: fadeInLeft;
}

@keyframes fadeInRight {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(40%, 0, 0);
			transform: translate3d(40%, 0, 0);
	}

	100% {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
	}
}
.fadeInRight {
	-webkit-animation-name: fadeInRight;
			animation-name: fadeInRight;
}

@keyframes fadeInTop {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInTop {
	-webkit-animation-name: fadeInTop;
	animation-name: fadeInTop;
}

@keyframes fadeInBottom {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 40%, 0);
		transform: translate3d(0, 40%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInBottom {
	-webkit-animation-name: fadeInBottom;
	animation-name: fadeInBottom;
}

.img-ruota {
-webkit-transition: -webkit-transform 0.8s ease-in-out;
	transition: transform 0.8s ease-in-out;
}
.img-ruota:hover {
-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
i.i-ruota{
  display: inline-block;
  transition: transform 0.8s ease-in-out;
}

i.i-ruota:hover {
 transform: rotate(360deg);
}

/* FINE Animazioni */
.btn-secondary {
	--bs-btn-color: #000;
	--bs-btn-bg: #f96f59;
	--bs-btn-border-color: #f96f59;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #f04024;
	--bs-btn-hover-border-color: #ff3111;
	--bs-btn-focus-shadow-rgb: 217,164,6;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #f04024;
	--bs-btn-active-border-color: #ff3111;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #c68277;
	--bs-btn-disabled-border-color: #80615c;
}

#btnGoUp {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 9999;
	margin: 8px;
	opacity: 0.75;
	transition: opacity 0.25s linear;
}

.accordion-button:not(.collapsed) {
	color: #fff;
	background-color: #198754;
	box-shadow: 0 0 0 0.25rem rgba(17, 66, 81, 0.2);
}

.accordion-button:focus {
	box-shadow: 0 0 0 0.25rem rgba(17, 66, 81, 0.2);
}

.footer {
	font-size: 14px;
	background-color: #317b58;
	padding: 40px 0 30px 0;
	color: white;
	border-top: solid 2px #286f4d;
}
.footer a{
	color: #fff;
}
.footer a:hover{
	color: #f96f59;
}	
.footer-brand{
	font-size: 22px;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	margin-bottom: .5rem;
}

.italy {
	height: 10px;
	width: 30px;
	margin-right: 4px;
}

.chiamaci {
	color: #fff;
	background-color: #198754;
	border-color: #198754;
}

.chiamaci a {
	color: #f96f59;
	text-decoration: none;
}

.chiamaci a:hover {
	color: #fff;
	text-decoration: underline;
}

img.certifications-logo {
	width: 100%;
	max-width: 150px;
}

/*FOTO STAMPI*/
.gallery img {
	background-color: #ffffff;
	padding: 15px;
	width: 100%;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

#gallery-modal .modal-img {
	width: 100%;
}

@media (max-width: 1200px) {

}




@media (max-width: 992px) {
	.navbar {
		/*padding: 10px 0;*/
	}

	.foto-cv {
		max-width: none;
	}

	H5 {
		font-size: 20px;

	}

	.carousel-caption {
		bottom: 4rem;
	}

	.ondagrigia {
		background-repeat: no-repeat;
	}

	.ondablu {
		background-repeat: no-repeat;
	}

	.ombratesto {
		font-size: 14px;
	}
}
@media (max-width: 768px) {
	.navbar-dark .navbar-brand {
	font-size: 22px;
	}
}

@media (max-width: 576px) {
	body {
		font-size: 18px;
	}
	
	.logo-sc{
		width: 75%;
	}
	


}