@font-face {
  font-family: SpringTime;
  src: url(../fonts/SpringTime.ttf);
}

html,
body {
  background: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: #000;
  overflow-x: hidden;
}
a:hover {color:inherit}
body {
  padding-top: 370px;
  overflow-x: hidden;
}
/*
html { background:#fff;}
body {max-width:1890px; margin:0 auto;}
*/

input {border-radius: 0;}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.clearfix::after {
  display: block;
  clear: both;
  content: '';
}

.hidden {
  display: none;
}
a {
  color: #57595e;
}
h1,
h2 {
  font-weight: 300;
  font-size: 3.75rem;
  font-weight: 300;
  font-family: "SpringTime";
  /*font-style: italic;*/
  color: #57595E;
}

h2 b {font-weight: 600;}

.subheading {
  color: #AEB2BC;
  font-weight:bold;
  margin: 1em 0;
}

.hero-slider .slick-list.draggable {
    height: calc(100vh - 151px);
    overflow: hidden;
}
.hero-slider .slick-slide
{
    height: 100%;
    min-height: 1px;
    /*max-height: 930px;*/
    object-fit: cover;
    object-position: center;

}


/* header */
header {
  background: url(../images/trama.jpg);
  height: 370px;
  overflow: hidden;
  color: #878C96;
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 10px 20px;
}
header .wrapper {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
header .logo {
  margin: 4.25em 0;
  float: left;
}
header .menu-toggle {
  display: none;
  width: 56px;
  height: 40px;
  position: absolute;
  right: 5px;
  top: 94px;
  background: url(../images/menu-open.svg) center center no-repeat;
  background-size: contain;
  cursor: pointer;
}
.is-opened-mobile header .menu-toggle {
  background-image: url(../images/menu-close.svg);
}

header .social {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  position: absolute;
  right: 0;
  top: 45px;
  width: 120px;
  display: flex;
}
header .social li {
  display: inline-block;
  flex: 1 1 auto;
  align-self: center;
}
header .social img.mobile-menu { display:none;}

@media (min-width: 1025px) {
  header .main-menu {
    position: absolute;
    right: 0;
    top: 155px;
    left: 230px;
    padding-bottom: 1em;
    margin-bottom: 1em;
  }
  nav.main-menu {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.32px;
    /*! border-top: 1px solid #979797; */
    /*! padding-top: 0.5em; */
  }

  .main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .main-menu ul li {
    display: inline-block;
    flex: auto;
    text-align: center;
  }
                                
}
.main-menu ul li a {
  color: #878C96;
  font-weight: bold;
}
.main-menu ul li a:hover,
.main-menu ul li a.active {
  color: #878C96;
  text-decoration: none;
}

@media (max-width: 1024px) {
  body {padding-top:260px;}
  .hero-slider .slick-list.draggable {
    height: calc(100vh - 116px);
  }
  header .menu-toggle {
    display: block;
  }
  header .logo {
    float: none;
    margin: 0;
    padding: 55px 20px;
    display: inline-block;
  }
  header .logo img {
    width: 126px;
    margin-bottom: 10px;
  }
  header {
    padding: 0.5em 2em;
    transition: 0.25s;
    text-align: left;
    height: 260px;
      
  }
  .is-opened-mobile header {
    height: 100vh;
    overflow-y: auto;
    background: rgba(87, 89, 94, 0.94);
  }
  header .main-menu {
    display: block;
    /*! border-top: 1px solid #fff; */
    padding-top: 1em;
  }

  header .main-menu ul {
    display: block;
    padding: 0;
  }
  header .main-menu li {
    display: block;
    text-align: center;
    font-size: 34px;
    padding: 0.5em 0;
    text-transform: uppercase;
  }
  header .main-menu li a {color:#fff;}

  header .social {
    position: static;
    border-top: 1px solid #fff;
    padding-top: 1em;
    display: block;
    width: 100%;
    text-align:center;
  }
  header .social li {
    margin:0.5em;
  }
  header .social img { display:none;}
  header .social img.mobile-menu { display:inline;}
}
@media (max-width: 650px) {
  header .main-menu li {
    font-size: 26px;
  }
  header .contacts {
    padding-top: 0;
  }
  header .contacts li .label {
    font-size: 14px;
    margin-left: 0;
  }
  header .contacts li .label {
    font-size: 18px;
  }
  header .contacts li img {
    width: 18px;
    height: auto;
    position: static;
  }
}
/* menu mobile */
body.is-opened-mobile {
  overflow: hidden;
  max-height: 100vh;
}


/* content */
.hero {position: relative; }
.hero h1 {
  position: absolute;
  bottom: 0.35em;
  font-size: 6vw;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 100%;
  text-shadow: 0 0 3px black;
}

.section {
  padding: 3.5rem 0;
  color: #57595E;
  /*overflow:hidden;*/
  font-family: 'Roboto', sans-serif;
  font-size: 1.125rem;
  line-height: 1.56;
}
.section h2 {
  text-align: center;
  font-size: 9.375rem;
  /*margin-bottom: 0.4em;*/
  line-height: 1.9;
}

.section h3 {
  font-size: 2.25rem;
  margin-bottom: 0.25em;
  margin-top: 1.25em;
}
.bg-green {
  background: #92C5B6;
  color: #fff;
}
.bg-dark {
  background: #57595e;
  color: #fff;
}
.bg-dark h2 { color:#fff}

/* CHI SONO */
.chi-siamo p { color: #57595E; /*font-size: 1.25em;*/
  font-family: 'Roboto', serif;
}
.chi-siamo h2 {
    margin-bottom: 1em;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 4.687rem;
}
.chi-siamo p {
  line-height: 1.75;
}

/* auncertopunto */
.auncertopunto {
  background:  url(../images/bg-sartoria.jpg) no-repeat center;
  background-size: cover;
  text-align: center;
  position:relative;
}
.auncertopunto::before {
  width:100%;
  height:100%;
  content: '';
  background:#000;
  opacity:0.4;
  position :absolute;
  top:0; left:0;
}
.auncertopunto h2 { font-size: 4.6875rem; }
.auncertopunto h3 { font-size: 3rem; font-weight:normal; }

/* PRODOTTI */
.product-item { text-align: center;}
.product-item-image {
  position: relative;
  overflow: hidden;
  padding-bottom: 80%;
  margin: 10%;
}
.product-item-image img {
  object-fit: cover;
  object-position: center;
  position: absolute;
  top:0;left:0;
  width:100%;height:100%;
}
.product-item-image.circle img { border-radius: 100%; }
.product-item .product-title {margin: 2em 2em 0; display:block;color: #AEB2BC;text-transform: uppercase;}

/* RECENSIONI */
.recensioni  {
  background: url(../images/trama.jpg);
}
.recensioni h2{
  /*
  margin-bottom:0;
  font-size: 6em;
  */
}



/* CONTACT */
.contact { font-size: 1rem; font-weight:bold; } 
.contact .details {margin: 2em 0;}
.contact .details img { margin: 0em 1em 0 0; }
.contact .details span { display: inline-block; vertical-align: middle;}
.contact .follow {font-size: 1.5em; margin-top: 3.5rem;}
.contact .follow a {margin-left: 1.25em}
.contact .details > div > div { white-space: nowrap}
.mappa {
  background: url(../images/icon-point.svg) no-repeat center center, url(../images/mappa.png) center center;
  background-size: auto, cover;
  height: 400px;
}

/* METODI PAGAMENTO */

.metodi-pagamento {
  padding-top: 3em;
  color: #AEB2BC;
  font-size: 0.875rem;
}

.metodi-pagamento p {margin-top:1.5em;}

/* FOOTER */
footer { padding: 28px; font-size:12px; letter-spacing:0.5px;
  font-family: 'Roboto', sans-serif;
}
footer a, footer a:hover {color:inherit; font-weight:bold;}
.footer-menu {
  font-family: 'Roboto', sans-serif;
  margin: 0 0 2em;
  font-size: 0.875rem;
}
.footer-menu ul {
  padding:0; display:block; list-style: none;
}
.footer-menu ul li {
  display: inline-block;
  text-transform: uppercase;
  margin: 0 2em;
}

/* responsive */
@media (max-width: 1199px) {
}

@media (max-width: 991px) {
  html,body { font-size:14px; }
}

@media (max-width: 767px) {
  html,body { font-size:12px; }
  .section {text-align: center;}
  
  .details {text-align: left; font-size:14px;}
  /*.contact-icon {text-align:center; display:inline-block; width: 40%; float:left;position:relative; top:-10px}*/
  .contact-icon {text-align:center;  width: 35%; padding: 1em 0;}
  .footer-menu li:not(:last-child) {display:none;}
}
@media (max-width: 480px) {
  html,body { font-size:11px; }
}
/* short height menu */
@media (max-height: 640px) {
  header {
    position: absolute;
  }
  .is-opened-mobile header {
    position: fixed;
  }
  body {
    /*padding-top: 0;*/
  }
}

/* BACK TO TOP */

.back-to-top {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkUlEQVQ4jc3RLQ7CQBBA4co6AvfAYBAoBAm3BUdl7wDnIIQfg/kwbbpZdtsSTCdZM7PvzUymKCYdKFH+A5+a95skgNsYL0nA4yU98LCkgasIuOIS5aovSabzDUvME5Jukgz8wCpokJfgmIDXiRUXOEd/DwV2eDeJVwrOTPLEpi3scce290zdJHW4YluYDcHTjA+vNmiOgkKvIwAAAABJRU5ErkJggg==) #8DB156 center no-repeat;
  position: fixed;
  bottom: 1em;
  right: 20px;
  padding: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
  z-index: 20;
  opacity: 0;
  transition: 0.25;
  transform: translateX(20px);
  cursor: pointer;
  display:block;
  pointer-events: none;
  transition: 0.25s;
}
.back-to-top.show {
  opacity:0.75;
  transform: translateX(0px);
  pointer-events: auto;
}
.back-to-top.show:hover { opacity: 1;}


/* CITAZIONE */
.citazione {
  text-align: center;
  font-size: 3rem;
  line-height: 1.2;
  color: #AEB2BC;
  font-style: italic;
}
form input[type=text],
form input[type=email]{
  background: transparent;
  border:0;
  border-bottom: 2px solid #57595E;
  color: 57595E;
  width: 100%;
  margin-bottom: 1.5em;
}
form textarea {
  background: transparent;
  border: 2px solid #57595E;
  color: 57595E;
  width: 100%;
  margin-bottom: 1.5em;
}

/* GRID FILTERS */
.grid-filters{
  padding: 1em 0;
}
.grid-filters-item {
  text-transform: uppercase;
  color: #D8D8D8;
  font-weight: bold;
  cursor: pointer;
}
.grid-filters-item.selected {
  color: #57595e;
}


/* fiori */

.flower-container {position:relative; pointer-events: none;}
.fiore1 {
  width: 611px;
  height: 342px;
  background: url(../images/fiore1.png) no-repeat;
  position: absolute;
  left: -323px;
  top: -193px;
  z-index:100;
}

.fiore2 {
  width: 471px;
  height: 655px;
  background: url(../images/fiore2.png) no-repeat;
  position: absolute;
  right: -324px;
  top: -368px;
  z-index:100;
}

.fiore3 {
  width: 398px;
  height: 805px;
  background: url(../images/fiore3.png) no-repeat;
  position: absolute;
  left: -323px;
  top: -110px;
  z-index:100;
}

.fiore4 {
  width: 406px;
  height: 731px;
  background: url(../images/fiore4.png)no-repeat;
  background-size: contain;
  position: absolute;
  right: -324px;
  top: -130px;
  z-index:100;
}

.fiore5 {
  width:612px; height: 364px;
  background: url(../images/fiore7.png)no-repeat;
  background-size: contain;
  position: absolute;
  display:none;
}


.recensioni-item { padding: 2em;  }
.is-opened-mobile .fiore1 {z-index:1}
.logo h2 {display:none; color:#fff; font-size: 5rem}

@media (max-width:1024px) {
  .section h2,.recensioni h2 {font-size: 6rem;margin-left:1rem;}
  .chi-siamo h2 {font-size: 3rem;margin-top:0.75em;}
  .auncertopunto h2 {font-size: 4rem; padding: 0.5em 0 0.4em; text-align: center;}
  .auncertopunto h3 {font-size: 2em;}
  .fiore1 {background-image: url(../images/fiore5.png); width:280px; height:400px;left:-140px; top: -250px;background-size:contain;}
  .fiore2 {display: none;}
  .fiore3 {display: none;}
  .fiore4 {background-image: url(../images/fiore6.png); width:293px; height:505px; right:-180px;}
  .fiore5 {display:block; width:612px; height: 364px; bottom: -209px;left:-150px;}
  .section.recensioni {padding: 7.5rem 0;}
  .section.citazione {padding-top:12rem;}
  .metodi-pagamento {font-size:1rem;}
  .is-opened-mobile .logo img {display:none;}
  .is-opened-mobile .logo h2 {display:block;}
}

@media (max-width:575px) {
  .section {font-size: 1.3636rem;}
  .section h2,.recensioni h2 {text-align:left;}
  .auncertopunto h2 {text-align: center;}
  .section > .container {padding-left:20px;padding-right:20px;}
  .section.chi-siamo {text-align:left;}
  .section.work {text-align: left;}
  .chi-siamo p {font-size:15px;}
  .section.citazione {padding-top:9rem; font-size:2em;}
  .fiore1 {width:280px; height:289px;left:-10px; top:-190px;}
  .fiore2 {display: none;}
  .fiore3 {}
  .fiore4 {width:146px; height:252px; right:-20px; top: -200px;}
  .fiore5 {width:306px; height:182px; left:-20px; bottom: -150px;;}
  .section.recensioni {padding: 10.0rem -10px;}
  .recensioni {/*! font-size: 12px; */text-align:left;}
  .recensioni-item { padding: 1.5em 5em; font-size:1.4rem }
  header .main-menu li {text-align:left; font-size: 20px;padding: 1em 0;}
  header {padding-left:3rem; padding-right:3rem; }
  
}