.sliderPic {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.slidesPic {
	display: flex;
	transition: transform 0.5s ease;
	width: 100%;
}

.slidePic {
	min-width: 100%;
	height: calc(100vh - 200px);
	background-size: cover;
	background-position: center;
}

.dotPic {
	height: 10px;
	width: 10px;
	margin: 5px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
	z-index: 10;
}

.activePic {
	background-color: #717171;
}

.dot-containerPic {
	text-align: center;
	position: absolute;
	bottom: 77px;
	left: calc(50% - 100px);
	width: 200px;
	height: 30px;
	justify-content: center;
}

.small-dotPic {
	height: 8px;
	width: 8px;
	margin: 5px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
	z-index: 10;
}

.dot-containerPicDetail {
	left: calc(31% - 100px);
	position: relative;
}

/* Mobile styles */
@media ( max-width : 500px) {	
	.dotPic {
		height: 6px;
		width: 6px;
		z-index: 200;
	}
	.small-dotPic {
		height: 4px;
		width: 4px;
	}
	
	.dot-containerPicDetail {
		z-index: 2000;
		bottom: 0;
	}