.overlay-container { position: relative; display: inline-block; }



.overlay {

  visibility: hidden;

  opacity: .2;

  background-color: rgba(0, 0, 0, 0.8);

  position: absolute;

  top: 0; bottom: 0; left: 0; right: 0;

  padding: 1rem;

  color: white;

  font-size: 1.0rem;

  -webkit-transition: all .5s;

  -o-transition: all .5s;

  transition: all .5s;

}









.overlayx {

  opacity: 0;

  visibility: visible;

  position: absolute;

  top: 0; bottom: 0; left: 0; right: 0;

  padding: 1rem;

  background-color: rgba(0, 0, 0, 0);

  color: white;

  font-size: 1.0rem;

}





.overlay-container:hover .overlay {

  visibility: visible;

  opacity: 1;

}





h4,h5 a:link {

  color: #fff;

  text-decoration: none;

  line-height: inherit;

}



h4 a {

  color: #fff;

  text-decoration: none;

  line-height: inherit;

}



h4,h5 a:visited {

  color: #fff;

  text-decoration: none;

  line-height: inherit;

}

h4,h5 a:hover {

  color: #fff;

  text-decoration: none;

  line-height: inherit;

}

h4 {

    font-family: 'Righteous', cursive;

    font-size:24px

}

h5 {

    font-family: 'Noto Sans', sans-serif;

    font-size:18px

}







.my-container {

    position: relative;

    background: #000;

    overflow: hidden;

}

/* You could use :after - it doesn't really matter */

.my-container:before {

    content: ' ';

    display: block;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    opacity: 0.4;

    background-image: url('../../images/confidentiality.jpg');

    background-repeat: no-repeat;

    background-position: 50% 0;

    -ms-background-size: cover;

    -o-background-size: cover;

    -moz-background-size: cover;

    -webkit-background-size: cover;

    background-size: cover;

}



/* Glyph, by Harry Roberts */



hr.style-eight {

    padding: 0;

    border: none;

    border-top: medium double #333;

    color: #333;

    text-align: center;

}

hr.style-eight:after {

    content: "§";

    display: inline-block;

    position: relative;

    top: -0.7em;

    font-size: 1.5em;

    padding: 0 0.25em;

    background: white;

}



img.fondo {

    opacity: 0.4;

    filter: alpha(opacity=40); /* For IE8 and earlier */

}





.boxthu {

  cursor: pointer;

  height: 110px;

  position: relative;

  overflow: hidden;

  width: 136px;

  margin-left: 5px;

  margin-right: 0px;

  float: left;

}





.boxthu img {

  position: absolute;

  left: 0;

  -webkit-transition: all 300ms ease-out;

  -moz-transition: all 300ms ease-out;

  -o-transition: all 300ms ease-out;

  -ms-transition: all 300ms ease-out;

  transition: all 300ms ease-out;

  opacity: 0.1;

  filter: alpha(opacity=60); /* For IE8 and earlier */

}





.boxthu:hover .overboxthu img { 

  opacity: 1;

  height: 110px;

  width: 136px;

 }





.boxthu .overtext {

  -webkit-transition: all 300ms ease-out;

  -moz-transition: all 300ms ease-out;

  -o-transition: all 300ms ease-out;

  -ms-transition: all 300ms ease-out;

  transition: all 300ms ease-out;

  transform: translateY(40px);

  -webkit-transform: translateY(40px);

  opacity: 1;

  margin-left: 6px;

  padding-top: 0px;

  background: #bbb;

}



.boxthu .title {

    font-size: 1.8em;

    text-transform: none;

    opacity: 0;

    transition-delay: 0.1s;

    transition-duration: 0.5s;

    padding-top: 3px;

 

}



.boxthu:hover .title,

.boxthu:focus .title {

  opacity: 1;

  transform: translateY(0px);

  -webkit-transform: translateY(0px);

}



.boxthu .tagline {

  font-size: 0.8em;

  opacity: 0;

  transition-delay: 0.2s;

  transition-duration: 0.2s;

}



.boxthu:hover .tagline,

.boxthu:focus .tagline {

  opacity: 1;

  transform: translateX(0px);

  -webkit-transform: translateX(0px);

}





.boxthu h4,h5 a:link {

  color: #fff;

  text-decoration: none;

  line-height: inherit;

}



.boxthu h4 a {

  color: #fff;

  text-decoration: none;

  line-height: inherit;

}



.boxthu h4,h5 a:visited {

  color: #fff;

  text-decoration: none;

  line-height: inherit;

}

.boxthu h4,h5 a:hover {

  color: #fff;

  text-decoration: none;

  line-height: inherit;

}

.boxthu h4 {

    font-family: 'Lora', serif;

    font-family: 'Righteous', cursive; 

    font-size:20px;

    margin-left: 5px;



}

.boxthu h5 {

    margin-left: 5px;

    font-size:16px;

}



.boxnt {

  cursor: pointer;

  position: relative;

  overflow: hidden;

  float: left;

  height: 110px;

  width: 136px;

  margin-left: 5px;

  padding-left: 0px;


}



.boxnt:hover .overboxnt img { 

  opacity: 1;

  height: 110px;

  width: 136px;

 }







.boxnt img {

  position: absolute;

  opacity: 1;

}



.boxnt .overtext {

  opacity: 1;

}



.boxnt .overtext {

  -webkit-transition: all 300ms ease-out;

  -moz-transition: all 300ms ease-out;

  -o-transition: all 300ms ease-out;

  -ms-transition: all 300ms ease-out;

  transition: all 300ms ease-out;

  transform: translateY(15px);

  -webkit-transform: translateY(15px);

  opacity: 1;

  margin-left: 0px;

  padding-top: 0px;

}



.boxnt h4 {

    font-family: 'Lora', serif;

    font-family: 'Righteous', cursive; 

    font-size:20px;

    margin-left: 5px;

    background: #bbb;



}