@import url(https://fonts.googleapis.com/css?family=Neuton:700,400&subset=latin,latin-ext);



/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

    box-sizing: border-box;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

    font-family:"helvetica";

    margin:0;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}



.clear{

    clear : both;

}



strong{

    font-weight: bold;

}



/*****************************************************************************\

  TOP

\*****************************************************************************/



#top-bar {

    background-color: white;

    min-height: 70px;

    width: 100%;

}



.container {

    margin: auto;

    max-width: 980px;

    min-width: 300px;

    width: 100%;

}







#logo {



    margin-top: 16px;

    width: 185px;

    float: left;

    border: 0 none;

    margin-left: 0px;

}



#nav {

    float: right;

}



#nav ul {

    display: inline-block;

    list-style: outside none none;

    margin-bottom: 40px;

    margin-top: 42px;

}



#nav ul li {

    display: inline-block;

    margin-top: 10px;

    padding: 0 10px;

}



#nav ul li a {

    color: #00b4ff;

    font-size: 16px;

    font-weight: bold;

    text-decoration: none;

}



#nav ul li a:hover {

    color: #32738f;

    font-size: 16px;

    font-weight: bold;

    text-decoration: none;

}





#nav ul:first-child li {

    border-right: 2px solid #02708e;

}



#first-nav {float: right;}



#first-nav {

    background-color:#f9f9f9;

    color: #32738f;

    font-size: 16px;

    text-decoration: none;

    height: 30px;

    width: 100%;

    padding-right: 10px;



}



#first-nav ul {

    display: inline-block;

    list-style: outside none none;

    float: right;



}



#first-nav ul li {

    display: inline-block;



    padding: 3px 5px;

}



#first-nav img {

    display: inline-block;

    padding: 0 1px;

}



#first-nav ul li a {

    color:#32738f;

    font-size: 16px;

    text-decoration: none;

    list-style-type: none;

}



#first-nav ul li a:hover {

    color:#00b4ff;

    font-size: 16px;

    text-decoration: none;

    list-style-type: none;

}





/*****************************************************************************\

  HEADER

\*****************************************************************************/





#header{

    height:380px;

    width:100%;

    border-top : 5px solid #00b4ff;

    background-image: url("../images/bg.jpg");

    background-position:center;

    background-size: cover;

    color:white;

    box-shadow: 0 1px 5px black inset;

    margin-bottom: 55px;



}



#inner-header{

    padding-top:94px;

    position:relative;

}



#inner-header p{

    font-size:24px;

    margin-bottom:35px;

    font-family: 'Neuton', serif;

    font-weight: 700;

}



#inner-header h1{

    margin:0;

    font-size:3.75em;

}



#header .spacer{

    margin: 10px 0 30px;

}



#inner-header .button{

    font-size:18px;

    background-color:#00b4ff;

    text-align:center;

    border-radius: 5px;

    display: inline-block;

    font-weight: 700;

    line-height: 18px;

    margin-top: 0;

    padding: 13px 20px;

    text-transform: uppercase;

    color:white;

    text-decoration:none;

}





form#search{

    background-color: rgba(0,58,84,.8);

    min-height: 87px;

    border-radius: 5px;

    text-align: center;

    padding: 15px 15px 12px 15px;

    box-sizing: border-box;

}



form#search h2{

    font-size:12px;

    text-align: left;

    font-weight: normal;

    text-transform: uppercase;

    margin : 0 0 10px 0;

    color: white;

}



form#search input{

    height: 35px;

    border-radius: 5px;

    box-sizing: border-box;

    border: none;

}



form#search input#q_name {

    max-width: 500px;

    width: 100%;

}



form#search input#q_location{

    max-width: 295px;

    width: 100%

}



form#search input[type="submit"]{

    width: 145px;

    font-size:14px;

    background-color: #00b4ff;

    color: white;

    text-transform: uppercase;

}





/*****************************************************************************\



\*****************************************************************************/



header {

    width: 100%;

    height: 236px;

    margin-bottom: 55px;

    background-color: lightblue;

}



h2{

    font-family: "Neuton",serif;

    font-size: 22px;

    font-weight: 700;

    text-transform: none;



    text-align: center;

    color : #025074;

    margin-bottom: 40px;

}



.spacer{

    background-color: #0085b2;

    display: block;

    height: 5px;

    margin: auto;

    width: 236px;

    margin-bottom: 30px;

}



.spacer span {

    background-color: #01b2fe;

    display: block;

    height: 100%;

    width: 50%;

}



/*****************************************************************************\

  STEP 1

\*****************************************************************************/





#home-users .step1{

    padding-top: 45px;

}



.avantages{

    text-align: center;

}



.avantage{

    display: inline-block;

    vertical-align: top;

    width: 300px;

    margin-top: 10px;

    margin-bottom: 10px;

    min-height: 215px;

    cursor: pointer;



    border :1px solid #e3e2e2;

    background-color: #f9F9F9;

    padding: 5px 5px 0;

}



.avantage:nth-child(3n-1){

    margin-left: 28px;

    margin-right: 28px;

}



.avantage .picture img{

    margin-bottom: 20px;

}



.avantage .picture .legend{

    font-size: 14px;

    font-weight: bold;

    text-transform: uppercase;

    color: #025074;

    margin-bottom: 20px;

}



.avantage .texte h3{

    font-size: 14px;

    font-weight: bold;

    color: #025074;

    margin-bottom: 20px;

}



.avantage .texte p{

    font-size: 14px;

    color: #025074;

    margin-bottom: 20px;

}



/*****************************************************************************\

  STEP 2

\*****************************************************************************/



.step2{

    text-align: center;

    padding-top: 40px;

    background-image: url('/website/views/layouts/images/subtlenet2.png');

}



.step2 > .container > p {

    font-size: 14px;

    color: #025074;

    padding-bottom: 55px;

    

}



.step2 > .container > a {

    background-color: #01b2fe;

    color: white;

    font-size: 14px;

    font-weight: bold;

    text-transform: uppercase;

    padding: 8px 25px;

    text-decoration: none;

    border-radius: 5px;

    margin-bottom: 55px;

    display: inline-block;

    }



.indicators{

    width: 100%;

    min-height: 230px;

    background-image: url('/website/views/layouts/images/fond2.jpg');

    background-size: cover;

    background-position: center center;



    text-align: center;

}





.indicators > h3 {

    color: white;

    font-size: 18px;

    font-weight: bold;

    padding-top: 35px;

    text-transform: uppercase;

}





.indicators img {

    display: inline-block;

    margin: 25px 80px;

    vertical-align: middle;

}



.indicators > p{

    padding-top: 90px;

    display: inline-block;

    vertical-align: top;

    height: 100%;

    width: 300px;

    color: white;

    font-size: 14px;

    text-transform: uppercase;

}



.indicators > p span{

    font-size: 48px;

    display: block;

    padding-bottom: 15px;

}



/*****************************************************************************\

  STEP 3

\*****************************************************************************/



.step3{

    background-image: url("/website/views/layouts/images/fond-triangles.png");

    background-position: center center;

    min-height: 404px;

    padding-top: 45px;

    width: 100%;

    text-align: center;

}



.step3.b{

    min-height: 300px;

    padding-top: 0;



}



.step3 .comments2 img{

    padding: 0;

    max-width: 1000px;

}



.step3 img{

    display: inline-block;

    max-width: 603px;

    padding: 64px 75px 30px 0;

    vertical-align: middle;

    width: 100%;

}



.step3 .comments2 img{

    padding: 0;

}



.step3 .texte{

    display: inline-block;

    vertical-align: middle;

    text-align: center;

    width: 295px;

    color:#005174;

}



/*****************************************************************************\

  STEP 4

\*****************************************************************************/



.step4{

    padding-top: 40px;

    text-align: center;

}



.comments{

    color: #025074;

    font-style: italic;

    font-size: 16px;

    padding-bottom: 40px;

}



.comment .author{

    display: block;

    margin-top: 45px;

    font-style: normal;

    font-size: 14px;

    font-weight: bold;

    text-transform: uppercase;

}



.comment .function{

    display: block;

    font-style: normal;

    text-transform: capitalize;

}



.step4 .controls img{

    display: inline-block;

    vertical-align: top;

    margin: 0 10px 35px 10px;



}



.clients{

    padding: 35px 0;

    background: url('/website/views/layouts/images/subtlenet2.png');

}



.press{

    text-align: center;

    margin-top: 35px;

}

.press > a{

    display: block;

    background-color: #00b4ff;

    padding: 35px 0;

    color: white;

    font-size: 14px;

    font-weight: bold;

    text-transform: uppercase;

}



.clients img{

    height: 77px;

    padding: 0 10px 5px;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    filter: grayscale(100%);

}







.clients img:hover, .clients .slick-current img {

    height: 77px;

    padding: 0 10px 5px;

    -webkit-filter: grayscale(0%);

    -moz-filter: grayscale(0%);

    -o-filter: grayscale(0%);

    -ms-filter: grayscale(0%);

    filter: grayscale(0%);

}



.press .articles.hide{

    padding: 0;

    overflow: hidden;

    max-height: 0;

}



.press .articles{

    padding: 35px 0;

}



.press .articles img{

    padding: 0 10px;

}



/*****************************************************************************\

  FOOTER

\*****************************************************************************/



footer{

    background-color: #00313f;

    padding: 35px;

    text-align: center;

}



footer > .container > div{

    display: inline-block;

    vertical-align: top;

    height: 216px;

    color: white;

    text-align: left;

}



footer .infos, footer .about{

    width: 310px;

}



footer .infos{

    padding-left: 28px;

}



footer .contact{

    width: 350px;

    padding: 0 27px;

    border-left : 1px solid #004a5f;

    border-right : 1px solid #004a5f;

    margin-bottom: 20px;

}



footer h3{

    text-transform: uppercase;

    padding-bottom: 35px;

}



footer .infos table img{

    padding-right: 20px;

}



footer .infos a{

    text-decoration: none;

    color: white;

}



footer .contact img{

    display: none;

}



footer .contact input{

    background: #004a5f none repeat scroll 0 0;

    border: 2px solid #004a5f;

    color: white;

    margin-bottom: 7px;

}



#name, #mail{

    width: 130px;

}



#agence, #msg, #soft-autre{

    width: 270px;

}



#subject, #soft{

    background: #004a5f none repeat scroll 0 0;

    border: 2px solid #004a5f;

    color: white;

    width: 276px;

    margin-bottom: 7px;

}



#soft-autre, #newsletter-label{

    display: none;

}

#soft, #msg {

    margin-bottom: 7px;

}



#send-button{

    padding: 1px 20px;

}



footer .about{

    padding-left: 27px;

    position: relative;

}



footer .about img{

    height: 40px;

    margin-bottom: 10px;

}



footer .about p {

    font-size: 12px;

}



footer .about .cgu{

    left: 27px;

    bottom: 40px;

    position: absolute;

}



footer .about .copyright{

    left: 27px;

    bottom: 0;

    position: absolute;

}



footer .about a {

    text-decoration: none;

    color: white;

}



/*****************************************************************************\

  TMP

\*****************************************************************************/



.step4 .controls, .step2 .indicators .clients, .step2 .indicators .agencies{

    display: none;

}



.services{

    background-image: url("/website/views/layouts/images/fond-triangles.png");

    background-position: center center;

    background-size: cover;

    background-color: #f9f9f9;

    padding-top: 40px;



}



.step2 p strong {

    font-weight: bold;

}



.plus-ra{

    padding-top: 35px;

}



.les-plus {

    width: 469px;

    color: #025074;

}



.plus h3{

    font-size : 14px;

    font-weight: bold;

    text-transform: uppercase;

    margin-bottom: 20px;

}



.plus p{

    font-size : 14px;

    padding-bottom: 35px;

}





.les-plus, .plus-ra img {

    display: inline-block;

    vertical-align: middle;

}



.plus-ra img {

    margin-left: 19px;

}





.indicators > p {

    font-style: italic;

    font-weight: bold;

    width: auto;

}





.avantages2 ul {

    display: inline-block;

    padding: 20px 0 35px;

    vertical-align: top;

    width: 48%;

    list-style-image: url("/website/views/layouts/images/icone-validation.png");

    list-style-position: inside;

}



.avantages2{

    font-size:14px;

    font-weight: bold;

    color:white;

    background : #01b2fe; 

}







.offre .text {

    display: inline-block;

    height: 390px;

    vertical-align: top;

    width: 469px;

}





.offre > img {

    display: inline-block !important;

    vertical-align: top;

    width: 490px;

}





.offre .text > h3 {

    border-bottom: 2px solid #01b2fe;

    border-color: #01b2fe;

    border-style: solid;

    color: #005174;

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 20px;

    padding-bottom: 20px;

    text-transform: uppercase;

}





.offre .text > .intro {

    color: #005174;

    font-size: 14px;

    margin-bottom: 20px;

}



.offre .contenu {

    color: #5b5b5b;

    font-size: 14px;

    margin-bottom: 20px;

}







.offre .end {

    color: #5b5b5b;

    font-size: 14px;

    font-weight: bold;

}



#header{

    margin-bottom: 0

}



.step1{

    margin-top:55px;

}



.comments{

    text-align: center;

    padding-top: 45px;

}





.comment img {

    margin-bottom: 30px;

    width: 150px;

}



.step1 h2 {

    font-family: "Neuton",serif;

    font-size: 22px;

    font-weight: 700;

    text-transform: none;

}



.slick-dots {

    bottom: 15px!important;

    color:#0085b2;

}





h3 {

    color: #00b4ff;

    padding: 15px 15px 15px 0;

    font-size: 18px;

    border-bottom: 2px solid #00b4ff;

    margin-bottom: 20px;

}





#e_reputation.container {

    margin-top: 30px;

    padding-bottom: 40px;

}



#e_reputation.container p{

    color: #5b5b5b;

    font-size: 15px;

    text-align: justify;

    margin-bottom: 10px;

    line-height: 1.2em;

}



#e_reputation.container ul{

    background-color: #00b4ff;

    box-shadow: 0 0 10px gray;

    color: white;

    display: inline-block;

    margin: 20px auto;

    padding: 15px;

    text-align: left;

}





#e_reputation.container p.gest {

    font-size: 17px;

    font-weight: bold;

    margin-top: 40px;

    text-align: center;

}



#e_reputation .box {

    text-align: center;

}



#e_reputation strong{

    color : #357ca2;

}



#e_reputation.container p.signature{

    font-style: italic;

    margin: 30px 0;

    text-align: right;

}



#e_reputation.container ul li:first-child {

    font-weight: bold;

    margin-bottom: 10px;

    text-align: center;

}