.gallery{width:100%}

.gallery-container {
    align-items:center;
    display:flex;
    height:500px;
    margin:0 auto;
    max-width:1300px;
    position:relative
}
.gallery-item {
    height:200px;
    opacity:.4;
    position:absolute;
    transition:all .3s ease-in-out;
    width:200px;
    z-index:0
}
.gallery-item.gallery-item-selected {
    box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1);
    height:400px;
    opacity:1;
    left:50%;
    transform:translateX(-50%);
    width:500px;
    z-index:2
}
.gallery-item.gallery-item-previous,.gallery-item.gallery-item-next {
    height:280px;
    opacity:1;
    width:280px;
    z-index:1
}
.gallery-item.gallery-item-previous{left:30%;transform:translateX(-50%)}
.gallery-item.gallery-item-next{left:70%;transform:translateX(-50%)}
.gallery-item.gallery-item-first{left:15%;transform:translateX(-50%)}
.gallery-item.gallery-item-last{left:85%;transform:translateX(-50%)}

.gallery-controls{display:flex;justify-content:center;margin:30px 0}
.gallery-controls button{border:0;cursor:pointer;font-size:16px;margin:0 20px;padding:0 12px;text-transform:capitalize}
.gallery-controls button:focus{outline:none}
.gallery-controls-previous{position:relative}
.gallery-controls-previous::before {
    border:solid #000;
    border-width:0 2px 2px 0;
    content:'';
    display:inline-block;
    height:4px;
    left:-10px;
    padding:2px;
    position:absolute;
    top:0;
    transform:rotate(135deg) translateY(-50%);
    transition:left .15s ease-in-out;
    width:4px
}
.gallery-controls-previous:hover::before{left:-18px}
.gallery-controls-next{position:relative}
.gallery-controls-next::before {
    border:solid #000;
    border-width:0 2px 2px 0;
    content:'';
    display:inline-block;
    height:4px;
    padding:2px;
    position:absolute;
    right:-10px;
    top:50%;
    transform:rotate(-45deg) translateY(-50%);
    transition:right .15s ease-in-out;
    width:4px
}
.gallery-controls-next:hover::before{right:-18px}
.gallery-nav{bottom:-15px;display:flex;justify-content:center;list-style:none;padding:0;position:absolute;width:100%}
.gallery-nav li{background:#ccc;border-radius:50%;height:10px;margin:0 16px;width:10px}
.gallery-nav li.gallery-item-selected{background:#555}