html, body {
	padding: 0;
	margin: 0;
}

.project-page-main {
	margin-left: 70px;
}

/*.carousel-container {
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	background-color: #333;
	overflow: hidden;
}*/
.carousel-container {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #333;
    overflow: hidden; 
    display: flex;
    justify-content: center;	
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
}

.carousel-container-docshare {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #333;
    overflow: hidden; 
    display: flex;
    justify-content: center;	
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
}

.carousel-container-docshareconf {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #333;
    overflow: hidden; 
    display: flex;
    justify-content: center;	
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
}
.current-image {
	width: auto;
	height: 100%;
}

.current-image-docshare {
	width: auto;
	height: 100%;
}
.current-image-docshareconf {
	width: auto;
	height: 100%;
}
.next-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 10px;
	left: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	transition: all .5s;
}

.next-list li {
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 100px;
	min-width: 100px;
	height: 51px;
	margin: 0 5px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	transition: all .5s;
}
.next-list li:first-of-type {
	padding-left: 15px;
}
.next-list li:last-of-type {
	padding-right: 15px;
}

.next-list-docshare {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 0px !important;
	justify-content: end !important;
	left: 0;
	display: flex;
	align-items: center;
	overflow-x: scroll;
	transition: all .5s;
}

.next-list-docshare li {
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 100px;
	min-width: 100px;
	height: 51px;
	margin: 0 5px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	transition: all .5s;
}
.next-list-docshare li:first-of-type {
	padding-left: 15px;
}
.next-list-docshare li:last-of-type {
	padding-right: 15px;
}

/* .next-list-docshareconf {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 80px;
	position: absolute;
	bottom: 78px !important;
	justify-content: end !important;
	left: 0;
	display: flex;
	align-items: center;
	overflow-x: scroll;
	transition: all .5s;
} */
.next-list-docshareconf {
	list-style-type: none;
    margin: 0;
    padding: 0;
    width: 9%;
    height: 100vh;
    position: absolute;
    top: 0 !important;
    justify-content: end !important;
    left: 0;
    display: inline-block;
    align-items: center;
    overflow-y: scroll;
    transition: all .5s;
}


.next-list-docshareconf li {
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 100px;
	min-width: 100px;
	height: 51px;
	margin: 0 5px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	transition: all .5s;
	padding-left: 15px;
}
.next-list-docshareconf li:first-of-type {
	padding-left: 15px;
}
.next-list-docshareconf li:last-of-type {
	padding-right: 15px;
}

.image-of-list {
	width: 100%;
	height: 100%;
	opacity: 0.5;
	box-shadow: 0 0 20px #000;
	transition: all .5s;
}

.image-of-list-docshare {
	width: 100%;
	height: 100%;
	opacity: 0.5;
	box-shadow: 0 0 20px #000;
	transition: all .5s;
}
.image-of-list-docshareconf {
	//width: 100%;
	width: 13vh;
	height: 100%;
	opacity: 0.5;
	box-shadow: 0 0 5px #000;
	transition: all .5s;
}
.current-image-list,.current-video-list {
	opacity: 1;.
	transition: all .5s;
}

.current-image-list-docshare {
	opacity: 1;
	transition: all .5s;
}
.current-image-list-docshareconf {
	opacity: 1;
	transition: all .5s;
}
.arrow {
	display: flex;
	position: absolute;
	width: 50px;
	height: 100px;
	bottom: 10px;
	flex: 1;
	text-align: center;
	line-height: 50px;
	color: #FFF;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	top: 40%;
	font-size: 40px;
	font-weight: 800;
}


.arrow-left {
	left: 10px;
}
.arrow-right {
	right: 10px;
}

 /*
 * Animations
 */

 @keyframes fadeIn {
     0% {opacity: 0}
     100% {opacity: 1}
 }

 @keyframes slideInFromLeft {
     0% {
     	opacity: 0;
     	transform: translateX(-100%);
    	}
     100% {
     	opacity: 1;
     	transform: translateX(0px);
     }
 }

 @keyframes slideInFromRight {
     0% {
     	opacity: 0;
     	transform: translateX(100%);
    	}
     100% {
     	opacity: 1;
     	transform: translateX(0px);
     }
 }

 .slideInFromLeft {
 	animation: slideInFromLeft .5s ease-in-out;
 }

 .slideInFromRight {
 	animation: slideInFromRight .5s ease-in-out;
 }

 .fadeIn {
 	animation: fadeIn .5s ease-in-out;
 }