/* CSS Document */


.skoolbag_gallery{
	height: 173px;
	position: absolute;
	overflow:hidden;
}

.skoolbag_gallery .nextbutton{
	height: 44px; width:44px;
	right:0px;
	top:70px;
	background-image: url(../images/galleryarrow.png);
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	cursor:pointer;
	opacity:1;
	
	transition:opacity .2s;
	-webkit-transition: opacity .2s;
}

.skoolbag_gallery .nextbutton:hover{
	opacity:0.5;
	
	transition:opacity .2s;
	-webkit-transition: opacity .2s;
}

.skoolbag_gallery .backbutton{
	height: 44px; width:44px;
	left:0px;
	top:70px;
	background-image: url(../images/galleryarrow2.png);
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	cursor:pointer;
	opacity:1;
	
	transition:opacity .2s;
	-webkit-transition: opacity .2s;
}


.skoolbag_gallery .backbutton:hover{
	opacity:0.5;
	
	transition:opacity .2s;
	-webkit-transition: opacity .2s;
}

.scrollpannel{
	position: absolute;
	height: 173px;
}

.skoolbag_gallery .image{
	height: 170px; width: 170px;
	top: 10px; left: 20px;
	/*border: 1px solid #bbbbbb;*/
	border-radius:2px;
	cursor: pointer;
	background-size:cover;
	position: absolute;
	transition:opacity .2s;
	-webkit-transition: opacity .2s;
        background-position: center;
}

.skoolbag_gallery .image:hover{
	opacity: 0.8;
	transition:opacity .2s;
	-webkit-transition: opacity .2s;
}
.imagePopup{
    
    position: fixed;
    background-color: #555555;
    border: 1px solid #555555;
    border-radius: 2px;
    cursor: pointer;
    background-position: center;
    background-size: cover;
    box-shadow: 5px 3px 15px rgba(20,20,20,0.2);
    
   /* transition: opacity .2s;
    -webkit-transition: opacity .2s;*/
    
}

.imagePopup:hover{
    
    border: 1px solid #555555;
    /*opacity: .9;
    
    transition: opacity .2s;
    -webkit-transition: opacity .2s;*/
    
}

.imagetitle{
   /* background-color: rgba(255,255,255,.9);*/
    padding: 10px;
    color: #333333;
    position: absolute;
    bottom: 7px;
    right: 0px;
    left: 0px;
    text-align: right;
    font-weight: 600;
    background: -moz-linear-gradient(45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0.81) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.81))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,0.81) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,0.81) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,0.81) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,0.81) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#cfffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    transition: background .3s;
    -webkit-transition: background .3s;
}

.gallery_image {
    height: 100px;
    width: 145px;
    float: left;
    margin: 5px;
    background-size: cover;
    cursor: pointer;
    background-position: 50% 50%;
    border: 1px solid #ddd;
    border-radius: 3px;
    
    transition: opacity .2s;
    -webkit-transition: opacity .2s;
}

.gallery_image:hover {
    opacity: .8;
    
    transition: opacity .2s;
    -webkit-transition: opacity .2s;
}