/*TEST*/

.MAIN .img { display: block; position: relative; overflow: hidden; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; cursor: default; }
.MAIN .img.progressive { min-height: 31px; }
.MAIN .img.progressive > SPAN.progressive { display: block; width: 100%; margin-left: auto; margin-right: auto; /*box-shadow: 1px 1px 8px -3px #000;*/ filter: blur(2vw); background-size: contain; }
.MAIN .img:not(.alignright):not(.alignleft):not(.ico) IMG { display: inherit; max-width: 100%; margin-left: auto; margin-right: auto; }
.MAIN .img:not(.ico) IMG { display: block; margin-left: auto; margin-right: auto; }
.MAIN .img.progressive > IMG { position: absolute; z-index: 1; height: auto; }
.MAIN .img.progressive.loaded > IMG { position: relative; }


/*.MAIN .img.loaded > SPAN.progressive,*/
.MAIN .img:not(.progressive) > SPAN.progressive,
.MAIN .img.progressive.loaded SPAN.progressive { display: none; }

.MAIN .img.alignleft { margin: 10px 20px 10px 0; float: left; }
.MAIN .img.alignright { margin: 10px 0 10px 20px; float: right; }

.MAIN .img.loading:not(.no-loader) { min-height: 100px; border-radius: 10px; }
.MAIN .img:not(.loading) .img-loader { display: none !important; }
.MAIN .img .img-loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; }
.MAIN .img .img-loader { border-width: 3px; border-style: solid; border-color: #d8d2ff #d8d2ff #d8d2ff transparent; border-radius: 50%; width: 30px; height: 30px; box-sizing: border-box; }
.MAIN .img .img-loader { -webkit-animation: img-loader-spin 2s infinite linear; animation: img-loader-spin 2s infinite linear; }

@-webkit-keyframes img-loader-spin {
    from{
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
    }
    to{
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
    }
}

/*BODY:not(.design-portable)*/
.MAIN .img.play:not(.loading) { cursor: pointer; }
.MAIN .img.play:not(.loading) .icon-play { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; text-align: center; z-index: 10; }
.MAIN .img.play:not(.loading) .icon-play::before { display: block; font: normal normal normal 50px/1 FontAwesome; content: ''; line-height: 80px; color: rgba(0,0,0); padding-left: 7px; /*padding: 5px 7px;*/ background-color: rgba(105, 105, 105, 0.1); border-radius: 50%; }
HTML.fontface-fontawesome .MAIN .img.play:not(.loading) .icon-play::before { content: "\f04b"; }

.MAIN .img.play:not(.loading):hover .icon-play::before { color: rgba(0,0,0,1); background-color: rgba(255,255,255,.9); }

.MAIN .img.stop { cursor: pointer; }
.MAIN .img.stop:not(:hover) .icon-stop { display: none; }
.MAIN .img.stop:hover .icon-stop { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; text-align: center; z-index: 10; }
.MAIN .img.stop:hover .icon-stop::before { display: block; font: normal normal normal 50px/1 FontAwesome; content: ''; line-height: 80px; color: rgba(0,0,0,1); background-color: rgba(255,255,255,.9); border-radius: 50%; }
HTML.fontface-fontawesome .MAIN .img.stop:hover .icon-stop::before { content: "\f04d"; }

BODY/*:not(.design-portable)*/ .MAIN .img.full:not(.loading) { cursor: pointer; }
BODY/*:not(.design-portable)*/ .MAIN .img.full:not(.loading) .icon-full { display: inline-block; position: absolute; right: 20px; bottom: 20px; text-align: center; padding: 5px 7px; background-color: rgba(255,255,255,.7); border-radius: 6px; z-index: 10; }
BODY/*:not(.design-portable)*/ .MAIN .img.full:not(.loading) .icon-full::before { display: block; font: normal normal normal 24px/1 FontAwesome; content: ''; color: rgba(0,0,0,.8); }
HTML.fontface-fontawesome BODY/*:not(.design-portable)*/ .MAIN .img.full:not(.loading) .icon-full::before { content: "\f065"; }
BODY/*:not(.design-portable)*/ .MAIN .img.full:not(.loading):hover .icon-full { color: rgba(0,0,0,1); background-color: rgba(255,255,255,.9); }

.MAIN .img.disable-clicks { cursor: default !important; }
.MAIN .img.disable-clicks .icon-full,
.MAIN .img.disable-clicks .icon-stop { display: none !important; }


/*top: 50%; left: 50%; transform: translate(-50%, -50%);*/
.MAIN .img > .full { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0;}
.MAIN .img.loading > .full { opacity: 0; }
.MAIN .img:not(.loading) > .full { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 1; z-index: 5; background-color: rgb(255,255,255); }
.MAIN .img:not(.loading) > .full > IMG { margin-left: auto; margin-right: auto; max-width: 100%; }

/* NOSCRIPT IMG FOR SE */
DIV.img.pre[data-sizes] > IMG + NOSCRIPT > IMG {
    margin-top: -100%;
}
DIV.img.pre[data-sizes] > IMG[data-src] { height: auto; background-color: #f2f2f2; }
.img NOSCRIPT IMG { position: absolute; bottom: 0; left: 0; }
.img.pre { position: relative; /*height: 100%;*/ width: 100%; box-sizing: content-box; }

@media only screen and (max-width: 600px) {
    .MAIN .img { max-width: none!important; float: none; }
    .MAIN .img.alignleft,
    .MAIN .img.alignright { margin: 10px auto; float: none; }
    .MAIN .img:not(.ico) > IMG { display: block; margin-left: auto; margin-right: auto; }
    .MAIN .img:not(.progressive):not(.ico) > IMG { width: 100%; }
}

@media only screen and (max-width: 430px) {
    BODY:not(.category) .MAIN .img:not(.ico) { margin: 10px -20px !important; width: 100vw !important; max-width: 100vw !important;  }
    BODY:not(.category) .MAIN .img:not(.progressive):not(.ico) > IMG { width: 100%; height: auto; }

    BODY:not(.category) .MAIN .img.progressive > SPAN.progressive { /*max-width: initial !important;*/ }
}


@-webkit-keyframes img-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes img-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}