@import url(https://fonts.googleapis.com/css?family=Trirong:800,300|Roboto:400,700,400italic|Noto+Sans:400;);
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);

*{
padding:0;
margin:0;
}

a{
text-decoration:none;
font-family:Trirong, serif;
color:rgba(242,108,100,1);
}

body{
background-color:rgba(14,18,50,1);
font-size:0.9em;
font-family:Roboto, sans-serif;
}

p{
font-weight:400;
font-size:1.02rem;
margin-bottom:30px;
line-height:2em;
color:rgba(255,255,255,1);
}


	h2{
	font-family:Trirong, serif;
	font-size:2.1rem;
	margin:30px 0;
	color:rgba(255,255,255,1);
	transition: all .3s ease;
	}

#Taipei{
background-color:rgba(29,68,153,1);
position:relative;
}

		#Taipei .ai{
		background-image:url(images/ai.svg);
		width:23px;
		height:23px;
		position:absolute;
		z-index:98;
		bottom: 0;
		right: 0;
		margin: auto;
		}
		
		.city div{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background-size:100%;
		background-position: center bottom;
		background-repeat: no-repeat;
		}
		
		
	@keyframes arrowanimate {
    from{
	line-height:0px;
	color:rgba(255,255,255,0);
    }
	
	
	50%{
    line-height:50px;
	color:rgba(255,255,255,1);
    }
	

    to{
    line-height:100px;
	color:rgba(255,255,255,0);
    }
	
  }

.arrow{
position:absolute;
height:50px;
width:50px;
bottom:5px;
left:0;
right:0;
font-size:1.5em;
margin:auto;
z-index:999;
text-align:center;
animation: arrowanimate 3s  infinite;
opacity:1;
}	

	.arrow.hidden{
	transition: all 1s ease-out;
	opacity:0;
	}
	
	

		
/*logo*/		
.logo{
position:relative;
width:100%;
text-align:center;
z-index:99;}

	.logo h1{
	font-family:Trirong, serif;
	font-weight:800;
	color:rgba(242,108,100,1);
	letter-spacing:-0.03em;
	}
	

	.logo img{
	position: absolute;
	margin: auto;
	}

	.logo .chn{
	font-family: 'cwTeXYen', sans-serif;
    font-size: 1em;
    position: absolute;
    color: rgba(163,165,167,1);
   	}
		
		.about .logo .chn{
		left:366px;}
		

#navigation, #navigation a{
color:rgba(255,255,255,1);
font-family:Roboto, sans-serif;
}		
		
#navigation nav{
z-index:101;
position:absolute;
}

  @keyframes animatenav {
    from{
    height:0;
    top:-75px;
	opacity:0.50;
    }
	
	25%{
    height:0;
    top:-50px;
	opacity:1;
    }

    to{
    top:0px;
    }
	
  }

#navigation.fixNavigation{
position:fixed;
left:0;
right:0;
top:0;
z-index:199;
transition: all 0.3s ease-out;
opacity:0.5;
}
	
	#navigation:hover{
	opacity:1;
	transition: all 0.3s ease-out;
	}

  #navigation ul{
  list-style:none;
  }

  
/*Gestion des clickers*/
.clicker, .NavFolio {
 position:relative;
 z-index:200;
cursor:pointer;
}

.IconClicker{
  width:50px;
  height:50px;
  display:block;
  float:right;
  right:0;
  overflow:hidden;
  position:relative;
  animation: animatenav 0.3s  forwards;
}


.IconClicker li{
position:absolute;
width:50px;
height:50px;
text-align:center;
line-height:50px;
background:rgba(14,18,50,0);
transition: background 0.3s ease;
}

	.open .IconClicker li{
	background:rgba(14,18,50,1);
	transition: background 0.3s ease;
	}


	.IconClicker li:after{
	top:0;
	left:0;
	width:50px;
	height:50px;
	position:absolute;
	font-size:1rem;
	text-align:center;
	line-height:50px;
	text-indent:0px;
	}
	
		.clicker .IconClicker  li:nth-child(1):after{
		content: "\2632";
		}
			
		.IconClicker  li:nth-child(3):after{
		content: "\d7";
		}
		
		.clicker .IconClicker li:nth-child(2):after{
		content: "\2630";
		}
		
		.NavFolio .IconClicker  li:nth-child(1):after{
		content: "\2237";
		}
			

		.NavFolio .IconClicker li:nth-child(2):after{
		content: "\3a";
		}
				
	/*icon textuel avec neutre, hover et close*/
	
	.IconClicker li:nth-child(1){
	opacity:1;
	}
	
		.IconClicker li:nth-child(2),.IconClicker li:nth-child(3){
		opacity:0;
		}
	
	.IconClicker:hover li:nth-child(2){
	opacity:1;
	}
	
		.IconClicker:hover li:nth-child(1), .IconClicker:hover li:nth-child(3){
		opacity:0;
		}
	
	.open .IconClicker li:nth-child(3){
	opacity:1;
	}
		.open .IconClicker li:nth-child(1),.open .IconClicker li:nth-child(2){
		opacity:0;
		}


/*Menu, nav ul*/
/* toutes les versions*/

nav li a{
  padding:0 20px;
  display:block;
}

/*Desk apres scroll et mob*/

.fixNavigation nav ul{
position:relative;
z-index:180;
}

nav > ul li{
height:45px;
line-height:45px;
font-weight:400;
transition: padding 0.2s ease-out;
border-bottom:1px solid rgba(3,6,28,1);
box-shadow:rgba(33,41,95,.8) 0px -1px 0px inset;
background-color:rgba(14,18,50,1);
}

	nav > ul li a:hover{
	padding:0 0 0 30px;
	transition: padding 0.2s ease-out;
	}
	


/*fixNavigation fermer*/
.fixNavigation nav.close{
  width:0;  
  right:-450px;
  transition: all 0.5s ease-out;
}

.fixNavigation nav{
right:0;
display:block;
top:50px;
transition: all 0.5s ease-out;
}

/*navigation entre les projets*/
.NavFolio{
animation: animatenav 0.3s  forwards;
display:none;
}

.NavFolio ul{
float:right;
}

.NavFolio ul li{
width:50px;
height:50px;
line-height:50px;
display:block;
float:left;
}

.Paged li:first-child{
float: right;
}

.Paged li:last-child{
float: left;
}

.fixNavigation .NavFolio{
display:block;
}

/*Clear*/
nav:after, .TimeLine:after, main:after{
content:"";
clear:both;
display:block;
}

/*Cover*/
.cover{
height:400px;
background:grey;
}


/*Menu folio*/
.MenuFolio{
position:fixed;
background-color:rgba(14,18,50,0.75);
transition: all 0.3s ease-out;
z-index:100;
top:0;
left:0;
right:0;
bottom:0;
height:auto;
}

.MenuFolio.close .content{
opacity:0;
transition: all 0.3s ease-out;
}

	.MenuFolio .content{
	padding:50px 0;
	overflow:auto;
	position:absolute;
	top:50px;
	left:0;
	right:0;
	bottom:0;
	opacity:1;
	transition: all 0.3s ease-out;
	}
	
		.MenuFolio .content .wrap{
		margin-bottom:50px;
		}

.MenuFolio.close{
top:-100%;
bottom:100%;
transition: all 0.3s ease-out;
}

/*Contact*/

label{
font-family:Trirong, serif;
font-weight:300;
font-size:1.1rem;
height:45px;
line-height:45px;
display:block;
width:100%;
color:rgba(255,255,255,1);
}

	input[type=text], input[type=email]{
	display:block;
	width:100%;
	font-size:1rem;
	height:45px;
	line-height:45px;
	padding:10px;
	box-sizing:border-box;
	font-family:roboto, sans-serif;
	font-weight:400;
	}
	
	textarea{
	display:block;
	width:100%;
	font-size:1rem;
	padding:10px;
	box-sizing:border-box;
	font-family:roboto, sans-serif;
	font-weight:400;
	height:150px;}
	
	input[type=text], input[type=email], textarea, input[type=submit]{
	margin-bottom:15px;
	}
	
	input[type=submit]{
	background:none;
	display:inline-block;
	position:relative;
	margin:auto;
	z-index:2;
	color:rgba(255,255,255,1);
	padding:0 20px;
	border:1px solid rgba(255,255,255,1);
	height:45px;
	border-radius:2px;
	overflow:hidden;
	cursor:pointer;
	font-size:1rem;
	}
	

/*footer*/

footer{
background:rgba(14,18,35,1);
font-family:Trirong, serif;
font-weight:300;
color:rgba(242,108,100,1);
font-size:1.125em;
}

			#About p.email{
			font-size:1.125em;
			font-family:Trirong, serif;
			color:rgba(242,108,100,1);
			}

	footer a, .email a{
	font-family:roboto, sans-serif;
	font-weight:400;
	color:rgba(255,255,255,1);
	font-size:1.063em;
	display:block;
	}

/*About*/

#About .left, #About .right{
color:rgba(255,255,255,1);
}

	.tag span{
	display:inline-block;
	background-color:rgba(18,23,63,1);
	padding:0 10px;
	margin:0 10px 10px 0;
	border-radius:2px;
	}
	
/*Social*/

.Social{
list-style:none;
border-top:1px solid rgba(3,6,28,1);
box-shadow:rgba(33,41,95,.8) 0px -1px 0px;
}

	.Social li{
	height:45px;
	line-height:45px;
	padding:0 10px;
	color:rgba(255,255,255,1);
	border-bottom:1px solid rgba(3,6,28,1);
	box-shadow:rgba(33,41,95,.8) 0px -1px 0px inset;
	}


#Folio p{
margin:30px 0;
}

/*Une boite aux lettre qui danse, o0 */
.bol{
background-image:url(images/bol.gif);
background-repeat:no-repeat;
background-position:center bottom;
height:290px;
width:100%;
}

#Folio li{
height:175px;
display:block;
float:left;
padding:0 0 1px 1px ;
box-sizing:border-box;
}

			#Folio li a{
			display:block;
			height:100%;
			overflow:hidden;
			position:relative;
			}


				#Folio li .type{
				color:rgba(255,255,255,1);
				position:absolute;
				font-size:0.7rem;
				font-family:Roboto, sans-serif;
				bottom:-170px;
				z-index:5;
				padding:10px;
				transition:all 0.5s;
				}
				
				#Folio li a:hover .type{
				bottom:40px;
				transition:all 0.5s;
				}
			
				#Folio li h3{
				position:absolute;
				bottom:-200px;
				z-index:5;
				padding:10px;
				transition:all 0.5s;
				}
				
				
				#Folio li  a:hover h3{
				bottom:15px;
				transition:all 0.5s;
				}
			
				#Folio li a:after{
				content:"";
				display:block;
				position:absolute;
				width:100%;
				background-color:rgba(14,18,50,0);
				top:200px;
				left:0;
				right:0;
				bottom:0;
				transition:all 0.5s;
				}
				
					#Folio li a:hover:after{
					background:yellow;
					top:0;
					z-index:1;
					background-color:rgba(14,18,50,0.7);
					transition:all 0.5s;
					}
#Folio li img{
display:block;
position:absolute;
margin:auto;
width:100%;
top:0;
left:0;
right:0;
bottom:0;
}
			


/*icones*/
@font-face {
  font-family: 'icone-ji';
  src:  url('icones/icone-ji.eot?j3ybkx');
  src:  url('icones/icone-ji.eot?j3ybkx#iefix') format('embedded-opentype'),
    url('icones/icone-ji.ttf?j3ybkx') format('truetype'),
    url('icones/icone-ji.woff?j3ybkx') format('woff'),
    url('icones/icone-ji.svg?j3ybkx#icone-ji') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"], .IconClicker, .arrow, .tools li:after{
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icone-ji' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
	

	section:after, #Folio ul:after, input[type=submit]:after{
	content:"";
	clear:both;
	display:block;
	}
	
/*Project*/

.cover{
height:400px;
background-size:cover;
background-position:center;
}

.presentation{
padding:60px 0;
}

	.presentation p{
	font-size:1.02rem;
	color:rgba(255,255,255,1);
	margin-bottom:30px;
	line-height:2em;
	}
	
	.presentation h1{
	font-family:Trirong, serif;
	font-size:3rem;
	color:rgba(255,255,255,1);
	transition: all .3s ease;
	}	
		/*name*/


			h1.name{
			font-family:Roboto, sans-serif;
			font-weight:400;
			position:fixed;
			z-index:198;
			top:0;
			left:0;
			font-size:1.02rem;
			height:50px;
			line-height:50px;
			width:calc(100% - 210px);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			padding:0 10px;
			box-sizing:border-box;
			animation: animatenav 0.3s  forwards;
			}

	.InformationsProject ul{
	list-style:none;
	}
	
		.InformationsProject li{
		font-size:1.02rem;
		color:rgba(255,255,255,1);
		margin:0 0 10px 0;
		}

/*Outils utilisés sur un projet (photoshop, illustrator, wordpress, marvel app, etc. */
.tools li{
width:40px;
height:40px;
float:left;
margin:0 10px 0 0;
overflow:hidden;
position:relative;
font-size:1.5em;
}

	.tools:after{
	content:"";
	clear:both;
	display:block;
	}
	

	.tools li:after{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	top:0;
	left:0;
	position:absolute;
	}
	
		.tools li.photoshop:after {
		content: "\70";
		}
		.tools li.illustrator:after {
		content: "\61";
		}
		.tools li.indesign:after{
		content: "\69";
		}
		.tools li.wordpress:after{
		content: "\77";
		}
	
.ProjectLink{
position:relative;
display:inline-block;
margin:20px 0 0 0;
}

	.ProjectLink a{
	display:block;
	font-family:Roboto, sans-serif;
	position:relative;
	margin:auto;
	z-index:2;
	color:rgba(255,255,255,1);
	padding:0 20px;
	border:1px solid rgba(255,255,255,1);
	height:45px;
	line-height:45px;
	border-radius:2px;
	overflow:hidden;
	}
	
	.ProjectLink span:after{
	content:"";
	display:block;
	position:absolute;
	right:0;
	left:0;
	bottom:0;
	margin:auto;
	background-color:rgba(18,23,63,1);
	border-radius:2px;
	z-index:1;
	animation: projectlinkr 0.3s forwards;
	}
	
	.ProjectLink a:hover ~ span:after{
	animation: projectlink 0.3s forwards;
	}
	
		 @keyframes projectlink {
			from{
			top:45px;
			background-color:rgba(220,111,125,0);
			}

			to{
			top:0px;
			}
		}
		
		 @keyframes projectlinkr {
			from{
			top:0px;
			}

			to{
			background-color:rgba(220,111,125,0);
			top:45px;
			}
		}


section.content{
padding:0;
}

main:last-child:after{
content:"";
display: block;
margin:0 0 60px 0;
}

/*Images en fullbackground*/
.panels div, .panels .imgfullscreen{
height: 1083px;
background-size: cover;
background-position: center;
}


.panels:last-child:after{
content:"";
clear: both;
display: block;
}z

#Folio .wrap:after{
content:"";
clear:both;
display:block;}

/*Timeline*/

.TimeLine{
position:relative;
list-style:none;
}

	.TimeLine h3{
	font-family:Trirong, serif;
	font-size:1.5rem;
	font-weight:800;
	margin:10px 0;
	line-height:1.7rem;
	}
	
		.TimeLine .Date{
		font-size:0.9rem;
		color:rgba(255,255,255,0.7);
		}
		
		.TimeLine .SocityName{
		font-size:1.05rem;
		color:rgba(255,255,255,0.5);
		margin:10px 0 20px 0;
		font-weight:400;
		display:block;
		}
		
		.TimeLine .JobDescription{
		margin:0;
		}

.TimeLine li{
clear:both;
position:relative;
z-index:2;
margin:0 0 60px 0;
}

	.TimeLine li.right{
	color:rgba(255,255,255,1);
	}
	
	
		.TimeLine li.right:before, .TimeLine li.left:before{
		content:"";
		display:block;
		position:absolute;
		background:rgba(243,18,26,1);
		width:4px;
		top:0;
		bottom:-60px;
		}
	
		
		.TimeLine li:last-child:before{
		display:none;
		}
	
	.TimeLine li.left{
	color:rgba(255,255,255,0.7);
	}


	.TimeLine li:after{
	content:"";
	display:block;
	width:14px;
	height:14px;
	border-radius:50%;
	position:absolute;
	top:0;
	}
	
		.TimeLine li.right:after{
		border:4px solid rgba(243,18,26,1);
		background-color:rgba(255,255,255,1);}
		
		.TimeLine li.left:after{
		background-color:rgba(243,18,26,1);
		width:16px;
		height:16px;
		}

	.wrap .TimeLine p{
	margin:0;
	line-height:1.5rem;
	}

@media screen and (min-width: 950px){
	.wrap{
	width:950px;
	margin:auto;
	position:relative;
	}
	
	section .miniabout.wrap div:nth-child(1){
	background-image:url(images/bol.gif);
	background-repeat:no-repeat;
	background-position:left bottom;
	height:290px;
	width:25%;
	}
	
	section .miniabout.wrap div:nth-child(2), section .miniabout.wrap div:nth-child(3){
	width:37%;
	}
	
	
}

@media screen and (max-width: 949px){
		
	section .miniabout.wrap div:nth-child(1){
	background-image:url(images/bol.gif);
	background-repeat:no-repeat;
	background-position:center;
	height:290px;
	display:block;
	width:100%;
	}
	
		
	section .miniabout.wrap div{
	width:50%;
	}
	
}


@media screen and (min-width: 1401px){
	.logo{
	top:280px;
	}
	
	#Taipei{
	height:1400px;}
	
	.ai{
	top: -10px;
    left: -120px;
	}
}

@media screen and (max-width: 1400px){
	#Taipei{
	height:1000px;}
	
	
	.logo{
	top:123px;
	}
	
	.ai{
	top: 10px;
    left: -40px;
	}
}

@media screen and (max-width: 1280px){
	.ai{
	top: 100px;
    left: -50px;
	}
	
	.logo{
	top:200px;
	}
}

@media screen and (max-width: 1024px){
	.ai{
	top: 380px;
    left: -20px;
	}
	
	
	section .miniabout.wrap div:nth-child(1){
	margin-bottom:30px;
	}	
	
	section#About .wrap div{
	padding:0;
	}
	
	
	.wrap p, section#About p:last-child{
	margin:0 20px 30px 20px;
	}
	
}
	
@media screen and (min-width: 769px){
	
.logo h1{
font-size:5.688em;
}

	.logo img{
	width:135px;
	height:165px;
	top: 53px;
	left: 0px;
	right: 77px;
	}
	
	.logo .chn{
	top: 102px;
    left: 315px;
    right: 0px;
    margin: auto;}
	

	
#Folio li{
width:33.33%;
}

	#Folio li:nth-child(10n-7){
	height:350px;
	float:right;
	padding:0 0 1px 1px ;
	}


	#Folio li:nth-child(10n-4){
	height:350px;
	float:left;
	}
	

		footer ul{
		margin:auto;
		text-align:center;
		}
	
	footer li{
	text-align:left;
	margin:0 20px 0 0;
	padding:20px;
	display:inline-block;
	box-sizing:border-box;
	}
	
		footer li:last-child{
		margin:0;}
	
	footer:after, nav:after, .tools:after{
	content:"";
	display:block;
	clear:both;
	}
	
			.city div:nth-child(1){
			background-image:url(images/taiwan/ville_plan_1.png);
			z-index:11;
			}
			
			.city div:nth-child(2){
			background-image:url(images/taiwan/ville_plan_2.png);
			z-index:10;
			}
			
			.city div:nth-child(3){
			background-image:url(images/taiwan/ville_plan_3.png);
			z-index:9;
			}
			
			.city div:nth-child(4){
			background-image:url(images/taiwan/ville_plan_4.png);
			z-index:8;
			}
			
			.city div:nth-child(5){
			background-image:url(images/taiwan/ville_plan_5.png);
			z-index:7;
			}

			.city div:nth-child(6){
			background-image:url(images/taiwan/ville_plan_tour.png);
			z-index:6;
			}
			
			.city div:nth-child(7){
			background-image:url(images/taiwan/ville_plan_6.png);
			z-index:5;
			}
			
			.city div:nth-child(8){
			background-image:url(images/taiwan/ville_plan_7.png);
			z-index:4;
			}
			
			.city div:nth-child(9){
			background-image:url(images/taiwan/ville_plan_8.png);
			z-index:3;
			}
			
			.city div:nth-child(10){
			background-image:url(images/taiwan/ville_plan_9.png);
			z-index:2;
			}
			
	section{
	padding:50px 0;
	}

/*Project*/

.AboutProject{
float:left;
width:50%;
}

.InformationsProject{
float:right;
width:calc(50% - 50px);
}

}

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

	#Taipei{
	height:800px;}
	
	.logo {
    top: 150px;
	}
	
	
.logo h1{
font-size:4.688em;
}

	.logo img{
	width:120px;
	top: 42px;
	left: 0px;
	right: 77px;
	}

	.logo .chn{
	top: 84px;
    left: 260px;
    right: 0px;
    margin: auto;}
	
		.ai{
		top:325px;
		left:20px;
		}

#Folio li{
width:100%;
}


	footer li{
	display:block;
	padding:10px 20px;
	height:40px;
	}
	
.city div:first-child{
	background-image:url(images/taiwan/full.jpg);
}

	section{
	padding:20px 0;
	}
	
		
		.panels div, .panels .imgfullscreen{
		height: 550px
		}

/*Project*/

.AboutProject{
width:100%;
}

.InformationsProject{
width:100%;
}

	.InformationsProject > ul{
	margin: 0 20px 30px 20px;
	}


}

@media screen and (min-width: 640px){
  
  /* .maximize n'est présent que si la largeur de l'écran est suppérieur à 640*/
  
 #navigation.maximize{
 position:relative;
 z-index:99;
 }
  
.maximize nav{
background:none;
}
  
.maximize nav > ul{
float:right;
}

.maximize nav > ul li{
float:left;
border-bottom:none;
box-shadow:none;
background:none
}
	.maximize nav > ul li a:hover{
	padding:60px 30px;
	}

.maximize nav li a{
font-weight:300;
font-size:1.250em;
display:block;
border:none;
box-shadow:initial;
padding:60px 30px;
background-color:rgba(220,111,125,0);
transition:background 0.5s;
box-sizing:initial;
}

	.maximize nav li a:hover{
	transition:background 0.5s;
	animation: hovermenu 3s  infinite;
	}
	
		 @keyframes hovermenu {
			from{
			background-color:rgba(220,111,125,0.9);
			}
		
			66%{
			background-color:rgba(220,111,125,1);
			}

			to{
			background-color:rgba(220,111,125,0.9);
			}
		}
		
	.maximize nav li a:active{
	background-color:rgba(220,111,125,0);
	}
  
.maximize nav.close{
  width:auto;  
  opacity:1;
  display:block;
  right:0;
  }
  
 .maximize nav{
  right:0;
  }

.maximize .clicker{
display:none;
}
  
  .maximize nav ul{ 
    width:auto;
    float:right;
  }
  
  .fixNavigation nav{
  width:450px;
  }
  
  /*Timeline*/
 .TimeLine li.right{
	float:right;
	width:calc(60% - 20px);
	}
	
	.TimeLine li.left{
	float:left;
	text-align:right;
	width:calc(40% - 20px);
	}
	
	.TimeLine li.right:before{
	left:-22px;
	}
	
	.TimeLine li.left:before{
	right:-22px;
	}
	
	.TimeLine li.left:after{
	right:-28px;
	}
	
	.TimeLine li.right:after{
	left:-31px;
	}
	
/*about*/
.left, .right{
width:calc(45% - 10px);
margin:0 10px;
}

	.left{
	float:left;
	}

	.right{
	float:right;
	}
	
.bol{
margin-bottom:158px;
}
    
/*image + text */

.alignleft{
float: left;
width:calc(50% - 10px);
background-color: yellow;
}

.alignright{
float: right;
width:calc(50% - 10px);
background-color: pink;
}
    
}

@media screen and (max-width: 639px){
  
 h2{
 margin:30px 0 30px 10px;
 }
  .fixNavigation nav{
  width:100%;
  }
  
	#navigation.fixNavigation{
	opacity:1;
	background:rgba(14,18,50,1);
	}
	
	#navigation.maximize{
	position:fixed;
	left:0;
	right:0;
	top:0;
	z-index:199;
	transition: all 0.3s ease-out;
	opacity:1;
	}
  
  .maximize nav.close{
  width:0;  
  right:-450px;
  transition: all 0.5s ease-out;
}

	h1.name{
	z-index:300;}
  
  nav{ 
     top:50px;
    width:100%;
    right:0;
    transition: all 0.5s ease-out;
  }
  
  nav > ul li a{
 height:50px;
 line-height:50px;
 }
  
 /*Timeline*/
 .TimeLine li.right, .TimeLine li.left{
width: calc(100% - 50px);
float:right;
padding:0 10px;
box-sizing:border-box;
}

	.TimeLine li.right:before, .TimeLine li.left:before{
	left:-22px;
	right:0;
	}
	
	.TimeLine li.left:after{
	left:-28px;
	}
	
	.TimeLine li.right:after{
	left:-31px;
	}
	
/*About*/
	.left, .right{
	width:100%;
	}

	.bol{
	margin:60px 0;
	}
    
/*folio */
    
.alignleft{
width:100%;
background-color: yellow;
}

.alignright{
width:100%;
background-color: pink;
}
}


@media screen and (max-width: 425px){
	#Taipei{
	height:500px;}
	
	.logo{
	top:130px;
	}
	
		.ai{
		top:150px;
		left:20px;
		}

	.logo h1{
	font-size:1.688em;
	}
	
	.logo img{
	width: 50px;
	top: 12px;
	left: -33px;
	right: 0px;
	}
	
	.logo .chn{
	top: 38px;
    left: 59px;
    right: 0px;
    margin: auto;}
	
			
	section .miniabout .wrap div:nth-child(1){
	background-image:url(images/bol.gif);
	background-repeat:no-repeat;
	background-position:center;
	height:290px;
	display:block;
	width:100%;
	}
	
		
	section .miniabout.wrap div{
	width:100%;
	}

}

@media screen and (max-width: 350px){
	#Taipei{
	height:400px;}
	
	.logo{
	top:130px;
	}
	
		.ai{
		top:150px;
		left:20px;
		}
	
}

.message{
	display:block;
	line-height:22px;
	width:100%;
	box-sizing: padding-box;
	padding:5px;
	position:relative;
	margin:0 0 10px 0;}

.message a{
	float:right;
	height:22px;
	margin:0 5px;
	line-height:22px;
}

.message.error{
	color:rgba(249,13,23,1);
	background-color:rgba(65,19,44,1);
	border:1px solid rgba(249,13,23,1);
}

.Contactform input[type="text"].error, .Contactform input[type="email"].error, .Contactform textarea.error {
	border:1px solid rgba(249,13,23,1);
}

.message.valide{
	color:rgba(88,163,0,1);
	background-color:rgba(8,30,22,1);
	border:1px solid rgba(88,163,0,1);
}