/*RICHIAMO FONT*/


@font-face {
    font-family: 'Cormorant';
    src: url('font/CormorantGaramond-Bold.ttf');
    src: 
        url('font/CormorantGaramond-Bold.ttf') format('truetype');
		
}

@font-face {
    font-family: 'Cormorant';
    src: url('font/CormorantGaramond-Medium.ttf');
    src: url('font/CormorantGaramond-Medium.ttf') format('truetype');
		
}

@font-face {
    font-family: 'Cormorant';
    src: url('font/CormorantGaramond-Regular.ttf');
    src: url('font/CormorantGaramond-Regular.ttf') format('truetype');
		
}

@font-face {
    font-family: 'Cormorant';
    src: url('font/CormorantGaramond-Light.ttf');
    src: url('font/CormorantGaramond-Light.ttf') format('truetype');
		
}

html {
  height: 100%;
  --wp-admin--admin-bar--height: 0 !important;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: Cormorant, Verdana;
	font-size: 16px; color:#323232; 
	word-spacing:2px;
}


p {
	font-family:Cormorant, Verdana; 
	font-size: 17px;
	font-weight:400;
	color:#000; 
	word-spacing:1px;
	line-height: 1.6;
	text-align:left;

}

h1 {
	width: 100%; 
	text-align: left;  
	font-family:Cormorant, Verdana; 
	font-weight: 600; 
	font-size: 28.5px; 
	letter-spacing: 3px; 
	color:coral;}

h2 {
	width: 100%; 
	text-align: center;  
	font-family:Cormorant, Verdana; 
	font-weight: 600; 
	font-size: 15px;
	word-spacing:1px;
	letter-spacing: .3px; 
	color:#000;
	line-height: 1.6;}


/*FINE RICHIAMO FONT*/



/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>INIZIO ENTANOS<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/




/*RESPONSIVE dimensioni Cellulare portrait ovvero < 576 IN QUESTO CAMPO INSERIRE TUTTI GLI STILI DI PARTENZA CHE POI VERRANNO MODIFICATI VIA VIA NELLE DIMENSIONI MAGGIORI*/







.doc-loader 
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;	
    background-color: white;
	 font-family: 'Montserrat', sans-serif, Arial;
    font-size: 15px; 	
    line-height: 35px;
    font-weight: 400;	
    color: #0D1529;
    height: 100%;
	margin:auto;
}

.doc-loader td 
{       
    text-align: center;
    vertical-align: middle; 
	margin:auto;
}

.doc-loader img
{
    width: 180px;
    height: 180px;        
}


.max-w1200 {
    max-width: 1200px!important;
            
}



/* Inizio Parallax 1 e 2 */




.parallax-container {
	position: fixed;
	overflow: hidden;
	width: 100%;
	height: 100%; /*da qua si cambia l'altezza del container*/
	z-index: 1027;
 }
            
.parallax-child-container {
	clip: rect(0, auto, auto, 0);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:102%; /*da qua si cambia l'altezza del container*/
}

#frontlashID{
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; /*da qua si cambia l'altezza interna dell'immagine*/
	transform: translateZ(0);
	will-change: transform;
	z-index: 1;
}
.fw-main-image{
    background-attachment:scroll;
    background: url(../img/home1.jpg) no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
			

.parallax-container .titolo-parallax{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 57%;
  transform: translateY(-150%);
  color: white;
  font-weight: 400;
  font-size:8vw;
  letter-spacing:6px;
  z-index:1028;
}
.parallax-container .sottotitolo-parallax {
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family:Lato-Light, Arial narrow;
  color: white;
  font-weight: 700;
  font-size:3vw;
  letter-spacing: 11px;
  z-index:1028;
}




.titolo-parallax2{
  position: relative;
  display: block;
  text-align: left;
  top: 20%;
  transform: translateY(-150%);
  font-family: Cormorant;
  color: white;
  font-weight: 700;
  font-size:2.8rem;
  letter-spacing: 0px;
  z-index:1028;
}
.sottotitolo-parallax2 {
  position: relative;
  top: 7%;
  display: block;
  text-align: left;
  transform: translateY(-50%);
  font-family:Saira-ExtraCondensed, Verdana;
  word-spacing: 8px;
  color: white;
  font-weight: 700;
  font-size:1.7rem;
  letter-spacing: 2px;
  z-index:1028;
  
}


.top-icone {position: relative;top: 7%;}

.icone-skills {position:relative; float: left; width:58px; height:auto; margin-bottom:1rem; margin-top:1rem; z-index:1028;}
.icone-skills path { fill:white;  opacity:1;}
.icone-skills path:hover {  fill:#4da29d; opacity:1;}


.icone-skills2 {position:relative; float: left; width:118px; height:auto; margin-top:-0.5rem; z-index:1028; }
.icone-skills2 path { fill:white;  opacity:1;}
.icone-skills2 path:hover {  fill:#4da29d; opacity:1;}





.sottotitolo2-parallax2 {
	position: relative;
	float:left;
	display: block;	
	text-align: left;
	transform: translateY(-50%);
	font-family:Saira-ExtraCondensed, Verdana;
	color: white;
	font-weight: 600;
	font-size: 1.7rem;
	top: 12%;
	letter-spacing: 2px;
	z-index:1028;
}



.corpo-parallax2 
{	list-style-type: none !important;
	position:relative;
	float:left;
	height:150px; 
	top:12%; 
	text-align: left;
	font-family: Lato-Light, Arial narrow;
	color: #ededed;
	font-size: 1rem;
	font-weight: 600;
	margin-left: 8rem;
	z-index:1028;
	
	
}
  
  
/*Fine Parallax 1 e 2*/





/*INIZIO ABOUT E CONTACT*/



.linea-v {border-left: 1px solid #BABABA; height:47px;}

.img-profilo  {width:100%; height:auto; position:relative; border-radius: 50%;}
.img-colonna  {width:70%; height:auto; position:relative;}



/*Bottone About e Contact*/

.display-pc{display:block;}
.display-cell{display:none;}

.btn-dark {
  color: #fff;
  background-color: rgb(50,50,50);
  border-color: rgb(50,50,50);
  font-family: Cormorant;
  font-size: 14.8px;
  padding: .4em 0.8em; /* padding dal testo dal bordo del bottone */
 
  
}

.btn-dark:hover {
  color: #fff;
  background-color: #111111;
  
}

.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, /* cambio colore al click sul tasto*/
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #111111; 
  border-color: #111111;
}

.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, /*bordo intorno al click sul tasto */
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0rem rgba();
}

.btn-dark:focus, .btn-dark.focus /*bordo intorno che rimane dopo il click sul tasto */
{
    box-shadow: 0 0 0 0rem rgba(82, 88, 93, 0.5);
}

/* Fine Bottone About e Contact*/


.container1 {
  width: 96%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}



/*Fine About*/



/*Inizio Form Contatti*/


.form-control{color: black;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #424242;
 font-family: ;
  font-size: 14.8px;}
.form-control:focus{color: #495057; background-color: #fff; border-color: rgb(50,50,50); outline: 0;box-shadow: 0 0 0 0rem rgba(230, 183, 91, 0.45);} /*bordo quando si clicca sui vari form*/
.has-error .form-control:focus{box-shadow: ; -webkit-box-shadow: ;}

/*Da qui posso cambiare il colore e gli altri attributi dei vari form VALIDI che di default vengono visualizzati in verde dopo aver inviato la richiesta informazioni*/

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: black;  /*questo è il colore del bordo di un form corretto*/
  padding-right: calc(1.5em + 0.75rem);
  background-image: url(""); /* Qua posso inserire un'icona che compare quando il form è corretto. Di defautl c'era la spunta verde */
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  
}


.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #333333;
  box-shadow: 0 0 0 0rem rgba(40, 167, 69, 0.25);
  
}



.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: black; /*Sceglie il colore del Autorizzo trattamento dei dati quando è valido*/
}



/*Da qui posso cambiare il colore e gli altri attributi dei vari form NON VALIDI*/


.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #b51515; /*bordo quando è invalido*/
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  
}


.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #b51515; /*bordo quando si compila qualcosa che prima era invalido*/
  box-shadow: 0 0 0 0rem rgba(220, 53, 69, 0.25); /* Ombra intorno*/
  
}



.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #111111; /*colore della scritta Autorizzo trattamento dati*/
  
}

/*Fine Form Contatti*/


/*FINE ABOUT E CONTACT*/






/* Inizio Footer*/

#top{opacity: 1; right:-20px; bottom: 65px; display:none; width:75.6px; height:36px; background:url("../img/tornasu.svg") no-repeat;cursor:pointer;font-size:12px;display:inline;position:fixed;z-index:100;text-indent:-9999px;}


footer {z-index: 18; height:auto; width:100%; border-top: 1px solid #bbb;}
footer a:link,
footer a:visited{text-decoration:none;}

.content_icon-footer { 
margin: 0 !important;
text-align: center;
float: none;
width: auto;}

.content_icon-footer:hover {cursor:pointer;}

.icone {width: 35px; height:auto; margin-left: 6px; margin-right: 6px;}
.d-home {display:none;}
.d-other {display:;}




/* Fine Footer*/





/*Projects  inizio*/


.project-box-image{position:relative; height: 247px; margin-bottom:  2.5px; opacity:1;}
.project-box-image:hover {position:relative; height:247px; margin-bottom:  2.5px;}


.parola-chiave {position:relative; background:white; height:247px; font-family: Railway-Regular; font-style: italic; font-size:19.5px; color: black; text-align:center; line-height: 250px;}
.parola-chiave:link {text-decoration:none;}


.artproject-box-image{position:relative; height: 447px; margin-bottom:  2.5px; opacity:1; max-width:350px;}
.artproject-box-image:hover {position:relative; height:447px; margin-bottom:  2.5px; max-width:350px;}
.artproject-box-image img {object-fit:cover;}

.artparola-chiave {position:relative; background:white; height:447px; font-family:Cormorant; font-style: italic; font-size:24.5px; color: black; text-align:center; line-height: 450px;}
.artparola-chiave:link {text-decoration:none;}
	

	
.image-animated-in{
    -webkit-transition: 1s all;/* change time according to interval set */
	-moz-transition: 1s all;
    transition: 1s all;
}
.image-animated-in:hover{
   transform: scale(1.2,1.2);
}


.image-animated-out{
     -webkit-transition: 1s all;/* change time according to interval set */
	 -moz-transition: 1s all;
	 transition: 1s all;
}	
.image-animated-out:hover{
   transform: scale(1,1); opacity: 1;
}

	

/*Projects fine*/



/*Inizio Galleria*/

#container3 {width: 100%; min-width:100%;  height: 420px; background: #E0E0E0; margin: auto;}

.text-title-gallery {
  position: relative;
  display: block;
  text-align: left;
  font-family: Saira-ExtraCondensed;
  color: #544f4e;
  font-weight: 700;
  font-size:2.2rem;
  letter-spacing: 0px;}
  
.text-gallery {
	float:center; 
	position:relative; 
	text-align: justify; 
	line-height: 1.8;  
	font-family:Raleway-Regular, Arial; 
	font-size: 12.7px;   
	font-weight: 400; 
	color:#544f4e; 
	word-spacing:2px;}
	
.text-gallery-corpo {
	float:left; 
	position:relative; 
	text-align: justify; 
	line-height: 1.4;  
	font-family:Raleway-Regular, Arial; 
	font-size: 12px; 
	color:#323232; 
	word-spacing:1px;}

/*Fine Galleria*/


	

/* Artwork projects*/

.gallery-text-holder
{
    position: absolute;
    top: 30px;
    left: 30px;
    bottom: 30px;
    right: 30px;
    z-index: 1;
	background:rgba(255,255,255, 0.7); /* colore dei rettangoli hover bianchi*/
    text-align: center;   
    display: none;    
	
}




.gallery-text-holder-noback
{
    position: absolute;
    top: 30px;
    left: 30px;
    bottom: 30px;
    right: 30px;
    z-index: 1;
    text-align: center;   
    display: none;    
	
}

#content .grid-item img 
{
    display: block;
    width: 100%;	 /* Margini interni alle foto*/
    height: auto;
    max-height: 100%;
    max-width: 100%;
	
}

.pp_pic_holder {top: 35%; left: 1%;}

#fullResImage img {width: 98vw !important; height:auto !important; margin: auto !important;}

.freccia {width: 20px; height: 20px; margin-top: 0; margin-left: 10px; margin-right: 10px; margin-bottom: 55px;}
.freccia:hover {opacity:.6;}

/* Fine*/









/*RESPONSIVE dimensioni Cellulare landscape ovvero (sm) >= 576*/
@media (min-width: 576px) {
	
	

/* Inizio Parallax 1 e 2 */


.parallax-container{
 
  height: 100%;  
}


 


.parallax-container .titolo-parallax{
 
  top: 53%;
  font-weight: 400;
  font-size:5.8vw;
  letter-spacing:11px;
}
.parallax-container .sottotitolo-parallax {
 
  top: 43%;
  font-weight: 600;
  font-size:2.4vw;
  letter-spacing: 11px;
}



.titolo-parallax2{
 
  top: 28%;
  font-size:4.2rem;
  letter-spacing: 0px;
}
.sottotitolo-parallax2 {
 
  top: 11%;
  font-size:1.7rem;
  letter-spacing: 2px;

}


.top-icone {top: 11%;}

.icone-skills {width:58px; margin-bottom:1rem; margin-top:1rem; }



.icone-skills2 { width:118px; margin-top:-0.5rem; }




.sottotitolo2-parallax2 {
	
	font-weight: 600;
	font-size: 1.7rem;
	top: 16%;
	letter-spacing: 2px;
}



.corpo-parallax2 
{	
	top:16%; 
	font-size: 1rem;
	margin-left: 8rem;
	
	
}
  
  
/*Fine Parallax 1 e 2*/




/*Inizio About*/






.img-profilo  {max-width: 350px;}



/*Fine About*/	



/*Inizio Contatti*/

.container1 {
  width: 506px;
}

/*Fine Contatti*/


/*Inizio Project*/

.container-project {
  width: 100%;
  max-width:100%;
  
}


/*Fine Project*/


/*Inizio Galleria*/

#container3 {height: 60vh;}

/*Fine Galleria*/

	
	
}



/*RESPONSIVE dimensioni Ipad portrait e cellulare grandi landscape ovvero (md) >= 768*/
@media (min-width: 768px) {
	
	
	
	

	
/* Inizio Parallax */
	
  
.parallax-container .titolo-parallax{
 
  top: 48%;
  font-weight: 400;
  font-size:5vw;
  letter-spacing:19px;
}
.parallax-container .sottotitolo-parallax {
 
  top: 40%;
  font-weight: 600;
  font-size:2vw;
  letter-spacing: 14px;
}

.sottotitolo2-parallax2 {
	margin-top:0vw;

	
}


.titolo-parallax2{
 
  top: 29%;
  font-weight: 700;
  font-size:4.5rem;
  letter-spacing: 0px;
}
.sottotitolo-parallax2 {
 
  top: 17%;
  word-spacing: 8px;
  font-weight: 700;
  font-size:1.7rem;
  letter-spacing: 2px;
  
}


.top-icone {top: 17%;}

.icone-skills {width:58px; height:auto; margin-bottom:1rem; margin-top:1rem; }

.icone-skills2 { width:118px; height:auto; margin-top:-0.5rem; }



.sottotitolo2-parallax2 {
	font-weight: 600;
	font-size: 1.7rem;
	top: 23%;
	letter-spacing: 2px;
}



.corpo-parallax2 
{	
	top:23%; 
	font-size: 1rem;
	font-weight: 600;
	margin-left: 8rem;
	
	
}
  
  
/*Fine Parallax 1 e 2*/



/*Inizio About*/

.text-about {float:center; position:relative; text-align: left; line-height: 1.6;}






/*Fine About*/





/*Inizio Footer*/

#top{right:0px; bottom: 65px;}




.icone {margin-left: 10px; margin-right: 10px;}


/*Fine Footer*/


/*Inizio Project*/
.project-box-image{ max-width:100%;}

.artproject-box-image{ height:370px; max-width:100% }
.artproject-box-image:hover{ height:370px; max-width:100%}
.artparola-chiave {height:370px; line-height:380px; max-width:100%}
.artparola-chiave:hover {height:370px; max-width:100%}
	
/*Fine Project*/




/*Inizio Galleria*/

#container3 {height: 420px;}

/*Fine Galleria*/
	
}


/*MEDIA QUERY SPECIALE_ 375 < Cellulare landscape < 812 _UTILIZZARE SOLO PER EVENTUALI NECESSARI AGGIUSTAMENTI AI CELLULARI LANDSCAPE*/
/*DEVE ESSERE INSERITO QUI PERCHE' ALTRIMENTI NON VENGONO LETTE LE MEDIA QUERY SE VIENE MESSO PRIMA DEL >=768*/

@media only screen 

  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (orientation: landscape) { 
  
  
	.titolo-parallax2{top: 52%;}
  
	.sottotitolo-parallax2 {top: 12%;}
	

	.top-icone {top: 8%;}
	

	
	


	.sottotitolo2-parallax2 { top: 58%; }


	.corpo-parallax2 { top: 38%;}
	
	
	
	
	.display-pc{display:none;}
	.display-cell{display:block;}
	
	/*Fine About*/
	
	
	/*Inizio Galleria*/

	#container3 { height: 350px;}

	/*Fine Galleria*/
	
	

}

/*FINE MEDIA QUERY SPECIALE*/









/*RESPONSIVE dimensioni Ipad landscape (iPad 12.9 anche in verticale) e notebook piccoli  ovvero (lg) >= 992*/ 
@media (min-width: 992px) {

h2 {
	text-align: left;  
	}

/* Inizio Parallax */
	
  
.parallax-container .titolo-parallax{
 
  top: 65%;
  font-weight: 400;
  font-size:6vw;
  letter-spacing:19px;
}
.parallax-container .sottotitolo-parallax {
 
  top: 45%;
  font-weight: 600;
  font-size:1.6vw;
  letter-spacing: 14px;
}

.titolo-parallax2{
 
  top: 29%;
  font-weight: 700;
  font-size:4.5rem;
  letter-spacing: 0px;
}
.sottotitolo-parallax2 {
 
  top: 17%;
  word-spacing: 8px;
  font-weight: 700;
  font-size:1.7rem;
  letter-spacing: 2px;
  
}


.top-icone {top: 17%;}

.icone-skills {width:58px; height:auto; margin-bottom:1rem; margin-top:1rem; }

.icone-skills2 { width:118px; height:auto; margin-top:-0.5rem; }



.sottotitolo2-parallax2 {
	font-weight: 600;
	font-size: 1.7rem;
	top: 23%;
	letter-spacing: 2px;
}



.corpo-parallax2 
{	
	top:23%; 
	font-size: 1rem;
	font-weight: 600;
	margin-left: 8rem;
	
	
}
  
  
/*Fine Parallax 1 e 2*/





	
	
/*Inizio Footer*/


.content_icon-footer { 
text-align: right;
}



#top{ bottom: 145px;right: 15px;}

	
	

	
/*Fine Footer*/	



/*Projects  inizio*/

.project-box-image{height: 217px; }
.project-box-image:hover {height:217px; }
.parola-chiave { height:217px; line-height:230px; }

.project-box-image{ max-width:100%; }

.artproject-box-image{ height:450px; max-width:100% }
.artproject-box-image:hover{ height:450px; max-width:100%}
.artparola-chiave {height:450px; line-height:460px; max-width:100%}
.artparola-chiave:hover {height:450px; max-width:100%}

	
/*Projects fine*/

/*Inizio Galleria*/

#container3 {height: 560px;}

/*Fine Galleria*/
	
	
}



/*RESPONSIVE dimensioni PC e iPad 12.9 orizzontale ovvero (xl) >= 1200*/
@media (min-width: 1200px) {

/* Inizio Parallax 1 e 2 */
	
	.parallax-container{
  
  height: 100%;
  font-size:16px;
  
}	

.parallax-container .titolo-parallax{
 
  top: 53%;
  font-weight: 400;
  font-size:3.5vw;
  letter-spacing:23px;
}
.parallax-container .sottotitolo-parallax {
 
  top: 41%;
  font-weight: 500;
  font-size:1.2vw;
  letter-spacing: 14px;
}


.titolo-parallax2{
 
  top: 29%;
  font-weight: 700;
  font-size:4.5rem;
  letter-spacing: 0px;
}
.sottotitolo-parallax2 {
 
  top: 17%;
  word-spacing: 8px;
  font-weight: 700;
  font-size:1.7rem;
  letter-spacing: 2px;
  
}


.top-icone {top: 17%;}

.icone-skills {width:58px; height:auto; margin-bottom:1rem; margin-top:1rem; }

.icone-skills2 { width:118px; height:auto; margin-top:-0.5rem; }



.sottotitolo2-parallax2 {
	font-weight: 600;
	font-size: 1.7rem;
	top: 23%;
	letter-spacing: 2px;
}



.corpo-parallax2 
{	
	top:23%; 
	font-size: 1rem;
	font-weight: 600;
	margin-left: 8rem;
	
	
}
  
  
/*Fine Parallax 1 e 2*/




  


/*Projects  inizio*/


/*Projects  inizio*/

.project-box-image{height: 16.6vw; }
.project-box-image:hover {height:16.6vw; }
.parola-chiave { height:16.6vw;  line-height:17vw;}

.artproject-box-image{height: 29.6vw; }
.artproject-box-image:hover {height:29.6vw; }
.artparola-chiave { height:29.6vw;  line-height:30vw;}



	
/*Projects fine*/
	
	
/*Projects fine*/






}

/*FINE ENTANOS*/

.awards b {
  color: rgb(117, 117, 117);
}

.awards p {
  font-size: .96rem;
  line-height: 1.4;
}