@charset "utf-8";

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:'Open Sans', sans-serif;
    overflow:hidden;
}

html {
    font-size:14px;
}

a {
  text-decoration:none;
  color:#616161;
}

a:hover {
  color:#20FF84;
}

#sinopse {
  position:fixed;
  top:22%;
  left:40px;
  width:500px;
max-width: 500px;
  height:auto;
  z-index:90;
  pointer-events:none;
    margin-top: 4px;
}

.titulo {
  color:#000;
  font-size:20px;
  font-weight:700;
  margin-bottom:2%;
}

.sinopse_texto {
  width:100%;
  color:#000;
  font-size:13px;
  line-height:23px;
  font-weight:400;
  word-wrap: normal;
  word-break:keep-all;
}

.moldura {
  width:15%;
height: auto;
  position:absolute;
  cursor:pointer;
  overflow:visible;
  margin:0;
}

img {
  vertical-align:top;
  width:100%;
  height:100%;
  opacity:1;
  margin:0;
}

.moldura:after {
  position:absolute;
  opacity:0;
  transition: all 0.5s;

  bottom:8px;
  right:-100px;
  position:absolute;
  opacity:0;
  transition: all 0.5s;
  content: attr(cite);
  white-space: pre-line;
  color:#616161;
  text-align:left;
  font-size:40px;
    line-height: 120%;
  font-weight:400;
  z-index:40;
  pointer-events:none;
}

.moldura:before {
    top:4px;
    left:-80px;
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    content: attr(data-content);
    white-space: pre-line;
    color:#20ff84;
    text-align:left;
    font-size:40px;
    line-height: 120%;
    font-weight:700;
    z-index:40;
    pointer-events:none;
}

.moldura:hover:after, .moldura:hover:before {
    opacity:1;
}

.mascara {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  background:rgba(255,255,255,0.93);
  z-index:10;
  transition: all 0.5s;
}

.mascara:hover {
  opacity:1;
}

#navegador {
  opacity:0;
  pointer-events:none;
}

/*////////////////////// RESPONSIVO //////////////////////*/

@media all and (max-width:480px) and (orientation:portrait) {
  #sinopse {
    position:absolute;
    top:100vh;
    width:100vw;
    height:100vh;
    max-width:none;
    pointer-events:all;
    overflow-x:auto;
    overflow-y:auto;
    margin-top:0;
    opacity:1;
    background:rgba(255,255,255,0.96);
  }

  .titulo {
    width:76%;
    margin-top:40vw;
    color:#000;
    font-size:5vw;
    font-weight:700;
    margin-bottom:8%;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .sinopse_texto {
    width:76%;
    color:#000;
    font-size:3.8vw;
    line-height:6.2vw;
    font-weight:400;
    word-wrap: normal;
    word-break:keep-all;
    margin-left:50%;
    transform:translateX(-50%);
    margin-bottom:40vw;
  }

  .moldura:before, .moldura:after {
      left:-80px;
      opacity:1;
      text-align:left;
      font-size:20px;
      line-height: 120%;
      pointer-events:none;

  }

  /*/////////////// NAVEGADOR ///////////////*/

  #navegador {
    position:fixed;
    display:flex;
    justify-content:center;
    width:100%;
    height:auto;
    bottom:0;
    padding-bottom:4vw;
    padding-top:4vw;
    left:50%;
    transform:translateX(-50%);
    z-index:500;
    background:rgb(255,255,255);
    opacity:1;
    pointer-events:all;
  }

  .capitulos {
    position:relative;
    width:auto;
    height:30px;
    color:#20ff84;
    text-align:center;
    font-size:3.4vw;
    font-weight:700;
    transition: .2s ease-in-out;
    cursor:pointer;
    overflow:visible;
  }

  .marcador {
    width:100%;
    height:1px;
    margin-top:2px;
    transition: .4s ease-in-out;
    background:#20ff84;
    transform:scaleX(0);
  }

  #m1 {
    margin-left:10%;
  }

  .capitulos > a {
    transition: .4s ease-in-out;
  }

  .capitulos > a, .capitulos > a:visited, .capitulos > a:active {
    text-decoration:none;
    color:inherit;
  }

}

@media all and (max-width:480px) and (orientation:landscape) {

  #sinopse {
    position:absolute;
    top:100vh;
    width:100vw;
    height:100vh;
    max-width:none;
    pointer-events:all;
    overflow-x:auto;
    overflow-y:auto;
    margin-top:0;
    opacity:1;
    background:rgba(255,255,255,0.96);
  }

  .titulo {
    width:76%;
    margin-top:28vw;
    color:#000;
    font-size:4vw;
    font-weight:700;
    margin-bottom:8%;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .sinopse_texto {
    width:76%;
    color:#000;
    font-size:3vw;
    line-height:4.6vw;
    font-weight:400;
    word-wrap: normal;
    word-break:keep-all;
    margin-left:50%;
    transform:translateX(-50%);
    margin-bottom:40vw;
  }

  .moldura:before, .moldura:after {
      left:-80px;
      opacity:1;
      text-align:left;
      font-size:20px;
      line-height: 120%;
      pointer-events:none;

  }

  /*/////////////// NAVEGADOR ///////////////*/


  #navegador {
    position:fixed;
    display:flex;
    justify-content:center;
    width:100%;
    height:auto;
    bottom:0;
    padding-bottom:4vw;
    padding-top:4vw;
    left:50%;
    transform:translateX(-50%);
    z-index:500;
    background:rgb(255,255,255);
    opacity:1;
    pointer-events:all;
  }

  .capitulos {
    position:relative;
    width:auto;
    height:30px;
    color:#20ff84;
    text-align:center;
    font-size:3.4vw;
    font-weight:700;
    transition: .2s ease-in-out;
    cursor:pointer;
    overflow:visible;
  }

  .marcador {
    width:100%;
    height:1px;
    margin-top:2px;
    transition: .4s ease-in-out;
    background:#20ff84;
    transform:scaleX(0);
  }

  #m1 {
    margin-left:10%;
  }

  .capitulos > a {
    transition: .4s ease-in-out;
  }

  .capitulos > a, .capitulos > a:visited, .capitulos > a:active {
    text-decoration:none;
    color:inherit;
  }


}

@media all and (min-width:481px) and (max-width:768px) and (orientation:portrait) {

  #sinopse {
    position:absolute;
    top:100vh;
    width:100vw;
    height:100vh;
    max-width:none;
    pointer-events:all;
    overflow-x:auto;
    overflow-y:auto;
    margin-top:0;
    opacity:1;
    background:rgba(255,255,255,0.96);
  }

  .titulo {
    width:76%;
    margin-top:30vw;
    color:#000;
    font-size:4vw;
    font-weight:700;
    margin-bottom:8%;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .sinopse_texto {
    width:76%;
    color:#000;
    font-size:3vw;
    line-height:5.2vw;
    font-weight:400;
    word-wrap: normal;
    word-break:keep-all;
    margin-left:50%;
    transform:translateX(-50%);
    margin-bottom:40vw;
  }

  .moldura:before, .moldura:after {
      left:-80px;
      opacity:1;
      text-align:left;
      font-size:30px;
      line-height: 120%;
      pointer-events:none;

  }

  /*/////////////// NAVEGADOR ///////////////*/

  #navegador {
    position:fixed;
    display:flex;
    justify-content:center;
    width:100%;
    height:auto;
    bottom:0;
    padding-bottom:4vw;
    padding-top:4vw;
    left:50%;
    transform:translateX(-50%);
    z-index:500;
    background:rgb(255,255,255);
    opacity:1;
    pointer-events:all;
  }

  .capitulos {
    position:relative;
    width:auto;
    height:30px;
    color:#20ff84;
    text-align:center;
    font-size:3vw;
    font-weight:700;
    transition: .2s ease-in-out;
    cursor:pointer;
    overflow:visible;
  }

  .marcador {
    width:100%;
    height:1px;
    margin-top:2px;
    transition: .4s ease-in-out;
    background:#20ff84;
    transform:scaleX(0);
  }

  #m1 {
    margin-left:10%;
  }

  .capitulos > a {
    transition: .4s ease-in-out;
  }

  .capitulos > a, .capitulos > a:visited, .capitulos > a:active {
    text-decoration:none;
    color:inherit;
  }

}

@media all and (min-width:481px) and (max-width:768px) and (orientation:landscape) {

  #sinopse {
    position:absolute;
    top:100vh;
    width:100vw;
    height:100vh;
    max-width:none;
    pointer-events:all;
    overflow-x:auto;
    overflow-y:auto;
    margin-top:0;
    opacity:1;
    background:rgba(255,255,255,0.96);
  }

  .titulo {
    width:76%;
    margin-top:24vw;
    color:#000;
    font-size:3vw;
    font-weight:700;
    margin-bottom:4%;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .sinopse_texto {
    width:76%;
    color:#000;
    font-size:2.4vw;
    line-height:4.2vw;
    font-weight:400;
    word-wrap: normal;
    word-break:keep-all;
    margin-left:50%;
    transform:translateX(-50%);
    margin-bottom:20vw;
  }

  .moldura:before, .moldura:after {
      left:-80px;
      opacity:1;
      text-align:left;
      font-size:30px;
      line-height: 120%;
      pointer-events:none;

  }

  /*/////////////// NAVEGADOR ///////////////*/

  #navegador {
    position:fixed;
    display:flex;
    justify-content:center;
    width:100%;
    height:auto;
    bottom:0;
    padding-bottom:4vw;
    padding-top:4vw;
    left:50%;
    transform:translateX(-50%);
    z-index:500;
    background:rgb(255,255,255);
    opacity:1;
    pointer-events:all;
  }

  .capitulos {
    position:relative;
    width:auto;
    height:30px;
    color:#20ff84;
    text-align:center;
    font-size:2.4vw;
    font-weight:700;
    transition: .2s ease-in-out;
    cursor:pointer;
    overflow:visible;
  }

  .marcador {
    width:100%;
    height:1px;
    margin-top:2px;
    transition: .4s ease-in-out;
    background:#20ff84;
    transform:scaleX(0);
  }

  #m1 {
    margin-left:10%;
  }

  .capitulos > a {
    transition: .4s ease-in-out;
  }

  .capitulos > a, .capitulos > a:visited, .capitulos > a:active {
    text-decoration:none;
    color:inherit;
  }

}

@media all and (min-width:769px) and (max-width:959px) and (orientation:portrait) {

  #sinopse {
    position:absolute;
    top:100vh;
    width:100vw;
    height:100vh;
    max-width:none;
    pointer-events:all;
    overflow-x:auto;
    overflow-y:auto;
    margin-top:0;
    opacity:1;
    background:rgba(255,255,255,0.96);
  }

  .titulo {
    width:76%;
    margin-top:24vw;
    color:#000;
    font-size:2.6vw;
    font-weight:700;
    margin-bottom:4%;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .sinopse_texto {
    width:76%;
    color:#000;
    font-size:2vw;
    line-height:3.8vw;
    font-weight:400;
    word-wrap: normal;
    word-break:keep-all;
    margin-left:50%;
    transform:translateX(-50%);
    margin-bottom:20vw;
  }

  .moldura:before, .moldura:after {
      left:-80px;
      opacity:1;
      text-align:left;
      font-size:30px;
      line-height: 120%;
      pointer-events:none;

  }

  /*/////////////// NAVEGADOR ///////////////*/

  #navegador {
    position:fixed;
    display:flex;
    justify-content:center;
    width:100%;
    height:auto;
    bottom:0;
    padding-bottom:4vw;
    padding-top:4vw;
    left:50%;
    transform:translateX(-50%);
    z-index:500;
    background:rgb(255,255,255);
    opacity:1;
    pointer-events:all;
  }

  .capitulos {
    position:relative;
    width:auto;
    height:30px;
    color:#20ff84;
    text-align:center;
    font-size:2.4vw;
    font-weight:700;
    transition: .2s ease-in-out;
    cursor:pointer;
    overflow:visible;
  }

  .marcador {
    width:100%;
    height:2px;
    margin-top:2px;
    transition: .4s ease-in-out;
    background:#20ff84;
    transform:scaleX(0);
  }

  #m1 {
    margin-left:10%;
  }

  .capitulos > a {
    transition: .4s ease-in-out;
  }

  .capitulos > a, .capitulos > a:visited, .capitulos > a:active {
    text-decoration:none;
    color:inherit;
  }


}

@media all and (min-width:769px) and (max-width:959px) and (orientation:landscape) {

  #sinopse {
    position:absolute;
    top:100vh;
    width:100vw;
    height:100vh;
    max-width:none;
    pointer-events:all;
    overflow-x:auto;
    overflow-y:auto;
    margin-top:0;
    opacity:1;
    background:rgba(255,255,255,0.96);
  }

  .titulo {
    width:76%;
    margin-top:20vw;
    color:#000;
    font-size:2.6vw;
    font-weight:700;
    margin-bottom:4%;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .sinopse_texto {
    width:76%;
    color:#000;
    font-size:2vw;
    line-height:3.8vw;
    font-weight:400;
    word-wrap: normal;
    word-break:keep-all;
    margin-left:50%;
    transform:translateX(-50%);
    margin-bottom:20vw;
  }

  .moldura:before, .moldura:after {
      left:-80px;
      opacity:1;
      text-align:left;
      font-size:30px;
      line-height: 120%;
      pointer-events:none;

  }

  /*/////////////// NAVEGADOR ///////////////*/

  #navegador {
    position:fixed;
    display:flex;
    justify-content:center;
    width:100%;
    height:auto;
    bottom:0;
    padding-bottom:4vw;
    padding-top:4vw;
    left:50%;
    transform:translateX(-50%);
    z-index:500;
    background:rgb(255,255,255);
    opacity:1;
    pointer-events:all;
  }

  .capitulos {
    position:relative;
    width:auto;
    height:30px;
    color:#20ff84;
    text-align:center;
    font-size:2.4vw;
    font-weight:700;
    transition: .2s ease-in-out;
    cursor:pointer;
    overflow:visible;
  }

  .marcador {
    width:100%;
    height:2px;
    margin-top:2px;
    transition: .4s ease-in-out;
    background:#20ff84;
    transform:scaleX(0);
  }

  #m1 {
    margin-left:10%;
  }

  .capitulos > a {
    transition: .4s ease-in-out;
  }

  .capitulos > a, .capitulos > a:visited, .capitulos > a:active {
    text-decoration:none;
    color:inherit;
  }

}

@media all and (min-width:1480px) {
  .titulo {
  font-size:26px;
  font-weight:700;
  margin-bottom:4%;
  }

  .sinopse_texto {
  font-size:15px;
  line-height:24px;
  }
}