.royalSlider {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}
.rsDefaultInv,
.rsDefaultInv .rsOverflow,
.rsDefaultInv .rsSlide,
.rsDefaultInv .rsVideoFrameHolder,
.rsDefaultInv .rsThumbs {
  background: #FFF;
}
.royalSlider > .rsImg {
  display:none;
}

.royalSlider .rsThumb {
  float: left;
  overflow: hidden;
/*
  width: 56px;
  height: 56px;
 */
  margin-right: 0px;
}
.royalSlider .rsThumbs {
  width: 25%;
  min-width:200px;
  height: 100%;
  position: absolute;
  top: 0;
  padding: 0 0 0 20px;
  right: 0;
}
.royalSlider .rsGCaption {
  right: 285px;
  line-height: 12px;
  padding: 1px 7px;
  font-size: 11px;
  background: #EEE;
  position: absolute;
  width: auto;
  bottom: 0;
  float: none;
  text-align: left;
}




@media screen and (min-width: 0px) and (max-width: 1200px) {  
  .royalSlider .rsThumbs {
    width: 228px;
  }
  .royalSlider .rsGCaption {
    right: 228px;
  }
}
/*@media screen and (min-width: 0px) and (max-width: 760px) {  */
@media screen and (min-width: 0px) and (max-width: 767px) {  
  .royalSlider .rsThumbs {
    left: 0;
    position: relative;
    width: 100%;
    height: auto;
    padding: 1px 0 0 1px;
  }
  .royalSlider .rsThumbsContainer {
    height: auto !important;
  }
  .royalSlider .rsGCaption { 
    right: 0;
  }

}

/* THUMBS GRID TEMPLATE STYLES  rs-gallery-thumbs-grid-template.css */

.rs-gallery-thumbs-grid .rsThumb {
  float: left;
  overflow: hidden;
  margin: 0 0 1px 1px;
}
.rs-gallery-thumbs-grid .rsThumbs {
/*  width: 228px !important;
*/
  width: 228px !important;
  position: absolute;
  top: 0;
  padding: 0 0 0 1px;
  right: 0;
  height: auto;
  min-height: 100%;
}
.rs-gallery-thumbs-grid .rsThumbsContainer {
  height: auto !important;
}
.rs-gallery-thumbs-grid .rsGCaption {
  right: 285px;
  line-height: 12px;
  padding: 1px 7px;
  font-size: 11px;
  background: #EEE;
  position: absolute;
  width: auto;
  bottom: 0;
  float: none;
  text-align: left;
}
/*@media screen and (min-width: 0px) and (max-width: 760px) {  */
@media screen and (min-width: 0px) and (max-width: 767px) {  
  .rs-gallery-thumbs-grid .rsThumbs {
    left: 0;
    position: relative;
    width: 100%;
    height: auto;
    padding: 1px 0 0 0;
    min-height: auto;
  }
  .rs-gallery-thumbs-grid .rsThumbsContainer {
    height: auto !important;
  }
}




/* CUSTOM OVERRIDES  */
.RSthumbnav { opacity:0.6;}
.rsThumb:hover .RSthumbnav, 
.rsNavSelected .RSthumbnav{ opacity:1; 
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.rsThumb.rsNavSelected {  
  -webkit-box-shadow: -1px 2px 2px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -1px 2px 2px 0px rgba(0, 0, 0, 0.5);
  box-shadow: -1px 2px 2px 0px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


.rsBgimg {
		background-position: center center; 
		background-size:cover; 
		background-repeat:no-repeat; 
		padding: 0; margin:0;
		width:100%; height:100%;
}


/*@media screen and (min-width: 761px) {  */
@media screen and (min-width: 768px) {  
	.rs-gallery-thumbs-grid .rsThumbs {	width:25% !important; }
	
	/* with the following sizes, we can fit 10 thumbnail images in the exact height of the slider
	slider height:450px;
	rsThumbs [25%], rsThumb [w:45% margin 0 0 4% 5%] .RSthumbnav [padding 0 0 55% 0] */
	.royalSlider { overflow:hidden;}
	.royalSlider .rsThumb {
		float: left;
		overflow: hidden;
		width: 45%;
		height: auto;
		margin: 0 0 4% 5%; padding:0;
	}

	.rsTmb .rsBgimg.RSthumbnav{
/*		background-position: center center; 
		background-size:cover; 
		background-repeat:no-repeat; 
		padding: 0; margin:0;
		width:100%; 
*/		height:0; padding-bottom: 60%; /* this way we can set height as % instead of fixed*/
	}
	
	.royalSlider.smallRsThumbs .rsThumb {
		width: 30%;
		height: auto;
		margin: 0 0 4% 3.3%; padding:0;
	}

	.royalSlider.smallRsThumbs .rsTmb .rsBgimg.RSthumbnav{ padding-bottom: 75%; }

}
/*
@media screen and (max-width: 767px) {
	.rsDefaultInv .rsFullscreenBtn { display:none;}
	.rs-gallery-thumbs-grid .rsThumbs { width: 100% !important; margin-bottom:1em;}
	
	.royalSlider.rsDefaultInv .rsThumb {
		float: left;
		overflow: hidden;
		width: 15%;
		height: auto;
		margin: 2% 2% 0 0; padding:0;
	}
	.royalSlider.rsDefaultInv .rsThumb:nth-child(6n) { margin-right:0;}

	.rsTmb .rsBgimg.RSthumbnav{ height:0; padding-bottom: 60%; /* this way we can set height as % instead of fixed* / }

	.rsDefaultInv .rsOverflow { min-height:400px!important;}
}
@media screen and (max-width: 420px) {
	.royalSlider.rsDefaultInv .rsThumb { width: 22%; margin: 2% 4% 0 0; }
	.royalSlider.rsDefaultInv .rsThumb:nth-child(4n) { margin-right:0;}
}
*/

@media screen and (max-width: 767px) { .rsDefaultInv .rsOverflow { min-height:400px!important;} }
@media screen and (max-width: 600px) { .rsDefaultInv .rsOverflow { min-height:300px!important;} }
@media screen and (max-width: 480px) { .rsDefaultInv .rsOverflow { min-height:250px!important;} }
@media screen and (max-width: 360px) { .rsDefaultInv .rsOverflow { min-height:200px!important;} }

.rsNavItem.rsThumb.rsNavSelected {}

.royalSlider.rsFullscreen { border: 20px solid #FFF; }
/*
@media screen and (max-width: 767px) {
	.royalSlider.rsFullscreen { width:100%; }
}
*/
.rsDefaultInv .rsArrowIcn {}




.rsDefaultInv .rsArrowIcn { background:none; background-color: transparent; display: block; color: transparent; width: 40px; height:40px; text-indent:0; }
.rsDefaultInv .rsArrowIcn:hover { background:none; background-color: transparent;  color: transparent; }

.rsDefaultInv.rsHor .rsArrowLeft .rsArrowIcn:before, 
.rsDefaultInv.rsHor .rsArrowRight .rsArrowIcn:before { position:absolute; font-family: FontAwesome; color:#FFF; top:0px; display:block;  text-align:center;
 content: "\f105";  opacity:0.8;
 width:37px; height:40px; font-size:40px; line-height:40px; background-color:rgba(136, 136, 136, 0.5); border-radius:50%; }
.rsDefaultInv.rsHor .rsArrowLeft .rsArrowIcn:before{ content: "\f104"; padding-right:3px; left: 15px; }
.rsDefaultInv.rsHor .rsArrowRight .rsArrowIcn:before{ content: "\f105"; padding-left:3px; right:15px; }
.rsDefaultInv.rsHor .rsArrowLeft .rsArrowIcn:hover:before, 
.rsDefaultInv.rsHor .rsArrowRight .rsArrowIcn:hover:before { background-color:rgba(136, 136, 136, 0.4); opacity:1; }

@media screen and (min-width: 1200px) {
	.rsDefaultInv .rsArrowIcn { width: 50px; height:50px; }
	.rsDefaultInv.rsHor .rsArrowLeft .rsArrowIcn:before, 
	.rsDefaultInv.rsHor .rsArrowRight .rsArrowIcn:before { font-size:50px; line-height:50px; width:47px; height:50px; }
}


.rsDefaultInv .rsFullscreenIcn,
.rsDefaultInv .rsFullscreenIcn:hover { background:none; background-color: transparent;  color: transparent;  }
.rsDefaultInv .rsFullscreenIcn {}
.rsDefaultInv .rsFullscreenIcn:before { position:absolute; font-family: FontAwesome; color:#FFF; top:0px; display:block;  text-align:center;
 content: "\f065";  top:6px; right: 6px;
 width:40px; height:40px; font-size:24px; line-height:40px; background-color:rgba(136, 136, 136, 0.5); border-radius:50%; opacity:0.8; }

.rsDefaultInv .rsFullscreenIcn:hover:before { opacity:1; background-color:rgba(136, 136, 136, 0.4);}

.rsDefaultInv.rsFullscreen .rsFullscreenIcn:before { content: "\f066"; }


@media screen and (max-width: 767px) {
	.rsDefaultInv .rsFullscreenBtn { display:none;}

	.rsDefaultInv .rsArrowIcn, .rsDefaultInv .rsArrowIcn:hover { display: none; }
	.rsDefaultInv.rsHor .rsArrowLeft .rsArrowIcn:before, 
	.rsDefaultInv.rsHor .rsArrowRight .rsArrowIcn:before { display: none; }

	.rs-gallery-thumbs-grid .rsThumbs { display:none;}
	.rsDefaultInv .rsOverflow { margin-bottom: 2em;}

}


.royalSlider.rsFullscreen .rsBgimg { background-size: contain; }
.royalSlider.rsFullscreen.rsDefaultInv .rsSlide { background-color: #eee;}