/*
    Thumbelina Content Slider
    V1.0 Rev 1302190900

    A lightweight horizontal and vertical content slider designed for image thumbnails.
    http://www.starplugins.com/thumbelina

    Developed by Star Plugins
    http://www.starplugins.com

    Copyright 2013, Star Plugins
    License: GNU General Public License, version 3 (GPL-3.0)
    http://www.opensource.org/licenses/gpl-3.0.html
*/


/*
    This style will be applied to the first list element (UL tag)
    inside the container.
    ### This should not require changing ###
*/
.thumbelina {
    list-style:none;
    padding:0px;
    margin:0px;
    position:absolute;
    white-space:nowrap;
    /* font-size:0 stop gaps between display-inline li elemets */
    /* Either do this, or remove all white space in HTML beween li elements */
    font-size:0;

    /* prevent annoying iPad cut/paste actions */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

/* Style for the list items that surround the thumbnails */
.thumbelina li {
   padding:5px;
   line-height: 0px;
   margin: 0 10px;
	cursor: pointer;
	width: 94px;
    height: 94px;
	border:1px solid #ccc;
	overflow:hidden;
	transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
}
.thumbelina li:hover {
     border:1px solid #666;
}

.thumbelina li img {
     position: relative;
	 top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
	max-width: 100%;
    max-height: 100%;
}


/* Common style for the buttons */
.thumbelina-but {
    position:absolute;
    z-index: 1;
    cursor:pointer;

    /* Font related items for the symbols used on buttons */
    /* Obviously not needed if you're just using images */
    color:#000;
    text-align:center;
    vertical-align:middle;
    font-size:11px;
    font-weight: bold;
    font-family:monospace;
}

/* Hover style for active button */
.thumbelina-but:hover {
    color:#000;
	opacity: 0.8;
}

/* Disabled style when button is not active due to extents being reached. */
/* You could do other things e.g. make buttons dissapear completely. */
.thumbelina-but.disabled,
.thumbelina-but.disabled:hover {
    color: #ccc;
    cursor:default;
    box-shadow:none;
}

/* Horizontal buttons. */
.thumbelina-but.horiz {
    width: 20px;
    line-height: 98px;
    top:-1px;

}
/* Left edge button. */
.thumbelina-but.horiz.left {
    left:-22px;
    border-radius: 5px 0px 0px 5px;
}
/* Right edge button */
.thumbelina-but.horiz.right {
    right:-22px;
    border-radius: 0px 5px 5px 0px;
}

/* Vertical buttons. */
.thumbelina-but.vert {
    left:-1px;
    height: 20px;
    line-height: 20px;
    width:93px
}

/* Top edge button. */
.thumbelina-but.vert.top {
    top:-22px;
    border-radius: 5px 5px 0px 0px;
}

/* Bottom edge button. */
.thumbelina-but.vert.bottom {
    bottom:-22px;
    border-radius: 0px 0px 5px 5px;
}

#surround {
	width: 100%;
    margin-bottom: 80px;
}

#surround .box-img{
	width: 100%;
	height: 100%;
	padding: 15px;
	border: 2px solid #eee;
	margin-bottom: 15px;
	position: relative;
}
#surround .img-producto{
    width: 500px;
	height: 500px;
	overflow: hidden;
	cursor: pointer;
	margin: auto;
}

#slider1 {
    margin-left: 3px;
    margin-right: 5px;
    height: 95px;
    position: relative;
}



#surround .img-producto img{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	display: block;
	max-width: 100%;
    max-height: 100%;
}


.thumbelina-but.horiz.arrow-trabajo {
    line-height: 68px;
}