.gallery {
    -outline: 1px solid blue;
}


.gallery-thumbs {
    height: 105px;
    position: relative;
    -outline: 1px solid orange;

    margin-bottom: 8px;
}


.gallery-thumbs-w {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.gallery-thumbs-list {
    display: table;
    margin: 0 auto;
    -outline: 1px dotted blue;
}

.gallery-thumbs.-oversize .gallery-thumbs-list {
    display: block;
    position: absolute;
    left: 0; top: 0; height: 100%;
    margin: 0;
    -webkit-transition: left 400ms cubic-bezier(0.165,0.84,0.44,1);
-moz-transition: left 400ms cubic-bezier(0.165,0.84,0.44,1);
-ms-transition: left 400ms cubic-bezier(0.165,0.84,0.44,1);
-o-transition: left 400ms cubic-bezier(0.165,0.84,0.44,1);
transition: left 400ms cubic-bezier(0.165,0.84,0.44,1);
}


.gallery-thumb {
    margin-right: 8px;
    border: 2px solid white;
    height: 100px;
    float: left;
    overflow: hidden;
    -webkit-transition: border-color .4s cubic-bezier(0.165,0.84,0.44,1);
-moz-transition: border-color .4s cubic-bezier(0.165,0.84,0.44,1);
-ms-transition: border-color .4s cubic-bezier(0.165,0.84,0.44,1);
-o-transition: border-color .4s cubic-bezier(0.165,0.84,0.44,1);
transition: border-color .4s cubic-bezier(0.165,0.84,0.44,1);
    cursor: pointer;
}
.gallery-thumb.-last {
    margin-right: 0;
}
.gallery-thumb-w {}

.gallery-thumb.-loading {
    background: url('/site/img/spinner/al-2-2.gif') no-repeat center center;
}

.gallery-thumb.-selected,
.gallery-thumb:hover {
    border-color: rgba(38,93,137,0.5);
}

.gallery-thumb.-selected {
    -moz-box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5); -webkit-box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5); box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5); }
.gallery-thumb.-selected- {
    border-color: rgba(38,93,137,0.5);
}



.gallery-sHand {
    opacity: 0;

    cursor: pointer;
    -outline: 1px dashed purple;
    width: 30px;
    position: absolute;
    top: 0; bottom: 0;
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center center;

    -webkit-transition: opacity .3s ease, width .3s ease, background-size .3s ease;
-moz-transition: opacity .3s ease, width .3s ease, background-size .3s ease;
-ms-transition: opacity .3s ease, width .3s ease, background-size .3s ease;
-o-transition: opacity .3s ease, width .3s ease, background-size .3s ease;
transition: opacity .3s ease, width .3s ease, background-size .3s ease;
}

.gallery-sHand.-left {
    right: 100%;
    background-image: url('/site/img/arrow/boxy/db/arrow-left.t.png');
}
.gallery-sHand.-right {
    left: 100%;
    background-image: url('/site/img/arrow/boxy/db/arrow-right.t.png');
}

.gallery-thumbs.-oversize .gallery-sHand {
    opacity: .8;
}
.gallery-thumbs.-oversize .gallery-sHand:hover {
    opacity: 1;
}
.gallery-thumbs.-oversize .gallery-sHand.-off {
    cursor: default;
    opacity: .2;
}


@media (max-width: 480px) {
    
    .gallery-sHand {
        width: 20px;
        background-size: 50%;
    }
}

.gallery-iHand {
    -outline: 1px solid purple;
    width: 25%;
    position: absolute;
    top: 0; bottom: 0;
}

.gallery-iHand-icon {     cursor: pointer;
    display: inline-block;
    opacity: 0;
    position: absolute;
    z-index: 200;
    top: 50%;
    margin-top: -26.5px;
    padding: 11px;
    line-height: 0;
    -moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;    background-color: rgba(255,255,255,0.6);
    -moz-box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5); -webkit-box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5); box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5);     -webkit-transition: opacity .3s ease, padding .3s ease, margin-top .3s ease, border-radius .4s cubic-bezier(0.165,0.84,0.44,1);
-moz-transition: opacity .3s ease, padding .3s ease, margin-top .3s ease, border-radius .4s cubic-bezier(0.165,0.84,0.44,1);
-ms-transition: opacity .3s ease, padding .3s ease, margin-top .3s ease, border-radius .4s cubic-bezier(0.165,0.84,0.44,1);
-o-transition: opacity .3s ease, padding .3s ease, margin-top .3s ease, border-radius .4s cubic-bezier(0.165,0.84,0.44,1);
transition: opacity .3s ease, padding .3s ease, margin-top .3s ease, border-radius .4s cubic-bezier(0.165,0.84,0.44,1);
}
.gallery-iHand-icon-,
.gallery-view:hover .gallery-iHand-icon {
    opacity: 0.3;
}
.gallery-iHand:hover .gallery-iHand-icon {
    opacity: .5;
}
.gallery-iHand .gallery-iHand-icon:hover {
    opacity: 1;
}
.gallery-iHand-icon.-off {
    opacity: 0 !important;
    cursor: default;
}

.gallery-iHand-icon-img {
    display: inline-block;
    -outline: 1px dotted purple;

    width: 42px;
    height: 42px;

    -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain;     background-repeat: no-repeat;

    -webkit-transition: height .3s ease, width .3s ease, background-size .3s ease;
-moz-transition: height .3s ease, width .3s ease, background-size .3s ease;
-ms-transition: height .3s ease, width .3s ease, background-size .3s ease;
-o-transition: height .3s ease, width .3s ease, background-size .3s ease;
transition: height .3s ease, width .3s ease, background-size .3s ease;
}

.gallery-iHand.-left {
    left: 0;
}
.gallery-iHand.-right {
    right: 0;
}
.gallery-iHand.-left .gallery-iHand-icon {
    left: 20px;
}
.gallery-iHand.-right .gallery-iHand-icon {
    right: 20px;
}
.gallery-iHand.-left .gallery-iHand-icon-img {
    background-position: 40% center;
    background-image: url('/site/img/arrow/boxy/db/arrow-left.t.png');
}
.gallery-iHand.-right .gallery-iHand-icon-img {
    background-position: 60% center;
    background-image: url('/site/img/arrow/boxy/db/arrow-right.t.png');
}

@media (max-width: 810px) {
        .gallery-iHand-icon {
        margin-top: -20px;
        padding: 8px;
        -moz-border-radius: 24px;
-webkit-border-radius: 24px;
border-radius: 24px;    }
    .gallery-iHand-icon-img {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
        .gallery-iHand-icon {
        margin-top: -13.5px;
        padding: 6px;
        -moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px;    }
    .gallery-iHand-icon-img {
        width: 21px;
        height: 21px;
    }
}




.gallery-iPanel {
    position: absolute;
    z-index: 300;
    display: table;
    outline: 1px solid crimson;
    top: 0;
    right: 0;
}

.gallery-iPanel,
.gallery-view:hover .gallery-iPanel {
    opacity: 0.6;
}
.gallery-iPanel:hover {
    opacity: 1;
}

.gallery-iPanel {
    display: none;
}
.gallery-iPanel-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 10px;
    margin-top: 5px;
    margin-right: 5px;

    -webkit-transition: padding .3s ease;
-moz-transition: padding .3s ease;
-ms-transition: padding .3s ease;
-o-transition: padding .3s ease;
transition: padding .3s ease;
}
.gallery-iPanel-icon:hover {
    -moz-box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5); -webkit-box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5); box-shadow: 0px 1px 1px 1px rgba(201, 201, 201, 0.5); }
.gallery-iPanel-icon IMG {
    width: 25px;
    -webkit-transition: width .3s ease;
-moz-transition: width .3s ease;
-ms-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}



.gallery-view {
    position: relative;
    overflow: hidden;
}

.gallery-view IMG.-change {
    position: absolute; z-index: 100;
        left: 0; right: 0;
    top: 0;
}

.gallery-view.-loading {
    background: url('/site/img/spinner/al-2-2.gif') no-repeat center center;
}

.gallery-view {
    margin-bottom: 40px;     -webkit-transition: .3s ease margin-bottom;
-moz-transition: .3s ease margin-bottom;
-ms-transition: .3s ease margin-bottom;
-o-transition: .3s ease margin-bottom;
transition: .3s ease margin-bottom;
}
.gallery-view .content-img {
    margin-bottom: 0 !important;
}
@media (max-width: 810px) {
    .gallery-view {
        margin-bottom: 32px;
    }
}
@media (max-width: 480px) {
    .gallery-view {
        margin-bottom: 20px;
    }
}