@charset "UTF-8";
/*
	Copyright © Beavercode Sagl
	www.beavercode.ch
*/
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700|Raleway:400,600');
	  
body {
	font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 20px;
	background-color:#f8f8f8;
	margin:0;
	color:#575756;
	text-align: justify;
}

a {
	text-decoration:none;
	color:#575756;
} 

a:hover {
	color:#1d5b88;
}

h1 {
	width: 100%;
	text-align: center;
	font-size: 28px;
	line-height: 36px;
	letter-spacing: 10px;
	color: #1d5b88;
	text-transform: uppercase;
	padding: 10px 0 10px 0;
	font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h2 {
	width: 100%;
	text-align: center;
	font-size: 18px;
	line-height: 24px;
	color: #1d5b88;
	padding: 10px 0 10px 0;
	font-family: 'Noto Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: lighter;
}

h3 {
	width: 100%;
	text-align: center;
	font-size: 16px;
	line-height: 22px;
	color: #1d5b88;
	padding: 10px 0 10px 0;
	font-family: 'Noto Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: lighter;
}

img {
	display: block;
}

.text-big {
	font-size: 12px;
	line-height: 20px;
	color:#575756;
}

.text-small {
	font-size: 11px;
	line-height: 16px;
	color:#1d5b88;
}
.text-small b {
	font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 600;
}

.main-content {
	margin: auto;
	max-width: 700px;
}

/* NAVIGATION */
.nav-close {
	width: 14px;
	margin-left: 50px;
	margin-top: 50px;
	position: fixed;
	cursor: pointer;
}

.nav-open {
	width: 24px;
	margin-left: 40px;
	margin-top: 50px;
	position: fixed;
	cursor: pointer;
}

.nav-container {
	background-color: #fff;
	position: fixed;
	display: table;
	width: 220px;
	min-height: 100vh;
	overflow: hidden;
	left: -220px;
	z-index: 99999;
}
.nav-container ul {
	list-style: none;
	padding-top: 80px;
	padding-bottom: 70px;
	margin-left: 10px;
}
.nav-container ul li a {
	color: #1d5b88; 
	font-family: 'Noto Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 24px;
	font-weight: lighter;
}
.nav-container ul li a:hover {
	color:#575756;
}

@media only screen and (max-width: 767px) {
	
	.nav-open {
		margin-left: 20px;
	}
	
	.nav-container ul li a {
		line-height: 28px;
	}
	
	.nav-contact {
		bottom: 80px;
	}
	
}

@media only screen and (max-height: 389px) {

	.nav-contact {
		display: none;
	}
	
}

@media only screen and (max-height: 490px) and (max-width: 767px)  {

	.nav-contact {
		display: none;
	}
	
}

/* HEADER */
header {
	width: 100%;
}

.header-logo {
	width: 100%;
	text-align: center;
	background-color: #FEFEFE;
	min-height: 95px;
}
.header-logo img {
	height: 55px;
	padding-top: 20px;
	margin: auto;
}

.header-image {
	width: 100%;
}
.header-image img {
	width: 100%;
	display: block;
}

.nav-language {
	position: absolute;
	width: 50%;
	text-align: right;
	margin-top: -60px;
	right: 0;
}

.nav-language ul { 
	white-space:nowrap; 
} 

.nav-language li { 
	display:inline;
	margin-right: 10px;
}

.nav-language li a {
	color: #b0976d;
}

.nav-language li a:hover {
	color: #FFF;
}

.nav-language-mobile {
	display: none;
}

@media only screen and (max-width: 767px) {
	.nav-language {
		display: none;
	}
	
	.nav-language-mobile {
		display: block;
	}
}

/*INTRO */
.intro {
	width: auto;
}

.intro-container-text {
	width: auto;
	padding: 80px 60px 80px 60px;
}

.intro-container-specs {
	width: auto;
	padding: 0px 80px 40px 80px;
}

.intro-container-specs-row {
	display: table;
	padding-bottom: 20px;
	width: 100%;
}

.intro-container-specs-box {
	float: left;
}

.intro-box-small {
	padding-top: 32px;
	width: 15%;
}

.intro-box-empty {
	padding-top: 32px;
	width: 5%;
}

.intro-box-big {
	padding-top: 0px;
	width: 80%;

}

/* MAGO */
.mago-container {
	width: 100%;
	background-color: #fff;
	padding: 60px 0px 40px 0px;
}

.mago-container-specs {
	width: auto;
	padding: 0px 80px 40px 80px;
}

.mago-container-row {
	width: 100%;
	display: table;
	padding-bottom: 20px;
	margin: auto;
	max-width: 700px;
}

.mago-container-box {
	float: left;
	width: 100%;
}
.mago-container-box ul {
	color: #575756;
	text-align: center;
	list-style-type: none;
}
.mago-container-box ul li {
	padding: 4px;
}

.mago-logo {
	width: 100%;
}
.mago-logo img {
	margin: auto;
}

.zucchetti-logo {
	width: 100%;
	padding-bottom: 60px;
}
.zucchetti-logo img {
	margin: auto;
	max-width: 280px;
}


@media only screen and (max-width: 767px) {
	
	.included-container-box {
		width: 100%;
	}
	
}

/*HARDWARE */
.hardware {
	width: auto;
	padding: 80px 20px 80px 20px;
}

.hardware-container-text {
	width: auto;
	padding: 40px 60px 10px 60px;
}

.hardware-container-people {
	width: auto;
	padding: 0px 80px 40px 80px;
}

.hardware-container-row {
	display: table;
	padding-bottom: 20px;
	width: 100%;
}

.hardware-container-box {
	float: left;
}

.hardware-image {
	width: 35%;
}
.hardware-image img {
	width: 100%;
}

.hardware-box-empty {
	padding-top: 32px;
	width: 5%;
}

.hardware-text {
	width: 60%;
	margin-top: -15px;
}

.hardware-footer-image img {
	width: 100%;
}

#hardware-image-desktop {
	display: block;
}
#hardware-image-mobile {
	display: none;
}

.hardware-logo {
	width: 100%;
	padding-bottom: 40px;
}
.hardware-logo img {
	margin: auto;
	max-width: 160px;
	padding: 20px
}

@media only screen and (max-width: 767px) {
	
	.hardware-image {
		width: 100%;
	}

	.hardware-box-empty {
		display: none;
	}

	.hardware-text {
		width: 100%;
	}
	
	#hardware-image-desktop {
		display: none;
	}
	#hardware-image-mobile {
		display: block;
	}
	
}

/*ASSISTENZA */
.assistenza-image img {
	width: 100%;
}

.assistenza {
	width: auto;
	padding-bottom: 60px;
}

.assistenza-container-text {
	width: auto;
	padding: 40px 60px 0px 60px;
}

.logo-teamviewer {
	max-width: 120px;
	padding-top: 10px;
	padding-bottom: 20px;
	margin: auto;
}

.assistenza-container-specs {
	width: auto;
	padding: 0px 60px 40px 60px;
}

.assistenza-container-specs-row {
	width: 100%;
	display: table;
	padding-bottom: 20px;
}

.assistenza-container-specs-box {
	float: left;
	width: 33%;
}
.assistenza-container-specs-box p {
	text-align: justify;
}

#assistenza-box-1 p, #assistenza-box-1 h3 {
	padding-right: 10px;
}

#assistenza-box-2 p, #assistenza-box-2 h3 {
	padding-left: 20px;
}

#assistenza-box-3 p, #assistenza-box-3 h3 {
	padding-left: 40px;
}

@media only screen and (max-width: 767px) {
	
	.assistenza-container-specs-box {
		width: 100%;
	}
	
	#assistenza-box-2 p, #assistenza-box-2 h3 {
		padding-left: 0px;
	}

	#assistenza-box-3 p, #assistenza-box-3 h3 {
		padding-left: 0px;
	}
	
}

/*CONTACT */
.contact {
	width: auto;
}

.contact-container-text {
	width: auto;
	padding: 40px 60px 0px 60px;
}

.contact-container-form {
	width: auto;
	padding: 0px 60px 40px 60px;
}

.form-row {
	width: 100%;
	display: table;
	padding-bottom: 20px;
}

.form-box {
	float: left;
}
.form-box label {
	width: 100%;
	font-family: 'Noto Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: #1d5b88;
}

.form-box input, .form-box textarea {
	padding: 10px;
	border: solid 1px #d2d2d2;
	margin-top: 4px;
	margin-bottom: 4px;
	background-color: #FFF;
}
.form-box input::placeholder , .form-box textarea::placeholder  {
	color: #d2d2d2;
}

.box-50 {
	width: 50%;
}
.box-50 input, .box-50 textarea {
	width: 90%;
}

.box-100 {
	width: 100%;
}
.box-100 input, .box-100 textarea {
	width: 95%;
}

.form-container-submit {
	width: 100%;
	text-align: center;
}

#form-submit {
	color: #FFF;
	padding: 4px 20px 5px 20px;
	margin: auto;
	text-transform: uppercase;
	background-color: #1d5b88;
	box-shadow: none;
	border: none;
}

.form-container-info {
	width: 95%;
	text-align: left;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 40px;
	border-left: solid 4px #1d5b88;
	display: none;
	background-color: #FFF;
}

@media only screen and (max-width: 767px) {
	
	.box-50 {
		width: 100%;
	}
	.box-50 input, .box-50 textarea {
		width: 95%;
	}
	
}

/* FOOTER */
footer {
	width: 100%;
}

footer a {
	color: #FFF;
}
footer a:hover {
	color: #FEFEFE;
}

.footer-content {
	width: 100%;
	text-align: center;
	background-color: #1d5b88;
	min-height: 125px;
	padding: 40px 0px 40px 0px;
}
.footer-content img {
	height: 45px;
	padding-top: 10px;
	margin: auto;
}

.text-footer {
	font-size: 14px;
	line-height: 24px;
	color:#FFF;
	padding-top: 15px;
}