* {
  	box-sizing: border-box;
	}

html {
	width: 100%;
	background-color: #17151d !important;
      	scroll-behavior: smooth; 
	}

html,
body {   
	1111color: #FFFFFF;
        font-family: effra, sans-serif;  
	font-size: 14pt;
	font-weight: 400; 
	line-height: 1.7; 
	margin: 0;
        padding: 0;
        border: 0;   
        outline: 0;
	box-sizing: border-box;
	clear: both;  
        }

body { 
	color: #FFFFFF;
  	font-family: effra, sans-serif;
  	display: flex;
  	flex-direction: column;
  	justify-content: center;   
  	align-items: center;
  	background: radial-gradient(#480d35 ,#17151d);  
  	7878background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");   
	} 

.framing-anchor-tag {
	WIDTH: 100% !IMPORTANT; 
	HEIGHT: 100% !IMPORTANT; 
	DISPLAY: FLEX;
	}

#gallery ul {
  	list-style-type: none; 
	}

.repertoire-listing {
	padding: 0 !important;
	padding-left: 0px;
	padding-right: 0px;
    	text-align: center;
	horizontal-align: middle; 
	}

#strict-format-button {
	border: none;
	outline: none;
    	background: radial-gradient(#480d35 ,#17151d);
	}

li{
    	display:table;
    	margin: 0px 14PX 45px auto;
	7878background-color: #333; background-color: transparent !important;
	border-radius: 18px; 
	box-sizing: border-box;
	clear: both;    
	}

li:hover {
	border-radius: 18px 18px 0 0; padding: 0; 
  	transition: all 0.5s ease-in-out; 11111 background-color: yellow !important; 11111border: 4px solid blue;
	}


#gallery ul li {
   	11margin:0 10px 10px 0; 
  	display: inline-block;
  	position: relative;
  	overflow: hidden;
	}

#gallery ul li .mosaicItem {
	box-sizing: border-box;
	clear: both;
	border-radius: 18px;
	box-sizing: border-box;
	clear: both; 
	}

#thumbnail-image {
	border-radius: 18px;
	box-sizing: border-box;
	clear: both;
	}





/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	#gallery ul li .mosaicItem {
  		max-width: 395px;  max-width: 400px;
  		max-height: 150px;   max-height: 182px;    
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	#gallery ul li .mosaicItem {
  		7878max-width: 400px;  max-width: 400px;
  		7878max-height: 150px;   max-height: 182px; 
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	#gallery ul li .mosaicItem {
  		7878max-width: 250px;  max-width: 500px;
  		7878max-height: 155px;  max-height: 282px;  
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	#gallery ul li .mosaicItem {
  		7878max-width: 280px; max-width: 500px;
  		7878max-height: 150px; max-height: 282px;    
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	#gallery ul li .mosaicItem {
  		max-width: 319px;
  		max-height: 177px;    
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	#gallery ul li .mosaicItem {
  		max-width: 328px;
  		max-height: 189px;   
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	#gallery ul li .mosaicItem {
  		max-width: 410px;
  		max-height: 234px;     
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	#gallery ul li .mosaicItem {
  		max-width: 328px;
  		max-height: 189px;  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	#gallery ul li .mosaicItem {
  		max-width: 380px !important;
  		max-height: 238px;  
		} 
	}











#gallery ul li .mosaicItem > a .text {
  	position: absolute;
  	bottom: -50px;
  	left: 0;
  	width: 100%;
  	height: 50px;
  	background: rgba(44, 62, 80, 0.6);  
  	color: white;
        font-family: effra, sans-serif;
  	text-align: center;
  	font-weight: 600;
  	line-height: 50px;
  	transition: all 0.5s ease-in-out;
  	opacity: 0; 
	}

#gallery ul li .mosaicItem > a:hover .text {
  	bottom: 0;
  	opacity: 1; 
	}