@charset "utf-8";
body {
    background-color: black;
    
}
.mosaik {
     display: grid;
    grid-template-columns: repeat(auto-fill,minmax(400px, 1fr));
}
.mosaik > div{
   /* flex: 1 1 160px;*/
}
.mosaik .onevideo {
    overflow: hidden;
    position: relative;
    
}
.mosaik .onevideo img{
    max-width: 100%;
    height: auto;
    filter:grayscale(0.5);
    transition: transform .2s;
    transform: scale(1.05);
    
}
.mosaik .onevideo a {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    padding: 0;
}


.mosaik .onevideo:hover img{
    filter:grayscale(0);
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.onevideo:hover .titrevideo {
      opacity:1;   
}
.onevideo .titrevideo {
    position: absolute;
    top: 40%;
    width: 100%;
    text-align: center;
    /* right: 50%; */
    color: white;
    font-family: trebuchet, arial, helvetica;
    opacity:0;
    font-size:40px;
    font-weight: bold;
}

.videocenter {
    text-align:center;
}
.videocenter {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	/*overflow: hidden;*/
}

.videocenter iframe,  
.videocenter object,  
.videocenter embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.button {
     padding: 20px 40px;
    text-align: center;
    color: white;
    font-family: trebuchet, arial, helvetica;
    font-size: 20px;
    font-weight: bold;
    background-color: orange;
    position: absolute;
    bottom: -120px;
    left: 35%;
    text-decoration: none;
    border-radius: 10px;
    margin: 20px 0;
}

.buttonfin {
padding: 100px 40px;
    text-align: center;
    color: white;
    font-family: trebuchet, arial, helvetica;
    font-size: 20px;
    font-weight: bold;
    background-color: orange;
    text-decoration: none;
    border-radius: 10px;
    margin: 50px;
}