﻿@charset "utf-8";

html,body
{
    width: 100%;
    /*height: 100%;*/
    background: #dde2ff url('../images/background-gradient.png') repeat-y top center;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6em;
    letter-spacing: -0.5px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4{
    font-weight: bold;
    text-align: center;
    line-height: 125%;
}
h1{
    font-size: 25px;
    margin: 40px 0;
}
h2{
    font-size: 20px;
    margin: 35px 0;
}
h3{
    font-size: 18px;
    margin: 30px 0;
}
h4{
    font-size: 16px;
    margin: 25px 0;
}

ul, ol{
    margin: 10px 0;
}
li{
    margin-left: 25px;
    list-style: disc;
}
th{
    font-weight: bold;
}
p{margin: 20px 0;}
em{font-style: italic}
strong{font-weight: bold}
img{
    max-width: 100%;/*important for responsive*/
    padding: 1px;
}
.imgshad{
    -moz-box-shadow: 0px 0px 20px rgba(0,0,0, .5);
    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0, .5);
    box-shadow: 0px 0px 20px rgba(0,0,0, .5);
    border: 10px solid #fff;
    margin: 20px;
}
.shad{
    -moz-box-shadow: 0px 0px 20px rgba(0,0,0, .5);
    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0, .5);
    box-shadow: 0px 0px 20px rgba(0,0,0, .5);
}

/* ------------ lignes -----------------------------  */
.lpb{border-bottom: 1px dotted #ccc;}
.lpt{border-top: 1px dotted #ccc;}
hr{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0, 0), rgba(0,0,0, 0.75), rgba(0,0,0, 0));
    margin: 20px 0;
}



/* ---------------------- general & generic---------------------- */
.container-main{
    max-width: 850px;
    min-height: 400px;
    overflow: auto; /*IMPORTANT! this prevent collapsing of margin of child div with a top-margin*/
    margin: 0 auto;
    padding: 0;
    background: #fff;
    -webkit-box-shadow: -75px 0px 100px -90px #000, 60px 0px 100px -75px #000;
    -moz-box-shadow: -75px 0px 100px -90px #000, 60px 0px 100px -75px #000;
    box-shadow: -75px 0px 100px -90px #000, 60px 0px 100px -75px #000;
}
.clr{ clear: both; }
.tac{ text-align: center; }
.tal{ text-align: left; }
.tar{ text-align: right; }
.tc555{ color: #555; }
.float-left{ float: left; margin: 15px 30px 15px 0px;}
.float-right{ float: right; margin: 15px 0 15px 30px;}
.border-gp{border: 1px solid #ccc;}
.cursor-pointer{cursor: pointer}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
.arrow-small-red{}
.wavy-pattern{
    background: #fff url('../images/background-pattern-wave.gif') repeat;
}
.center-txt{
    text-align: center;
}
.note{
    color: #888;
    font-style: italic;
    font-size: 12px;
}
.img-box{
    display: block;
    width: auto;
    font-style: italic;
    font-size: 12px;
    color: #999;
    text-align: center;
}
.zone-video{
    background: #000;
    border: solid 20px #050956;
}

/* ---------------------- messages boxes ---------------------- */
.message{
    padding: 20px 20px 20px 20px;
    margin: 30px 0;
    background: rgb(198, 255, 174);
}
.message-green{
    text-align: left;
    padding: 20px 20px 20px 20px;
    margin: 30px 15px;
    border: 5px solid transparent;
    background: rgb(198, 255, 174);
    color: #000;
}
.message-green.selected{
    border: 5px solid #22691f;
}
.message-green li{
    background: url(../images/icon-tick.png) no-repeat 0 2px;
    padding: 0px 0px 0px 30px;
    list-style: none;
    margin: 0;
    line-height: 175%;
}
.message-yellow{
    text-align: left;
    padding: 20px 20px 20px 20px;
    margin: 30px 15px;
    border: 5px solid transparent;
    background: rgb(255, 240, 89);
    color: #000;
}
.message-yellow.selected{
    border: 5px solid #ee7e21;
}
.message-yellow li{
    background: url(../images/icon-exclamation-mark.png) no-repeat 0 2px;
    padding: 0px 0px 0px 30px;
    list-style: none;
    margin: 0;
    line-height: 175%;
}
.message-red{
    text-align: left;
    padding: 20px 20px 20px 20px;
    margin: 30px 15px;
    border: 5px solid transparent;
    background: rgba(255, 184, 193, 1);
    color: #000;
}
.message-red.selected{
    border: 5px solid red;
}
.message-red li{
    background: url(../images/icon-cross.png) no-repeat 0 4px;
    padding: 0px 0px 0px 30px;
    list-style: none;
    margin: 0;
    line-height: 175%;
}
.message-gray{
    text-align: left;
    padding: 20px 20px 20px 20px;
    margin: 30px 15px;
    border: 5px solid transparent;
    background: #f1f1f1;
    color: #000;
}
.message-gray.selected{
    border: 5px solid #999;
}
.message-gray li{
    background: url(../images/icon-exclamation-mark.png) no-repeat 0 2px;
    padding: 0px 0px 0px 30px;
    list-style: none;
    margin: 0;
    line-height: 175%;
}


/* ---------------------- top logo band ---------------------- */
.container-top{
    max-width: 850px;
    margin: 0 auto;
    padding: 0;
    background: none;
    position: relative;
}
.container-logo{
    padding: 45px 0;
    width: 375px;
    font-size: 28px;
    letter-spacing: -1px;
    font-family: 'Open Sans', sans-serif;
}
.container-logo a:link{
    text-decoration: none;
}
.container-logo a:hover{
    text-decoration: none;
}
.container-logo a:visited{
    text-decoration: none;
}
.container-logo img{
    max-width: 100%;
}
.container-motto{
    max-width: 455px;
    position: absolute;
    right: 0;
    top: 34px;
    text-align: right;
    font-size: 16px;
    font-style: italic;
    color: #0466fe;
    font-family: arial, helvetica, clean, sans-serif;
    /*font-weight: bold;*/
    /*letter-spacing: -0.5px;*/
}

/* -------------------------- table ------------------------------  */
.table{
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.table-row{
    display: table-row;
}
.table-cell{
    display: table-cell;
    padding: 2px 4px;
    vertical-align: top;
    position: relative;
}

/* -------------------------- table custom------------------------------  */
.br-table{}
.br-cell{
    padding: 5px 30px;
    width: 50%;
    text-align: center;
    position: relative;
}
.br-cell p{
    text-align: left;
}

/* -------------------------- table top banner------------------------------  */
.top-cta-table{
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.top-cta-row{
    display: table-row;
}
.top-cta-cell{
    display: table-cell;
    padding: 0;
    text-align: center;
    vertical-align: top;
    position: relative;
}

/* -------------------------- amazon product table------------------------------  */
.amzn-cell-img{
    max-width: 300px;
    text-align: center;
}
.amzn-cell-txt{
    max-width: 500px;
    padding: 30px;
}
.amzn-cell-txt a{
    font-size: 18px;
}
.editor-pick{
    /*position: absolute;*/
    /*top: 15px;*/
    /*right: 30px;*/
    float: right;
    padding: 0 0 0px 10px;
    position: relative;
    right: -30px;
    -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(15deg);
}

/* -------------------------- media product table------------------------------  */
.media-row-gray{
    background: #f1f1f1;
}
.media-cell-img{
    width: 50%;
    padding: 20px 30px 20px 20px;
    vertical-align: middle;
}
.media-cell-txt{
    padding: 20px 20px 20px 0px;
}


/* ---------------------- main banner ---------------------- */
.top-banner{
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.tb-txt-img{
    position: absolute;
    top: 5%;
    max-width: 272px;
}
.tb-txt-box{
    position: absolute;
    top: 50px;
    left: 0;
    max-width: 250px;
    background: #fff;
    color: #000;
    opacity: .85; filter:alpha(opacity=85);
    padding: 20px 20px 10px 20px;
    font-weight: bold;
    font-style: italic;
}
.tb-patrimoine{
    position: absolute;
    bottom: 90px;
    left: 20px;
}
.tb-cta{
    padding: 8px 15px;
    text-align: right;
    background: orangered;
    display: block;
    font-style: italic;
    font-size: 16px;
}
.tb-cta:link{
    text-decoration: none;
    color: #fff;
}
.tb-cta:hover{
    text-decoration: none;
    color: #fff;
}
.tb-cta:visited{
    text-decoration: none;
    color: #fff;
}


/* ---------------------- ilm band ---------------------- */
.container-ilm{
    background: #111;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    font-size: 16px;
}
.container-ilm a:link{
    color: #fffb72;
    text-decoration: none;
    /*font-style: italic;*/
}
.container-ilm a:visited{
    color: #fffb72;
    text-decoration: none;
}
.container-ilm a:hover{
    color: #fff;
    text-decoration: underline;
}


/* ---------------------- cta bands ---------------------- */
.container-cta{
    min-height: 100px;
}
.cc-soft-cta{
    width: 50%;
    float: left;
    padding: 25px 0;
    text-align: center;
}
.cc-direct-cta{
    width: 49%;
    float: left;
    padding: 25px 0;
    text-align: center;
}
.cc-big-txt{
    font-size: 25px;
    font-style: italic;
    padding: 100px 0;
    font-weight: 100;
}
.cc-big-txt a:link{
    text-decoration: none;
}
.cc-big-txt a:visited{
    text-decoration: none;
}
.cc-big-txt a:hover{
    text-decoration: underline;
}



/* ------------- box-social ------------------- */
.box-social{
    max-width: 700px;
    margin: 30px auto;
}
.bxs-fb{
    width: 500px;
    margin: 30px auto 0px auto;
}

/* ------------- fadein slideshow media ------------------- */
#mediaslideshow{
    position:relative;
    height:85px;
}
#mediaslideshow div {
    text-align:center;
    max-width:100%;
}
#mediaslideshow div img{
    margin: 0 13px;
    filter:alpha(opacity=50);/* for IE */ opacity:0.5;/* CSS3 standard */
}
#mediaslideshow div img:hover{
    filter:alpha(opacity=100);/* for IE */ opacity:1;/* CSS3 standard */
}

/* ------------- auto scroller-x (serialscroll) ---------------------- */
.sliderbox{
    position:relative;
    font-weight:bold;
}
#infiniteslider{
    padding:0; margin:0;
    max-width:100%;
    height:140px;
    white-space:nowrap;
    overflow-x:hidden;
    overflow-y:hidden;
    list-style: none;
}
#infiniteslider li{
    display: inline;
    width: 180px;
    height: 140px;
    margin: 0;
    padding: 30px;
}
#infiniteslider img{
    margin:0 1px 0 0;
    max-width: none;
}
.sliderbox:hover #infiniteslider{
    filter:alpha(opacity=80);/* for IE */ opacity:0.8;/* CSS3 standard */
}

/* ------------- slider testimonial ----------------- */


/* ---------------------- products icons ---------------------- */
.container-products-icons{
    padding: 0;
    margin: 0;
    min-height: 140px;
    font-size: 13px;
    background: #f0f0f0;
    /*below: for evenly spaced blocks that break down in mobile*/
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.cpi-2x2{} /*keep: for mobile layout*/
.cpi-box{
    padding: 10px;
    margin: 0;
    width: 150px;
    text-align: center;
    /*below: for evenly spaced blocks that break down in mobile*/
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.cpi-box p{
    margin: 7px 0;
    padding: 0;
}
.cpi-box:link {
    text-decoration: none;
    color: #333;
}
.cpi-box:visited {
    text-decoration: none;
    color: #333;
}
.cpi-box:hover {
    text-decoration: underline;
    color: #192cb3;
    opacity: .85; filter:alpha(opacity=85);
}


/* ---------------------- main text zone ---------------------- */
.container-main-txt{
    background: #fff;
    /*max-width: 550px;*/
    padding: 0 10px;
    margin: 0 auto;
    /*line-height: 125%;*/
}
.container-main-txt h1{
    font-size: 30px;
    color: #000;
    font-weight: bold;
    line-height: 100%;
}
.container-main-txt p{
    margin-left: 40px;
    margin-right: 40px;
}

/* ---------------------- small text ---------------------- */
.container-small-txt{
    max-width: 600px;
    padding: 0 10px;
    margin: 0 auto;
    /*line-height: 125%;*/
}
.container-small-txt h1{
    font-size: 30px;
    color: #000;
    font-weight: bold;
    line-height: 100%;
}




/* ---------------------- container-squares ---------------------- */
.container-squares{
    max-width: 630px;
    margin: 0 auto;
    padding: 7px 7px 7px 7px;
    font-size: 18px;
}
.container-squares a:link{
    text-decoration: none;
    color: #192cb3;
}
.container-squares a:visited{
    text-decoration: none;
    color: #192cb3;
}
.container-squares a:hover{
    text-decoration: none;
    color: #192cb3;
}
.cs-big-square{
    max-width: 607px;
    max-height: 509px;
    float: left;
    margin: 0 1px 5px 0;
    border-left: 4px solid #fff;
}
.cs-big-square:hover{
    border-left: 4px solid #101d74;
}
.cs-small-square{
    width: 301px;
    height: 252px;
    float: left;
    margin: 0 1px 5px 0;
    position: relative;
    border-left: 4px solid #fff;
}
.cs-small-square img{
    position: absolute;
    z-index: 0;
}
.cs-small-square p{
    z-index: 1;
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 0;
    margin: 0;
}
.cs-ss-reverse:link p{color: #fff;}
.cs-ss-reverse:visited p{color: #fff;}
.cs-ss-reverse:hover p{color: #fff;}
.cs-small-square:hover{
    border-left: 4px solid #101d74;
}
.cs-rectangle {
    max-width: 607px;
    max-height: 252px;
    float: left;
    margin: 0 1px 5px 0;
    border-left: 4px solid #fff;
}
.cs-rectangle:hover {
    border-left: 4px solid #101d74;
}


/* ---------------------- container-quote ---------------------- */
.container-quote{
    font-size: 25px;
    font-style: italic;
    color: #333;
    text-align: center;
    padding: 80px 0;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fff), color-stop(1, #d8d8d8) );
    background: -moz-linear-gradient( center top, #fff 5%, #d8d8d8 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#d8d8d8');
    background-color: #d8d8d8;
    position: relative;
}
.cq-quote{
    position: absolute;
    left: 80px;
    top: 50px;
}


/* ---------------------- container questions ---------------------- */
.container-question{
    padding: 30px 0;
    text-align: center;
    font-size: 20px;
    color: #000;
    font-weight: 100;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

}
.container-question img{
    margin: 0 0 45px 0;
}
.container-question .button-rose{
    padding: 17px 100px;
    text-transform: capitalize;
}
.cq-form-box{
    max-width: 800px;
    display: inline-block;
    text-align: left;
}
.cq-form-delivery-method{
    margin: 20px 0;
}
.cq-form-delivery-address{
    display: none;
    margin: 10px 0;
    padding: 20px 0;
    background: rgba(254, 255, 179, 1);
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
}
.cq-header{
    font-size: 35px;
    color: #192cb3;
    font-weight: normal;
    text-transform: uppercase;
    padding: 0;
    margin: 0px auto 30px auto;
    max-width: 600px;
}
.cq-label{
    font-weight: normal;
    display: inline-block;
    width: 150px;
    text-align: right;
    margin: 5px 20px 0 0;
    vertical-align: middle;
}
.cq-note{
    display: inline-block;
    font-size: 13px;
    font-style: italic;
    color: #333;
    padding: 0 0 0 15px;
}
.cq-note-nextline{
    display: inline-block;
    font-size: 16px;
    font-style: italic;
    color: #333;
    padding: 0 0 10px 170px;
}
.cq-submit{
    margin: 20px 0;
}




/* ---------------------- container testimonials ---------------------- */
.container-testimonials{
    background: #2b2b2b;
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 0px #000;
    /*below: for evenly spaced blocks that break down in mobile*/
    /*text-align: justify;*/
    /*-ms-text-justify: distribute-all-lines;*/
    /*text-justify: distribute-all-lines;*/
}
.cts-header{
    background: #403f3d;
    padding: 6px 0;
    /*margin: 5px 0;*/
    text-align: center;
    font-size: 20px;
}
.cts-mtl{
    padding: 40px 0;
    text-align: center;
}
.cts-box{
    padding: 30px 20px;
    margin: 0;
    width: 220px;
    font-size: 18px;
    font-style: italic;
    text-align: center;
    font-weight: 100;
    display: inline-block;
    vertical-align: top;
    /*below: for evenly spaced blocks that break down in mobile*/
    /*vertical-align: top;*/
    /*display: inline-block;*/
    /**display: inline;*/
    /*zoom: 1;*/
}
.cts-testimonial{
    position: relative;
}
.cts-quote{
    position: relative;
    margin: 0 10px 0 0;
    left: -5px;
}
.cts-bywho{
    color: #ccc;
    font-style: normal;
}



/* ---------------------- container footer ---------------------- */
.footer-img{
    padding: 0;
}
.container-footer{
    background: #343434;
    color: #aaa;
    text-align: center;
}
.wrapper-table{
    display: table;
    width: 100%;
}
.wrapper-table img{
    width: 100%;
    padding: 0;
}
.cf-image{
    background: #fff url('../images/footer-computer.jpg') no-repeat center;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 420px;
    color: #101d74;
    text-shadow: 1px 1px 0px #000;
    font-size: 30px;
    font-weight: normal;
}
.cf-footer-links{
    padding: 15px;
}
.cf-footer-links a:link{
    color: #888;
    text-decoration: none;
    padding: 0 8px;
    /*border-right: 1px solid #666;*/
}
.cf-footer-links a:visited{
    color: #888;
    text-decoration: none;
}
.cf-footer-links a:hover{
    color: #ccc;
    text-decoration: underline;
}
.cf-logo{
    vertical-align: middle;
    margin-right: 30px;
}
.cf-year{
    padding: 0 0 0 30px;
    color: #888;
}

