/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
VARIABILI
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

:root {
--margine: 6vh;
--margine-mobile: 10px;
--margine-mezzo: 20px;
--margine-alto: 80px;
--colore-principale: #462e0a;
--colore-secondario: #f9f1e4;
--colore-testi: #111;
--font-principale: "Plus Jakarta Sans", sans-serif;
--lungo:100px;
--medio:40px;
--piccolo:20px;
--c-primary: #dde1d2;
--c-secondary: #b2c73a;
--font-size: 1.3em;
--animation-time: 25ms;
}


/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
BASE
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

body, html{
margin:0; 
padding:0; 
width:100%;
font-family: "Pliant", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:"wdth" 100;	
color: #000;
background: #fff;
line-height: 1.4em;
font-size: 1em;
}


#pointer-dot {  left: -10px;  top: -10px;   width: 20px;  height: 20px;  border: 1px solid #edf202;  position: fixed;  border-radius: 20px; z-index: 99999;pointer-events: none;display:none}
#pointer-ring {   left: 0;    top: 0;   width: 6px;   height: 6px;   padding: 0px;  background:#000;   position: fixed;   border-radius: 12px;   z-index: 99999; pointer-events: none;}



h1{font-size: 1.5em; /* 72px */ font-weight: 400;}
h2{font-size: 1.3em; /* 48px */  font-weight: 400;}

a{color:var(--colore-testi); text-decoration:none }
a:hover{color:var(--colore-testi); text-decoration:none}


hr{ width: 100%; border: none; margin: 10px 0 20px 0; height:1px; background:var(--colore-testi);}

.sottolineato{text-decoration:underline}
.t-center{text-align:center}
.t-right{text-align: right}
.testo_destra{text-align: right}
.t-left{text-align:left;}
.fit{display:block;width:100%;}
.add-top{margin-top:var(--margine);}
.mtop{padding-top:var(--margine);}
.ptop{padding-top:var(--margine-mezzo);}
.mbottom{padding-bottom:var(--margine);}
.sezione{display:inline-block; width:100%; padding:var(--margine);}
.sezione.colorata{background-color:var(--colore-secondario)}
.margini{padding:var(--margine-alto) 0px;}
.riga{display:block; width:100%; }
.iniziale{padding:200px 0px var(--margine) 0px;}
.paddington{padding:0px 2vw; box-sizing: border-box; text-align: center}
.foto_griglia{float:left; width:100%; margin-bottom:30px;}
.border-top{border-top:1px solid #000}
.border-bottom{border-bottom:1px solid #000}

input[type=email], input[type=text], .campo_form{float:left;background:#fff; width:100%; max-width:500px; line-height:30px; padding:5px; box-sizing: border-box; font-size:0.8em; border:1px solid #000; margin-right:20px}
input[type=checkbox]{ display:inline-block;  line-height:30px; box-sizing: border-box; font-size:0.8em}

.cerca{float:left; line-height:30px; padding:5px 20px; box-sizing: border-box; background:#000; color:#fff; border:1px solid #000}
.cerca:hover{color:#fff; border:1px solid #000}

/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MENU
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.header {display:block;width:100%; top:0px; left:0px; z-index: 3; position: fixed; transition: transform 0.6s ease-in; transform: translate3d(0, 0, 0);  padding:0px; box-sizing: border-box;  height:120px; background: #fff }

.header.bloccata { transform: translate3d(0, 0, 0)!important; }

#logo{display:inline-block; float:left; height:48px; line-height:120px;}
#logo img{height:48px;}

#menu{float:right; height:120px;}
#menu ul{float:left; list-style: none; margin:0; paddng:0;}
#menu ul li{display:inline-block; margin-left:2em; margin:0px 10px; padding:0; }
#menu ul li a{display:block; font-size:var(--font-size); height:30px; line-height:30px; margin:45px 0px }
#menu ul li a:hover{text-decoration: underline }

.menu-mobile {display: none;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-overlay {
  background: #fff;
  width: 100vw;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  transform: translate(0, -100%);
  transition: transform .5s ease;
  padding: 0px;
  box-sizing: border-box;
  overflow-y: scroll;
  z-index: 99; }

.menu-overlay.open {
  transform: translate(0, 0); }

.menu-overlay .content {
  display: block;
  width: 100%;
  position: relative;
  padding: 0px;
  box-sizing: border-box;
  height: 100%; }

.menu-overlay .tabellona {
  display: table;
  width: 100%;
  position: relative;
  padding: 0px;
  box-sizing: border-box;
  height: 100%; }


.menu-overlay .tabellona .cellona {
  display: table-cell; vertical-align: middle; padding:0px; box-sizing: border-box}


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

.header {  width:100%; padding:0px; height:90px; line-height:90px; z-index:103}	

#logo{position:absolute; top:0px; left:10px; z-index:101;line-height:90px;}
#logo img {height:36px}

	
.menu-mobile {position:fixed; display: block;top:20px;right:10px;z-index:3;width:50px; height:50px; padding: 0px; border-radius:10px; z-index:101}
	
.menu-icon {position: relative; width: 50px;height: 50px;cursor: pointer; }
.menu-icon .menu-icon__cheeckbox {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    z-index: 2;
    -webkit-touch-callout: none;
    position: absolute;
    opacity: 0; }
.menu-icon div {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 12px; }
.menu-icon span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--bar-bg, #111);
    border-radius: 1px;
    transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965); }
.menu-icon span:first-of-type {top: 0; }
.menu-icon span:last-of-type {bottom: 0; }
.menu-icon.active span:first-of-type,
.menu-icon .menu-icon__cheeckbox:checked + div span:first-of-type {transform: rotate(45deg); top: 5px; }
.menu-icon.active span:last-of-type,
.menu-icon .menu-icon__cheeckbox:checked + div span:last-of-type { transform: rotate(-45deg);bottom: 5px; }
.menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:first-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:last-of-type {width: 22px; }
	

.menu-overlay{font-size:1em; line-height:1em;}
#menu{float:left; width:100%; text-align:center; margin:0; padding:0; height:auto; line-height:auto}
#menu ul{float:left; width:100%; list-style: none;margin:0; padding:0}
#menu ul li{display:block; width:100%;float:left; margin:10px 0px; padding:0}
#menu ul li a{display:block;  text-transform:uppercase;  margin:0px; font-size:1.3em;}
	

input[type=email], input[type=text], .campo_form{width:100%; max-width:none; margin:20px 0px; }

.cerca{width:100%; text-align: center}


}







/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CUSTOM
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

#centro{position:relative; padding:120px 0px 0px 0px; z-index:2}
#contenuto{display:block; padding:0px 0px 40px 0px;}

#slider_hp{display:block; width: 100%; position:relative; height:auto; }
.slides_hp{display:inline-block; width: 100%;}
.slider {width: 100%; margin: 0px auto;}
.slick-slide {margin: 0px;}
.slick-slide img {width: 100%; height:auto;}


#sotto_menu{float:left;}
#sotto_menu ul{float:left; list-style: none; margin:0; padding:0;}
#sotto_menu ul li{display:inline-block; margin-right:1.5em; }
#sotto_menu ul li a{display:block; height:60px; line-height:60px;}
#sotto_menu ul li a:hover{text-decoration: underline }

.portfolio{display:block; width:100%;  padding:1em; box-sizing: border-box}
.portfolio .immagine{display:block; width:100%; height:50vh}
.portfolio .titolo{display:block; width:100%; margin:10px 0px 0px 0px}

#titolo_progetto h1{display:block; width:100%;  height:60px; line-height:60px;}


#dettaglio_progetto{text-align:right; }


.info{display:inline-block; height:60px; line-height:60px; }
.specifica_progetto{text-align:left; margin-bottom:40px; padding:10px; box-sizing: border-box; display: none}

#galleria{display:block; width:100%;}

#profile{text-align:center; font-size:var(--font-size); line-height:1.6em}


#we_do{display:inline-block; }
#we_do a{display:inline-block; margin-right:20px;}

#clients ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
	list-style: none;
	margin:0; padding:0
}

#clients ul li {
    text-align:left
}


#contact{font-size:var(--font-size); line-height:1.6em}
#contact a{text-decoration:underline}


/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MEDIA QUERY
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/


@media screen and (max-width: 1200px) {
/*BASE*/	

h1{font-size:24px;}
h2{font-size:18px;}
p{ font-size:1em;}	
#pointer-dot {display:none}
#pointer-ring {display:none}


.testo_destra{text-align:center!important}
.t-right{text-align:center!important}
.fix-top-mobile{margin-top:20px}
.add-top{margin-top:40px}
.ptop{padding-top:var(--margine-mobile)}
.margini{padding:var(--margine-mobile) 0px}
.mtop{padding-top:20px}
.mbottom{padding-bottom:var(--margine-mobile)}
.iniziale{padding:130px 0px 0px 0px!important;}	
.paddington{padding:0px 20px; box-sizing: border-box}
.sezione{ padding:20px 0px;}
	
.pulsante{ margin:10px 0px; }
.menu{visibility: visible}
	
	


#centro{position:relative; padding-top:90px; }	

#sotto_menu ul li{margin-right:1.5em; }
#sotto_menu ul li a{ height:auto; height:30px; line-height:30px}

	
.portfolio{padding:1em 0px; }
.portfolio .immagine{ height:60vh; min-height:500px}
	
#titolo_progetto h1{display:block; width:100%;  height:40px; line-height:40px;}

#dettaglio_progetto{text-align:left; }	
.info{display:inline-block; height:40px; line-height:40px; }
	
	
	#profile, #contact{font-size:1em}	
	
	#clients ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
	list-style: none;
}

#clients ul li {
    text-align:center
}
	
}