/* base styles 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

a {
    color: white;
}
a:visited {
    color: white;
}
a:hover {
    color: #6F86FF;
}

body {
    background-color: rgb(65, 71, 97);
    font-family: sans-serif;
}

*/

.content-wrap {
    position:relative;
    top: 70px;
}


/* off-screen-menu 
.off-screen-menu {
    background-color: #892020;
    height: 100vh;
    width: 100%;
    max-width: 90vw;
    position: fixed;
    top: 0;
    left: -90vw;
    display: flex;
    flex-direction: column;
    transition: .3s ease;
    z-index: 9998;
    overflow: scroll;
}
.off-screen-menu.active {
    left: 0;
}
*/

.offcanvas {
    position:fixed;
    margin-top: 68px;
    height: calc(100vh - 68px);
    background-color: #c91c1c;
    z-index: 9998;
}

/* .nav-item {
    position: relative;
    background-color:  yellow;
    width: 90%;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.nav-item ul{
    position: relative;
    color:  #FFF;
    top: 20px;
    left: -90vw;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 2em;
    transition: .3s ease; 
    list-style-type: none;
}


.nav-item li{
    position: relative;

} */


/* nav */
.header-mobile {
    position:fixed;
    top:0;
    width:100%;
   /* height: 68px;*/
    display: flex;
    background-color: #c91c1c;
    z-index: 9900;
}

.logo {
    position :relative;
    width: 50vw;
    height:55px;
    margin: 10px 10px;
    background:none;
    z-index: 9999;
}

.logo img{
    position :relative;
    float: left;
    width: 100%;
    background: none;
}

/* nav */
menu {
    position: fixed;
    width: 55px;
    top:0px;
    right: 0;
    padding: 0px 15px;
    display: flex;
    background-color: none;
    z-index: 9000;
}

.search{
    position: absolute;
    right: 55px;
    width: 55px;
    height: 65px;
    padding: 0.6rem;
    background-color: none;
    border-left-style: solid;
    border-right-style: solid;
    border-width:1px;
    border-color: #FFF;
}

.search a {
    font-size: 1.8em; 
    color: #fff;
}

.search i {
    font-size: 1.8em; 
    color: #fff;
}

.search img{
    position:relative;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    background-color: none;
}

/* hamburger menu   -  Questo è stato rinominano come la stessa classe del sito in modo che sovrascriva la classe  */
/* ATTENZIONE MODIFICA refresh 2024 -  il nome però è stato cambiato da "icon-reorder" a "icon_reorder" per potere avere corrispondenza nel DOM altrimenti impossibile da usare un nome con - -  MauroMazzetto */
/* Proposta refresh 2024 - Proporrei di cambiare nome e di conformalo alla diciture classiche in modo da Ottimizzare manutenzioni successive  -  MauroMazzetto */

.hamburger {
    height: 40px;
    width: 35px;
    margin-left: auto;
    position: relative;
}
.hamburger span {
    height: 4px;
    width: 100%;
    background-color: #FFF;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}
.hamburger span:nth-child(1) {
    top: 25%;
}
.hamburger span:nth-child(3) {
    top: 75%;
}
.hamburger.active span {
    background-color: white;
}
.hamburger.active span:nth-child(1) {
    top: 50%;
    width: 20px;
    background-color:  none;
    transform: translate(-15px, 6px) rotate(-315deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 1;
    transform: translate(-50%) rotate(180deg);
}
.hamburger.active span:nth-child(3) {
    top: 50%;
    width: 20px;
    background-color: none;
    transform: translate(-15px, -6px) rotate(315deg);
}

.nav_anchor {
    position:fixed;
    bottom:0;
    width:100%;
    height: 85px;
    display: flex;
    background-color: white;
    z-index: 8900;
}

.nav_anchor ul{
    position:relative;
    width:100%;
    height: 85px;
    display: flex;
    flex-direction: row;
    background-color: none;
    list-style-type: none; /* nessun elemento come marcatore */
    padding-left: 0;       /* padding nullo */
    margin-left: 0;        /* margine nullo */
    
}

    .nav_anchor li {
        position: relative;
        width: calc(100vw / 6);
        border-left-style: solid;
        border-top-style: solid;
        border-color: #FFF;
        background-color: #892020;
        border-radius: 0px;
    }

.nav_anchor li img{
    position:relative;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    background-color: none;
}

.header_shrink {
    position: relative;
    top: 0px;
	/*height: 205px;*/
	box-shadow: 0px -2px 13px #444;
	/*background: hsl(0, 0%, 100%);*/
    background: #FFF;
    z-index: 7990;
}

.nav_place {
    position:relative;
    top:0px;
    width:100%;
    height: 60px;
    background-color: #ce2220;
    z-index: 7990;
    text-align: center;
    padding: 5px 0px;
}

.nav_place a {
	position: relative;
	color: #FFF;
	font-size: 1.4em;
    text-align: center;
}

.nav_place h1 {
	position: relative;
	color: #FFF;
	font-weight: 500;
	font-size: 1.4em;
    background-color: none;
    text-align: center;
}

.nav_place a:hover {
	color: #d5da41;
	font-size: 1.4em;
	font-weight: 350;
}


.nav_name {
    position:relative;
    top:0px;
    width:100%;
    height: 60px;
    background-color: #ce2220;
    text-align: center;
    padding: 5px 0px;
    z-index: 7990;
}

.nav_name a {
	position: relative;
	color: #FFF;
	font-size: 1.5em;
    text-align: center;
}

.nav_name h1 {
	position: relative;
	color: #FFF;
	font-weight: 700;
	font-size: 1.5em;
    background-color: none;
    text-align: center;
}

/* Style the navbar */
/* .nav_contact {
    position: fixed;
	top: 85px;
	background:none;
    z-index: 8999;
    width: 100%;
	height: 77px;
	background: #fe0000;
    color: #FFF;
    font-size: 1.7em;
    font-weight: 200;
	line-height: 20px;
  }

#nav_contact {
    position: fixed;
	top: 85px;
	width: 100%;
	height: 77px;
	background: #fe0000;
    color: #FFF;
    font-size: 1.7em;
    font-weight: 200;
	line-height: 20px;
  } */

  /* Navbar links */
/* .nav_contact a {
    color: #FFF;
    font-weight: 500;
	line-height: 20px;
  }

  /* Navbar links */
/* .nav_contact a:hover {
	color: #ddd;
  } */

/* .nav_contact ul {
	width: 100%;
	height: 100%;
	background: none;
	line-height: 20px;
	text-align: center;
    list-style-type: none; /* nessun elemento come marcatore 
    padding-left: 0;       /* padding nullo 
    margin-left: 0;        /* margine nullo 
}

/* .nav_contact li {
  display:inline-block;
  text-align: center;
  background: none;
  padding: 15px 20px;
  list-style-type: none;
} */ 

  
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
  /* .sticky_mobile{
    position: fixed;
    margin-top: 160px;
    background: green;
    width: 100%;

  }
   */
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  /* .sticky_mobile + .content {
    top: 200px;
    padding-top: 60px;
  } */


/* Lo Stop dello sticky header_shrink class viene appesa alla classe che vogliamo fermare con JSche al momento dell'evento scroll lo blocca nella posizione che vogliano noi mentre il resto della pagina scorre position 
.sticky_mobile {
    position: fixed;
    top: 260px;
    width: 100%;
  }
*/

#portfolio{
    background-color: #ffdbee;
    padding: 15px 0px;
}

#footer {
    color: #eee;
    background-color: #212725;
}

#footer a{
    color: #eee;
}

.footer-widgets-wrap {
    color: #FFF;
    background: none;
}

.footer-widgets-wrap a{
    color: #FFF;
}

.widget_links a{
    color: #FFF;
}

main {
    position: relative;
    top: 80px;
}

header {
    z-index: -300;
}

.searchbox {
    width: 100%;
    margin-top: 68px;
    height: calc(100vh - 68px);
    background-color: #ce2220;

}


.card {
    margin-bottom: 30px;
    top: 50px;
    background: #ce2220;

}



.portfolio-filter {
    position: relative;
    margin: 30px;
    list-style: none;
    border: 1px solid rgba(0,0,0,.07);
    float: left;
    
}


.portfolio-filter li {
    float: left;
    position: relative;
}


 li.activeFilter a {
        color: #fff !important;
        background-color: #b00818;
        margin: 1px 0;
        padding: 13px 18px;
        font-weight: 700;
        text-align: center;
    }

    .portfolio-filter li:first-child a {
        border-left: none;
        border-radius: 4px 0 0 4px;
    }


.portfolio-filter li a {
    display: block;
    position: relative;
    padding: 12px 18px;
    font-size: 13px;
    line-height: 15px;
    color: #666;
    border-left: 1px solid rgba(0,0,0,.07);
    text-align: center;
}

    .portfolio-filter i {
        font-size: 18px;
        margin-right: 10px;
        background: grey; height: 70px; border-radius: 40px;list-style-type: none; padding-left: 0; margin-left: 0;
    }



/* Aggiunta 2024  Pannello Search*/

.card-body li{
  position: relative;
  width:50% !important;
  height: 70px;
  color: #fff;
  padding: 10px 0;
}

.categoryFilter {
  position: relative;
  background-color: none;
  border-radius: 46px;
  color: #fff;
  height: 30px;
  top: 0px;
}

.activeFilter{
  color: #fff;
  background: #c91c1c;
  box-shadow: 0px 0px 1px 1px #fff;
  text-align: center;
}

.form-group {
  font-size: 1.8em;
  font-weight: 100;
  color: #e1e1e1;
}

.button-search {
  position:relative;
  top:30px;
  width:100%;
  height: 50px;
  border-radius: 20px;
  font-size: 1em;
  color: #e1e1e1;
  background: #c91c1c;
  box-shadow: 0px 0px 2px 2px #444;
  border: 1px solid #fff;

  padding:8px; 
  margin-top: 50px;
}

.dropMediumMinum {
  height: 70px;
  border-radius: 10px;
  place-content: 1.3em;
  margin-bottom: 30px;
}

@media (min-width: 400px) {

    .logo {
        background: none;
        width: 53vw;
        height:55px;
    }
    
    .offcanvas {
        margin-top: 65px;
        height: calc(100vh - 65px);
    }

}

@media (min-width: 500px) {

    .logo{
        width: 50vw;
        background: none;
    }

/*    .header-mobile {
        height: 73px;
    }*/

    .offcanvas {
        margin-top: 73px;
        height: calc(100vh - 73px);
    }

}

@media (min-width: 558px) {

    .header-mobile {
        height: 77px;
    }

    .logo{
        width: 50vw;
        height:65px;
        background: none;
    }

    .logo img{
        left: 0;
    }

/* nav */
menu {
    position: fixed;
    width: 65px;
    top:0px;
    right: 0;
    padding: 0px 15px;
    display: flex;
    background-color: none;
    z-index: 9000;
}

.search{
    position: absolute;
    right: 67px;
    width: 65px;
    height: 77px;
    padding: 0.6rem;
    background-color: none;
    border-left-style: solid;
    border-right-style: solid;
    border-width:1px;
    border-color: #FFF;
}

.search a {
    font-size: 2.3em; 
    color: #fff;
}

.search i {
    font-size: 2.3em; 
    color: #fff;
}

.search img{
    position:relative;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    background-color: none;
}

/* hamburger menu   -  Questo è stato rinominano come la stessa classe del sito in modo che sovrascriva la classe  */
/* ATTENZIONE MODIFICA refresh 2024 -  il nome però è stato cambiato da "icon-reorder" a "icon_reorder" per potere avere corrispondenza nel DOM altrimenti impossibile da usare un nome con - -  MauroMazzetto */
/* Proposta refresh 2024 - Proporrei di cambiare nome e di conformalo alla diciture classiche in modo da Ottimizzare manutenzioni successive  -  MauroMazzetto */

.hamburger {
    height: 55px;
    width: 35px;
    margin-left: auto;
    position: relative;
}

.hamburger span {
    height: 4px;
    width: 100%;
    background-color: #FFF;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}
.hamburger span:nth-child(1) {
    top: 25%;
}
.hamburger span:nth-child(3) {
    top: 75%;
}
.hamburger.active span {
    background-color: white;
}
.hamburger.active span:nth-child(1) {
    top: 50%;
    width: 20px;
    background-color:  none;
    transform: translate(-18px, 7px) rotate(-315deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 1;
    transform: translate(-50%) rotate(180deg);
}
.hamburger.active span:nth-child(3) {
    top: 50%;
    width: 20px;
    background-color: none;
    transform: translate(-18px, -7px) rotate(315deg);
}

.offcanvas {
    margin-top: 78px;
    height: calc(100vh - 78px);
}

}

@media (min-width: 601px) {

    .logo{
        width: 40vw;
        background: none;
    }
}
@media (max-width:767px) {
    .portfolio-filter{
    display:block!important;
    }

}

@media (min-width: 768px) {

    .logo{
        width: 33vw;
        background: none;
    }

    .nav_anchor {
        background-color: none;
    }

    .logo img{
        left: 0;
    }

    li.activeFilter a {
        padding: 8px 18px;
        text-align: center;
        top:-5px;
    }

}

@media (min-width: 992px) {
    
    header {
        header: relative; 
        z-index: 9999;
        height: 195px;
        background: none;
    }

    .offcanvas {
        margin-top: 0px;
        height: 0;
    }

    .section_city {
        top: -70px;
    }

    .header-mobile {
        height: 0px;
        display: none;
    }
    
   .gallery-dettaglio-mobile {
        display: none;
    }

    .annuncio-dettaglio-mobile {
        display: none;
    }
 
    .aspetto-dettaglio-mobile {
        display: none;
    }
  
    .sudime-dettaglio-mobile {
        display: none;
    }

    .posizioni-dettaglio-mobile {
        display: none;
    }

    .passioni-dettaglio-mobile {
        display: none;
    }
    
    .annuncio-commenti-mobile {
        display: none;
    }

    .annuncio-mappa-mobile {
        display: none;
    }

    .nav_anchor {
        display: none;
    }

    .header_shrink {
        display: none;
    }

    #footer {
        color: #666;
        background-color: #eee;
    }

    #footer a{
        color: #666;
    }

    .footer-widgets-wrap{
        color: #666;
    }

    .footer-widgets-wrap a{
        color: #666;
    }

    .widget_links a{
        color: #666;
    }

}

@media (max-width: 991px) {
    #main_navbar {
        padding-bottom: 0px !important;
        border-top: 0px none #f5f5f5 !important;
        padding-top: 0px !important;
    }
    .desktopheader {
        display:none !important;
    }
    
}