/*@import url(http://fonts.googleapis.com/css?family=Ubuntu:regular,bold);
@import url(http://fonts.googleapis.com/css?family=Syncopate);
@import url(http://fonts.googleapis.com/css?family=Play:400,700);
@import url(http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,900);*/

/* Normalize */
body{font-family: Georgia, "Times New Roman", Times, serif;}
html, body {padding-left:0; padding-right:0; margin: 0;}
html {
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
article, aside, details, figcaption, figure, footer,
header, hgroup, main, menu, nav, section, summary {display: block;}
[hidden], template {display: none;}
a {background-color: transparent;}
a:active, a:hover {outline: 0;}
b, strong {font-weight: bold;} /* Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img {border: 0;}
svg:not(:root) {overflow: hidden;}
hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h1, h2 {margin: 0;}
table {border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}


/* ------------------------------------------------------------------------ */
/* generic                                                                  */
/* ------------------------------------------------------------------------ */

html {
	width: 100%;
	height: 100%;
	background: none;
}

html, input, textarea, select, button { -webkit-font-smoothing: antialiased; }

body {
	font-size: 100%;
	color: #2e3436;
	background: none;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	position: absolute;
}

.home .main-header {
	position: relative;
	display: table;
	height: 100%;
	height: 100vh;
	overflow: hidden;
}

a {
	text-decoration: none;
	border-bottom: 1px dotted;
	color: inherit;
	padding-bottom: 1px;
	transition: color 400ms ease-in-out;
}

a:hover, a:active, a:focus {
	color: #eb9316;
	/*border-bottom: 2px solid;*/
	border: 0;
	transition: color 400ms ease-in-out;
}

nav {
	position: fixed;
	top: 0;
	z-index: 9999;
	left: 0%;
	right: 0%;
	font-size: 0.9em;
	text-transform: lowercase;
	color: #eb9316;
}

nav .wrapper {
	margin: 0.5em auto 0.3em auto;
	width: 90%;
	max-width: 80em;
}

.home nav:hover {
	background-color: #2c313b;
	background: -webkit-linear-gradient(to bottom, rgba(44, 49, 59, 1) 0%,rgba(44, 49, 59, 0.67) 100%);
	background: linear-gradient(to bottom, rgba(44, 49, 59, 1) 0%,rgba(44, 49, 59, 0.67) 100%);
}

nav a {
	border-bottom: 0;
	color: #eb9316;
}

nav #menu {
	min-width: 80%;
}

nav #lang {
	float: right;
}

nav ul {
	margin: 0;
	display: inline-block;
	list-style: none;
	padding: 0;
}

nav ul li {
	display: inline;
	padding: 0 0.1em;
}

nav #menu li {
	color: #ed1c0b;
}

nav #menu .ext::before, nav #lang li:nth-child(2)::before {
	content: '|';
	font-weight: normal;
	left: -0.1em;
	position: relative;
	color: #7f7f7f;
}

@media (max-width: 45.5em) {
	nav .sub {
		display: none;
	}
	nav #menu .first::before {
		content: '';
	}
}

nav #lang li {
	color: #7f7f7f;
	font-weight: normal;
}

nav ul li:hover a, nav a:hover {
	border-top: 1px solid #ed1c0b;
	color: #ed1c0b;
	text-decoration: none;
	transition: color 500ms ease-in-out;
}

#menu-super {
	border-top: 0;
}

#menu-super i {
	font-size: 1.9em;
	line-height: 0.5263157em;
	vertical-align: text-bottom;
	position: relative;
	top: 0.2em;
	/*vertical-align: -45%;*/
	
	-ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
	-webkit-transition: 300ms;
	-ms-transition: 300ms;
	transition: 300ms;
}

nav li:hover #menu-super i {
	font-size: 2.5em;
	line-height: 0.4em;
	top: 0.2em;
	color: #ed1c0b;
	-ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
  transform: rotate(360deg);
}

@media screen and (min-width: 45.5em) {
	nav #menu {
		font-size: 1.1em;
		font-weight: bold;
	}
	nav ul li {padding: 0 0.4em;}
	nav #menu .ext::before, nav #lang li:nth-child(2)::before {left: -0.4em;}
}

.slide .left .fa, .slide .right ul li i, .decor > i {
	cursor: default;
}

#content, article {
	display: block;
}

/* #content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	min-height: 100%;
}*/

#me {
	background-color: #2c313b;
	background-image: url(../img/bg-pattern.png);
	background-repeat: repeat;
	position: relative;
	color: rgba(255, 255, 255, 0.7);
	display: inline-table;
	padding: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	/*line-height: 15;
	line-height: 85vh;*/
	
	/*
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-ms-filter: blur(2px);
	 -o-filter: blur(2px);
	filter: blur(2px);
	*/
}

/*
#me:hover {
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	-ms-filter: blur(0);
	-o-filter: blur(0);
	filter: blur(0);
}
*/

#me::after {
	clear: both;
}

/*#me + .slide {
	margin-top: 100%;
	margin-top: 100vh;
}*/

@media screen and (min-width: 45.5em) {
	#me {
		position: fixed;
	}
}

#me h1 {
	font-family: 'Jacques Francois', serif;
}
@media screen and (min-width: 45.5em) {
	#me h1 {
		font-size: 2.5em;
	}
}
@media screen and (min-width: 64em) {
	#me h1 {
		font-size: 3.59em;
		margin-bottom: -0.1em;
	}
}
@media screen and (min-width: 80em) {
	#me h1 {
		font-size: 4.5em;
		margin-bottom: -0.15em;
	}
}
@media screen and (min-width: 100em) {
	h1 {
		font-size: 4.89em;
	}
}

/*
#me h1:hover, #me h1:focus, #me h1:active {
   text-shadow: 0 0 40px #ffff00;
} */

#me p {
	text-align: left;
}

.keywords {
	font-size: 0.8em;
	display: block;
}

.keywords::before {
  content: '\e82a';
  /*content: '\e86f';*/
  margin-right: 0.5em;
  display: inline-block;
  font: normal normal normal 14px/1 fontello;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}

hr.section-separator {
	padding: 0;
	margin: 0;
	line-height: 1px;
	height: 1px;
	/*border: medium solid #ff8000;*/
	border-width: 1px 0 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #ff8000;
	text-align: center;
	font-size: medium;
	/* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

hr.section-separator::after {
	content: "◆";
	font-size: 1.4em;
	color: #ff8000;
	background-color: #fff;
	display: inline;
	padding: 0 0.1em;
	position: relative;
	top: -1px;
}

#me hr.section-separator {
	margin: 0 -2em 0 -2em;
}

#me hr.section-separator::after {
	background-color: #2c313b;
}

/* opera doesn't render correctly. hide section sign */
x:-o-prefocus, hr::after {
  content: "";
}

.s1 {background-color: #fff;}

@media screen {
	.s2 {background-color: #f4f3f3;}
}

.slide {
	/*padding: 8% 3% 8% 3%;*/
	padding: 2em 4% 2em 4%;
	position: relative;
	margin: 0;
	z-index: 3;
	overflow: hidden;
	text-align: center;
	/*min-height: 35vh;
	width: 100%;*/
}

@media (min-width: 45.5em) {
	.slide {
		padding: 4.5em 8% 4.5em 8%;
		/*padding: 5%;*/
	}
}

.slide-content::before, .slide-content::after {
	content: '';
	display: table;
}

@media screen and (min-width: 45.5em) {
	/*.home #content .slide:last-child {
		margin-bottom: 45%;
		margin-bottom: 100vh;
	}*/
	.home #content {
		margin-bottom: 100%;
		margin-bottom: 100vh;
	}
}

#me .wrapper {
	padding: 5% 5% 10% 5%;
	text-align: center;
	/*display: inline-block;*/
	display: table-cell;
	vertical-align: middle;
	line-height: 1.5;
}

.me-content {
	max-width: 60em;
	display: inline-block;
}

.slide .left {
	width: 45%;
	float: left;
	z-index: 99;
	position: relative;
	text-align: left;
}

.slide .left i {
	position: absolute;
	right: 0;
	font-size: 4em;
	opacity: 0.1; /*0.03;*/
	z-index: -1;
}

@media screen and (min-width: 45.5em) {
	#me .wrapper {
		padding: 5% 8% 10% 8%;
	}
	.slide .left i {
		font-size: 5em;
		right: 0.2em;
	}
}

.slide .right {
	width: 55%;
	float: left;
	z-index: 99;
	text-align: left;
	line-height: 1.3;
}

.slide .right p {
	margin-top: 1em;
}

@media (min-width: 45.5em) {
	.slide .right p:first-child {
		margin-top: 0;
	}
	.slide .right p:last-child {
		margin-bottom: 0;
	}
}

@media (max-width: 45.5em) {
	.slide .left {
		width: 100%;
	}
	.slide .right {
		width: 100%;
	}
}

#name-e {
	display: inline-block;
}

@media (min-width: 30.5em) {
	.me-content {
		direction: rtl;
		font-size: 1.2em;
	}
	.me-content div, .me-content p {
		direction: ltr;
	}
	
	hr.section-separator {
		/*margin: 0;*/
	}
	
	#name-e {
		width: 70%;
		display: inline-block;
		vertical-align: middle;
	}
	
	#logo-e {
		width: 25%;
		display: inline-block;
		vertical-align: middle;
	}
}

#logo-e img {
	max-width: 100%;
	height: auto;
}

.slide .right::after {
	clear: both;
}

.slide .right ol, .slide .right ul {
	list-style: none;
	padding: 0;
}

.slide .right dd ul,
 .slide .right dd ul li {
	margin: 0;
}

@media (min-width: 45.5em) {
	.slide .right ol:first-child, .slide .right ul:first-child, .slide .right dl:first-child, .slide .right dd:first-child {
		margin-top: 0;
	}
	.slide .right ol:last-child, .slide .right ul:last-child, .slide .right dl:last-child, .slide .right dd:last-child {
		margin-bottom: 0;
	}
}

/*.slide .right ol, ul li {
	padding: 0;
	margin-left: 0;
}*/

.slide-content {
	display: inline-block;
	width: 100%;
	max-width: 72em;
}

.valign {
	position: relative;
	top: 50%;
	margin-top: -15%;
	/*transform: translateY(-50%);*/
	/*
	vertical-align:middle;
	display:inline-block;
	line-height: normal;
	text-align: left;*/
}

@media (max-width: 45.5em) {
	.valign {
		position: relative;
		top: 0%;
		transform: none;
	}
}


/*#super-e {
	height: 178px;
	width: 200px;
	background-image: url(../img/super-e.png);
	background-position:center center;
}*/

@keyframes spin {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

@keyframes spin2 {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes spin2 {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes spin {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}

@-ms-keyframes spin {
	from {-ms-transform: rotate(0deg);}
	to {-ms-transform: rotate(360deg);}
}

.flip-container {
	display: inline-block;
	/*perspective: 200px;*/
	perspective: 0;
}

.flip-container, .front, .back {
	max-width: 100%;
	width: 100px;
	height: 85px;
}

#rays {
 	/* with animation properties */
	background: url(../img/rays.svg) 0 0 scroll no-repeat transparent;
	max-width: 300%;
	width: 490px;
	height: 490px;
	position: relative;
	/*top: 50%;
	right: 50%;*/
	opacity: 0.06;
	top: -151px;

	left: -140px;
	z-index: -1;
	-webkit-animation : spin 40s linear infinite;
	-moz-animation: spin 40s linear infinite;
	-ms-animation: spin 40s linear infinite;
	/* opera */
	-o-transition: rotate(3600deg);
	/* microsoft ie */
	animation: spin 40s linear infinite;
	overflow: visible;
}

@media (min-width: 45.5em) {
	.flip-container, .front, .back {
		width: 200px;
		height: 178px;
	}
	
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}
	
	/* flip speed goes here */
	.flipper {
		transition: 0.6s;
		transform-style: preserve-3d;
		position: relative;
	}
	
	/* hide back of pane during swap */
	.front, .back {
		backface-visibility: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	/* front pane, placed above back */
	.front {
		z-index: 2;
		/* for firefox 31 */
		transform: rotateY(0deg);
	}
	
	/* back, initially hidden pane */
	.back {
		transform: rotateY(180deg);
	}
	
	#rays:hover, .flip-container:hover #rays, .flip-container.hover #rays {
		-moz-animation-duration: 15s;
		-ms-animation-duration: 15s;
		-webkit-animation : spin2 15s linear infinite;
		animation: spin2 15s linear infinite;
		opacity: 0.1;
	}
}

@media (max-width: 45.5em) {
	.back {
		display: none;
	}
	#rays {
		display: none;
	}
}

@media (min-width: 45.5em) {
	.slide .left h2 {
		font-size: 1.6em;
		font-weight: normal;
	}
}

@media (max-width: 45.5em) {
	.slide .right dl:first-child {
		margin-top: 1.25em;
	}
}

.slide .right dd::first-line {
	font-weight: 500;
}

.slide .right dd .keywords::before {
	opacity: 0.25;
	vertical-align: baseline;
}

.slide .right dd {
	margin: 0 0 1.25em 0.5%;
	/*border-left: 1px dotted;*/
}

.slide .right .deflist-group {
	font-size: 1.1em;
	text-align: center;
	margin-bottom: 0;
}

.slide .right dt {
		text-align: center;
}
/*.slide .right dt:first-child {
		margin-top: 1em;
}*/

@media (min-width: 45.5em) {
	.slide .right dt {
		float: left;
		clear: left;
		width: 6.6em;
		text-align: right;
		/*margin-top: 0;*/
	}
	
	.slide .right dd {
		margin: 0 0 1em 6.6em;
	}
	
	.slide .right dt::after {
		content: " –";
		font-weight: normal;
	}
	
	.slide .right .deflist-group {
		margin: 1.5em 0 0 4em;
		font-size: inherit;
		text-align: left;
	}
}

@-webkit-keyframes bounce {
    0%, 10%, 25%, 40%, 50% {
        -webkit-transform: translateY(0) rotate(180deg);
                transform: translateY(0) rotate(180deg);
    }
    20% {
        -webkit-transform: translateY(-10px) rotate(180deg);
                transform: translateY(-10px) rotate(180deg);
    }
    30% {
        -webkit-transform: translateY(-5px) rotate(180deg);
                transform: translateY(-5px) rotate(180deg);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0) rotate(180deg);
                transform: translateY(0) rotate(180deg);
    }
    40% {
        -webkit-transform: translateY(-10px) rotate(180deg);
                transform: translateY(-10px) rotate(180deg);
    }
    60% {
        -webkit-transform: translateY(-5px) rotate(180deg);
                transform: translateY(-5px) rotate(180deg);
    }
}

.scroll-arrow {
	position: relative;
	color: #fff;
	opacity: 0.05;
	font-size: 6em;
	display: inline-block;
	text-align: center;
	z-index: 3;
	top: 0.1em;
	
	-webkit-animation: bounce 4s 2s infinite;
	animation: bounce 4s 2s infinite;
}

.home #content {
	margin-top: -6em;
	text-align: center;
}

.fa-li {
	opacity: 0.63;
}


/* Tree framework */

ul.tree, ul.tree ul {
  margin:0;
  padding:0;
  list-style:none;
}

ul.tree ul {
  margin-left:1em; /* indentation */
  position:relative;
}

ul.tree ul ul {margin-left:.5em} /* (indentation/2) */

ul.tree ul::before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0.3em;
  border-left:1px solid;
}
/*ul.tree > li > ul::before {
	left: 0;
}*/

ul.tree li {
  margin:0;
  padding:0 1.3em; /* indentation + .5em */
  line-height:1.3em; /* default list item's `line-height` */
  /*color:#369;
  font-weight:bold;*/
  position:relative;
}

ul.tree > li {
  padding:0;
}

ul.tree ul li::before {
  content:"";
  display:block;
  width:0.8em; /* same with indentation */
  height:0;
  border-top:1px solid;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:0.65em; /* (line-height/2) */
  left:0.3em;
}
/*ul.tree > li > ul > li::before {
	left: 0;
}*/

ul.tree ul li:last-child::before {
  background:#f4f3f3; /* same with body background */
  height:auto;
  top:0.65em; /* (line-height/2) */
  bottom:0;
}

#courriel {
	unicode-bidi: bidi-override;
	direction: ltr;
}
#courriel > span:first-child {
	display: none;
}

.smile {
	font-size: 0.84em;
}

#superman {
	position: relative;
	bottom: 45px;
	left: -120px;
	z-index: 999;
	max-width: 90%;
}