:root {
  --altura-container-storie: calc(100vh - 15vh - 47px);
  --largura-container-storie: 32%;
  --largura-maxima-container-storie: 500px;
  --margin-buttons-arrow: 30px;
}

.lock-overflow {
  overflow: hidden;
}

.barra-cinza {
  height: 43px;
  display: flex;
  align-items: center;
  background-color: #F2F2F2;
  color: #675953;
  font-weight: 700;
  padding: 0 10vw;
  font-size: 90%;
}

.node_storie {
  height: var(--altura-container-storie);
  display: flex;
  justify-content: center;
  background-color: #393230;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.node_storie .right-side {
  display: flex;
  flex-direction: column;
  margin-left: var(--margin-buttons-arrow);
  z-index: 2;
  width: 67px;
}
.node_storie .right-side .back-page-storie {
  display: flex;
  align-items: center;
  margin-top: 15px;
  position: relative;
}
.node_storie .right-side .back-page-storie > img {
  width: 68px;
}
.node_storie .right-side .back-page-storie .texto {
  font-size: 3vh;
  color: #fff;
  margin-left: 7px;
  font-style: italic;
  position: absolute;
  left: 60px;
}
.node_storie .left-side {
  display: flex;
  align-items: center;
  margin-right: var(--margin-buttons-arrow);
  z-index: 2;
  width: 67px;
}
.node_storie .arrow-storie {
  all: initial;
  cursor: pointer;
  height: 100%;
}
.node_storie .arrow-storie > img {
  width: 100%;
}
.node_storie .arrow-storie.back > img {
  transform: rotate(180deg);
}
.node_storie .arrow-storie.next {
  flex: 2;
}
.node_storie .arrow-storie.next > img {
  margin-bottom: 84px;
}
.node_storie .field--name-field-adicionar-stories {
  height: var(--altura-container-storie);
  width: var(--largura-container-storie);
  max-width: var(--largura-maxima-container-storie);
  position: relative;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie {
  display: flex;
  flex-direction: column;
  z-index: 999;
  position: absolute;
  width: 100%;
  padding: 0 25px;
  margin-top: 25px;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .progress-bar-container {
  width: 100%;
  height: 5px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .progress-bar-container .progress-bar {
  display: flex;
  width: 100%;
  gap: 17px;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .progress-bar-container .progress-bar .bar {
  flex: 1;
  margin: 0 2px;
  background-color: rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .progress-bar-container .progress-bar .bar .inner-bar {
  height: 100%;
  background-color: #fff;
  width: 0;
  transition: none;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .content-buttons-stories {
  display: flex;
  justify-content: space-between;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .content-buttons-stories > img {
  width: 75px;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .content-buttons-stories .buttons-storie {
  height: 24px;
  width: 60px;
  display: flex;
  gap: 14px;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .content-buttons-stories .buttons-storie .toggle-story {
  all: initial;
  text-decoration: none;
  height: 24px;
  width: 24px;
  display: block;
  cursor: pointer;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .content-buttons-stories .buttons-storie .toggle-story .toggle-image {
  background-image: url("/themes/d8_blog_theme/images/icons-webstories/pause-btn.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  width: 24px;
  height: 24px;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .content-buttons-stories .buttons-storie .toggle-story .toggle-image.paused {
  background-image: url("/themes/d8_blog_theme/images/icons-webstories/play-btn.svg") !important;
}
.node_storie .field--name-field-adicionar-stories .top-container-storie .content-buttons-stories .buttons-storie .share-button {
  background-image: url("/themes/d8_blog_theme/images/icons-webstories/share-btn.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  width: 24px;
  height: 24px;
}
.node_storie .field--name-field-adicionar-stories > .field__item {
  height: 100%;
  width: 100%;
  max-width: var(--largura-maxima-container-storie);
}
.node_storie .field--name-field-adicionar-stories > .field__item .paragraph--type--stories-page {
  width: 100%;
  height: 100%;
  position: relative;
}
.node_storie .field--name-field-adicionar-stories > .field__item .paragraph--type--stories-page .field--name-field-imagem-de-fundo-story {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.node_storie .field--name-field-adicionar-stories > .field__item .paragraph--type--stories-page .field--name-field-imagem-de-fundo-story > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 10s ease-in-out;
}
.node_storie .field--name-field-adicionar-stories > .field__item .paragraph--type--stories-page .field--name-field-titulo-story {
  position: absolute;
  top: 160px;
  padding: 0 25px;
}
.node_storie .field--name-field-adicionar-stories > .field__item .paragraph--type--stories-page .field--name-field-titulo-story > .field__item {
  background-color: #003bd1;
  padding: 5px 7px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  line-height: 36px;
  font-size: 20px;
  font-family: averta-Bold;
}
.node_storie .field--name-field-adicionar-stories > .field__item .paragraph--type--stories-page .field--name-field-frase-story {
  position: absolute;
  bottom: 0;
  padding: 0 25px;
  margin-bottom: 20px;
}
.node_storie .field--name-field-adicionar-stories > .field__item .paragraph--type--stories-page .field--name-field-frase-story > .field__item {
  background-color: #003bd1;
  padding: 5px 7px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  line-height: 36px;
  font-size: 100%;
}

.zoom-in {
  animation: zoomIn 10s forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
#loader {
  position: fixed;
  width: var(--largura-container-storie);
  height: var(--altura-container-storie);
  max-width: var(--largura-maxima-container-storie);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
  backdrop-filter: blur(15px);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgb(33, 9, 247);
  border-left-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  :root {
    --altura-container-storie: calc(100vh - 11vh - 47px + 4px);
    --margin-buttons-arrow: 10px ;
  }
  .node_storie {
    justify-content: space-between;
  }
  .node_storie .left-side {
    width: 30px;
    margin-right: 0;
    margin-left: var(--margin-buttons-arrow);
  }
  .node_storie .right-side {
    width: 30px;
    margin-left: 0;
    margin-right: var(--margin-buttons-arrow);
    z-index: 10;
  }
  .node_storie .right-side .back-page-storie {
    position: absolute;
    width: 87px;
    margin-top: 7px;
    right: 0%;
  }
  .node_storie .right-side .back-page-storie > img {
    width: 30px;
  }
  .node_storie .right-side .back-page-storie .texto {
    font-size: 15px;
    left: 30px;
    margin-left: 0;
  }
  .node_storie .right-side .arrow-storie.next > img {
    margin-bottom: 0;
  }
  .node_storie .field--name-field-adicionar-stories {
    width: 100%;
    position: absolute;
  }
  #loader {
    width: 100%;
  }
}