.francois{
 font-family: 'Work Sans', sans-serif;
 }
 a:hover{text-decoration:none;}
 
 .photoviewer-stage {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .85);
      border: none;
    }

    .photoviewer-header .photoviewer-toolbar {
      background-color: rgba(0, 0, 0, .5);
    }

    .photoviewer-footer {
      bottom: 10px;
    }

    .photoviewer-footer .photoviewer-toolbar {
      background-color: rgba(0, 0, 0, .5);
      border-radius: 5px;
    }

    .photoviewer-header,
    .photoviewer-footer {
      pointer-events: none;
    }

    .photoviewer-title {
      color: #ccc;
    }

    .photoviewer-button {
      color: #ccc;
      pointer-events: auto;
    }

    .photoviewer-footer .photoviewer-button:hover {
      color: white;
    }

.flip-description{
height:80px;
}
.product-box {
    padding: 15px;
    margin-bottom: 28px;
    background: #fff;
    box-shadow: rgb(0 0 0 / 72%);
	box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
}

.container-auction
{
padding-left: 10px;
padding-right: 10px;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
.images-zoom-ic
{
padding-top: 10px;
}
.images-zoom-ic img
{
width: 40px;
margin: 0 auto;
}
.btn-fluid
{
display: table;
width: 100%;
text-align: center;
}
.btn-fluid .btn-theme
{
padding: 6px 40px;

 display: inline-block; 
border-radius: 100px;
color: #4a6679eb;
border: 1px solid #4a667999;
text-transform: uppercase;
display: inline-block;
margin-right: 5px;
margin-bottom: 2px;
box-shadow: 0px 0px 11px 4px #e9e9e;
}
.btn-theme:hover
{
background-color: #4a667999 ;
color: #fff;
transform: all;
transition: 0.3s ease-in-out;
transition-timing-function: 0.3s;
}
.flip-description h4
{
text-transform: uppercase;
font-size: 17px;
}

.details .title p{
  margin: 0 5px;
}
.details .title p.current-img{
  font-weight: 500;
}
.details .icon{
  color: #007bff;
  font-size: 20px;
  cursor: pointer;
}
.preview-box .image-box{
  display: flex;
  width: 60%;
  position: relative;
  margin: 0 auto;
}
.image-box .slide{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  height: 50px;
  width: 60px;
  line-height: 50px;
  text-align: center;
  border-radius: 3px;
}
.slide.prev{
  left: 0px;
}
.slide.next{
  right: 0px;
}
.image-box img{
  width: 100%;
  border-radius: 0 0 3px 3px;
}
.shadow{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
  display: none;
  background: rgba(0,0,0,0.45);
}

.flip-box {
  background-color: transparent;
  /*width: 300px;*/
  height: 280px;

  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: transparent;
  color: black;
  display: flex;
    justify-content: center;
    align-items: center;
}

/* Style the back side */
.flip-box-back {
  background-color: #ffffff;
  color: white;
  transform: rotateY(180deg);
}
.flip-box-back h2 {font-size: 16px;
    color: #111 !important;
    font-weight: bold;}
.flip-box-back p {font-size:14px}



.detail-page
{
padding-top: 30px;
padding-bottom: 30px;
}
.detail_content h2
{
margin-top: unset;
text-transform: uppercase;
font-size: 22px;
}
.detail_content_dl
{
font-size:18px;
}
dt
{
font-weight: normal !important;
}
.fw-bold
{
font-weight: bolder;
}
.about_artist{padding-top: 30px;padding-bottom: 80px;}
.bg_secondary{background: #f3f3f3;border: 1px solid #e7e7e7;}

.mt-2{margin-top:20px;}
.mb-2{margin-bottom:20px;}
.ml-2{margin-left:20px;}
.mr-2{margin-right:20px;}

.mt-3{margin-top:30px;}
.mb-3{margin-bottom:30px;}
.ml-3{margin-left:30px;}
.mr-3{margin-right:30px;}

.mt-4{margin-top:40px;}
.mb-4{margin-bottom:40px;}
.ml-4{margin-left:40px;}
.mr-4{margin-right:40px;}

.mt-5{margin-top:50px;}
.mb-5{margin-bottom:50px;}
.ml-5{margin-left:50px;}
.mr-5{margin-right:50px;}

.photoviewer-button-prev{display:none !important;}
.photoviewer-button-next{display:none !important;}




#code-suggesstion-box, #suggesstion-box, #suggesstion-box-top  {
  position: absolute; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  background-color: #eaecfb; /* Black background with opacity */
  z-index: 9999999; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  border:1px solid #dedede;
  width:95%;
  padding:20px;
  margin-top:0px;
  left:16px;
   height: 500px;
    overflow-y: auto;
    padding-bottom: 0px;
    padding-left: 17px;
}

#suggesstion div, #code-suggesstion div {
    padding: 5px 0px;
    cursor: pointer;
    background-color: #eaecfb;
    border-bottom: 1px solid #d4d4d4;
    color: #4f5050;
    font-size:14px;
    text-tranform:capitalize;
   
}
#suggesstion div a, #code-suggesstion div a{
	text-decoration:none;
	color:#342345;
}

.suggesstion-close-button{
	position: absolute;
	right:10px;
	top:10px;
	z-index: 99999999;
	cursor: pointer; 

}
.suggesstion-close-button i{
	font-size:20px;color:#000000 !important;
}
.suggesstion-close-button a{
	color:#000000 !important;
}