/* Project : TBK-Foundation Page
   Author: JohnnyCeL
   Created: 7 Nov 2020
   Description: Master CSS file
*/

/*****************************************

/*****************************************
Table Of Contents:

01 ) General Style
02 ) Door Animation & Style
03 ) Main Logo Section
04 ) Navbar Section
05 ) Section 1
06 ）Section 4
07 ）Section 5
08 ）Section 6
09 ）Section 7

******************************************/

/******************************/
/*     01. General Styles     */
/******************************/

body,
html {
    width: 100%;
	min-height: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.main-container {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: relative;
}

.content {
	width: 100%;
}

.hide-this-font {
	color: black;
}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.hide-this-font {
		display: none !important;
	}
}

.en-font {
	font-family: Helvetica, sans-serif !important;
}

/*************************************/
/*     03. Main Logo Section        */
/***********************************/

.main-logo-section {
	display: flex;
	align-items: center;
	position: relative;
	text-align: center;
}

.main-logo-background-img {
	width:100%;
}

.language-btn-section {
	display: flex;
	position: absolute;
	background-color: black;
	color: white;
	left: 85vw;
	font-weight: bold;
}

	.language-btn-section a {
		font-size: 1.2vw !important;
	}


/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.language-btn-section {
		display: flex;
		position: absolute;
		background-color: initial;
		color: black;
		left: 73vw;
	}
}

/* Screen Size For Smartphone */

/*	.language-btn-section a {
		font-size: 1.5vw !important;
	}*/
@media (max-width: 575.98px) {

	.language-btn-section .btn_eng {
		font-size: 1.6vw !important;
	}

	.language-btn-section .btn_cn {
		font-size: 1.8vw !important;
	}

}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.the-divider-language {
		margin-top: 7px !important;
	}
}

.btn {
	color: white !important;
}

.standartFont {
    font-family: Georgia, "Times New Roman", "KaiTi", "??", STKaiti, "????", serif;
}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
    .btn {
        color: black !important;
        font-size: 1.5vw;
        font-family: Georgia, "Times New Roman", "KaiTi", "??", STKaiti, "????", serif;
    }
}

/* Centered Img */
.main-logo-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25%;
}

.main-logo-section .img-fluid {
	max-height: 80%;
}

/*************************************/
/*     04. Navbar Section           */
/***********************************/

.navbar {
	background-color: black;
	text-align: center;
	padding: .2rem .1rem !important;
}

.navbar-nav .nav-item {
	text-align: center;
}

.nav-link-cn {
	font-weight: bold;
	color: #d17703 !important;
	font-size: 1.5vw;
	font-family: Georgia, "Times New Roman", "KaiTi", "??", STKaiti, "????", serif;
}

.nav-link-en {
	font-weight: bold;
	color: #d17703 !important;
	font-size: 1.5vw;
	font-family: Georgia, "Times New Roman", "KaiTi", "??", STKaiti, "????", serif;
}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.nav-link-en {
		font-weight: bold;
		color: #d17703 !important;
		font-size: 3.5vw !important;
		font-family: Georgia, "Times New Roman", "KaiTi", "??", STKaiti, "????", serif;
	}
}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.navbar-nav .nav-item .nav-link {
		font-weight: bold;
		color: #d17703 !important;
		font-size: 3.5vw;
		font-family: Georgia, "Times New Roman", "KaiTi", "??", STKaiti, "????", serif;
	}
}

.navbar-nav .nav-item .navlink-icon-img {
	padding: 0.6rem;
	margin-bottom: 0.1rem;
	width: 40px;
}

.navlink-icon-img-en {
	width: 40px;
	padding-right: 0.7rem;
	margin-bottom: 0.1rem;
	margin-top: 0.1rem;
}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.navbar-nav .nav-item .navlink-icon-img {
		display: none !important;
	}
}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.navbar-nav .nav-item .navlink-icon-img-en {
		display: none !important;
	}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	.navbar-nav .nav-item .navlink-icon-img {
		padding: 0.5rem;
		margin-bottom: 0.3rem;
		width: 25% !important;
	}
}

/*  Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
	.navbar-nav .nav-item .navlink-icon-img {
		padding: 0.5rem;
		margin-bottom: 0.3rem;
		width: 30% !important;
	}
}

.navbar-expand-md .navbar-nav .nav-link-cn {
	margin-right: 2.2vw !important;
	margin-left: 2.2vw !important;
}

.navbar-expand-md .navbar-nav .nav-link-en {
	margin-right: 1.5vw !important;
	margin-left: 1.5vw !important;
}


/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.navbar-expand-md .navbar-nav .nav-link {
		padding: 15px 0px 15px 0px;
		text-align: left !important;
	}
}

/* Screen Size For iPad */
@media (max-width: 767.98px) {
	.navbar-expand-md .navbar-nav .nav-link {
		padding: 15px 0px 15px 0px;
		text-align: left !important;
	}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	.navbar-expand-md .navbar-nav .nav-link {
		margin-right: 0.3vw !important;
		margin-left: 0.3vw !important;
	}
}

/*  Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
	.navbar-expand-md .navbar-nav .nav-link {
		margin-right: 0.8vw !important;
		margin-left: 0.8vw !important;
	}
}

.dropdown {
	text-align: center;
}

	.dropdown:hover > .dropdown-menu {
		display: block;
	}

.dropdown-menu {
	background-color: rgba(238, 194, 110, 0.8) !important;
	border: initial;
	border-radius: initial;
	text-align: center !important;
}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.dropdown-submenu .dropdown-menu {
		background-color: rgba(255, 255, 255, 0.8) !important;
	}
}

/* Screen Size For iPad */
@media (max-width: 767.98px) {
	.dropdown-submenu .dropdown-menu {
		background-color: rgba(255, 255, 255, 0.8) !important;
	}
}


.dropdown-menu a:hover {
	background-color: rgb(253, 177, 34) !important;
	opacity: 0.8;
}

.dropdown-menu a:focus {
	color: black;
	background-color: rgb(253, 177, 34) !important;
	opacity: 0.8;
}

.dropdown-menu .dropdown-item {
	font-weight: bold;
	font-size: 1.2vw;
	padding: 0.5rem 5rem 0.5rem 5rem;
	font-family: Georgia, "Times New Roman", "KaiTi", "??", STKaiti, "????", serif;
}

/* Screen Size For Smartphone */
@media (max-width: 575.98px) {
	.dropdown-menu .dropdown-item {
		font-weight: bold;
		font-size: 3.5vw;
		padding: 0.5rem 5rem 0.5rem 5rem;
		font-family: Georgia, "Times New Roman", "KaiTi", "??", STKaiti, "????", serif;
	}
}


.dropdown-menu-center {
	right: auto !important;
	left: 19% !important;
}

/* Screen Size For iPad */
@media (max-width: 768px) {
	.dropdown-menu-center {
		right: auto !important;
		left: 10% !important;
	}
}

.dropdown-menu .left {
	right: auto;
	left: 100%;
}

.dropdown-menu .dropdown-toggle:after {
	content: none;
}

@media only screen and (min-width: 1200px) {
	.navbar-nav li:hover > ul.dropdown-menu {
		display: block;
	}
}

@media only screen and (min-width: 992px) {
	.navbar-nav li:hover > ul.dropdown-menu {
		display: block;
	}
}

@media only screen and (min-width: 768px) {
	.navbar-nav li:hover > ul.dropdown-menu {
		display: block;
	}
}

.dropdown-submenu {
	position: relative;
}

	.dropdown-submenu > .dropdown-menu {
		top: 0;
		left: 100%;
		margin-top: -6px;
	}

.fa-youtube-play {
color: red !important;
}

.fa-facebook-square:before {
	content: "\f082";
	color: dodgerblue !important;
}

.e-mail-link {
color: black; /* blue colors for links too */
text-decoration: none; /* no underline */
}

.e-mail-link:hover {
	color: black !important; /* blue colors for links too */
	text-decoration: none !important; /* no underline */
	cursor: pointer !important;
}