@font-face {font-family: 'Volte';src: url('webfonts/388CB6_0_0.woff2') format('woff2');font-weight: 600;}

@font-face {font-family: 'Volte';src: url('webfonts/388CB6_1_0.woff2') format('woff2');}

@font-face {font-family: 'Volte-Light';src: url('webfonts/388CB6_2_0.woff2') format('woff2');}

@font-face {font-family: 'Volte';src: url('webfonts/388CB6_3_0.woff2') format('woff2');font-weight: bold;}

@font-face {font-family: 'Volte-bold';src: url('webfonts/388CB6_4_0.woff2') format('woff2');}

@font-face {font-family: 'Volte-LightItalic';src: url('webfonts/388CB6_5_0.woff2') format('woff2');}

@font-face {font-family: 'Volte';src: url('webfonts/388CB6_6_0.woff2') format('woff2'); font-weight:bold;font-style: italic;}

@font-face {font-family: 'Volte';src: url('webfonts/388CB6_7_0.woff2') format('woff2');font-style: italic;}

@font-face {font-family: 'Volte-MediumItalic';src: url('webfonts/388CB6_8_0.woff2') format('woff2');}

@font-face {font-family: 'Volte-SemiboldItalic';src: url('../webfonts/388CB6_9_0.woff2') format('woff2');}

body {
	margin:0;
	padding:0;
	font-family: Volte;
	font-size:100%;
	background-color:#f8f8f8;
	color:#363638;
}

header {
	min-height:70px;
	box-shadow:1px 1px 10px #aaa;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:100;
	background-color:#fff;
}

img {
	display:block;
}

.logo {
	padding:7px 7px 7px 15px;
	float:left;
}

.logo img{
	height:25px;
	display:block;
	margin-top:17px;
}

.main-logo {
	position: absolute;
	left:50%;
	transform: translate3d(-50%,0,0);
	top:7px;
}

.main-logo img {
	height: 60px;
}

.menu {
	float:right;
}

.menu nav a, .menu nav span {
	color:#93772C;
	display:inline-block;
	padding:25px 20px;
	text-decoration:none;
	cursor: pointer;
}

.menu-burger {
	float:right;
	padding:7px 20px 7px 7px;
}

.menu-space {
	padding-top:70px;
}

.main-tab-container {
	padding: 30px 10px;
}

.tab-container {
	display:flex;
	justify-content:space-evenly;
	font-size:0.7em;
}

.tab-item {
	padding:0 0 5px 0;
	font-weight:bold;
	cursor:pointer;
}

.tab-active {
	color:#93772C;
	border-bottom:2px solid #93772C;
}

.sub-tab-container {
	display:flex;
	justify-content:center;
	font-size:0.7em;
	max-height: 0;
	overflow: hidden;
	transition: all 500ms ease-in-out;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
}

.sub-tab-container-active {
	max-height: inherit;
	margin-top: 10px!important;
}

.sub-tab-item{
	margin: 0 30px;
	padding:0 0 5px 0;
}

.sub-tab-active {
	color:#93772C;
	border-bottom:2px solid #93772C;
}

.main-title {
	margin:30px auto;
	width:70%;
	text-align:center;
	background-color:#ac996f;
}

.main-title h3 {
	color:#fff;
	padding:15px;
	font-weight:normal;
	font-size:1em;
}

.title {
	text-align:center;
	padding:0 20px;
}

.title h1 {
	font-size:1.3em;
	line-height:1.5em;
	color:#676767;
}

.title h1 span {
	color:#9D843F;
}

.our-work {
	margin-bottom:50px;
}

.work-item {
	background:#fff;
}

.work-item-container {
	/*padding:0 20px;*/
	margin-bottom:20px;
	position: relative;
}

.work-item-title {
	/*transform:translate3d(20px, -50%, 0);
	top:0;*/
	padding:20px;
	display:inline-block;
	bottom:calc(100% - 25px);
	position:absolute;
	left:20px;
	border:1px solid #eee;
	background-color:#fff;
}

.work-item-content {
	position:relative;
	padding:30px 20px 30px;
	background-color:#fff;
}

.work-item-content h1 {
	font-size:1.3em;
}

.work-main-content {
	display:none;
}

.arrow-next {
	position:absolute;
	right:10px;
	top:50%;
	transform: translate3d(0, -50%,  0);
	z-index: 50;
}

.arrow-prev {
	position:absolute;
	left:10px;
	top:50%;
	transform: translate3d(0, -50%, 0);
	z-index: 50;
}

.arrow-next img, .arrow-prev img {
	opacity: 0.3;
	height:30px;
	transition: all 500ms ease-in-out;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
}

.arrow-next img:hover, .arrow-prev img:hover {
	opacity: 1;
}

.arrow-prev img {
	transform: rotate(180deg);
}

.our-partners {
	margin-bottom:30px;
}

.lionlab {
	margin-bottom:50px;
}

.lionlab-title {
	text-align:center;
	margin:30px 0 50px;
}

.lionlab-title img {
	width:80%;
	display:inline;
}

.lionlab-title p {
	padding:0 20px;
}

.category-title {
	text-align:center;
}

.category-title h2 {
	font-weight:normal;
}

.class-item-content {
	padding:20px 20px 100px 20px;
}

.class-item-content h1 {
    font-size: 1.3em;
}

.class-time-date {
	padding:20px;
}

.class-time-date:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}

.class-date {
	float:left;
	font-weight:bold;
}

.class-time {
	float:right;
	font-weight:bold;
}

.class-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.bold {
	font-weight:bold;
}

.gold {
	color:#AC996F;
}

.owl-stage {
	display:flex;
	flex: 1 0 auto;
    height: 100%;
	align-items: stretch;
}

.work-slider .owl-stage {
	padding-bottom:10px;
}

.owl-carousel .owl-item {
	float:none;
	background-color:#fff;
	box-shadow:1px 2px 2px #eee;
}

.banner .owl-theme .owl-nav.disabled+.owl-dots {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate3d(-50%,0,0);
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
	background:#93772C;
}

.owl-nav span {
	font-size: 18px!important;
}

.banner-video {
	width: 100%;
}


.ph-banner {
	width:100%;
	min-height:600px;
	background-color:#aaa;
}

.ph-image {
	width:100%;
	min-height:300px;
	background-color:#aaa;
}

.ph-video {
	width:100%;
	min-height:200px;
	background-color:#aaa;
}

.sign-up {
	position:fixed;
	top:70px;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,0.9);
	text-align:center;
	display:none;
	z-index:90;
	animation: fade-out 500ms;
}

.sign-up-active {
	display:block;
	animation: fade-in 500ms;
}

.sign-up-container {
	padding:100px 50px;
	color:#fff;
}

.sign-up-title {
	margin-bottom:20px;
}

.sign-up-title h2 {
	margin-bottom: 5px;
}

.sign-up-title p {
	margin: 0;
}

.sign-up-others {
	padding:10px;
}

.sign-up-others span {
	text-decoration: underline;
	cursor: pointer;
}

.invalid-feedback {
	font-size: 0.8em;
	color:#C30E0E;
	padding-bottom: 10px;
}

#register-btn {
	text-decoration: underline;
	cursor:pointer;
}

#forgot-btn {
	padding-left: 10px;
	display: inline-block;
}

footer {
	text-align:center;
	background-color:#2C2B30;
	color:#fff;
	padding:50px 20px;
}

footer a{
	color: #93772C;
}

.textbox {
	border:1px solid #fff;
	background-color:rgba(80,80,80,0.6);
	width:100%;
	color:#fff;
	text-align:center;
	margin-bottom:10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding:10px;
}

.button {
	background: #AC996F;
	background: linear-gradient(90deg, rgba(147,119,45,1) 0%, rgba(171,152,109,1) 100%);
	padding:13px 10px;
	width:100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color:#fff;
	border:none;
}

.inactive-btn {
	background: #34322e;
	background: linear-gradient(90deg, rgba(50,50,50,1) 0%, rgba(200,200,200,1) 100%);
}

.popup-work {
	position:fixed;
	top:70px;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,0.9);
	text-align:center;
	display:none;
	z-index:90;
	animation: fade-out 500ms;
}

.popup-work-active {
	display:block;
	animation: fade-in 500ms;
}

.popup-work-bg-close, .sign-up-bg-close {
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index:-1;
}

.popup-work-close, .sign-up-close {
	position:absolute;
	top:0;
	right:0;
	padding:15px 10px;
}

.popup-work-video {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	background: url(../images/ph-desktop.jpg);
	background-position: center center;
	background-size: cover;
}

.popup-work-video img {
	width: 100%;
	position: absolute;
	top:0;
	left: 0;
	right: 0;
}

.popup-work-video iframe, .popup-work-video .fb-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.popup-work-video p{
	position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.popup-work-video p a {
	color:#fff!important;
}
 
.popup-work-content {
	margin:40px 20px;
	color:#fff;
	height:calc(100% - 80px);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow:auto;
}

.popup-next {
	position:absolute;
	bottom:0;
	right:0;
	padding:10px;
	color:#ECE2D3;
	cursor: pointer;
}

.popup-next span{
	line-height:20px;
}

.popup-next img {
	display:inline-block;
	vertical-align:middle;
}

.popup-prev {
	position:absolute;
	bottom:0;
	left:0;
	padding:10px;
	color:#ECE2D3;
	cursor: pointer;
}

.popup-prev span{
	line-height:20px;
}

.popup-prev img {
	display:inline-block;
	vertical-align:middle;
	transform:rotate(180deg);
}

.videoWrapper {
	position: relative;
	padding-bottom: 35.4%; /* 16:9 */
	height: 0;
}
.videoWrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hide {
	display: none!important;
}

.show {
	display: block!important;
}

.mshow {
	display:none!important;
}

#burger {
	width: 25px;
	height: 20px;
	display: block;
	position: relative;
	float: right;
	cursor: pointer;
	margin: 18px 0;
}

.burger-top {
	width: 100%;
	height: 2px;
	transform: translate3d(0, 0, 0) rotate(0deg);
	-ms-transform: translate3d(0, 0, 0) rotate(0deg);
	-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
	-moz-transform: translate3d(0, 0, 0) rotate(0deg);
	-o-transform: translate3d(0, 0, 0) rotate(0deg);
	display: block;
	background-color: #93772C;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
}

.burger-mid {
	width: 100%;
	height: 2px;
	transform: translate3d(0, 8px, 0) rotate(0deg);
	-ms-transform: translate3d(0, 8px, 0) rotate(0deg);
	-webkit-transform: translate3d(0, 8px, 0) rotate(0deg);
	-moz-transform: translate3d(0, 8px, 0) rotate(0deg);
	-o-transform: translate3d(0, 8px, 0) rotate(0deg);
	display: block;
	background-color: #93772C;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	border-radius: 3px;
}

.burger-bot {
	width: 100%;
	height: 2px;
	transform: translate3d(0, 16px, 0) rotate(0deg);
	-ms-transform: translate3d(0, 16px, 0) rotate(0deg);
	-webkit-transform: translate3d(0, 16px, 0) rotate(0deg);
	-moz-transform: translate3d(0, 16px, 0) rotate(0deg);
	-o-transform: translate3d(0, 16px, 0) rotate(0deg);
	display: block;
	background-color: #93772C;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
}

#burger div {
	transition: all 500ms ease-in-out;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
}

.animate-menu .burger-top {
	transform: translate3d(0, 8px, 0) rotate(45deg);
	-ms-transform: translate3d(0, 8px, 0) rotate(45deg);
	-webkit-transform: translate3d(0, 8px, 0) rotate(45deg);
	-moz-transform: translate3d(0, 8px, 0) rotate(45deg);
	-o-transform: translate3d(0, 8px, 0) rotate(45deg);
}

.animate-menu .burger-mid {
	transform: translate3d(0, 8px, 0) rotate(-45deg);
	-ms-transform: translate3d(0, 8px, 0) rotate(-45deg);
	-webkit-transform: translate3d(0, 8px, 0) rotate(-45deg);
	-moz-transform: translate3d(0, 8px, 0) rotate(-45deg);
	-o-transform: translate3d(0, 8px, 0) rotate(-45deg);
}

.animate-menu .burger-bot {
	opacity: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

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

	.logo img{
		height:13px;
		display:block;
		margin-top:25px;
	}

	.menu {
		position:fixed;
		top:70px;
		left:0;
		right:0;
		bottom:0;
		background-color:rgba(0,0,0,0.8);
		text-align:center;
		display:none;
		z-index:90;
		animation: fade-out 500ms;
	}

	.sub-tab-container div{
		margin: 0 10px;
	}

	.menu nav {
		padding-top:50px;
	}
	
	.menu nav a, .menu nav span{
		color:#fff;
		display:block;
	}
	
	.menu-active {
		display:block;
		animation: fade-in 500ms;
	}
	
	.menu-container {
		min-height:70px;
		box-shadow:1px 1px 10px #aaa;
		position:fixed;
		top:0;
		left:0;
		right:0;
		z-index:100;
		background-color:#fff;
	}
	
	.mshow {
		display:block!important;
	}
	
	.mhide {
		display:none;
	}

	/*.work-item {
		width:300px;
	}*/
}

@media only screen and (min-width: 600px) {
	.menu-burger {
		display:none;
	}
	
	.sign-up-container {
		position:absolute;
		top:50%;
		left:50%;
		transform:translate3d(-50%, -50%, 0);
	}
	
	.tab-container {
		max-width:600px;
		margin:0 auto;
		font-size:0.9em;
	}
	
	.sub-tab-container {
		max-width:500px;
		margin: 0 auto;
		cursor: pointer;
	}

	.main-title {
		max-width:600px;
	}
	
	.our-partners-container {
		max-width:1000px;
		margin:0 auto;
	}
	
	.lionlab-title img {
		max-width:600px;
	}

	.textbox {
		width: 400px;
	}

	.verify-content {
		max-width: 400px;
	}

	#loginBtn, #registerBtn, #verifyBtn, #forgotBtn{
		width: 400px;
	}
	
	.popup-work-content {
		display:flex;
		justify-content:space-evenly;
		align-items: center;
	}
	
	.popup-work-video-container {
		width:40%;
		transition: all 500ms ease-in-out;
		-webkit-transition: all 500ms ease-in-out;
		-moz-transition: all 500ms ease-in-out;
		-o-transition: all 500ms ease-in-out;
	}
	
	.popup-work-details {
		width:40%;
		transition: all 500ms ease-in-out;
		-webkit-transition: all 500ms ease-in-out;
		-moz-transition: all 500ms ease-in-out;
		-o-transition: all 500ms ease-in-out;
		opacity: 1;
		height:auto;
	}

	.popup-work-content-active {
		display: flex;
		align-items:baseline;
	}

	.popup-work-content-active .popup-work-video-container{
		width: 100%;
	}

	.popup-work-content-active .popup-work-details {
		width:0;
		height:0;
		opacity: 0;
		overflow: hidden;
	}
}