/* GLOBAL */

html,
body {
  height: 100%;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* OPENING PAGE */

/* LOADER */

#load_screen {
  background: #001522;
  opacity: .8;
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100%;
}

.loaders {
  /* POSIZIONE */
  position: absolute;
  top: 50%;
  left: 50%;
  /* ASPETTO */
  border: 2px solid #001522;
  border-top: 2px solid orange;
  /* border-bottom: 2px solid orange; */
  border-radius: 50%;
}

#loading1 {
  width: 120px;
  height: 120px;
  -webkit-animation: spin1 3s linear infinite;
  animation: spin1 3s linear infinite;
}

#loading2 {
  width: 100px;
  height: 100px;
  -webkit-animation: spin2 2s linear infinite;
  animation: spin2 2s linear infinite;
}

#loading3 {
  width: 80px;
  height: 80px;
  -webkit-animation: spin3 1.5s linear infinite;
  animation: spin3 1.5s linear infinite;
}

#loading4 {
  width: 60px;
  height: 60px;
  -webkit-animation: spin4 .8s linear infinite;
  animation: spin4 .8s linear infinite;
}

@-webkit-keyframes spin1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spin1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes spin2 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes spin2 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@-webkit-keyframes spin3 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spin3 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes spin4 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes spin4 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* DISPLAY */

#displaySep {
  width: 100%;
  height: 180px;
}

#display {
  position: relative;
  width: 100%;
}

#contenitoreFoto {
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
  width: 100%;
  height: auto;
}

.fotoNegozio {
  display:block;
  position:relative;
  width:80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  transition: width .5s;
}

.fotoNegozio:hover {
  width:90%;
}

/* FASCIA VETRINA e PAGER*/

#fasciaPagina,
#fasciaVetrina {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #001522;
  -webkit-box-shadow: 0 0 25px rgba(0, 22, 36, 0.8);
  box-shadow: 0 0 25px rgba(0, 22, 36, 0.8);
  /* z-index: 805; */
  /* FONTS */
  text-align: center;
  /* FLEX INSIDE */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#fasciaVetrina {
  -webkit-box-shadow: initial;
  box-shadow: initial;
  background-color: transparent;
  margin-top: 30px;
  z-index: 98;
}

h1#pagina {
  display: inline;
  font-weight: normal;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 18pt;
  color: orange;
  padding: 15px;
  margin: 0;
}

h2#inVetrina {
  display: inline;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: normal;
  color: #001522;
  margin: 0;
  font-size: 18pt;
}

#lente {
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(120px, -50%);
  -ms-transform: translate(120px, -50%);
  transform: translate(120px, -50%);
  color: orange;
  font-size: 12pt !important;
  cursor: pointer;
}

#lente:hover {
  color: white;
}

#fasciaNumeratore,
#fasciaPager {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #001522;
  z-index: 99;
  text-align: center;
  /* FLEX INSIDE */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#fasciaPager {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-shadow: 0 0 25px rgba(0, 22, 36, 0.8);
  box-shadow: 0 0 25px rgba(0, 22, 36, 0.8);
  border-bottom: 1px dotted orange;
}

#fasciaNumeratore {
  margin-top: 40px;
  margin-bottom: 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-color: white;
}

span.numeratore,
span.pager {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 18pt;
  color: orange;
  z-index: 100;
  margin: 10px;
}

span.numeratore,
a.numeratore:link,
a.numeratore:visited,
a.numeratore:hover,
a.numeratore:active {
  text-decoration: none;
  color: black;
  margin: 10px;
}

a.pager:link,
a.pager:visited,
a.pager:hover,
a.pager:active {
  text-decoration: none;
  font-size: 18pt;
  color: orange;
}

/* BARRA CATEGORIE */

#barracategorie {
  opacity: 0;
  width: 100%;
  height: 0px;
  overflow: hidden;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  background-color: #e6e6e6;
  -webkit-box-shadow: 0 0 25px rgba(0, 22, 36, 0.43);
  box-shadow: 0 0 25px rgba(0, 22, 36, 0.43);
  /* CONTENUTO */
  padding: 0px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 14pt;
  text-align: center;
  -webkit-column-count: 5;
  column-count: 5;
}

/* MENU LINKS */

a.categoriamenu,
a.subcategoriamenu {
  text-decoration: none;
  color: black;
}

/* a.categoriamenu {
  font-weight: bold;
} */

a.categoriamenu:hover,
a.subcategoriamenu:hover {
  color: orange;
}

/* VETRINA  */

#vetrina {
  width: 100%;
  padding: 20px;
  /* FLEX INSIDE */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.oggetto {
  position: relative;
  overflow: hidden;
  width: 320px;
  height: 320px;
  background-color: #e6e6e6;
  cursor: pointer;
  margin: 5px;
  z-index: 3;
}

.bordo {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.imgoggetto {
  position: absolute;
  display: block;
  max-height: 90%;
  max-width: 90%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.sold {
  position: absolute;
  display: block;
  z-index: 1;
  pointer-events: none;
}

.tendina {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  opacity: 0.8;
  width: 100%;
  height: 0;
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
  z-index: 2;
  pointer-events: auto;
}

.contenutiOggetto {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 0;
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  pointer-events: none;
}

.descrizione {
  font-family: 'Open Sans', sans-serif;
  font-size: 14pt;
  color: #001522;
  text-align: center;
  z-index: 4;
  pointer-events: none;
}

.oggetto:hover .contenutiOggetto,
.oggetto:hover .tendina {
  height: 100%;
}

.oggetto:hover .bordo {
  border: 3px solid #cc6600;
}

.nessunOggetto {
  width: 100%;
  height: 200px;
  font-family: 'Open Sans Condensed', sans-serif;
  color: #001522;
  font-size: 18pt;
  text-align: center;
  /* FLEX INSIDE */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* MEDIA per BARRA DELLE CATEGORIE */

@media screen and (max-width: 780px) {
  #barracategorie {
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media screen and (max-width: 640px) {
  span.numeratore {
    font-size: 12pt;
  }
}

@media screen and (max-width: 570px) {
  #barracategorie {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media screen and (max-width: 445px) {
  #barracategorie {
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media screen and (max-width: 270px) {
  #barracategorie {
    -webkit-column-count: 1;
    column-count: 1;
  }
}