@charset "UTF-8";
/* CSS Document */


:root {
    --color-primary: #3B291C;
    --color-secondary: #95D9D4;
	--color-THIRD: #FFFFFF;
	--color-fourth: #6BB9B6;
	--font-primary: 'Roboto', sans-serif;
	--font-secondary: 'Roboto Slab', serif;
	--font-small-size: 13px;
	--font-medium-size: 20px;
	--font-subtitle-size: 22px;
	--font-big-size: 40px;
	--font-title-size: 65px;
	--font-light: 300;
	--font-regular: 400;
	--font-medium: 600;
	--font-bold: 700;
	--line-height: 36px;
	--line-height-h: 46px;
	--line-height-title: 65px;
}


* {
	font-family: var(--font-primary);
	margin:0;
	color: var(--color-primary);
}

body{
	height:100%;
	width: 100%;
	margin: 0;
	background-color: #FFF;
}

h1 {
	font-family: var(--font-secondary);
	color: var(--color-primary);
	font-size: var(--font-title-size);
	font-weight: var(--font-light);
	line-height:  var(--line-height-title);
}

h2 {
	font-family: var(--font-secondary);
	color: var(--color-secondary);
	font-size: var(--font-big-size);
	font-weight: var(--font-light);
	line-height:  var(--line-height-h);
}

h2 b {
	font-family: var(--font-secondary);
	color: var(--color-secondary);
	font-size: var(--font-big-size);
	font-weight: var(--font-regular);
	line-height:  var(--line-height-h);
}

h3 {
	color: var(--color-secondary);
	font-size: var(--font-medium-size);
	font-weight: var(--font-light);
}

h4 {
	font-size: var(--font-subtitle-size);
	font-weight: var(--font-regular);
	font-family: var(--font-secondary);
}
  
 
strong b {
	font-weight: var(--font-regular);
}
  
  p {
	font-weight: var(--font-light);
	font-size: var(--font-medium-size);
	color: var(--color-primary);
	line-height: var(--line-height);
  }

  a {
	color: var(--color-primary);
  }
  
  p strong, b {
	font-weight: var(--font-regular);
  }

  input {
	width: 90%;
	height: 55px;
	border: solid 1px #C2CED5;
	margin-bottom: 30px;
	text-align: center;
	font-size: 16px;
  }
  
  textarea {
	width: 85%;
	height: 120px;
	border: solid 1px #C2CED5;
	padding: 1% 5% 5% 5%;
	text-align: center;
	font-size: 16px;
  }
  
  .flag-privacy {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .centra p {
	text-align: center!important;
  }

  .centra {
	text-align: center!important;
  }

  .left {
	  text-align: left !important;
  }

  .right {
	text-align: right !important;
}
  
  :focus {
	outline-style: none;
  outline-width: 0px;
  }
  
  .clearfix {
	clear: both;
  }

  .linea {
	  width: 100%;
	  height: 1px;
	  border: none;
	  background-color: #EEEEEE;
  }

  .bianco {
	  color: var(--color-THIRD)!important;
  }

  .titolo {
	  margin-top: 20px;
  }




/* MARGINI */

.margin-top-soft {
	margin-top: 20px;
}


.margin-top-medium {
	margin-top: 40px;
}


.margin-top-hard {
	margin-top: 80px;
}

.margin-bottom-soft {
	margin-bottom: 20px;
}


.margin-bottom-medium {
	margin-bottom: 40px;
}


.margin-bottom-hard {
	margin-bottom: 80px;
}

.margin-line {
	margin-top: -65px;
}

.margin-line-2 {
	margin-top: -45px;
}


/* LINGUA */

.combo_lingua {
	width:40px;
	height:30px;
	background:url(../img/icn_arrow_down.svg) rgb(255, 255, 255);
	background-repeat:no-repeat;
	background-position:right center;
	background-color:#FFF;
	border:none;
	color: var(--color-primary);
	font-size: var(--font-medium-size);
}



/* TOP */

.top {
	position: absolute;
	height: auto;
	width: auto;
	margin-top: 70px;
	margin-left: -30px;
	z-index: 100;
	
}

/* FOOTER */

.footer {
	padding: 20px 0 90px 0;
	border-bottom: solid 1px #EEE;
}

.footer h3 {
	font-family: var(--font-secondary)!important;
	color: var(--color-secondary);
	font-weight: var(--font-light);
	font-size: var(--font-small-size);
}

.footer h3 b {
	font-family: var(--font-secondary)!important;
	color: var(--color-secondary);
	font-weight: var(--font-regular);
	font-size: var(--font-small-size);
}


.footer a {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	line-height: 28px;
	text-decoration: none;
}

.footer p {
	font-size: 16px;
	line-height: 28px;
}

.footerCopy {
	position: relative;
	width: calc(100% - 180px);
	margin-left: 90px;
	padding: 25px 0;
	display: flex;
	justify-content: space-around;
}

.footerCopy p {
	font-size: 14px;
}

/* STRUTTURA */

.flex {
	display: flex;
}

.flexJustify {
	justify-content: space-between;
}

.flexBottom {
	align-items: baseline;
}

.flexCenter {
	align-items: center;
}

.flexColumn {
	flex-direction: column;
}

.container {
	position: absolute;
	width: calc(100% - 60px);
	margin-left: 30px;
	height: 100%;
	top: 0px;
	background-color: #FFF;
}

.box100 {
	position: relative;
	width: 100%;
	height: auto;
}

.boxImg {
	position: relative;
	width: calc(100% - 180px);
	margin-left: 90px;
	height: auto;
}

.boxInt {
	position: relative;
	width: calc(50% - 140px);
	padding: 180px 70px;
	background-position: center center;
	background-size: cover;
}

.boxInt p, .boxInt b, .boxInt h4 {
	color: var(--color-THIRD);
}

.boxTop {
	position: relative;
	width: calc(100% - 140px);
	padding: 180px 70px;
	margin-top: 30px;
	background-position: center center;
	background-size: cover;
}

.boxTop p, .boxTop b {
	color: var(--color-THIRD);
}

.boxTop h4 {
	color: var(--color-THIRD);
}

.boxSezioni {
	position: relative;
	width: 100%;
	margin-top: 30px;
	height: auto;
}

.boxTxt {
	position: relative;
	width: 1000px;
	left: 50%;
	margin-left: -500px;
	padding: 110px 0;
	height: auto;
}

.boxTxt p a {
	color: var(--color-primary);
}

.topSezioni {
	position: relative;
	width: 100%;
	margin-top: 30px;
}

.topSezioni img {
	width: 50%;
	margin: 0;
	padding: 0;
}

.titoloSezione {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.titoloSezione h2 {
	background-color: white;
	padding: 10px 20px;
	color: var(--color-secondary);
	font-size: 18px;
	letter-spacing: 1.64px;
	font-weight: 300;
}



/* PULSANTI */


.btn {
	padding: 15px 25px 15px 25px;
	font-size: var(--font-small-size);
	font-weight: var(--font-bold);
	background-color: var(--color-secondary);
	text-decoration: none;
	color: white;
	cursor: pointer;
}
  


/* HOME */


.cover {
	position: relative;
	width: 100%;
	margin-top: 30px;
	height: calc(100% - 60px);
}


.title {
	position: absolute;
	margin-left: 120px;
	height: 100vh;
	z-index: 90;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: baseline;
}

.title h1 {
	color: var(--color-THIRD);
}

.title h1 b {
	font-weight: 400;
	color: var(--color-THIRD);
	font-family: var(--font-secondary);
}

.title h4 {
	color: var(--color-THIRD);
}


.online h2 {
	font-family: var(--font-secondary);
	color: var(--color-secondary);
	font-size: var(--font-title-size);
	font-weight: var(--font-light);
	line-height:  var(--line-height-title);
}

.online h2 b {
	font-family: var(--font-secondary);
	color: var(--color-secondary);
	font-size: var(--font-title-size);
	font-weight: var(--font-regular);
	line-height:  var(--line-height-title);
}

.boxOrdina {
	position: relative;
	width: calc(100% - 20px);
	margin-left: 10px;
	padding: 80px 0px;
	height: auto;
	background-image: url('../img/bkg_online.jpg');
	background-size: 100%;
	background-position: center center;
}





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

	:root {
	--font-big-size: 28px;
	--font-title-size: 45px;
	--line-height-h: 35px;
	--font-medium-size: 16px;
	--line-height: 30px;
	--line-height-title: 50px;
	}

	.boxImg {
		width: calc(100% - 100px);
		margin-left: 50px;
	}

	.boxTxt {
		padding: 80px 0;
		height: auto;
	}

	.boxInt {
		width: calc(50% - 80px);
		padding: 70px 40px;
	}

	.boxTxt {
		position: relative;
		width: 700px;
		left: 50%;
		margin-left: -350px;
		padding: 110px 0;
		height: auto;
	}

	.titolo {
		margin-top: 100px;
	}

	.footer a {
		font-size: 13px;
		line-height: 23px;
		text-decoration: none;
	}
	
	.footer p {
		font-size: 13px;
		line-height: 23px;
	}

}