/* cont-F needed to position the overlay. Adjust the width as needed */
.cont-F {position: relative; max-width: 40em;      /*  Tamanho da imagem  width: 50%; max-width: 30em - 300px;     */
        border: 3px solid; border-color: red;  /*   border-color: lime;  */
        border-top-style: 3px solid;  border-bottom-color:red;
        border-right-style: none;   
        border-bottom-style: none; 
        border-left-style: none; } 
.cont-F:hover .over-F {opacity: 1;}
.over-F {position: absolute;   top: 0;   /*   bottom: 0;   */
        background: rgba(255, 0, 0, 0.5); /* Black see-through */
        color: #f1f1f1;  width: 100%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
        color: white;  font-size: 0.9em;  text-align: center;}   /*  padding: 5px;  */

.cont-L{position: relative; max-width: 30em;      /*  max-width: 300px;   border: 1px solid;    */
        border-color: cyan;
        border-top-style: none;
        border-right-style: none;   
        border-bottom-style:solid;
        border-left-style: none; }  
.cont-L:hover .over-L {opacity: 1;}
.over-L{position: absolute;  bottom: 0;  
        background: rgba(0, 255, 255, 0.9); /* Black see-through */
        color:black;  width: 100%;  transition: .5s ease;  opacity:0;  /*  color: #f1f1f1;    opacity:0; */
        font-size: 0.9em;   text-align: center;}   /* padding: 5px;  */

.cont-L2{position: relative;      /* max-width: 30em;  max-width: 300px;   border: 1px solid;    */
        color: white; text-align: center;
        border: 2px solid; border-color: rgb(255, 215, 0);
        border-top-style: solid;
        border-right-style: solid;   
        border-bottom-style:solid;
        border-left-style:solid; }  
.cont-L2:hover .over-L2 {opacity: 1;}
.over-L2{position: absolute;  bottom: 0; left:20%; right:20%; 
        background: rgba(127, 255, 212, 0.5); /* Black see-through */
        width: 60%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
        font-size: 0.9em; text-align: center;}   /* padding: 5px;  */


/* Make the image to responsive */
.image      {display: block;  width: 100%;  height: auto;  }
.img      {display: block;  width: 100%;  height: auto; }
/* The overlay effect - lays on top of the cont-F and over the image */
.overtx     {position: absolute;  bottom: 0;  
            background: rgb(0, 0, 0);  
            background: rgba(0, 0, 0, 0.5); /* Black see-through */
            color: #f1f1f1;  width: 100%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
            color: white;  font-size: 0.9em;  padding: 5px;  text-align: center;}
/* When you mouse over the cont-F, fade in the overlay title */

.cont-c {position: relative;}  /*  width: 50%; Tamanho da imagem  max-width: 300px;  */
.overlayc    {position: absolute; top:20; left:0; right:0; background-color:gray; overflow: hidden; 
     width:100%; height:auto; transform: scale(0);  transition: .3s ease; z-index: 1;}

.cont-c:hover .overlay {transform: scale(1);}
.cont-c:hover .overlay {opacity: 1; }

.over100 {position: relative; width: 100%;
        background: rgba(127, 255, 212, 0.5); /* Black see-through */
        transition: .5s ease;  opacity:0;   text-align: center;}   /* padding: 5px;  */