#gender {
height:80px;
display:none;
}

#talla {
height:80px;
display:none;
}

#sole {
margin-top:5px;
height:26em;
display:none;
margin-bottom:5px;
}
.suela:hover{
color:#f0000;
}

.patrones {
height:350px;
display:none;
}

#straps {
margin-top:5px;

display:none;
margin-bottom:5px;
}

.lacorrea:hover {
border: solid 2px #000;
}

.lacorrea:focus {
border: solid 2px #ff0000;
}

.strap_btns{
width:10em;
 height:10em;
 margin-right:1em;
 background-color:#fff;
 background-position:center;
 background-repeat:no-repeat;
 background-size:contain;
 border: solid 1px #000;
 cursor:pointer;
 float:left;
 display:block;
 color:#000;
 line-height:215px;
}
.strap_btns:hover{
 color:#000;
  line-height:215px;
   border: solid 1px #ff0000;

}

.strap_btns:focus{
 color:#000;
  line-height:215px;
   border: solid 2px #ff0000;

}

.diseno {
width:4em;
 height:4em;
 float:left;
 margin-right:.1em;
 margin-bottom:.1em;
 display:block;
 background-color:rgba(255,255,255,1); 
 background-repeat:no-repeat;
 background-size:100px 120px;
 background-position:0px -30px;
 border: solid 1px #000;
 cursor:pointer;
}

.diseno:hover{
 color:#000;
   border: solid 2px #27659a;
	background-color:rgba(39,101,154,.2);

}

/*.diseno:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 0px;
    color: #fff;
    content: url(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
	font-size:.7em;
    z-index: 4000;
    width: 400px;
	height:478px;
	}*/

.diseno:focus{
 color:#000;
  line-height:215px;
   border: solid 2px blue;

}


.patrones::-webkit-scrollbar { width: 8px; }

/* to style the scrollbar track, black outline curved border */
.patrones::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,1);
/* for curved tracker border */
-webkit-border-radius: 6px;
border-radius: 10px;
}

/* to style the scrollbar thumb, white outline, curved border */
.patrones::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: transparent;
-webkit-box-shadow: inset 0 0 2px white;

}
.patrones::-webkit-scrollbar-thumb:window-inactive {
background: transparent;
}

#step1 {
width:100%; 
height:25px; 
border-bottom:solid 1px #666; 
display:block; 
margin-bottom:5px; 
cursor:pointer;
}
#step1:hover{
color:#ff0000;
border-bottom:solid 1px #ff0000;
}

#step1show {
width:100%; 
height:25px; 
border:solid 1px #666; 
display:none;
cursor:pointer; 
border-radius:2px; 
background-color:#0082a7;
border:0px;
color:#fff;
}

#step2 {
width:100%; 
height:25px; 
border-bottom:solid 1px #666; display:block; cursor:pointer; margin-bottom:5px; 
}
#step2:hover{
color:#ff0000;
border-bottom:solid 1px #ff0000;
}

#step2show {
width:100%;
 height:25px;
 border:solid 1px #0082a7;
 display:none;
 cursor:pointer;
 border-radius:2px;
 background-color:#0082a7;
 color:#fff;

}

#step3 {
width:100%;
 height:25px;
 border-bottom:solid 1px #666;
 display:block;
 cursor:pointer;
 margin-bottom:5px;

}
#step3:hover{
color:#ff0000;

border-bottom:solid 1px #ff0000;
}

#step3show {
width:100%;
 height:25px;
 border:solid 1px #0082a7;
 display:none;
 cursor:pointer;
 border-radius:2px;
 background-color:#0082a7;
 color:#fff;

}

#step4 {
width:100%;
 height:25px;
 border-bottom:solid 1px #666;
 display:block;
 cursor:pointer;
 margin-bottom:5px;
 

}
#step4:hover{
color:#ff0000;
border-bottom:solid 1px #ff0000;
}

#step4show {
width:100%;
 height:25px;
 border:solid 1px #0082a7;
 display:none;
 cursor:pointer;
 border-radius:2px;
 background-color:#0082a7;
 color:#fff;

}

#step5 {
width:100%;
 height:25px;
 border-bottom:solid 1px #666;
 display:block;
 cursor:pointer;
 margin-bottom:5px;
}
#step5:hover{
color:#ff0000;
border-bottom:solid 1px #ff0000;
}

#step5show {
width:100%;
 height:25px;
 border:solid 1px #0082a7;
 display:none;
 cursor:pointer;
 border-radius:2px;
 background-color:#0082a7;
 color:#fff;

}

#noprod {
margin-top:25px;
 width:60%;
 height:478px;
 background-image:url(../img/blank.jpg);
 background-position:center;
 background-repeat:no-repeat;
 background-size:contain;
 float:left;
 margin-right:5%;


}

#sumary {
width:38%;
color:#27659a;
 padding:8px;
 border:1px solid #27659a;
 border-radius:3px;
position:fixed; 
top:100px; 
width:20em; 
right:0px; 
z-index:9998; 
background-color:rgba(255,255,255,.7);


}

#cart_container {
width:75%;
color:#27659a;
 padding:8px;
 border:1px solid #27659a;
 border-radius:3px;
position:fixed; 
top:100px; 
width:40em; 
right:0px; 
z-index:9999; 
background-color:rgba(255,255,255,.9);


}

#cart_containerx {
width:75%;
color:#27659a;
 padding:8px;
 border:1px solid #27659a;
 border-radius:3px;
position:fixed; 
top:100px; 
width:40em; 
right:0px; 
z-index:9999; 
background-color:rgba(255,255,255,.75);


}

/* botones gender */
.btngender{
background-color:#fff;
width:40%;
float:left;
height:50px;
line-height:25px;
border: 2px solid #666;
color:#000;
margin-right:10%;
border-radius:2px;
margin-bottom:10px;
margin-top:10px;
}
.btngender:hover{
border: 2px solid #ff0000;
color:#ff0000;

}

.btngender:active{
border: 2px solid #ff0000;
color:#fff;
background-color:#ff0000;

}
.btngender:focus{
border: 2px solid #ff0000;
color:#fff;
background-color:#ff0000;

}

/* botones talla */

.btn_talla{
background-color:#fff;
width:31%;
float:left;
height:50px;
line-height:25px;
border: 2px solid #666;
color:#000;
margin-right:2%;
border-radius:2px;
margin-bottom:10px;
margin-top:10px;
}
.btn_talla:hover{
border: 2px solid #ff0000;
color:#ff0000;

}

.btn_talla:active{
border: 2px solid #ff0000;
color:#fff;
background-color:#ff0000;

}
.btn_talla:focus{
border: 2px solid #ff0000;
color:#fff;
background-color:#ff0000;

}
#showprod {
width:400px;
height:478px;
position:relative;
background-color:rgba(255,255,255,0);
margin-right:auto;
margin-left:auto;
margin-bottom:1em;
display:none;
}



#xxx{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	z-index:1000;
}
#zzzx{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	z-index:1990;
}
#zzz{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	z-index:2000;
}
#yyy{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	z-index:3000;
}

.colorgrupo{
    display: inline;
    position: relative;
}
.colorgrupo:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
	font-size:.7em;
    z-index: 98;
    width: 75px;
}