.records-container {
  display: flex;
  flex-wrap: wrap; 
  flex-direction: row; 
  align-items: center;
  margin-left:10%;
}

.record-row {
  width:300px;
  height:350px;
  background-color:white;
  text-align:center;
  border:1px solid #ddd;
}

.record-name {
  margin: 5px 10px 10px 10px;
  width:280px;
  text-align:left;
}

.image-container {
  margin: 10px 10px 0 10px;
  padding:5px;
height:205px;
}

img {
    max-width:300px;
    max-height:200px;

}

a{
   text-decoration:none;
   color:black;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #c45500;
}
.record-name {
    display: block;
    line-height: 1.2em;
    max-height: 3.6em;
    overflow: hidden;
    position: relative;
}

.record-name:hover::after {
    content: attr(title);
    position: absolute;
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    top: 100%;
    left: 0;
    white-space: nowrap;
    z-index: 1;
}
.record-rating {
    font-size: 0;
    white-space: nowrap;
    display: inline-block;
    width: 79px;
    height: 15px;
    overflow: hidden;
    position: relative;
    background: url('/assets/images/Star_1.png');
    background-size: contain;
}

.record-rating::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: var(--star-width, 0%);
    background: url('/assets/images/Star_2.png');
    background-size: contain;
}
.record-rating.rating-cover::before {
    background-size: cover !important;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}




.dropdown {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown1 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown2 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown3 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown5 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown6 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown10 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown7 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}


.dropbtn {
	background-color: #f5f5f8;
	color: #959595;
	font-size: 14px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;
	height:100%;
}


.dropbtn10 {
	background-color: #f5f5f8;
	color: #959595;
	font-size: 14px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;
	height:100%;
}


.dropbtn7 {
	background-color: #f5f5f8;
	color: #959595;
	font-size: 14px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;
	height:100%;
}



.dropdown-content {
	display: none;
	position: fixed;
	width:100%;
	height:260px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}
.dropdown-otherarea{
    display:none;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 307px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:1300;
    overflow: hidden;
    height:100%;
    min-width:1500px;
    backdrop-filter: blur(8px);   
    -webkit-backdrop-filter: blur(8px); 
}

.dropdown-content1 {
	display: none;
	position: fixed;
	width:100%;
	height:406px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}
.dropdown-otherarea1{
    display:none;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 433px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:1300;
    overflow: hidden;
    height:100%;
    min-width:1500px;
    backdrop-filter: blur(8px);   
    -webkit-backdrop-filter: blur(8px); 
}

.dropdown-content2 {
	display: none;
	position: fixed;
	width:100%;
	height:406px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}
.dropdown-otherarea2{
    display:none;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 453px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:1300;
    overflow: hidden;
    height:100%;
    min-width:1500px;
    backdrop-filter: blur(8px);   
    -webkit-backdrop-filter: blur(8px); 
}


.dropdown-content3 {
	display: none;
	position: fixed;
	width:100%;
	height:376px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}
.dropdown-otherarea3{
    display:none;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 423px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:1300;
    overflow: hidden;
    height:100%;
    min-width:1500px;
    backdrop-filter: blur(8px);   
    -webkit-backdrop-filter: blur(8px); 
}


.dropdown-content5 {
	display: none;
	position: fixed;
	width:100%;
	height:376px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}
.dropdown-otherarea5{
    display:none;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 423px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:1300;
    overflow: hidden;
    height:100%;
    min-width:1500px;
    backdrop-filter: blur(8px);   
    -webkit-backdrop-filter: blur(8px); 
}


.dropdown-content6 {
	display: none;
	position: fixed;
	width:100%;
	height:106px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	
	
	
	z-index: 1;
	
	overflow: hidden;
	text-align:left;
}
.dropdown-otherarea6{
    display:none;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 153px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:1300;
    overflow: hidden;
    height:100%;
    min-width:1500px;
    backdrop-filter: blur(8px);   
    -webkit-backdrop-filter: blur(8px); 
}




.dropdown-content10 {
    display:none;
	position: fixed;
	width:100%;
	height:276px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	
	
	
	z-index: 1;
	
	overflow: hidden;
	text-align:left;
}
.dropdown-otherarea10{
    display:none;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 323px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:1300;
    overflow: hidden;
    height:100%;
    min-width:1500px;
    backdrop-filter: blur(8px);   
    -webkit-backdrop-filter: blur(8px); 
}

.quickLink:hover{
background-color:#e9e9e969;
}

.quickLink a:hover{
color:black;
}
.quickLink a{
   text-decoration:none;
   color:black;
}


.dropdown-content7 {
    display:none;
	position: fixed;
	width:100%;
	height:236px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	
	
	
	z-index: 1;
	
	overflow: hidden;
	text-align:left;
}
.dropdown-otherarea7{
    display:none;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 283px;
    background-color:rgba(0, 0, 0, 0.1);
    z-index:1300;
    overflow: hidden;
    height:100%;
    min-width:1500px;
    backdrop-filter: blur(8px);   
    -webkit-backdrop-filter: blur(8px); 
}





.dropdown-linkarea{
	position: fixed;
	width:100%;
	height:auto;
	top:65px;
	left:17.5%;
	background-color: #f5f5f8;
	z-index: 2;
}








.dropdown-content a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content a:hover {
	background-color: #ddd;
}

.dropdown-content1 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content1 a:hover {
	background-color: #ddd;
}

.dropdown-content2 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content2 a:hover {
	background-color: #ddd;
}



.dropdown-content3 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content3 a:hover {
	background-color: #ddd;
}



.dropdown-content5 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content5 a:hover {
	background-color: #ddd;
}




.dropdown-content6 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content6 a:hover {
	background-color: #ddd;
}



.dropdown-content7 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content7 a:hover {
	background-color: #ddd;
}




.dropdown:hover .dropdown-content,
.dropdown:hover .dropdown-otherarea {
    display: block;
}
.dropdown.hide-menus .dropdown-content,
.dropdown.hide-menus .dropdown-otherarea {
    display: none;
}


.dropdown1:hover .dropdown-content1,
.dropdown1:hover .dropdown-otherarea1 {
    display: block;
}
.dropdown1.hide-menus1 .dropdown-content1,
.dropdown1.hide-menus1 .dropdown-otherarea1 {
    display: none;
}


.dropdown2:hover .dropdown-content2,
.dropdown2:hover .dropdown-otherarea2 {
    display: block;
}
.dropdown2.hide-menus2 .dropdown-content2,
.dropdown2.hide-menus2 .dropdown-otherarea2 {
    display: none;
}


.dropdown3:hover .dropdown-content3,
.dropdown3:hover .dropdown-otherarea3 {
    display: block;
}
.dropdown3.hide-menus3 .dropdown-content3,
.dropdown3.hide-menus3 .dropdown-otherarea3 {
    display: none;
}


.dropdown5:hover .dropdown-content5,
.dropdown5:hover .dropdown-otherarea5 {
    display: block;
}
.dropdown5.hide-menus5 .dropdown-content5,
.dropdown5.hide-menus5 .dropdown-otherarea5 {
    display: none;
}


.dropdown6:hover .dropdown-content6,
.dropdown6:hover .dropdown-otherarea6 {
    display: block;
}
.dropdown6.hide-menus6 .dropdown-content6,
.dropdown6.hide-menus6 .dropdown-otherarea6 {
    display: none;
}


.dropdown7.hide-menus7 .dropdown-content7,
.dropdown7.hide-menus7 .dropdown-otherarea7 {
    display: none;
}





* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.dropdown10 input:active{
	color:red;
	border:none;
}

.search-input {
	border: none;
	outline: none;
	box-shadow: none;
	font-size:20px;
}


.dropdown-languague {
	position: relative;
	display: inline-block;
	

}


.dropbtn-languague {
	background-color: #f5f5f8;
	color: #000000b8;

	font-size: 16px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;

	right:10%;
}

.dropbtn-languague:hover {
	background-color: #f5f5f8;
}


.dropdown-content-languague {
	display: none;
	position: fixed;
	width:8.5%;
	height:85px;
	
	bottom:40px;
	
	right:14%;
	background-color: #f9f9f9;


	
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1;
	border-radius: 5px;
	overflow: hidden;
}



.dropdown-linkarea-languague{
	position: fixed;
	width:7.5%;
	height:auto;
	bottom:50px;
	right:15%;
	background-color: #f9f9f9;
	z-index: 2;
}


.dropdown-content-languague a {
	position:relative;
	color: #333;
	padding: 7px 10px;
	width:90%;
	/*width:100px;*/
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
	left:10px;
}

.dropdown-content-languague a:hover {
	background-color: #ddd;
}


.dropdown-languague:hover .dropdown-content-languague {
	display: block;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.footer a{
	color:#000000b8;
}
.footer h5{
	color:#000000e0;
}


.shop-button{
	padding: 9px;
	border: none;
	background-color:#0071e3;
	color:white;
	border-radius:13px;
	text-decoration:none;
	font-size:16px;
	margin-top:10px;
}