/*
 Theme Name:   Usina #99 - Todos Brujos
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Todos Brujos
 Author:       John Doe
 Author URI:   http://example.com
 Template:     u99
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  u99-todos-brujos-child
*/
body{
    background-color: #000;
}

.site {
    background: none;
    z-index: 1;
    position: relative;
}

.divBG{
    background-image: none;
}

.espacioInicial{
    float: left;
    background-position-x: center;
    background-position-y: 48px;
    height: 100%;
    visibility: hidden;
}

.cabezalTarjetas{
    background: none;
}

.tarjetaContenido{
    background: none;
}

#divBG{
    overflow: hidden;
    z-index: 10;
    background-image:none;
    background-color: #000;
    /*height: 100vh;*/
    height: 82%;
    top: 9%;
    width: 91%;
}



#divBGAux{
    height: 100%;
    overflow: hidden;
    z-index: 10;
    /*background-image: none;*/
    position: fixed;
    width: 100%;
    top: 0px;
    background: url('img/carta.webp') center center;
    background-size: 100% 100%;
    padding: 18% 5%;
}

#divBG .divBGFondo{
    background: url('img/cielo.webp') repeat center center;
    position: absolute;
    top:0px;
    left:0px;
    width: 2470px;
    height: 100%;
    z-index: 20;
    max-width: 500%;
}

.divBGFondoEstrellas{
    background: url('img/estrellas.webp') repeat-y center right;
    z-index: 21;
    position: absolute;
    top:0px;
    left: 0px;
    width: 2470px;
    height: 100%;
    z-index: 20;
    max-width: 500%;
}

.divBGCapa{
    width: 2470px;
    height: 100%;
    background: no-repeat left bottom;
    background-size: 100% auto;
    position: absolute;
    bottom:0px;
    left:0px;
    z-index: 30;
    max-height: 2470px;
    overflow: hidden;
    max-width: 500%;
}

#divAuxScroll{
    top:0px;
    left:0px;
    width: 100%;
    position: absolute;
    z-index: 0;
}

.container{
    float: left;
}

.site-footer {
    position: fixed;
    bottom: 3%;
    z-index: 40;
    background: none;
    width: 91%;
    margin-top: 0;
    height: 6%;
}
footer a.icon {
    color: #000;
}
footer .txtAldea{
    background: url('img/aldea.png') no-repeat center center;
    width: 100%;
    height: 100%;
    background-size: auto 80%;
    position: absolute;
    transition: opacity 0.5s;
    opacity: 1;
}

.txtTodosBrujos{
    background: url('img/todosbrujos.webp') no-repeat bottom center;
    width: 100%;
    height: 8%;
    background-size: auto 60%;
    position: absolute;
    top:0px;
    opacity: 1;
    left: 0;
}

footer ul.icons{
    transition: opacity 0.5s;
    opacity: 0;
}

.contenedorPantalla{
    color: red;
    height: 100%;
    float: left;
    margin: 0px;
    max-width: 494px;
    position: relative;
}

.container{
    padding-right: 0px;
    max-width: none !important;
}

.contenidoPantalla{
    width: calc(100% - 48px);
    height: 48px;
    overflow: hidden;
    bottom: 0px;
    position: absolute;
    margin: 24px 24px 0px;
    transition: height 0.25s;
}

.contenidoPantallaRedes{
    background: #000 center center;
    background-size: auto 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 50;
    opacity: .5;
}

.pantallaRedes ul.icons {
    height: 100%;
    margin: 0px auto;
    padding: 0px;
    display: block;
    width: 100%;
    position: relative;
    z-index: 55;
}

.pantallaRedes .icons li {
    display: block;
    float: left;
    height: 100%;
    width: 50%;
    text-align: center;
    margin: 24px 0px;
}

.pantallaRedes .icons li a {
    height: 100%;
    width: auto;
    display: block;
}

.pantallaRedes a.icon {
    color: #ccc;
}

.pantallaRedes .icon {
}


/*.pantallaRedes .icon > .label {
    display: block;
    float: left;
    margin-left: 24px;
}*/
.icon{
    color: rgba(0,0,0,0);
}

.iconsbtn {
    height: 48px;
    width: 100%;
    text-align: center;
    color: #ccc;
    background-color: rgba(0, 0, 0, 0.75);
    line-height: 48px;
    border-radius: 5px 5px 0px 0px;
    vertical-align: top;
}

.iconsbtn span.label{
    vertical-align: top;
}


.iconsbtn .icon{
    margin-right: 8px;
}


#touchhand{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: url('img/touch.png') no-repeat rgba(0, 0, 0, 0.75);
    background-position-y: center;
    background-position-x: 75%;
    transition: background-position-x 1s;
    opacity: 1;
    display: none;
}

#mostrarRemera{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index: 50;
    background:rgba(0, 0, 0, 0.75);
    transition: opacity 1s;
    opacity: 1;
    display: none;
}

.mostrarRemera{
    width: 90%;
    text-align: center;
    position: relative;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}


.iframePantalla{
    background: no-repeat top center #fff;
    background-image: url('img/loading.gif');
}


#divCarta{
    background: url('img/carta.webp') center left no-repeat;
    background-size: auto 100%;
    position: fixed;
    visibility: hidden;
    height: 100vh;
    width: 100%;
    max-width: 658px;
    max-height: 1172px;
    z-index: 100;
}


.listaRemeras{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.listaRemeras .remera{
    float: left;
    width: 50%;
    padding: 16px 0px;
    position: relative;
}
.listaRemeras .remera .remeraimg{
    margin: 0px auto;
    text-align: center;
    display: block;
    padding: 0px 8px;
}

#mostrarRemera .remerabtns{
    color: #000;
    background: #FFF;
    height: 48px;
    line-height: 48px;
}
#mostrarRemera .remerabtns a{
    color: #000;
    text-decoration: none !important;
}



@media (max-width: 657px) {

    .divBGCapa{
        background-image: url('img/fondo_capa1.webp');
    }
}

@media (min-width: 658px) {

    .divBGCapa{
        background-image: url('img/fondo_capa1-grande.webp');
    }

    .espacioInicial{
        visibility: visible;
    }
    
    #divBGAux{
        background: none;
        padding: 0px
    }
    #divBG{
        top:0px;
        width: 100%;
    }
    .txtAldea, .txtTodosBrujos{
        visibility: hidden;
    }

    footer ul.icons{
        opacity: 1 !important;
    }

    .site-footer {
        background: #000;
        height: 48px;
        width: 100%;
        margin-top: 24px;
        bottom: 0%;
    }

    footer a.icon{
        color: #727272;
    }
    footer a.icon:hover{
        color: #FFF;
    }

    .contenidoPantalla{
        padding: 0px 15px 0px 19px;
        margin: 0px 24px;
        background: url('img/cartaGrande.webp') top left no-repeat;
        background-size: 100% auto;
        width: 398px;
    }

    
    .contenidoPantalla .iconsbtn{
        background: none;
        color: #000;
        font-weight: bold;
        height: 41px;
        line-height: 36px;
        margin-top: 20px;
        cursor: pointer;
    }

    .iframePantalla{
        overflow: hidden;
    }

}

