/* Universal Selector will affect every HTML element on the page */
* { margin: 0; padding: 0; list-style: none; text-decoration: none; /* after these four, we now have an abs empty setting */ /*box-sizing: border-box;*/ /* for gallery */ 
	box-sizing: border-box; }

html, body { /*background-color: #F7F7F7;*/ /*background-color: #FFF7E3;*/ font-family: Muli-Regular; height: 100%; }


@font-face { font-family: NunitoSans-Bold; src: url(./font/NunitoSans-Bold.ttf); }
@font-face { font-family: NunitoSans-ExtraBold; src: url(./font/NunitoSans-ExtraBold.ttf); }
@font-face { font-family: NunitoSans-SemiBold; src: url(./font/NunitoSans-SemiBold.ttf); }
@font-face { font-family: NunitoSans-Regular; src: url(./font/NunitoSans-Regular.ttf); }
@font-face { font-family: NunitoSans-Light; src: url(./font/NunitoSans-Light.ttf); }
@font-face { font-family: Montserrat-Italic; src: url(./font/Montserrat-Italic.ttf); }
@font-face { font-family: Montserrat-Light; src: url(./font/Montserrat-Light.ttf); }
@font-face { font-family: Montserrat-ExtraLight; src: url(./font/Montserrat-ExtraLight.ttf); }
@font-face { font-family: Montserrat-Medium; src: url(./font/Montserrat-Medium.ttf); }
@font-face { font-family: Montserrat-Regular; src: url(./font/Montserrat-Regular.ttf); }
@font-face { font-family: Montserrat-Bold; src: url(./font/Montserrat-Bold.ttf); }
@font-face { font-family: Montserrat-MediumItalic; src: url(./font/Montserrat-MediumItalic.ttf); }
@font-face { font-family: PoiretOne-Regular; src: url(./font/PoiretOne-Regular.ttf); }
@font-face { font-family: Roboto-Light; src: url(./font/Roboto-Light.ttf); }
@font-face { font-family: Roboto-Regular; src: url(./font/Roboto-Regular.ttf); }
@font-face { font-family: Roboto-Medium; src: url(./font/Roboto-Medium.ttf); }
@font-face { font-family: Roboto-Bold; src: url(./font/Roboto-Bold.ttf); }
@font-face { font-family: Lato-Thin; src: url(./font/Lato-Thin.ttf); }
@font-face { font-family: KaiseiTokumin-Regular; src: url(./font/KaiseiTokumin-Regular.ttf); }



.non_footer { background-color: white; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); display: grid; grid-template-columns: 1fr; }

	/* when the view port is so huge and the content is too less, the footerContainer will be above hidden_backbutton,
	so the back button cannot be clicked. Because you can only click through the foodContainer, and not beneath it there is nothing.
	To solve this, you have to somehow make the nonfooter always occupies the whole viewport,
	then scroll down to show footer. This way the back button will still beneath the container.
	The solution is to use grid. But you only need to implement this method on page that has less content. */

	.back_curtain { width: 100%; height: 100vh; grid-row-start: 1; grid-column-start: 1; }
	.front_container { grid-row-start: 1; grid-column-start: 1; }  /* these two lines are children of non_footer. non_footer's height is decided by the higher child */

		.headerContainer { height: 40vh; width: 100%; }

			.header { width: 100%; text-align: center; }

				.headerInside { max-width: 600px; margin: 0 auto; padding: 0 20px; overflow: hidden; }
					.headerInside p.homeHeader { font-family: Lato-Thin; font-size: 50px; display: inline-block; margin-top: 25vh; margin-right: 0; margin-left: 0; }
					.headerInside p.homeHeader_chinese { font-family: KaiseiTokumin-Regular; font-size: 45px; display: inline-block; margin-top: 25vh; margin-right: 24px; margin-left: 0; }
					.headerInside p.otherHeader { font-family: Lato-Thin; font-size: 50px; margin-top: 25vh; }


			.subtitleOverlay { width: 100%; text-align: center; }

				.subtitleOverlayInside { max-width: 600px; margin: 0 auto; padding: 0 20px; overflow: hidden; }
					.subtitleOverlayInside p.subtitle { font-family: NunitoSans-Light; font-size: 20px; margin-top: 20px; }
				.subtitleOverlayInsideBlock { max-width: 600px; }



		.contentContainer { width: 100%; }

			.homeMenu { max-width: 500px; text-align: center; margin: 0 auto; padding: 7vh 20px 0 20px; justify-content: space-between; display: flex; }
				.homeMenu p { font-family: NunitoSans-Light; font-size: 18px; display: inline-block; margin: 80px 50px; letter-spacing: 0.6px; }

			.portfolioMenu { max-width: 550px; margin: 0 auto; padding: 60px 70px 0 70px; display: flex; /* align horizontal */ align-items: center; /* align vertical */ }
				.portfolioMenu a { font-family: NunitoSans-Light; font-size: 18px; display: inline-block; margin: 0; letter-spacing: 0.6px; }
				.portfolioMenu p { font-family: NunitoSans-Light; font-size: 15px; display: block; margin: 30px 0; letter-spacing: 0.6px; color: grey; }

			.portfolioContent { max-width: 600px; margin: 0 auto; padding: 90px 20px 0 20px; }

				.portfolioContent p.info { font-family: NunitoSans-Light; font-size: 18px; display: inline-block; margin: 5px 0; letter-spacing: 0.6px; }
				.portfolioContent b.info { font-family: NunitoSans-Light; font-size: 18px; display: inline-block; margin: 5px 0; letter-spacing: 0.6px; }
				.portfolioContent p.paragraph { font-family: NunitoSans-Light; font-size: 18px; margin: 30px 0 30px 0; line-height: 1.5em; letter-spacing: 0.6px; }
				.portfolioContent b { font-family: NunitoSans-SemiBold; font-size: 18px; font-weight: 500; margin: 30px 0 30px 0; line-height: 1.5em; letter-spacing: 0.6px; }
				.portfolioContent p.subtitle { font-family: NunitoSans-SemiBold; font-size: 18px; margin: 60px 0 30px 0; letter-spacing: 0.6px; }
				.portfolioContent p.reference { font-family: NunitoSans-Light; font-size: 15px; margin: 20px 0; letter-spacing: 0.6px; overflow-wrap: break-word; word-wrap: break-word; clear: both; }

				.section {  }

				.videoContainer { display: block; margin: 20px 0; }

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

				.galleryContainer { display: inline-block;	position: relative;	padding: 0 0px;	margin-left: auto;	margin-right: auto;	vertical-align:top;	border-radius: 3px; width: 49%; }
					.galleryContainer img { display: block; /* if not block, the img will be treated as text, there will be a gap between the img and the bottom boarder. because text needs a small amount of space underneath for descenders*/ /* vertical-align: bottom; this line will also fix it*/ width: 100%; height: auto; margin-top: 0; padding-top: 0; border-radius: 3px; }

				.contentContainerBackgroundimg { display: block; background-image: url("./img/background4.png"); height: 500px; background-position: center; background-repeat: no-repeat; background-size: contain; }


			.galleryContainer_2 { max-width: 1000px; margin:auto; }
				.galleryContainer_2 img {  }


			.aboutme { max-width: 600px; margin: 0 auto; padding: 60px 20px 0 20px; display: block; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ }
				.aboutme_textbox { margin: 0 auto; max-width: 560px; padding-top: 30px; }
				.aboutme p { font-family: NunitoSans-Light; font-size: 18px; display: block; margin: 30px 0; letter-spacing: 0.6px; }

				.aboutme_img { display: block; width: 100px; height: 100px; text-align: center; margin: auto; }
					.aboutme_img img { width: 100%; height: auto; }

		.slideshow-container_container { max-width:1000px; margin: auto; } /* set the limit of width for the ration below */
			/* Slideshow container, should be inside 'front_container' */
			.slideshow-container { width: 100%; position: relative; margin: auto; height: 0; padding-bottom: 45%;/* ratio  */ overflow: hidden; box-sizing: border-box; border-radius: 3px;
			  -moz-box-shadow: 0px 0px 3px 3px #ccc; -webkit-box-shadow: 0px 0px 3px 3px #ccc; box-shadow: 0px 0px 3px 3px #ccc; }

				/* .mySlides {display: none} */  /* here I don't understand why I can't have this line, but mySlides class has to be used in html side.  */

				.slideshow-container img {vertical-align: middle;}

				/* Next & previous buttons */
				.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: black; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }

				/* Position the "next button" to the right */
				.next { right: 0; border-radius: 3px 0 0 3px; }

				/* On hover, add a black background color with a little bit see-through */
				.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

				/* Caption text */
				.textbox { padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }

				.text { color: black; font-size: 15px; width: auto; display: inline-block; padding: 3px; background-color: yellow; }

				/* Number text (1/3 etc) */
				.numbertext { color: black; font-size: 16px; padding: 8px 12px; position: absolute; top: 0; }

				/* The dots/bullets/indicators */
				.dot { cursor: pointer; height: 10px; width: 10px; margin: 15px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }

				.active, .dot:hover { background-color: #717171; }

				/* Fading animation */
				.fade { animation-name: fade; animation-duration: 1.5s; }

				@keyframes fade { from {opacity: .4} to {opacity: 1} }		


.footerContainer { height: 150px; width: 100%; pointer-events: none;/* for clicking through footerContainer */ } 
	
	.footer { max-width: 500px; margin: 0 auto; padding: 0 20px; }
		.footer p { font-family: NunitoSans-Light; font-size: 16px; padding-top: 10vh; }


	.hidden_backbutton { height: 150px; width: 100%; position: fixed; bottom: 0; z-index: -2; background-color: white; pointer-events: auto;/* for clicking through footerContainer */ 
		display: flex; justify-content: center; align-items: center;/* for centering ver and hori */ }
		.hidden_backbutton p { font-family: KaiseiTokumin-Regular; font-size: 36px; }



.email { height: 100%; width: 100%; text-align: center; vertical-align: middle; display: flex; }
	.email_box { max-width: 300px; height: auto; display: block; margin: auto; }
	.email p { font-family: NunitoSans-Light; font-size: 18px; letter-spacing: 0.6px; margin-bottom: 10px; }




a.type1:link { color: black; cursor: pointer; text-decoration: none; }
a.type1:visited { color: black; text-decoration: none; }
a.type1:hover { color: #AC4949; text-decoration: underline; text-decoration-color: #AC4949; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
a.type1:active { /*color: #A43938;*/ text-decoration: underline; color: #FF0000; }

a.type2:link { color: black; cursor: pointer; text-decoration: none; }
a.type2:visited { color: black; text-decoration: none; }
a.type2:hover { color: #AC4949; text-decoration: none; text-decoration-color: #AC4949; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
a.type2:active { /*color: #A43938;*/ text-decoration: none; color: #FF0000; }

a.type3:link { color: black; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a.type3:visited { color: black; text-decoration: none; }
a.type3:hover { color: #AC4949; text-decoration: underline; text-decoration-color: #AC4949; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
a.type3:active { /*color: #A43938;*/ text-decoration: underline; color: #FF0000; }

a[href^="http"]::after,
a[href^="https://"]::after
{
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}


ul.style1 { display: list-item; margin: 0px 0px; font-family: NunitoSans-Regular; line-height: 1.5em; font-size: 15px; letter-spacing: 0.6px; }
ul.style1 li::before { /*color: red;*/ list-style-type: disc; display: inline-block; font-family: NunitoSans-Regular; width: 1.5em; margin-left: -1.5em; }
ul.style1 li { list-style-type: disc; margin: 0px 0px 10px 5px; }

ol.style2 { /*display: list-item;*/ counter-reset: li; margin: 0px 0px; font-family: NunitoSans-Regular; line-height: 1.5em; font-size: 15px; letter-spacing: 0.6px; }
ol.style2 li::before { content: counter(li) "."; /*color: red;*/ display: inline-block; font-family: NunitoSans-Regular; width: 1.5em; margin-left: -1.5em; }
ol.style2 li { counter-increment: li; margin: 0px 0px 10px 20px; }
ol.style2 li.style3 { counter-increment: li; margin: 5px 30px; font-size: 18px; }


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


@media only screen and (max-width: 1040px) { 
	.slideshow-container_container { margin:auto 20px; }
}


@media only screen and (max-width: 600px) { 
	.headerInside p.homeHeader { font-size: 8vw; }	/* here, the size need to be calculated according to the max-width */
	.headerInside p.homeHeader_chinese { font-size: 7vw; }
	.headerInside p.otherHeader { font-size: 8vw; }

	.prev, .next,.text {font-size: 11px}
	.textbox { display: none; }
	.dot { cursor: defult; height: 5px; width: 5px; margin: 0 1px; }

	.portfolioContent p.reference span { display: none; } /* here since overflow-wrap anywhere is not supported by ios until ios16, so I just hide the long links */
}

/*@media only screen and (max-height: 480px) { 
	.header p.homeHeader { font-size: 10vh; }
	.header b.homeHeader { font-size: 10vh; }
}*/

@media only screen and (max-width: 375px) { 
/*	.portfolioContent p.reference { font-size: 4vw; }*/
}


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

}