/* POPPINS FONT */
@font-face {
  font-family: "Poppins-ThinItalic";
  src: url("./fonts/Poppins-ThinItalic.ttf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Thin";
  src: url("../fonts/Poppins-Thin.ttf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Regular";
  src: url("../fonts/Poppins-Regular.ttf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-MediumItalic";
  src: url("../fonts/Poppins-MediumItalic.ttf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Medium";
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Light";
  src: url("../fonts/Poppins-Light.ttf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Italic";
  src: url("../fonts/Poppins-Italic.ttf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-ExtraLight";
  src: url("../fonts/Poppins-ExtraLight.ttf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-ExtraLightItalic";
  src: url("../fonts/Poppins-ExtraLightItalic.ttf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-SemiBold";
  src: url("../fonts/Poppins-SemiBold.ttf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-SemiBoldItalic";
  src: url("../fonts/Poppins-SemiBoldItalic.ttf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Bold";
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-BoldItalic";
  src: url("../fonts/Poppins-BoldItalic.ttf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Black";
  src: url("../fonts/Poppins-Black.ttf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-ExtraBold";
  src: url("../fonts/Poppins-ExtraBold.ttf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-ExtraBoldItalic";
  src: url("../fonts/Poppins-ExtraBoldItalic.ttf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Black";
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
	
}

@font-face {
  font-family: "Poppins-BlackItalic";
  src: url("../fonts/Poppins-BlackItalic.ttf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

*::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-weight: normal;
  font-size: 100%;
  list-style: none;
  line-height: 1;
  outline: 0px;
  background: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

/* variáveis de cores */
:root {
  --white: #fff;
  --fontDarkGray: #646060;
  --fontGray: #9d9d9d;
  --fontDarkBlue: #538abe;
  --silver: #e5e5e5;
  --footerGray: #4a4a4a;
  --lightGray: #c8c8c8;
  --defaultGreen: #12ba46;
  --defaultGreenHover: #50ff50;
  --defaultOrange: #ff8d36;
  --defaultOrangeHover: #ff9300;
  --defaultRed: #f0002d;
  --defaultBlue: #00529e;
  --defaultPurple: #bd0cf2;
  --defaultPink: #ff1440;
  --defaultCrimnson: #b8013f;
  --defaultSalmon: #f24646;
}

body {
  background: rgb(82, 166, 210);
  background: linear-gradient(90deg, rgba(82, 166, 210, 1) 0%, rgba(58, 97, 166, 1) 100%);
  font-family: "Poppins-Medium";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  max-height: 100vh;
}

/* ANIMATION */

footer .menu {
  animation: slide-top 1s ease-in;
}

/* Animation HOME */

main.home header h1 {
  animation: slide-right 1s ease-in;
}

main.home .topContent header > img {
  animation: slide-left 1s ease-in;
}

.contentHome {
  animation: opacity .9s ease-in;
}

/* Animation FAVORITOS */

main.favoritos header h1 {
  animation: slide-right 1s ease-in;
}

main.favoritos header img {
  animation: slide-left 1s ease-in;
}

.contentFavoritos {
  animation: opacity .9s ease-in;
}

/* Animation BUSCA */

main.busca header h1 {
  animation: slide-right 1s ease-in;
}

main.busca header img {
  animation: slide-left 1s ease-in;
}

.contentbusca {
  animation: opacity .9s ease-in;
}

/* Animation PODCASTS */

main.podcasts header h1 {
  animation: slide-right 1s ease-in;
}

main.podcasts header img {
  animation: slide-left 1s ease-in;
}

.contentpodcasts {
  animation: opacity .9s ease-in;
}

/* Animation PODCAST */
b{
  font-weight: bold;
}
main.podcast header {
  animation: opacity 1s ease-in-out;
}

.contentpodcast {
  animation: opacity 1s ease-in-out;
}

.podcast .contentpodcast .capePodcast{
  animation: scale-up-ver-center 1s ease-in-out;
}

/* Animation LIVRO */

main.livro header {
  animation: opacity 2s ease-in-out;
}

.contentlivro {
  animation: opacity 1s ease-in-out;
}

main.livro .stars img:nth-child(1) {
  animation: zoom 1s ease-in-out;
  animation-delay: 1s;
}

main.livro .stars img:nth-child(2) {
  animation: zoom 1s ease-in-out;
  animation-delay: 2s;
}

main.livro .stars img:nth-child(3) {
  animation: zoom 1s ease-in-out;
  animation-delay: 3s;
}

main.livro .stars img:nth-child(4) {
  animation: zoom 1s ease-in-out;
  animation-delay: 4s;
}

main.livro .stars img:nth-child(5) {
  animation: zoom 1s ease-in-out;
  animation-delay: 5s;
}

/* animation COMENTARIOS */

main.comentarios header {
  animation: opacity 2s ease-in-out;
}

.contentcomentarios {
  animation: opacity 1s ease-in-out;
}

main.comentarios .stars img:nth-child(1) {
  animation: zoom 1s ease-in-out;
  animation-delay: 1s;
}

main.comentarios .stars img:nth-child(2) {
  animation: zoom 1s ease-in-out;
  animation-delay: 2s;
}

main.comentarios .stars img:nth-child(3) {
  animation: zoom 1s ease-in-out;
  animation-delay: 3s;
}

main.comentarios .stars img:nth-child(4) {
  animation: zoom 1s ease-in-out;
  animation-delay: 4s;
}

main.comentarios .stars img:nth-child(5) {
  animation: zoom 1s ease-in-out;
  animation-delay: 5s;
}

/* Animation ACERVO */

main.acervo header h1 {
  animation: slide-right 1s ease-in;
}

main.acervo header img {
  animation: slide-left 1s ease-in;
}

.contentacervo {
  animation: opacity .9s ease-in;
}

@keyframes slide-right {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  30% {
    transform: translateX(30px);
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slide-left {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

  30% {
    transform: translateX(-30px);
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slide-top {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  30% {
    transform: translateY(-30px);
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

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

@keyframes zoom2 {
  0% {
    transform: scale(1.5);
  }

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

@keyframes scale-up-ver-center {
  0% {
    transform: scaleY(.4)
  }

  100% {
    transform: scaleY(1)
  }
}

.splide__track {
  height: 100%;
}
.glider.draggable {
  display: flex;
  gap: 20px;
}
button{
  cursor: pointer;
}
main {
  width: 100%;
  background-color: #fff;
  margin: 0 auto;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x:hidden;
}
.menuAside {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 99;
  top: 0;
  right: -100px;
  background-color: #00000073;
  overflow-x: hidden;
  transition: 0.5s;
}

.sidenav {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 99;
  top: 0;
  right: -100px;
  background-color: #FFF;
  overflow-x: hidden;
  padding: 40px;
  transition: 1s;
  display: flex;
  flex-direction: column;
}
.sidenav header {
  justify-content: center !important;
  align-items: center !important;
  padding-bottom: 20px;
  margin-bottom: 1  0px;
  border-bottom: 4px solid black;
  border-image: linear-gradient(to right, #51a3d0, #3a63a7) 1;
}
.sidenav header img {
  transition: unset;
  animation: unset;
  width: 160px;
  margin-bottom: 10px;
}
.sidenav footer {
  position: absolute;
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, rgba(82, 166, 210, 1) 0%, rgba(58, 97, 166, 1) 100%);
  left: 0;
  bottom: 0;
}
.sidenav a {
  padding: 20px 0;
  color: #292929;
  font-size: 12px;
  background-size: 0 !important;
  display: flex;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  color: #6e6868;
  transition: 0.3s
}
.sidenav a {
  text-decoration: none;
  display: block;
}

.sidenav a:hover, .offcanvas a:focus{
  color: #000;
}

.closebtn {
  position: absolute;
  top: 25px;
  border-bottom: unset !important;
  right: 25px;
  font-size: 36px !important;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
a {
  text-decoration: none;
  color: inherit;
}

@media (max-width:700px) {
  main {
    width: 100%;
  }
}
.modal {
  display: flex;
  z-index: 999;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.modal__inner {
  max-height: 90vh;
  width: min(90vw, 30rem);
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.modal__inner a {
  text-align: center;
  padding: 10px 20px;
  background-color: #263d70;
  color: #fff;
  width: fit-content;
  margin: 0 auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.modal__inner a .homePopup{
  width: 20px;
}
.modal__inner p{
  font-size: 16px;
  line-height: 24px;
}
.modal h2 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 800;
}
.show-modal {
  display: inline-flex;
  border: 2px solid #000;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 1.3rem;
  padding: 0.6rem 2rem;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.show-modal:hover {
  background-color: #000;
  color: #fff;
}

.js-modal {
  visibility: hidden;
  opacity: 0;
  transition: transform 0.3s ease-in-out 0.3s;
}
.js-modal .modal__inner {
  transform: translateY(50%);
  opacity: 0;
  transition: all 0.3s;
}
.js-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.js-modal.is-open .modal__inner {
  opacity: 1;
  transform: translateY(0);
}