/* 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="transaction"] {
    background: transparent;
    height: auto;
    min-height: 335px;
}
    .thumbnail[data-medium-type="transaction"] .front,
    .thumbnail[data-medium-type="transaction"] .back {
        height: 100%;
        width: 100%;
        background-color: white;
        border: 1px solid;
    }
    .thumbnail[data-medium-type="transaction"] .image {
        display: block;
        text-align: center;
        height: 80px;
        padding: 10px 50px;
        line-height: 65px;
        overflow: hidden;
        font-size: 5px;
        position: relative;
    }
        .thumbnail[data-medium-type="transaction"] .image img {
            display: inline;
            max-height: 100%;
            width: auto;
        }
        .thumbnail[data-medium-type="transaction"] .image svg {
            position: absolute;
            display: none;
            height: 60px;
            width: 60px;
            left: 50%;
            margin-left: -30px;
            top: 50%;
            margin-top: -30px;
        }
        .thumbnail[data-medium-type="transaction"] .image.loading svg {
            display: block;
        }
    .thumbnail[data-medium-type="transaction"] .clients {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        padding: 8px 0 7px 0;
        margin: 0 0 10px 0;
        border-top: 1px solid;
        border-bottom: 1px solid;
    }
    .thumbnail[data-medium-type="transaction"] .sector {
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        padding: 0 0 0 14px;
        margin: 0 0 10px 0;
        background-image: url('../../../images/layouts/listStyle.png');
        background-repeat: no-repeat;
        background-position: top left;
    }
    .thumbnail[data-medium-type="transaction"] header * {
        font-size: 13px;
        font-weight: 700;
        margin: 0 0 8px 0;
    }
    .thumbnail[data-medium-type="transaction"] .activity {
        font-size: 11px;
        line-height: 13px;
        margin: 0 0 10px 0;
    }
    .thumbnail[data-medium-type="transaction"] footer {
        width: 100%;
        padding-left: 20px;
        clear: both;
    }
        .thumbnail[data-medium-type="transaction"] footer .tag {
            float: left;
            margin-right: 5px;
            font-size: 12px;
            padding: 4px 8px;
            margin-top: 3px;
        }
        .thumbnail[data-medium-type="transaction"] footer .btnFlipIn,
        .thumbnail[data-medium-type="transaction"] footer .btnFlipBack {
            background:  white;
            color: white;
            height: 25px;
            width: 25px;
            margin-top: 3px;
            text-align: center;
            border: 1px solid #58595b;
            display: none;
        }
        .thumbnail[data-medium-type="transaction"] footer .btnFlipIn {
            float: right;
        }
        .thumbnail[data-medium-type="transaction"] footer .btnFlipBack {
            float: left;
        }
            .thumbnail[data-medium-type="transaction"] footer .btnFlipBack svg {
                height: 100%;
                width: 100%;
            }
@media (min-width: 1200px) {
    .thumbnail[data-medium-type="transaction"] {
        min-height: 370px;
    }
        .thumbnail[data-medium-type="transaction"] .image {
            height: 110px;
            padding: 10px 50px;
            line-height: 95px;
        }
        .thumbnail[data-medium-type="transaction"] .clients {
            font-size: 13px;
            padding: 10px 0 9px 0;
            margin: 0 0 12px 0;
        }
        .thumbnail[data-medium-type="transaction"] .sector {
            font-size: 13px;
            line-height: 13px;
            padding: 0 0 0 14px;
            margin: 0 0 12px 0;
        }
        .thumbnail[data-medium-type="transaction"] header * {
            font-size: 14px;
            font-weight: 700;
            margin: 0 0 10px 0;
        }
        .thumbnail[data-medium-type="transaction"] .activity {
            font-size: 12px;
            line-height: 14px;
            margin: 0 0 12px 0;
        }
            .thumbnail[data-medium-type="transaction"] footer .tag {
                font-size: 14px;
                padding: 5px 10px;
                margin-top: 0px;
            }
}

/* Flip */
.thumbnail[data-medium-type="transaction"] {
    position: relative;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
}
    .thumbnail[data-medium-type="transaction"] .front {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 900;
        -webkit-transform: rotateX(0) rotateY(0);
        -moz-transform: rotateX(0) rotateY(0);
        -ms-transform: rotateX(0) rotateY(0);
        -o-transform: rotateX(0) rotateY(0);
        transform: rotateX(0) rotateY(0);
        transform-origin: 50% 50% 0;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        /*-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;*/
    }
    .thumbnail[data-medium-type="transaction"].flip .front {
        z-index: 900;
        -webkit-transform: rotateX(0) rotateY(179deg);
        -moz-transform: rotateX(0) rotateY(179deg);
        -ms-transform: rotateX(0) rotateY(179deg);
        -o-transform: rotateX(0) rotateY(179deg);
        transform: rotateX(0) rotateY(179deg); /* Newer browsers (incl IE9) */
    }
    .thumbnail[data-medium-type="transaction"] .back {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 800;
        -webkit-transform: rotateX(0) rotateY(-179deg);
        -moz-transform: rotateX(0) rotateY(-179deg);
        -ms-transform: rotateX(0) rotateY(179deg);
        -o-transform: rotateX(0) rotateY(-179deg);
        transform: rotateX(0) rotateY(-179deg);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        /*-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;*/
    }
    .thumbnail[data-medium-type="transaction"].flip .back {
        z-index: 1000;
        -moz-transform: rotateX(0) rotateY(0);  /* FF3.5/3.6 */
        -o-transform: rotateX(0) rotateY(0);  /* Opera 10.5 */
        -webkit-transform: rotateX(0) rotateY(0); /* Saf3.1+ */
        transform: rotateX(0) rotateY(0); /* Newer browsers (incl IE9) */
    }
        .thumbnail[data-medium-type="transaction"] .transaction-text {
            font-size: 12px !important;
            font-weight: 400;
            padding: 0 15px;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            height: inherit;
        }
        .thumbnail[data-medium-type="transaction"] .transaction-text div {
            margin: auto;
        }
        @media (min-width: 1200px) {
            .thumbnail[data-medium-type="transaction"] .transaction-text {
                font-size: 14px !important;
            }
        }
