/*********************************
* Slideshow Styling
*********************************/

@media  (max-width:415px)  {

ul.thumbs {margin:0 15% !important ;}}

@media  (max-width:768px)  {
.thumbs-container.bottom {
    margin-bottom: 0px !important; }
}


@media  (max-width:415px)  {
#next-btn {margin-top:28px !important;
margin-right:15px !important;
}}



#slideshow {
	width: 100%;
	height: 100%;
	margin: 100px auto;

    position:relative;

    overflow: hidden;
	
}
	#slideshow.fullscreen {
		position: fixed;
		top: 0;
		left: 0;

		width: 86%;
		height: 100%;
		margin: 0;
		padding: 0;

		overflow: hidden;
		margin-left: 273px; 
	}
	.img-wrapper {
	    width: 100%;
	    height: 100%;
		
		position: absolute;
		top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;

	    margin: auto;
	    overflow: hidden;
	    
	    z-index:8;

	    background-size: cover;
	    background-position: center center;
		margin-bottom: 180px;
	}
		#slideshow .img-wrapper.active {
		    z-index:10;
		}

		#slideshow .img-wrapper.last-active {
		    z-index:9;
		}

	/*********************************
	* Thumbnail Styling
	*********************************/
	.thumbs-container {
		width: 100%;
		height: 120px;
		position: absolute;
		left: 0;

		z-index: 11;

		background: #222222;
		opacity: .9;
	}
		.thumbs-container.top {
			top: 0;
		}
		.thumbs-container.bottom {
			bottom: 0;
		margin-bottom: 65px;
	}
		.prev, .next {
			width: 3%;
			min-width: 100px;
			height: 100%;

			color: #999999;
			cursor: pointer;
		}
		
		.prev {
			float: left;
			position: absolute;
			z-index: 99;
			opacity: .9;
			padding-bottom: 80px;
		}
		.next {
			float: right;
			padding-bottom: 80px;
			padding-right: 90px;
			padding-left: 100px;
		}
			.prev:hover, .next:hover {
				color: #555555;
			}
		ul.thumbs {
			position: absolute;
			top: 0;
			left: 5%;
			right: 5%;
			height: 120px;
			padding: 0;
			margin: 0 5%;
			overflow: hidden;
			white-space: nowrap;
			text-align: center;
			
		}
		
		
			.thumb {
				display: inline-block;
				width: 100px;
				height: 100px;
				margin: 5px;

				overflow: hidden;
				background-size: cover;
	    		background-position: center center;

	    		cursor: pointer;
			}

				.thumb:first-of-type {
					margin-left: 0px;
				}
				
			.thumb.active {
				width: 110px;
				height: 110px;
				border: 2px solid #FFF;
			}
                 			
			

@media (max-width: 1745px) {
	.thumbs-container {
		width: 98.5%;
	}
	
	.prev {
		}
}

@media (max-width: 1565px) {
	.thumbs-container {
		width: 96%;
	}
	
	.prev {
		}
}

@media (max-width: 1410px)  {
	.thumbs-container {
		width: 100%;
	}
	
    #slideshow.fullscreen {
      margin-left: 150px;
	  width: 88.5%;
    }

}

@media (max-width: 1085px) {
	.thumbs-container {
		width: 97.5%;
	}
	.prev {
			padding-right: 60px;
		}
}

@media screen and (max-width: 1000px) and (min-width: 400px) {
	.thumbs-container {
		width: 100%;
	}
	#slideshow.fullscreen {
      margin-left: 90px;
	  width:91%;
    }
}


@media (max-width:700px) {
	.thumbs-container {
		width: 96.5%;
	}
	.prev {
			padding-right: 40px;
		}
}

@media (max-width:500px) {
	.thumbs-container {
		width: 91%;
	}
	.prev {
			padding-right: 10px;
		}
		
		.next {
			padding-right: 4px;
			padding-left: 10px;
		}
}

@media (max-width: 400px)  {
	.thumbs-container {
		width: 100%;
	}
    #slideshow.fullscreen {
      margin-left: 90px;
	  width: 100%;
    }
}

#next-btn{background-image: url('../images/rightarrow.png');width:100px !important;background-repeat:no-repeat;width:70px;margin-top:30px;}
.next {padding-left:0px !important;padding-bottom:100px;height:113px; z-index:99; position:relative;}
#prev-btn {background-image:url('../images/leftarrow.png');background-repeat:no-repeat;margin-top:30px;margin-left:40px; }


#next-btn2{background-image: url('../images/rightarrow2.png');width:100px !important;background-repeat:no-repeat;width:70px;}
#prev-btn2 {background-image:url('../images/leftarrow2.png');width:100px !important;background-repeat:no-repeat;width:70px; }





@media screen and (max-width: 1148px) {
   ul.thumbs{left:15%;right:15%;}

}

@media screen and (max-width: 786px) {
   ul.thumbs{left:15%;right:15%;}

}

@media screen and (max-width: 544px) {
   ul.thumbs{left:25%;right:25%;}
	
}}