.carousel__containerr

{ 

  margin: 5px;

  width: 100%;

  overflow: scroll;

  position: relative;

  box-shadow: border-box;



  

  white-space: nowrap;

  margin: 40px 0px;

  padding-bottom: 10px;

}

.carousel-itemr

{

  background-color: #fff;

  width: 190px;

  height: auto;

  border-radius: 20px;

  overflow: hidden;

  margin-right: 10px;

  display: inline-block;

  cursor: pointer;

  transition: 450ms all;

  transform-origin: center left;

  position: relative;

  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.26);

}

.carousel-itemr .panel1r

{

  position: absolute;

  top: 0;

  right: -50%;

  width: 45px;

  background-color: transparent;

  display: flex;

  align-items: center;

  flex-flow: column;

  opacity: 1;

}

.carousel-itemr:hover .panel1r

{

  right: 0;

  opacity: 1;

  transition: 0.4s;

}

.carousel-itemr .panel1r a

{

  font-size: 20px;

  color: #48DBFB;

  margin: 15px 0;

}

.carousel-itemr .panel1r a:hover

{

  color: rgba(255,0,0,0.9);

}



.carousel-itemr .panel2r

{

  position: absolute;

  bottom: 30%;

  right: 0px;

  width: 45px;

  display: flex;

  align-items: center;

  flex-flow: column;

  border-radius: 30px;

  background: transparent;

  box-shadow: 0 10px 10px 0 #48DBFB;

  border-radius: 200px 0px 200px 200px;

  -moz-border-radius: 200px 0px 200px 200px;

  -webkit-border-radius: 200px 0px 200px 200px;

  border:0px solid #000000;

}

.carousel-itemr .panel2r a

{

  font-size: 18px;

  color: #48DBFB;

  margin: 15px 0;

}

.carousel-itemr .infor

{

  text-align: center;

  line-height: 20px;

  margin-top: -10px;

  font-family: 'Amita', cursive;

  margin-bottom: 10px;

}

.carousel-itemr .infor h3

{

  color: #333;

  padding-top: 5px;

  cursor: pointer;

  font-family: 'Roboto Slab',serif;

  letter-spacing: 1px;

  font-size: 14px;

}



.carousel-itemr .infor .starsr

{

  margin-top: -20px;

}



.carousel-itemr .infor .starsr i

{

  color: gold;

  padding: 10px 0;

}

.carousel-itemr .infor .pricer

{

  font-size: 13px;

  color: #000;

  letter-spacing: 0.5px;

}



.carousel-itemr~ .carousel-itemr

{

  transform: translate3d(20px,0,0);

}



.carousel__containerr:hover .carousel-itemr:hover

{

  transform: scale(1.09);

  opacity: 1;

}



.carousel-item__imgr

{

  width: 100%;

  height: 210px;

  object-fit: cover;

  border-radius: 10px;

  box-shadow: 0 0.5px 0.5px 0 rgba(0,0,0,0.26);

}

.carousel__containerr::-webkit-scrollbar-thumb

{

  border-radius: 20px;

  background-color: #fff;

  background-image: -webkit-gradient(linear,40% 0%,75% 84%, from(#ff6da2), to(#7983f8), color-stop(0.6, #7983f8));

}



.carousel__containerr::-webkit-scrollbar

{

  height: 5px;

}

.ns{

  background-color: #4CAF50;

  border: none;

  color: white;

  padding: 15px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 4px 2px;

  cursor: pointer;

}

.demo{

  list-style-type: none;

}

.demo1{

  float: left;

}

.demo2{

  float: right;

}



















.myimage{

 height:auto;

 width:100%;

 position:static;

  

}

.nav{

  text-align: center;

}

.nav .imgg{

  width: 80px;

  height: 50px;

  border: 1px solid #ddd;

  margin: 8px 2px;

  cursor: pointer;

  transition: 0.3s;

}

.nav .imgg:hover{

  border-color: #fab327;

}

















::selection{

  color: #fff;

  background: #007bff;

}

.wrapper{

  width:100%;

}

.gallery{

  display: flex;

  flex-wrap: wrap;

}

.gallery .image{

  padding: 7px;

  text-align: center;

}

.gallery .image span{

  display: flex;

  width: 100%;

  overflow: hidden;

}

.gallery .image img{

  vertical-align: middle;

  transition: all 0.3s ease;

}



.preview-box{

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.9);

  background: #fff;

  max-width: 700px;

  width: 100%;

  z-index: 5;

  opacity: 0;

  pointer-events: none;

  border-radius: 3px;

  padding: 0 5px 5px 5px;

  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);

}

.preview-box.show{

  opacity: 1;

  pointer-events: auto;

  transform: translate(-50%, -50%) scale(1);

  transition: all 0.3s ease;

}

.preview-box .details{

  display: flex;

  align-items: center;

  padding: 12px 15px 12px 10px;

  justify-content: space-between;

}

.preview-box .details .title{

  display: flex;

  font-size: 18px;

  font-weight: 400;

}

.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: 100%;

  position: relative;

}

.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%;

  height: 50%;

  border-radius: 0 0 3px 3px;

}

.shadow{

  position: fixed;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  z-index: 2;

  display: none;

  background: rgba(0,0,0,0.45);

}





}



















.slidere{

  width: 100%;

  height: 50vh;

  display: flex;

  background-position: 0 center;

  position: relative;

}

.slidere input{

  -webkit-appearance: none;

  width: 100%;

  background: none;

  z-index: 10;

}



.slidere input::-webkit-slider-thumb{

  -webkit-appearance: none;

  width: 20px;

  height: 50vh;

  background-color: #111;

  cursor: pointer;

}



.original-imagee{

  position: absolute;

  background: url('{{ asset('storage/'.$Produit->Photo11)}}') no-repeat;

  left: 0;

  width: 40%;

  height: 50.7vh;

  background-position: 0 center;

  background-size: 100% 100%;

 }







 .sliderr{

  width: 100%;

  height: 50vh;

  display: flex;

  background-position: 0 center;

  position: relative;

}

.sliderr input{

  -webkit-appearance: none;

  width: 100%;

  background: none;

  z-index: 10;

}



.sliderr input::-webkit-slider-thumb{

  -webkit-appearance: none;

  width: 20px;

  height: 50vh;

  background-color: #111;

  cursor: pointer;

}



.original-imager{

  position: absolute;

  background: url('{{ asset('storage/'.$Produit->Photo22)}}') no-repeat;

  left: 0;

  width: 40%;

  height: 50vh;

  background-position: 0 center;

  background-size: 100% 100%;

 }

















 .slidert{

  width: 100%;

  height: 50vh;

  display: flex;

  background-position: 0 center;

  position: relative;

}

.slidert input{

  -webkit-appearance: none;

  width: 100%;

  background: none;

  z-index: 10;

}



.slidert input::-webkit-slider-thumb{

  -webkit-appearance: none;

  width: 20px;

  height: 50vh;

  background-color: #111;

  cursor: pointer;

}



.original-imaget{

  position: absolute;

  background: url('{{ asset('storage/'.$Produit->Photo11)}}') no-repeat;

  left: 0;

  width: 40%;

  height: 50vh;

  background-position: 0 center;

  background-size: 100% 100%;

 }





 @keyframes example {

  0%   {}

  100% {font-size: 25px;}

}



.fas {

  color: #48DBFB;

}

.fab {

  color: #48DBFB;

}

.fa-whatsapp {

  color: green;

}

.fa-print {

  color: black;

}