/*------------------------------------------------
# Generale
--------------------------------------------------*/
/*
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
*/

html,
body {
  height: 100%;
}

body {
  display         : flex;
  flex-direction  : column;
  min-height      : 100vh;
  margin          : 0;
  color           : #1a1a1a;
  background-color: #fff;
}

a {
  color: #216eb1;
}

/*------------------------------------------------
# Barra di navigazione e top bar
--------------------------------------------------*/

/* colori delle voci nella navbar */
/*
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .5);
}
*/

#topBar {
  background-color: #fff;
  padding         : 10px;
}

#topBar div a {
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-size  : 16px;
  color      : #1a1a1a;
  padding    : 0 0.2em;
}

#topBar div a:hover {
  color          : #428bca;
  text-decoration: none;
  transition     : 0.3s;
}

#Navigazione,
section p,
section div,
footer {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

#Navigazione {
  -webkit-box-shadow: 0 8px 10px -6px #555;
  -moz-box-shadow   : 0 8px 10px -6px #555;
  box-shadow        : 0 8px 10px -6px #555;
}

#Navigazione li {
  font-size: 1em;
}

#Navigazione li .dropdown-menu {
  background-color: black !important;
}

#Navigazione li .dropdown-menu a {
  color: white !important;
}

#Navigazione li .dropdown-menu a:hover {
  background-color: #3a3a3a !important;
}

/* Compensa l'altezza della barra di navigazione nei link */
#Intro::before,
#Product::before,
#Consulting::before,
#Entertainment::before {
  display       : block;
  content       : " ";
  margin-top    : -56px;
  height        : 56px;
  visibility    : hidden;
  pointer-events: none;
}

.bg-custom-black {
  background-color: black !important;
}

/* Aggiunta alla barra di navigazione con lo scrolling */
.sticky {
  position: fixed;
  top     : 0;
  left    : 0;
  right   : 0;
  z-index : 1030;
}

#topBtn {
  display         : none;
  position        : fixed;
  bottom          : 20px;
  right           : 30px;
  z-index         : 99;
  border          : none;
  outline         : none;
  background-color: #c44;
  color           : #fff;
  cursor          : pointer;
  padding         : 10px 15px;
  border-radius   : 5px;
  font-size       : 18px;
}

#topBtn:hover {
  background-color: #555;
}

/* ---------------------------------------------
# Slide di presentazione
------------------------------------------------*/
.slide-container {
  position: relative;
}

.slide {
  width : 100%;
  height: 100%;
}

.slide b {
  font-weight: 800;
}

#Intro p,
#Intro ul {
  text-align: center;
}

#Intro ul,
.slide ul {
  padding            : 0;
  list-style-position: inside;
}

div#Gadget {
  justify-content: space-evenly;
}

.slide-text,
.slide-text-box,
.slide-text-box-sm,
.slide-text-box-list,
.slide-text-box-list-sm,
.slide-text-main,
.slide-title {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  text-align : center;
}

.slide-title,
.slide-text,
.slide-text-main {
  width: 100%;
}

.slide-text-main,
.slide-text-box {
  font-weight: 300;
}

.slide-text-box {
  font-size: 1.8vw;
}

.slide-text-box-sm,
.slide-text-box-list {
  font-size: 1.6vw;
}

.slide-text-box-list-sm {
  margin   : 0 auto;
  font-size: 1.3vw;
}

.slide-text-box-list {
  max-width: 50%;
  margin   : 0 auto;
}

.slide-title {
  font-size  : 2.2vw;
  font-weight: 800;
}

.slide-text-main {
  font-size  : 2vw;
  font-weight: 300;
}

.embed-container {
  background-image   : url("../img/embed-thumbnail.jpg");
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
}

.embed-container span {
  position: absolute;
  width   : 100%;
  top     : 0;
  bottom  : 0;
  margin  : auto
}

.embed-container span strong {
  font-weight: 500;
}

span#playbtn {
  cursor     : pointer;
  height     : 1.5em;
  text-align : center;
  font       : 48px/1.5 sans-serif;
  color      : white;
  text-shadow: 0 0 0.5em black
}

/* Visualizzazione mobile (larghezza < 992 px) */
@media screen and (max-width: 991px) {

  #Contenuto,
  #Contenuto section {
    background-color: #fbfbfb;
  }

  #Contenuto section {
    padding: 0 0.4rem 1rem;
  }

  #Intro .container-fluid,
  .slide {
    background-color: #fff;
  }

  .slide-text,
  .slide-text-box,
  .slide-text-box-sm,
  .slide-text-box-list,
  .slide-text-box-list-sm {
    font-weight: normal;
    font-size  : 1.1em;
    padding    : 2em 0;
  }

  .slide-text-box-list,
  .slide-text-box-list-sm {
    max-width: 95%;
  }

  .slide-title,
  .slide-text-main {
    font-size: 1.35em;
    padding  : 0 1rem;
  }

  .slide {
    min-height: 50vh;
    padding   : 5em 1em;
    border-top: 1px solid #7b622f;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
      0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-image:
      url('../img/bg-top-left.jpg'),
      url('../img/bg-top-right.jpg'),
      url('../img/bg-bottom-left.jpg'),
      url('../img/bg-bottom-right.jpg');
    background-position:
      top 10px left 10px,
      top 10px right 10px,
      bottom 10px left 10px,
      bottom 10px right 10px;
    background-repeat: no-repeat;
    background-size  : 5rem;
  }

  .slide-container {
    margin: .8em 0;
  }

  .slide-img-container {
    display       : flex;
    flex-direction: column;
  }

  .slide-img-v {
    display  : block;
    max-width: 60%;
    height   : auto;
  }

  .slide-img-v-box,
  .slide-img-small {
    max-width: 50%;
    height   : auto;
  }

  .slide-img-full-w,
  .slide-img-half,
  .slide-img-card,
  .slide-img {
    max-width: 70%;
    height   : auto;
  }

  .slide-img-full-w,
  .slide-img-half,
  .slide-img-small,
  .slide-img-v,
  .slide-img-v-small,
  .slide-img {
    padding: 6px;
  }

  /* immagini centrate */
  .slide img {
    margin : 0 auto;
    padding: 1rem 0;
  }

  .embed-container {
    margin-bottom: 2rem;
  }

  .embed-container span strong {
    display: none;
  }

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

  .card-container {
    display       : flex;
    flex-direction: column;
  }

  .slide-overlay {
    display: none;
  }
}

@media screen and (min-width: 992px) {
  /* Visualizzazione desktop (larghezza 992px) */

  .slide {
    position: absolute;
    top     : 0;
    left    : 0;
    padding : 5.5rem 5.5rem;
  }

  .slide-half {
    width: 50%;
  }

  .right-offset {
    margin-right: -5.5rem;
  }

  .left-offset {
    margin-left: -5.5rem;
  }

  .top-offset {
    margin-top: -5.5rem;
  }

  .full-width {
    max-height  : 70%;
    margin-left : -5.5rem;
    margin-right: -5.5rem;
    padding     : 0 0.25em;
  }

  .card-container {
    max-height    : 25%;
    margin-left   : auto;
    padding-bottom: 2px;
    text-align    : right;
  }

  .slide-img-card {
    max-height: 100%;
    display   : inline-block;
  }

  .slide-img-small {
    max-width: 25%;
    padding  : 2px;
  }

  .slide-img-half {
    max-width: 50%;
    height   : auto;
    padding  : 2px;
  }

  .slide-img-v {
    display  : inline;
    max-width: 33%;
    padding  : 2px;
  }

  .slide-img-v-box {
    max-height: 80%;
    max-width : 80%;
    margin    : 0 auto;
    padding   : 2px;
  }

  .slide-img-full-w {
    max-width: 75%;
    height   : auto;
    margin   : 0 auto;
    padding  : 2px;
  }

  .slide-img {
    max-width: 40%;
    height   : auto;
  }

  .slide-text {
    font-size: 1.4vw;
  }

  .slide-overlay {
    position: absolute;
    top     : 5.5em;
    left    : 5.5em;
    z-index : 0;
  }

  #Contenuto {
    padding-bottom: 1.5rem;
  }
}

/* Visualizzazione su schermi larghi */
@media screen and (min-width: 1200px) {

  .slide {
    padding: 8vw 8vw;
  }

  .right-offset {
    margin-right: -8vw;
  }

  .left-offset {
    margin-left: -8vw;
  }

  .top-offset {
    margin-top: -8vw;
  }

  .full-width {
    margin-left : -8vw;
    margin-right: -8vw;
  }

  .slide-text-box {
    font-size: 1.6vw;
  }

  .slide-img {
    max-width : 85%;
    max-height: 85%;
  }

  .slide-img-full-w {
    max-width: 100%;
    height   : auto;
  }

  .slide-overlay {
    position: absolute;
    top     : 8vw;
    left    : 8vw;
    z-index : 0;
  }
}