/**
 * STILE GENERALE
 */
* { font-family: 'Roboto Slab', serif; }

html { scroll-behavior: smooth; }
body {
	color: #45403D;
	min-width: 290px;
}

.blue { color: #005391; }
.blue * { color: #005391; }

.bg-grey { background-color: #F1F2F4; }

h4, h5, h6 { font-weight: 400; }
h2 {
	font-size: 32px;
	line-height: 42px;
	color: #F15D2F;
	font-weight: 700;
}
h3 {
	font-size: 25px;
	line-height: 30px;
	font-weight: 700;
}
h4 {
	font-size: 19px;
	line-height: 23px;
}

p {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 22px;
	margin: 20px 0 0;
}

img { max-width: 100%; }

.center { text-align: center; }


.btn {
	display: block;
	width: auto;
	max-width: 285px;
	margin: auto;
	border: 2px solid transparent;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: 8px 20px;
	text-align: center;
	transition: .2s ease;
}

.btn.btn-white { background: #fff; color: #F15D2F; border-color: #fff; }
.btn.btn-white:hover { background: transparent; color: #fff; }

.btn.btn-color { background: #F15D2F; color: #fff; border-color: #F15D2F; }
.btn.btn-color:hover { background: transparent; color: #F15D2F; border-color: #F15D2F; }




/**
 * STRUTTURA
 */
#header {
	position: relative;
}
#header .bg {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	color: #fff;
}
#header .bg > .container,
#header .bg > .container > .row {
	height: 100%;
}

#header .logo { width: 240px; }

#header .bg h1 {
	font-size: 28px;
	line-height: 1;
	font-weight: 700;
	margin: 20px 0 0;
}
#header .bg h2 {
	font-size: 24px;
	line-height: 1.2;
	margin: 20px 0 0;
	color: inherit;
	font-weight: 300;
}

.form-container {
	background: #45403D;
	padding: 30px 0;
}
form {
	background: #45403D;
	color: #fff;
	width: 100%;
	padding: 30px 0;
}
form .error {
	color: #ff8585;
	border: 2px solid #ff8585;
	border-radius: 5px;
	padding: 5px 10px;
	margin-bottom: 10px;
}
form label {
	display: block;
	font-size: 16px;
	margin-bottom: 15px;
}
form input:not([type="checkbox"]),
form textarea {
	display: block;
	width: 100%;
	font-size: 16px;
	border: none;
	padding: 4px 12px 5px;
	border-radius: 7px;
	margin-top: 5px;
}
form textarea {
	min-height: 33px;
	max-height: 100px;
}
form .checkbox {
	font-size: 16px;
}
form .checkbox input {
	float: left;
	margin: 5px 7px 10px 0;
	width: 16px;
	height: 16px;
}
form a,
form a:hover {
	color: #fff;
	text-decoration: underline;
}
form button {
	background: #F15D2F;
	color: #fff;
	border: 2px solid #F15D2F;
	font-size: 18px;
	font-weight: 700;
	display: block;
	width: auto;
	margin-left: auto;
	padding: 6px 50px;
	transition: .2s ease;
}
form button:hover {
	background: transparent;
	color: #fff;
	border-color: #fff;
}


#main .card {
	position: relative;
}
#main .card img {
	width: 100%;
}
#main .card .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	padding: 20px;
}
#main .card .overlay span {
	max-width: 350px;
}


#main .applicazione { margin: 40px 0; }
#main .applicazione p {
	color: #0F2542;
	font-weight: 900;
	margin: 30px 0 0;
}


#main .bg-2 {
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
	padding: 90px 0;
}
#main .bg-2 p {
	max-width: 1300px;
	margin: 0 auto 30px;
	line-height: 1.4;
}


#footer {
	background: #292724;
	color: #fff;
	padding: 40px 0;
}
#footer p {
	font-size: 14px;
	color: #C1BEBC;
}
#footer p + p {
	/*line-height: 25px;*/
}
#footer a {
	color: inherit;
}
#footer .btn {
	color: #fff;
	background: transparent;
	padding: 12px 24px;
	border: 2px solid #fff;
	outline: none;
	text-decoration: none;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	display: inline-block;
	margin-bottom: 15px;
	transition: .2s ease;
}
#footer .btn:hover {
	color: #4785FF;
	background: #fff;
}

#social a { margin: 5px; text-decoration: none; }
#social a .mk-svg-icon { fill: #fff; transition: .2s ease; }
#social a:hover .mk-svg-icon { fill: rgba(255, 255, 255, .6); }



/**
 * MEDIA QUERY
 */
@media (max-width: 575px) {
	#header .bg { text-align: center; }
	#header .bg { background-position: right center; }
}
@media (min-width: 576px) and (max-width: 991px) {
	#header .bg { background-position: right -700px center; }
	#header .logo { margin-top: 300px; }
}

@media (min-width: 768px) and (max-width: 991px) {
	#header .bg { background-position: right -620px center; }
	#header .logo { margin-top: 300px; }
}


@media (min-width: 768px) {
	#header .bg h1 { font-size: 42px; }
	#header .bg h2 { font-size: 30px; }
}


@media (min-width: 992px) {
	#header .bg { height: 900px; }
	.form-container {
		background: transparent;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	form {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		padding: 40px 60px 50px;
		border-bottom-left-radius: 17px;
		border-bottom-right-radius: 17px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	}
}


@media (min-width: 1200px) and (max-width: 1399px) {
	form { padding: 30px 30px 34px; }
}


@media (min-width: 1200px) {
}


@media (min-width: 1400px) {
	.container { max-width: 1350px; }
	p { font-size: 18px; }
}


@media (min-width: 1700px) {
	.container { max-width: 1640px; }

	#header .logo { width: auto; }

	#header .bg h1 { font-size: 54px; }
	#header .bg h2 { font-size: 34px; }
}