/* 01. FONT FACE ================================================== */
@import url('https://fonts.googleapis.com/css?family=Montserrat');
/*font-family: 'Montserrat', sans-serif;*/

	
/* 02. GENERALS SETTINGS ================================================== */

/* Container  */

.container {	
	z-index: 9999; /* IMPORTANT */
	position: relative;
	background: #FFF;
	overflow: hidden;}



/* Clear floats of children */
.cbp-so-section:before,
.cbp-so-section:after {
	content: " ";
	display: table;
	padding:30px 0;}


.cbp-so-section:after {
	clear: both;}

/* Sides */
.cbp-so-side {
	width: 100%;
	margin: 0;
	padding: 3em 2%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-moz-transition: -moz-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;}




body, html {
    background: #E2E4E7;
    padding: 0;
       font-family: 'Montserrat', sans-serif;
    position: relative;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    -webkit-transition: opacity 400ms;
    -moz-transition: opacity 400ms;
    transition: opacity 400ms;
}


/* Selected text Color */

::-moz-selection {
    background: none;
    color: #5ac6ff;
}

::selection {
    background: none;
    color: #5ac6ff;
}

.centered {
    text-align: center;
}

b, strong {
    font-weight: 800;
}

/* Make a space */

.space {
    padding: 20px 0;
}



h1 {
    font-family: 'Montserrat', sans-serif;
    margin: 0.75em 0.75em 0.25em;
    font-size: 2.70em;
}

h2 {
    font-size: 46px;
    font-weight: 100;
    line-height: 46px;
    font-family: 'Montserrat', sans-serif;
    margin-top: 0.33em;
}

h3 {
    font: 38px 'Montserrat', sans-serif;
    font-weight: 100;
    padding-bottom: 25px;
    padding-top: 0px;
}

h4 {
    font: 32px 'Montserrat', sans-serif;
    font-weight: normal;
    font-weight: 100;
    padding-bottom: 15px;
}

h5 {
    font: 24px 'Montserrat', sans-serif;
    font-weight: normal;
    font-weight: 100;
    color:#FFF;
}


span {
    color: #303333;
    font: 1.5em 'Montserrat', sans-serif;
    opacity: 0.4;
    padding-top: 0px;
}

/* Link */

a {
    color: #FFF;
    text-decoration: none;
}

a:hover {
    color: #FFF;
}  
	
/* Paragrah */

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
    color: rgba(255,255,255,0.80);
    line-height: 30px;
}

p a {
    border-bottom: 1px dotted #888;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

p a:hover {
    border-bottom: 1px dotted #FFF;
}


/* Link with a border button */

.border-button {
	background: url("../img/go-right.png") no-repeat scroll 95% 50% / 6px auto rgba(0, 0, 0, 0);
    padding: 10px 35px 10px 15px;
    font-weight: normal;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 3px;
    color:rgba(255,255,255,0.80);
    border: 1px solid rgba(255,255,255,0.40);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.border-button:hover {
    border: 1px solid #FFF;
    color:#FFF;
}



/* 03. NAVIGATION SETTINGS ================================================== */


nav #logo {
    float: left;
    z-index: 99999;
}

nav {
    z-index: 999;
    width: 100%;
    height: 80px;
}


/* Some stylesheet reset */

#nav, #nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The main navigation bar */

#nav {
    width: 100%;
 /* The menu will take the width of its container */;
}

#nav>li {
    float: right;
    position: relative;
    padding: 20px 15px;
}

/* The main navigation links */

#nav>li>a {
	/* Layout */
    display: block;
	/* Typography */
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    color: #FFF;
    opacity: 1;
    text-decoration: none;
}

/* The hover state of the links */

#nav li:hover a, #nav li .selected {
    color:rgba(255,255,255,0.60);
}

 
/* Navigation Fixed */ 
 
.cbp-af-header {
	font-family: 'Montserrat', sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    height: 80px;
    overflow: hidden;
    -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    transition: height 0.6s;
}


.cbp-af-header #logo img{
    /*padding: 40px 20px 0px 0px;*/
    padding: 12px 46px 0px 0px;
    max-width: 150px;
}

.cbp-af-header #nav a {
    line-height: 60px;
}

/* Transitions */

.cbp-af-header #logo,
.cbp-af-header #nav a {
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;
}

/* Button Share */

.cbp-af-header .button {
    border-radius: 20px;
    color: #FFFFFF;
    margin-top: -100px;
    padding: 5px 15px;
    letter-spacing: 2px;
    background: #5ac6ff;
    font-weight: 600;
    float: right;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Button Share:hover */

.cbp-af-header .button:hover {
    color: #FFF;
    background: #87d5fe;
}


/* Navigation effect on scroll down */


.cbp-af-header.cbp-af-header-shrink {
	height: 80px;
	float: right;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* The button comes to the right place */

.cbp-af-header.cbp-af-header-shrink .button {
	margin-top:30px;
	display: block;
}

/* The links goes up */

.cbp-af-header.cbp-af-header-shrink #nav a {
	margin-top: -150px;
}
	


/* 04. PAGE 1 / HEADER SETTINGS ================================================== */



.page1 {
    background: url('../img/bg_header.jpg')#131313;
    background-size: cover;
    height: 100%;
	max-height:692px;
    position: relative;
}

.page1 h1 {
    text-align: center;
    padding: 0;
    margin-top: 50px;
    margin-bottom: 25px;
    font-weight: bold;
    color: #ffffff;
    font-size: 3.6em;
}

.page1 h2 {
    color: #FFF;
    letter-spacing: 0px;
    text-align: center;
    width: 100%;
}

.page1 h3 {
    color: #FFF;
    letter-spacing: 0px;
    text-align: center;
    width: 100%;
    font-size: 1.2em;
    margin-top: 20px;
}

/* Don't display the logo for Phone */

.logo-phone {display: none;}

/* Huge Title */

.huge-title {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*margin: auto;*/
    margin-left:auto;
    margin-right: auto;
    margin-top:160px;
    margin-bottom: auto;
    width: 100%;
    height: 100px;
}

/* Go down text & Button */

.go-down {
    position: absolute;
    right: 0;
    bottom: 215px;
    left: 0;
    text-align: center;
    margin: auto;
    width: 100%;
    height: 50px;
}

.lien_gauche{
    margin-left: 50px;
}

/* Social Ico */

.social-ico {
    float: right;
    margin-top: 40px;
} 

@media screen and (max-width: 1835px) {
    .page1 {
        background-position-x: center;
        max-height:692px;
        position: relative;
    }
}

@media screen and (max-width: 990px) {
    .page1 h1 {
        font-size:2.8em; 
        margin-top: 00px;
        margin-bottom:10px;
    }
    .page1 h2 {
        font-size: 2.4em;
        line-height: 26px;
    }
    .page1 h3 {
        font-size: 1.5em;
        margin-top: 10px;
    }

    .lien_savoir_plus{
        width: 245px;
        position: absolute;
        top:0px;
        left:36%;
    }    
    .lien_gauche{
        width: 245px;
        margin-left: 0px;
        position: absolute;
        top:80px;
        left:36%;
    }
    .page1 p.fleche_down{
        display: none;
    }
}

@media screen and (max-width: 768px) {

    .page1 h1 {
        font-size:1.8em; 
        margin-top: 10px;
        margin-bottom:10px;
    }
    .page1 h2 {
        font-size: 1.4em;
        line-height: 26px;
    }
    .page1 h3 {
        font-size: 1em;
        margin-top: 10px;
    }

    .go-down {
        top:450px;
    }
    .lien_savoir_plus img{
        width: 245px;
    }    
    .lien_gauche img{
        width: 245px;
        margin-left: 0px;
    }
    .page1 p.fleche_down{
        display: none;
    }
}


/* 05. PAGE 2 SETTINGS ================================================== */


.page2 {
    background: #ffffff no-repeat center;
    padding: 80px 0;
    min-height: 700px;
}


.page2 h3 {
    color: #FFF;
}



/* Image from right */

/*.iphone {
    bottom: 0;
    /*right: -70px;*/
   /* right: 444px;
    position: absolute;
    top: 5%; /*3%*/
/*}*/

/* Brand icon */


.brand li {
    display: inline-block;
    list-style: none;
    padding: 0 20px;
    opacity: 1;
}

.brand li:first-child {
    padding-left: 0px;
}

/* ToolTip */


.has-tooltip {
    position: relative;
}

.has-tooltip .tooltip {
    pointer-events: none;
    position: absolute;
    z-index: 9999;
    left: 50%;
    bottom: -55px;
    opacity: 0;
    -webkit-transition: ease-out opacity 300ms;
    -webkit-transition-delay: 0ms;
    -moz-transition: ease-out opacity 300ms 0ms;
    -o-transition: ease-out opacity 300ms 0ms;
    transition: ease-out opacity 300ms 0ms;
}

.has-tooltip .tooltip span {
    display: block;
    white-space: nowrap;
    position: relative;
    background: rgba(255, 255, 255, 1);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    padding: 12px 15px;
    left: -50%;
    font-size: 12px;
    font-weight: normal;
    color: #777;
}

.has-tooltip .tooltip span:after {
    top: -40%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-width: 8px;
    left: 50%;
    margin-left: -8px;
}

.has-tooltip:hover span {
    opacity: 1;
}


.contenu_gauche{
    background: url('../img/bg_gauche.png');
    /*background-size: cover;*/
    height: 421px;
    width: 700px;
    position: absolute;
    left: -250px;
}

.contenu_gauche h3{
    font-weight: bold;
    font-size: 1.8em;
    margin-left: 45px;
    padding-top: 150px;
    padding-bottom: 0px;

}

.contenu_gauche p{
    margin-left: 45px;
    line-height: 25px;
    font-size:0.8em;
    font-weight: bold;
}

.contenu_droite{
    background: url('../img/bg_droite.png');
    height: 527px;
    width: 1064px;
    position: absolute;
    top: -18px;
    left: 230px;
}

.contenu_droite h3{
    color:#727b8c;
    padding-top: 80px;
    font-size: 1.4em;
    font-weight: bold;
    padding-left: 125px;
    padding-right: 145px;
    padding-bottom: 10px;
}
.contenu_droite p{
    color:#727b8c;
    padding-left: 125px;
    padding-right: 145px;
    line-height: 20px;
    font-size: 0.9em;
}

.contenu_droite hr{
    color:#dadada;
    background-color: #dadada;
    border: 0;
   /* border-top: 1px solid rgba(0, 0, 0, 0.1);*/
    border-bottom: 1px solid rgba(218, 218, 218, 0.3);
    display: block;
    clear: both;
    margin-left: 125px;
    margin-right: 185px;
    margin-bottom: 20px;
    height: 1px;
}

.contenu_droite .bt_rouge{
    color:#db011c;
    border: 1px solid #db011c;
    padding:8px;
    width: 200px;
    text-align: center;
    position: absolute;
    right: 145px;
    bottom: 160px;
}
.contenu_droite .bt_rouge a{
    color:#db011c;
}

@media screen and (max-width: 1465px) {
    .contenu_gauche{
        left: -195px;
    }
     .contenu_droite{
        left: 164px;
    }
}
@media screen and (max-width: 1280px) {
   .contenu_gauche{
        left: -118px;
    }
    .contenu_gauche p{
        max-width: 245px;
    }
     .contenu_droite{
        left: 119px;
    }
}
@media screen and (max-width: 1115px) {
    .contenu_droite{
        max-width: 925px;
    }

    .contenu_droite h3{
        padding-top: 45px;
        padding-left: 70px;
        padding-right: 70px;
    }
    .contenu_droite hr{
        margin-left: 70px;
        margin-right: 70px;
        margin-bottom: 10px;
    }
    .contenu_droite p{
        padding-left: 70px;
        padding-right: 70px;
        line-height: 20px;
    }
    .contenu_droite .bt_rouge{
        left:70px;
    }
}
@media screen and (max-width: 1110px) {
   .contenu_gauche{
        position:relative;
        left:0px;
    }
    .contenu_gauche h3{
        max-width: 245px;
    }
    .contenu_gauche p{
        max-width: 245px;
    }
    .contenu_droite{
        position: relative;
        left: 0px;
        /*background-position: center;*/
        background-image: none;
        max-width: 700px;
        margin-top: 439px;
        height: 200px;
    }

    .contenu_droite h3{
        padding-top: 45px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
    }
    .contenu_droite hr{
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
    }
    .contenu_droite p{
        padding-left: 0px;
        padding-right: 0px;
        line-height: 20px;
        font-size: 1em;
    }
    .contenu_droite .bt_rouge{
        padding:8px;
        width: 200px;
        text-align: center;
        position: relative;
        bottom: 0px;
        margin-top: 10px;
        left:0px;

    }
}

@media screen and (max-width: 768px) {
    .contenu_gauche{
        position:relative;
        left:0px;
    }
    .contenu_gauche h3{
        max-width: 245px;
    }
    .contenu_gauche p{
        max-width: 245px;
    }
    .contenu_droite{
        position: relative;
        left: 0px;
        /*background-position: center;*/
        background-image: none;
        max-width: 285px;
    }
    .contenu_droite h3{
        padding-top: 45px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
    }
    .contenu_droite hr{
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
    }
    .contenu_droite p{
        padding-left: 0px;
        padding-right: 0px;
        line-height: 20px;
        font-size: 1em;
    }
    .contenu_droite .bt_rouge{
        padding:8px;
        width: 200px;
        text-align: center;
        position: relative;
        right: 0px;
        bottom: 0px;
        margin:auto;
        margin-top: 10px;

    }
}


/* PAGE 22 SETTINGS ================================================== */
.page22 {
    background: #ffffff no-repeat center;
    padding: 80px 0;
    min-height: 700px;
}

.contenu_gauche22{
    height: 409px;
    width: 617px;
    position: absolute;
    left: -200px;
    top: -105px;
}
.contenu_gauche22 h3, .contenu_gauche22 h4, .contenu_gauche22 p{
    text-align: center;
}
.contenu_gauche22 h4{
    font-size: 1em !important;
}

.contenu_droite22{
    height: 527px;
    width: 415px;
    position: absolute;
    top: 50px;
    left: 0px;
}

.page22 h3 {
    color: #727b8e;
    padding-top: 0px;
    font-size: 1.2em;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
}
.page22 h4 {
    color: #727b8e;
    font-size: 1.2em;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top:0px;
}
.page22 p {
    color: #727b8e;
    font-size: 1em;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top:0px;
}

.contenu_droite22 .bt_rouge{
    color:#db011c;
    border: 1px solid #db011c;
    padding:8px;
    width: 200px;
    text-align: center;
    margin-left: 10px;
    margin-top: 20px;
}
.contenu_droite22 .bt_rouge a{
    color:#db011c;
}

/* Image from right */
.laugil4000 {
    right: 4%; /*100px*/
    position: absolute;
    top: 14%; 
}

@media screen and (max-width: 1851px) {
    .laugil4000 {
        right: 1%;
    } 
}
@media screen and (max-width: 1680px) {
    .laugil4000 {
        display: none;
    }
}

@media screen and (max-width: 1360px) {
    .contenu_gauche22{
        left: -90px;
    }
    .contenu_droite22{
        left: 70px;
    }
}

@media screen and (max-width: 1140px) {
    .contenu_gauche22{
        width: 450px;
        left: 38px;
    }
    .contenu_droite22{
        left: 35px;
    }
}

@media screen and (max-width: 960px) {
    .contenu_gauche22{
        width: 340px;
        left: 64px;
    }
    .contenu_droite22{
        width: 340px;
        left: 41px;
    }
}

@media screen and (max-width: 768px) {
    .page22 {
        padding: 20px 0;
        height: 900px;
    }

    .contenu_gauche22{
        position: relative;
        width: 100%;
        left: 0px;
        /*top:-260px;*/
    }

    .contenu_gauche22 p{
        line-height: 20px;
    }

    .contenu_droite22{
        position: relative;
        left: 0px;
        width: 100%;
        top:0px;
    }

    .contenu_droite22 p{
        line-height: 20px;
    }

    .laugil4000 {
        display: none;
    }
    .contenu_droite22 .bt_rouge{
        padding:8px;
        width: 200px;
        text-align: center;
        position: relative;
        right: 0px;
        bottom: 0px;
        margin:auto;
        margin-top: 10px;

    }
}



/* 06. PAGE 3 SETTINGS ================================================== */



.page3 {
    background: url('../img/bg_achat.jpg')#ffffff;
    z-index: 999;
    position: relative;
    padding: 80px 0;
    height: 809px; /*880*/
}

.page3 h3 {
    color: #FFF;
    font-weight: 100;
}

/* Article */

.page3 .article {
    position: relative;
    z-index: 999;
    /*background: #131313;*/
    height: 100%;
}

/* Carousel */

.page3 .slider-mac {
	margin-left: 0%;
	position: absolute;
	max-width: 940px;
	bottom: -220px;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-moz-transition: -moz-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

/* Drag-it icon */

#dragit {
    background: rgba(19,19,19,0.7);
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 999;
    position: absolute;
}

#dragit img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0px;
    bottom: 220px;
    right: 0;
}

.page3 p{
    color:#727b8e;
}

.page3 .texte_bas{
    margin-top:505px;
}

.bandeau{
    background: url('../img/bg_bandeau.jpg');
    width: 100%;
    position: absolute;
    bottom: 305px;
    text-align: center;
    height: 128px;
}

.bandeau h3{
    margin-top: 22px;
    padding-bottom: 0px;
    font-weight: bold;
    font-size: 2.4em;
    padding-bottom: 0px;
}
.bandeau p{
    font-size: 1.3em; 
    color:#ffffff;
}
@media screen and (max-width: 1700px) {
   .page3 {
       background-position:center;
    }
}
@media screen and (max-width: 768px) {
    .page3 {
        background-position: 47%;
    }

    .bandeau h3{
        font-size: 1.3em;
    }
    .bandeau p{
        font-size: 1em; 
    }
    .bandeau{
        margin-bottom: 35px;
    }

    .page3 .texte_bas p{
       /* margin-top:505px;*/
    }
}



/* 07. PAGE 4 SETTINGS ================================================== */



.page4 {
    background: url('../img/fond_goutes.jpg');
    z-index: 999;
    position: relative;
    padding: 25px 0;
    height: 578px;
}

.page4 h4 {
	color:#FFF;
}

.centre4{
    position: absolute;
    top:37px;
    left: 28%;
    width: 50% !important;
}

.centre4 h3{
    color: #727b8e;
    font-size: 1.9em;
    font-weight: bold;
    padding-bottom: 10px;
}
.centre4 p{
    font-size: 0.8em;
    line-height: 17px;
}

.contenu_gauche4{
    height: 463px;
    width: 344px;
    position: absolute;
    left: -124px;
    top: 30px;
}

#texte_gauche4{
    width: 422px;
    height: 265px;
    padding-left:40px;
    padding-right:40px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#texte_gauche4 h3{
    color: #727b8e;
    font-size: 2.8em;
    padding-bottom: 0px;
}

#texte_gauche4 hr{
    color:#dadada;
    background-color: #dadada;
    border: 0;
    border-bottom: 1px solid rgba(218, 218, 218, 0.3);
    display: block;
    clear: both;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    height: 1px;
}

#texte_gauche4 p{
    color: #727b8e;
    font-size: 0.8em;
    line-height: 17px;
}

#texte_gauche4 .bt_rouge{
    color:#db011c;
    width: 200px;
    margin-top: 4px;
}
#texte_gauche4 .bt_rouge a{
    color:#db011c;
    font-size: 0.8em;
}

.contenu_droite4{
    background: url('../img/fond_cuisine.png');
    height: 265px;
    width: 885px;
    position: absolute;
    top: 145px;
    left: 310px;
}

.contenu_droite4 #cadre_devis{
    background-color: #db011c;
    text-align: center;
    position: absolute;
    top:0px;
    right: 137px;
    width: 175px;
    padding-bottom: 21px;
}

.contenu_droite4 #cadre_devis p{
    font-size: 0.8em;
    font-weight: bold;
}

.contenu_droite4 #bouton_devis{
    background-color: #db011c;
    border: 1px solid #ffffff;
    padding:13px;
    width: 125px;
    text-align: center;
    margin-left: 25px;
    margin-top: 34px;
    border-radius: 10px;
    font-size: 1.5em;
    margin-bottom: 10px
    /*position: absolute;
    top:5px;
    right: 183px;*/
}
.contenu_droite4 #bouton_devis a{
    color:#ffffff;
}

@media screen and (max-width: 768px) {
    .centre4{
        position: relative;
        top:-50px;
        left: 0%;
        width: 100% !important;
    }

    .centre4 h3{
        font-size: 1.8em;
    }
    .contenu_gauche4{
        width: 249px;
        position: relative;
        left: 6%;
        top: -34px;
    }

    .contenu_droite4{
        position: relative;
        top: -162px;
        left: -50px;
    }
    .contenu_droite4 #texte_gauche4{
        width: 380px;
    }
    .contenu_droite4 #cadre_devis{
        position: relative;
        top:40px;
        left: 1%;
        width: 100%;
        padding-bottom: 1px;
        padding-top: 1px;
        margin-top: 5px
    }
    .contenu_droite4 #bouton_devis{
        width: 311px;
    }
    .contenu_droite4 #cadre_devis p{
        width: 363px;
    }
}


/* 08. TESTIMONIALS  ================================================== */


#testimonial {
    background: url('../img/fond_avis.jpg');
	padding:80px 0; 
	position: relative;
    height: 989px; 
}

#testimonial h5{
    color:#6b747e;
    margin-left: 170px;
    margin-top: 35px;
}

#testimonial h3{
    font-size: bold !important;
    padding-bottom:0px;
}
#testimonial p.titre_top_testimonial{
    color: #727b8e;
    line-height: 20px;
}

#slider1{
    position: absolute;
    left: 268px;
    top: 192px;
}
#slider2{
    position: absolute;
    right: 225px;
    top: 192px;
}

#slider1, #slider2 {
    /*padding-top: 15px; */
    /*padding-right:15px;*/
    width: 750px;
}

#slider1 ul li, #slider2 ul li{
    background: url('../img/fond_slide.png');
    width: 750px !important;
    height: 516px;
    /*padding-left:100px;*/
    /*padding-top: 100px;*/
}

#slider1 .cadre_slide, #slider2 .cadre_slide{
    padding-left:120px;
    padding-top: 83px;
}

#slider1 .img_box_slide, #slider2 .img_box_slide{
    width: 130px;
    height: 130px;
    float:left;
}

#slider1 img, #slider2 img{
    width:130px;
    height:130px;
    margin:0px auto;
    overflow:hidden;
}

#slider1 p ,#slider2 p {
    padding-right: 20px;
    color:#8c9aa8;
}

.title{
	/*text-transform:uppercase;*/
}

.sub{
	/*margin:10px 0;*/
    margin-left:170px;
    margin-top:0px;
	color:#6b747e;
	font-size:14px;
}

.textblock{
	line-height:21px;
	position:relative;
    margin-top: 70px;
    margin-left: 15px;
    width: 455px;
}

.textblock p{
    color:#6b747e;
}

#testimonial .guillemets{
    width: 65px;
    height: 47px;
    border-radius: 0%;
    float: right;
}
@media screen and (max-width: 1835px) {
   #slider1{
        left: 170px;
        top: 192px;
    }
    #slider2{
        right: 150px;
        top: 192px;
    }
}

@media screen and (max-width: 1660px) {
   #slider1{
        left: 20px;
        top: 192px;
    }
    #slider2{
        right: 0px;
        top: 192px;
    }
}

@media screen and (max-width: 1360px) {
   #slider1{
        left: -65px;
        top: 192px;
    }
    #slider2{
        right: -95px;
        top: 192px;
    }
}

@media screen and (max-width: 1180px) {
   #slider1{
        left: 20%;
        top: 125px;
    }
    #slider2{
        left: 20%;
        top: 470px;
    }
}

@media screen and (max-width: 990px) {
   #slider1{
        left: 14%;
        top: 125px;
    }
    #slider2{
        left: 14%;
        top: 470px;
    }
}

@media screen and (max-width: 768px) {
    #testimonial{
        height: 396px;
    }
    #slider1{
        left: -107px;
        top: 220px;
        display: none;
    }
    #slider2{
        right: -230px;
        top: 545px;
        display: none;
    }
    #testimonial .title{
        width: 253px;
        margin-left: 140px !important;
        text-align: left !important;
    }

    #testimonial .sub{
        margin-left:140px !important;
        width: 253px;
        text-align: left !important;
    }
    #testimonial .textblock{
        line-height:20px;
        margin-top: 70px;
        margin-left: 15px;
        width: 370px;
        text-align: left !important;
    }
}



/* 07. PAGE 44 FORMULAIRE SETTINGS ================================================== */



.page44 {
    background: url('../img/fond_formulaire.jpg');
    z-index: 999;
    position: relative;
    padding: 25px 0;
    height: 929px;
}

.page44 h4 {
    color:#FFF;
}

.contenu_gauche44{
    height: 730px;
    width: 342px;
    position: absolute;
    left: -165px;
    top: 30px;
}

#devis_gratuit{
    width: 586px;
    height: 679px;
    padding-left:40px;
    padding-right:40px;
    padding-top: 13px;
    padding-bottom: 20px;
}

#devis_gratuit h3{
    color: #727b8e;
    font-size: 2.8em;
    padding-bottom: 0px;
}

#devis_gratuit hr{
    color:#dadada;
    background-color: #dadada;
    border: 0;
    border-bottom: 1px solid rgba(218, 218, 218, 0.3);
    display: block;
    clear: both;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    height: 1px;
}

#devis_gratuit p{
    color: #727b8e;
    font-size: 0.8em;
    line-height: 17px;
}

#devis_gratuit .bt_rouge{
    color:#db011c;
    width: 200px;
    margin-top: 4px;
}
#devis_gratuit .bt_rouge a{
    color:#db011c;
    font-size: 0.8em;
}

.contenu_droite44{
    background: url('../img/fond_gris.png');
    background-repeat: repeat-y;
    min-height: 693px; /*679*/
    width: 586px;
    position: absolute;
    top: 52px;
    left: 475px;
}

@media screen and (max-width: 1210px) {
    .contenu_gauche44{
        left: 0px;
    }

    .contenu_droite44{
        left: 350px;
    }
}

@media screen and (max-width: 960px) {
    .contenu_gauche44{
        display: none;
    }

    .contenu_droite44{
        left: 19%;
    }
}

@media screen and (max-width: 768px) {
    .contenu_gauche44{
        display: none;
    }

    .contenu_droite44{
        width: 100%;
        position: relative;
        top: 0px;
        left: 0px;
    }

    #devis_gratuit{
        width: 100%;
        height: 679px;
        padding-left:5px;
        padding-right:5px;
        padding-top: 13px;
        padding-bottom: 20px;
    }

    .form_register{
         width: 100% !important;
         margin:0 !important;

    }
    #header_form_img{
       /* width: 60%;*/
    }

}

/* 09. PAGE 5 / SUBSCRIBE SETTINGS ================================================== */


.page5 {
    background: #363941 no-repeat center;
    z-index: 999;
    padding: 0px 0 0px 0;
    
}

form {
    overflow: hidden;
}
	
/* Mail Input Send */

#signup input {
    background-clip: padding-box;
    background-color: #FFF;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    border-radius: 3px;
    border: none;
    margin: 15px 0;
    color: #333;
    height: 50px;
    resize: none;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 9px 20px 8px;
    transition: all .3s ease-in-out;
    width: 98%;
}

#signup .button {
    background-clip: padding-box;
    background-color: #5ac6ff;
    color: #FFF;
    border-radius: 4px;
    border: none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 12px;
    cursor: pointer;
    margin: 15px 0;
    height: 50px;
    font-weight: normal;
    letter-spacing: 3px;
    text-shadow: none;
    text-transform: uppercase;
    width: 98%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#signup .button:hover {
    color: #FFF;
    background: #87d5fe;
}

/* Promise we do not spam */

#signup .spam {
    font-size: 12px;
    padding: 10px 0 10px 0;
    color: #888;
}

#signup .spam img {
    margin-top: 10px;
    margin-bottom: -6px;
}

/* Message if it's ok */

#signup .msg-ok {
	font-size: 12px;
    padding: 10px 0 10px 0;
    color: #888;
}

.page5 p{
    color:#ffffff;
}

.page5 .small{
    font-size: 0.8em;
}

.social_icone{
    /*position: absolute;*/
    float: right;
}

.social_icone ul{
    list-style-type:none;
}
.social_icone li {
    margin-left:25px;
    float:left; /*pour IE*/
}

.social_icone .fb{
    background:url('../img/facebook_hover.png') no-repeat;
    width:21px;
    height: 20px;
    display: block;
}
.social_icone .li{
    background:url('../img/linkedin.png') no-repeat;
    width:21px;
    height: 20px;
    display: block;
}
.social_icone .go{
    background:url('../img/googleplus.png') no-repeat;
    width:21px;
    height: 20px;
    display: block;
}
.social_icone .tw{
    background:url('../img/twitter.png') no-repeat;
    width:21px;
    height: 20px;
    display: block;
}
.social_icone .in{
    background:url('../img/instagram.png') no-repeat;
    width:21px;
    height: 20px;
    display: block;
}

/* PAGE 6 FOOTER 2  ================================================== */
.page6 {
    background: #363941 no-repeat center;
    z-index: 999;
    padding: 15px 0 15px 0;
    height: 60px;
    border-top: 1px solid #73757a;
}
.page6 .row{
    
}

.page6 p{
    color:#ffffff;
    font-size:0.7em;
    position: absolute;
    text-align: center;
    bottom: 15px;
    margin-left:18%;
}

@media screen and (max-width: 768px) {
    .page6 p{
        margin-left: 0px;
    }
}


/* 10. PRELOADING  ================================================== */
    


/* Preloader Effect */

#preloader {
    background-color: #FFF;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999999;
}

/* Preloading Animation */

#loading-animation {
    background-image: url("../img/loading.gif") ;
    background-position: center center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
    border-radius: 4px;
}


            
/* 11. MEDIA QUERIES  ============================================ */


@media screen and (max-width: 768px) {


.page2, .page3, .page4, .page5 {
	padding:0px 0;
	/*text-align: center;*/
	width: 100%;
	height: auto;
}

h2 {font-size: 42px;}

h3 {font-size:32px;}

.iphone {display: none; }

.cbp-af-header {
	display: none;
}

.logo-phone {display: block;}

.huge-title {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 250px;
    padding:20px;
    margin-top: 0px;
}

.page2 .columns {
    position: relative;
    width: 100%;
}

.has-tooltip .tooltip {
    pointer-events: none;
    position: absolute;
    z-index: 9999;
    left: auto;
    bottom: -60px;
    opacity: 0;
    -webkit-transition: ease-out opacity 300ms;
    -webkit-transition-delay: 0ms;
    -moz-transition: ease-out opacity 300ms 0ms;
    -o-transition: ease-out opacity 300ms 0ms;
    transition: ease-out opacity 300ms 0ms;
}

.has-tooltip .tooltip span {
    display: block;
    white-space: nowrap;
    position: relative;
    background: rgba(255, 255, 255, 1);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    padding: 12px 15px;
    left: 0%;
    font-size: 11px;
    color: #777;
}

.has-tooltip .tooltip span:after {
    top: -40%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-width: 8px;
    left: 10%;
    margin-left: -6px;
}

.page3 .slider-mac {
	margin-left: 0%;
	margin-top:80px;
	position: relative;
	max-width: 100%;
	bottom: 0px;
	padding-bottom: 0;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-moz-transition: -moz-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}


#dragit img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0px;
    bottom: 80px;
    right: 0;
}


#testimonial {text-align: center;}

#slider2 {margin-top:20px; padding-right: 0px;}

#slider2 p {padding-right: 0px;}


#showhide .trigger{display: none; left: -1000px;}

	       
}

/* Media Queries for iPad in Portrait */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

#testimonial .columns{width: 100%;}

#testimonial {text-align: center;}


.iphone {
    bottom: 0;
    right: -180px;
    position: absolute;
    display: none;
    top: 3%;}

.page2 .row .six.columns { width: 100%;}

.page3 .slider-mac {bottom: -70px; }

.page5 {padding: 40px 0;}

 }

/* Media Queries for iPad in Landscape */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	
.iphone {
    bottom: 0;
    right: -180px;
    position: absolute;
    top: 3%;
}
	
	
}