@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab+Highlight:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');


body,html{margin: 0px; height: 100%}
body{font-family: 'Montserrat', sans-serif; font-size:12px; color: #000; background-color: #fff}


h1 {font-family: 'Zilla Slab Highlight', cursive; font-weight: 700; font-size: 3.5rem;}
h1 small, .h1{margin-top: 1rem; display: block; font-size: 2.5rem; line-height: 3rem;}

h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {font-weight: 500}

h2, .h2 {font-size: 1.5rem;}
h3, .h3 {font-size: 1.3rem; line-height: 1.85rem;}

h4 {font-size: 1.35rem; font-weight: 700; margin: 0; font-family: 'Zilla Slab Highlight', cursive; display: inline; background-color: #fff;}
.h4 {font-size: 1.35rem; font-weight: 700; margin: 0; font-family: 'Zilla Slab Highlight', cursive; display: inline-block;}

h5, .h5 {font-size: 1rem; font-weight: 700;}

.h2_mini {font-size: 1rem; font-weight: bold;}
.h2_big {font-size: 2.8rem; font-weight: bold; font-family: 'Zilla Slab Highlight', cursive; display: inline; color: #fff;}
.big {font-size: 3rem;}

.vh-75 { height: 75vh!important;}
.vh-25 { height: 25vh!important;}
.padding-top-200 {padding-top: 200px;}


.padding-50 {padding-top: 50px; padding-bottom: 50px}
.padding-top-50 {padding-top: 50px;}
.padding-bottom-50 {padding-bottom: 50px}

a {text-decoration: none;}
.small {font-size: 100% !important}

/*
rosso originale : #ED373E
rosso TEST : #d93239
rosso: #D9000D
verde: #E0EDD1
grigio: #DEDEDE*/


.bg-red {background-color: #d93239;}
.bg-green {background-color: #E0EDD1;}
.bg-grey {background-color: #DEDEDE;}
.bg-lightblue {background-color: #eaf4fa;}
.bg-black {background-color: #000;}
.c-white {color: #FFF;}
.c-grey {color: #c8c8c8;}
.c-red {color: #d93239;}



.menu{padding-left: 0px}
.menu li{ display: inline-block; }
.menu li a{ color: #000; font-size: 15px; font-weight: 500; padding: 5px 15px; position: relative;transition: all 0.3s}
.menu li a:hover{ color: #d93239; text-decoration: none;}
.menu li a::before{content:url(../img/menu_hover.png);;position: absolute;width: 34px; height: 16px; left: 50%; top: -10px; 
	transform: translateX(-50%);transition: all 0.5s; opacity: 0}
@media (min-width: 768px){
	.menu li a:hover::before{opacity: 1}
}


#contatti .icon-cont{cursor: pointer;}
#contatti .icon-cont img{  filter: grayscale(100%);transition: all 0.5s}
#contatti .icon-cont .hide_contacts{opacity: 0; transition: all 0.5s}
#contatti .icon-cont:hover .hide_contacts{opacity: 1}
#contatti .icon-cont:hover img{filter: none;}

@media (max-width: 767px){
	h1 {font-size: 1.7rem}
	h1 small, .h1{font-size: 1.5rem; line-height: 1.5rem;}
}

@media (max-width: 768px){
	#logo {position: absolute; z-index: 9999999; width: 80px}
	#menu-cont {max-height: 0; overflow: hidden; transition: all 0.5s;}
	body.menu-active #menu-cont {max-height: 460px;}

	#menu { background-color: rgba(255,255,255,0.8); margin: 0px -30px 0px -30px; padding: 100px 0px 50px}
	#menu li{display: block; text-align: center;}
	#menu li a{font-size: 20px;line-height: 40px}

}

@media (min-width: 990px){

	.padding-100 {padding-top: 100px; padding-bottom: 100px}
	.padding-top-100 {padding-top: 100px;}
	.padding-bottom-100 {padding-bottom: 100px}
	.padding-200 {padding-top: 200px; padding-bottom: 200px}
	.padding-top-200 {padding-top: 200px;}
	.padding-bottom-200 {padding-bottom: 200px}

}

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

.footer a {color: #fff; text-decoration: none}
.footer a:hover {color: #292c4d; text-decoration: underline;}





#menu-btn {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 99999
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 4px;
  background-color: #333;
  margin: 4px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-7px, 10px) ;
  transform: rotate(-45deg) translate(-7px, 10px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-0px, -5px) ;
  transform: rotate(45deg) translate(0px, -5px) ;
}