a.item1{
    background-image: url(../img/entry.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}
a.item2{
    background-image: url(../img/2_Casa_Argenta_Zanetti_a_Lumino/03.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item3{
    background-image: url(../img/1_Case_gemelle_a_Muzzano/02.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item4{
    background-image: url(../img/4_Casa_Meynen_a_Bioggio/03.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}
a.item5{
    background-image: url(../img/5_Casa_Zanetti_a_Breganzona/04.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item6{
    background-image: url(../img/6_Casa_a_Sonvico/02.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item7{
    background-image: url(../img/7_Palazzina_Onda_ad_Agno/02.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item8{
    background-image: url(../img/8_Palazzina_Cest_la_vie_a_Biasca/01.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}


/* Linea 880 bordo!!!!!! */
/*
a.grid__item.item8::before{
    background-image: url(../img/8_Palazzina_Cest_la_vie_a_Biasca/01.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
    border: none;
}

a.grid__item.item8:hover::before{ 
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%); 
    margin: -3px -3px;
}*/




a.item9{
    background-image: url(../img/9_Palazzina_Mariah_a_Biasca/05.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item10{
    background-image: url(../img/10_Ristrutturazione_casa_Rud_ad_Agnuzzo/05.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}
a.item11{
    background-image: url(../img/11_Ristrutturazione_casa_Mooser_ad_Agnuzzo/03.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item12{
    background-image: url(../img/12_Ristrutturazione_Montagnola_2014/22.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item13{
    background-image: url(../img/13_Ristrutturazione_interno_Losanna_2016/5.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

a.item14{
    background-image: url(../img/14_Ristrutturazione_progetto_interno_Lugano_2016/1.jpg);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}

/* a.item15{
    background-image: url(../img/altro/otherproj.PNG);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ 
    filter: grayscale(100%); /* FF 35+ 
}


a.item16{
    background-image: url(../img/altro/otherproj.PNG);
    background-size: cover;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ 
    filter: grayscale(100%); /* FF 35+ 
} */







a.item1:hover, a.item2:hover, a.item3:hover, a.item4:hover, a.item5:hover, a.item6:hover, a.item7:hover, a.item8:hover, a.item9:hover, a.item10:hover, a.item11:hover,a.item12:hover, a.item13:hover, a.item14:hover, a.item15:hover, a.item16:hover {
    -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(0%); /* FF 35+ */
    /* transform: scale(1.015); */
}
/* a.item2:hover {
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%);
    
}
a.item3:hover {
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%); 
}
a.item4:hover {
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%); 
} */




/* Fonts */
/*default version*/
/*@font-face {
	font-family: 'Horizon-Regular';
	src: url('../fonts/Horizon-Regular.ttf'); 
	src: 
		local('Horizon-Regular'),
		local('Horizon-Regular'),
		url('../fonts/Horizon-Regular.otf') 
		format('opentype');
}*/

@font-face {
	font-family: 'Signatura-Monoline';
	src: url('../fonts/Signatura-Monoline.ttf'); 
	src: 
		local('Signatura-Monoline'),
		local('Signatura-Monoline'),
		url('../fonts/Signatura-Monoline.otf') 
		format('opentype');
}

.main--title{
    font-family: "Arial" !important;
    font-size: 30px !important;
    font-weight: 200;
}

/* Titoli */
h2.title {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 30px;
    color: #444444;
}

h3.title {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 20px;
    margin-bottom: 50px;
    color: #444444;
}


/* Linea 888 Style1 per border hover!*/
/* Linea 57 cambiato sidebar da 300 a 400, Linea 822 Margine del main da incrementare, Aggiungere un media QUERY per rimpicciolire */

/* Back to  */
.close-button:hover{
    color: #ff2400 !important;
    /*font-size: 22px;*/
}

.close-button:hover .fa-close{
    transition: 0.9s;
    transform: rotateX(180deg);
}

.close-button{
    color: #ff2400 !important;
    font-size: 20px;
}

.close-btn-name{
    font-size: 15px;
    display: inline-block !important;
    padding-bottom: 10px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 24px 50px;
    color: #ff2400 !important;
    /* z-index: 100 !important; */
}

.close-btn-name-contact{
    font-size: 15px;
    display: inline-block !important;
    padding-bottom: 10px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 18px 36px;
    color: #ff2400 !important;
}


.more-info-pic{
    max-width: 100%;
}

.sidebar {
    background-color: #444444 !important; /*#2d2f2c*/
    color: white !important;
    border-right: 1px solid #ff2400;
}


/* About me */

#about-me-content{
    padding: 5% 5% 5% 5% !important;
    display: table;
}

.left-about, .right-about{
    display: inline-block;
    padding: 3% 3% 3% 3%; 
    vertical-align: top;
}

.about-container{
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.left-about{
    width: 29%;
    height: 100%;
}

.right-about{
    width: 69%;
}

.about-me-img{
    width: 100%;
    height: 100%;
}

.container-circle-img {
    width: 90%;
    height: 100%;
  }
  
  .circle-img {
    position: relative;
    width: 100%;
    height: 0;
    padding: 100% 0 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid gray;
  }
  
  .circle-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

@media screen and (max-width: 1550px) {
    .left-about{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .right-about{
        width: 100%;
    }
    .container-circle-img {
        width: 30%;
      }
}

.close-button-about{
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px 30px;
  border: none;
  background: none;
  font-size: 22px;
  color: #ff2400;
  cursor: pointer;
}

.close-button-about:hover {
    color: #ff2400;
}

.close-button-about:hover.fa-close{
    transition: 0.9s;
    transform: rotateX(180deg);
}

/* Contact */
.contact-icons{
    font-size: 30px;
    color: black;
}



.focus-menu{
    padding-top: 6px;
}

/* PRE-LOADER */
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/Preloader_2.gif) center no-repeat #fff;
}

.pre-loader{
    font-size: 100px;
    align-content: center;
    color: black;
}

/* Contact */
/* Red color class */
.is--red{
    color: #ff2400 !important;
}

.is--silver{
    color: #999999;
}

.contact--text--content{
    color: #c0c0c0;
}

.contact--text--title{
    color: #ff2400;
}

.contact--link:hover{
    color: #ff2400;
}


.content__item.contact{
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/rsz_08.jpg) no-repeat center !important;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
/*
img.background-about{
    width:100%;
    height:100%;
    display: block;
}*/

.about-info-container{
    width: 100%;
    height: 100%;
    position: relative; /*it can be fixed too*/
    /*left:0; right:0;
    top:0; bottom:0;*/
    margin:auto; /*this to solve "the content will not be cut when the window is smaller than the content": */
    max-width:100%;
    max-height:100%;
    overflow: hidden;
    display: table;
    text-align: center;
}

.info-content{
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.contact-icon{
    font-size: 20px;
    color: #c0c0c0;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    /*flex-basis: 100%;*/
    flex: 1;
  }

  .column--large{
    flex-basis: 90%;
  }

  .column--small{
    flex-basis: 10%;
  }
  
  .blue-column {
    /*background-color: blue;*/
    height: 30px;
  }
  
  .green-column {
    /*background-color: green;*/
    height: 30px;
  }

  .contact--text--content{
      padding: 10px;
  }

  .title--row{
        margin-top: 30px;
  }



/* Media Query */

@media screen and (max-width: 430px) {
    .info-content{
        margin-left: 20px;
    }
}


.main-content{
    background-color: #444444;
}

/* Altri progetti e in corso */

.other-content{
    overflow: overlay;
    width: 100%;
    height: 100%;
    line-height: 1;
}


.grid__item.item16, .grid__item.item15 {
    padding: 0 0 0 0;
    pointer-events: none; 
}

.title-on-hover{
    margin: 0 0 0 0 !important;
}

.other-title{
    color: #ff2400;
    bottom: 0;
}


.made-by{ 
    position: fixed;
    bottom: 0;
    width: 300px;
    max-width: 100%;
    text-align: center;
    left: 0;
    font-size: 12px;
}


/* Title on over project menu*/
.title-on-hover{ 
    display: none;
    font-size: 15px;
    position: absolute;
    bottom: 0;
    left: 5px;
    color: #ff2400;
}


/*Scroll problem */
.scroll-wrap{ 
    overflow-y: hidden;
}