*,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        outline: none;
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        color: #707070;
        background-color: #333;
    }
    
    .containera {
        margin: auto;
        max-width: 70%;
        max-height: 100%;
        background-color: white;
    }
    
    
    /* Useful Classes */
    .xy-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .transition {
        transition: all 350ms ease-in-out;
    }
    
    .r-3-2 {
        width: 100%;
        padding-bottom: 66.667%;
        background-color: #ddd;
    }
    
    .image-holder {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    /* Main Styles */
    .gallery-wrapper {
        position: relative;
        overflow: hidden;
    }
    
    .gallery {
        position: relative;
        white-space: nowrap;
        font-size: 0;
    }
    
    .item-wrapper {
        cursor: pointer;
        width: 23%; /* arbitrary value */
        display: inline-block;
        background-color: white;
    }
    
    .gallery-item { opacity: 0.5; }
    .gallery-item.active { opacity: 1; }
    
    .controls {
        font-size: 0;
        border-top: none;
    }
    .move-btn {
        display: inline-block;
        width: 50%;
        border: none;
      color: #ccc;
        background-color: transparent;
        padding: 0.2em 1.5em;
    }
    .move-btn:first-child {border-right: none;}
    .move-btn.left  { cursor: w-resize; }
    .move-btn.right { cursor: e-resize; }