html{
    min-height: 100% !important;
    height: 100%;
    background-color: rgb(255, 255, 255);
}

body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.pageConatiner{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.contentContainer{
	position: relative;
	flex: 1;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	transition:all 0.4s ease-out; 
	-o-transition:all 0.4s ease-out;
	-moz-transition:all 0.4s ease-out; 
	-webkit-transition:all 0.4s ease-out;
	overflow: hidden;
	background-color: #aad3df;
}

.leftColContainer{
	position: absolute;
	width: calc(100px + 10%);
	height: 100%;
	top: 0px;
	left: calc(-100px - 10%);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	transition:all 0.5s ease-out; 
	-o-transition:all 0.5s ease-out;
	-moz-transition:all 0.5s ease-out; 
	-webkit-transition:all 0.5s ease-out;
	background-color: #D8D0C0;
}

.rightColContainer{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: rgb(170,211,223);
	transition:all 0.5s ease-out; 
	-o-transition:all 0.5s ease-out;
	-moz-transition:all 0.5s ease-out; 
	-webkit-transition:all 0.5s ease-out;
	overflow: hidden;
}

.leftColContainerTitle{
	height: 6em;
	padding: 1.2em 0 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: sticky;
	z-index: 100;
	background: rgb(239,248,242);
	background: linear-gradient(0deg, rgba(239,248,242,0) 0%, rgba(171,213,177,0.6068802521008403) 51%, rgba(171,213,177,1) 100%);
	color: #009639;
	font-weight: 600;
	font-size: 0.85rem;
	opacity: 80%;
	transition:all 0.2s ease-out; 
	-o-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out; 
	-webkit-transition:all 0.2s ease-out;
}

.leftColContainerTitle:hover{
	opacity: 100%;
}

.gallery{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	position: absolute;
	overflow-y: scroll;
	background-color: #EFF8F2;
}

.imgContainer{
	padding: 3em 2% 2%;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	top: 0px;
	transition:all 0.3s ease; 
	-o-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease; 
	-webkit-transition:all 0.3s ease;
	
}


.galleryImgContainer{
	margin: 2% 0;
	position: relative;
	width: 100%;
	transition:all 0.2s ease; 
	-o-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease; 
	-webkit-transition:all 0.2s ease;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	border: 1px #453000 solid;
	border-radius: 4px;
	cursor: pointer;
}

.galleryImg{
	width: 100%;
	margin: 0px;
}

.galleryImgContainer:hover {
	transform: scale(1.015);
}

.galleryImgLayer{
	position: absolute;
	max-width: 45%;
	height: 100%;
	right: -42%;
	top: 0;
	background-color: black;
	opacity: 70%;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	color: white;
	font-size: 14px;
	transition:all 0.2s ease; 
	-o-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease; 
	-webkit-transition:all 0.2s ease;
}

.layerContentContainer{
	cursor: pointer;
	margin: 10px;
}

.layerConIcon{
	height: 1.5em;
}

.layerConIconContainer{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin-bottom: 0.7em;
}

.scrollerTop, .scrollerBot{
	position: fixed;
  z-index: 10;
	width: 100%;
	height: 6%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 80%;
	transition:all 0.2s ease; 
	-o-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease; 
	-webkit-transition:all 0.2s ease;
	cursor: pointer;
}

.scrollerTop{
	background-image: linear-gradient(to bottom, rgba(216, 208, 192,1), rgba(216, 208, 192,0));
}

.scrollerBot{
	background-image: linear-gradient(to top, rgba(216, 208, 192,1), rgba(216, 208, 192,0));
}

.scrollerTop{
  top: 0px;
  z-index: 15;
}

.scrollerBot{
  bottom: 0px;
  z-index: 15;

}

.scrollerTopArrow {
  border: double rgba(69, 48, 0, 0.6);
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 7px;
  margin: 13px 0px 0px 0px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transition:border 0.2s ease; 
	-o-transition:border 0.2s ease;
	-moz-transition:border 0.2s ease; 
	-webkit-transition:border 0.2s ease;
}

.scrollerBotArrow {
  border: double rgba(69, 48, 0, 0.6);
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 7px;
  margin: 0px 0px 5px 0px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transition:border 0.2s ease; 
	-o-transition:border 0.2s ease;
	-moz-transition:border 0.2s ease; 
	-webkit-transition:border 0.2s ease;
}


.scrollerTop:hover .scrollerTopArrow{
	border: double rgba(69, 48, 0, 0.9);
  border-width: 0 5px 5px 0;
}

.scrollerBot:hover .scrollerBotArrow{
	border: double rgba(69, 48, 0, 0.9);
  border-width: 0 5px 5px 0;
}

.preloadImg{
	width: 100px;
	position: absolute;
	z-index: -100;
}