/*****************************************/    
/*****        MY SLIDES           ******/
/*****************************************/  
.mySlides {display:none}



/*****************************************/    
/*****     BOTTOM SLIDER    ******/
/*****************************************/  
.my-slider-padding {
	padding-bottom:80px;
}


/*****************************************/    
/*****        ÊÀÒÀËÎÃ              ******/
/*****************************************/  

.catalogue-container-padding {
	padding-top:60px;
}

@media only screen and (max-width:768px)  {.catalogue-container-padding {padding-top:20px;;}}


.button-active {
	outline-offset:2px !important; 
	outline:  2px solid  #292929 !important;
}


.catalogue-arrow-left {
	position:absolute;top:50%;
	left:2%;
	transform:translate(0%,-50%);
	-ms-transform:translate(-0%,-50%)
color: #292929;
}

.catalogue-arrow-right {
	position:absolute;top:50%;
	right:2%;
	transform:translate(0%,-50%);
	-ms-transform:translate(0%,-50%)
color: #292929;
}


.catalogue-arrow-css,.catalogue-arrow-css:hover {
	color:#292929 !important;
	background-color:#F2F3F5 !important;
	display:block;
	width:40px;
	height:40px;
}



.catalogue-container {
	position:relative;
	max-width:800px; 
	max-height:500px; 
	padding-bottom:40px; 
	border: 0px solid green; 
	text-align:center;
background-color:#F2F3F5;
    border-radius: 10px;
} 


.catalogue {
	font-size: 18px;
color: #292929;
}


.catalogue h1 {
font-size: 20px;
font-weight:bold;
padding:10px 0px 10px 0px;
}


.catalogue-td {
	text-align:center;
	width:35px;
	height: 45px;
}


.catalogue-td-colour {
	background-color:#F2F3F5;
}

.catalogue-size {
	text-align:center;
	width:30px;
	padding:10px;
}

@media only screen and (max-width:768px)  {.catalogue-size {font-size:13px; padding:6px;}}


.catalogue img {
	width: 300px;
	height:400px;
}

@media only screen and (max-width:768px)  {.catalogue img {width:260px; height: 320px;}}


.catalogue-text {
	position:absolute;
	left:50%;
	bottom:0;
	transform:translate(-50%,0%);
	-ms-transform:translate(-50%,0%)
	display:block;
	height:40px;
	padding-top: 8px;
	width:100%;
	border: 0px solid orange;
	background-color:#F2F3F5;
border-radius:0px 0px 10px 10px;
}

.catalogue-box-size {
	border:1px solid #F2F3F5; 
	padding:10px; 
	width:60px; 
	text-align:center;
}


/*****************************************/    
/*****   COLOUR PALLETE   ******/
/*****************************************/  

.small-circle, .small-circle-white {
	display:inline-block;
	border: 1px solid #292929;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	vertical-align:baseline;
	text-align:center;
	padding: 10px;
}


.small-circle:hover,  .small-circle-white:hover {
	border-radius: 50%;
	outline-offset:2px; 
	outline:  2px solid #292929;
}


.small-circle:active,  .small-circle-white:active  {
	border-radius: 50%;
	width: 23px;
	height: 23px;
	border: 1px solid #CCCCCC;
	outline-offset:2px !important; 
	outline:  2px solid #292929 !important;
}

.small-circle:focus, .small-circle:target  {
	border-radius: 50%;
}





.small-circle-white:focus, .small-circle-white:target {
	border-radius: 50%;
	border: 1px solid #CCCCCC;
}


@media only screen and (max-width:768px) {.small-circle, .small-circle-white {width:25px; height:25px; padding:12px}}



/*****************************************/    
/*****           TOOLTIP            ******/
/*****************************************/  


.tooltip-container {
  position: relative;
  display: inline-block; /* Or block, depending on layout */
	width: 20px;
	height: 20px;
text-align:center;
}



.fa-tooltip.fa-hover-hidden {
	width: 20px;
	height: 20px;
  display: inline-block; /* Or block, depending on layout */
}

.fa-tooltip.fa-hover-show {
color:#525252;
cursor: pointer; 
transform: scale(1.2);
}

* > .fa-tooltip.fa-hover-show,
*:hover > .fa-tooltip.fa-hover-hidden {
    display: none;
}

*:hover > .fa-tooltip.fa-hover-show {
    display: inline-block;
}




.tooltip-text {
  visibility: hidden;
  opacity: 0; /* For fade effect */

  background-color: #FFDC39;     
  /* background-color: #FFE157; #E2FF7D; */


outline-offset:1px; 
outline:  0px dashed  #D7412E;
min-width:300px;
max-width:500px;
width:100%;

    font-size: 13px;
    font-family:'Onest-Regular', Arial, sans-serif;
	color: #000000;

  text-align: left;
  padding: 5px 10px 5px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 30px;  /* Position above the container */
left: 145px;
  transform: translateX(-50%); /* Center horizontally */
  transition: opacity 0.3s; /* Smooth fade in/out */
}

.tooltip-text::after {
 content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 5%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #FFDC39 transparent transparent transparent;
}


.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}