/* MAIN FRAME */

/* GLOBAL */

html,
body {
  height: 100%;

  margin: 0;
}

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

  box-sizing: border-box;
}

/* Livello 0 */

#containerTop {
  position: absolute;

  width: 100%;

  height: 100%;

  pointer-events: none;

  /* FLEX INSIDE */

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-flow: column nowrap;

  flex-flow: column nowrap;

  -ms-flex-line-pack: stretch;

  align-content: stretch;

  z-index: 799;
}

/* Livello 1 */

/* INTESTAZIONE */

#business-id {
  width: 100%;

  height: 120px;

  background-color: #001522;

  pointer-events: all;

  /* FLEX INSIDE */

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-flow: column;

  flex-flow: column;

  -ms-flex-line-pack: center;

  align-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  /* TEXT */

  text-align: center;

  padding: 15px;
}

strong.business-name,
.business-description {
  /* TEXT */

  display: inline;

  font-weight: normal;

  font-family: "Open Sans Condensed", sans-serif;

  color: orange;
}

a.business-name {
  color: orange;

  text-decoration: none;
}

strong.business-name {
  font-size: 31pt;
}

strong.business-name:hover {
  color: #ff8800;
}

.business-description {
  font-size: 16pt;
}

@media screen and (max-width: 520px) {
  strong.business-name {
    font-size: 24pt;
  }

  span.business-description {
    font-size: 14pt;
  }

  #business-id {
    padding-top: 9px;
  }
}

@media screen and (max-height: 360px) {
  #business-id {
    height: 80px;
  }

  .business-description {
    display: none !important;
  }
}

/* NAVIGATORE */

#containerNav {
  width: 100%;

  z-index: 800;

  pointer-events: none;

  /* FLEX OUTSIDE */

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

  -ms-flex-negative: 0;

  flex-shrink: 0;

  /* FLEX INSIDE */

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-flow: column nowrap;

  flex-flow: column nowrap;

  -ms-flex-line-pack: stretch;

  align-content: stretch;

  /* TRANSIZIONE */

  -webkit-transition: 2s ease;

  -o-transition: 2s ease;

  transition: 2s ease;
}

/* Versione fissa del ContainerNav */

.fixContainerNav {
  position: fixed;

  width: 100%;

  height: 100%;
}

/* Livello 2 */

/* NAV BAR */

#navBar {
  z-index: 801;

  pointer-events: all;

  width: 100%;

  height: 60px;

  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);

  /* FLEX OUTSIDE */

  -ms-flex-negative: 0;

  flex-shrink: 0;

  /* FLEX INSIDE */

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;
}

.nbItem {
  z-index: 802;

  padding: 10px 20px;

  height: 100%;

  cursor: pointer;

  /* FONTS */

  text-decoration: none;

  font-family: "Open Sans Condensed", sans-serif;

  font-size: 18pt;

  text-align: center;

  color: #001522;

  /* 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;

  -webkit-transition: 0.2s !important;

  -o-transition: 0.2s !important;

  transition: 0.2s !important;
}

.nbItem:hover,
.nmItem:hover {
  color: #ff8800;
}

.nbItem-active,
.nbItem:focus,
.nmItem:focus {
  color: #ff7340;

  background-color: #d8d8d8;

  border-right: 1px solid #a4a4a4;

  border-left: 1px solid #a4a4a4;
}

/* Versione trasparente del NavBar per index */

.navBarTrasparente {
  opacity: 0.7 !important;

  -webkit-box-shadow: none !important;

  box-shadow: none !important;
}

.navBarPresente {
  background-color: #e6e6e6 !important;

  -webkit-box-shadow: 0 0 25px rgba(0, 22, 36, 0.43) !important;

  box-shadow: 0 0 25px rgba(0, 22, 36, 0.43) !important;

  z-index: 1500;
}

.navBarAssente {
  background-color: transparent !important;

  -webkit-box-shadow: none !important;

  box-shadow: none !important;
}

.homeAssente {
  display: none;
}

/* Cancella bottoni */

.bottoniNormalizzati {
  height: 100% !important;

  background-color: #e6e6e6 !important;

  padding: 10px 20px !important;

  border-radius: none !important;

  -webkit-box-shadow: none !important;

  box-shadow: none !important;

  margin: 0px !important;
}

.navBarPresente {
  background-color: #e6e6e6 !important;

  -webkit-box-shadow: 0 0 25px rgba(0, 22, 36, 0.43) !important;

  box-shadow: 0 0 25px rgba(0, 22, 36, 0.43) !important;
}

/* Bottone Visita il Negozio */

.fa-map-marker-alt {
  /* BOX */

  display: block;

  position: fixed;

  right: 15px;

  bottom: 15px;

  width: 50px;

  height: 50px;

  background-color: rgb(255, 136, 0);

  z-index: 10000;

  cursor: pointer;

  border: 1px dotted #001522;

  border-radius: 50%;

  box-shadow: 0 0 25px rgba(0, 22, 36, 0.43);

  transition: background-color 0.2s, color 0.2s;

  /* FONT */

  text-align: center;

  color: white;

  font-size: 18pt;

  padding-top: 10px;
}

.fa-map-marker-alt:hover {
  background-color: rgb(70, 196, 70);

  color: rgb(2, 77, 2);
}

/* Media per il navbar */

@media screen and (min-width: 1130px) {
  .nbItem:nth-child(2) {
    display: none !important;
  }

  .nbItem:nth-child(11) {
    display: none !important;
  }
}

@media screen and (max-width: 1300px) {
  .nbItem:nth-child(3) {
    display: none !important;
  }
}

@media screen and (max-width: 1130px) {
  .nbItem:nth-child(5),
  .nbItem:nth-child(6),
  .nbItem:nth-child(7) {
    display: none !important;
  }
}

@media screen and (max-width: 840px) {
  .nbItem:nth-child(4),
  .nbItem:nth-child(8),
  .nbItem:nth-child(9),
  .nbItem:nth-child(10) {
    display: none !important;
  }
}

/* NAV MENU */

#navMenu {
  width: 100%;

  background-color: #e6e6e6;

  z-index: 801;

  display: none;

  flex: 0;

  opacity: 0;

  pointer-events: none;

  transition: 0.4s ease;
}

.apriEchiudi {
  z-index: 802 !important;

  pointer-events: all !important;

  /* FLEX OUTSIDE */

  flex-shrink: 1 !important;

  /* FLEX INSIDE */

  /* display: block !important; */

  display: flex !important;

  flex: 1 !important;

  opacity: 1 !important;

  flex-flow: column !important;

  align-items: center !important;

  /* TRANSIZIONE */

  transition: 0.4s ease;
}

.nmItem {
  /* width: 100%;

    background-color: #e6e6e6;

    z-index: 801;

    display: none;

    flex: 0;

    opacity: 0;

    pointer-events: none;

    transition: .4s ease; */

  cursor: pointer;

  text-decoration: none;

  border-bottom: 1px solid #d2d2d2;

  overflow: hidden;

  font-family: "Open Sans Condensed", sans-serif;

  font-size: 18pt;

  text-align: center;

  color: #001522;

  width: 100%;

  background-color: #e6e6e6;

  z-index: 801;

  display: flex;

  flex: 1;

  opacity: 1;

  pointer-events: all;

  transition: 0.4s ease;

  /* FLEX INSIDE */

  display: flex;

  flex-flow: row wrap;

  justify-content: center;

  align-items: center;
}

@media screen and (max-height: 450px) {
  .nmItem {
    font-size: 12pt;
  }
}

/* MODALBOXES */

.modalbox {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 810;

  background-color: rgba(0, 22, 36, 0.43);

  cursor: pointer;

  /* FLEX INSIDE */

  display: none;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -ms-flex-line-pack: center;

  align-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;
}

.modalconts {
  position: relative;

  width: 300px;

  height: auto;

  margin: 15px;

  border: 1px solid#578d2f;

  border-radius: 15px;

  -webkit-box-shadow: 0 0 25px rgba(0, 22, 36, 0.43);

  box-shadow: 0 0 25px rgba(0, 22, 36, 0.43);

  background-color: #e6e6e6;

  cursor: default;

  font-family: "Open Sans", sans-serif;

  font-size: 14pt;

  text-align: center;

  padding: 5px;

  color: #001522;

  -webkit-animation-name: dallalto;

  animation-name: dallalto;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;
}

a.contattiModals {
  text-decoration: none;

  color: #001522;
}

@-webkit-keyframes dallalto {
  from {
    top: -300px;

    opacity: 0;
  }

  to {
    top: 0;

    opacity: 1;
  }
}

@keyframes dallalto {
  from {
    top: -300px;

    opacity: 0;
  }

  to {
    top: 0;

    opacity: 1;
  }
}

/* FILLERS */

#filler {
  display: block;

  margin: auto;

  background-color: red;

  border-radius: 50%;

  width: 200px;

  height: 200px;
}