@charset "utf-8";

* {
  box-sizing:border-box;
  font-family:'Open Sans', sans-serif;
}

html {
  font-size:14px;
  margin:0;
  padding:0;
}

body {
  background:#000;
}

/*////////////////////// ///////////////// //////////////////////*/

#fundo {
  width:100%;
  height:100%;
  background-image:url("../ASSETS/fundo.png");
  background-repeat:repeat;
  overflow:hidden;
}

#contentor_molduras {
  position:absolute;
  top:50%;
  left:50%;
  width:70%;
  height:auto;
  transform:translate(-50%,-50%);
  overflow:visible;
}

#moldura_abismo, #moldura_queda, #moldura_fim {
  position:relative;
  display:inline-block;
  width:26%;
  cursor:pointer;
  overflow:visible;
}

#moldura_abismo img, #moldura_queda img, #moldura_fim img {
  opacity:0.9;
}

#moldura_abismo {
  float:left;
  margin-left:16%;
  margin-top:20%;
}

#moldura_queda {
  float:right;
  margin-right:16%;
  margin-top:20%;
}

#moldura_fim {
  float:center;
  margin-top:12%;
  margin-left:50%;
  transform:translateX(-50%);
}

img {
  vertical-align:top;
  width:100%;
  height:100%;
}

/*////////////////////// ///////////////// //////////////////////*/

#moldura_abismo:after, #moldura_queda:after, #moldura_fim:after {
  position:absolute;
  float:right;
  width:auto;
  opacity:0;
  transform:rotate(-90deg);
  content: attr(cite);
  color:#20FF84;
  text-align:right;
  font-size:2.8vw;
  font-weight:700;
  transition: all 0.5s;
  z-index:40;
  pointer-events:none;
}

#moldura_abismo:before, #moldura_queda:before, #moldura_fim:before {
  position:absolute;
  float:left;
  width:auto;
  opacity:0;
  transform:rotate(-90deg);
  content: attr(data-content);
  color:#20FF84;
  text-align:left;
  font-size:2.8vw;
  font-weight:700;
  transition: all 0.5s;
  z-index:40;
  pointer-events:none;
}

#moldura_abismo:after {
  top:30%;
  right:-15%;
}

#moldura_abismo:before {
  bottom:22%;
  left:-8%;
}

#moldura_queda:after {
  top:12%;
  right:-1%;
}

#moldura_queda:before {
  bottom:18%;
  left:-6%;
}

#moldura_fim:after {
  top:22%;
  right:-14%;
}

#moldura_fim:before {
  bottom:15%;
  left:-8%;
}

#moldura_abismo:hover:after, #moldura_queda:hover:after, #moldura_fim:hover:after,
#moldura_abismo:hover:before, #moldura_queda:hover:before, #moldura_fim:hover:before {
    opacity:1;
}

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

@media all and (max-width:480px) and (orientation:portrait) {
  body {
    background-image:url("../ASSETS/INDEX/fundo.png");
    background-repeat:repeat;
  }
  #contentor_molduras {
    top:50vw;
    left:0;
    width:auto;
    height:auto;
    transform:translate(0,0);
  }
  #moldura_abismo, #moldura_queda, #moldura_fim {
    width:69vw;
    margin-left:50%;
    transform:translateX(-50%);
  }
  #moldura_abismo {
    margin-top:38%;
    float:left;
  }
  #moldura_queda {
    margin-top:38%;
    float:left;
  }
  #moldura_fim {
    margin-top:38%;
    margin-bottom:38%;
    float:left;
  }
  #moldura_abismo:after, #moldura_queda:after, #moldura_fim:after {
    width:60%;
    font-size:5vw;
    opacity:1;
  }
  #moldura_abismo:before, #moldura_queda:before, #moldura_fim:before {
    width:60%;
    font-size:5vw;
    opacity:1;
  }
  #moldura_abismo:after {
    top:40%;
    right:-28%;
  }
  #moldura_abismo:before {
    bottom:40%;
    left:-28%;
  }
  #moldura_queda:after {
    top:38%;
    right:-26%;
  }
  #moldura_queda:before {
    bottom:38%;
    left:-28%;
  }
  #moldura_fim:after {
    top:36%;
    right:-30%;
  }
  #moldura_fim:before {
    bottom:36%;
    left:-30%;
  }
}

@media all and (max-width:480px) and (orientation:landscape) {
  body {
    background-image:url("../ASSETS/INDEX/fundo.png");
    background-repeat:repeat;
  }
  #contentor_molduras {
    top:50vw;
    left:0;
    width:auto;
    height:auto;
    transform:translate(0,0);
  }
  #moldura_abismo, #moldura_queda, #moldura_fim {
    width:69vw;
    margin-left:50%;
    transform:translateX(-50%);
  }
  #moldura_abismo {
    margin-top:38%;
    float:left;
  }
  #moldura_queda {
    margin-top:38%;
    float:left;
  }
  #moldura_fim {
    margin-top:38%;
    margin-bottom:38%;
    float:left;
  }
  #moldura_abismo:after, #moldura_queda:after, #moldura_fim:after {
    width:60%;
    font-size:5vw;
    opacity:1;
  }
  #moldura_abismo:before, #moldura_queda:before, #moldura_fim:before {
    width:60%;
    font-size:5vw;
    opacity:1;
  }
  #moldura_abismo:after {
    top:40%;
    right:-28%;
  }
  #moldura_abismo:before {
    bottom:40%;
    left:-28%;
  }
  #moldura_queda:after {
    top:38%;
    right:-26%;
  }
  #moldura_queda:before {
    bottom:38%;
    left:-28%;
  }
  #moldura_fim:after {
    top:36%;
    right:-30%;
  }
  #moldura_fim:before {
    bottom:36%;
    left:-30%;
  }
}


@media all and (min-width:481px) and (max-width:768px) and (orientation:portrait) {
  #contentor_molduras {
    top:18vw;
    left:26vw;
    width:72%;
    height:auto;
    transform:translate(0,0);
    overflow:visible;
  }
  #moldura_abismo, #moldura_queda, #moldura_fim {
    width:69vw;
    margin-left:50%;
    transform:translateX(-50%);
  }
  #moldura_abismo {
    margin-top:38%;
    float:left;
  }
  #moldura_queda {
    margin-top:38%;
    float:left;
  }
  #moldura_fim {
    margin-top:38%;
    margin-bottom:38%;
    float:left;
  }
  #moldura_abismo:after, #moldura_queda:after, #moldura_fim:after {
    width:60%;
    font-size:5vw;
    opacity:1;
  }
  #moldura_abismo:before, #moldura_queda:before, #moldura_fim:before {
    width:60%;
    font-size:5vw;
    opacity:1;
  }
  #moldura_abismo:after {
    top:40%;
    right:-28%;
  }
  #moldura_abismo:before {
    bottom:40%;
    left:-28%;
  }
  #moldura_queda:after {
    top:38%;
    right:-26%;
  }
  #moldura_queda:before {
    bottom:38%;
    left:-26%;
  }
  #moldura_fim:after {
    top:36%;
    right:-30%;
  }
  #moldura_fim:before {
    bottom:36%;
    left:-30%;
  }
}

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

  #contentor_molduras {
    position:absolute;
    top:50%;
    left:50%;
    width:70%;
    height:auto;
    transform:translate(-50%,-50%);
    overflow:visible;
  }

  #moldura_abismo, #moldura_queda, #moldura_fim {
    position:relative;
    display:inline-block;
    width:30%;
    cursor:pointer;
    overflow:visible;
  }

  #moldura_abismo {
    margin-top:10%;
    margin-left:10%;
    float:left;
  }
  #moldura_queda {
    margin-top:10%;
    margin-right:10%;
    float:right;
  }
  #moldura_fim {
    margin-top:12%;
    float:left;
  }
  #moldura_abismo:after, #moldura_queda:after, #moldura_fim:after {
    width:60%;
    font-size:3vw;
    opacity:1;
  }
  #moldura_abismo:before, #moldura_queda:before, #moldura_fim:before {
    width:60%;
    font-size:3vw;
    opacity:1;
  }
  #moldura_abismo:after {
    top:40%;
    right:-26%;
  }
  #moldura_abismo:before {
    bottom:40%;
    left:-26%;
  }
  #moldura_queda:after {
    top:38%;
    right:-24%;
  }
  #moldura_queda:before {
    bottom:38%;
    left:-24%;
  }
  #moldura_fim:after {
    top:36%;
    right:-28%;
  }
  #moldura_fim:before {
    bottom:36%;
    left:-28%;
  }
}

@media all and (min-width:769px) and (max-width:959px) and (orientation:landscape) {
  #contentor_molduras {
    position:absolute;
    top:50%;
    left:50%;
    width:70%;
    height:auto;
    transform:translate(-50%,-50%);
    overflow:visible;
  }

  #moldura_abismo, #moldura_queda, #moldura_fim {
    position:relative;
    display:inline-block;
    width:28%;
    cursor:pointer;
    overflow:visible;
  }

  #moldura_abismo {
    margin-top:10%;
    margin-left:10%;
    float:left;
  }
  #moldura_queda {
    margin-top:10%;
    margin-right:10%;
    float:right;
  }
  #moldura_fim {
    margin-top:12%;
    float:left;
  }
  #moldura_abismo:after, #moldura_queda:after, #moldura_fim:after {
    width:60%;
    font-size:2.4vw;
    opacity:1;
  }
  #moldura_abismo:before, #moldura_queda:before, #moldura_fim:before {
    width:60%;
    font-size:2.4vw;
    opacity:1;
  }
  #moldura_abismo:after {
    top:40%;
    right:-26%;
  }
  #moldura_abismo:before {
    bottom:40%;
    left:-26%;
  }
  #moldura_queda:after {
    top:38%;
    right:-24%;
  }
  #moldura_queda:before {
    bottom:38%;
    left:-24%;
  }
  #moldura_fim:after {
    top:36%;
    right:-28%;
  }
  #moldura_fim:before {
    bottom:36%;
    left:-28%;
  }
}