@font-face {
   font-family: Amatic-regular;
   src: url(font/AmaticSC-Regular.ttf);
}

@font-face {
   font-family: Amatic-bold;
   src: url(font/AmaticSC-Bold.ttf);
}

body {
   font-family: Amatic-bold;
   background: linear-gradient(180deg, #7792d2, #8563c2);
   background-size: cover;
   background-repeat: no-repeat;
   min-height: 100vh;
   margin: 0px;
   color: #FFF;
}
.mainwrp {
   background-image: url(../img/h.png);
   background-repeat: no-repeat;
   background-size: 100%;
   width: 24rem;
   height: 31rem;
   background-position: top center;
}
.mainwrp1 {
   background-image: url(../img/h1.png);
   background-repeat: no-repeat;
   background-size: 100%;
   width: 31rem;
   height: 23rem;
   background-position: top center;
}
.home-1.cuenta, .home-2.cuenta {
   background-size: cover;
   background-repeat: no-repeat;
   height: 100vh;
   min-height: 48rem;
   max-height: 53.1rem;
}
.home-1 {
   background-size: cover;
   background-repeat: no-repeat;
   height: 45.2rem;
}

.home-2 {
   background-size: cover;
   background-repeat: no-repeat;
   height: 100vh;
   min-height: 48rem;
   max-height: 53.1rem;
}

.lowermain {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: space-between;
   align-items: center;
   width: 26rem;
}

.home-1 {
   background-image: url(../img/fondo1.jpg);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
}

.home-2 {
   background-image: url(../img/fondo2.jpg);
   /*background: linear-gradient(180deg, #7792d2, #8563c2);*/
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
}

img#btnscroll {
   cursor: pointer;
   width: 6.9rem;
}

img#btnstreno {
   width: 11.1rem;
}

.wrp {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
   padding: 0;
   padding-top: 3rem;
}

.wrp1 {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
   padding: 3em;
}

.wrpa {
   padding-top: 14rem;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-content: center;
   align-items: center;
   justify-content: flex-start;
}

.logo>img {
   max-height: 6em;
}

.title {
   font-size: 3em;
   font-family: Amatic-bold;
   text-align: center;
}

.title1 {
   font-size: 3em;
   font-family: Amatic-bold;
   text-align: center;
   padding-bottom: 0.5em;
}


.subtitle {
   font-size: 2.5em;
   font-family: Amatic-bold;
   margin-bottom: 0.6em;
   text-align: center;
}

.contador {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
}

.digi {
   background-color: #ffffff;
   font-size: 3rem;
   margin: 0.3rem;
   padding: 0.6rem 0.8rem;
   border-radius: 0.6rem;
   width: 0.6rem;
   color: #645c7d;
   font-weight: 800;
}

.timelb {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
}

.sepa1,
.sepa2 {
   font-size: 4rem;
   font-weight: bold;
}

.asomao {
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   align-items: center;
   flex-wrap: nowrap;
}

.asomao>img {
   width: 42rem;
   max-width: 100vw;
}

.fecha {
   font-size: 2.1rem;
   padding: 2rem;
}

.wrpyt {
   padding: 1rem;
   background: linear-gradient(180deg, #6d76bd, #7169b9);
   border-radius: 1rem;
   border: 1px solid #FFF;
}

div#falta {
   font-size: 2.7rem;
   padding: 1rem;
   text-align: center;
   text-shadow: 3px 2px #686781;
}

.sigue {
   font-size: 2.1rem;
   padding: 2rem;
   padding-bottom: 0.9rem;
}

.rrssbtns {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
}

.rrssbtns>div>a {
   padding: 1rem;
   cursor: pointer;
}

.rrssbtns>div>a>img {
   width: 3rem;

}

.hover {
   transition: all 1s;
   -webkit-transition: all 1s;
}

.hover:hover {
   filter: brightness(1.2);
   -webkit-filter: brightness(1.2);
}

footer {
   background-color: #4b447f;
   background-image: url(../img/fondo3.jpg);
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: space-around;
   align-items: center;
   padding: 3rem 1rem;
   font-family: museo-sans;
}

footer>.col1 {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
}

.legal {
   margin-left: 1rem;
}

.fil2 {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
}

.fil2>div>a {
   cursor: pointer;
}

.fil2>div>a>img {
   width: 2.7rem;
}

.rrssjust {
   display: flex;
   flex-direction: column;
   align-items: center;
   /*font-size: 1.2rem;*/
}

.detaca {
   font-weight: 800;
}

.contador_sub {
   display: flex;
   width: 20rem;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-around;
}

.contador_sub>div {
   text-shadow: 2px 1px 1px #686781;
}

.wrpyt>iframe {
   max-width: 100vw;
}

.row {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
}

.col {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   align-items: center;
}

.chaptermenu {
   align-items: flex-start;
   font-size: 2rem;
   margin: 0 3rem;
   min-width: 12rem;
}

.chaptermenu>a {
   text-decoration: none;
   color: #FFF;
   font-weight: 900;
   font-family: 'Amatic-bold';
   line-height: 3rem;
   font-size: 2rem;
   cursor: not-allowed;
}

.chaptermenu>a.clicable:hover {
   cursor: pointer !important;
}

.chaptermenu>a.clicable:hover {
   color: #8f78df;
}

.chaptermenu>a.clicable.selected {
   color: #ffd76b;
}

.chaptermenu>a.clicable.selected::before {
   content: " ";
   display: block;
   position: absolute;
   /* background-image: url(../img/pelotita.png); */
   width: 1.5rem;
   height: 1.5rem;
   background-size: contain;
   background-color: #8f78df;
   border-radius: 100%;
   margin-top: 0.7rem;
   margin-left: -2.4rem;
}

.chaptermenu>a:focus-visible {
   outline: none !important;
}

.repowrp {
   background-color: transparent;
   background: url(../img/borde.png) no-repeat;
   background-size: 100% 100%;
   width: 100%;
   height: 100%;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-content: center;
   align-items: center;
}

@media only screen and (max-width: 600px) {

   html,
   body {
      font-size: 12px;
      overflow-x: hidden;
   }

   .row {
      flex-direction: column;
   }

   iframe#youtubeplayer {
      width: 87vw;
      height: 49vw;
   }

   .repowrp {
      margin-top: 3rem;
   }

   /*   .logo>img {
      max-height: 4.2em;
  }
  .legal{
      font-size: 0.9em;
  }
  .rrssjust{
   font-size: 0.9em;
  }*/
}

@media only screen and (max-width: 1042px) {
   .row {
      flex-direction: column-reverse;
   }

   .chaptermenu {
      padding: 2.1rem;
   }
}


@media only screen and (min-width: 600px) {

   html,
   body {
      font-size: 15px;
   }
}

@media only screen and (min-width: 768px) {

   html,
   body {
      font-size: 18px;
   }
}

@media only screen and (min-width: 1042px) {

   html,
   body {
      font-size: 18px;
   }
}

/*
@media only screen and (min-width: 992px) {
   footer{
      background-color: yellow;
   }
}

@media only screen and (min-width: 1200px) {
   footer{
      background-color: orange;
   }
}*/