@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --color-var1: #ea1179;
  --color-var2: #f8f0e5;
  --roboto: "Roboto Condensed";
  --notoserif: 'Noto Serif';
  --color-button1: '';
  --color-button2: '';
}

body {
  background-color: #f3f3f3;
  margin: 0;
  min-height: 100vh;
}

.container-stories {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.carousel-stories,
.carousel-stories .item-stories {
  margin: 0 auto;
}

.carousel-stories .item-stories a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
}
.storie-img {
  margin: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.storie-img img {
  width: 100%;
  height: 50%;
  object-fit: cover;
  object-position: top;
}

.item-stories .storie-img .container-gradient {
  display: block;
  width: 100%;
  height: 65%;
  position: absolute;
}
.item-stories .logo-opovo {
  height: 20px;
  text-align: center;
}
.item-stories .logo-opovo svg {
  height: 100%;
  width: 100%;
}
.item-stories-cta {
  text-align: center;
}
.item-stories-cta .content-text {
  align-items: center;
}
.btn-cta-webstorie {
  background-color: var(--color-var1);
  color: var(--color-var2);
  border: none;
  outline: none !important;
  margin-top: 30px;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.content-text {
  width: 100%;
  height: 50%;
  margin: 0;
  color: var(--color-var2);
  padding: 40px;
  box-sizing: border-box;
  font-family: var(--roboto);
}
.item-capa-stories .content-text{
  padding-bottom: 0;
}
.item-capa-stories .content-text h1{
  padding-bottom: 5px;
  max-height: 170px;
}
.content-text.color-var1 {
  color: var(--color-var1);
}
.content-text.color-var2 {
  color: var(--color-var2);
}
.content-text h1,
.content-text p {
  overflow: hidden;
}

.content-text h1 {
  font-size: 36px;
  line-height: 42px;
  font-family: var(--notoserif);
  font-style: italic;
  text-align: center;
}

.carousel-stories .context-credits{
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
}

.carousel-stories p {
  font-size: 21px;
  line-height: 24px;
  max-height: 145px;
  margin: 0;
}
.container-share.d-flex {
  justify-content: center;
}
.compartilhar-media {
  gap: 10px;
}
.compartilhar-media img{
  width: 35px;
  height: 35px;
}
.logo-opmais,
.active.center .content-text p,
.content-text h1 {
  margin: 0;
}

/*------- VARIAÇÕES DE POSICIONAMENTO DO TEXTO ---------*/
.item-stories.text-bottom a {
  flex-direction: column-reverse;
}
.content-text{
  align-items: center;
}
.text-bottom .content-text {
  justify-content: flex-start;
}

.text-top .storie-img {
  display: flex;
  align-items: flex-end;
}
.text-top .storie-img .container-gradient {
  background: transparent
    linear-gradient(
      360deg,
      #00000000 0%,
      var(--color-var1) 22%,
      var(--color-var1) 100%
    )
    0% 0% no-repeat padding-box;
  top: 0;
}

.text-top .storie-img.no-img .container-gradient {
    height: 100%;
    background: transparent
    linear-gradient(
      360deg,
      #00000000 0%,
      var(--color-var1) 0%,
      var(--color-var1) 100%
    )
    0% 0% no-repeat padding-box;
}

.text-top.bg-color2 .storie-img .container-gradient {
  background: transparent
    linear-gradient(
      360deg,
      #00000000 0%,
      var(--color-var2) 22%,
      var(--color-var2) 100%
    )
    0% 0% no-repeat padding-box;
  top: 0;
}

.text-top .storie-img.no-img .container-gradient {
    height: 100%;
    background: transparent
      linear-gradient(
        360deg,
        #00000000 0%,
        var(--color-var2) 0%,
        var(--color-var2) 100%
      )
      0% 0% no-repeat padding-box;
    top: 0;
  }

.text-bottom .storie-img .container-gradient {
  background: transparent
    linear-gradient(
      180deg,
      #00000000 0%,
      var(--color-var2) 20%,
      var(--color-var2) 100%
    )
    0% 0% no-repeat padding-box;
  bottom: 0;
}

.text-bottom.bg-color1 .storie-img .container-gradient {
  background: transparent
    linear-gradient(
      180deg,
      #00000000 0%,
      var(--color-var1) 20%,
      var(--color-var1) 100%
    )
    0% 0% no-repeat padding-box;
  bottom: 0;
}


.text-bottom .storie-img.no-img .container-gradient {
    height: 100%;
    background: transparent
      linear-gradient(
        180deg,
        #00000000 0%,
        var(--color-var1) 0%,
        var(--color-var1) 100%
      )
      0% 0% no-repeat padding-box;
    bottom: 0;
  }
/*------- /VARIAÇÕES DE POSICIONAMENTO DO TEXTO ---------*/

/*------- VARIAÇÕES DE ANIMAÇÕES ---------*/
/* .pan-right .storie-img img {
  width: auto !important;
}

.center .item-stories.pan-right .storie-img img {
  animation: slide 5s linear forwards;
} */

.center .item-stories.zoom-in .storie-img img {
  animation: zoom-in 5s linear forwards;
}

.center .item-stories.zoom-out .storie-img img {
  animation: zoom-out 5s linear forwards;
}
/*------- /VARIAÇÕES DE ANIMAÇÕES ---------*/

/*------ CITAÇÃO -------*/
.storie-citacao blockquote:before {
  content: "";
  display: block;
  width: 40px;
  height: 30px;
  background-image: url("../imgs/quote.svg");
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 20px;
}

.storie-citacao cite {
  color: var(--yellow);
  font-style: normal;
}

.carousel-stories .storie-citacao p {
  font-size: 26px;
  line-height: 32px;
  max-height: 130px;
}
/*------ /CITAÇÃO -------*/

/*------ CRÉDITOS -------*/
.item-stories.storie-creditos a {
  background-color: var(--color-var1);
  padding: 30px;
  font-family: var(--roboto);
  }

.item-stories.storie-creditos span {
color: #fff;
  text-transform: uppercase;
}
.container-text-credits{    
  max-height: 330px;
  overflow: hidden;
  gap: 20px;
}
.item-stories.storie-creditos p {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: -o-ellipsis-lastline;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: 5;
  font-size: 18px;
  margin-bottom: 5px;
  line-height: 22px;
  font-weight: 300;
}

.item-stories.storie-creditos .logo-opmais {
  width: 82px;
  height: auto;
  padding: 0;
  margin-bottom: 20px;
}

/* .item-stories.storie-link .content-text {
	text-align: center;
} */
.item-stories .btn-info {
  padding: 0.5rem 1rem;
  background-color: var(--color-var2);
  color: var(--color-var1);
  outline: none;
  border: none;
  border-radius: 20px;
}
.webstorie__btn{
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 9;
}
.btn-close-storie {
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
}
.btn-close-storie:focus{
  outline: none;
}
.btn-close-storie svg path{
  fill: #000;
}
/*------ CRÉDITOS -------*/
.carousel-stories.owl-theme .owl-nav {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0;
}

.carousel-stories .owl-nav button {
  font-size: 0 !important;
  margin: 0 !important;
}

.carousel-stories.owl-theme .owl-nav [class*="owl-"]:hover {
  background-color: transparent;
}

.carousel-stories .owl-nav button:focus {
  outline: none;
}

.carousel-stories .owl-dots {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.carousel-stories .owl-dots {
  max-width: 360px;
  margin: 15px auto 0;
}
.carousel-stories .owl-dots .owl-dot {
  pointer-events: none;
  width: 25px;
  height: 5px;
  border: 1px solid #000;
  margin-right: 5px;
  border-radius: 5px;
}

.carousel-stories .owl-dots .owl-dot:last-of-type {
  margin-right: 0;
}

.carousel-stories .owl-dots .owl-dot.active,
.carousel-stories .owl-dots .owl-dot.viewed {
  background-color: #000;
  border-color: #000;
}

.carousel-stories.owl-theme .owl-dots .owl-dot span {
  background-color: transparent !important;
  margin: 0;
  width: 0;
  height: 0;
}

.logo-opmais {
  width: 37px;
  height: 22px;
  padding: 15px;
  box-sizing: content-box;
}

/*------- ANIMAÇÕES ---------*/
@keyframes zoom-in {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes zoom-out {
  0% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slide {
  0% {
    transform: translateX(calc(-30%));
  }

  100% {
    transform: translateX(0%);
  }
}
/*------- /ANIMAÇÕES ---------*/
/* =================== AVALIACAO DE CONTEUDO =================== */
.wrapper-relevant {
    width: 100%;
    margin: 20px auto 40px;
    font-size: 20px;
    line-height: 26px;
color: var(--secondary);
    clear: both;
}


.item-stories .wrapper-relevant span {
  text-transform: inherit;
  }

.content-relevant {
    display: flex;
    gap: 10px;
  }
  

.content-relevant button {
  outline: none; 
  border: none;
  position: relative;

  background-color: transparent;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}
.content-relevant button.share-facebook svg{
  position: relative;
  top: 5px;
}
.content-relevant button.share-whats .tel {
  position: absolute;
  top: 9px;
  left: 9px;
}

/* ADICIONAL PARA CONTEUDO FICA COM O TEMPLATE DO OP+ */
.item-stories-old .storie-img img{
  height: 100%;
}
.item-stories-old.text-bottom .storie-img .container-gradient{
  background: linear-gradient(180deg,#00000000 0,rgb(0 0 0 / .8) 37%,rgb(0 0 0 / .8) 100%) no-repeat padding-box;
  bottom: 0;
}
.item-stories-old.item-stories .storie-img .container-gradient {
  height: 50%;
}
.item-stories-old .content-text{
  height: 36%;
  color: #fff !important;
}
/* =================== /AVALIACAO DE CONTEUDO =================== */

@media (max-width: 1024px) {
  .owl-carousel .owl-dots.disabled,
  .owl-carousel .owl-nav.disabled {
    display: block !important;
  }
}
@media (min-width: 744px) {
  .carousel-stories .owl-stage {
    display: flex;
  }
  .carousel-stories .owl-item {
    transform: scale(0.9) !important;
    transition: opacity 350ms ease-out,
      transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.2;
  }

  .carousel-stories .owl-item:hover {
    opacity: 0.3;
  }

  .carousel-stories .center.active {
    transform: scale(1) !important;
    transition: opacity 350ms cubic-bezier(0, 0, 0.2, 1),
      transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
  }
}
@media (min-width: 744px) {
  .carousel-stories .owl-nav {
    height: 0;
    padding: 0 15px;
    color: #000;
    font-size: 40px;
    top: 50% !important;
  }
  .carousel-stories .item-stories {
    height: 100vh;
    min-height: 500px;
    max-height: 500px;
    max-width: 400px;
  }
  
  .carousel-stories .owl-nav button {

    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-image: url(https://www.opovo.com.br/reboot/includes/assets/img/icon/seta-prev.png) !important;
    background-color: #000 !important;
    margin: 0 !important;
  }

  .carousel-stories .owl-nav button {
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: 0.2s;
  }

  .carousel-stories .owl-nav button.owl-next {
    transform: rotate(180deg);
  }

  .carousel-stories .owl-nav button.disabled {
    opacity: 0;
    cursor: default;
  }



  .carousel-stories .owl-carousel .owl-nav button:not(.disabled):hover {
    opacity: 1;
  }

  .carousel-stories .owl-carousel .owl-prev:hover {
    transform: translateX(-8px);
  }

  .carousel-stories .owl-carousel .owl-next:hover {
    transform: translateX(8px);
  }
}
@media (max-width: 991px) {
  html,
  body {
    overflow: hidden;
    position: fixed;
  }
  /* .carousel-stories {
    height: 100%;
  } */

  /* .carousel-stories .item-stories {
    height: calc(100vh - 100px);
  } */

  .carousel-stories .owl-nav {
    top: 0;
    width: 100%;
    height: 100vh;
  }

  .carousel-stories .owl-nav button {
    width: 23%;
    height: 100vh;
  }
  .owl-carousel .owl-dots.disabled,
  .owl-carousel .owl-nav.disabled {
    display: block !important;
  }
}

/*@media only screen and (min-device-width: 320px)  and (max-device-width: 1351px) and (max-height: 600px ) and (orientation: landscape) {
	body:before {
		content: 'Melhor visualização no modo retrato';
		width: 100vw;
		height: 100vh;
		position: absolute;
		background-color: #1e1e1e;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
}*/

@media (max-width: 743px) {
  .container-stories{
    align-items: flex-start;
  }
  .webstorie__btn{
    top: 0;
    right: 0;
    padding: 15px 15px 0 0;
    cursor: pointer;
  }
  .btn-close-storie {
    background-color: #000;
    border-radius:50%;
  } 
  
  .btn-close-storie svg{
    width: 15px;
    height: 15px;
  }

  .btn-close-storie svg path{
    fill: #fff;
  }
  .carousel-stories .owl-nav{
    height: 0;
  }
  .carousel-stories .item-stories a{
    border-radius: 0;
  }
}