/**
 * @site domitien.asselindewilliencourt.fr
 * @version V1
 * @author Domitien Asselin de Williencourt
 * @link domitien.asselindewilliencourt.fr
 * @lastmodified 27/01/2013
 */
 

html
{
	font : 1em/1.25 'Rationale', calibri, Sans-Serif ;
	color : #4d4d4d ;
	width : 100% ;
	margin-top : 1% ;
}

@viewport {
   width: device-width;
   zoom: 1;
}

/* == animation introductive ==  */

#intro
{
	width : 100% ;
	height : 100% ;
	position : fixed ;
	top : 0 ;
	left : 0 ;
	z-index : -11111 ;
	background-color : #000000 ;
	color : #eeeeee ;
	opacity : 0 ;
}

@media screen and (min-width: 600px) {
	#intro
	{
		-webkit-animation: intro 6s linear 0s ;
		-ms-animation: intro 6s linear 0s ;
		-o-animation: intro 6s linear 0s ;
		animation: intro 6s linear 0s ;
	}

	#intro span
	{
		display : block ;
		margin : 5% ;
		backface-visibility : visible !important;
	}

	#intro1
	{
		font-size : 6em ;

		-webkit-animation: introa 6s linear 0s ;
		-ms-animation: introa 6s linear 0s ;
		-o-animation: introa 6s linear 0s ;
		animation: introa 6s linear 0s ;
	}

	#intro2
	{
		font-size : 4em ;
		text-align : center ;

		-webkit-animation: introb 6s linear 0s ;
		-ms-animation: introb 6s linear 0s ;
		-o-animation: introb 6s linear 0s ;
		animation: introb 6s linear 0s ;
	}

	#intro3
	{
		font-size : 8em ;
		text-align : right ;
		font-style : bold ;

		-webkit-animation: introc 6s linear 0s ;
		-ms-animation: introc 6s linear 0s ;
		-o-animation: introc 6s linear 0s ;
		animation: introc 6s linear 0s ;
	}
}

/* == fonctions ==  */

ul
{
	list-style : none ;
	position : relative ;
	margin : 0 ;
	padding : 0 ;
}

.flip
{
	-webkit-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.flip:hover, .flip:focus, .focus:active
{
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility: visible !important;
	-ms-backface-visibility: visible !important;
	-o-backface-visibility: visible !important;
	backface-visibility: visible !important;
	
	-webkit-transform: rotateY(360deg) ;
	-ms-transform: rotateY(360deg) ;
	-o-transform: rotateY(360deg) ;
	transform: rotateY(360deg) ;
}

.rotate
{
	-webkit-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.rotate:hover, .rotate:focus, .rotate:active
{
	-webkit-transform: rotate(10deg) ;
	-ms-transform: rotate(10deg) ;
	-o-transform: rotate(10deg) ;
	transform: rotate(10deg) ;
}

/* == layout ==  */

.boite
{
	width : 90% ;
	min-width : 355px ;
	max-width : 800px ;
	margin : auto ;
	padding : 5px ;
}

/* === profil ===  */

#profil
{
	position : absolute ;
	top : -20px ;
	left : 0px ;
}

#logo
{
	position : absolute ;
	top : 70px ;
	left : 204px ;
}

#presentation
{
	position : absolute ;
	top : 153px ;
	left : 134px ;
}

/* === liens ===  */

#blog
{
	position : absolute ;
	top : 305px ;
	right : 180px ;
}

#competences
{
	position : absolute ;
	top : 434px ;
	right : 258px ;
}

#experiences
{
	position : absolute ;
	top : 551px ;
	right : 182px ;
}

#citation
{
	position : absolute ;
	top : 422px ;
	right : 104px ;
}

#ecole
{
	position : absolute ;
	top : 538px ;
	right : 28px ;
}

#photo
{
	position : absolute ;
	top : 357px ;
	right : 53px ;
	opacity : 0.6 ;
}

#langue
{
	position : absolute ;
	top : 435px ;
	right : 0px ;
	opacity : 0.6 ;
}

/* === contact ===  */

#socialcourriel
{
	position : absolute ;
	top : 690px ;
	left : 82px ;
}

#socialtwitter
{
	position : absolute ;
	top : 730px ;
	left : 55px ;
}

#socialgoogleplus
{
	position : absolute ;
	top : 690px ;
	left : 28px ;
}

#sociallinkedin
{
	position : absolute ;
	top : 730px ;
	left : 0px ;
}

/* == compétences et expériences ==  */

#decor
{
	display : none ;
	position : fixed ;
	margin : 0 0 0 10px ;
}

#menumobile
{
	display : block ;
	margin : auto ;
}

@media screen and (min-width: 600px) {
	#decor {
		display : inline-block ;
	}

	#menumobile {
		display : none ;
	}

	.boite2
	{
		margin-left : 350px ;
		margin-right : 50px ;
	}
}

h2
{
	margin : auto ;
	margin-bottom : 2em ;

}

h2 img
{
	display : inline-block ;
	float : left ;
	margin-left : 15px ;
}

h2 span
{
	display : inline-block ;
	float : left ;
	margin-top : 25px ;
}

h2 img+span
{
	margin-left : 15px ;
	margin-top : 50px ;
}

.col
{
	width : 320px ;
	margin : 0 ;
	padding : 10px ;
	float : left ;
	text-align : center ;
}

h2+div
{
	clear : left ;
}

/* == timeline ==  */

.timeline
{
	position : relative ;
	background-color : #444444 ;
	height : 2px ;
	padding : 0 ;
	margin : 30px 0 ;
	z-index : -1 ;
}

.timetext
{
	display : inline-block ;
	position : absolute ;
	margin-top : -41px ;
	left : 1% ;
	padding : 0 2px ;
	background-color : #ffffff ;
	color : #000000 ;
}

.timetext span
{
	opacity : 0 ;
	display : block ;
	width : 300px ;
	position : fixed ;
	top : 110px ;
	right : 20px ;
	border : 1px dashed #000000 ;
	background-color : #eeeeee ;
	padding : 10px ;
	z-index : 100 ;

	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-ms-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
}

.timetext:hover span
{
	opacity : 1 ;
}

#terminale
{
	width : 5% ;
}

#ucp
{
	width : 40% ;
	margin-left : 5% ; 
}

#wsf
{
	width : 55% ;
	margin-left : 45% ;
}

#temps
{
	width : 100% ;
	margin-left : 0 ;
	background-color : #000000 ;
}

#agse
{
	width : 100% ;
	margin-left : 0 ; 
}

#ssf
{
	width : 69% ;
	margin-left : 31% ; 
}

#freelance
{
	width : 45% ;
	margin-left : 55% ; 
}

#messager
{
	width : 45% ;
	margin-left : 55% ; 
}

.fleche
{
    width : 0 ;
    height : 0 ;
    float : right ;
    margin : -41px -11px 0 0 ;
    border : 10px solid transparent ;
    border-left : 10px solid #222222 ;
}

.debut
{
	width : 2px ;
	height : 20px ;
	float : left ;
	background-color : #222222 ;
    margin : -41px -11px 0 0 ;
}

.fin
{
	width : 2px ;
	height : 20px ;
	float : right ;
	background-color : #222222 ;
    margin : -41px 0 0 0 ;
}

#conforama
{
	margin-left : 2% ;	
}

#accord
{
	margin-left : 6% ;	
}

#playtime
{
	margin-left : 8% ;	
}

#a2009
{
	margin-left : 2% ;
}

.temps
{
	display : inline-block ;
	position : absolute ;
	z-index : 10 ;
	margin-top : -41px ;
	padding : 0 2px ;
	background-color : #ffffff ;
	color : #000000 ;
}

#t2009
{
	margin-left : 5% ;
}

#a2010
{
	margin-left : 12% ;
}

#t2010
{
	margin-left : 15% ;
}

#a2011
{
	margin-left : 22% ;
}

#t2011
{
	margin-left : 25% ;
}

#a2012
{
	margin-left : 32% ;
}

#t2012
{
	margin-left : 35% ;
}

#a2013
{
	margin-left : 72% ;
}

#t2013
{
	margin-left : 75% ;
}

#forum
{
	margin-left : 1% ;
}

#radiojmj
{
	margin-left : 26% ;
}

#session2011
{
	margin-left : 1% ;
}

#session2012
{
	margin-left : 20% ;
}

#chartedaw
{
	margin-left : 1% ;
}

#blogveille
{
	margin-left : 25% ;
}

#chartemessager
{
	margin-left : 1% ;
}

.cercle
{
	display : inline-block ;
	position : absolute ;
	width : 10px ;
	height : 10px ;
	background-color : #ffffff ;
	border : 3px solid #666666 ;
    margin-top : -39px ;

	-webkit-border-radius: 25px ;
	-khtml-border-radius: 25px ;
	-moz-border-radius: 25px ;
	border-radius : 25px ;

	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-ms-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
}

.cercle:hover
{
	background-color : #000000 ;
}

.cercle p
{
	opacity : 0 ;
	display : block ;
	width : 300px ;
	position : fixed ;
	top : 100px ;
	right : 20px ;
	border : 1px dashed #000000 ;
	background-color : #eeeeee ;
	padding : 10px ;
	z-index : 100 ;

	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-ms-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
}

.cercle:hover p
{
	opacity : 1 ;
}

.barre
{
	display : inline-block ;
	position : absolute ;
	width : 2px ;
	height : 15px ;
	background-color : #000000 ;
	border : 0 ;
    margin-top : -39px ;
}

/** --- @section = Animation webkit --- */

@-webkit-keyframes intro
{
	from
	{
		z-index : 11111 ;
		opacity : 1 ;
	}
	85%
	{
		opacity : 1 ;	
	}
	100%
	{
		opacity : 0 ;
		z-index : 11111 ;		
	}
}

@-webkit-keyframes introa
{
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}

	30% {
		opacity: 1;
		-webkit-transform: translateX(4%);
	}

	40% {
		-webkit-transform: translateX(-2%);
	}

	35% {
		-webkit-transform: translateX(0);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@-webkit-keyframes introb
{
	from
	{
		opacity : 0 ;
	}
	35%
	{
		opacity : 0 ;
		-webkit-transform-origin: center center;
		-webkit-transform: scale(0);
	}
	40%
	{
		opacity : 1 ;
		-webkit-transform: scale(2) rotate(365deg);
	}
	50%
	{
		-webkit-transform: scale(1) rotate(0deg);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@-webkit-keyframes introc
{
	from
	{
		opacity : 0 ;
	}
	40%
	{
		opacity : 0 ;
		-webkit-transform: translateX(100%) skewX(-30deg) ;
	}
	50%
	{
		opacity : 1 ;
		-webkit-transform: translateX(-30%) skewX(30deg) ; 
	}
	52%
	{
		-webkit-transform: translateX(0%) skewX(-15deg) ;
	}
	55%
	{
		-webkit-transform: translateX(0%) skewX(0deg) ;
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}


/** --- @section = Animation moz --- */

@-moz-keyframes intro
{
	from
	{
		z-index : 11111 ;
		opacity : 1 ;
	}
	85%
	{
		opacity : 1 ;
	}
	100%
	{
		opacity : 0 ;
		z-index : 11111 ;		
	}
}

@-moz-keyframes introa
{
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}

	30% {
		opacity: 1;
		-moz-transform: translateX(4%);
	}

	40% {
		-moz-transform: translateX(-2%);
	}

	35% {
		-moz-transform: translateX(0);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@-moz-keyframes introb
{
	from
	{
		opacity : 0 ;
	}
	35%
	{
		opacity : 0 ;
		-moz-transform-origin: center center;
		-moz-transform: scale(0) rotate(365deg);
	}
	40%
	{
		opacity : 1 ;
		-moz-transform: scale(2) rotate(365deg);
	}
	50%
	{
		-moz-transform: scale(1) rotate(0deg);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@-moz-keyframes introc
{
	from
	{
		opacity : 0 ;
	}
	40%
	{
		opacity : 0 ;
		-moz-transform: translateX(100%) skewX(-30deg) ;
	}
	50%
	{
		opacity : 1 ;
		-moz-transform: translateX(-30%) skewX(30deg) ; 
	}
	52%
	{
		-moz-transform: translateX(0%) skewX(-15deg) ;
	}
	55%
	{
		-moz-transform: translateX(0%) skewX(0deg) ;
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}


/** --- @section = Animation ms --- */

@-ms-keyframes intro
{
	from
	{
		z-index : 11111 ;
		opacity : 1 ;
	}
	85%
	{
		opacity : 1 ;	
	}
	100%
	{
		opacity : 0 ;
		z-index : 11111 ;		
	}
}

@-ms-keyframes introa
{
	0% {
		opacity: 0;
		-ms-transform: translateX(-2000px);
	}

	30% {
		opacity: 1;
		-ms-transform: translateX(4%);
	}

	40% {
		-ms-transform: translateX(-2%);
	}

	35% {
		-ms-transform: translateX(0);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@-ms-keyframes introb
{
	from
	{
		opacity : 0 ;
	}
	35%
	{
		opacity : 0 ;
		-ms-transform-origin: center center;
		-ms-transform: scale(0) rotate(365deg);
	}
	40%
	{
		opacity : 1 ;
		-ms-transform: scale(2) rotate(365deg);
	}
	50%
	{
		-ms-transform: scale(1) rotate(0deg);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@-ms-keyframes introc
{
	from
	{
		opacity : 0 ;
	}
	40%
	{
		opacity : 0 ;
		-ms-transform: translateX(100%) skewX(-30deg) ;
	}
	50%
	{
		opacity : 1 ;
		-ms-transform: translateX(-30%) skewX(30deg) ; 
	}
	52%
	{
		-ms-transform: translateX(0%) skewX(-15deg) ;
	}
	55%
	{
		-ms-transform: translateX(0%) skewX(0deg) ;
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}


/** --- @section = Animation opera --- */

@-o-keyframes intro
{
	from
	{
		z-index : 11111 ;
		opacity : 1 ;
	}
	85%
	{
		opacity : 1 ;
	}
	100%
	{
		opacity : 0 ;
		z-index : 11111 ;		
	}
}

@-o-keyframes introa
{
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}

	30% {
		opacity: 1;
		-o-transform: translateX(4%);
	}

	40% {
		-o-transform: translateX(-2%);
	}

	35% {
		-o-transform: translateX(0);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@-o-keyframes introb
{
	from
	{
		opacity : 0 ;
	}
	35%
	{
		opacity : 0 ;
		-o-transform-origin: center center;
		-o-transform: scale(0) rotate(365deg);
	}
	40%
	{
		opacity : 1 ;
		-o-transform: scale(2) rotate(365deg);
	}
	50%
	{
		-o-transform: scale(1) rotate(0deg);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@-o-keyframes introc
{
	from
	{
		opacity : 0 ;
	}
	40%
	{
		opacity : 0 ;
		-o-transform: translateX(100%) skewX(-30deg) ;
	}
	50%
	{
		opacity : 1 ;
		-o-transform: translateX(-30%) skewX(30deg) ; 
	}
	52%
	{
		-o-transform: translateX(0%) skewX(-15deg) ;
	}
	55%
	{
		-o-transform: translateX(0%) skewX(0deg) ;
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

/** --- @section = Animation --- */

@keyframes intro
{
	from
	{
		z-index : 11111 ;
		opacity : 1 ;
	}
	85%
	{
		opacity : 1 ;	
	}
	100%
	{
		opacity : 0 ;
		z-index : 11111 ;		
	}
}

@keyframes introa
{
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	30% {
		opacity: 1;
		transform: translateX(4%);
	}

	40% {
		transform: translateX(-2%);
	}

	35% {
		transform: translateX(0);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@keyframes introb
{
	from
	{
		opacity : 0 ;
	}
	35%
	{
		opacity : 0 ;
		transform-origin: center center;
		transform: scale(0) rotate(365deg);
	}
	40%
	{
		opacity : 1 ;
		transform: scale(2) rotate(365deg);
	}
	50%
	{
		transform: scale(1) rotate(0deg);
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}

@keyframes introc
{
	from
	{
		opacity : 0 ;
	}
	40%
	{
		opacity : 0 ;
		transform: translateX(100%) skewX(-30deg) ;
	}
	50%
	{
		opacity : 1 ;
		transform: translateX(-30%) skewX(30deg) ; 
	}
	52%
	{
		transform: translateX(0%) skewX(-15deg) ;
	}
	55%
	{
		transform: translateX(0%) skewX(0deg) ;
	}
	80%
	{
		opacity : 1;
	}
	95%
	{
		opacity : 0 ;
	}
	100%
	{
		opacity : 0 ;
	}
}