@charset "UTF-8";

header {
	position: fixed;
	top: 0;
	right: 4em;
	left: 4em;
	z-index: 50;
	color: #4d4d4f;
	color: hsl(233,3%,31%);
	font-family: 'questrial', arial, sans-serif;
}

/* Logo relais du silence */

.logo-rds {
	display: inline-block;
	margin-right: 1em;
	margin-top: 0.3em;
}

.logo-rds img {
	height: 100%;
	width: auto;
	vertical-align: middle;
}

/* Logo */

.logo {
	display: inline-block;
	vertical-align: top;
	padding: 0.6em 0 0.55em;
	color: #4d4d4f;
	color: hsl(233,3%,31%);
	font-style: italic;
	font-size: 2.5em;
	perspective: 600;
	-webkit-perspective: 600;
}

.logo:after {
	display: inline-block;
	margin-left: 0.6em;
	content: '\e8fb''\e8fb''\e8fb''\e8fb';
	letter-spacing: 0.4em;
	font-style: normal;
	font-size: 0.5em;
	font-family: 'myicon';
}

.logo:hover,
.logo:focus {
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.logo:hover:after,
.logo:focus:after {
	letter-spacing: 0.6em;
	-webkit-transform: skew(-10deg) rotateX(360deg);
	   -moz-transform: skew(-10deg) rotateX(360deg);
	    -ms-transform: skew(-10deg) rotateX(360deg);
	     -o-transform: skew(-10deg) rotateX(360deg);
	        transform: skew(-10deg) rotateX(360deg);
}

/*.logo.active {
	color: #a81e33;
	color: hsl(351, 70%, 39%);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}*/

/*=============================================
=            Bloc bouton du header            =
=============================================*/

.bloc-btn-header {
	position: absolute;
	right: 0;
	perspective: 600;
	-webkit-perspective: 600;
}

.texte-header {
	float: left;
	padding-top: 0.5em;
	font-size: 1.6em;
	line-height: 1.1;
}

.texte-header span {
	display: block;
	text-align: right;
	font-style: italic;
	font-size: 1.3em;
}

.bloc-btn-header .button {
	margin-right: -2.15em;
	margin-left: 3em;
}

/*-----  End of Bloc bouton du header  ------*/



/*==================================
=            Navigation            =
==================================*/

.main-nav {
	background-color: #fff;
	background-color: rgba(255,255,255,0.7);
	font-size: 1.4em;
	position: absolute;
	left: 0;
	right: 0;
	top: 3.8em;
}

.main-nav li {
	display: inline-block;
}

.isIe8 .main-nav li {
	display: block;
	float: left;
}

.main-nav a {
	display: block;
	padding: 1em;
	color: inherit;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a.active {
	background-color: #a4a3a6;
	background-color: hsl(260,2%,65%);
	color: #fff;
	color: hsl(233,3%,95%);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

/*-----  End of Navigation  ------*/


/*============================================
=            Effets de transition            =
============================================*/

.logo,
.logo:after {
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	-ms-transition: .4s;
	transition: .4s;
}

.main-nav a {
	-webkit-transition: background-color .4s, color .4s;
	-moz-transition: background-color .4s, color .4s;
	-o-transition: background-color .4s, color .4s;
	-ms-transition: background-color .4s, color .4s;
	transition: background-color .4s, color .4s;
}

/*-----  End of Effets de transition  ------*/