/*
https://clamp-generator.netlify.app/
	Default Rem Value (px): 16
	Minimum Viewport Width (px): 360
	Maximum Viewport Width (px): 1920

	h1: 40px, 60px
	h2: 35px, 50px
	h3: 30px, 40px
	h4: 25px, 35px
	h5: 20px, 30px
	h6: 18px, 25px

	normal: 16px, 18px
	$small: 14px, 16px
	x-small: 12px, 14px
	xx-small: 11px, 12px

*/

:root {
	--white: #ffffff;
	--black: #000000;
	--red: #DF013A;
	--blue: #003790;
	--gray-100: #f8f9fa;
	--gray-200: #e9ecef;
	--gray-300: #dee2e6;
	--gray-400: #ced4da;
	--gray-500: #adb5bd;
	--gray-600: #6c757d;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;
	--fs-normal: clamp(1rem, 0.128vw + 0.971rem, 1.125rem);
	--fs-small: clamp(0.875rem, 0.128vw + 0.846rem, 1rem);
	--fs-x-small: clamp(0.75rem, 0.128vw + 0.721rem, 0.875rem);
	--fs-xx-small: clamp(0.688rem, 0.064vw + 0.673rem, 0.75rem);
	--h1: clamp(2.5rem, 1.282vw + 2.212rem, 3.75rem);
	--h2: clamp(2.188rem, 0.962vw + 1.971rem, 3.125rem);
	--h3: clamp(1.875rem, 0.641vw + 1.731rem, 2.5rem);
	--h4: clamp(1.563rem, 0.641vw + 1.418rem, 2.188rem);
	--h5: clamp(1.25rem, 0.641vw + 1.106rem, 1.875rem);
	--h6: clamp(1.125rem, 0.449vw + 1.024rem, 1.563rem);
	--bs-font-sans-serif: "neue-haas-grotesk-text", sans-serif;
	--bs-font-heading: "neue-haas-grotesk-display", sans-serif;
	--bs-body-color: var(--black);
}

body {
	overflow: auto;
	overflow-x: hidden;
}

body.nav-is-active {
	/*overflow: hidden;*/
}

a {
	border: none;
}

	a:active {
		outline: none !important;
	}

	a:hover {
		color: inherit;
	}

	a:focus {
		outline-color: var(--gray-900) !important;
		outline-width: 2px;
		outline-offset: 3px;
	}

	a:focus-visible {
		outline-color: var(--gray-900) !important;
		outline-style: solid;
	}

.fw-black {
	font-family: var(--bs-font-heading);
	font-weight: 900 !important;
}

.fs-normal {
	font-size: var(--fs-normal);
}

.fs-small {
	font-size: var(--fs-small);
}

.fs-x-small {
	font-size: var(--fs-x-small);
}

.fs-xx-small {
	font-size: var(--fs-xx-small);
}

h1, .h1 {
	font-size: var(--h1);
}

h2, .h2 {
	font-size: var(--h2);
}

h3, .h3 {
	font-size: var(--h3);
}

h4, .h4 {
	font-size: var(--h4);
}

h5, .h5 {
	font-size: var(--h5);
}

h6, .h6 {
	font-size: var(--h6);
}


.text-red {
	color: var(--red) !important;
}

.text-blue {
	color: var(--blue) !important;
}

.text-gray-100 {
	color: var(--gray-100) !important;
}

.text-gray-200 {
	color: var(--gray-200) !important;
}

.text-gray-300 {
	color: var(--gray-300) !important;
}

.text-gray-400 {
	color: var(--gray-400) !important;
}

.text-gray-500 {
	color: var(--gray-500) !important;
}

.text-gray-600 {
	color: var(--gray-600) !important;
}

.text-gray-700 {
	color: var(--gray-700) !important;
}

.text-gray-800 {
	color: var(--gray-800) !important;
}

.text-gray-900 {
	color: var(--gray-900) !important;
}

.bg-red {
	background: var(--red) !important;
}

.bg-blue {
	background: var(--blue) !important;
}

.bg-gray-100 {
	background: var(--gray-100) !important;
}

.bg-gray-200 {
	background: var(--gray-200) !important;
}

.bg-gray-300 {
	background: var(--gray-300) !important;
}

.bg-gray-400 {
	background: var(--gray-400) !important;
}

.bg-gray-500 {
	background: var(--gray-500) !important;
}

.bg-gray-600 {
	background: var(--gray-600) !important;
}

.bg-gray-700 {
	background: var(--gray-700) !important;
}

.bg-gray-800 {
	background: var(--gray-800) !important;
}

.bg-gray-900 {
	background: var(--gray-900) !important;
}

.btn-red {
	background: var(--red) !important;
}

.btn-blue {
	background: var(--blue) !important;
}

.btn-gray-100 {
	background: var(--gray-100) !important;
}

.btn-gray-200 {
	background: var(--gray-200) !important;
}

.btn-gray-300 {
	background: var(--gray-300) !important;
}

.btn-gray-400 {
	background: var(--gray-400) !important;
}

.btn-gray-500 {
	background: var(--gray-500) !important;
}

.btn-gray-600 {
	background: var(--gray-600) !important;
}

.btn-gray-700 {
	background: var(--gray-700) !important;
}

.btn-gray-800 {
	background: var(--gray-800) !important;
}

.btn-gray-900 {
	background: var(--gray-900) !important;
}

.btn {
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-padding-y: 0.6rem;
	--bs-btn-font-family: var(--bs-font-sans-serif);
	--bs-btn-font-size: 1.15rem;
	--bs-btn-font-weight: 700;
	--bs-btn-line-height: 1.3;
	--bs-btn-border-radius: 3rem;
}

.btn.btn-link {
	font-size: inherit;
	padding: 0px !important;
	margin: 0px !important;
	border: 0px !important;
	vertical-align: inherit !important;
	border-radius: 0px !important;
	box-shadow: none !important;
	line-height: inherit !important;
}


.max-670 {
	max-width: 670px !important;
}

.bg-scacchi-right {
	background: url('../images/bg-scacchi-right.jpg') no-repeat right top;
	background-size: auto 100%;
}
.bg-scacchi-left {
	background: url('../images/bg-scacchi-left.jpg') no-repeat left top;
	background-size: auto 100%;
}

.bg-pista-light {
	background: url('../images/bg-pista-light.jpg') no-repeat left top;
	background-size: cover;
}

.overlay {
	mix-blend-mode: soft-light !important;
}

.shadow-white:before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 105%;
	height: 150%;
	content: "";
	filter: blur(15px) !important;
	background: var(--white) !important;
}

.cls-logo-suzuki-1 {
	fill: var(--red);
}

.cls-logo-suzuki-2 {
	fill: var(--blue);
}

.container {
	max-width: 1640px !important;
}

.container, .container-fluid {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

header.is-scrolled {
	background: var(--white);
	box-shadow: 0px 20px 40px 30px white;
}

header .item-logo img, header .item-logo svg {
	width: auto;
	height: 50px;
	position: relative;
}

header nav a, header nav button {
	text-decoration: none !important;
}

header nav ul {
	list-style: none;
	list-style-type: none;
}
header nav button {
	position: relative;
}
header nav button.is-active:before {
	position: absolute;
	left: 0px;
	top: -5px;
	width: 100%;
	height: 2px;
	background: var(--white);
	content: '';
	border-radius: 2px;
}
	header nav button.is-active:after {
		position: absolute;
		left: 0px;
		bottom: -5px;
		width: 100%;
		height: 2px;
		background: var(--white);
		content: '';
		border-radius: 2px;
	}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
	background-color:var(--white) !important
}

section {
	overflow: hidden;
}

section.hero .logo-tester {
	max-width: 700px;
	filter: drop-shadow(0px 0px 10px #f1c95b);
}

section.prove-su-strada {
	background: url('../images/prove-su-strada.jpg') no-repeat center center;
	background-size: cover;
}


/*RESPONSIVE*/

@media only screen and (min-width: 992px) {

	section.tua-swift-sport .container.img {
		max-width:100% !important;
	}
	section.tua-swift-sport .container.img img {
		border-radius:0px !important;
	}
}

@media (max-width: 1399px) {

	.cls-logo-suzuki-1, .cls-logo-suzuki-2 {
		fill: var(--white) !important;
	}

	header {
		background: var(--red) !important;
	}
	header.is-scrolled {
		box-shadow: none;
	}

	header .item-nav {
		position: fixed !important;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 0% !important;
		background: var(--red);
		transition: all 0.3s ease-in-out;
		overflow: hidden;
	}
	header .item-nav.is-active {
		height: 75% !important;
	}
	header .item-nav button {
		font-size:1.4em !important;
	}
	header nav ul li {
		margin-top:5px;
		margin-bottom:5px;
	}

}

@media only screen and (max-width: 991px) {
	
	section.prove-su-strada {
		background: url('../images/prove-su-strada-mobile.jpg') no-repeat center bottom;
		background-size: cover;
	}
}

@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 576px) {


}