.chocolat-zoomable.chocolat-zoomed{
    cursor : zoom-out;
}
.chocolat-open{
    overflow: hidden;
}
.chocolat-overlay{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:2010;
    background-color: rgba( 0,0,0,1 ) ;
    display: none;
}
.chocolat-wrapper{
    height:100%;
    width:100%;
    position:fixed;
    display: none;
    left:0;
    top:0;
    z-index:2016;
    color: #fff;
}
.chocolat-zoomable .chocolat-img{
    cursor : zoom-in;
}
.chocolat-loader{
    height:32px;
    width:32px;
    position:absolute;
    left:50%;
    top:50% ;
    margin-left:-16px;
    margin-top:-16px;
    z-index:2011;
    background:url(../../img/loader.html);
    display:none;
}
.chocolat-content{
    position:fixed;
    width:0px;
    height:0px;
    left:50%;
    top:50%;
    z-index:2014;
    text-align: left;
}

.chocolat-content .chocolat-img{
    position:absolute;
    width:100%;
    height:100%;
}
.chocolat-wrapper .chocolat-left{
    position:absolute;
    left:0;
    width:50px;
    height:100px;
    top: 50%;
    margin-top: -50px;
    cursor:pointer;
    background:url(../../img/left.svg) 50% 50% no-repeat;
    z-index: 2017;
    display: none;
    background-size: 50% ;
    transform: rotate(180deg);
    opacity: 0.6 ;

}
.chocolat-wrapper .chocolat-right{
    position:absolute;
    right:0;
    width:50px;
    height:100px;
    top: 50%;
    margin-top: -50px;
    cursor:pointer;
    background:url(../../img/left.svg)  50% 50% no-repeat;
    z-index: 2017;
    display: none;
    background-size: 50% ;
    opacity: 0.6 ;
}
.chocolat-wrapper .chocolat-right.active{
    display: block;
}
.chocolat-wrapper .chocolat-left.active{
    display: block;
}
.chocolat-wrapper .chocolat-top{
    position:absolute;
    top:0px;
    right: 0;
    left: 0;
    line-height:50px;
    height:50px;
    //overflow: hidden;
    z-index: 2017;
    margin-bottom: 10px;
}
.chocolat-wrapper .chocolat-close{
    width:50px;
    height:50px;
    cursor:pointer;
    position: absolute;
    z-index: 2022;
    top: 10px;
    right: 10px;
    background-repeat: no-repeat ; 
    border: 1px solid rgba(255,255,255,.5);
    background-size: 30px 20px ;
    background-position: center ;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2030%2023%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EGroup%202%3C%2Ftitle%3E%3Cg%20stroke%3D%22%23FFF%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%201l29.93%2021.048M29.93%201L0%2022.048%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");  
}
.chocolat-wrapper .chocolat-bottom{
    position:absolute;
    bottom:0;
    left: 0;
    right: 0;
    line-height:40px;
    height:40px;
    font-size:12px;
    z-index: 17;
    padding-left: 15px;
    padding-right: 15px;
    background: rgba(0, 0, 0, 0.2);
    text-align: right;
    margin-top: 10px;
}
.chocolat-wrapper .chocolat-set-title{
    display: inline-block;
    padding-right: 15px;
    line-height: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.chocolat-wrapper .chocolat-pagination{
    float: right;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/
}
.chocolat-wrapper .chocolat-fullscreen{
    width: 16px;
    height: 40px;
    background: url(../../img/fullscreen.html) 50% 50% no-repeat;
    display: block;
    margin:auto;
    cursor: pointer;
    float: right;
}
.chocolat-wrapper .chocolat-description{
    display: inline-block;
    float: left;
}

/* no container mode*/
body.chocolat-open>.chocolat-overlay{
    z-index:2015;
}
body.chocolat-open>.chocolat-loader{
    z-index:2015;
}
body.chocolat-open>.chocolat-content{
    z-index:2017;
}

/* container mode*/
.chocolat-in-container .chocolat-wrapper,
.chocolat-in-container .chocolat-content,
.chocolat-in-container .chocolat-overlay{
    position: absolute;
}
.chocolat-in-container{
    position: relative;
}

/* uncomment to hide controls when zoomed-in*/
/*
.chocolat-zoomable .chocolat-top,
.chocolat-zoomable .chocolat-bottom,
.chocolat-zoomable .chocolat-right,
.chocolat-zoomable .chocolat-left {
    transition: opacity .3s ease, visibility 0s .3s;
   opacity: 1;
}

.chocolat-zoomable.chocolat-zoomed .chocolat-top,
.chocolat-zoomable.chocolat-zoomed .chocolat-bottom,
.chocolat-zoomable.chocolat-zoomed .chocolat-right,
.chocolat-zoomable.chocolat-zoomed .chocolat-left {
    visibility: hidden;
    opacity: 0;
}
*/