.alinhaVertical {
  color: #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
.alinhaVerticalEsquerda {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
.myFlex {
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -webkit-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  /* TWEENER - IE 10 */
  display: -ms-flexbox;
  /* NEW - Chrome */
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: flex;
}
.banner {
  width: 100%;
  background-color: #000000;
  max-height: 455px;
  position: relative;
  padding-top: 0;
}
.loadingCarrocel {
  background-color: #ffffff;
}
.overlayBanner {
  position: absolute;
  background: #000000;
  opacity: 0.1;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.barra {
  height: 25px;
  width: 100%;
  background: #000000;
}
.intro-item {
  height: 455px;
  background-position: 50% 50%;
  padding: 0;
  /* remove any pre-existing padding, just in case */
  /**para usar diferentes  aspect ratio, divida a height/width *100 para obeter a percentagem.
  isto funciona pq o padding percentage é sempe calculado baseado no width, even if it's vertical padding*/
  padding-bottom: 0;
  /* for a 4:3 aspect ratio= 75% .  455/1300 *100= 35%*/
  /*background-position: 50% 50%;*/
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.bannerFilho {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;
  margin: auto;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 60px;
  color: #D6A23C;
  text-shadow: 1px 2px 16px rgba(5, 2, 6, 0.45);
  z-index: 100;
  text-transform: uppercase;
}
.animacaoLoad {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;
  margin: auto;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 60px;
  color: #D6A23C;
  text-shadow: 1px 2px 16px rgba(5, 2, 6, 0.45);
  z-index: 100;
  text-transform: uppercase;
}
@media (max-width: 2000px) {
  .bannerFilho {
    font-size: 3vw;
  }
}
@media (max-width: 1600px) {
  .intro-item {
    height: 0;
    max-height: none;
    padding: 0;
    /* remove any pre-existing padding, just in case */
    /**para usar diferentes  aspect ratio, divida a height/width *100 para obeter a percentagem.
    isto funciona pq o padding percentage é sempe calculado baseado no width, even if it's vertical padding*/
    padding-bottom: 34.5%;
    /* for a 4:3 aspect ratio= 75% .  455/1300 *100= 35%*/
    background-position: 50% 50%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .banner {
    max-height: none;
  }
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
  .intro-item {
    padding-bottom: 35%;
    /* for a 4:3 aspect ratio= 75% .  455/1300 *100= 35%*/
  }
  .bannerFilho {
    top: 13%;
  }
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
  .intro-item {
    height: 0;
    max-height: none;
    padding: 0;
    /* remove any pre-existing padding, just in case */
    /**para usar diferentes  aspect ratio, divida a height/width *100 para obeter a percentagem.
    isto funciona pq o padding percentage é sempe calculado baseado no width, even if it's vertical padding*/
    padding-bottom: 35%;
    /* for a 4:3 aspect ratio= 75% .  455/1300 *100= 35%*/
    background-position: 50% 50%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
}
@media (max-width: 479px) {
  .banner {
    height: 160px;
  }
  .intro-item {
    background-size: cover;
    min-height: 168px;
    height: 168px;
    width: 100%;
    padding-bottom: 0%;
  }
  .bannerFilho {
    font-size: 4vw;
  }
}