/* SVN FILE: $Id: _indexMosaic.css 1803 2015-04-22 05:58:39Z Wolff $ */
/**
 * @lastChangedBy       $LastChangedBy: Wolff $
 * @copyright           ARZA STUDIO
 * @version             $Revision: 1803 $
 * @date                $Date: 2015-04-22 07:58:39 +0200 (mer., 22 avr. 2015) $
 * @license             LICENSE.TXT
 * @filesource          $URL: https://svn.arza-studio.com/engine/branches/1.4/modules/media/migrations/_m000000_000001_media_assets/index/_indexMosaic.css $
 */

.thumbnail[data-medium-type="reference"] {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    -ms-filter: "alpha(opacity=0)";
    -moz-opacity: 0;
    opacity: 0;
    cursor: pointer;
}
    .thumbnail[data-medium-type="reference"] .lazyLoader {
        position: absolute;
        width: 50px;
        left: 50%;
        margin-left: -25px;
        height: 50px;
        top: 50%;
        margin-top: -25px;
    }
    .thumbnail[data-medium-type="reference"].loaded .lazyLoader {
        display: none;
    }
    .thumbnail[data-medium-type="reference"] a:not(.adminOverlay) {
        display: none;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center top;
        /*background-size: auto calc(100% + 4px);*/
        background-size: cover;
    }
    .thumbnail[data-medium-type="reference"].loaded a:not(.adminOverlay) {
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    #referenceMosaic:hover .thumbnail[data-medium-type="reference"]:not(:hover) a:not(.adminOverlay) {
        -ms-filter: "alpha(opacity=70)";
        -moz-opacity: 0.7;
        opacity: 0.7;
    }
    /*.thumbnail[data-medium-type="reference"]:hover a:not(.adminOverlay) {
        background-position: center -10px;
        background-size: auto calc(100% + 20px);
    }*/
        .thumbnail[data-medium-type="reference"] picture,
        .thumbnail[data-medium-type="reference"] img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
        .thumbnail[data-medium-type="reference"] img {
             opacity: 0;
             transition: opacity .25s;
         }
        .thumbnail[data-medium-type="reference"] img.lazyloaded {
            opacity: 1;
        }
        .thumbnail[data-medium-type="reference"] .text {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 10px;
            width: 100%;
            height: auto;
        }
            .thumbnail[data-medium-type="reference"] .textInner {
                width: 100%;
                height: auto;
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 83.1" enable-background="new 0 0 100 83.1"><path fill="rgb(255,237,0)" d="M58.5,83.1H40.8l35.2-34.9H0V34.8h75.9L40.8,0h17.7L100,41.5L58.5,83.1z"/></svg>');
                padding: 8px 8px 8px 28px;
                background-size: auto 12px;
                background-position: 8px 9px;
            }
            .thumbnail[data-medium-type="reference"]:hover .textInner {
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 83.1" enable-background="new 0 0 100 83.1"><path fill="black" d="M58.5,83.1H40.8l35.2-34.9H0V34.8h75.9L40.8,0h17.7L100,41.5L58.5,83.1z"/></svg>');
            }
            @media (min-width: 992px) {
                .thumbnail[data-medium-type="reference"] .textInner {
                    padding: 6px 8px 8px 28px;
                    background-size: auto 12px;
                    background-position: 8px 11px;
                }
            }
            @media (min-width: 1200px) {
                .thumbnail[data-medium-type="reference"] .textInner {
                    padding: 8px 8px 8px 30px;
                    background-size: auto 13px;
                    background-position: 8px 12px;
                }
            }
                .thumbnail[data-medium-type="reference"] .title {
                    font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
                    width: 100%;
                    overflow: hidden;
                    text-align: left;
                    font-size: 15px;
                    line-height: 20px;
                    height: 20px;
                }
                @media (min-width: 992px) {
                    .thumbnail[data-medium-type="reference"] .title {
                        font-size: 15px;
                        line-height: 22px;
                        height: 22px;
                    }
                }
                @media (min-width: 1200px) {
                    .thumbnail[data-medium-type="reference"] .title {
                        font-size: 17px;
                        line-height: 22px;
                        height: 22px;
                    }
                }
                .thumbnail[data-medium-type="reference"] .description {
                	font-family: 'FontFace', Arial, Helvetica, sans-serif;
                    width: 100%;
                    overflow: hidden;
                    text-indent: 0.5px;
                    text-align: left;
                    font-size: 12px;
                    line-height: 14px;
                    height: 14px;
                }
                @media (min-width: 992px) {
                    .thumbnail[data-medium-type="reference"] .description {
                        font-size: 13px;
                        line-height: 15px;
                        height: 15px;
                    }
                }
                @media (min-width: 1200px) {
                    .thumbnail[data-medium-type="reference"] .description {
                        font-size: 14px;
                        line-height: 16px;
                        height: 16px;
                    }
                }
        .thumbnail[data-medium-type="reference"] .pictoWrapper {
        	position: absolute;
            top: 10px;
            right: 10px;
	        height: 20px;
	        width: 20px;
	        z-index: 1;
	        display: none;
        }
			.thumbnail[data-medium-type="reference"] svg.picto {
		        height: 100%;
		        width: 100%;
		    }
        .thumbnail[data-medium-type="reference"] .pictoPdf {
        	position: absolute;
            top: 10px;
            left: 10px;
	        height: 40px;
	        width: 40px;
	        z-index: 2;
            border-radius: 50%;
            background-image: url(pdf.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 60% auto;
            background-color: rgb(120, 120, 120);
            opacity: 0.25;
	        display: none;
        }
        .thumbnail[data-medium-type="reference"].pdfActive .pictoPdf {
	        display: block;
        }
        .thumbnail[data-medium-type="reference"].pdfSelected .pictoPdf {
	        background-color: rgba(255, 237, 0, 0.8);
            opacity: 1;
        }
        .thumbnail[data-medium-type="reference"].pdfActive a:not(.adminOverlay) {
	        pointer-events: none;
        }