@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.eot');
    src: url('fonts/Roboto-Regular.ttf');
  }
  @font-face {
    font-family: 'RobotoCondensed';
    src: url('fonts/Roboto-Condensed.eot');
    src: url('fonts/Roboto-Condensed.ttf');
  }
  
  @font-face {
    font-family: 'RobotoCondensed';
    src: url('fonts/Roboto-BoldCondensed.eot');
    src: url('fonts/Roboto-BoldCondensed.ttf');
    font-weight:bold;
  }
  
  @font-face {
    font-family: 'RobotoCondensed';
    src: url('fonts/Roboto-BoldCondensedItalic.eot');
    src: url('fonts/Roboto-BoldCondensedItalic.ttf');
    font-weight:bold;
    font-style:italic;
  }
  
  @font-face {
    font-family: 'RobotoCondensed';
    src: url('fonts/Roboto-CondensedItalic.eot');
    src: url('fonts/Roboto-CondensedItalic.ttf');
    font-style: italic;
  }
  

* {border:0; margin:0; padding:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; box-sizing: border-box;}
.horizontal{display: flex;  position: absolute;  width: 100%;  height: 100%;  background-color: #fff;  text-align: center;  z-index: 100000000000;  box-sizing: border-box;  align-items: flex-end;  justify-content: center;  font-family: menco; font-size: 2rem; display: none; background-image: url(../imagens/icone_celular.jpg); background-position: center 40px; background-repeat: no-repeat; padding-bottom: 10%;}
html{font-size: 10px;}
body {background-color:#000; height: 100vH; width: 100%; font-family:RobotoCondensed; overflow-x: hidden; display: flex; justify-content: center; align-content: center; background-image: url(../imagens/bg.jpg); background-position: center;}
span{display: inline-block;}

#stage {
    display: block;
    opacity: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    position: absolute;
    max-width: 1300px;
    max-height: 800px;
    background-image: linear-gradient(-45deg, #fbee8410, #ffffff66, #ffffff66, #b781fb10 );
    box-shadow: 0 0 50px #00000005;
    border: 2px solid #d6d4d4;
    border-radius: 5px;
}
#stage.noMargin {top: 0; margin-top: 0; transform-origin: 50% 0;}

.tituloObjeto {
    position: relative;
    font-weight: bold;
    font-size: 3.6rem;
    color: #333;
    padding: 20px 20px;
    height: 10%;
    display: flex;
    align-items: center;
}

.info {
    width: 100%;
    height: 70%;
    position: relative;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info:before {
    content: '';
    width: calc(100% - 40px);
    height: 100%;
    position: absolute;
    background-color: rgb(224 221 207);
    margin: 0 20px;
    box-shadow: 0 0 120px rgb(201 208 61 / 50%) inset, 0 0 30px rgb(51 7 7 / 60%);
    opacity: .2;
    border: 4px solid #584e4e;
    border-radius: 4px;
}

img {
    max-width: calc(100% - 40px);
    max-height: 100%;
    position: absolute;
    /* border: 5px solid transparent; */
    z-index: 2;
}

.titulo {
    font-size: 2.2rem;
    color: #333;
    margin: 0;
    font-weight: bold;
}
.texto {
margin: 8px 17px;
background-color: var(--corBoxTexto);
overflow: hidden;
min-height: 17%;
border: 3px solid rgb(255 255 255 / 80%);
padding: 8px 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
}
.texto p {
    font-size: 2rem;
    color: #333;
    line-height: 2.4rem;
    margin: 5px 0;
}

.bts {position:absolute; width:1024px; height:calc(768px * 0.70); z-index:10; top:50%; left:50%; margin-top:calc(-384px * 0.70); margin-left:-512px;}

.bts .bt{position:absolute; width:45px; height:45px; cursor:pointer; filter: drop-shadow(0px 0px 6px #38000099); pointer-events: none;}

@keyframes bt {
    0% {transform: scale(1); opacity: 0.5;}
    70% {transform: scale(.4); opacity: 1;}
    100% {transform: scale(.4); opacity: 1;}
}

.bts .bt.ativo{z-index: 20;}
.bts .bt.inativo{pointer-events: none; filter: saturate(0) brightness(1);}
.bts .bt.inativo:after{color: #00000050;}
.bts .bt.inativo .click:after{pointer-events: none;}
.bts .bt.inativo .click:before{pointer-events: none;}

.bts .bt .click{position:absolute;  width:100%; height:100%;}
.bts .bt .click:before { content: ' '; width: 63%; height: 63%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; border-radius: 50%; margin: auto; border: 3px solid var(--cor1); animation:bt 1s linear infinite; pointer-events: auto;}
.bts .bt .click:after { content: ' '; width: 17%; height: 17%; background-color: var(--cor1); position: absolute; top: 0; right: 0; left: 0; bottom: 0; border-radius: 50%; border: 3px solid var(--cor1);  margin: auto; pointer-events: auto;}
.bts .bt.ativo .click:after{background-color: var(--cor2); border-color: var(--cor2);}

.bts .bt.visitado{filter: brightness(1) drop-shadow(0px 0px 6px #ffffff99);}
.bts .bt.visitado .click:after{filter: brightness(.7);}
.bts .bt.visitado.ativo .click:after{filter: brightness(1);}
.bts .bt.visitado .click:before{animation: none; transform: scale(.8);}
.bts .bt.inativo .click:before{animation: none; transform: scale(.8);}


.sequencial .bts .bt .click:before{
    width: 70% !important;
    height: 70% !important;
}

.sequencial .bts .bt .click:after{
    width: 31% !important;
    height: 31% !important;
    top: 1px;
}

.sequencial .bts .bt:after {
    content: '1';
    text-align: center;
    width: 100%;
    position: absolute;
    line-height: 45px;
    font-weight: bold;
    left: 0px;
    font-size: 1.6em;
    top: 1px;
    pointer-events: none;
}
.sequencial .bts .visitado.bt:after {
    color: #ffffffcc;
}
.sequencial .bts .visitado.ativo.bt:after {
    color: #000000cc;
}

.sequencial .bts .bt:nth-child(1):after{ content:'1'}
.sequencial .bts .bt:nth-child(2):after{ content:'2'}
.sequencial .bts .bt:nth-child(3):after{ content:'3'}
.sequencial .bts .bt:nth-child(4):after{ content:'4'}
.sequencial .bts .bt:nth-child(5):after{ content:'5'}
.sequencial .bts .bt:nth-child(6):after{ content:'6'}
.sequencial .bts .bt:nth-child(7):after{ content:'7'}

#stage.vertical .tituloObjeto{
    width: 30%;
    float: left;
    height: 20%;
    clear: both;	
}

#stage.vertical .info{
    width: 70%;
    position: absolute;
    right: 0;
    height: 100%;
    border: none;
}

#stage.vertical .texto{
    float: left;
    height: 80%;
    margin: 0 0;
    width: 30%;
    clear: both;
}

.containerCredito {
    position: absolute;
    width: 50px;
    height: 100%;
    right: 20px;
    top: 0;
    z-index: 20;
    pointer-events: none;
}
.containerCredito.sombra{
    background-image: linear-gradient(-90deg, #00000030, transparent);
}
.containerCredito.branco{
    background-image: linear-gradient(-90deg, #ffffff30, transparent);
}
.containerCredito.sombra .credito{
    color: #fff;
}

.credito {
    position: absolute;
    text-align: right;
    width: 250px;
    padding: 5px;
    display: block;
    top: -20px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-family: 'Roboto';
    transform-origin: 100% 100%;
    transform: rotate(-90deg);
    height: auto;
    right: 0;
}

.legPrincipal {
    position: absolute;
    right: 20px;
    bottom: 0;
    padding: 5px 10px;
    z-index: 20;
    background: #00000080;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    max-width: 90vw;
}
.fonte{font-size: 1.4rem;}

.bts {position:absolute; width:1024px; height:calc(768px * 0.70); z-index:10; top:50%; left:50%; margin-top:calc(-384px * 0.70); margin-left:-512px;}
.bts.layoutVertical {
    width: calc(1024px * 0.7);
    height: 768px;
    margin-top:-384px; 
    margin-left:calc(-512px * 0.7);
}

@media only screen and (max-width: calc(450px)) {
    #stage{border: 0;}
    .texto p{font-size: 2.4rem; line-height: 2.6rem; margin: 0;}
    .titulo{font-size: 2.4rem; line-height: 2.6rem;}
    .credito {font-size: 1.4rem;}
    .sequencial .bts .bt:after{font-size: 2rem;}
    .legPrincipal{font-size: 2rem;}
    .fonte{font-size: 2rem;}
}

@media only screen and (max-width: calc(320px)) {
    .tituloObjeto{height: 12%;}
    .info{height: 60%;}
    .texto{padding: 8px 10px; min-height: 24%;}
}

@media (max-height: 450px) and (orientation: landscape){
    #stage{border: 0;}
    .credito {font-size: 1.4rem;}
    .texto p{font-size: 2.4rem; line-height: 2.6rem; margin: 0;}
    .titulo{font-size: 2.4rem; line-height: 2.6rem;}
    .tituloObjeto{height: 12%;}
    .info{height: 58%;}
    .texto{padding: 8px 10px; min-height: 24%;}
    .sequencial .bts .bt:after{font-size: 2rem;}
    .legPrincipal{font-size: 2rem;}
    .fonte{font-size: 2rem;}
}