@import url(reset.css);

/* main styles */
@font-face {
    font-family: "Sansation";
    src: url('Sansation_Regular.ttf');
}
@font-face {
    font-family: "Sansation";
    font-weight: bold;
    src: url('Sansation_Bold.ttf');
}
html {overflow-y:scroll;height:100%}
/* body {font: normal 72% Arial, Verdana, sans-serif;background:#F8F8F8;color:#444;height:100%} */
body {font: normal 15px Roboto;background:#F8F8F8;color:#444;height:100%}
h1,h2,h3,legend {font-weight:normal;font-family: "Roboto"}
h1 {font-size:20px;margin-bottom:15px;/*text-shadow:0px 1px 1px rgba(92,92,92,0.5)*/}
/*h2 {font-size:18px;margin-bottom:10px;text-shadow:0px 1px 1px rgba(92,159,173,0.3)}*/
h2 {font-size:18px;margin-bottom:10px;/*text-shadow:0px 1px 1px rgba(0,0,0,0.2)*/}
h3 {font-size:14px;margin-bottom:10px;margin-top:10px}
input, textarea, select, a.button, .meta ul li a, ul.nav li li a:hover, p.main input, input.login, table, .message, #easyTooltip, div.wysiwyg {
    -moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;    
}
fieldset, legend {-moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}
a {color:#27b9db;text-decoration:none;font-weight:bold}
a:hover {text-decoration:underline}



/* structure */
#header {height:95px;/*border-bottom:1px solid #eee*/;/*background:#f8f8f8*/;background:#fdfdfd;}
#topmenu {width:960px;margin:auto;}
#topmenu span.logo {float:left;background:url('../img/logo23.png') top left no-repeat;width:250px;display:inline-block;height:86px;background-size:contain}
#nav {float:left;font-size:1.1rem;font-weight:normal;width:680px;margin-right:20px}
#nav a {font-family: Roboto; color:#55595e;padding:35px 30px;display:inline-block}

#nav a.current {color:#000}
#nav a:hover {color:#000;text-decoration:none;background:none}

#nav a span {height:24px;width:24px;/* background:url('../img/icons.png') no-repeat; */display:inline-block;float:left;margin-top:-3px;margin-right:5px}
#nav a span.home {background-position:0 0}
#nav a:hover span.home {background-position:0 -24px}
#nav a span.web {background-position:-24px 0}
#nav a:hover span.web {background-position:-24px -24px}
#nav a span.companies {background-position:-48px 0}
#nav a:hover span.companies {background-position:-48px -24px}
#nav a span.case {background-position:-72px 0}
#nav a:hover span.case {background-position:-72px -24px}
#nav a span.contact {background-position:-96px 0}
#nav a:hover span.contact {background-position:-96px -24px}


#nav ul {text-align:right}
#nav ul li {display:inline-block;}

.sep {padding:20px 0; clear: both}

/*#wrapper {background:url('../img/background.jpg') no-repeat top center #fdfdfd ;min-width:960px;margin:0}*/
#wrapper {clear:both;padding-bottom:200px;background:url('../img/background3.jpg') no-repeat  center top #e7e7e7;min-height:450px; }

#banner {padding:40px 20px 40px;}
#banner .tabsnav {text-align:center;font-size:1.2em}
#banner .tabsnav li {display:inline-block;}
#banner .tabsnav li a {padding:10px;margin:0 10px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;}
#banner .tabsnav li a:hover {text-decoration:none;background:#27b9db;color:#fff;}
/* #banner .tabsnav li a.selected {text-decoration:none;background:#27b9db;color:#fff} */

#banner h1 {text-align:center;font-size:2rem;}
#banner h2 {text-align:center;font-size:1.5em;}
#container {min-width:960px;min-height:100%;position:relative;background:#e7e7e7}
#content {width:960px;margin:0px auto;min-width:960px;}
/*#footer {min-width:960px;background:#444; position:absolute;
   bottom:0px;left:0px;height:200px;
   width:100%;color:#fff}*/
   #footer{
   position:absolute;
   bottom:0;
   width:100%;
   height:200px;   /* Height of the footer */
   background:#3e4145;
   color:#fff;
   }
   #footer p {
   margin: 0.3rem 0;
   }
   #footer h2 {
   margin: 1rem 0;
   }
#content h2 {
	color:#27b9db;
	font-size:1.5rem;	
	margin:15px 0;
}
.offer {clear:both;margin-bottom:20px;font-size:1.1em}
.offer .left {float:left;width:25%;padding-top:0px;}
.offer .left ul {padding-top:96px}
.offer .left ul li {padding:2px 10px 0 0;text-align:right}
.offer .right {float:left;width:70%;border-left:5px solid #27b9db;padding:20px;background:#f9f9f9;background:rgba(249,249,249,0.7);
-moz-border-radius-topright:15px;-moz-border-radius-bottomright:15px;
-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;
-khtml-border-top-right-radius:15px;-khtml-border-bottom-right-radius:15px;
border-top-right-radius:15px;border-bottom-right-radius:15px;
}
.offer p {line-height:1.5em;text-indent:2em;margin-bottom:10px;text-align:justify;padding-right:100px;}
.offer h2 + p:first-letter {font-size:2.5em;color:#27b9db;font-family: geneva, "century gothic", Georgia, "Times New Roman", Times, serif;margin-right:2px}
.offer strong {font-size:1em;/*text-shadow:0px 1px 1px rgba(92,92,92,0.2)*/}
.offer .logos {float:right}
.offer .logos img {width:80px;padding:8px 0}
.offer .right ul li {padding-right:100px;line-height:1.5em;text-indent:2em;margin-bottom:10px;text-align:justify;background:url('../img/arrow-r.png') no-repeat 10px 2px }
.offer a {font-size:1.1em}

#content .bigbox {font-size:1.1em;float:left;/* width:270px; */border-left:6px solid #27b9db;/*padding:130px 15px 15px;*/padding:10px 15px 15px;margin:5px;
background:#f9f9f9;background:rgba(249,249,249,0.7);
-moz-border-radius-topright:15px;-moz-border-radius-bottomright:15px;
-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;
-khtml-border-top-right-radius:15px;-khtml-border-bottom-right-radius:15px;
border-top-right-radius:15px;border-bottom-right-radius:15px;}
#content .bigbox.expertise {/*background:url('../img/expertise.jpg') top left no-repeat #f9f9f9;*/}
#content .bigbox.partenaire {/*background:url('../img/partenaire.jpg') top left no-repeat #f9f9f9;*/}
#content .bigbox.innovation {/*background:url('../img/innovation.jpg') top left no-repeat #f9f9f9;*/}
#content .bigbox p {line-height:1.5em;text-indent:2em;margin-bottom:10px;}
#content .bigbox strong {font-size:1em;/*text-shadow:0px 1px 1px rgba(92,92,92,0.2)*/}
#content .bigbox ul li {line-height:1.5em;text-indent:2em;margin-bottom:10px;background:url('../img/arrow-r.png?1') no-repeat 10px 2px}

#content .bigbox label{width:60px;display:inline-block;float:left}
#content .bigbox input{border:1px solid #ccc}
#content .bigbox input:focus{border:1px solid #27b9db;}

#footercontent {width:960px;margin:0 auto;padding-top:10px}
#footercontent div {float:left;padding-left:8%;width:25%}

.col2 {float:left;width:50%}
.col3 {float:left;width:33%;}

#cols ul {padding:20px;}
#cols ul.left {padding:0 20px 20px 150px;text-align:left;border-right:1px solid #ddd}
#cols ul.left li a {background:url('../img/arrow-r.png?1') no-repeat right}
#cols ul.right {padding:0 150px 20px 20px}
#cols ul.right li a {background:url('../img/arrow-r.png?1') no-repeat right}
#cols ul li {padding:10px 0px;border-bottom:1px solid #ddd}
#cols ul li a {font-size:1.5em;font-weight:normal;color:#55595e;padding:0 30px;width:240px;display:inline-block}
#cols ul li a:hover {color:#27b9db;text-decoration:none}

.box {float:left;width:255px;margin-right:52px;margin-bottom:20px;
                font-family: Roboto;font-size:20px;height:52px;
                text-shadow:0px 1px 1px rgba(0,0,0,0.2);
                padding:15px;
                background:#3e4145;color:#f3f3f3;
                -moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;}
.box.blue {background:#27b9db}                
.box.last {margin-right:0}