/**
 * Javascript pour la création d'un caroussel
 * @author GBI - GN
 * @file gbiCarrousel.css
 * @date 06/04/2022
 */

.gbi-carousel {
    position:relative;
    min-height: 420px;
}

/**
 * Barre de Navigation
 */
.gbi-carousel-nav {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:420px;
    background:#fff;
    border: 10px solid #fff;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    overflow: hidden;
    padding:0;
    margin:0;
}
.gbi-carousel-nav-up,
.gbi-carousel-nav-down {
    position:absolute;
    left:0px;
    width:100%;
    height:35px;
    background:#E0E0E0;
    border:5px solid #FFF;
    text-align: center;
}
.gbi-carousel-nav-up:hover,
.gbi-carousel-nav-down:hover {
    background:#808080;
    color:#FFFFFF;
    cursor:pointer;
}
.gbi-carousel-nav-disable,
.gbi-carousel-nav-disable:hover {
    cursor:default;
    background:#F0F0F0;
    color:#E0E0E0;
}
.gbi-carousel-nav-up {
    top:0px;
}
.gbi-carousel-nav-down {
    bottom:0px;
}
.gbi-carousel-nav-inner {
    position:absolute;
    top:35px;
    bottom:35px;
    width:100%;
    overflow: hidden;
    padding:0;
}
.gbi-carousel-nav ul {
    position: relative;
    list-style: none;
    padding:0;
    margin:0;
    top:0px;
}
.gbi-carousel-nav li {
    display: list-item;
}
.gbi-carousel-nav-img {
    width:80px;
    height:80px;
    border: 5px solid #fff;
    cursor:pointer;
}
.gbi-carousel-nav-img-selected {
    border-color:#E0E0E0;
}

/**
 * Zone de l'images
 */
.gbi-carousel-img {
    position:absolute;
    top:0px;
    left:120px;
    width:420px;
    height:420px;
    background:#FFFFFF;
    border: 10px solid #fff;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    overflow: hidden;
    padding:0;
    margin:0;
}
.gbi-carousel-img-img {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:90;
}
.gbi-carousel-img-prev {
    position:absolute;
    top:0px;
    left:0px;
    width:50%;
    height:100%;
    z-index:100;
    cursor:pointer;
}
.gbi-carousel-img-prev-icon {
    position: absolute;
    left:5px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    background:transparent;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    font-size: 150px;
    font-weight: bold;
    text-shadow: rgba(120,120,120,0.5) 2px 5px;
    
}
.gbi-carousel-img-prev:hover > .gbi-carousel-img-prev-icon {
    color: rgba(255,255,255,1);
}
.gbi-carousel-img-next {
    position:absolute;
    top:0px;
    right:0px;
    width:50%;
    height:100%;
    z-index:100;
    cursor:pointer;
}
.gbi-carousel-img-next-icon {
    /*opacity:0;*/
    position: absolute;
    right:5px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    background:transparent;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    font-size: 150px;
    font-weight: bold;
    text-shadow: rgba(120,120,120,0.5) 2px 5px;
}
.gbi-carousel-img-next:hover > .gbi-carousel-img-next-icon {
    color: rgba(255,255,255,1);
}
.gbi-carousel-img-prev-next-disabled {
    display:none;
}