body{
    background-color: #000!important;
}

.espacio{
    position: relative;
    z-index: 1;
    width: 400px;
    min-height: 600px;
    border-style: none;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 40px #000;
    overflow: hidden!important;
}

.espacioPrincipal{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-style: none;
    /*background-image: url(../imagen/fondohome.png);*/
    box-shadow: 0px 10px 40px #000;
    display: block;
}
.BEntrada{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.BInicio{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.Entrada{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    
    background-color: black;
    z-index: 50;
   
}

.logo1{
    position: absolute;
    width: 70%;
    left: 20%;
    top: 20%;
    z-index: 5;
}

.botonInicio{
    position: absolute;
    width: 35%;
    left: 30%;
    top:  5o%;
}

.base{
    display: block;
    width: 65%;
    left: 22%;
    top: 60%;
    z-index: 60;
}

.flash{
    display: none;
    width: 30%;
    left: 35%;
    top: 71%;
}

.botonesAdicionales{
    position: absolute;
    width: 100%;
    height: 15%;
    top: 15%;
    right: 0%;
    z-index: 35;
}

.regresar{
    position: absolute;
    top: 370%;
    left: 5%;
    width: 16%;
}

.compartir{
    position: absolute;
    right: 7%;
    width: 19%;
    top: 370%;
}

.contenido{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.Slider{
    width: 100%;
    
}

.slider{
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80%;
    z-index: 5;
}

.circulo{
    position:absolute;
    top:14.5%;
    left:9%;
    width:81%;
    z-index:10;
}

.logoPrincipal{
    position: absolute;
    top: 4%;
    left: 29%;
    width: 40%;
    z-index: 5;
}

.fondoPrincipal{
    position: absolute;
    top: -5%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.nombre{
    position: absolute;
    top: 65%;
    left: 15%;
    width: 30%;
    z-index: 4;
}

.cargo{
    position: absolute;
    top: 65%;
    right: 15%;
    width: 30%;
    z-index: 4;
}

.botonesPrincipales{
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 20%;
    z-index: 35;
}

.extra{
    position: relative;
    bottom: 0%;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
}

.fondoBotonesP{
    position: absolute;
    top: -27%;
    z-index: -1;
    width: 100%;
    height: 127%;
    display: none;
}


.contacto{
    position: absolute;
    top: 15%;
    width: 19%;
    left: 20%;
}

.redes{
    position: absolute;
    top: 360%;
    width: 19%;
    left: 5%;
}

.servicio{
    position: absolute;
    top: 15%;
    width: 18%;
    right: 20%;
}

.conocenos{
    position: absolute;
    top: 20%;
    width: 20%;
    left: 40%;
}

.galeria{
    position: absolute;
    top: -10%;
    width: 20%;
    right: 64%;
}

.espacioContacto{
    position: absolute;
    bottom: -100%;
    left: 0%;
    width: 100%;
    height: 42%;
    z-index: 30;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}
.gorras{
    position: absolute;
    width: 25%;
    top: 5%;
    left: 38%;
    
}
.playeras{
    position: absolute;
    width: 20%;
    right: 15%;
    top: -10%;
}
.tazas{
    position: absolute;
    width: 17%;
    top: -10%;
    left: 20%;
}

.cerrar{
    position: absolute;
    top: 5%;
    right: 5%;
    width: 12%;
    z-index: 5;
}

.cerrar2{
    position: absolute;
    top: 3%;
    right: 5%;
    width: 12%;
    z-index: 40;
}

.botonEspacio{
    width: 17%;
    z-index: 48;
}

.whatsapp{
    position: absolute;
    top: -1%;
    right: 20%;
    width: 20%;
}

.telefono{
    position: absolute;
    width: 17%;
    top: -10%;
    left: 20%;
}

.correo{
    position: absolute;
    width: 20%;
    top: 15%;
    left: 42%;
}

.espacioUbicacion{
    position: absolute;
    bottom: -100%;
    left: 0%;
    width: 102.5%;
    height: 100%;
    padding: 2.5%;
    z-index: 36;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
}

.facebook{
    position: absolute;
    width: 20%;
    top: -20%;
    left: 5%;
}
.ubicacion{
    position: absolute;
    width: 14%;
    top: 75%;
    right: 20%;
}

.youtube{
    position: absolute;
    width: 11%;
    top: 25%;
    left: 30%;
}

.sitio{
    position: absolute;
    top: -25%;
    right: 1%;
    width: 20%;
}

.pinterest{
    position: absolute;
    width: 20%;
    top: -1%;
    right: 55%;
}

.espacioConocenos{
    position: absolute;
    bottom: -100%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #A349A4;
    padding: 1%;
    z-index: 39;
    -webkit-transition: all 3S ease;
    -moz-transition: all 3S ease;
    -o-transition: all 3S ease;
    transition: all 3S ease;
}

.espacioRedes{
    position: absolute;
    bottom: -100%;
    right: 0%;
    width: 100%;
    height: 100%;
    padding: 0%;
    overflow-y: scroll;
    z-index: 36;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}

/*.espacioServicios{
    position: absolute;
    bottom: -100%;
    right: 0%;
    width: 100%;
    height: 100%;
    padding: 1%;
    overflow-y: scroll;
    background-color: black;
    z-index: 36;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}*/

.espacioServicios{
    position:absolute;
    bottom: -100%;
    left: 0%;
    width: 100%;
    height: 42%;
    z-index: 32;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}

.servicios{
    position: absolute;
    width: 98%;
    height: 98%;
    overflow-y: inherit;
}

.conocenos1{
    position: absolute;
    width: 98%;
    height: 98%;
    overflow-y: inherit;
}

.productos{
    display: inline-block;
    width: 100%;
    padding: 2%;
    z-index: 4;
}

.video{
    display: inline-block;
    width: 100%;
    height: 80%;
    padding: 2%;
    z-index: 4;
    
}
.productos1{
    display: inline-block;
    width: 100%;
    padding: 2%;
    z-index: 4;
}
.productos1{padding-bottom:35%!important}

.espacioCompartir{
    position: absolute;
    bottom: -100%;
    right: 0%;
    width: 101%;
    height: 100%;
    padding: 0%;
    z-index: 36;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}
.BCompartir{
    position: absolute;
    width: 100%;
    height: 100%;
}

.espacioAnimacion1{
    bottom: 0%;
    z-index: 49;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}

.espacioAnimacion2{
    bottom: 0%;
    z-index: 49;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}

.compartir1{
    width: 17%;

}

.whatsappCompartir{
    position: absolute;
    top: 50%;
    right: 19%;
    width: 25%;
}

.facebookCompartir{
    position: absolute;
    top: 35%;
    right: 38%;
    width: 25%;
}

.correoCompartir{
    position: absolute;
    top: 50%;
    left: 19%;
    width: 25%;
}

.twitterCompartir{
    position: absolute;
    top:58%;
    left: 45%;
}

.plusCompartir{
    position: absolute;
    top:69%;
    left: 20%;
    width: 16%;
}

.espacioGaleria{
    position: absolute;
    bottom: -100%;
    right: 0%;
    width: 100%;
    height: 100%;
    padding: 1%;
    overflow-y: scroll;
    background-color: #A349A4;
    z-index: 36;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}

.espacioPlayeras{
    position: absolute;
    bottom: -100%;
    right: 0%;
    width: 100%;
    height: 100%;
    padding: 0%;
    overflow-y: scroll;
    z-index: 36;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}
.IPlayeras{
    display: inline-block;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.IPlayeras2{
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #A349A4;
    z-index: 4;
}
.espacioTazas{
    position: absolute;
    bottom: -100%;
    right: 0%;
    width: 100%;
    height: 100%;
    padding: 0%;
    z-index: 36;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}
.ITazas{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    
}
.espacioGorras{
    position: absolute;
    bottom: -100%;
    right: 0%;
    width: 100%;
    height: 100%;
    padding: 0%;
    z-index: 36;
    overflow: scroll;
    -webkit-transition: all 2S ease;
    -moz-transition: all 2S ease;
    -o-transition: all 2S ease;
    transition: all 2S ease;
}
.IGorras{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.sliderContenedor{
    width: 100%;
    z-index: 3;
}

.muestra{
    display: inline-block;
    width: 100%;
    padding: 2%;
    z-index: 4;
}
.muestra1{
    padding: 2% 2% 35% 2%;
}

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    position: absolute;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.5); 
}


/* ipad vertical y horizontqal */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    .espacio{
        z-index: 1;
        width: 400px;
        min-height: 600px;
        
        border-style: none;
        border-color: #000000;
        background-color: #A349A4;
        padding-bottom: 430px;
    }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .espacio{
        z-index: 1;
        width: 400px;
        min-height: 600px;
        
        border-style: none;
        border-color: #000000;
        background-color: #A349A4;
        padding-bottom: 430px;
    }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
    .espacio{
        z-index: 1;
        width: 100vw;
        min-height: 100vh;
    }
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { 
    .espacio{
        z-index: 1;
        width: 400px;
        min-height: 600px;
        
    }
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 
    .espacio{
        z-index: 1;
        width: 100vw;
        min-height: 100vh;
    }
}