@font-face
{
	font-family: Bonzai;
	src: url('bonzai.ttf') format('TrueType');
}
@font-face {
    font-family: 'FangZhengKangTi';
    src: local('FZKangTi-S07S'), local('FangZhengKangTi'),
        url('方正康体简体.woff2') format('woff2'),
        url('方正康体简体.woff') format('woff'),
		url('方正康体简体.ttf') format('TrueType')
		;
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}


html, *
{
	margin: 0;
	padding: 0;
}
html, body, #background
{
	height: 100%;
	width: 100%;
}
#background
{
	position: fixed;
	background: url('../pictures/landing@2x.png') bottom no-repeat;
	z-index: 2;
}
body.FHD #background
{
	background: url('../pictures/landing@2x.png') bottom no-repeat;
}
body
{
	background-color: #151618;
	color: white;
	font-family: arial, sans-serif;
	font-size: 0.9em;
}
h1
{
	font-family: bonzai, arial, sans-serif;
	font-size: 2.8em;
	margin-bottom: 5px;
	font-weight: lighter;
	line-height: 40px;
	text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}
html[lang="zh"]
{
	font-size: 1.05em;
}
[lang="zh"] #menu
{
	font-family: 仿宋, FangZhengKangTi, sans-serif;
}
[lang="zh"] h1
{
	font-family: 仿宋, FangZhengKangTi, sans-serif;
	padding-top: .2em;
	text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}
#catch
{
	font-size: 3em;
	font-weight: bolder;
}
#main
{
	width: 960px;
	margin: auto;
	position: relative;
	z-index: 10;
	opacity: 0.9;
}
#header
{
	background: url("../pictures/body_background_960x340.jpg") no-repeat;
	margin: auto;
	padding: 0 30px 10px 30px;
}
#content
{
       padding: 10px 0px;
       /*background-color: rgba(120,120,120,0.7);*/
      /*background-color: rgb(120,120,120);*/
       /*background-color: #151618;*/
}
	#profile, #formations
	{
		line-height: 22px;
		font-size: 1em;
	}
	#formations
	{
		margin-top: -2em;
	}

#language_picker
{
	list-style: none;
	display: inline-block;
	width: 200px;
	height: 50px;
}
#language_picker a
{
	color: inherit;
	text-decoration: none;
}
#language_picker li.active
{
	font-weight: bold;
}
#language_picker li:hover
{
	text-decoration: underline;
}
#language_picker li
{
	display: inline-block;
	margin-top: 20px;
	margin-left: 10px;
}
noscript
{
	font-size: 1.2em;
	background-color: #999;
	display: block;
	z-index: 10;
	opacity: 1;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	text-align: center;
}
#menu
{
	position: absolute;
	display: inline-block;
	right: 25px;
	font-family: bonzai, arial, sans-serif;
	font-size: 2em;
	background-color: rgba(255,255,255,0.2);
	border-radius: 30px;
	border-width: 2px;
	border-color: #FFF;
	border-style: solid;
	margin-bottom: -12px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: 0;
}
#menu a
{
	color: inherit;
	text-decoration: inherit;
}
#menu li
{
	list-style: none;
	float: left;
	line-height: 30px;
	padding: 10px 30px;
}
#menu li:hover
{
	background: url("../pictures/hover.png") bottom no-repeat;
}
.clear_float
{
	clear: both;
}
.clear_left
{
	clear: left;
}
.clear_right
{
	clear: right;
}
.float_left
{
	float: left;
}
#portrait
{
	border: 1px solid white;
	margin-right: 50px;
}
#profile div
{
	text-align: right;
}
.left
{
	float: left;
	width: 300px;
}
.right
{
	margin-left: 310px;
}
.box
{
	/*-webkit-border-radius: 7px;
	-moz-border-radius: 7px;*/
	border-radius: 7px;
	margin-bottom: 10px;
	padding: 0 10px 10px;
	background-color: #3c3d3f;
	color: white;
}
#experiences
{
	background: url("../pictures/chinese_calligraphy.png") no-repeat right bottom #3c3d3f;
	color: white;
}
#experiences ul
{
	margin-left: 20px;
	list-style-type: square;
}
#experiences li
{
	margin: 5px 0;
}
#content .left .box .category
{
	margin-top: 10px;
	overflow: hidden;
	/*border-top: 1px dotted white;*/
}
#content .left .box .category h2
{
	font-size: 1.2em;
	line-height: 22px;
}
#content .left .box .category .subject
{
	position: relative;
	font-size: 0.9em;
	line-height: 20px;
}
#content .left .box .category .subject .title
{
	width: 130px;
}
#content .left .box .category .subject .mark
{
	position: absolute;
	right: 0;
	width: 110px;
	height: 10px;
	border: 1px solid black;
	margin: 4px;
	background: url("../pictures/gradient.png") repeat-y;
	
}
#content .mark .cursor
{
	background: url("../pictures/cursor.png");
	width: 9px;
	height: 20px;
	position: absolute;
	top: -5px;
}
.cursor.l30{left: 30px;} .cursor.l40{left: 40px;} .cursor.l50{left: 50px;} .cursor.l60{left: 60px;} .cursor.l70{left: 70px;} .cursor.l80{left: 80px;} .cursor.l90{left: 90px;}
#content .left .box  .more
{
	cursor: pointer;
	width: 100px;
	height: 20px;
	margin: auto;
	text-align: center;
	background: url("../pictures/down.png") no-repeat right;
}
#content .right .box .experience
{
	border-top: 1px solid #4b4d4c;
	border-bottom: 1px solid #272b2a;
}
#content .right .box .company
{
	text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
	background-color: transparent;
	margin-top: 8px;
}
#content .right .box .date
{
	float: right;
}
#content .right .box .description
{
	margin: 15px 0;
}
#bottom
{
	height: 128px;
	color: #151618;
	background: url("../pictures/birds.png") no-repeat right #3c3d3f ;
	padding-bottom: 150px;
	position: relative; /* if #bottom not relative, not in the same scope than #sky thus #footer behind #sky, putting negative z-index to #sky makes #background bugging (fixed at the bottom then not moving when scrolling) */
	z-index: 1;
}
#bottom img
{
	height: 100%;
}
#footer
{
	padding-top: 30px;
	width: 960px;
	margin: auto;
	text-align: center;
}
#footer img
{
	height: inherit;
	border: none;
}
#footer span
{
	font-family: bonzai, arial, sans-serif;
	font-size: 1.8em;
	font-weight: bolder;
}
#works .work
{
	padding-top: 10px;
	position: relative;
}
#works .work .pictures
{
	padding: 10px 0;
	width: 350px;
}
#works .work .pictures img
{
	width: 100%;
	float: left;
}
#works .work .pictures img:hover
{
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}
#works .work h1
{
	text-align: center;
	padding-bottom: 5px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#works .work  .description
{
	margin-left: 350px;
	padding: 10px;
}
#works .work  .description h3
{
	text-decoration: underline;
	text-align: center;
}
#works .work .description div, #works .work .description ul, #works .work .description h4
{
	padding: 10px;
}
#fullscreen_picture2
{
	position: absolute;
	background-color: rgba(50,50,50,0.7);
	top: 0;
}
#fullscreen_picture
{
	background-color: rgba(50,50,50,0.7);
	top: 0;
	position: fixed;
	z-index: 12;
	height: 100%;
	width: 100%;
	-webkit-background-size: contain; /* pour Chrome et Safari */
	-moz-background-size: contain; /* pour Firefox */
	-o-background-size: contain; /* pour Opera */
	background-size: contain; /* version standardisée */
	background-repeat: no-repeat;
	background-position: center;
}
#fullscreen_picture:hover
{
	cursor: -moz-zoom-out;
	cursor: -webkit-zoom-out;
	cursor: zoom-out;
}
#fullscreen_picture img
{
	max-height: 100%;
	max-width: 100%;
	margin: auto;
}
#skills
{
	text-align: justify;
}
#skills h1
{
	text-align: center;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#skills h2
{
	text-align: center;
	margin-bottom: -3px;
}
#skills .box div
{
	margin: 10px;
}
#skills .box .left
{
	float: left;
	width: 50%;
}
#skills .box .left img
{
	float: left;
}
#skills .box .right img
{
	float: right;
}
#skills .box .right img.tech
{
	float: left;
}
.box_shadow
{
	box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}
#background_controls
{
	width: 250px;
	margin-top: -100px;
	margin-left: -75px;
}
#background_controls p
{
	display: none;
}

.control {
	transform: scale(.3);
  border: 12px solid #ffb160;
  border-radius: 50%;
  margin: 40px 25px;
  padding: 28px;
  width: 112px;
  height: 112px;
  font-size: 0;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
}
.control,
.control .cleft,
.control .cright,
.control:before {
  display: inline-block;
  vertical-align: middle;
  transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.control:before {
  content: "";
  height: 112px;
}
.control.pause .cleft,
.control.pause .cright {
  margin: 0;
  border-left: 40px solid #ffb160;
  border-top: 0 solid transparent;
  border-bottom: 0 solid transparent;
  height: 100px;
}
.control.pause .cleft {
  border-right: 23px solid transparent;
}
.control.play .cleft {
  margin-left: 20px;
  border-left: 50px solid #ffb160;
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-right: 0px solid transparent;
  height: 56px;
}
.control.play .cright {
  margin: -2px;
  border-left: 50px solid #ffb160;
  border-top: 29px solid transparent;
  border-bottom: 29px solid transparent;
  height: 0px;
}
.control:hover {
  border-color: #ff982d;
}
.control:hover .cleft,
.control:hover .cright {
  border-left-color: #ff982d;
}


#sky
{
	background-color: #151618;
	position: fixed;
	-webkit-animation: 
		sky 90s linear infinite,
		skycolor 45s cubic-bezier(0.9,0,0.1,1) alternate infinite;
	-moz-animation: 
		sky 90s linear infinite,
		skycolor 45s cubic-bezier(0.9,0,0.1,1) alternate infinite;
	-o-animation: 
		sky 90s linear infinite,
		skycolor 45s cubic-bezier(0.9,0,0.1,1) alternate infinite;
	animation: 
		sky 90s linear infinite,
		skycolor 45s cubic-bezier(0.9,0,0.1,1) alternate infinite;
	-webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}
#sky.running, #sky.running #sun, #sky.running #moon, #sky.running .stars
{
    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;
    -o-animation-play-state:running; 
    animation-play-state:running;
}
#sun, #moon
{
	width: 45px;
	height: 45px;
	border-radius: 45px;
	background-color: yellow;
	position: absolute;
}
#sun
{
	-webkit-animation: sun 90s linear infinite;
	-moz-animation: sun 90s linear infinite;
	animation: sun 90s linear infinite;
	box-shadow: 0 0 10px rgb(255,255,128);
}
#moon
{
	background: url('../pictures/FullMoon.png') grey;
	background-size: 100%;
	-webkit-animation: sky 90s linear reverse infinite;
	-moz-animation: sky 90s linear reverse infinite;
	-o-animation: sky 90s linear reverse infinite;
	animation: sky 90s linear reverse infinite;
	box-shadow: 0 0 2px #ccc, 0 0 50px #ccc;
}
.stars
{
	-webkit-animation: stars 45s cubic-bezier(0.9,0,0.1,1) alternate infinite;
	-moz-animation: stars 45s cubic-bezier(0.9,0,0.1,1) alternate infinite;
	-o-animation: stars 45s cubic-bezier(0.9,0,0.1,1) alternate infinite;
	animation: stars 45s cubic-bezier(0.9,0,0.1,1) alternate infinite;
	position: absolute;
	-webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}
@-webkit-keyframes sky
{
	from
	{
		-webkit-transform: rotate(-90deg);
	}
	to
	{
		-webkit-transform: rotate(270deg);
	}
}
@-webkit-keyframes skycolor
{
	0%
	{
		background-color: #151618;
	}
	100%
	{
		background-color: #77b5fe;
	}
}
@-webkit-keyframes stars
{
	0%
	{
		background-color: rgba(255,255,255,1);
	}
	100%
	{
		background-color: rgba(0,0,0,0);
	}
}
@-moz-keyframes sky
{
	from
	{
		-moz-transform: rotate(-90deg);
	}
	to
	{
		-moz-transform: rotate(270deg);
	}
}
@-moz-keyframes skycolor
{
	0%
	{
		background-color: #151618;
	}
	100%
	{
		background-color: #77b5fe;
	}
}
@-moz-keyframes stars
{
	0%
	{
		background-color: rgba(255,255,255,1);
	}
	100%
	{
		background-color: rgba(0,0,0,0);
	}
}
@-o-keyframes sky
{
	from
	{
		-o-transform: rotate(-90deg);
	}
	to
	{
		-o-transform: rotate(270deg);
	}
}
@-o-keyframes skycolor
{
	0%
	{
		background-color: #151618;
	}
	100%
	{
		background-color: #77b5fe;
	}
}
@-o-keyframes stars
{
	0%
	{
		background-color: rgba(255,255,255,1);
	}
	100%
	{
		background-color: rgba(0,0,0,0);
	}
}
@keyframes sky
{
	from
	{
		transform: rotate(-90deg);
	}
	to
	{
		transform: rotate(270deg);
	}
}
@keyframes skycolor
{
	0%
	{
		background-color: #151618;
	}
	100%
	{
		background-color: #77b5fe;
	}
}
@keyframes stars
{
	0%
	{
		background-color: rgba(255,255,255,1);
	}
	100%
	{
		background-color: rgba(0,0,0,0);
	}
}
#loading_pics_container
{
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 15;
	height: 100%;
	background-color: rgba(120,120,120,0.5);
	border-left: 4px solid grey;
	-webkit-transition: width 1s;
	-moz-transition: width 1s;
	transition: width 1s;
}
#loading_pics
{
	overflow-y: scroll;
	height: 100%;
	width: 100%;
	padding-right: 17px;
}
#loading_pics_container
{
	width: 0;
}
#loading_pics_container.opened
{
	width: 150px;
}
#button
{
	height: 97px;
	width: 33px;
	position: absolute;
	top: 50%;
	left: -33px;
	z-index: -1;
	background-image: url('../pictures/arrowbutton.png');
}
.opened #button 
{
	background-position: -33px;
}
#loading_pics img
{
	width: 150px;
}