@font-face {
	font-family: Keffeesatz;
	src: url(YanoneKaffeesatz-Light.otf) format("opentype")
}
@font-face {
	font-family: KeffeesatzBold;
	src: url(YanoneKaffeesatz-Bold.otf) format("opentype")
}

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('websymbols/websymbols-regular-webfont.woff') format('woff'),
        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* { margin: 0; padding: 0; outline: 0; }

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
	width: 100%;
}

section {
	margin-bottom: 1000px;
	padding-top: 150px;
	float: left;
}

section:after {
	top: 500px;
	position:relative;
	width: 100%;
	display: inline;
	float: center;
	margin: 0px 33% 0px 33%;
	content: url(images/stock-30.png);
}

img{
	clear:both;
	max-width: 100%;
}

a { color: #90A4AB; text-decoration: underline; }
a:hover { color: #90A0BC; text-decoration: underline; }
a:active { color: #A68972; text-decoration: underline;}

body {
 font-family: Keffeesatz, Arial;
 font: normal 100%;
 color: #4b4b4b;
 background: url(images/pattern2.gif);
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.error { color: indianRed; font-size: 1.5em;}

h1 {
 color: #90A4AB;
 font-size: 2em;
 position: relative;
 top: 7%px;
}
h2 {
	padding-left: 7%;
	font-size: 1.5em;
	color:#90A4AB;
}


ul.from {
	padding-left: 10%;
}
ul.next {
	padding-left: 5%;
}

strong { font-family: KeffeesatzBold, Arial; }

header {
	padding: 5px 0;
	width: 100%;
	background-color: #000;
	margin-bottom: 25px;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	position: fixed;
	z-index: 200;
	float: left;
}
#headercontainer, #contentcontainer { width: 90%; margin: 0 auto; position: relative; }
#contentcontainer { float: none; padding-top: 0px; }

header h1 a{
	text-decoration: none;
	border-bottom: none;
}
header h1 a div{
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
header h1 a div img{
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
header h1 a:hover div{
	padding-left: 300px;
}
header h1 a:hover div img{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
nav { width: auto; float: left; }

nav .ca-menu{
    padding:0;
    margin:20px auto;
	position: absolute;
	top: 0px;
	right: 0px;
    width: 550px;
}
nav .ca-menu li{
    width: 100px;
    height: 100px;
    border: 10px solid #90A4AB;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    margin-right: 4px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
	-ms-border-radius: 80px;
	-o-border-radius: 80px;
    border-radius: 80px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
nav .ca-menu li:last-child{
    margin-right: 0px;
}
nav h2{
	color: #708298;;
}
nav .ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #ccc;
    position: relative;
}
nav .ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 20px;
    color: #f6f6f6;
    line-height: 20px;
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0px;
    top: 10px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
nav .ca-main{
    font-size: 12px;
    position: absolute;
    top: 40px;
    height: 70px;
    width: 70px;
    left: 85%;
    margin-left: -85px;
    opacity: 0.8;
    text-align: center;
}
nav .ca-sub{
    text-align:center;
    color: #000;
    font-size: 14px;
    position: absolute;
    height: 60px;
    width: 60px;
    left: 50%;
    margin-left: -30px;
    top: 5px;
    opacity: 0;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
nav .ca-menu li:hover{
    background: #90A4AB;
    border-color: #fff;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
nav .ca-menu li:hover .ca-icon{
    color: #555;
	top: 15px;
	left: -30px;
	opacity: 0.3;
    font-size: 90px;
}
nav .ca-menu li:hover .ca-main{
    display: none;
}
nav .ca-menu li:hover .ca-sub{
    opacity: 0.8;
}

.carteDeVisite {
  clear: both;
  padding: 5px 2% 10px 2%;
  background-color: white;
  width: 90%;
  height: 200px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.reseautage {
	clear: both;
	width: 90%;
}
.reseautage div{
	display: inline;
	float: left;
	margin: 10px;
	position: relative;
}
.reseautage .twitter{
	top: 0px;
}
.reseautage .facebook{
	top: -1px;
	left: 4px;
}
.reseautage .linkedIn{
	top: -2px;
}
.reseautage .google{
	top: 2px;
}
.reseautage .viadeo{
	
}
.reseautage .MsN:hover a{
	color: blue;
}
.reseautage .MsN:hover a .fly_left{
	color: green;
}
.reseautage .MsN:hover a .fly_right{
	color: orange;
}

#career { text-align:justify; text-align-last: left; }
#career img{ clear:both; position:relative; display:inline; float:right; top:5px; margin: 0px 10px 0px 100px; padding: 0px 10px 0px 100px; }
#career p{ position:relative; left: 10%; width: 85%; font-size: 1em; margin: 10px 0px 20px 0px; line-height: 15px; }
#career ul{ position:relative; left: 10%; width:85%; font-size: 1em; margin: 10px 0px 20px 0px;}
#career ul.paragraphe{ position:relative; left: 13%; width:68%; font-size: 1em; margin: -19px 0px 20px 0px;}
#career h5{ position:relative; padding-left: 5%; }
#career h4{ position: relative; font-size: 0.9em; text-align: right; }


footer {
	float: left;
	margin: 0px;
	padding: 0px;
	display: block;
	width: 100%;
	background-color: #000;
}
footer section {
	margin-bottom: 0px;
}
footer section:after {
	content: none;
}

#contact {
	clear: both;
	float: none;
	display: block;
	position: relative;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	padding-top: 150px;
}

h2.contact { background: url(images/contact.png) no-repeat -10px -10px; }

input[type="text"] { width: 400px; }
textarea { width: 400px; height: 150px; }
label { color: #90A4AB; font-weight: bold; }
input, textarea { 
 background-color: #A68972;
 border: 5px solid #90A4AB;
 padding: 15px;
 font-family: Keffeesatz, Arial;
 color: #4b4b4b;
 font-size: 15px;
 -webkit-border-radius: 5px;
 margin-bottom: 15px;
 margin-top: 5px;
}

input:focus, textarea:focus {
	border: 5px solid #90A4AB;
	background-color: rgba(255, 255, 255, 1);
}

input[type="submit"] {
	border: none;
	cursor: pointer;
	color: #000;
	font-size: 14px;
	background-color: #90A4AB;
	padding: 5px 36px 8px 36px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	border-top: 1px solid rgba(255, 255, 255, 0.6);
}

input[type="submit"]:hover {
	color: #000;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	background-color: #A68972;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #c34000),
	    color-stop(0.62, #ff5400)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #c34000 23%,
	    #ff5400 62%
	);
}

input[type="submit"]:active { position: relative; top: 1px; }

@media screen and (max-width: 774px) {
	nav .ca-menu{
    margin: 20px 0px;
	right: 0px;
    width: 260px;
	}
	nav .ca-menu li{
	margin-left: -60px;
	}
	nav .ca-menu li:hover{
    z-index: 999;
    transform: scale(1.1);
	}
	
	input[type="text"] { width: 260px; }
	textarea { width: 260px;}
	input, textarea {
	 padding: 5px;
	 margin-bottom: 5px;
	 margin-top: 0px; }
		
}