﻿.slideShow
{
    box-sizing:border-box;
            
    width:30%;
    height:auto;
            
                        
    }        
            
.slideShow .projector
{
    position:relative;            
    width:100%;                                                            
    height:100%;
    overflow:hidden;
            
            
    }            

.slideShow .projector .slider
{
    position:absolute;
            
    width:301%;            
    height:100.33%;
         
    }

    .slideShow .projector .slider .slide {
        width: 33.33%;
        height: 100%;
        float: left;

    }
            
.slideShow .projector img, .slideShow .projector .slider .slide img
{
    display:block;
    width:100%;                                    
    }
            
            
.slideShow .projector .controlsPanel
{
    position:absolute;
    width:100%;
    height:100%;             
             
             
    }
             
.slideShow .projector .controlsPanel .forwardButton
{
    width:30px;
    height:50%;
             
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
             
    right:0px;
  
    }
         
.slideShow .projector .controlsPanel .backwardButton
{
    width:30px;
    height:20%;
             
             
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left:0px;
             
    }   
             
.slideShow .projector .controlsPanel .positionIndicatorPanel
{
            
    width:100%;
    position:absolute;
    bottom:2%;
    text-align:center;
            
    }
            
.slideShow .projector .controlsPanel .positionIndicatorPanel button
{
    width:20px;
    height:20px;    
    border:0px;
    margin-left:1px;
    }                                      
         
.slideShow .projector .controlsPanel .positionIndicatorPanel button.active
{
    background-color:#ff0000;
    }
    
.slideShow .caption
 {

     }     
         
.animation
{
    -webkit-transition: all 0.2s;
    -webkit-transition-timing-function: ease-out; 
    
    transition: all 0.2s;
    transition-timing-function: ease-out;   
    }
            
.animation.slideLeft
{
    -webkit-transform: translate(-33.33%, 0);
    transform: translate(-33.33%, 0);
            
    } 
             
.animation.slideRight
{
    -webkit-transform: translate(33.33%, 0);
    transform: translate(33.33%, 0);
             
    }                