/* Element wrapper */
.sp-wrap {
    display:none;
    line-height:0;
    font-size:0;
    background:#fff;
    position:relative;
	top:10px;
	left:11px;
    float:left;
    /**************
      Set max-width to your thumbnail width
    ***************/
    width: 356px;
	height:180px;
	margin-bottom:0;
}

/* Thumbnails */
.sp-thumbs {
    text-align:left;
    display:inline-block;
	width:356px;
	background:#fff;
	padding:1px 0;
}
.sp-thumbs img {
    width:87px;
    height:56px;
	margin:1px 1px 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity:0.5;
}
.sp-thumbs a:link, .sp-thumbs a:visited {
    opacity:1;
    display:inline-block;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
	position:relative;
}
.sp-thumbs a:hover{
    opacity:1;
}
.sp-thumbs a:active, .sp-current{
    opacity:1!important;
    position: relative;
	background:url(../images/gok.png) no-repeat;
}
.ohover{
	width:87px;
	height:63px;
	float:left;
	background:url(../images/gok.png) no-repeat;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
	position:absolute;
	left:0;
	top:-5px;
	z-index:2;
}
.sp-thumbs a:active, .sp-current img, .sp-thumbs a:active, .sp-current .ohover{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
}

/* Unzoomed, big thumbnail */
.sp-large {
    position:relative;
    overflow:hidden;
    top:0;
    left:0;
}
.sp-large a img {
    width:356px;
    height:180px;
}
.sp-large a {
    display:inline-block;
}

/* Panning Zoomed Image */
.sp-zoom {
    position:absolute;
    left:0;
    top:0;
    display:none;
}

/* Button to go full size */
.sp-full-screen a{
    position: absolute;
    z-index: 1;
    display: block;
    right: 20px;
    top: 30px;
    font-size: 20px;
    width: 39px;
    height: 39px;
    padding: 0 0 2px 1px;
    background: url(../images/ghover.html) no-repeat !important;
	color:#000 !important;
	line-height:39px;
	text-align:center;
	z-index:999;
}
.sp-full-screen a:link,
.sp-full-screen a:visited {
    background: url(../images/ghover.html) no-repeat !important;
    color: #000;
    font-size: 20px;
	line-height:40px;
	text-align:center;
    width: 39px;
    height: 39px;
    text-decoration: none;
    text-align: center;
    display: block;
}

/* Lightbox */
.sp-lightbox {
    position: fixed;
    top:0;
    left:0;
    height: 100%;
    width:100%;
    background:rgb(0,0,0);
    background:rgba(0,0,0,.9);
    z-index: 999;
    display: none;
}
.sp-lightbox img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
}

/* Remove margin in mobile view */
@media screen and (max-width: 400px) {
    .sp-wrap {
        margin:0 0 15px 0;
    }
}