.slider22{
    width: 100%;
    background: #FFF;
    margin: 0px;
    padding: 0px;
    padding-bottom: 30px;    
    padding-top: 20px;
  
}
.slider222{
    width: 100%;    
    background: #FFF;
    margin: 0px;
    padding: 0px;
    padding-bottom: 0px;    
    padding-top: 20px;    
}
.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-right:15px;
   margin:0px 0px;   
   line-height: 0px;
   margin:0px;   

}

/* Add a border to the thumbnails. */


.thumbelina li img {    
     padding: 0px;     
     width: 100%;
     height: 60px;
     opacity: 1;
	 -webkit-transition: 2s ease-in-out;
	 transition: 2s ease-in-out;

      
}
#slider2 .thumbelina li{
              box-shadow:0 50px 30px -60px rgba(0,0,0,0.5);  
              -webkit-transition:all 0.3s ease-in-out;
              -moz-transition:all 0.3s ease-in-out;
              -o-transition:all 0.3s ease-in-out;
              transition:all 0.3s ease-in-out;  

}
#slider3 .thumbelina li img{padding: 0px;
    width: 100%;
    height: 150px;
     border-radius:10px;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;
     margin-bottom: 6px;
}
#slider3 .thumbelina li b{font-size: 18px;line-height: normal;}
#slider3 .thumbelina li{
     width:236px;
     min-height: 110px;
     height: 290px;
     margin: 0px;
     padding: 0px;          
     font-size: 18px;     
     text-align: center;
     overflow: hidden;
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;
     padding: 0px;     
     line-height: 18px;
     -webkit-transition: .3s ease-in-out;
   	 transition: .3s ease-in-out;
     margin-right: 5px;
     background: #FFF;
     border-radius:10px;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;
     display: block;
     position: relative;
     overflow: hidden;
     padding: 0px;
     background: none;
    
     
     
}  
#slider3 .thumbelina li em{
    position: absolute;
    font-style: normal;
    display: block;
    
    font-size: 14px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    padding: 6px;
    color: #ACACAC;
    line-height: normal;
}
#slider3 .thumbelina li h2{
    font-size: 25px;
    line-height: 22px;
    color: #EEE;    
    height: auto;   
    font-weight: normal;
}
#slider3 .thumbelina li a{font-weight: normal;color: #333;font-size: 18px;line-height: normal;}
#slider3 .thumbelina li:hover{

}
#slider3 .thumbelina li:hover a{
      color: #283583;
}

/* Hover effect for the images */
#slider3 .thumbelina li img:hover {
          

   filter: sepia(50%);
     
}
#slider2 .thumbelina li img:hover {
          
     -webkit-filter: sepia(0);
	   filter: sepia(50%);
    -webkit-transform: translate(0, 10%);
	transform: translate(0, 10%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;	
     
}

    
/*
    Following is the CSS for the navigation buttons.
    They are designed to fit flush on the ends of the slider
    using absolute positioning, with the container as the parent element.
    The sizes are set to match the demo slider.
    You can change any of this as you wish - you don't even need to use these classes.
    Position the buttons where you like on the page, change sizes, use images etc.
    They don't have to be children of the container.
*/

/* Common style for the buttons */
.thumbelina-but {
    position:absolute;    
    z-index: 1;
    cursor:pointer;   
    background: none;
    color: #283583;
    text-align:center;
    vertical-align:middle;
    font-size:35px;
    font-weight: bold;
    font-family:monospace;
    
}
.nf .thumbelina-but{z-index: 999999;right: -40px;}
/* Hover style for active button */    
.thumbelina-but:hover {
    color: #000;    
}

/* 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: #283583;
    cursor:default;
    box-shadow:none;
}

/* Horizontal buttons. */
.thumbelina-but.horiz {
    width: auto;
    height: auto;
    line-height: 150px;
    top:0px;
    
}

/* Vertical buttons. */  
.thumbelina-but.vert {
    left:0px;
    height: 20px;
    line-height: 200px;
    width:100px;
     
}

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

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

/* Horizontal buttons. */
.thumbelina-but.horiz {
    width: 30px;
    height: 40px;
    line-height: 40px;
    background: #FFF;
    top: 53px;

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