@import url("credit.css");
@import url("characters.css");

html {
}

body {
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-weight: 100;
}

body .background {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -10;
	height: 100vh;
	background-color: #222222;
}

body .background .background-block {
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: 1;
	opacity: 0;
	/*z-index: -9;*/
	/*display: none;*/
}

body .background .background-block[data-active="true"] {
	/*display: block;*/
	opacity: 1;
}

body .background .background-block .background-image {
	z-index: -8;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}

body .background .background-block .background-color {
	z-index: -8;
	width: 100%;
	height: 100%;
}

body #logo-tto {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 100;
}

body #logo-tto img {
	height: 30px;
	width: auto;
	display: block;
}

body #logo-tto #logo-tto-2nd {
	opacity: 0;
	visibility: hidden;
}

#background-block-guide .background-color {
	background-color: #222222;
}

#background-block-section-3 .background-image {
	background-image: url("../images/section-3-background.png");
}

.section {
	/*z-index: 1;*/
	position: relative;
	min-height: 100vh;
}

.sections .section .section-inner {
	opacity: 0;
	height: 100%;
}

.sections .section[data-active="true"] .section-inner {
	opacity: 1;
}

#section-guidelines, .section-title {
	height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/*margin-top: 200px;*/
}

#section-guidelines {
	height: 100vh;
	/*margin-top: 50vh;*/
}

#section-guidelines .section-inner {
	/*transition: opacity ease 1s;*/
}

#article-title,
#section-3 .section-inner {
	width: 100%;
	min-height: 100vh;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	opacity: 0;
	padding: 0 0em 5em 0;
	z-index: 30;
}

#article-title {
	padding-right: 9em;
}

#section-3 .section-inner {
	-ms-flex-pack: start !important;
	justify-content: flex-start !important;;
	-ms-flex-align: end !important;;
	align-items: flex-end !important;;
}

.video-section .section-inner {
	min-height: 25vh;
}

.title-section {
	/*min-height: 25vh;*/
}

.title-section .section-inner {
	height: 600px !important;
	opacity: 0;
}

.horizontal-scroll-section {
	min-height: 50vh;
}

#background-block-section-8 .background-image {
	background-image: url('../images/long_pic_1.jpg');
}

#background-block-section-26 .background-image {
	background-image: url('../images/longpic3.jpg');
}

#background-block-section-31 .background-image {
	background-image: url('../images/vuonrau.jpg');
}

#background-block-section-14 .background-image {
	background-image: url('../images/longpic2.jpg');
}

#background-block-section-33 .background-image {
	background-image: url('../images/nhagian.jpg');
}

#background-block-section-character {
	background-color: #000000;
}

#article-title img {
	width: 500px;
}

.display-immediately {
	transition: opacity 100ms;
	opacity: 1 !important;
}

.background-video {
	position: fixed;
	height: 100vh;
	/*top: 50%;*/
	left: 0;
	top: 0;
	/*padding-top: 56.25%;*/
	width: 100%;
	/*-webkit-transform: translateY(-50%);*/
	/*-ms-transform: translateY(-50%);*/
	/*transform: translateY(-50%);*/
	/*-webkit-transition: 2s opacity ease;*/
	/*transition: 2s opacity ease;*/
	opacity: 1;
	z-index: 1;
}

.background-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section.selected {
	opacity: 1;
}

#section-cover {
	/*height: 100vh;*/
}

#section-guidelines {
	color: #DDDDDD;
	font-size: 18px;
}

#section-guidelines h2 {
	font-weight: 400;
	text-transform: uppercase;
	font-family: "Playfair Display", serif;
	font-size: 2.5rem;
}

#section-guidelines p {
	font-weight: 100;
}

#section-guidelines img {
	width: 200px;
}

.floated-caption {
	font-weight: 100;
	width: 600px;
	padding: 26px 30px 20px 30px;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	color: #FFFFFF;
	font-size: 18px;
	line-height: 1.7;
	margin-left: 70px;
	letter-spacing: 0.5px;
}

.floated-caption p {
	margin-bottom: 0;
}

.floated-caption p.highlight {
	color: #F7B500;
}

.floated-caption.floated-caption-right {
	margin-right: 70px;
}

.transparent-caption {
	color: #FFFFFF;
	width: 400px;
	z-index: 9999;
	font-size: 24px;
	margin-left: 70px;
	transition: height ease 0.5s;
}

.transparent-caption small,
a.show-more-btn {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 14px;
	/*color: #CCCCCC;*/
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	color: #CFB078;
	margin-bottom: 1em;
	display: block;
}

.caption-readmore {
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 24px;
	/*margin-top: 20px;*/
	font-weight: 100;
	color: #CCCCCC;
	z-index: 9999;
	width: 40%;
	margin-left: 100px;
	display: none;
	letter-spacing: 0.5px;
}
.caption-readmore a {
	font-size: 18px;
	color: #CFB078;
}

.floated-caption a {
	font-size: 16px;
	color: #D7C945;
}

.gradient-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	/*background: rgb(0, 0, 0);*/
	/*background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 35%);*/
	background: rgb(0, 0, 0);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 17%, rgba(0, 0, 0, 0.5) 34%, rgba(0, 0, 0, 0) 50%);
	z-index: 10;
}

.black-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 11;
	display: none;
}

#background-block-section-23 .black-overlay {
	background-color: rgba(0, 0, 0, 0.5);
}


.block-transparent-caption-right .gradient-overlay {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 75%, rgba(0, 0, 0, 0.8) 100%);
}

.justify-content-end .transparent-caption {
	margin-right: 70px;
}


#scrollTrigger {
	position: absolute;
	top: 0;
	left: 0;
}

.video-controls, .volume-controls, .facebook-controls {
	position: fixed;
	top: 30px;
	right: 150px;
	z-index: 100;
	width: 50px;
	height: 50px;
	display: none;
}

.pie-wrapper:hover i.fa {
	color: #cccccc;
}
.pie-wrapper:hover .shadow {
	border-color: #cccccc;
}

.volume-controls {
	right: 90px;
	display: block;
}

.facebook-controls {
	right: 30px;
	display: block;
}

.video-controls.set-size,
.volume-controls.set-size,
.facebook-controls.set-size {
	font-size: 3em;
}

.facebook-controls a {
	display: block;
}

.pie-wrapper {
	height: 1em;
	width: 1em;
	float: left;
	position: relative;
}

.pie-wrapper .pie {
	height: 100%;
	width: 100%;
	clip: rect(0, 1em, 1em, 0.5em);
	left: 0;
	position: absolute;
	top: 0;
}

.pie-wrapper .pie .half-circle {
	height: 100%;
	width: 100%;
	border: 3px solid #3498DB;
	border-radius: 50%;
	clip: rect(0, 0.5em, 1em, 0);
	left: 0;
	position: absolute;
	top: 0;
}

.pie-wrapper .label {
	background: none;
	border-radius: 50%;
	bottom: 0.4em;
	color: #999999;
	display: block;
	font-size: 14px;
	left: 0.4em;
	position: absolute;
	right: 0.4em;
	text-align: center;
	top: 13px;
	font-weight: bold;
	cursor: pointer;
	z-index: 20;
}

.pie-wrapper .shadow {
	height: 100%;
	width: 100%;
	border: 3px solid #999999;
	border-radius: 50%;
}

.pie-wrapper .pie .half-circle {
	border-color: #666666;
}

.pie-wrapper .pie .left-side {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

.pie-wrapper .pie .right-side {
	display: none;
}

.centered-floating-caption {
	background-color: rgba(0, 0, 0, 0.85);
	padding: 50px 60px;
	width: 660px;
	color: #CCCCCC;
	font-weight: 100;
	font-size: 18px;
	text-align: justify;
	line-height: 1.7;
	letter-spacing: 0.5px;
}

.centered-floating-caption.no-background {
	background: transparent;
}

.centered-floating-caption.quote {
	color: #F7B500;
	font-style: italic;
}

.centered-floating-caption .citation {
	font-weight: 300;
	font-size: 80%;
	text-align: right;
}

.centered-floating-caption.big-font {
	font-size: 24px;
	line-height: 1.5;
}

.centered-floating-caption h2,
.floated-caption h2 {
	font-size: 36px;
	color: #D7C945;
	font-weight: 100;
	margin-bottom: 20px;
	line-height: 44px;
	text-align: center;
}

#section-credit {

}

#credit-nha-gian {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0 -320px;
	background-image: url('../images/credit-nha-gian-2.png');
	background-position: top center;
	background-size: cover;
}

/* CSS3 Arrow Animation */

.arrow-container {
	z-index: 100;
	position: fixed;
	width: 300px;
	bottom: 20px;
	left: 50%;
	font-weight: 100;
	font-size: 16px;
	color: #DDDDDD;
	text-align: center;
	display: none;
	cursor: pointer;
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-moz-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-moz-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	60% {
		-moz-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	60% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-moz-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	60% {
		-moz-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}

.arrow {
	margin: 0 auto;
	width: 20px;
	height: 20px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
	background-size: contain;
}

.bounce {
	-moz-animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
}

.character-section {
	min-height: 100vh;
}

.character-section .character-info {
	font-size: 18px;
	padding: 40px;
	text-align: justify;
	letter-spacing: 0.5px;
	color: #CCCCCC;
	background-color: rgba(34, 34, 34, 0.9);
	margin-bottom: 25vh;
}

.character-info h2 {
	font-family: 'Playfair Display', sans-serif;
	text-align: left;
}

.character-section .show-more-info {
	display: none;
	/*max-height: 400px;*/
	/*overflow: auto*/
}

/*.character-section a.show-more-btn {*/
/*	color: #F1694C;*/
/*	text-decoration: none;*/
/*	margin-bottom: 1em;*/
/*	display: block;*/
/*}*/


#background-block-section-character-1 .background-image {
	background-image: url("../images/characters/xuanbong.jpg");
}

#background-block-section-character-2 .background-image {
	background-image: url("../images/characters/lexuannam.jpg");
}

#background-block-section-character-3 .background-image {
	background-image: url("../images/characters/budinhdong.jpg");
}

#background-block-section-character-4 .background-image {
	background-image: url("../images/characters/kimvanmenh.jpg");
}

#background-block-section-character-5 .background-image {
	background-image: url("../images/characters/phamvanhuong.jpg");
}

#background-block-section-character-6 .background-image {
	background-image: url("../images/characters/vanhung.jpg");
}


.background-character .background-image {
	background-position: center bottom;
}

/*custom scrollbar*/
/* width */
::-webkit-scrollbar {
	width: 20px;
	/*height: 60px;*/
	background: transparent;
}

::-webkit-scrollbar * {
	background: transparent;
}


/* Track */
::-webkit-scrollbar-track {
	background: #111111 ;
	background-size: auto;
	width: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: url(../images/ship.png) no-repeat center bottom;
	height:100px;
	background-size: cover
	/*height: 60px;*/
}

::-webkit-scrollbar-track-piece:start {
	background: transparent url('../images/transparent.png') repeat-y !important;
}

::-webkit-scrollbar-track-piece:end {
	background: transparent url('../images/transparent.png') repeat-y !important;
}

/*!* Handle on hover *!*/
/*::-webkit-scrollbar-thumb:hover {*/
/*	background: url(../images/xneo.png)  no-repeat;;*/
/*	background-size: cover*/
/*}*/

.sp-sticky-header {
	display: none;
}
footer {
	display: none;
}
.bannerfooter1top {display: none}
.bannerfooter1 {display: none}

#credit-section p.scroll-to-readmore {
	text-align: center;
	color: #333333;
	text-transform: none;
	padding-top: 20px;margin-bottom: 50px
}