﻿.ContainerListaMosaicos{
    min-height: 500px;
}

.MosaicList{
    width:100%;
   text-align: center;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow:hidden;

}

.MosaicList>.item{
    position:relative;
    max-width: calc( 100% / 4);
    height: calc( width * 0.66 );
}


.desktop.small .MosaicList>.item{
    position:relative;
    max-width: calc( 100% / 4);
    height: calc( width * 0.66 );  
}

.tablet .MosaicList>.item{
    position:relative;
    max-width: calc( 100% / 3);
}


.phone .MosaicList>.item{
    position:relative;
    max-width: calc( 100% / 2);   
}

.MosaicList>.item img{
    width: 100%;
    height: 100%;
}

.MosaicList>.item .overlay{
    opacity:0;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    transition:opacity .2s ease-in-out;
    -moz-transition:opacity .2s ease-in-out;
    -webkit-transition:opacity .2s ease-in-out;
}



.MosaicList>.item .overlay>.texts{
    padding:15pt;
    background-color: rgba(0,0,0,.5); 
    color: #e9e9e9;
    height: 100%;
}
    
.MosaicList>.item:hover .overlay{
    opacity:1;
}

.MosaicList>.item .overlay>.texts>div{
    padding: 20% 0;
}

.phone .MosaicList>.item .overlay>.texts>div{
    padding: 0px;
}

.phone .MosaicList>.item .overlay>.texts{
   font-size: 14px ;
}

.phone .MosaicList>.item .overlay>.texts .Heading3{
   font-size: 100% ;
}




.MosaicList>.item .overlaydesktop{
    opacity:1;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}

.MosaicList>.item:hover .overlaydesktop{
    opacity:0;
}

.MosaicList>.item .overlaydesktop>.texts{
    padding:5pt;
    background:rgba(0,0,0,.6);
    color:#e9e9e9;
    min-height: 55px;
    font-size: 14px ;
    display: table;
    width: 100%;
}

.MosaicList>.item .overlaydesktop>.texts >div{
    display: table-cell;
    vertical-align: middle;
}

.phone .MosaicList>.item .overlaydesktop,
.tablet .MosaicList>.item .overlaydesktop{
    display: none;   
}


.tablet .MosaicList>.item .overlay,
.tablet .MosaicList>.item .overlay,
.phone .MosaicList>.item .overlay{
  -webkit-animation: showoverlay 12s infinite; /* Safari 4+ */
  -moz-animation:  showoverlay 12s infinite; /* Fx 5+ */
  -o-animation:    showoverlay 12s infinite; /* Opera 12+ */
  animation: showoverlay 12s infinite; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes showoverlay {
  0%, 75%, 95%   { opacity: 0; }
  80%, 85% { opacity: 1; }
  90% { opacity: 0.5; }
}
@-moz-keyframes showoverlay {
  0%, 75%, 95%   { opacity: 0; }
  80%, 85% { opacity: 1; }
  90% { opacity: 0.5; }
}
@-o-keyframes showoverlay {
  0%, 75%, 95%   { opacity: 0; }
  80%, 85% { opacity: 1; }
  90% { opacity: 0.5; }
}
@keyframes showoverlay {
  0%, 75%, 95%   { opacity: 0; }
  80%, 85% { opacity: 1; }
  90% { opacity: 0.5; }
}