body { font-family:"Merriweather","times new roman", serif; font-size:62.5%; padding:0; margin:0; /*background:rgb(103, 194, 219);*/ }
* { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04); -webkit-font-smoothing: antialiased; }
a { text-decoration:none; color:rgb(0, 155, 217); font-weight:bold; }
a:hover { text-decoration:underline; color:rgb(62, 182, 80); }
.clear { clear:both; }

/** MAIN **/
#main {
	background-color: #ffffff;
}
.profile {
	position: fixed;
	top: 0;
	left: 0;
	padding: 10vw 0 10vw 10vw;
}
.profile img { width: 20vw; height: 20vw; min-width: 180px; min-height: 180px; }
.chat {
	padding: 10rem 10rem 10rem 32vw;
}
.chat_message {
	padding: 1rem;
	max-width: 640px;
	p {
		font-size: 1.1rem;
	}
	.chat_buttons {
		.chat_option {
			font-family: "Karla", sans-serif;
			font-size: 1rem;
			background-color: #e0e0e0;
			color: #000000;
			border: none;
			border-radius: 2rem;
			padding: 0.5rem 1rem;
			margin-right: 0.5rem;
			margin-bottom: 0.5rem;
		}
		.chat_option:hover {
			background-color: #949494;
			color: #ffffff;
			cursor: pointer;
		}
		.selected {
			background-color: #949494;
			color: #ffffff;
			cursor: default;
		}
		.selected:hover {
			cursor: default;
		}
		.notselected {
			cursor: default;
			background-color: #f2f2f2;
			border: #e0e0e0;
			color: #e0e0e0;
		}
		.notselected:hover {
			cursor: default;
			background-color: #f2f2f2;
			color:#e0e0e0;
		}
	}
}
.hidden {
	display: none;
}
/** SECTION **/
.section_header { padding:0px 0 10px 0;}
.section_image { padding:30px 0; text-align:center; height:120px; }
/* .layout_section:nth-child(2) { background:rgb(218, 196, 220); border-top:3px dotted rgb(250, 231, 238); border-bottom:3px dotted rgb(250, 231, 238); }
.layout_section:nth-child(2) .section_header { background:rgb(218, 196, 220); } */
.section_image img { margin:0 auto;}
.section_description { width:80%; max-width:600px; background:#ffffff; margin:10px auto 2px; padding:0px 20px 5px; font-size:1.6em; display: flex; }
.section_description > p { flex-grow: 1;}
.section_description > a { justify-content: end; width: 36px; height: 36px; }
.section_description > a img { width: 36px; height: 36px; }
/* .section_description:before { content:""; display:block; position:relative; top:-20px; left:40%; width: 0; height: 0; border-bottom: 20px solid #ffffff; border-left:20px solid transparent; } */
.section_description p:first-child { margin-top:0px; }
.section_header > .section_description { padding-top: 20px; text-align: center; }
.section_header > .section_description > p { margin-top: auto; }
.section_title { font-size:1.5em; font-weight:bold; }
.section_content, .slider_container { width:100%; max-width:640px; margin:0 auto;}
.slider_contents { width:100%; max-width:640px; height:700px; overflow:hidden; margin:0 auto; }
.slider .project { float:left; max-width:640px; }

/** DETAIL **/
.details, .project { font-family:'Karla',sans; font-size:0.8em; float:left; width:80%; max-width:600px; min-width:600px; height:600px; max-height:600px; background:rgba(255, 255, 255, 0.8); padding:20px; }
.project { height:700px; max-height:700px; }
.design_contents { width:100%; max-width:640px; height:600px; overflow:hidden; margin:0 auto; font-size:1.4em; }
.detail_image { text-align:center; background-size:cover; background-position: center center; display:block; }
.detail_description { display:block; }
.detail_image img { max-width:500px; max-height:500px; visibility:hidden; }
.detail_more_info { font-size:1.3em; }

.tile_contents { display: flex; flex-wrap: wrap; }
.tile_contents .details {  overflow: hidden; margin: 0 1rem 1rem 0; background-color: #efefef; width: 200px; height: 200px; min-width: 200px; min-height: 200px; }
.tile_contents .details .detail_image { background-color:#cccccc; width:200px; height:160px; }

/** DESIGN AND CODE SECTION **/
#designcode .design_contents .details { font-family:'Karla',sans; font-size:0.8em; width:270px; height:270px; min-width:270px; max-height:270px; max-width:270px; margin-bottom:10px; }
#designcode .design_contents .details:hover, #designcode .design_contents .details.selected, .tile_contents .details:hover, .tile_contents .details.selected { background-color: #dedede; }
#designcode .design_contents .details:nth-child(odd) { margin-right:10px; }
#designcode .design_contents .detail_image img { max-width:200px; max-height:200px; visibility:hidden; }
#designcode .design_contents .detail_image { background-color:#cccccc; width:280px; height:200px; }
#designcode .design_contents { overflow:visible; height:auto;  }
#designcode .design_contents .details a, .tile_contents .details a { text-decoration:none; color:#222222; }
#designcode .design_contents .details:hover a { color:#ffffff; }
#designcode .design_slider { width:310px; margin:0 auto; max-width:640px; }

/** ILLUSTRATION **/
#illustration .detail_image { background-color:#cccccc; cursor:pointer; width:600px; margin:auto; }
#illustration .detail_image_left { float:left; margin-right:10px; width:283px; height:400px; }
#illustration .detail_image_righttop { margin-left:293px; margin-bottom:10px; width:300px; height:193px; }
#illustration .detail_image_rightbottom { margin-left:293px; width:300px; height:194px;}
#illustration .detail_description { font-size: 0.75rem; }
.design_slider, .project_slider, .slider { width:10000px; position:relative; left:0px; top:0px; }
.slider_prev { position:relative; float:left; top:200px; left:-30px; z-index:1000; height:0px; }
.slider_next { position:relative; float:right; top:200px; left:30px; z-index:1000; height:0px; }

/** PROJECT PAGE **/
.layout_project .details p { font-size:2em; margin-top:0px; }
.layout_project .details { background:transparent; padding:0 0px 0 20px; height:auto; max-height:800px; max-width:270px; width:270px; min-width:270px; }
.layout_project .details:hover { background:transparent; }
.layout_project .section_content { background:#ffffff; max-width:600px; width:80%; padding:0 20px; }
.layout_project .section_description { padding-top:20px; margin-bottom:0px; }
.layout_project .details:nth-child(1) { border-right:1px dashed #cccccc; margin-right:0px; padding:0 20px 0 0; }
#lightbox-illustration .layout_project .details:nth-child(1) { border-right: none; }
.layout_project .section_header { padding:0px; }
.project_image { text-align:center; cursor:pointer;}
.project_image img { background-color:#cccccc; max-width:270px; max-height:270px; }
.layout_project .details .project_role { font-size:1.8em; }
.details h2 { font-weight:normal; font-size:1.8em; margin-bottom:0px; }
.details h3 { margin-top:2px; padding-top:0px; font-weight:normal; }
.layout_project .detail_more_info { font-size:1.0em; }
.project_image_caption { background-color:#ffffff; margin:0px 0px 20px; padding:5px 0px 0px; text-align:center; font-size:1.6em; font-style:italic;}
.layout_project { display:none; margin-bottom:20px; }
.layout_project .section_description { margin-top:0px; }
.layout_project .section_description:before { display:none; }
.layout_project .project .section_description, .layout_project .project .section_content { width:100%; }
.layout_project .slider_contents { max-height:700px; background-color:#fff; }
.layout_project .project { padding:0px; font-size:1em; }

/** PROJECT BACK FLOATER **/
#back { position:absolute; left:-50px; top:10px;}
#back:hover { left:-40px; }
#back img { transform:rotate(15deg); -webkit-transform:rotate(15deg); width:60%; height:60%; }
#back .bubble { background:#cdf5f5; padding:10px 10px; border-radius:4px; position:relative; top:-26px; left:-50px; font-size:1.1em; }
#back .bubble:before {content:"";width:10px;height:0px;border-right:10px solid #cdf5f5; border-bottom:10px solid transparent; position:absolute;left:-20px;top:15px;}

/** **/
#lightbox-overlay { opacity:0; display:none; position:fixed; left:0px; top:0px; background-color:rgba(0, 0, 0, 0.6); width:100%; height:100%; z-index:1001; transition: fadeIn 2s;}
#lightbox-image, .lightbox-image, #lightbox-video { display:block; margin:0 auto; position:relative; top:50%; transform: translateY(-50%); max-height:100vh; max-width:100vw; }
#lightbox-video { display:none; }

#lightbox-designcode, #lightbox-illustration { opacity:0; display:none; position:fixed; left:0px; top:0px; background-color:rgba(0, 0, 0, 0.6); width:100vw; height:100vh; z-index:1001; transition: fadeIn 2s;}

/** MEDIA QUERIES **/
@media screen and (max-width:1080px) {
	.profile img { width: 10vw; height: 10vw; min-width: 180px; min-height: 180px; }
	.chat { padding: 10rem 10rem 10rem 20rem; }
}
@media screen and (min-width:600px) {
	#designcode .design_slider { width:640px; }
	#designcode .design_contents .details { width:275px; height:275px; max-width:275px; }
}
@media screen and (max-width:800px) {
	.profile { position: static; text-align: center; padding: 20px 20px 0 20px; }
	.chat { padding: 0 20px 20px 20px; }
}
@media screen and (max-width:700px) {
	.layout_project .details { width:100%; max-width:640px; }
	.layout_project .details:nth-child(1) { border-right:0px; margin-right:0px; }
	.layout_project .details:nth-child(2) { padding-left:0px; }

	.slider_next, .slider_prev { display:none; }
	#illustration .design_contents { height:auto; }
	#illustration .slider, .project_slider { position:static; width:auto; }
	#illustration .details { float:none; width: 100%; margin:auto; height:auto; max-height:none; border-top:1px dashed rgb(103, 194, 219); }
	#illustration .details:first-child { border-top:0px; }
	#illustration .detail_image, #illustration .detail_image_left, #illustration .detail_image_righttop, #illustration .detail_image_rightbottom { width:100%; float:none; margin:0px auto 20px; }

	.layout_project div { box-sizing:border-box; }
	.layout_project .project { float:none; width:100%; margin:0 auto; height:auto; max-height:none; min-width:100%; border-top:1px dashed rgb(103, 194, 219); }
	.layout_project .project:first-child { border-top:0px; }
	#design_slider .details { display:none; }
	.layout_project .slider_container { height:auto; width: 100%; margin: 0;}
	.layout_project .slider_contents { height: 100vh; overflow-y: scroll; }
	.layout_project { display:block; }
	.layout_project .slider_next, .layout_project .slider_prev { visibility:hidden; }
	.lightbox-image, #lightbox-video { top:0px; transform:none; }
	#lightbox-designcode, #lightbox-illustration { width: 100vw; top: 0px; transform: none; }

	.section_description { width: auto; text-align: left !important; margin-top: 2px; }
	.detail_description { padding-bottom: 20px; }
	.tile_contents { justify-content: center; }
}