/******************** CSS Class **************************/
body{margin: 0;}
html{overflow-x:hidden}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html,body{font-size:15px;line-height:1.5}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}
a{text-decoration: none;color: inherit;}
img {vertical-align: middle;}
textarea {resize: none;}

.posRel{position: relative;}
.posAbsolute{position: absolute;}
.pTopLeft0{top: 0;left: 0;}
.nowrap{white-space: nowrap;}
.bold{font-weight: bold;}

.posCenter{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.posVCenter{
  position: absolute;
  top: 50%;
  transform: translateY(-50%); 
}

.posHVCenter{
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%,-50%);
}

.perfectCenter{
	display: flex;justify-content: center;align-items: center;
}

.mWidth{max-width: 100%;}

.no-select{
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-justify{text-align: justify;}

.hoverZoomImg{overflow: hidden;}
.hoverZoomImg img{transition: 0.3s;}
.hoverZoomImg:hover img{transform: scale(1.2);}


.row-flex{
  display: flex;
  flex-wrap: wrap;
}

.row-flex-nowrap{
  display: flex;
  flex-wrap: nowrap;
}

/* For mobile phones: */
[class*="colFlex-"]{
  flex: 100%;
}



.row:after{
		content: "";
		clear: both;
		display: table;
}

[class*="col-"] {
  float: left;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}



  .colFlex-1 {flex: 8.33%;}
  .colFlex-2 {flex: 16.66%;}
  .colFlex-3 {flex: 25%;}
  .colFlex-4 {flex: 33.33%;}
  .colFlex-5 {flex: 41.66%;}
  .colFlex-6 {flex: 50%;}
  .colFlex-7 {flex: 58.33%;}
  .colFlex-8 {flex: 66.66%;}
  .colFlex-9 {flex: 75%;}
  .colFlex-10 {flex: 83.33%;}
  .colFlex-11 {flex: 91.66%;}
  .colFlex-12 {flex: 100%;}
}

/*************** Slider *******************/
	
.containerSlide{
	position: relative;
	max-width: 100%;
}

.slideNavBtn{
  position: absolute;
  cursor: pointer;
  color: white;
  font-weight: bold;
  font-size: 18px;
  user-select: none;
}

.slideNavBtn:hover{
    background-color: green;
}

.slideNavBtn.prev{
	left: 10px;
}

.slideNavBtn.next{
	right: 10px;
}


.slideNavBtn.lg{
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%); 
}



.slideDotDiv{
    position: absolute;
    padding: 2px;
    border-radius: 15px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid green;
    margin-top: 5px;
  }

.dotBlur{
    background-color: lightgreen;
    padding: 3px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    float: left;
    margin: 2px;
}

.dotBlur.lg{
    width: 25px;
    height: 25px;
}

.dotFocus{
    background-color: green;
    color: white;
}


@media (max-width: 768px){

	/** Slider **/  
	.containerSlide{
		/*remove slider scroll bar for the enlarge image*/
		overflow-x: clip;
	}

	.requireZoomOnMobile img{
			max-width: 145%;
	}

	.dotBlur.sm{
		  width: 20px;
		  height: 20px;
		  font-size: 12px;
	}

	.slideNavBtn:hover{
    background-color: initial;
	}

	.slideNavBtn.sm{
	  	width: 25px;
	  	height: 25px;
	  	top:initial;
	  	bottom: 0;
	}

	.slideNavBtn.next.sm{
			right: 10px;
	}

	 .slideNavBtn.prev.sm{
			 left: initial;
	  	 right: 40px;
	}
}

/*************** Slider -END- *******************/


@keyframes aniSlide{
		from{opacity: 0.3;}
		to{opacity: 1;}
	}

.animateSlideIn{animation: aniSlideIn 1s;animation-fill-mode: forwards;}@keyframes aniSlideIn{from {height: 0} to {height: 80px}}

.animateTop{position:relative;animation:animateTop 0.5s;animation-fill-mode: forwards;}@keyframes animateTop{from{top:-100px;opacity:0} to{top:0;opacity:1}}

.animateBottom{position:relative;animation:animateBottom 0.4s;animation-fill-mode: forwards;}@keyframes animateBottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}	

.fadeIn{animation: fadeIn 1s;animation-fill-mode: forwards;}@keyframes fadeIn{from{opacity:0} to {opacity:1}}

.animateLeft {position:relative;animation:animateLeft 0.4s; animation-fill-mode: forwards;}@keyframes animateLeft{from{left:-300px;opacity:0} to {left:0;opacity:1}}

.animateRight{position:relative;animation:animateRight 0.4s;animation-fill-mode: forwards;}@keyframes animateRight{from{right:-300px;opacity:0} to{right:0;opacity:1}}


.animateLeftArrow {position:relative;animation:animateLeftArr 1s infinite;}@keyframes animateLeftArr{from{left:-10px;} to {left:0;}}
.animateRightArrow{position:relative;animation:animateRightArr 1s infinite;}@keyframes animateRightArr{from{right:-10px;} to{right:0;}}




@media only screen and (max-width : 992px){
	.hideMediumScr{
		display: none;
	}

	.noTablet{
	  display: none;
  }
}


@media only screen and (min-width : 992px){
	.hideLargeScr{
		display: none;
	}

	.showLargeScr{
		display: block!important;
	}
}

@media only screen and (max-width: 768px){
 
 	.noMobile{
	   display: none;
  	}

  .showSmallScr{
		display: block;
	}
}




/*********************** Template Class *************************/

/************** Font Size **************/
/* PC 16px, Tablet 14px, Mobile 13px */
/* Large font - PC : 20px, Tablet : 18px, Mobile 16px */
/************** Font Size **************/
html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: Century-Gothic;
  src: url(CenturyGothic.woff);
}

@font-face {
  font-family: Century-Gothic;
  src: url(CenturyGothic-Bold.woff);
  font-weight: bold;
}


*{
	box-sizing: border-box;
	font-family: Century-Gothic;
}

body{
	margin: 0px;
}

a{text-decoration: none;}


.aniDelay1s{animation-delay: 1s;opacity: 0;}
.aniDelay1-5s{animation-delay: 1.5s;opacity: 0;}
.aniDelay2s{animation-delay: 2s;opacity: 0;}
.aniDelay2-5s{animation-delay: 2.5s;opacity: 0;}
.aniDelay3s{animation-delay: 3s;opacity: 0;}
.aniDelay5s{animation-delay: 5s;opacity: 0;}
.aniDelay6s{animation-delay: 6s;opacity: 0;}
.aniDelay10s{animation-delay: 10s;opacity: 0;}


.borderRadius10{border-radius: 10px;}
.borderRadius50p{border-radius: 50%;}
.padding20{padding: 20px;}
.padding5{padding: 5px;}
.marginTop15{margin-top: 15px;}
.marginTop30{margin-top: 30px;}
.marginTop50{margin-top: 50px;}
.marginTopAllDevice{margin-top: 50px;}
.marginTop75{margin-top: 75px;}
.marginExTop5{margin: 0 5px 5px 5px;}
.valignImg-MD-LG{position: absolute;top: 50%;transform: translateY(-50%);}
.valignTextBox{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 15px; 
}

.valignTextBox.right{right: -50px;}
.valignTextBox.left{left: -50px;}

.backLightGrey{background-color: lightgrey;}
.backLightGreen{background-color: lightgreen;}

.m-Center_d-Left{
	position: absolute;
	top: 50%;
}

.m-Center_d-Left.desk{
	left: 50%;
	transform: translate(-50%,-50%);
}

.numbering{position: 3px;background-color: green;color: white;border-radius: 5px;}

.moreBtnAllDevice{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	padding: 5px;
	background-color: green;
	color: white;
	border: 2px solid white;
	border-radius: 5px 0 0 5px;
	font-size: 16px;
}


.pageContents{text-align: justify; padding: 10px;}
.Page-Container hr{margin: 25px auto;width:20%; border: 0;border-top: 3px dotted gray;}

.largeFont.lg{font-size: 20px;}
.xLargeFont.lg{font-size: 30px;}

.zIndex2{z-index: 2;}
.zIndex1{z-index: 1;}

.roundLbl{
	border-radius: 50%;
	height: 50px;
	width: 50px;
	z-index: 1;
}

.opacity0{opacity: 0;}
.whiteCol{color: white;}
.greenCol{color: green;}

.messageBar{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	padding: 10px;
	background-color: lightgreen;
	display: none;
}

.messageBar.show{
	display: block;
	animation:animateMessageBar 0.4s;
	animation-fill-mode: forwards;
}
@keyframes animateMessageBar{from{bottom:-150px;opacity:0} to{bottom:50px;opacity:1}}


.productTitle{
	position: absolute;
	top: 50%;left: 50%;
	transform: translate(-50%,-50%);
 	line-height:1.6;
}

.lgFontAllDevice{font-size: 35px;}
.smFontAllDevice{font-size: 15px;}
.tinyFontAllDevice{font-size: 15px;}

.underLine{text-decoration: underline;}
.width85{width: 85%;}

.highLight{
	display: inline-block;
	padding: 5px 12px; 
	border-radius: 50px; 
	background-color: lightgreen;
}

.bottomTri{
    position: relative;
    margin-bottom: 20px;
  }

.bottomTri::after{
  position: absolute;
  content : "";
  border-width: 10px;
  border-style: solid;
  border-color: lightgreen transparent transparent transparent;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}


.proParagraphPos{
	position: absolute;
	top: -50px; left: 50%;
	width: 80%; 
}

.proParagraph{
	text-align: justify;
	transform: translateX(-50%);
	background-color: lightgrey; 
	padding: 5px 20px 5px 20px;
}


.mSideBar{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 308px;
	background-color: lightgrey;
	overflow: hidden;
	z-index: 3;
	user-select: none;
}


.mSideBar .menuContainer{
	position: absolute;
	left: 20px;
	top:50px;
	/*top: 50%;
	transform: translateY(-50%);*/
}

.mSideBar .menuItem{
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	width: 80%;
}

.sidePic{
	position: absolute;
	bottom: 0;
	/*bottom: 50px;*/
}

.mSideBar .sideContact{
		position: absolute;
		bottom: 15px;
		white-space: nowrap;
		
}


.mSideBar .sideContact i{
	padding: 3px;
	font-size: 20px;
}

.mSideBar .logo{
	position: absolute;
	width: 230px;
	height: 180px;
	border-radius: 50%;
	background-color: white;
	overflow: hidden;
	bottom: 180px;
}

.logo img{
	padding: 10px;
	width: 220px;
}

.mSideBar .rect{

	background-color: gray; 
	width:300px;
	height: 300px;
	position: absolute;
	right: -160px;
	top: -50px;

	border-radius: 20px;

	

	overflow: hidden;

	z-index: -1;

	transform: rotate(30deg);
}

.mSideBar .rect img{
	transform: rotate(-30deg);
}

/*.mSideBar */.Close{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 50px;
	height: 50px;

	font-size: 12px;
	background-color: white;
	border-radius: 50%;
	z-index: 1;
	
	cursor: pointer;
}


.mSideBar-Spec{
	top: 0;
	left: 0;
	position: fixed;
	height: 100%;
	width : 0;
	background-color: lightgrey;
	overflow: hidden;
	z-index: 3;
	transition: 0.2s;
	user-select: none;
}

.mSideBar-Spec.show{width: 308px;}

.mSideBar-Spec .container{
	position: absolute;
	padding: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.mSideBar-Spec .species{
	position: relative;
	padding: 10px;
	text-align: center;
	cursor: pointer;
}

.mSideBar-Spec .backPic{
	position: absolute;
	left: -50px;
	top: 50%;
	width: 480px;
	height: 250px;
	transform: translateY(-50%) rotate(15deg);
	overflow: hidden;
}

.mSideBar-Spec .backPic img{
	position: absolute;
	top: -60px;
	transform: rotate(-15deg);
}

.mSideBar-Spec .backBtn{
	position: relative;
	width: 50px;
	height: 50px;
	margin: auto;
	cursor: pointer;
	border-radius: 50%;
	background-color: gray;
}

.mSideBar-Spec .title{text-align: center; padding: 20px; font-size: 18px;cursor: context-menu;}
.mSideBar-Spec hr{margin: auto;width:50%; border-top: 1px solid gray;}
.fadeOutImg{animation: fadeOut 1s;animation-fill-mode: forwards;animation-delay: 0.5s;}@keyframes fadeOut{from{opacity:1} to {opacity:0.3}}


.headerBar{
	position: relative;
	margin: auto;
	max-width: 100%;
}

.headerBar .navLogo{
	float: right;
	
}

.headerBar .navLogo img{
	width: 130px;
	padding: 10px;
}

/** Mobile Menu **/
.mobileMenu{
	position: relative;
	float: left; 
	background-color: green; 
	color: white; 
	width: 60px;
	height: 60px;
	cursor: pointer;
}

#menuText{
	position : absolute;
	top : 50%;
	right : 50%;
	transform : translate(50%,-50%);
	transition: 0.3s;
}

.headerContact{
		position: absolute;

		/*border: 1px green solid;*/
		padding: 5px; 
		border-radius: 10px;

		/*left: 40%;*/
		left: 70px;
		top: 50%;
		/*transform: translate(-50%,-50%);*/
		transform: translateY(-50%);
}

.headerContact i{
	font-size: 25px;
	padding: 4px;
}

.overlay{
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.7;

	display: none;
	z-index: 1;
}


.Page-Container{
	max-width: 100%;
	margin-left: 310px;
	display: none;
}


/**** Slide ****/
.imgSlide{
	position: relative;
	display: none;
	animation: aniSlide 1s;
	overflow: hidden;
}


@keyframes sliding{
	from{height: 0;}
	to{height: 100%;}
}

.imgSlide .sl-main-back{
	position: absolute;
	background-color: lightgreen;
	opacity: 0.8;
	width: 35%;
	
	height: 0;
	left: 0;

 	top: 50%;
	transform: translateY(-50%);
	animation: sliding 0.4s forwards;
 	animation-delay: 1s;

 	

}

.imgSlide .sl-main-back-content{
	padding: 5px;
}

.imgSlide .s1-main-2ndImg{
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;

  animation: fadeIn 4s forwards;
  animation-delay: 5s;
}


.imgSlide .s3-kd-container{
	/*position: absolute;*/
	/*left: 20px;
	bottom: 15px;*/
	padding: 10px;
	background-color: lightgreen;
	text-align: justify;
	/*opacity: 0;*/
}

.imgSlide .s3-kd-container-pos.lg{
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%,-50%);
}

.imgSlide .s3-kd-container.lg{
	width: 350px;
}

.imgSlide .slideTitle{
	
	position: relative;
	font-weight: bold;
	padding: 5px;

	opacity: 0;
	animation: animateTop 0.3s forwards;
	animation-delay: 2s;
}

.imgSlide .slideTitle.lg{
	font-size: 22px;
}

.imgSlide .slideContent, .speciesPage{
	/*position: relative;*/
	text-align: justify;
	padding: 6px;
}

.speciesPage .species{
	font-weight: bold;
}

.imgSlide .slideContent.lg{
	font-size: 16px;
}

.imgSlide .slidePic{
	position: absolute;
}

.imgSlide .slidePic .sl2-img{
	height: 230px;
	width: 230px;
	border: 3px solid white;
	border-radius: 10px;
}

.imgSlide .slidePic .sl3-img{
	height: 180px;
	width: 180px;
	border: 3px solid white;
	border-radius: 50%;
}

.imgSlide .slidePic .caption.sl2{
	bottom: 0;
	background-color: lightgrey;
	padding: 5px;
}

.imgSlide .slidePic .caption.sl3{
	bottom: 15px;
	background-color: lightgrey;
	border-radius: 5px;
	padding: 2px;
}


.imgSlide .slidePic.lg .caption{
	font-size: 20px;
}

.imgSlide .slidePic.chengal{bottom: 10px;}
.imgSlide .slidePic.merbau{right: 10px; bottom: 10px;}
.imgSlide .slidePic.balau{left: 10px;	bottom: 10px;}
.imgSlide .slidePic.kekatong{left: 30px; top: 10px;}
.imgSlide .slidePic.kempas{right: 30px; top: 10px;}

/* slide no 3 */
.imgSlide .slidePic.twist{right: 30px; top: 15px;}
.imgSlide .slidePic.cupping{right: 30px; bottom: 15px;}
.imgSlide .slidePic.crack{right: 30px;}

/* slide no 4 */
.imgSlide .profile{
		width: 100%; 
		display: flex; 
		justify-content: center;
		position: absolute;
}

.imgSlide .profile.p1{bottom: 0px;}
.imgSlide .profile.p2{top: 0px;}


.imgSlide .profile img{
	border: 3px solid white;
	border-radius: 50%;
}

.imgSlide .profile.lg img{
	height: 220px;
	width: 220px;
	margin: 15px;
}

.imgSlide .bg-sl4{
	position: absolute;   
	left: -250px;
	background-color:lightgrey; 
	transform: rotate(45deg);
	border-radius: 20%;
	overflow: hidden;
}

.imgSlide .bg-sl4.lg{
	top: -100px;
	width: 600px; 
	height: 600px;
}


.imgSlide .bg-sl4 img{
	transform: rotate(-45deg);
	opacity: 0.4;
}

.imgSlide .sl4-Title-bg{
	background-color: lightgreen; 
	padding:10px;
}


.banner{
	position: relative;
}

.banner img{max-width: 100%;}


.banner .title{
	position: absolute;
	
	background-color: green;
	color: white;
	padding: 20px;
	border: 3px white solid;

	left: 50%;
	bottom: 0;
	transform: translate(-50%,50%);

	cursor: context-menu;
}

.banner h1{
	position: absolute;
	background-color: inherit;
	color: inherit;
	padding: 10px 20px;
	border: inherit;
	left: 50%;
	bottom: 0;
	transform: translate(-50%,50%);
	width: max-content;
}

.banner .title.lg, .intro .title.lg{font-size: 20px;/*bottom: -30px;*/}

.banner .title .no{
	position: absolute;
	left: 50%;
	bottom: -14px;
	transform: translateX(-50%);

	border-radius: 50%;
	height: 30px;
	width: 30px;
	background-color: green;
	color: white;
}

.banner .title.center{
	left: 50%; 
	top: 50%;
	bottom: auto;
	transform: translate(-50%,-50%);
}

.banner .title .no > span{
	position: absolute;
	left: 50%;
	top: 50%;

	transform: translate(-50%,-50%);
}


.appRow{
	position: relative;
	
}

.appRow .appNo{
	position: absolute; 
	
	width: 40px;
	height: 40px;

	background-color: lightgreen;
	border: 2px solid white; 
	border-radius: 50%;
	z-index: 1;

	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.appRow .appNo > span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.appRow .appTitle{
	position: absolute;
	background-color: lightgreen;
	padding: 10px;
	border: 3px white solid;
	top: 80%;
	left: 50%;
	transform: translate(-50%,-50%);
	cursor: context-menu;
}

.appRow .appTitle .species{
	font-size: 12px;
	font-weight: bold;
}

.appRow img{
	max-width: 100%;
}

.btnContainer{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.btnContainer .tabBtn{
		position: relative;
			padding: 10px;
			background-color: lightgreen;
			cursor: pointer;
}

.btnContainer .tabBtn.focus{
			background-color: green;
			color: white;
}

.btnContainer .tabBtn.focus::after{
	position: absolute;
	content: "";
	border-width: 10px;
  border-style: solid;
	border-color: transparent transparent white transparent;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	
}

.tabContents{position: relative;display: none;}
.tabContents .species{
	border: 2px white solid;
	padding: 15px;
	font-size: 26px;
	color: white;
	font-weight: bold;
	
}


.tabContents.focus{
	display: block;
}

.accHeader{
	position: relative;
	width: 100%;
	background-color: lightgrey;
	padding: 15px;
	overflow: hidden;
	cursor: pointer;
	z-index: 1;
}

.accHeader.active{background-color: lightgrey;}
.accHeader.active:after{content: "\2212";}
.accHeader:hover{background-color: lightgrey;}
.accHeader:after{
	position: absolute;
	top: 0;
	right: 0;
	
	font-size: inherit;
	font-weight: bold;
	padding: 15px;
	content: "\002B";
}

.accHeader .contents{
	background-color: lightgreen;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s;
}

.mailSection{
  position: relative;
  background-color: lightgrey;
}


.formContact{
	width:90%;padding: 10px;
}

.formContact .btn{
	margin: 10px; 
	border: 2px green solid; 
	border-radius:  5px;
	background-color: lightgreen; 
	padding: 5px; 
	display: inline-block;
	cursor: pointer;
	user-select: none;
}

.mailModal{
	position: absolute;
	top: 0;left: 0;
	width: 100%;height: 100%;
	background-color: lightgrey;
	opacity: 0.9;
	z-index: 1;
	display: none;

	-webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.mailModal .errMess{
	background-color: red;
	color: white;
	padding: 10px;
}



.containerAniFldLbl
		{
			position: relative;
			padding: 10px;
		}

		.containerAniFldLbl .Fld{
			background-color: white;
			border-width: 0;
			border-radius: 5px;
			padding: 8px;
			z-index: 1;
			outline: none;
			width: 100%;
			border: 1px solid lightgrey;
		}

		
		.containerAniFldLbl .Lbl{
			position: absolute;
			transition: 0.2s;
			/*opacity: 0.5;*/

			top: 50%;
			transform: translateY(-50%);
			left: 20px;

			user-select: none;
			cursor: text;

			font-size: 12px;
			/*color:  black;*/
			
		}

		.containerAniFldLbl.focus .Lbl{
			top: 5px;
			background-color: lightgrey;
			
			padding: 3px;
			opacity: 1;
			
			border-radius: 3px;
			/*border-style: dotted;
			border-color: black;
			border-width: 0 1px 0 1px;*/
		}

		.containerAniFldLbl .required{
			border: 2px dotted red;
		}

.gallery > div{
	overflow: hidden;	
}
.gallery > div img{transition: 0.3s;}
.gallery > div:hover img{transform: scale(1.2);}

.profileContainer{
	border:solid lightgrey 1px; 
	width: 60%; 
	border-radius: 10px; 
	padding: 10px;
	margin: auto;
	position: relative; 
	background-color:white;
}


.footerMenu{justify-content: center;margin: 30px 0 30px 0;display: flex;
	flex-wrap: wrap;}

.footerMenu > div{
	color: green;
	padding: 4px;
	position: relative;
	cursor: pointer;
}

.footerMenu > div::after{
	position: absolute;
	content : "";
	width: 10px;
	height: 2px;
	background-color: green;

	left: 50%;
	top: 100%;
	transform: translateX(-50%);
}

.footerMenu.lg{font-size: 16px;}


#footer {display: none;}
#footerRow i{font-size: 25px;}
#footerRow + div{background-color: green; color: white; padding: 20px; text-align: center;}
#footerRow .row{padding-bottom: 5px;}
.col-width-25{width: 30%;}
.col-width-75{width: 70%;}


#app-section-img img{
	display: block;
	margin: auto;
	max-width: 100%;
	padding: 1px;
}

.toolTips{
	position: absolute;
	padding: 15px;
	background-color: lightgreen;
	border-radius: 5px;
}

.toolTips.bottom{
	bottom: 0;
	left: 50%;
	transform: translate(-50%,100%);
}

.toolTips.bottom::after{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-100%);
	content: "";
	border-width: 15px;
  border-style: solid;
  border-color: transparent transparent lightgreen transparent;
}

.species-general{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 10px;
	border-width: 1px;
	border-style: solid;
}

.species-general.white{
	color: white;
	border-color: white;
}


.title-LG-Bottom-SM-Center{
	position: absolute;
	background-color: lightgreen;
	padding: 20px; 
	border: 3px white solid;
	cursor: context-menu;
}

.title-LG-Bottom-SM-Center.green{
	background-color: green;
}

.title-LG-Bottom-SM-Center.lg{
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	font-size: 20px;
}

.desc-general{
	background-color: lightgreen;
	padding: 5px;

	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	cursor: context-menu;

	text-align: center;
}


.desc-general.left{left: 0; border-radius: 0 5px 5px 0;}
.desc-general.right{right: 0; border-radius: 5px 0 0 5px;}
.desc-general.bottom{top: 70%; left: 50%; transform: translateX(-50%);border-radius: 5px;}
.desc-general.bottom0{top: initial;bottom: 0; left: 50%; transform: translateX(-50%);}


.col2-img{
		width: 100%; 
		display: flex; 
		justify-content: center;
}

.col2-img > div{padding: 5px;position: relative;}
.col2-img img{border-radius: 50%;}
.col2-img img.lg{width: 230px;height: 230px;}

.card.lg{
	background-color: lightgreen; 
	width: 300px; 
	margin: auto;
}

.card img{max-width: 100%;}

.col2-img-desc{
		width: 100%; 
		display: flex; 
		justify-content: center;
}

.col2-img-desc img{max-width: 100%;}
.col2-img-desc > div{position: relative; width: 300px;}
.col2-img-desc > div > div{padding: 10px;width: 100%; text-align: left;}


.cols-img{
		width: 100%; 
		display: flex; 
		justify-content: center;
}

.cols-img > div{margin: 3px;position: relative;}

.cols-img img{max-width: 100%}


.imgGridRow {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.imgGridRow .col {width: 50%;}

.imgGridRow .col img{max-width: 100%;}
.imgGridRow .col > div{margin: 2px; position: relative; opacity: 0;}
.imgGridRow .col > div:hover .desc-general{padding: 15px;background-color: green;color: white;}


.processBanner > div{
	position: relative;
	margin: 3px;
	border-radius: 5px;
	overflow: hidden;
}

.processBanner img{
	max-width: 100%;
}


.cover{
	position: absolute; 
	background-color: white;
	width: 100%;
	height: 100%;
	
	z-index: 2;
}

.cover.aniSlideRight{
	animation: slideRight 1s;
	animation-fill-mode: forwards;
}

.cover.aniSlideTop{
	animation: slideTop 0.5s;
	animation-fill-mode: forwards;
}

@keyframes slideRight{from{width:100%} to {width:0}}
@keyframes slideTop{from{height:100%} to {height:0}}


.tabLineBar{
	height: 80%;
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	background-color: white;

	animation: hideTabLine 0.5s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
	
}

@keyframes hideTabLine{from{} to {height: 0} }


.learnMoreTitle{
	padding: 5px 10px; 
	background-color: lightgreen; 
	display: inline-block; 
	border-style: solid;
	border-color: green; 
	border-width: 0 0 3px 5px;
}

.learMoreBtn{
	display: inline-block; padding: 10px; cursor: pointer; color:green;
}

.learnMoreDesc{
	width:300px;
	padding:10px;
	color: white; 
	border-radius: 5px;
	border:solid white; 
	border-width:0 0 1px 2px
}

.learnMoreCaption{
	padding: 10px;
	background-color: green; 
	color: white;
	
	position:absolute;
	bottom:0;
	left: 50%;
	transform: translate(-50%,-50%);
}


.loader {
  border: 1px solid lightgreen;
  border-radius:50%;
  border-top: 5px solid green;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}









@media only screen and (max-width : 992px){

	.marginTopAllDevice{margin-top: 30px;}
	.moreBtnAllDevice{font-size: 14px;}

	h1{font-size: 30px;}
	.lgFontAllDevice{font-size: 30px;}
	.smFontAllDevice{font-size: 14px;}
	.tinyFontAllDevice{font-size: 12px;}

	.Page-Container.medium{
		max-width: 100%;
		margin-left: 0;
	}

	.pageContents.md{font-size: 14px;}

	/*** Slide ***/
	.imgSlide .s3-kd-container.md{
		width: 350px;
	}

	.imgSlide .slideTitle.md{
		font-size: 20px;
	}

	.imgSlide .slideContent.md, .imgSlide .slidePic.sm .caption{
		font-size: 16px;
	}

	.imgSlide .slidePic.md .sl2-img{
		height: 180px;
		width: 180px;
	}

	.imgSlide .slidePic.md .sl3-img{
		height: 120px;
		width: 120px;
	}

	.imgSlide .profile.md img{
	height: 140px;
	width: 140px;
	margin: 10px;
}

.imgSlide .bg-sl4.md{
	top: -150px;
	
	width: 550px; 
	height: 550px;
}

.banner .title.md{font-size: 16px;}
.btnContainer.md .tabBtn{font-size: 12px;}
.mailSection.md img{display: block;margin: auto;}


.md-marginTop10{margin-top: 10px;display: block!important;}
.md-marginTop10::after{
		content: "";
		border-width: 1px;
		border-style: solid; 
		border-color: transparent ;
	}

.title-LG-Bottom-SM-Center.md{
	font-size: 16px;
}

.card.md{width: 250px;}
.largeFont.md{font-size: 18px;}
.xLargeFont.md{font-size: 30px;}

.profileContainer{width: 70%;}




	
}

@media (max-width: 768px){
 
	.valignImg-MD-LG{position: static;top: 0;transform: translateY(0);}
	.valignTextBox{padding: 0 10px 0 10px;}
	.valignTextBox.left{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.valignTextBox.right{
		top: 100%;
		right: 50%;
		transform: translate(50%,-50%);
	}

	h1{font-size: 20px;}
	.lgFontAllDevice{font-size: 20px;}
	.smFontAllDevice{font-size: 13px;}
	.tinyFontAllDevice{font-size: 10px;}

	.proParagraphPos{top: -25px;}

	.mobileMarginTopBot50{margin: 100px 0 100px 0;}
	.mobileMarginTop30{margin-top: 30px;}
	.marginTopAllDevice{margin-top: 20px;}
	.mobilePad2px{padding: 2px;}
	.pageContents.sm{font-size: 13px;}
	.m-Center_d-Left.mobile{
		left: 5px;
		transform: translateY(-50%);
	}
	.moreBtnAllDevice{font-size: 12px;}
	.row-flex.reverseWrap{flex-flow: wrap-reverse;}

 	.imgSlide .s3-kd-container.sm{
		width: 180px;
	}

	.imgSlide .s3-kd-container-pos.sm{
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translateY(-50%);
	}

 	.imgSlide .slideTitle.sm{font-size: 14px;}
	.imgSlide .slideContent.sm, .imgSlide .slidePic.sm .caption{
		font-size: 13px;
	}

	.imgSlide .slidePic.sm .sl2-img{
		height: 110px;
		width: 110px;
	}

	.imgSlide .slidePic.sm .sl3-img{
		height: 90px;
		width: 90px;
	}

	.imgSlide .profile.sm img{
		height: 90px;
		width: 90px;
		margin: 2px;
	}

	.imgSlide .bg-sl4.sm{
		top: -200px;
		
		width: 500px; 
		height: 500px;
	}

	.banner .title.sm{font-size: 15px;/*bottom: -40px;*/padding: 10px;}
	.formContact{width: 100%;} 
	.tabContents .species.sm{padding: 10px;font-size: 16px;}

	.toolTips.sm{width: 80%;}

	.title-LG-Bottom-SM-Center.sm{
		left: 50%;
		bottom: 50%;
		font-size: 13px;
		transform: translate(-50%,50%);
	 }

	 .desc-general.sm {font-size: 13px;}

	 .col2-img img.sm{
		width: 160px;
		height: 160px;
	}

	.card.sm{width: 300px;}
	.largeFont.sm{font-size: 16px;}
	.xLargeFont.sm{font-size: 20px;}

	.profileContainer{width: 98%;}

	.footerMenu.sm{
		font-size: 12px;
	}

}
	


	



@media only screen and (min-width : 1500px){

	.Page-Container.exLarge{
		width: 1200px;
	}
	
}