@charset "utf-8";

.cont_avatar_selector
{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin:auto;
}

.preview_avatar .fondos
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 0;  
    top:0;
    left:0
}

.preview_avatar .acc_fondo
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 1;  
}

.preview_avatar .orejas
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 2;  
}

.preview_avatar .piel
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 3;  
}

.preview_avatar .mascara
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 4;   
}

.preview_avatar .cabello 
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 5;  
}

.preview_avatar .brazo_izquierdo, .preview_avatar .brazo_derecho, .preview_avatar .ojos, .preview_avatar .boca 
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 6;  
}

.preview_avatar .bigotes, .preview_avatar .mangas
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 7;   
}

.preview_avatar .calzado 
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 8;  
}

.preview_avatar .inferior 
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 9;  
}

.preview_avatar .superior
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 10;  
}

.preview_avatar .traje, .preview_avatar .casco, .preview_avatar .superior_2
{
    width: inherit;
    height: inherit;
	position: absolute;
	z-index: 11;  
}

.preview_avatar .mascota,.preview_avatar .sombreros,.preview_avatar .pelota,.preview_avatar .mano
{
    width:inherit;
    height:inherit;
    position:absolute;
    z-index:12;  
}

.category_avatar
{
	width:450px;
	height: 415px;
	float:right;
	padding: 0;
	border: 5px solid #FFF;
	background: #25aae2;
	overflow: hidden;
}

.category_avatar h3
{
	text-align:center;
	margin-bottom: 10px;
}

.category_avatar h4
{
	float: left;
	text-align: center;
	width: 15%;
	font-size: 180%;
	margin-top: 32px;
	clear: left;
	margin-right: 5%;
}


/************************ITEMS****************************/


/*.avatar-accesorio-item img
{   
    position: absolute;
    left: -140px;
    top: -195px;
    z-index: 100;
}*/

.avatar-accesorio-item img
{
    width:300px;
    height:399px;
}

/* CATEGORIA CUERPO*/
.avatar-accesorio-item[data-subcategoria="brazo_izquierdo"] img {
    position: absolute;
    left: -140px;
    top: -195px;
    z-index: 100;
}

.avatar-accesorio-item[data-subcategoria="orejas"] img 
{
    position: absolute;
    left: -46px;
    top: -70px;
    z-index: 100;
    width: 222px;
}

.avatar-accesorio-item[data-subcategoria="piel"] img
{  
    position: absolute;
    left: -84px;
    top: -90px;
    z-index: 100;
}

.avatar-accesorio-item[data-subcategoria="boca"] img
{   
    position: absolute;
    left: -84px;
    top: -150px;
    z-index: 100;
}

.avatar-accesorio-item[data-subcategoria="cabello"] img
{   
    position: absolute;
    left: -35px;
    top: -35px;
    z-index: 100;
    width: 200px;
}

.avatar-accesorio-item[data-subcategoria="bigotes"] img
{   
    position: absolute;
    left: -84px;
    top: -140px;
    z-index: 100;
}

.avatar-accesorio-item[data-subcategoria="ojos"] img
{
    position: absolute;
    left: -35px;
    top: -50px;
    z-index: 100;
    width: 200px;
}

.avatar-accesorio-item[data-subcategoria="brazo_derecho"] img
{ 
    position: absolute;
    left: -30px;
    top: -195px;
    z-index: 100; 
}

/* CATEGORIA ROPA*/
.avatar-accesorio-item[data-subcategoria="sombreros"] img
{ 
    width: 210px;
    z-index: 100;
    position: absolute;
    left: -45px;
    top: 15px;
}

.avatar-accesorio-item[data-subcategoria="traje"] img
{
    width: 106px;
    height: 135px;
    z-index: 100;
    position: absolute;
    left: 13px;
}

.avatar-accesorio-item[data-subcategoria="inferior"] img
{
    position: absolute;
    left: -85px;
    top: -255px;
    z-index: 100;
}

.avatar-accesorio-item[data-subcategoria="calzado"] img
{
    position: absolute;
    left: -85px;
    top: -290px;
    z-index: 100;
}

.avatar-accesorio-item[data-subcategoria="superior"] img, .avatar-accesorio-item[data-subcategoria="mangas"] img, .avatar-accesorio-item[data-subcategoria="superior_2"] img {
    position: absolute;
    left: -85px;
    top: -220px;
    z-index: 100;
}

/* CATEGORIA ACCESORIOS*/
.avatar-accesorio-item[data-subcategoria="acc_fondo"] img
{ 
    width: 150px;
    position: absolute;
    top: -80px;
    left: -10px;
}

.avatar-accesorio-item[data-subcategoria="mascara"] img, .avatar-accesorio-item[data-subcategoria="casco"] img 
{ 
    width: 250px;
    position: absolute;
    top: -75px;
    left: -58px;
}

.avatar-accesorio-item[data-subcategoria="pelota"] img
{ 
    width: 350px;
    position: absolute;
    top: -345px;
    left: -178px;
}

.avatar-accesorio-item[data-position-css="abajo-izquierda"].avatar-accesorio-item[data-subcategoria="pelota"] img {
    top: -320px;
    left: -30px;
}



.avatar-accesorio-item[data-subcategoria="mano"] img 
{
    width: 350px;
    position: absolute;
    top: -293px;
    left: -161px;

}

.avatar-accesorio-item[data-position-css="centro"].avatar-accesorio-item[data-subcategoria="mano"] img
{
    top: -310px;
    left: -95px;
}

/*
    .avatar-accesorio-item[data-position-css="abajo-izquierda"] img {
    top: -320px;
    left: -30px;
}
*/

/* CATEGORIA FONDO*/
.avatar-accesorio-item[data-subcategoria="fondos"] img
{ 
    width:100%
}


/* CATEGORIA MASCOTAS*/
.avatar-accesorio-item[data-subcategoria="mascota"] img
{ 
    position: absolute;
    left: 10px;
    top: -265px;
    z-index: 100;  
}

/*Posiciones cuando no se cambia el tamaño*/
.avatar-accesorio-item[data-position-css="abajo-derecha"] img
{
  left: -178px;
}

.avatar-accesorio-item[data-position-css="arriba-izquierda"] img
{
    top: 10px;
    left: 4px;
}

.avatar-accesorio-item[data-position-css="arriba-derecha"] img {
    top: 10px;
    left: -175px;
}


/* CATEGORIA ESPECIALES*/
.avatar-accesorio-item[data-subcategoria=""] img
{ 
}



/************************END_ITEMS****************************/

.wrapp_carousel_items
{
	width: 435px;
	height: 370px;
	padding: 35px 0 0 15px;
	overflow: scroll; 
	overflow-x: hidden;
}

.wrapp_carousel_items_2 {
    width: 435px;
    height: 370px;
    padding: 35px 0 0 5px;
    overflow: scroll;
    overflow-x: hidden;
    -ms-scrollbar-face-color: #6685CA;
    scrollbar-face-color: #6685CA;
    -ms-scrollbar-highlight-color: #6685CA;
    scrollbar-highlight-color: #6685CA;
    -ms-scrollbar-shadow-color: #6685CA;
    scrollbar-shadow-color: #6685CA;
    -ms-scrollbar-3dlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    -ms-scrollbar-arrow-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
    -ms-scrollbar-track-color: #E5E5E5;
    scrollbar-track-color: #E5E5E5;
    scrollbar-drakshadow-color: #000000;
}

.catalog_object_avatar
{
	width:450px;
	height: 415px;
	float:right;
	padding: 0;
	border: 5px solid #FFF;
	background: #25aae2;
	overflow: hidden; 
}

@media (min-width:800px)
{
    
}

@media (max-width:800px)
{
    .catalog_object_avatar 
    {
        width: 310px;
    }
    
    .wrapp_carousel_items_2 
    {
        width: 300px;
    }
    
    .category_avatar 
    {
        width: 310px;
    }
    
    .wrapp_carousel_items 
    {
        width: 300px;
        padding: 0 0 0 15px;
    }
    
    .category_avatar h4 
    {
        float:none;
    }
    
    .carousels_cont 
    {
        width: 270px;
    }
    
    
}

.catalog_object_avatar .regresar_category
{
	color: #FFF;
	background: #973A69;
	border: 0;
	clear: right;
	width: 50%;
	height: 30px;
	display: block;
	margin: -20px auto 10px;
}

.catalog_object_avatar .regresar_category:hover
{
	background: #AA52A0;
	cursor: pointer;
}

.object_avatar
{
	width: 115px;
	height: 115px;
	float: left;
	margin: 10px;
	position: relative;
	outline:#fff solid 3px;
	overflow:hidden; 
}

.object_avatar:hover
{
    background:#fff;
}

.object_avatar a img
{
    width:216px;
    
}

/*.object_avtar a .superior*/
.object_avatar .b_1_boca img
{
    width: 300px;
    margin-top: -68px;
    margin-left: -110px;
}

.object_avatar .b_0_boca img
{
    width: 300px;
    margin-top: -68px;
    margin-left: -110px;
}

.object_avatar .b_1_ojos img
{
    width: 300px;
    margin-top: -68px;
    margin-left: -110px; 
}

.object_avatar .b_0_ojos img
{
    width: 300px;
    margin-top: -68px;
    margin-left: -110px; 
}

.object_avatar .b_1_cabello img
{
    width: 220px;
    height: 290px;
    margin-top: -28px;
    margin-left: -77px; 
}

.object_avatar .b_0_cabello img
{
    width: 250px;
    margin-top: -30px;
    margin-left: -79px;
}

/*.object_avtar a .medio*/
.object_avatar .b_1_camisas img
{
    width: 370px;
    margin-top: -200px;
    margin-left: -145px;
}

.object_avatar .b_0_camisas img
{
    width: 370px;
    margin-top: -200px;
    margin-left: -145px;
}

.object_avatar .b_1_jersey img
{
    width: 370px;
    margin-top: -210px;
    margin-left: -152px;  
}

.object_avatar .b_0_jersey img
{
    width: 370px;
    margin-top: -210px;
    margin-left: -152px;  
}

.object_avatar .b_0_saco img
{
    width: 370px;
    margin-top: -200px;
    margin-left: -145px;
}

.object_avatar .b_0_top img
{
    width: 370px;
    margin-top: -200px;
    margin-left: -135px;
}

.object_avatar .b_1_top img
{
    width: 370px;
    margin-top: -200px;
    margin-left: -135px;
}
/*.object_avtar a .piel*/
.object_avatar .b_1_piel img
{
    width: 300px;
    margin-left: -110px;
    margin-top: -70px;
}

.object_avatar .b_0_piel img
{
    width: 300px;
    margin-left: -110px;
    margin-top: -70px;
}

/*.object_avtar a .inferior*/
.object_avatar .b_1_pantalones img
{
    width: 341px;
    margin-left: -140px;
    margin-top: -267px;
}

.object_avatar .b_0_pantalones img
{
    width: 341px;
    margin-left: -122px;
    margin-top: -242px;
}

.onject_avatar .b_0_shorts img
{
    width: 370px;
    margin-top: -260px;
    margin-left: -156px; 
}
.object_avatar .b_1_shorts img
{
    width: 370px;
    margin-top: -260px;
    margin-left: -156px;
}

.object_avatar .b_0_falda img
{
    width: 335px;
    margin-left: -125px;
    margin-top: -260px;
}

.object_avatar .b_0_calzado img
{
    width: 341px;
    margin-left: -134px;
    margin-top: -320px;
}

.object_avatar .b_1_calzado img
{
    width: 315px;
    margin-left: -130px;
    margin-top: -290px;
}

.object_avatar_check {
    background-color: white;
}

.btn_guardar
{
    width:150px;
    height:50px;
    margin-top:15px;
}

/*********************RIBBOON**************************************/
.wrapper_ribbon {
  width: 85px;
  height: 85px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon {
  font: bold 0 Sans-Serif;
  /*color: #333;*/
  text-align: center;
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  color: #FFF;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.ribbon:before, .ribbon:after {
  content: "";
  border-top:   3px solid #CE233C;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon:before {
  left: 0;
}
.ribbon:after {
  right: 0;
}

/*******************STYLE rCAROUSEL*********************/
.carousels_cont
{
	width: 304px;
	height: 80px;
	margin: 0 auto;
	margin-bottom:5px;
	position: relative;
	float:left;
	margin-left: 5%;
}

.carousels_cont > div
{
	margin:0 auto;
}

.carouseles
{
	width:500px;
	margin-left:15px;
}

.ui-carousel img
{
	border:0;
	width:150px;
	margin: 0;
}

.ui-carousel a
{
    border-radius:20px;
}

.ui-carousel a:hover
{
    background:#0092cc;
    border-radius:20px;
}

.ui-carousel .a_mini_1_boca img
{
    width: 190px;
    margin-left: -65px;
    margin-top: -40px;
}

.ui-carousel .a_mini_0_boca img
{
    width: 190px;
    margin-left: -65px;
    margin-top: -40px;
}

.ui-carousel .a_mini_0_ojos img
{
    width: 190px;
    margin-left: -65px;
    margin-top: -40px;
}

.ui-carousel .a_mini_1_ojos img
{
    width: 190px;
    margin-left: -65px;
    margin-top: -40px;
}

.ui-carousel .a_mini_1_cabello img
{
    width: 190px;
    margin-left: -70px;
    margin-top: -25px;
}

.ui-carousel .a_mini_0_cabello img
{
    width: 170px;
    margin-left: -53px;
    margin-top: -21px;
}

.ui-carousel .a_mini_1_camisas img
{
    width: 250px;
    margin-left: -97px;
    margin-top: -135px;
}

.ui-carousel .a_mini_0_camisas img
{
    width: 250px;
    margin-left: -97px;
    margin-top: -135px;
}

.ui-carousel .a_mini_1_jersey img
{
    width: 250px;
    margin-left: -100px;
    margin-top: -145px;
}

.ui-carousel .a_mini_0_jersey img
{
    width: 250px;
    margin-left: -100px;
    margin-top: -145px;
}

.ui-carousel .a_mini_1_saco img
{
    width: 370px;
    margin-top: -200px;
    margin-left: -145px;
}

.ui-carousel .a_mini_0_saco img
{
    width: 270px;
    margin-top: -150px;
    margin-left: -105px;
}

.ui-carousel .a_mini_0_top img
{
    width: 341px;
    margin-left: -135px;
    margin-top: -195px;
}

.ui-carousel .a_mini_1_pantalones img
{
    width: 190px;
    margin-left: -68px;
    margin-top: -140px;
}

.ui-carousel .a_mini_0_pantalones img
{
    width: 290px;
    margin-left: -110px;
    margin-top: -215px;
}

.ui-carousel .a_mini_0_shorts img
{
    width: 250px;
    margin-left: -100px;
    margin-top: -175px;
}

.ui-carousel .a_mini_1_shorts img
{
    width: 250px;
    margin-left: -100px;
    margin-top: -175px;
}

.ui-carousel .a_mini_0_falda img
{
    width: 335px;
    margin-left: -135px;
    margin-top: -245px;
}

.ui-carousel .a_mini_1_piel img
{
    width: 201px;
    margin-left: -71px;
    margin-top: -38px;
}

.ui-carousel .a_mini_0_piel img
{
    width: 201px;
    margin-left: -71px;
    margin-top: -38px;
}

.ui-carousel .a_mini_0_calzado img
{
    width: 250px;
    margin-left: -101px;
    margin-top: -233px;
}

.ui-carousel .a_mini_1_calzado img
{
    width: 210px;
    margin-left: -85px;
    margin-top: -195px;
}




/***********NAV-rCAROUSEL*****************************/
.ui-carousel-next, .ui-carousel-prev {
  width: 32px;
  height: 100px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABuSURBVFhHY2AYBaMhMBxC4N+/f/3/cQCg3GqgFAvN/DlqObaQHw320QRH9RAYzWq0zGpMuOILWnzKUD0+STEQ5AhooYK1pKd5gQNy7GByxPwBq/Fg0Tag2XHUEei5ZzQ6RtMEKSXqqNrREMAXAgAB7dhspaP2pAAAAABJRU5ErkJggg==') /*icons/ArrowHead-Left.png*/ center center no-repeat;
  display: block;
  position: absolute;
  top: 0;
  z-index: 100;
  opacity: .6;
}
.ui-carousel-next:hover, .ui-carousel-prev:hover
{
	opacity:1;
}

.ui-carousel-next {
  right: 0;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACISURBVFhHY2AYBaMhMFhD4P///yz//v1bDaSxAqBcP83dPuoIWBCPhsRoSKBnNyLSxGyQGppmUyIcASpDRh3xH1qa4gwJJkrjiZGR8Q/QjJN4zJEAynFQag9O/UAfFuCpLw4D5XhGLad6CIwGO7ZEBwyV0QRH9bQGNnDkJjjahOeoqaMhgBkCALTm2lrbu5mPAAAAAElFTkSuQmCC') /*icons/ArrowHead-Right.png*/;
}

.ui-carousel-prev {
  left: 0;
}

.ui-carousel-next > span, .ui-carousel-prev > span {
  display: none;
}

/***********rCAROUSEL************************************/
.ui-carousel {
	height: 100px;
	margin: 0;
	overflow: auto;
	padding: 0;
	position: relative; /*for ie7 to work e.g in html carousels*/
	width: 300px
}

.ui-carousel > .wrapper {
    margin: 0;
    padding: 0;
    width: 9999px;
}

.ui-carousel > .wrapper > * {
	border: 0;
	display: block;
	float: left;
	height: 100px;
	overflow: hidden;
	width: 100px;	
}


/*NEW LAYOUT*/

.btn-avatar
{
    padding: 15px;
}

.btn-avatar .fa {
    font-size: 2em;
}

.text-button-avatar {
    display:none
}

.cont-subCat, .cont-cat, .cont-items
{
    margin-left:-15px;
    margin-right:-15px;
}

.preview_avatar {
    width: 273px;
    height: 363px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.avatar-accesorio-item
{
    width:131.66px;
    height:133px;
    margin: 0 1px 10px;
    float:left;
    position:relative;
    overflow:hidden;
    background:white;
    
    /*Lesther*/
    padding: 1px; 
    border-radius: 4px;

    outline: 1px solid hidden;
    box-shadow: 3px 3px 7px rgba(102, 102, 102, 0.4);
    -moz-box-shadow: 3px 3px 7px rgba(102, 102, 102, 0.4);
    -webkit-box-shadow: 3px 3px 7px rgba(102, 102, 102, 0.4);
}

@media(min-width:768px)
{
    .preview_avatar
    {
        width:180px;
        height:239px;
    }

    .cont-subCat, .cont-cat, .cont-items {
        margin-left: 15px;
        margin-right: 15px;
    }

    .avatar-accesorio-item {
        margin: 0 10px 10px;
    }
}

@media(min-width: 992px) {

    .preview_avatar
    {
        width:235px;
        height:313px;
    }

    .btn-avatar {
        padding: 6px 12px;
    }

        .btn-avatar .fa {
            font-size: 1.33333333em;
        }

    .text-button-avatar {
        display: block;
    }

     .avatar-accesorio-item {
        margin: 0 12px 10px;
    }

}

@media(min-width:1200px) {
    .preview_avatar {
        width: 300px;
        height: 399px;
    }

    .avatar-accesorio-item {
        margin: 0 19px 16px;
    }
}
    .contenedor-items {
        overflow: hidden;
        margin-bottom: 10px;
        position: relative;
    }

    .contenedor-items.cont-cat
    {
        height:54px
    }

    .contenedor-items.cont-subCat
    {
        height:90px
    }

    .contenedor-items:hover .control-scroll
    {
        opacity:.6;
    }


    .hor-scroll-subCat
    {
        white-space:nowrap; 
        overflow:auto; 
        height:100px
    }

     .hor-scroll-cat
    {
        white-space:nowrap; 
        overflow:auto; 
        height:64px
    }

.control-scroll {
    display: none;
    position: absolute;
    padding: 0 5px;
    top: 50%;
    height: 100%;
    font-size: 4em;
    color: black;
    opacity: .2;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cont-cat .control-scroll
{
    font-size: 2.6em;
    padding: 0 3px;
}

@media(min-width: 768px) {
    .cont-cat .control-scroll, .cont-subCat .control-scroll {
        display: block;
    }

    .control-scroll:hover {
        color: black;
        background: rgba(0, 0, 0, 0.41);
    }

    .control-scroll.left-control {
        left: 0;
    }

    .control-scroll.right-control {
        right: 0;
    }
}