
@media (min-width: 1280px) {
    /* Greek Template */
    .template-Roman .mosaic-wrapper {
        position: relative;
        xoverflow: hidden;
        height: 700px;
        width: 80em;
        margin: 0 auto;
    }

    .template-Roman .mosaic-item {
        height: 100%;
        width: 100%;
        position: absolute;
        xpadding: 10px;
        xmargin: 10px;
        xborder: 1px solid #000;
    }

    .template-Roman .mosaic-item .mosaic-inner-wrapper {
        xborder: 1px solid #000;
        overflow: hidden;
    }

    .template-Roman .mosaic-title {
        font-weight:bold;
        text-align:left;
        color:#fff;
        position:absolute;
        transition-property: top;
        transition-duration: .25s;
        transition-timing-function: linear;
        top:10px;
        left:20px;
        padding-right:20px;
        text-shadow: 2px 2px #333;
    }
    .template-Roman .mosaic-title h4,
    .template-Roman .mosaic-title h6 {
        height:60px;
        xborder:1px solid #000;
    }
    
    .template-Roman .mosaic-item:nth-child(1):hover .mosaic-title {
        top: 30px;
        -webkit-transition-delay: .25s; /* Safari */
        transition-delay: .25s;
    }

    .template-Roman .mosaic-item:nth-child(1) .mosaic-title {
        top: 315px;
        left: 20px;
    }

    .template-Roman .mosaic-item:nth-child(1) {
        height: 700px;
        width: 420px;
        top: 0px;
        left: 0px;
        -webkit-animation: roman-mosaic-item-1 2s 1;
        animation-name: roman-mosaic-item-1;
        animation-duration: 2s;
        animation-iteration-count: 1;
    }

    @-webkit-keyframes roman-mosaic-item-1 {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    @keyframes roman-mosaic-item-1 {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    .template-Roman .mosaic-item:nth-child(1):hover {
        top: -30px;
        left: -30px;
        height: 760px;
        width: 480px;
    }

    .template-Roman .mosaic-item:nth-child(2) {
        height: 340px;
        width: 510px;
        top: 0px;
        left: 430px;
        -webkit-animation: roman-mosaic-item-2 2s 1;
        animation-name: roman-mosaic-item-2;
        animation-duration: 2s;
        animation-iteration-count: 1;
    }

    @-webkit-keyframes roman-mosaic-item-2 {
        0% {top: 0;left: 0;}
        100% {top: 0px;left: 430px;}
    }
    @keyframes roman-mosaic-item-2 {
        0% {top: 0;left: 0;}
        100% {top: 0px;left: 430px;}
    }
    .template-Roman .mosaic-item:nth-child(2):hover {
        top: -30px;
        left: 405px;
        height: 410px;
        width: 560px;
    }

    .template-Roman .mosaic-item:nth-child(3) {
        height: 160px;
        width: 300px;
        top: 10px;
        left: 950px;
        -webkit-animation: roman-mosaic-item-3 2s 1;
        animation-name: roman-mosaic-item-3;
        animation-duration: 2s;
        animation-iteration-count: 1;
    }

    @-webkit-keyframes roman-mosaic-item-3 {
        0% {top: 0;left: 0;}
        100% {top: 10px;left: 950px;}
    }
    @keyframes roman-mosaic-item-3 {
        0% {top: 0;left: 0;}
        100% {top: 10px;left: 950px;}
    }
    .template-Roman .mosaic-item:nth-child(3):hover {
        top: -20px;
        left: 920px;
        height: 220px;
        width: 360px;
    }

    .template-Roman .mosaic-item:nth-child(4) {
        height: 160px;
        width: 300px;
        top: 180px;
        left: 950px;
        -webkit-animation: roman-mosaic-item-4 2s 1;
        x-webkit-animation-delay: 1s;
        animation-name: roman-mosaic-item-4;
        animation-duration: 2s;
        animation-iteration-count: 1;
        xanimation-delay: 1s;
        x-webkit-animation-fill-mode: forwards;
        xanimation-fill-mode: forwards;
    }

    @-webkit-keyframes roman-mosaic-item-4 {
        from {top: 0;left: 0;}
        to {top: 180px;left: 950px;}
    }
    @keyframes roman-mosaic-item-4 {
        from {top: 0;left: 0;}
        to {top: 180px;left: 950px;}
    }
    .template-Roman .mosaic-item:nth-child(4):hover {
        top: 150px;
        left: 920px;
        height: 220px;
        width: 360px;
    }

    .template-Roman .mosaic-item:nth-child(5) {
        height: 160px;
        width: 300px;
        top: 350px;
        left: 430px;
        -webkit-animation: roman-mosaic-item-5 2s 1;
        animation-name: roman-mosaic-item-5;
        animation-duration: 2s;
        animation-iteration-count: 1;
    }

    @-webkit-keyframes roman-mosaic-item-5 {
        0% {top: 0;left: 0;}
        100% {top: 350px;left: 430px;}
    }
    @keyframes roman-mosaic-item-5 {
        0% {top: 0;left: 0;}
        100% {top: 350px;left: 430px;}
    }
    .template-Roman .mosaic-item:nth-child(5):hover {
        height: 220px;
        width: 360px;
        top: 320px;
        left: 400px;
    }

    .template-Roman .mosaic-item:nth-child(6) {
        height: 160px;
        width: 300px;
        top: 520px;
        left: 430px;
        -webkit-animation: roman-mosaic-item-6 2s 1;
        animation-name: roman-mosaic-item-6;
        animation-duration: 2s;
        animation-iteration-count: 1;
    }

    @-webkit-keyframes roman-mosaic-item-6 {
        0% {top: 0;left: 0;}
        100% {top: 520px;left: 430px;}
    }
    @keyframes roman-mosaic-item-6 {
        0% {top: 0;left: 0;}
        100% {top: 520px;left: 430px;}
    }
    .template-Roman .mosaic-item:nth-child(6):hover {
        height: 220px;
        width: 360px;
        top: 490px;
        left: 400px;
    }

    .template-Roman .mosaic-item:nth-child(7) {
        height: 340px;
        width: 510px;
        top: 350px;
        left: 740px;
        -webkit-animation: roman-mosaic-item-7 2s 1;
        animation-name: roman-mosaic-item-7;
        animation-duration: 2s;
        animation-iteration-count: 1;
    }

    @-webkit-keyframes roman-mosaic-item-7 {
        0% {top: 0;left: 0;}
        100% {top: 350px;left: 740px;}
    }
    @keyframes roman-mosaic-item-7 {
        0% {top: 0;left: 0;}
        100% {top: 350px;left: 740px;}
    }
    .template-Roman .mosaic-item:nth-child(7):hover {
        height: 400px;
        width: 570px;
        top: 320px;
        left: 710px;
    }

    .template-Roman .mosaic-item:nth-child(8),
    .template-Roman .mosaic-item:nth-child(9),
    .template-Roman .mosaic-item:nth-child(10) {
        display:none;
    }

    /*.template-Roman .mosaic-item.grow2:hover .mosaic-title {
        top: 20px;
        -webkit-transition-delay: .25s;
        transition-delay: .25s;
    }

    .template-Roman .mosaic-item.grow2 .mosaic-title {
        top: 180px;
        left: 20px;
    }*/

    .template-Roman .mosaic-item {
        display: inline-block;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-property: all;
        transition-property: all;
        z-index: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .template-Roman .mosaic-item.grow1:hover,
    .template-Roman .mosaic-item.grow2:hover,
    .template-Roman .mosaic-item.grow3:hover {
        transition: height .25s, width .25s, left .25s, top .25s;
        z-index: 999;
        -webkit-transition-delay: .25s; /* Safari */
        transition-delay: .25s;
    }
}