/*
 fb / css 2018
*/

@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

@keyframes avvio {
    from {color: #f2f2ee;}
    to {color: #8b723e;}
}
/* Caratteri */
@font-face {
  font-family: BariolLight;
  src: url('Bariol-Light.otf') format('opentype');
  font-style: normal;
}

/* @font-face {
    font-family: BariolRegular;
    src: url('bariol_regular-webfont.woff2') format('woff2'),
         url('bariol_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}*/


@font-face {
    font-family: BariolRegular;
    src: url('bariol_regular-webfont.eot');
    src: url('bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('BariolRegular_w.ttf') format('truetype'),
    url('bariol_regular-webfont.svg#bariolregular') format('svg'),
         url('bariol_regular-webfont.woff2') format('woff2'),
         url('bariol_regular-webfont.woff') format('woff'),
         
         url('Bariol_Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: Bariol;
  src: url('Bariol_Regular_Italic.otf') format('opentype');
  font-style: italic;
   font-weight: normal;
  
}


@font-face {
  font-family: geomanist-black-webfont;
  src: url('geomanist-black-webfont.ttf') format('truetype');
  font-style: normal;
}

@font-face{ 
    font-family: 'geomanist-regular-webfont';
    src: url('geomanist-regular-webfont.eot');
    src: url('geomanist-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('geomanist-regular-webfont.woff') format('woff'),
         url('geomanist-regular-webfont.ttf') format('truetype'),
         url('geomanist-regular-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_iconsregular';
    src: url('bariol_icons-webfont.eot');
    src: url('bariol_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('bariol_icons-webfont.woff2') format('woff2'),
         url('bariol_icons-webfont.woff') format('woff'),
         url('bariol_icons-webfont.ttf') format('truetype'),
         url('bariol_icons-webfont.svg#bariol_iconsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'geomanistitalic';
    src: url('geomanist-black-italic-webfont.eot');
    src: url('geomanist-black-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('geomanist-black-italic-webfont.woff2') format('woff2'),
         url('geomanist-black-italic-webfont.woff') format('woff'),
         url('geomanist-black-italic-webfont.ttf') format('truetype'),
         url('geomanist-black-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*Stili principali */

html, body {
  box-sizing: border-box;
  font-size: 100%;
  overflow: hidden;
  text-rendering: optimizeLegibility;
    margin: 0px;
    padding: 0px;
    background-color: #f2f2ee;

}
*, *:before, *:after {
  box-sizing: inherit;
}




/* ====  Loader ==== */
#hola{
    width: 100vw;
    height: 100vh;
    background-color: #f2f2ee;
    position: fixed;
    z-index: 999;
    /* background-image: url(rotate.php); */
    background-image: url(sfondo.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

/* ====  Contenuto  ==== */

.page-wrap{
    overflow-x: hidden;
    height: 100vh;
    background-color: #f2f2ee;
    margin: 0px;
    padding: 0px;
    
}

.home{
  height: 100%;
  position: relative;
  border: none;
  margin: 0 auto;
}


#diagonale {
    
    width: 100%;
    height: 100vw;
    -webkit-transform: skew(-10deg); 
    -moz-transform: skew(-10deg); 
    -o-transform: skew(-10deg); 
    background: #f2f2ee; 
    /* border-left: 1px solid #8b723e;  */
    margin-left: 53%; 
    opacity: 0.8;
    
}

.text-wrap {
    
    position: absolute;
    top: 2vw;
    left: 3vw;
    width: 80vw;
    height: 90%;
    background-color: transparent;
    
}

h1  {
    font-size: 2.2vw;
    letter-spacing: 1px;
    font-weight: 500;
    font-family: 'geomanist-regular-webfont';
    color: #8b723e;
    /*border-bottom: 1px solid #8b723e;*/
    margin-top: 0.5em;
    padding-bottom: 0vw;
    line-height: 1.15;
}

h2  {
    font-size: 3.5vw;
    letter-spacing: 0.1vw;
    font-weight: 500;
    font-family: 'geomanist-black-webfont';
    color: #8b723e;
    margin-bottom: 0vw;
    border-top: 1px solid rgba(139, 114, 62, .7);
    /*border-bottom: 1px solid rgba(139, 114, 62, .7);*/
    /*border-top: 1px solid;*/
    /*padding-bottom: 1vw;*/
    padding-top: 13vw;
    margin-top: -0.5vw;
    line-height: 1.15;
    
}
.testa {
    width: 100vw; 
    clear: both; 
    float: left; 
    /*margin-top: 2vw; border-top: 1px solid rgba(139, 114, 62, .7);*/
}

.fondo {
    width: 100vw;
    clear:both;
}

.intestazione {
    width: 30vw; 
    float: left;
}
.contatti span.b:hover, .contatti span:hover, .contatti a:hover {/*animation: fadein 1s;*/ text-decoration: none; color:  #677b87;}

.blocco_contatti {
    font-family: geomanist-regular-webfont;
    font-size: 2vw;
    color: #8b723e;
    max-width: 20vw;
    line-height: 1.2;
    float: left;
    padding-top: 0.2vw;
    margin-left: 31vw;
}

.contatti a:link, .contatti a:visited, .contatti a:hover {
    color: #677b87; 
    text-decoration: none;
    line-height: 1.1;
}

.contatti span, .contatti span.b {
    font-family: 'bariol_iconsregular';
    font-size: 3vw; text-transform: lowercase;
    width: 3.5vw;
    display: inline-block;
    color: #8b723e;
    text-decoration: none;
}

.servizi {clear: both;}

.competenze {
    font-family: BariolRegular; 
    font-size: 1.2vw;
    color:#8b723e;
    width: 66vw;
    padding-right: 1vw;
    float: left;
    margin-left: 0vw;
    line-height: 1.3;
    letter-spacing: 0.3px;
    max-width: 26vw;
    /* padding-left: 0.5vw;*/ 
    padding-top: 2vw;
}


#NAimg {display: none; position:relative;
    position: absolute;
    left: 26vw;
    top: 4vw; 
    z-index: 100;
    width: 60vw;
    animation: fadein 1s;
      -webkit-transform: rotate(-6deg); 
    -moz-transform: rotate(-6deg); 
    -o-transform: rotate(-6deg); 
}
#NAimg1 {display: none; position:relative;
    position: absolute;
    left: 25.5vw;
    top: 3vw; 
    z-index: 100;
    width: 30vw;
    animation: fadein 1s;
    border-radius: 5px;
     -webkit-transform: rotate(8deg); 
    -moz-transform: rotate(8deg); 
    -o-transform: rotate(8deg); 
}
#NAimg2 {display: none; position:relative;
    position: absolute;
    left: 3vw;
    top: 2vw; 
    z-index: 100;
    width: 40vw;
    animation: fadein 1s;
    border-radius: 11px;
    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg); 
    -o-transform: rotate(-10deg); 
}


.NAimg3 {display: none; 
    position: absolute;
    left: 3vw;
    top: 0vw; 
    z-index: 100;
    width: 18vw;
    animation: fadein 1s;
    border-radius: 5px;
    filter: hue-rotate(203deg);
    filter: saturate(80%);
}

.NAimg4 {
    left: 23vw;
    top: 0vw; 
}

.NAimg5 {
    left: 43vw;
    top: 0vw; 
    
}

.NAimg6 {
    left: 63vw;
    top: 0vw; 
}

.NAimg7 {
    left: 3vw;
    top: 15vw;
}

.NAimg8 {
    left: 23vw;
    top: 15vw;
}

.NAimg9 {
    left: 43vw;
    top: 15vw;
}

.NAimg10 {
    left: 63vw;
    top: 15vw;
}

.NAimg11 {
    left: 3vw;
    top: 30vw;
}

.NAimg12 {
    left: 23vw;
    top: 30vw;
}

.NAimg13 {
    left: 43vw;
    top: 30vw;
}

.NAimg14 {
    left: 63vw;
    top: 30vw;
}



.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    /*background-color: #212611;*/
    background-color: #445159;
    overflow-x: hidden;
    transition: 0.5s;
    margin: 0 auto;
   
}

.overlay_header {
    width: 80%;
    margin: 3.5vw 3vw 1.5vw 3vw;
    padding-bottom: 1.5vw;
    border-bottom: 1px solid  #f2f2ee;
}
.overlay-wrap {
    width:100%;}

.overlay-content {
    float: left;
    width: 25vw;
    margin-left: 3vw;
    padding-bottom: 3vw;
   
    
    /* margin-top: 30px;*/
}
.overlay-content_2 {

    position: relative;
    float: left;
    margin-left: 3vw;
    font-family: BariolRegular;
    color: #f2f2ee;
   max-width: 26vw;
   padding-bottom: 3vw;
   margin-top: 0.1vw;
}

.overlay-content_2 p {
    font-size: 17px; 
    color: #f2f2ee;
    line-height: 120%;
    text-indent: -19pt;
    margin: 5px;
    letter-spacing: 0.1px;
}

.overlay-content_2 p em {font-family: BariolRegular; font-style: italic;}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #f2f2ee;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #818181;
}

.overlay .closebtn {
    position: absolute;
    top: 1vw;
    right: 3vw;
    font-size: 3vw;
    font-family: bariol_iconsregular;
}


/* Schema progetti */

 
	
	.P1 {font-size: 13pt; margin: 0 0 0 6vw; color:#f2f2ee; margin-top: 0.1vw; font-family: BariolRegular; line-height:120%}
	
	.T1 {color:#f2f2ee; font-family: 'geomanist-regular-webfont'; font-size: 15pt; letter-spacing:0.011cm; font-weight:normal;}
	
	.T2 { color:#f2f2ee; font-size: 10pt; letter-spacing: 0.004cm;}
	
	.T3 { color:#f2f2ee; vertical-align:super; font-size:65%; line-height:115%;}
	
	.P2 { font-size: 13pt; margin: 0; margin-top: 0.7vw; line-height:120%; color:#f2f2ee; font-family: BariolRegular;}
	.P3 { font-size:13pt; margin: 0.7vw 0 0 10vw; color:#f2f2ee; line-height:120%; font-family: BariolRegular;}
     
     .data {line-height: 150%;} 

	strong 	{color:#f2f2ee; font-family: 'geomanist-regular-webfont'; font-size: 1.45vw; letter-spacing:0.011cm; font-weight:normal;}
	
@media screen and (max-height: 450px) {
  
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;}
    
    .competenze { margin-bottom: -10vw;} /* mah...*/
    
  
  }

@media all and (max-width: 1024px)
{
  html, .page-wrap {overflow-y: visible;}
  
  .overlay-content {display: block; float: none;  width: 100%;}
  .overlay-content_2 {
     margin-left: 2vw;
     float: none;  
     width: 90%;
     max-width: 90vw;
     top: 15%;
     border-top: 1px solid;
     padding-top: 20px;
     padding-bottom: 20px;}
  
  
  
  #diagonale {display: none;}
  
  .home {border: 4vw solid #f2f2ee;}
  
  h1 { font-size: 5vw; padding-bottom: 6vw; width: 90vw;}  
  h2 {font-size: 5.5vw; padding-bottom: 2vw; padding-top: 4vw;}
  
  .text-wrap { width: 90vw;}
  
  /*.fondo {margin-top: 20vw;}*/
  
  .blocco_contatti {clear: both; width: 100vw; max-width: 90vw; margin-left: 0vw; padding-bottom: 3vw;}
  .contatti {margin-top: 1vw; font-size: 8vw; max-width: 100vw; line-height: 1.3;}
  .contatti span, .contatti span.b {font-size: 8.5vw; width: 11vw; line-height: 1.3;}
  .overlay-content .T1 {font-size: 13pt;}
  .competenze {font-size: 4vw;  max-width: 90vw;  width: 90vw; margin-left: 0px; margin-top: 1vw;}
  .P1, .P2, .P3 {margin-top: 4vw;}
  .overlay-content_2 p {text-indent: 0pt;}
  a.closebtn {display: none; color: transparent;}
  .P2 {width: 90%;}
  .fine {display: none;}
  .overlay_header {
    width: 80%;
    margin: 3.5vw 3vw 1.5vw 3vw;
    padding-bottom: 4vw;
    border-bottom: 1px solid  #f2f2ee;
}
  
strong 	{color:#f2f2ee; font-family: 'geomanist-regular-webfont'; font-size: 5vw; letter-spacing:0.011cm; font-weight:normal;}
  
}

@media only screen and (max-device-width: 1824px) and (orientation : landscape) {
   
    body { background-color: #f2f2ee;}
    .page-wrap { margin-left: 2vw; margin-bottom: 3vw;}
    .animate-border {border: none;  /* transition: border .5s .2s ease;*/
     height: 100%;}
      /* .competenze {padding-left: 2vw; padding-right: 1vw;}*/
}


* {font-feature-settings: "liga" 1, "rlig" 1, "salt", "dlig" 1;}