@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;600&display=swap");
.ibmmono-regular {
  font-family: 'IBM plex mono' , monospace;
  font-weight: 400;
}

.ibmmono-medium {
  font-family: 'IBM Plex Mono' , monospace;
  font-weight: 500;
}

.ibmsans-regular {
  font-family: 'IBM Plex Sans' , sans-serif;
  font-weight: 400;
}

.ibmsans-semibold {
  font-family: 'IBM Plex Sans' , sans-serif;
  font-weight: 600;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

@media screen and (max-width: 420px) {
  * img {
    width: 100%;
  }
}

@media screen and (max-width: 420px) and (max-width: 420px) {
  header {
    width: 100%;
    left: 0;
  }
  .navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 44px;
    width: 100%;
    left: 0;
  }
  .navbar--brand {
    width: 24px;
    height: 24px;
    margin-top: 10px;
    margin-left: 16px;
  }
  .navbar--menu #btn-menu {
    opacity: 0;
    position: absolute;
    top: 19px;
    right: 16px;
    z-index: 1;
  }
  .navbar--menu .fa-bars, .navbar--menu .fa-times {
    position: absolute;
    top: 19px;
    right: 16px;
  }
  .navbar--menu .fa-times {
    display: none;
  }
  .navbar--menu li {
    padding: 16px 0px 24px 16px;
  }
  .navbar--menu-container {
    height: 265px;
    width: 100%;
    background: #0000EC 100%;
    margin-top: 58px;
    display: none;
    position: absolute;
    left: 0;
  }
  .navbar--menu-item {
    color: white;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 28px;
    width: 224px;
  }
  .navbar--menu-item:hover {
    color: #00F3BB;
  }
  .navbar--menu-item:active {
    color: rgba(6, 10, 36, 0.56);
  }
  .navbar--menu #btn-menu:checked ~ .fa-times {
    display: block;
  }
  #btn-menu:checked ~ .navbar--menu-container {
    display: block;
  }
  .navbar--menu #btn-menu:checked ~ .fa-bars {
    display: none;
  }
  .texto {
    display: none;
  }
  #dot {
    display: none;
  }
  #tachado {
    text-decoration: line-through;
  }
  h1 {
    margin-top: 29px;
    font-size: 36px;
    letter-spacing: 0;
    font-family: "IBM Plex Sans", sans-serif;
    color: #060A24 100%;
    padding-left: 16px;
    line-height: 42px;
  }
  .h1-info {
    margin: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 66px;
  }
  .h1-info-p {
    font-family: "IBM Plex Mono", monospace;
    color: #060A24 100%;
    letter-spacing: 0;
    line-height: 22px;
    font-size: 14px;
  }
  .h1-desktop {
    display: none;
  }
  #conoce-mas {
    text-decoration: none;
    color: #060A24 100%;
  }
  .extrainfo-p.ibmmono-medium {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #00F3BB;
    height: 48px;
    width: 90%;
    margin: 36px 16px 24px;
    -webkit-transition: duration 0.4s;
    transition: duration 0.4s;
    cursor: pointer;
    border: none;
  }
  .extrainfo-p:hover {
    background-image: linear-gradient(225deg, #0000FE 0%, #00F0B8 100%);
    color: white;
    border: none;
  }
  #conoce-mas:hover {
    color: white;
  }
  #conoce-mas {
    color: #060A24 100%;
    text-decoration: none;
  }
}

@media screen and (max-width: 420px) and (max-width: 420px) {
  iframe {
    border: none;
  }
  .skew--background {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0000A3), to(#0000FF));
    background-image: linear-gradient(to bottom, #0000A3 0%, #0000FF 100%);
    position: absolute;
    -webkit-transform: rotateX(180deg) skew(0deg, 8deg);
            transform: rotateX(180deg) skew(0deg, 8deg);
    z-index: -1;
    width: 100%;
    height: 1203.5px;
    margin-top: 24px;
  }
  .episodes-title {
    font-family: "IBM Plex Sans", sans-serif;
    color: #FFFFFF;
    font-size: 36px;
    letter-spacing: 0;
    line-height: 42px;
    padding: 86px 147px 21px 37px;
  }
  .episodes-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-left: 31px;
    padding-right: 11px;
    margin-bottom: 11px;
  }
  .episodes-card {
    height: 236px;
    width: 298px;
    margin-top: 11px;
  }
}

@media screen and (max-width: 420px) and (max-width: 420px) {
  .history-title {
    font-family: "IBM Plex Sans", sans-serif;
  }
  .img-container-phone {
    width: 320px;
    margin: 0;
  }
  .history {
    margin: 16px;
  }
  .history-title-container {
    height: 84px;
    width: 288px;
  }
  .history-title {
    margin-top: 27px;
    font-size: 36px;
    color: #060A24;
    letter-spacing: 0;
    line-height: 42px;
  }
  .history-content {
    height: 254px;
    width: 288px;
    font-size: 14px;
    color: #060A24;
    letter-spacing: 0;
    line-height: 22px;
    margin-top: 8px;
  }
}

@media screen and (max-width: 420px) and (max-width: 420px) {
  .guests-title {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 36px;
  }
  .guests-title-container {
    height: 84px;
    width: 288px;
    margin: 54px 16px 14px;
    color: #060A24;
    letter-spacing: 0;
    line-height: 42px;
  }
  .invite--container {
    line-height: 0;
    padding-top: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

@media screen and (max-width: 420px) and (max-width: 420px) {
  .topic-d {
    display: none;
  }
  .topic-title {
    height: 84px;
    width: 90%;
    margin: 48px 16px 37px;
    color: #060A24;
    letter-spacing: 0;
    line-height: 42px;
  }
  h2 {
    font-size: 36px;
  }
  .icon1 {
    height: 130px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 24px;
  }
  .icon1-icon {
    width: 104px;
    height: 104px;
    margin: 1.9% 33.8%;
  }
  .icon1-container {
    width: 90%;
    margin-left: 5%;
  }
  .icon1-container-p {
    font-size: 24px;
    color: #060A24;
    letter-spacing: 0;
    text-align: center;
  }
  .icon2 {
    height: 130px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 49px;
  }
  .icon2-icon {
    width: 104px;
    height: 104px;
    margin: 1.9% 33.8%;
  }
  .icon2-container {
    width: 90%;
    margin-left: 5%;
  }
  .icon2-container-p {
    font-size: 24px;
    color: #060A24;
    letter-spacing: 0;
    text-align: center;
  }
  .icon3 {
    height: 130px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 65px;
  }
  .icon3-icon {
    width: 104px;
    height: 104px;
    margin: 1.9% 33.8%;
  }
  .icon3-container {
    width: 90%;
    margin-left: 5%;
  }
  .icon3-container-p {
    font-size: 24px;
    color: #060A24;
    letter-spacing: 0;
    text-align: center;
  }
  .icon4 {
    height: 130px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 65px;
  }
  .icon4-icon {
    width: 104px;
    height: 104px;
    margin: 1.9% 33.8%;
  }
  .icon4-container {
    width: 90%;
    margin-left: 5%;
  }
  .icon4-container-p {
    font-size: 24px;
    color: #060A24;
    letter-spacing: 0;
    text-align: center;
  }
}

@media screen and (max-width: 420px) and (max-width: 420px) {
  .skew--background-f {
    height: 341px;
    width: 100%;
    background: linear-gradient(225deg, #0000ff, #0000a3);
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    width: 100%;
    z-index: -1;
  }
  .novelties-container {
    width: 90%;
    height: 341px;
    text-align: center;
    margin-top: 42px;
    margin-left: 5%;
  }
  .novelties-container-title {
    color: white;
    letter-spacing: 0;
    text-align: center;
    line-height: 42px;
    padding: 64px 16px 0px;
  }
  .novelties-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #00F3BB;
    height: 48px;
    width: 90%;
    margin: 36px 16px 67px;
  }
  .p-container {
    width: 70.9%;
    height: 22px;
    margin: 0.4% 14.4% 0.3% 14.7%;
  }
  .footer-background {
    background-color: white;
    width: 100vw;
    height: 121px;
    padding-top: 24px;
  }
  .footer-text {
    font-size: 14px;
    color: #060A24;
    letter-spacing: 0;
    line-height: 22px;
    text-align: center;
  }
  .footer-brands {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 16px 45px 31px;
  }
  a {
    color: black;
  }
}

@media screen and (min-width: 421px) and (min-width: 421px) {
  .navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 80px;
    width: 100%;
  }
  .navbar--menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .navbar--menu-item {
    padding-right: 100px;
    cursor: pointer;
  }
  .navbar--menu-item:hover {
    text-decoration: line-through;
    color: #00f3bb;
    font-family: "IBM Plex Mono", monospace;
  }
  .navbar--menu-item:active {
    text-decoration: line-through;
    color: #060a24;
    opacity: 56%;
  }
  .navbar--menu-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navbar--brand {
    height: 36px;
    width: 36px;
    margin: 0.6% 6.9%;
  }
  .navbar #btn-menu {
    display: none;
  }
  .navbar .fa-times {
    display: none;
  }
  .navbar .fa-bars {
    display: none;
  }
  #tachado {
    text-decoration: line-through;
  }
  h1 {
    margin-left: 200px;
    margin-top: 120px;
    font-size: 64px;
  }
  #dot {
    color: blue;
  }
  #h1-mobile {
    display: none;
  }
  .h1-info {
    display: none;
  }
  .texto {
    margin-left: 200px;
  }
  .extrainfo-p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #00F3BB;
    height: 48px;
    width: 15.7%;
    margin-left: 200px;
    margin-top: 56px;
    -webkit-transition: duration 0.4s;
    transition: duration 0.4s;
    cursor: pointer;
    border: none;
  }
  .extrainfo-p:hover {
    background-image: linear-gradient(225deg, #0000FE 0%, #00F0B8 100%);
    color: white;
    border: none;
  }
  #conoce-mas:hover {
    color: white;
  }
  #conoce-mas {
    color: #060A24 100%;
    text-decoration: none;
  }
  a {
    text-decoration: none;
    color: black;
  }
}

@media screen and (min-width: 421px) and (min-width: 421px) {
  iframe {
    border: none;
  }
  .skew--background {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0000A3), to(#0000FF));
    background-image: linear-gradient(to bottom, #0000A3 0%, #0000FF 100%);
    position: absolute;
    -webkit-transform: rotateX(180deg) skew(0deg, 5deg);
            transform: rotateX(180deg) skew(0deg, 5deg);
    z-index: -1;
    width: 100%;
    height: 850px;
    margin-top: 65px;
  }
  .episodes-title {
    font-family: "IBM Plex Sans", sans-serif;
    color: #FFFFFF;
    font-size: 48px;
    letter-spacing: 0;
    line-height: 42px;
    margin-left: 260px;
    padding: 180px 247px 26px 37px;
  }
  .episodes-container {
    padding-top: 0px;
    padding-left: 100px;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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;
  }
  .episodes-card {
    position: relative;
    top: 0px;
    height: 232px;
    width: 40.6%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: wrap;
            flex-direction: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-right: 72px;
    margin-bottom: 72px;
  }
}

@media screen and (min-width: 421px) and (min-width: 421px) {
  .history-title {
    font-family: "IBM Plex Sans", sans-serif;
  }
  .img-container-phone {
    width: 457.8px;
    height: 660px;
    margin: 0;
    margin-left: 200px;
  }
  .history {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-items: center;
    margin: 16px;
  }
  .history-title-container {
    height: 62px;
    width: 399px;
    margin-top: 200px;
    margin-left: 65px;
  }
  .history-title {
    margin-top: 27px;
    font-size: 36px;
    color: #060A24;
    letter-spacing: 0;
    line-height: 42px;
  }
  .history-content {
    height: 254px;
    width: 400px;
    font-size: 14px;
    color: #060A24;
    letter-spacing: 0;
    line-height: 22px;
    margin-top: 8px;
    margin-left: 65px;
  }
}

@media screen and (min-width: 421px) and (min-width: 421px) {
  .guests-title {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 48px;
  }
  .guests-title-container {
    height: 84px;
    width: 481px;
    margin-top: 64px;
    margin-left: 200px;
    color: #060A24;
    letter-spacing: 0;
    line-height: 42px;
  }
  .invite--container {
    line-height: 0;
    padding-top: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
  }
  .img-invite {
    width: 33.3%;
    height: 364px;
  }
}

@media screen and (min-width: 421px) and (min-width: 421px) {
  .topic-m {
    display: none;
  }
  .topic-title {
    height: 1.6%;
    width: 40.7%;
    color: #060A24;
    letter-spacing: 0;
    line-height: 42px;
    margin-left: 200px;
    margin-top: 64px;
  }
  h2 {
    font-size: 48px;
  }
  .icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 69px 278px 29px 278px;
  }
  .icons-img {
    width: 104px;
    height: 104px;
  }
  .text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    text-align: center;
    margin-left: 250px;
    margin-right: 265px;
    font-size: 24px;
  }
}

@media screen and (min-width: 421px) and (min-width: 421px) {
  .skew--background-f {
    background: linear-gradient(225deg, #0000ff, #0000a3);
    -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
    width: 100%;
    height: 518px;
    z-index: -1;
  }
  .novelties-container {
    width: 100%;
    height: 341px;
    text-align: center;
    margin-top: 40px;
    padding-top: 180px;
  }
  .novelties-container-title {
    color: white;
    letter-spacing: 0;
    text-align: center;
    font-size: 48px;
  }
  .novelties-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #00F3BB;
    height: 48px;
    width: 24%;
    margin-top: 36px;
    margin-left: 38%;
  }
  .novelties-button:hover {
    background-image: linear-gradient(225deg, #0000FE 0%, #00F0B8 100%);
    border: none;
    cursor: pointer;
    color: white;
  }
  .footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    text-align: center;
  }
  .footer-text {
    margin: 36px 0 31px 100px;
  }
  .footer-brands {
    margin: 36px 100px 31px 0;
  }
  .footer-brands #spotify {
    padding-right: 36px;
  }
  .footer-brands #instagram {
    padding-right: 36px;
  }
  .footer-brands #twitter {
    padding-right: 36px;
  }
  .footer-brands #facebook {
    padding-right: 36px;
  }
  .footer-brands #telegram {
    padding-right: 36px;
  }
}
/*# sourceMappingURL=style.css.map */