body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


.interactivisimoboy{
  
width: 100%;
height: 100%;
position: fixed;
top: 0; left: 0;
display: flex;
justify-content: center;
align-items: center;
align-contents: center;
z-index: 3;
border: 10px solid #C48A3D;
background: #00000088;
  
}

.interactivisimoboy img{
    max-width: 90%;
    max-height: 90%;
}

.hoveryboy{
opacity: 0;
     transition: all .25s linear; 
  -o-transition: all .25s linear; 
  -moz-transition: all .25s linear; 
  -webkit-transition: all .25s linear; 
    cursor: pointer;
}

.hoveryboy:hover {
 opacity: 1;
     transition: all .25s linear; 
  -o-transition: all .25s linear; 
  -moz-transition: all .25s linear; 
  -webkit-transition: all .25s linear; 
}

.caballo{
    position: absolute;
    top: 325px;
    left: 120px;
}

.osito{
    position: absolute;
    top: 615px;
    left: 730px;
}

.mapa{
    position: absolute;
    top: 170px;
    left: 650px;
}

.palomo{
    position: absolute;
  top: 295px;
    left: 127px;
}

.robotgrande{
    position: absolute;
  top: 305px;
    left: 207px;
}

.robotpeque{
    position: absolute;
  top: 345px;
    left: 257px;
}

.espada{
    position: absolute;
  top: 205px;
    left: 299px;
}

.pato{
    position: absolute;
  top: 350px;
    left: 299px;
}

.coche{
    position: absolute;
  top: 340px;
    left: 325px; 
}

.estanteria
{top: 380px;
    left: 128px;
position: absolute;}

#estanteriabn
{top: 380px;
    left: 128px;
position: absolute;}






.interactivisimoboy1{
    border: 10px solid #C48A3D;

    position: relative;
}

.verticalaligner{
   width: 100%;
height: 100%;
position: fixed;
top: 0; left: 0;
display: flex;
justify-content: center;
align-items: center;
align-contents: center;
z-index: 3; 
}

.shadyboy
{ top: 0;
    left: 0;
    background-color: black;
    z-index: 4;
    width: 1650px;
    height: 929px;
    position: absolute;
    opacity: 0.4;
 display: none;
}

.shadyboy2
{ top: 0;
    left: 0;
    background-color: black;
    z-index: 5;
    width: 1650px;
    height: 929px;
    position: absolute;
    opacity: 0.4;
 display: none;
}

.shadyboy3
{ top: 0;
    left: 0;
    background-color: black;
    z-index: 5;
    width: 1650px;
    height: 929px;
    position: absolute;
    opacity: 0.9;
 display: block;
}

.infobox
{
    position: absolute;
    top: 84px;
    height: 775px;
    width: 500px;
    background-color: #393B3D;
    border: 4px solid #C48A3D;
    font-family: Avenir;
    font-size: 16px;
    left: 1100px;
    color: white;
    text-align: left;
    padding: 20px;
    cursor: default;
    z-index: 5;
    display: none;
    
}

.infoboximg{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfilfrida.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboximgalbert{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfilpau.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboximgemma{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfilemma.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboximgadela{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfiladela.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboximglluna{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfillluna.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboximgemile{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfilemile.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.infoboximgannie{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfilannie.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboximgpau{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfilalbert.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboximgrut{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfilrut.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboximgmapa{
    width: 450px;
    height: 390px;
        background: url('../image/imginteractivos/fotoperfilmapa.png');
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.infoboxbold{
    color: #C48A3D;
    font-weight: 600;
}

.infotitle{
    font-family: Fuji-Bold;
    color:#C48A3D;
    font-size: 30px;
    
}

.infohistoria{
    font-family: Fuji-Bold;
    color:#C48A3D;
    font-size: 25px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    bottom: 5px;
    left: 145px;
}

.infohistoria:hover{
    text-decoration: underline;
}

.infohistoria1{
    font-family: Fuji-Bold;
    color:#C48A3D;
    font-size: 25px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    bottom: 5px;
    left: 145px;
}

.infohistoria1:hover{
    text-decoration: underline;
}

.infodemo
{
    width: 1000px;
  position: absolute;
  left: 325px;
display: block;
  top: 20%;
  margin-top: -50px;
    background-color: #393B3D;
    border: 4px solid #C48A3D;
    font-family: Avenir;
    font-size: 20px;
    text-align: center;
    color: white;
    padding: 10px;
        z-index: 6;
    padding-left: 50px;
    padding-right: 50px;
    
}

.infohistoriaemile{
    font-family: Fuji-Bold;
    color:#C48A3D;
    font-size: 25px;
    position: absolute;
    cursor: pointer;
     bottom: 5px;
    left: 145px;
}
.infohistoriaemile:hover{
    text-decoration: underline;
}

#comicemile{
    display: none;
    background-color: black;
    z-index: 10;
    
}

#comicannie{
    display: none;
    background-color: black;
    z-index: 10;
    
}

#historiaadela{
    display: none;
    background-color: black;
    z-index: 10;
    
}

#historiaalbert{
    display: none;
    background-color: black;
    z-index: 10;
    
}

#historiaemma{
    display: none;
    background-color: black;
    z-index: 10;
    
}
#historiarut{
    display: none;
    background-color: black;
    z-index: 10;
    
}

#historialluna{
    display: none;
    background-color: black;
    z-index: 10;
    
}

#comicpaufrida{
    display: none;
    background-color: black;
    z-index: 10;
    
}

#emile2{
    display: none;
    
}

#emile3{
    display: none;
    
}

.arrowback{
     position: fixed;
 cursor: pointer;
top: 43%;
 font-family: Fuji-Bold;
    color:#C48A3D;
    font-size: 70px;
left: 2%;
display: flex;
justify-content: center;
align-items: center;
align-contents: center;
}

.xback{
     position: fixed;
 cursor: pointer;
top: 2%;
 font-family: Fuji-Bold;
    color:#C48A3D;
    font-size: 30px;
right: 1%;
display: flex;
justify-content: center;
align-items: center;
align-contents: center;
}


.arrowfront{
     position: fixed;

top: 43%;
 font-family: Fuji-Bold;
    color:#C48A3D;
    font-size: 70px;
right: 2%;
display: flex;
justify-content: center;
align-items: center;
align-contents: center;
    cursor: pointer;
}


.textohistoria{
    color: white;
    padding-top: 70px;
    padding-bottom: 70px;
    text-align: justify;
}