/* .divImgGallery{

     height: 300px;

     display: flex;

     justify-content: center;

     background-color: white;



}



#galleryProduct{ 

    width: auto;

    height: inherit;

}



nav ul{ list-style:none; padding-left: 0; 

 display:flex;

}



nav ul li a img{

 width: 100px;

 height: 45px !important;

 opacity:50%;

 transition:0.3s;

 filter:grayscale(50%);



}



#overlay {

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

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 999;

/*  Removes blue highlight*/

  -webkit-user-select: none;

  -moz-user-select: none;    

  -ms-user-select: none; 

  user-select: none; 

}



#overlay img{

    margin: 0;

    width: auto;

    height: 80%;

    object-fit: contain;

    padding: 5%;

}

/*

    @media screen and (min-width:768px) {

        width: 60%;

    }

    @media screen and (min-width:1200px) {

        width: 50%;

    }*/

#nextButton {

  color: #fff;

  font-size: 2em;

  transition: opacity 0.8s;

  margin-left: 15px;

  

}



/*&:hover {

    opacity: 0.7;

  }

  @media screen and (min-width:768px) {

    font-size: 3em;

  }*/

#prevButton {

  color: #fff;

  font-size: 2em;

  transition: opacity 0.8s;

  margin-right: 15px;

}

/*&:hover {

    opacity: 0.7;

  }

  @media screen and (min-width:768px) {

    font-size: 3em;

  }*/



#exitButton {

  color: #fff;

  font-size: 2em;

  transition: opacity 0.8s;

  position: absolute;

  top: 15px;

  right: 15px;

 

}



#carousel {

  transition: opacity 0.8s;

  position: absolute;

  margin-top: 20px;

  bottom: 20px;

 

}



#carousel nav ul li a img{

   width: 100%;

  */

}

 /*&:hover {

    opacity: 0.7;

  }

  @media screen and (min-width:768px) {

    font-size: 3em;

  }*/



 

/*ShortcodeElementor*/

/*<img id="galleryProduct" src="" alt="">



<nav>

 <ul class="imgItems">

 </ul>

</nav>*/

/*<style>

        #gallery {

  padding-top: 40px;

  @media screen and (min-width: 991px) {

    padding: 60px 30px 0 30px;

  }

}



.img-wrapper {

  position: relative;

  margin-top: 15px;

  img {

    width: 100%;

  }

}

.img-overlay {

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

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  i {

    color: #fff;

    font-size: 3em;

  }

}



#overlay {

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

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 999;

  // Removes blue highlight

  -webkit-user-select: none;

  -moz-user-select: none;    

  -ms-user-select: none; 

  user-select: none; 

  img {

    margin: 0;

    width: 80%;

    height: auto;

    object-fit: contain;

    padding: 5%;

    @media screen and (min-width:768px) {

        width: 60%;

    }

    @media screen and (min-width:1200px) {

        width: 50%;

    }

  }

}



#nextButton {

  color: #fff;

  font-size: 2em;

  transition: opacity 0.8s;

  &:hover {

    opacity: 0.7;

  }

  @media screen and (min-width:768px) {

    font-size: 3em;

  }

}



#prevButton {

  color: #fff;

  font-size: 2em;

  transition: opacity 0.8s;

  &:hover {

    opacity: 0.7;

  }

  @media screen and (min-width:768px) {

    font-size: 3em;

  }

}



#exitButton {

  color: #fff;

  font-size: 2em;

  transition: opacity 0.8s;

  position: absolute;

  top: 15px;

  right: 15px;

  &:hover {

    opacity: 0.7;

  }

  @media screen and (min-width:768px) {

    font-size: 3em;

  }

}

    </style>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">*/





/*    SKELETON   */



.card-skeleton {

  display: flex;

  flex-direction: column;

  flex-basis: 300px;

  flex-shrink: 0;

  flex-grow: 0;

  max-width: 100%;

/*  background-color: #FFF;*/

/*  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);*/

/*  border-radius: 10px;*/

  overflow: hidden;

/*  margin: 1rem;*/

}



.card-img-skeleton {

  padding-bottom: 68%;

  position: relative;

}

.card-img-skeleton img {

  position: absolute;

  width: 100%;

}



.card-body-skeleton {

 /* padding: 1.5rem; */

}



.card-title-skeleton {

  font-size: 1.25rem;

  line-height: 1.33;

  font-weight: 700;

}

.card-title-skeleton.skeleton {

  min-height: 28px;

  border-radius: 4px;

}



.card-intro-skeleton {

  margin-top: 0.5rem;

  line-height: 1.5;

}

.card-intro-skeleton.skeleton {

  min-height: 80px;

/*  border-radius: 4px;*/

}



.skeleton {

  background-color: #e2e5e7;

  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

  background-size: 40px 100%;

  background-repeat: no-repeat;

  background-position: left -40px top 0;

  -webkit-animation: shine 1s ease infinite;

          animation: shine 1s ease infinite;

}



@-webkit-keyframes shine {

  to {

    background-position: right -40px top 0;

  }

}



@keyframes shine {

  to {

    background-position: right -40px top 0;

  }

}

/*.container-skeleton {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

}*/




/* 
#gallery-1 {

  width: 100%;

  -webkit-user-select: none;

  -moz-user-select: none;  

  user-select: none;

}



.rsMainSlideImage{

  width: 100% !important; 

  margin-left: 0px !important; 

}



.rsFullscreen .rsMainSlideImage{

  width: 500px !important; 

}



.rsDefault .rsThumb.rsNavSelected {

  background: #f50e0070;

}
.rsImg{
  object-fit: contain !important;
}

.rsFullscreenBtn {
  display: none !important;
}
img.rsTmb {
  object-fit: contain;
}

.section-syn-content{
  display: none;
} */

/* <div id="gallery-1" class="royalSlider rsDefault">

    <a class="rsImg" data-rsw="400" data-rsh="500" data-rsbigimg="https://catalog.nexsysla.com/ICECAT/61112520.jpg" href="https://catalog.nexsysla.com/ICECAT/61112520.jpg">Vincent van Gogh - Still Life: Vase with Twelve Sunflowers<img width="96" height="72" class="rsTmb" src="https://catalog.nexsysla.com/ICECAT/61112520.jpg"></a>

    <a class="rsImg" data-rsw="632" data-rsh="500" data-rsbigimg="https://catalog.nexsysla.com/ICECAT/61606326.jpg" href="https://catalog.nexsysla.com/ICECAT/61606326.jpg">Vincent van Gogh - The Starry Night<img width="96" height="72" class="rsTmb" src="https://catalog.nexsysla.com/ICECAT/61606326.jpg"></a>

    <a class="rsImg" data-rsw="336" data-rsh="500" data-rsbigimg="https://catalog.nexsysla.com/ICECAT/60672406.jpg" href="https://catalog.nexsysla.com/ICECAT/60672406.jpg">Leonardo da Vinci - Mona Lisa<img width="96" height="72" class="rsTmb" src="https://catalog.nexsysla.com/ICECAT/60672406.jpg"></a>

    <a class="rsImg" data-rsw="417" data-rsh="500" data-rsbigimg="https://catalog.nexsysla.com/ICECAT/68007727.jpg" href="https://catalog.nexsysla.com/ICECAT/68007727.jpg">Grant DeVolson Wood - American Gothic<img width="96" height="72" class="rsTmb" src="https://catalog.nexsysla.com/ICECAT/68007727.jpg"></a>

    <a class="rsImg" data-rsw="601" data-rsh="500" data-rsbigimg="https://catalog.nexsysla.com/ICECAT/75317629.jpg" href="https://catalog.nexsysla.com/ICECAT/75317629.jpg">Rembrandt - The Night Watch<img width="96" height="72" class="rsTmb" src="https://catalog.nexsysla.com/ICECAT/75317629.jpg"></a>

    <a class="rsImg" data-rsw="350" data-rsh="500" data-rsbigimg="https://catalog.nexsysla.com/ICECAT/76531358.jpg" href="https://catalog.nexsysla.com/ICECAT/76531358.jpg">Johannes Vermeer - Girl with a Pearl Earring<img width="96" height="72" class="rsTmb" src="https://catalog.nexsysla.com/ICECAT/76531358.jpg"></a>

  </div> */



  /* stg */

.f-carousel{
  --f-button-width: 100px !important;
}
.f-carousel__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height:400px;
  text-align: center;
  color: #83b436;
  background: #f3f3f3;
  font-size: 1.25rem;
}

.f-carousel__slide.is-nav-selected {
  color: #fff !important;
  background: white;
  border: solid 2px #83b436;
}
.f-carousel__slide.is-selected {
  background-color: #fff !important;
  padding: 10px !important;
}
#myCarousel {
  --f-carousel-slide-width: 100%;
  --f-carousel-spacing: 10px;

  margin-bottom: 1rem;
}

#myNavigation {
  --f-carousel-slide-width: 100px;
  --f-carousel-spacing: 5px;
}

.img-carousel {
  max-height:400px !important;
  object-fit: cover !important;
}
.img-thumbs {
  max-height:100px !important;
  object-fit: cover !important;
}

.is-next {
  background-color: #00000000 !important;
}
.is-prev {
  background-color: #00000000 !important;
}
button.f-button.is-next {
  color: #000 !important;
}
button.f-button.is-prev {
  color: #000 !important;
}
button.f-button.is-prev:hover {
  color: #83b436 !important;
}
button.f-button.is-next:hover {
  color: #83b436 !important;
}

.f-button {
  display: flex;
  width: 80px !important;
  height: 60px !important;
  padding: 0 !important;
  color: white !important;
}
.f-thumbs__slide__img{
  height: 100% !important;
}

.f-thumbs__slide__button {
  border-radius: unset !important; 
  border: 1px solid #fff !important;
}
.f-thumbs_slide_button:hover {
  /* border: none !important;
  border-radius: unset !important;
  border: 0px solid #83b436 !important;
  background-color: #83b436 !important; */
}