html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*================================= CUSTOM CSS ================================================*/
/*=================================================================================================*/


#armonia-contract .top-icon {width: 300px; height: auto;}

#armonia-contract .backgorund-title-01 .top-icon {width: 30px; height: 30px;}

#armonia-contract #form-contact .top-icon {width: 30px; height: 30px;}

.main-button {
	float: left;
	background-color: #dc022b;
	color: #fff;
	padding: 10px;
	width: 100%;
}

.main-button:hover {
	background-color: #000;
}










.col-33.position-relative i {display: none;}

.video-background iframe {
	float: left;
	width: 100%;
	height: 500px;
}

.video-background {
 	
 background-image: url(https://www.armoniagroup.it/img/background-02.jpg);
 background-position: center center;
 background-size: cover;
  float: left;
  width: 100%;
  position: relative;
  height: 600px;
}

.video-background .icon-video {
	width: 200px;
	position: absolute;
	margin-left: -100px;
	left: 50%;
	bottom: 60px;
	z-index: 20;
}

.video-background .icon-video img {
	width: 100%;
	height: auto;
}

.backgorund-popup-video {position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	background-color: rgba(0,0,0,0.7);
	display: none;
}

.backgorund-popup-video .popup-video {
	width: 890px;
	height: 500px;
	position: absolute;
	left: 50%;
	margin-left: -445px;
	top: 50%;
	margin-top: -250px;
}

.close-video .fa {font-size: 40px;
	position: absolute;
	right: -40px;
top: -50px;
	color: #fff;
}

.close-video:hover {
	cursor: pointer;
}


@media screen and (max-height: 600px) {
	
	.backgorund-popup-video .popup-video {width: 530px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -215px;
top: 50%;
margin-top: -150px;
}

.video-background iframe {height: 300px;}
	
}


@media screen and (max-width: 980px) {
	
	.backgorund-popup-video .popup-video {    width: auto;
    height: 500px;
    position: absolute;
    left: 10px;
    right: 10px;
    margin-left: auto;
    top: 50%;
    margin-top: -250px;}
    
    .close-video .fa {    right: 0px;
    top: -60px;}
	
}

@media screen and (max-width: 670px) {
	
	.video-background iframe {height: 300px;}
	
	.backgorund-popup-video .popup-video {margin-top: -150px;}
	
	
	.video-background {    height: 400px;}
	
	.video-background .icon-video {    width: 150px;
    position: absolute;
    margin-left: -75px;
    left: 50%;
    bottom: 30px;
    z-index: 20;}
	
}

@media screen and (max-width: 580px) {
	
	 .close-video .fa {    right: 0px;
    top: -70px;}
	
	.video-background iframe {height: 270px;}
	
	.backgorund-popup-video .popup-video {margin-top: -135px;}
	
}

@media screen and (max-width: 480px) {
	
	.close-video .fa {right: 20px;
top: -50px;}
	
}





#footer a:hover {
	color: #dc022b !important;
}

/*================================= CUSTOM CSS ================================================*/
/*=================================================================================================*/

/*================================= FINE RESET CSS ================================================*/
/*=================================================================================================*/

#cookie-bar {background:#000000; height:auto; line-height:24px; color:#ffffff; text-align:center; padding:3px 0;}

#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}

#cookie-bar.fixed.bottom {bottom:auto; top:0;}

#cookie-bar p {margin:0; padding:0;}

#cookie-bar a {color:#ffffff; display:inline-block; border-radius:3px; text-decoration:none; padding:0 6px; margin-left:8px;}

#cookie-bar .cb-enable {background:#ffffff; color:#000000;}

#cookie-bar .cb-enable:hover {background:#000000; color:#ffffff;}

#cookie-bar .cb-disable {background:#990000;}

#cookie-bar .cb-disable:hover {background:#bb0000;}

#cookie-bar .cb-policy {background:#ffffff; color:#000000;}

#cookie-bar .cb-policy:hover {background:#000000; color:#ffffff;}

html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* ==========================================================================
   MENU MOBILE
   ========================================================================== */

#menu-mobile {display:none; background-color: #2a2a2a; padding: 70px 40px 20px; position: fixed; top: 0; right: 0; width:180px; overflow-y: scroll;}

#menu-mobile a {color:#ffffff;}

#menu-mobile #flag a {float: right;}

#menu-mobile #flag {float: right; width: 100%; position: relative;}

#header #menu-mobile ul li {margin-left: 0px; text-align: right; margin-bottom: 10px; width: 100%; font-size:18px;}

#header #menu-mobile ul li a:hover {text-decoration: none; color:#dc022b;}

#header #menu-mobile ul li ul {margin-top:10px; margin-bottom:25px;}

#header #menu-mobile ul li ul li {font-size: 14px; list-style-type: square;}

#menu-mobile ul {margin-right:0;}

#menuButton {display:none; font-size:30px; position: absolute; top:20px; right:40px; z-index:90;}

#menuButton .fa {color:#dc022b;}

#menuButton:hover {cursor:pointer; text-decoration: none;}

#menuButton a:hover {text-decoration: none;}

.border-bottom {border-bottom:1px solid width:100%;}

/* ==========================================================================
   CHIUSURA MOBILE
   ========================================================================== */


/* ==========================================================================
   General styles
   ========================================================================== */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: subpixel-antialiased;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
    -webkit-font-smoothing: antialiased!important;
    -webkit-overflow-scrolling: touch;
    text-rendering: optimizeLegibility !important;
    text-align: center;
}

.container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

strong {font-weight: 800;}

.clearfix {clear: both;}

* {box-sizing: border-box;}

*::-moz-selection { background: #ff8fa4; }

*::selection { background:  #ff8fa4; }

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

a:hover {text-decoration: none;}

b {font-weight:bold;}

i {font-style: italic; font-size:16px;}

em {font-style: italic;}

.active {text-decoration: underline;}

ul li {list-style-type: none;}

#navbar-mobile {display: none;}

.space-150 {height: 150px; width:100%; float:left;}

.space-170 {height: 170px; width:100%; float:left;}

.space-120 {height: 120px; width:100%; float:left;}

.space-100 {height: 100px; width:100%; float:left;}

.space-25 {height: 25px; width:100%; float:left;}

.space-20 {height: 20px; width:100%; float:left;}

.space-35 {height: 35px; width:100%; float:left;}

.space-15 {height: 15px; width:100%; float:left;}

.space-40 {height: 40px; width:100%; float:left;}

.space-50 {height: 50px; width: 100%; float:left;}

.space-60 {height: 60px; width: 100%; float:left;}

.space-75 {height: 75px; width: 100%; float:left;}

.space-135 {height: 135px; width: 100%; float:left;}

.space-80 {height: 80px; width: 100%; float:left;}

.space-90 {height: 90px; width: 100%; float:left;}

.no-padding-left {padding-left:0px!important;}

.no-padding {padding:0px!important;}

.no-padding-bottom {padding-bottom:0px!important;}

.no-padding-top {padding-top:0px!important;}

.no-padding-horizontal {padding-left:0px!important; padding-right:0px!important;}

.no-padding-vertical {padding-top:0px!important; padding-bottom:0px!important;}

.no-margin-vertical {margin-top:0px!important; margin-bottom:0px!important;}

.no-margin-bottom {margin-bottom:0px!important;}

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

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

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

.float-left {float:left!important;}

.float-right {float:right!important;}

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

.position-relative {position:relative;}

.position-absolute {position:absolute;}

.position-fixed {position:fixed;}

.display-none {display:none!important;}

.display-block {display:block!important;}

small {font-size:14px; color:#ffffff;}

h1 {
	font-family: 'Roboto', sans-serif;
	font-size: 58px;
    font-weight: 400;
    margin-bottom:25px;
}

h2 {
	font-family: 'Roboto', sans-serif;
	font-size: 36px;
    font-weight: 400;
    margin-bottom:25px;
    line-height: 46px;
}

h3 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
    font-weight:400;
    margin-bottom:25px;
    line-height: 30px;
}

h4 {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	margin-bottom:20px;
	line-height: 22px;
}

h5 {
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	font-weight: 400;
}

h6 {   
    font-family: 'Overpass Mono', monospace;
	font-size: 16px;
	font-weight: 300;
}

.col-05 {
    width:5%;
    padding:10px;
    float:left;
}

.col-10 {
    width:10%;
    padding:10px;
    float:left;
}

.col-15 {
    width:15%;
    padding:10px;
    float:left;
}

.col-1-12 {
    width:16.66%;
    padding:10px;
    float:left;
}

.col-20 {
    width: 20%;
    padding:10px;
    float:left;
}

.col-25 {
    width:25%;
    padding:10px;
    float:left;
}

.col-30 {
	width:30%;
	float:left;
	padding:10px;
}

.col-33 {
	width:33.3%;
	float:left;
	padding:10px;
}

.col-35 {
	width:35%;
	float:left;
	padding:10px;
}

.col-40 {
    width: 40%;
    padding:10px;
    float:left;
}

.col-45 {
    width: 45%;
    padding:10px;
    float:left;
}

.col-50 {
	width:50%;
	padding:10px;
	float:left;
}

.col-60 {
	width:60%;
	padding:10px;
	float:left;
}

.col-65 {
	width:65%;
	padding:10px;
	float:left;
}

.col-66 {
	width:66.66%;
	padding:10px;
	float:left;
}

.col-70 {
	width:70%;
	padding:10px;
	float:left;
}

.col-75 {
	width:75%;
	padding:10px;
	float:left;
}

.col-80 {
	width:80%;
	padding:10px;
	float:left;
}

.col-90 {
	width:90%;
	padding:10px;
	float:left;
}

.col-100 {
	width:100%;
	padding:10px;
	float:left;
}

.row {
	clear:both;
	width:100%;
	float:left;
}

.more-padding {padding:30px;}

.dark-row {background-color:#000000;}

.light-row {background-color:#3c3c3c;}

.black-row {background-color:#000000;}

.grey-row {background-color:#ebebeb;}

.small {font-size:12px;}

.display-mobile {display:none;}

.display-desktop {display:block;}

.border-black {border-color:#000000!important;}

.txt-black {color:#000000!important;}

.txt-white {color:#ffffff!important;}

.txt-blue {color:#1c4ebf!important;}

.txt-red {color:#dc022b!important;}

.border-white {border:1px solid #ffffff;}

.font-weight-light {font-weight:100!important;}

.opacity-0 {opacity: 0!important;}

.opacity-1 {opacity: 1!important;}

.top-icon {width:40px; height:40px; margin:0 auto;}

.button-box {
	width:100%; 
	border:1px solid #ffffff; 
	text-align: center;
	float: left;
	font-style: italic;
}

.button-box h1 {
	text-align: left;
	color:#ffffff;
	line-height: 80px;
	font-weight:400;
}

.button-box .col-20 {
	border-left:1px solid #ffffff;
}

.button-box .col-10 {
	border-left:1px solid #ffffff;
}

.button-box .arrow-button {
	background-image: url(../img/arrow-button.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width:100%;
	height: 20px;
}

.small-text {font-size:14px; line-height: 21px;}

.txt-underline {text-decoration: underline;}

/* ==========================================================================
   CSS HEADER E TOP BAR
   ========================================================================== */

#main-header {
	position: absolute;
	top:0;
	left:0;
	right:0;
	z-index:10;
}

#logo {
	max-width:200px;
	float: left;
	padding-top: 25px;
}

#header {
	background-color:#ffffff;
}

#header .col-30 {padding-left:40px;}

#header .col-70 {padding-right:40px;}

#header #list-menu ul li {
	float:left;
	font-weight: 400;
	padding-left:35px;
	line-height: 75px;
	height:75px;
}

#header #list-menu {}

#header #list-menu ul li a {
	color:#000000;
}

#header #list-menu ul li a:hover {
	color:#dc022b;
	text-decoration: none;
}

#header #list-menu ul {
	float: right;
}

#header #list-menu ul .dropdown:hover .sub-menu {
	display: block;
}

#header #list-menu .sub-menu {
	position: absolute;
	background-color:#ffffff;
	padding-bottom: 0px;
	padding-top:0px;
	display: none;
	top: 75px;
}

#header #list-menu .sub-menu li:hover {
	background-color: #dc022b;
	color: #000000!important;
}

#header #list-menu .sub-menu li {
	padding-right:50px;
	color:#000000;
	font-weight:400;
	padding-bottom:10px;
	width: 300px;
	text-align: left;
	height:55px;
	line-height: 55px;
}

#header #list-menu img {
	margin-right: 10px;
    padding-top: 5px;
    width: 25px;
    position: relative;
	top: 6px;
}

#flag {
	margin-left: 30px;
	margin-bottom: 40px;
}

#header {font-family: "Alegreya Sans",sans-serif!important;}

/* ==========================================================================
   CSS HOME PAGE - CARATTERISTICHE
   ========================================================================== */
 


/* ==========================================================================
   CSS HOME PAGE - NOSTRI SERVIZI
   ========================================================================== */
 
section .nostri-servizi {
	position:relative;
	width:100%;
}

.nostri-servizi .col-20 h3, h4 {
	margin-bottom:5px;
}

.nostri-servizi .col-20 .col-100 {
	padding-top:20px;
	padding-bottom:20px;
}

.nostri-servizi .hover-img-c:hover h4 {color:#ffffff;} 

/* ==========================================================================
   HOVER EFFECT
   ========================================================================== */

.col-33:hover .hover-img-c {
	display: block;
}

.col-33 .col-100 .hover-img-c {
	position:absolute;
	top:0;
	left:0;
	right: 0;
	z-index: 20;
	background-color:#dc022b;
	display: none;
	bottom:0;
	padding: 10px;
	cursor: pointer;
	color:#ffffff;
}

.col-20:hover .col-100 .hover-img-c {
	display: block;
}

.nostri-servizi .col-20 .col-100 {
	border:1px solid #dc022b;
	min-height: 140px;
}

.nostri-servizi .col-20 .col-100 img {
	width:80px;
}

.col-20 .col-100 .hover-img-c {
	position:absolute;
	top:0;
	left:0;
	right: 0;
	z-index: 20;
	background-color:#dc022b;
	display: none;
	bottom:0;
	padding: 10px;
	cursor: pointer;
	color:#ffffff;
	padding-top: 20px;
}

.col-20 .col-100 .hover-img-c h3, h4 {color:#ffffff;}

.col-20 .col-100 h3, h4 {color:#dc022b;}

.col-33:hover img {opacity: 0.6;}

.col-25:hover img {opacity: 0.6;}

/* ==========================================================================
   CSS HOME PAGE - CATEGORIE
   ========================================================================== */

.categorie-prodotti .col-33:hover h5 {
	color:#dc022b;
}

/* ==========================================================================
   CSS CATEGORIA 
   ========================================================================== */
   
.categoria img {
	margin-bottom:20px;
}

.categoria .col-25 {
	min-height: 290px;
}

/* ==========================================================================
   CSS BACKGROUND TITLE
   ========================================================================== */
 
.background-row-02 {
	background-image: url(../img/home-page/parallax-render3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
	background-position: center bottom;
}

.background-row-03 {
	background-image: url(../img/chi-siamo/team-black-2.jpg);
	background-position: center top;
	background-size: cover;
	width:100%;
}

.background-row-04 {
	background-image: url(../img/chi-siamo/team-black.jpg);
	background-position: center center;
	background-size: cover;
	width:100%;
}

.backgorund-title-02 {
	background-image: url(../img/home-page/parallax-render6.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
	background-position: center bottom;
}
   
.backgorund-title-01 {
	background-image: url(../img/home-page/parallax-chi-siamo5.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
}

.padding-title {
	padding-top:250px;
	padding-bottom:300px;
}

.padding-title-x2 {
	padding-top:200px;
	padding-bottom:200px;
}

.background-img h1 {
	position: absolute;
	z-index:20;
	bottom:40px;
	left:200px;
}

.background-produzione {
	background-image: url(../img/produzione/produzione-10.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
	background-position: center center;
}

.background-progettazione {
	background-image: url(../img/progettazione/progettazione-10.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
	background-position: center center;
}

/* ==========================================================================
   CSS HOME PAGE - ULTIMI PROGETTI - NEWS - PROGETTI
   ========================================================================== */

.news .col-33:hover .hover-img-box {
	display: block;
}

.news .col-33 .hover-img-box {
	background-color: rgba(0,0,0,0);
}

.news .col-33:hover h6 {
	color:#dc022b;
}

.news .col-33:hover .date {
	color:#dc022b;
}

.news .col-33 .text-news {
	text-align: left;
}

.news .col-33 img {
	margin-bottom:15px;
}

.news .col-33 h6 {
	line-height:26px;
}

.news .col-33 .date {
	margin-top:15px;
	font-weight: 400;
}

.news .col-33 .read {
	margin-top:15px;
	font-weight: 400;
}

.news .col-33 {
	min-height: 600px;
}

.cover-row {
    position: relative;
    min-height: 100px;
}
.profile-wrap {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
}
.profile-pic {
    width: auto;
    height: 100%;
}

.box-3-column .col-33 img {margin-bottom:20px;}

.box-3-column .col-33 h6 {margin-bottom:5px; line-height: 20px;}

.box-3-column .col-33 {min-height: 340px;}

/* ==========================================================================
   CSS TITOLO PAGINA - BREADCRUMBS
   ========================================================================== */
   
.title-page {
	padding-top:50px;
	padding-bottom:50px;
}

.breadcrumbs {
	text-align: left;
}

.border-bottom {
	border-bottom: 1px solid #ebebeb;
	padding-bottom:25px;
}

/* ==========================================================================
   CSS DETTAGLIO DEL PROGETTO
   ========================================================================== */
   
.col-1-12 {
	width:16.66%;
	overflow: hidden;
	min-height: 120px;
}

.col-1-12:hover img {opacity: 0.6;}

.gradient-background {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	position: absolute;
	bottom:0px;
	left: 0px;
	right:0px;
	z-index:10;
}

.caratteristiche-prodotto .hover-img-c .fa {
	font-size:50px;
}

.caratteristiche-prodotto .hover-img-c {
	padding-top: 60px;
	display: none;
	position: absolute;
	background-color: red;
	top:0;
	right:0;
	bottom:0;
	left:0;
	color:#ffffff;
	z-index:90;
}

.caratteristiche-prodotto .hover-img-c h4 {color:#ffffff;}

.caratteristiche-prodotto .col-33 p {
	margin-bottom:15px;
}




/* ==========================================================================
   CSS PAGINA CHI SIAMO
   ========================================================================== */
   
#text-team ul li {
	list-style-type: disc;
	margin-bottom:10px;
	font-weight: 400;	
}

#text-team ul {
	padding-left:40px;
}

#staff .col-20 {
	min-height:480px;
}

#staff .col-33 {
	min-height:700px;
}

#staff .col-25 {
	min-height:550px;
}

/* ==========================================================================
   CSS IMMAGINI IN BACKGROUND
   ========================================================================== */

.back h1 {
	font-style: italic;
	margin-top: 130px;
	font-weight: 400;
}

.background-01 {
	background-image: url(../img/background/background-01.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width:100%;
	height:350px;
}

.background-02 {
	background-image: url(../img/background/background-02.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width:100%;
	height:350px;
}

.background-03 {
	background-image: url(../img/background/background-03.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width:100%;
	height:350px;
}

.background-04 {
	background-image: url(../img/background/background-04.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width:100%;
	height:350px;
}

/* ==========================================================================
   NUMBER
   ========================================================================== */

#elenco .col-25 {
	min-height: 350px;
}

.number {
	font-size:150px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    text-align: center;
    color: #dc022b;
}

/* ==========================================================================
   PAGINA ARMONIA CONTRACT
   ========================================================================== */
   
#processo h2 {
	text-align: right;
}

#processo p {
	text-align: left;
}

.border-vertical {
	width:1px;
	height:400px;
	background-color: #dc022b;
	margin:-5px auto;
}

/* ==========================================================================
   PAGINA ANOSTRI SERVIZI
   ========================================================================== */

#servizi .col-50 .ico {
	max-width: 140px;
	margin: 10px auto 40px auto;
}

#servizi .col-50 {
	padding:30px;
}

/* ==========================================================================
   CAMPI DI TESTO
   ========================================================================== */

fieldset select {background-color:#ffffff;}

select:focus {outline: none;}

button {background-color:#dc022b; color:#ffffff; height:40px; width:100%; border:none; font-size: 16px; font-family: 'Roboto', sans-serif;}

button:hover {background-color:#000000; cursor:pointer;}

fieldset, input, textarea {border:1px solid #000000;}

fieldset, select {color:#226678;}

select, {border:none;}

input, fieldset {height: 30px; padding-left: 15px; height:40px;}

fieldset, select, input, textarea {font-family: 'Roboto', sans-serif; font-weight: lighter; font-size:14px; width:100%; margin: 0; background-color: rgba(255, 255, 255, 0.8); font-weight:400;}

textarea {}

.label {color:#226678; font-family: 'Roboto', sans-serif; font-size:14px; padding-top:10px; padding-bottom: 10px;}

input[type="button"] {background-color:#000000; border:1px solid #000000; color:#000000; font-family: 'Roboto', sans-serif; cursor:pointer;}

input[type="button"]:hover {color:#000000;}

input[type="checkbox"] {float:left; width:20px; height:30px; border-radius:0; margin-right:20px;}

textarea {padding:10px; height:100px; font-weight:400;}

#success {border: 1px solid green; color: green; margin-top: 20px; padding: 10px; display: none;}

.error {background-color: rgba(255,0,0,0.7); color:#ffffff;}

#privacy {float:left;}

/* ==========================================================================
   CSS FOOTER
   ========================================================================== */
 
#footer {
	font-size:12px;
	color:#000000;
	text-align: left;
	line-height: 20px;
} 

   
#footer .col-50 img {
	max-width:200px;
	float: left;
}

#footer .col-50, .col-30 {
	font-weight: 400;
}

#footer .col-50 .col-100 ul li {
	float: left;
	margin-right:25px;
}

#footer .col-50 .col-100 ul {
	margin-top:20px;
}

#footer .col-30 .col-50 ul li {
	margin-bottom:15px;
}

#footer .col-20 .col-100 img {
	max-width: 30px;
	margin-right: 20px;
	float: left;
	margin-bottom: 20px;
}

#footer .fa {
	font-size:30px;
	color:#000000;
	margin-top:80px;
}

#footer .fa:hover {
	cursor: pointer;
}

.contact-info {font-size:14px;}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

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

@media screen and (max-width: 1280px) {
	
	#header #list-menu ul li {margin-left: 0px; padding-left: 25px;}
	
}

@media screen and (max-width: 1170px) {
	
	#top-bar .col-90 {width:85%;}
	
	#top-bar .col-10 {width:15%;}
	
}

@media screen and (max-width: 1145px) {
	
	.col-25 .hover-img-box .text-hover {margin-top:30%;}
	
}

@media screen and (max-width: 1090px) {
	
	.caratteristiche-prodotto .hover-img-c {padding-top:20px;}
	
	#header #list-menu {display:none;}
	
	#menuButton {display: block;}
	
	#flag img {width: 40px; float: right; padding: 7px 0 7px 7px;}
	
	#header {position: fixed; top: 0; right:0; left: 0;}
	
	#logo {padding-bottom: 20px;}
	
	#staff .col-33 {min-height: 580px;}
	
	#staff .col-25 {min-height: 430px; width: 25%;}
	
	#allestitori .col-33 {min-height: 620px;}
	
}

@media screen and (max-width: 1045px) {
	
	#header #list-menu ul li {margin-left:25px;}
	
	#video .col-20 {display: none;}
	
	#video .col-60 {width: 100%}
	
}

@media screen and (max-width: 1020px) {
	
	.col-20 {width: 25%;}
	
	.nostri-servizi .col-20 {width: 25%;}
	
}

@media screen and (max-width: 1000px) {
	
	.col-25 .hover-img-box .text-hover {margin-top:20%;}
	
}

@media screen and (max-width: 980px) {
	
	.hover-img-c .small-text {font-size:12px; line-height: 18px;}
	
	#elenco .col-25 {width:33.33%}
	
	#footer .fa {margin-top:10px;}
	
}

@media screen and (max-width: 945px) {
	
	#footer .col-20 .col-100 img {margin-right: 25px; margin-bottom: 20px;}
	
	.news .col-33 {min-height: 505px;}
	
}

@media screen and (max-width: 925px) {
	
	.nostri-servizi .col-33 .col-60 {width:90%;}
	
	.nostri-servizi .col-33 .col-60 .col-80 {width:80%;}
	
	.nostri-servizi .col-33 .col-60 .col-20 {width:20%;}
	
	.nostri-servizi .col-33 .col-20 {width:5%;}
	
	.hover-img-c .small-text {display:none;}
	
}

@media screen and (max-width: 900px) {
	
	.gradient-background h2 {font-size:24px;}
	
}

@media screen and (max-width:880px) {
	
	.col-25 {width:33.33%}
	
	.col-25 .hover-img-box .text-hover {margin-top:30%;}
	
}

@media screen and (max-width:860px) {
	
	.nostri-servizi .col-20 .col-100 {min-height: 160px;}
	
}

@media screen and (max-width:850px) {
	
	.col-33 .col-30 {width:100%;}
	
	.col-33 .col-30 img {max-width:100px; margin: 0 auto;}
	
	.col-33 .col-70 {width:100%; text-align: center;}
	
	#staff .col-33 {min-height: 550px;}
	
	#staff .col-25 {min-height: 450px;}
	
	#allestitori .col-33 {min-height: 500px;}
	
}

@media screen and (max-width:820px) {
	
	h5 {font-size:30px;}
	
	.space-150 {height:80px;}
	
	.ultimi-progetti .col-33 {min-height:250px;}
	
	.ultimi-progetti .col-25 {min-height:250px;}
	
	#footer .col-20 {width:100%;}
	
	.categoria .col-25 {min-height:240px;}
	
}

@media screen and (max-width:780px) {
	
	#top-bar .col-90 {width:80%;}
	
	#top-bar .col-10 {width:20%;}
	
	.col-33 .hover-img-box .text-hover {margin-top:40%;}
	
	#servizi .col-50 {width:100%;}
	
	.col-20 {width: 33.33%;} 
	
	.padding-title {padding-top:100px; padding-bottom:150px;}
	
}

@media screen and (max-width:760px) {
	
	#armonia-contract .space-100 {height: 50px;}
	
	#button .col-33 {width: 100%;}
		
	
	#chi-siamo .col-60 {width:100%;}
	
	#chi-siamo .col-40 {width:100%;}
	
	.space-150 {height:100px;}
	
	.nostri-servizi .small-text {display: none;}
	
	.col-33 .hover-img-c {min-height: 390px;}
	
	.news .col-33 {min-height: 465px;}
	
}

@media screen and (max-width: 720px) {
	
	.news .col-33 {min-height: 565px;}
	
}

@media screen and (max-width: 700px) {
	
	.nostri-servizi .col-33 .col-60 {width:98%;}
	
	.nostri-servizi .col-33 .col-20 {width:1%;}
	
	.col-1-12 {width:25%;}
	
	h3 {font-size:18px;}
	
	#elenco h3 {font-size:24px;}
	
	.caratteristiche-prodotto .hover-img-c h3 {text-align: center; line-height: 22px;}
	
	.caratteristiche-prodotto h3 {text-align:left;}
	
	.ultimi-progetti .col-33 {width:50%;}
	
	.ultimi-progetti .col-25 {width:50%;}
		
	.sp-arrows {display:none!important;}
	
	.categorie-prodotti .col-33 {width:100%;}
	
	#footer .col-30 {width:50%;} 
	
	#staff .col-33 {min-height: 550px;}
	
	#staff .col-25 {    min-height: 610px;  width: 50%;}
	
	#allestitori .col-33 {min-height: 460px;}
	
	.col-33 {width:50%;}
	
	.box-3-column .col-33 {min-height: 310px;}
	
	.hide-mobile {display: none;}
	
}

@media screen and (max-width:640px) {
	
	#formSend .col-25 {width: 100%;}
	
	#armonia-contract h2 {font-size: 28px;     line-height: 38px;}
	
	#video iframe {height: 300px;}
	
	.nostri-servizi .col-33 {width:100%;}
	
	.nostri-servizi .col-33 h3 {font-size:24px;}
	
	.nostri-servizi .col-33 .hover-img-c {max-height:360px; min-height: auto;}
	
	.display-none-640 {display:none;}
	
	.nostri-servizi .hover-img-c h4 {margin-bottom:0;}
	
	section .nostri-servizi {position: static;}
	
	.col-25 .hover-img-box .text-hover {margin-top:20%;}
	
	.caratteristiche-prodotto .hover-img-c .fa {font-size:40px;}
	
	#elenco .col-25 {width:50%;}
	
	.nostri-servizi .col-20 {width:50%;}
	
	.nostri-servizi .col-20 .col-100 {min-height: 160px;}
	
}

@media screen and (max-width: 625px) {
	
	#footer .col-50 {width:100%;}
	
	#footer .col-30 {width:100%;}
	
	#footer .col-30 .col-50 {width:50%;}
	
	#footer .fa-arrow-circle-up {margin-top: 0px;}
	
}

@media screen and (max-width: 610px) {
	
	.display-none-610 {display:none;}
	
	.col-25 {width:50%;}
	
	h5 {font-size:20px;}
	
	.caratteristiche-prodotto .hover-img-c h3 {display:none;}
	
	.caratteristiche-prodotto .hover-img-c h4 {display:none;}
	
	.caratteristiche-prodotto .hover-img-c {padding-top:10px;}
	
	.caratteristiche-prodotto .hover-img-c .fa {font-size: 50px; margin-top: -25px; top: 50%; position: relative;}
	
	.gradient-background {display: none;}
	
	#staff .col-33 {min-height: 580px; width: 100%;}
	
	#staff .col-25 {min-height: 580px; width: 100%;}
	
	#allestitori .col-33 {min-height: 580px; width: 50%;}
	
}

@media screen and (max-width: 590px) {
	
	#top-bar .col-90 {width:70%;}
	
	#top-bar .col-10 {width:30%;}
	
	#top-bar p {font-size:12px; letter-spacing:normal;}
	
	.col-20 {width: 50%;} 
	
	#cookie-bar {font-size:12px;}
	
	#cookie-bar .cb-enable {border-radius: 0; margin:0; border:1px solid #000000;}
	
	#cookie-bar .cb-policy {border-radius: 0; margin:0; border:1px solid #000000;}
	
	#cookie-bar p {width: 100%; float:left;}
	
	
	.display-menu-hide {display: none;}
}

@media screen and (max-width: 540px) {
	
	.parallax .button-box .col-90 {width:80%;}
	
	.parallax .button-box .col-10 {width:20%;}
	
	.news .col-33 {width:100%;}
	
	.news .col-33 .hover-img-box .text-hover {margin-top: 50%;}
	
	.title-page h1 {font-size:38px;}
	
}
	
@media screen and (max-width: 500px) {
	
	.col-33 .col-30 img {max-width: 60px;}
	
	.caratteristiche-prodotto .col-33 {width:100%;}
	
}

@media screen and (max-width: 480px) {
	
	#staff .col-33 {min-height: 470px;}
	
	#staff .col-25 {min-height: 470px;}
	
	#allestitori .col-33 {min-height: 470px;}
	
	.caratteristiche {display:none;}
	
	.categorie-prodotti .col-33 {width:100%;}
	
	h5 {font-size:30px;}
	
	.col-1-12 {width:33.33%;}

	.back h1 {font-size:40px;}
	
	#processo .col-20 {display:none;}
	
	#processo .col-40 {width:50%;}
	
	#processo .col-40 h2 {font-size: 18px;}
	
	#processo .row {margin-bottom:20px;}
	
	.ultimi-progetti .col-33 {width:100%;}
	
	.ultimi-progetti .col-25 {width:100%;}
	
	#produzione .box-3-column .col-33 {min-height: 100px;}
	
	#residenziale .box-3-column .col-33 {min-height: 100px;}
	
	#contract .box-3-column .col-33 {min-height: 100px;}
		
}

@media screen and (max-width: 430px) {
	
	#processo .col-40 {width:100%;}
	
	#top-bar .col-90 {width:50%;}
	
	#top-bar .text-right {text-align: left!important;}
	
	#top-bar .col-10 {width:50%;}
	
	.display-none-430 {display:none;}
	
	#logo {max-width: 240px;}
	
	#menuButton {margin-top:0;}
	
	#menu-mobile {width: 60%;}
	
	.col-25 {width:100%;}
	
	.col-1-12 {width:50%;}
	
	#elenco .col-25 {width:100%; min-height:auto;}
	
	.col-20 {width: 100%;} 
	
	#staff .col-33 {min-height: 420px;}
	
	#staff .col-25 {min-height: 420px;}
	
	#allestitori .col-33 {min-height: 420px;}
	
}

@media screen and (max-width: 390px) {
	
	#logo {max-width: 200px; padding-bottom: 20px; padding-top: 25px;}
	
}