/* 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;
    outline:0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
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;
}

/* Reset du textarea */

textarea{
    resize: none;
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

input, select{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    outline: none;
}

/* ---- Classe modulaires à utiliser un peu partout ---- */

/* Display mode */
.hiddenBlock{
    display: none !important;
}

.blinkingElement{
    -webkit-animation: blinkingElementThingie 1s infinite; /* Chrome, Safari, Opera */
    animation: blinkingElementThingie 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes blinkingElementThingie {
    0%   {opacity: 1;}
    50%  {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes blinkingElementThingie {
    0%   {opacity: 1;}
    50%  {opacity: 0;}
    100% {opacity: 1;}
}

.hiddenText{
    text-indent: -9999px;
}

.ellipsisBlock{
    white-space: nowrap;
    overflow-x: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.defautCursor{
    cursor: default;
}

.cursorPointer{
    cursor: pointer;
}

.inlineBlockTop{
    vertical-align: top;
    display: inline-block !important;
}

.inlineBlockMiddle{
    vertical-align: middle;
    display: inline-block !important;
}

.halfBlock{
    width: -webkit-calc(50% - 21px);
    width: -moz-calc(50% - 21px);
    width: calc(50% - 21px);
    margin-right: 33px;
}

.halfBlock+.halfBlock{
    margin-right: 0;
}

.thirdBlock{
    width: -webkit-calc(33% - 66px);
    width: -moz-calc(33% - 66);
    width: calc(33% - 66px);

    vertical-align: top;
    display: inline-block;
}

.thirdBlock:nth-child(2){
    margin: 0 99px;
}

.fullSizeBlock{
    width: 100%;
    height: 100%;
    display: block;
}

.centerHorizontallyVertically{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    margin: auto;
}

.relativeBlock{
    position: relative !important;
}

.staticBlock{
    position: static !important;
}

.width100Percent{
    width: 100%;
}

.leftHalf, .rightHalf{
    width: 50%;
    margin: -2px;
}

/* Transitions */
.hasTransitions{
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.hasShortTransitions{
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.removeTransitions{
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: color 0 ease-in !important;
    transition: none !important;
}


.horizontalFlip{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.verticalFlip{
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

/* Border */
.smallBorderRadius{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.noBorderRadius{
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.noBorder{
    border: none !important;
}

.greyBorderBlock{
    padding: 20px;
    border: 1px solid #d3d3d3;
}

.borderBox{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

/* Couleurs */

.whiteText, .whiteText *{
    color: #ffffff;
}

.greyText, .greyText *{
    color: #545454;
}

.noBackgroundColor, .noBackgroundColor:hover{
    background-color: transparent !important;
}

/* Background */

.coverDiv{
    background-size: cover;
    background-position: center;
}

.whiteCrossedFabric{
    background-image: url('../resources/whiteBackgroundFabric.png');
}

/* Texte */

strong{
    font-weight: 600;
}

em{
    font-style: italic;
}

.smallText{
    opacity: 0.8;
    font-size: 14px;
    letter-spacing: -0.5px;
}

.capsText{
    text-transform: uppercase;
}

.textAlignCenter, .textAlignCenter *{
    text-align: center;
}

.bigLink{
    text-decoration: none !important;
    color: #ffffff !important;
    font-weight: 400;
    font-size: 27px;
}

/* Sticky footer */

html, body {
    height:100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -123px;
}

.push {
    height: 75px;
}

/* ---- Classes particulières à Laloux --- */

body a.redLink, body a.redLink span{
    color: #da5b58 !important;
}

body a.redLink:hover, body a.redLink:hover span{
    color: #EF5E5B !important;
}

.lineLink{
    color: #36b591 !important;
    display: inline !important;
    padding: 0 !important;
    text-decoration: underline !important;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.lineLink:hover{
    color: #3ccda8 !important;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.blockLink{
    color: #ffffff;
    background-color: #36b591;
    text-align: center;
    display: inline-block;
    padding: 13px 20px;
    letter-spacing: 0.15px;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    text-decoration: none;
}

.blockLink:hover{
    text-decoration: none;
    color: #ffffff !important;
    text-shadow: 1px 1px 8px rgba(255, 255, 255, 0.7);
    background-color: #3ccda8;
}

a.bigBlock{
    font-size: 23px;
    font-weight: 100;
    color: #ffffff;
    padding: 15px 27px;
}

.link3D{
    font-weight: 100;
    border-bottom: 4px solid #349976;
}

.link3D:hover{
    margin-top: 2px;
    border-bottom: 2px solid #37b18c;
}

.blockLink.disabledButton{
    background-color: #B6B6B6;
    cursor: default;
}

.blockLink.disabledButton.link3D{
    border-bottom: 4px solid #9D9D9D;
}

.blockLink.disabledButton.link3D:hover{
    border-bottom: 4px solid #9D9D9D;
}

.beigeText, .beigeText *{
    color: #aea198;
}


.brownText, .brownText *{
    color: #a19891;
}


.greyText, .greyText *{
    color: #545454;
}

.whiteText, .whiteText *{
    color: #fff;
}

.verticalBrownLine{
    width: 1px;
    background-color: #b0a79f;
    height: 139px;
}

.horizontalBrownLine{
    width: 100%;
    display: block;
    height: 1px;
    background-color: #b0a79f;
}

/* Background color */

.beigeBackground{
    background-color:#bab0a6;
}

.brownBackground{
    background-color:#a69c93;
}

.lightGreyBackground{
    background-color: #c7c7c7;
}

/* Effets glow */

.glowEffect{
    -webkit-box-shadow: 0px 0px 11px 0px rgba(255, 255, 255, 0.83);
    -moz-box-shadow:    0px 0px 11px 0px rgba(255, 255, 255, 0.83);
    box-shadow:         0px 0px 11px 0px rgba(255, 255, 255, 0.83);

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* ---- Règles générales - a, forms, ... --- */

html, body{
    width: 100%;
    height: 100%;
}

html{
    background-image: url('../resources/backgroundFabric.png');
}

html *{
    font-family: 'Roboto', sans-serif;
}

a{
    color: #36b591;
    display: inline;
    padding: 0;
    text-decoration: underline;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

a:hover, .greenLink{
    color: #3ccda8;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

a.greenLink:hover{
    color: #41dcb5;
}

h1, h2.correctedH1{
    font-weight: 100;
    color: #545454;
    font-size: 29px;
    margin-bottom: 9px;
}

h2.correctedH1{
    text-transform: none;
}

.specialSliderCaption h2.correctedH1{
    margin-top: 9px;
    font-size: 27px;
    margin-bottom: 13px;
}

h1.smallH1{
    font-size: 22px;
    margin-bottom: 9px;
}

h2{
    font-weight: 400;
    font-size: 19px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

p{
    font-size: 15px;
    line-height: 140%;
}

.centerBlock{
    margin: auto;
    display: block;
    position: relative;
    padding: 0 40px;
    width: -webkit-calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    width: calc(100% - 80px);
    max-width: 920px;
}

.needHelp{
    background-image: url('../resources/needHelpSprite.png');
    width: 121px;
    height: 77px;
    display: block;
    text-decoration: none;
}

.darkNeedHelp{
    background-image: url('../resources/darkNeedHelpSprite.png');
}

.needHelp:hover{
    background-position: 0 77px;
}

.separationLine{
    max-width: 1000px;
    width: 100%;
    display: block;
    margin: 20px auto;
    border-bottom: 1px solid #a69b93;
    opacity: 0.8;
}

/* Règles générales form */

.requiredField{
    position: absolute;
    right: 8px;
    top: 7px;
    font-size: 14px;
    color: #36b591;
}

.inputBulleContainer{
    position: relative;
    margin-bottom: 20px;
    width: 384px;
}

textarea, input{
    padding: 9px 12px;
    font-family: 'Roboto', sans-serif;
    color: #545454 !important;
    font-size: 15px;
    border: 1px solid #989898;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;

    width: 225px;
}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #9d9d9d;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #9d9d9d;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #9d9d9d;
}
:-moz-placeholder { /* Firefox 18- */
    color: #9d9d9d;
}


textarea:focus, input:focus{
    border: 1px solid #37c7a2;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

label{
    font-size: 15px;
    width: 115px;
    display: inline-block;
    margin-right: 17px;

    position: relative;
    top: -1px;
    cursor: pointer;
}


label.longueur {
    font-size: 17px !important;
    cursor: auto;
}

button{
    color: #ffffff !important;
    border: none !important;
    cursor: pointer;
    padding: 10px 20px !important;
}

.thirdInput{
    width: 45px;
    margin-right: 19px;
}

.thirdInput:last-child{
    margin-right: 0;
}

/* -- Loader -- */

.loaderDiv{
    display: none;
    width: 100%;
    left: 0;
    background-color: rgba(0,0,0,0.52);
    z-index: 3000;
    top: 0;
    position: fixed;
    height: 100%;
}

.loaderDiv img{
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.75);
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    bottom: 0;
    opacity: 0.93;
    margin: auto;
    width: 154px;
    height: 154px;
}

.whiteLine{
    width: 8%;
    height: 1px;
    border-top: 1px solid white;

    position: absolute;
    left: -450px;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.93;
    margin: auto;
}

.whiteLine+.whiteLine{
    left: 450px;
}

/* Custom checkblock */

.checkBlock{
    cursor: pointer;
    display: inline-block;
    position: relative;
    width:30px;
    height: 24px;
}

.emptyCheck, .blueV{
    background-image: url('../resources/checkboxSprite.png');
}

.radioBlock .blueV{
    background-image: url('../resources/radioboxSprite.png');
}

.emptyCheck{
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 24px;

    position: relative;
    top: -22px;
}

.blueV{
    width: 25px;
    height: 25px;
    background-position: 25px 0;
    display: inline-block;
    position: relative;
}

.checkBlock input{
    opacity: 0;
    z-index: 9999;
    cursor: pointer;
    width: 100%;
    height: 30px;
    top: 6px;
    left: -3px;
    position: absolute;
}

.checkBlock .iconMunk{
    position: absolute;
    top: -8px;
    left: -4px;
}

.checkBlock .blueV{
    top:-11px;
    opacity: 0;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.checkBlock input:checked+.blueV{
    top:3px;
    opacity: 1;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.checkBlock.radioBlock input:checked+.blueV{
    top: 5px;
}

.checkBlock input:checked+.blueV+.emptyCheck{
    background-position: 0 24px;
}

/* --- Header & menu --- */

.mainNav{
    background-color: #ffffff;
    width: 100%;
    height: 76px; !important;
    overflow: visible;
    /*position: relative;*/
    z-index: 1000;
}

.mainNav .centerBlock{
    height: 100%;
    /*width: 100%;*/
    max-width: 1000px;
    padding: 0;
}

.mainNav a{
    color: #aba9aa;
    text-decoration: none;
    background-color: #ffffff;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.mainNav a:hover{
    color: white;
    background-color: #c7c7c7;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.mainNav a.active{
    color: white;
    background-color: #c7c7c7;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.mainNav a.currentA{
    color: white;
    background-color: #c7c7c7;
}

.mainNav a.currentA:hover{
    color: white;
    background-color: #c7c7c7;
}

#logoSite img{
    margin-top: 14px;
    margin-left: 40px;
    position: relative;
    z-index: 202;
}

#logoSite.logo-franceLogo img{
    margin-top: 8px;
}

#logoSite img, .littleNav{
    display: inline-block;
    vertical-align: top;
}

.littleNav{
    padding-left: 13px;
    background-color: #ffffff;
    overflow: hidden;
}

.littleNav a{
    font-weight: 300;
    z-index: 300;
    position: relative;
    letter-spacing: 0.3px;
    margin: -2px;
    margin-top: -8px;
    display: inline-block;
    padding: 20px 12px;
    padding-top: 48px;
    text-transform: uppercase;
}

.littleNav .onlyRespNav {
    display: none;
}

.littleNav a:last-child{
    margin-bottom: 0;
}

.hideBlock, .hideBlock:hover{
    width: 100px;
    background-color: #ffffff !important;
}

.caddyButton{
    position: absolute;
    right: 39px;
    top: -1px;
    background-image: url('../resources/caddyBackground2.png');
    width: 66px;
    height: 77px;
    border-top: 2px solid #39bf99;
    z-index: 498;
    padding-top: 23px;
    text-align: center;

}

.caddyButton:hover{
    border-top:10px solid #39bf99;
    height: 83px;
}

.caddyButton *{
    vertical-align: bottom;
    display: inline-block;
    margin-left: 9px;
}

.caddyButton span+span{
    margin-left: 0;
}

.caddyNumber{
    font-size: 23px;
    position: relative;
    top: 3px;
    margin-left: 0;
    width: 25px;
    text-align: center;
}

.caddyIconSpan{
    display: inline-block;
    background-image: url('../resources/caddySprite.png');
    background-position: 0 0;
    width: 22px;
    height: 18px;
}

.subNav {
    opacity: 0;
    background-color: rgba(90,90,90,0.80);
    width: 915px;
    height: 379px;
    z-index: 200;
    padding: 40px 26px;
    padding-bottom: 16px;
    padding-top: 67px;
    position: absolute;
    bottom: 3px;*
left: 323px;
}

a:nth-child(2).hover ~ .subNav, a:nth-child(2):hover ~ .subNav, .subNav:hover{ opacity: 1; bottom: -434px; }

.navThird{
    width: -webkit-calc(25% - 23px);
    width: -moz-calc(25% - 23px);
    width: calc(25% - 23px);
    padding-right: 12px;
    padding-left: 8px;
    display: inline-block;
    vertical-align: top;
    max-height: 328px;
    overflow: hidden; }

.navThird:first-child{ padding-left: 0; }

.navThird a{
    font-size: 15px;
    display: block !important;
    background-color: transparent !important;
    text-decoration: none !important;
    text-transform: capitalize;
    color: #ffffff !important;
    line-height: 140%;
    margin-top: 0 !important;
    margin-bottom: 13px; }

.navThird a:hover{
    text-shadow: 1px 1px 8px rgba(255, 255, 255, 1);
    color: #ffffff !important;
}

.navThird+.navThird+.navThird{
    border: none;
}

.mainNav .bigLink{
    padding: 0;
    margin-bottom: 18px;
    margin-top: -5px;
    margin-left: 4px;
    font-size: 19px;
    letter-spacing: 0;
    display: inline-block;
    vertical-align: top;

    width: 24.15%;
}

.hideMenuThingie{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    width: 100%;
    display: block;
    z-index: 201;
}

.mainNav .bigLink:nth-child(2){
    width: 49.6%;
}

.mainNav .bigLink:hover{
    text-shadow: 1px 1px 8px rgba(255, 255, 255, 1);
}

.separatorSubnav{
    width: 1px;
    position: absolute;
    left: 25%;
    top: 115px;
    bottom: 20px;
    background-color: white;
}

.separatorSubnav+.separatorSubnav{
    left: 49%;
}

.separatorSubnav+.separatorSubnav+.separatorSubnav{
    left: 72.8%;
}

.gammeIconNav{
    height: 19px;
    width: 19px;
    position: relative;
    top: 6px;
    margin-right: 4px;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 5px;
}

.bigLink .gammeIconNav{
    background-color: #f1bc3c;
}

.bigLink+.bigLink .gammeIconNav{
    background-color: #6dbccb;
    margin-left: 3px;
}

.bigLink+.bigLink+.bigLink .gammeIconNav{
    background-color: #d25e70;
    margin-left: 3px;
}

/* Ajout du social nav */

.socialNav{
    position: fixed;
    right: 0;
    top: 135px;
    z-index: 499;
    text-align: right;
    width: 55px;
}

.socialNav.countryPicker{
    right: auto;
    left: 0;
    text-align: left;
    bottom: auto;width: 0px;
}

.socialNav a.pickedLanguage{
    border-bottom: 2px solid #36b591 !important;
}

.socialNav.countryPicker a{
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;

    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.socialNav a{
    display: inline-block;
    margin-bottom: 11px;
    background-color: white;
    padding: 8px;
    width: 32px;
    text-align: center;

    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    text-decoration: none;
}

.socialNav a:hover{
    padding-right: 19px;
}

.socialNav.countryPicker a{
    padding-left: 6px;
    background: white;
}

.socialNav.countryPicker a:hover{
    padding-right: 8px;
    padding-left: 16px;
}

.socialNav a:first-child span{
    width: 18px;
    height: 27px;
    display: inline-block;
    background-image: url('../resources/socialSprite.png');
    background-position: 50px -3px;
    margin-top: 4px;
}

.socialNav a:first-child:hover span{
    background-position: 23px -3px;
}

.socialNav a+a span{
    width: 24px;
    height: 23px;
    display: inline-block;
    background-image: url('../resources/socialSprite.png');
    background-position: -2px -38px;
    margin-top: 3px;
    position: relative;
    left: 1px;
    margin-bottom: -2px;
}

.socialNav a+a span+span{
    position: static;
    background-image: none;
    display: inline;
    font-size: 11px;
    text-decoration: none;
    color: #A0958D;
}

.socialNav a+a:hover span+span{
    color: #36b591;
}

.socialNav a+a:hover span{
    background-position: 25px -38px;
}

/* Ajout drapeaux */

.socialNav.countryPicker a:first-child span{
    width: 29px;
    height: 20px;
    display: inline-block;
    background-image: url('../resources/belgiumFlag.png');
    background-position: center center;
    margin-top: 5px;
}

.socialNav.countryPicker a+a span{
    width: 29px;
    height: 20px;
    display: inline-block;
    background-image: url('../resources/nederlandsFlag.png');
    background-position: center center;
    margin-top: 5px;
}

/* --- Footer --- */

footer{
    background-color: #ffffff;
    color: #545454;
    width: 100%;
    padding: 30px 0;
    padding-bottom: 22px;
}

.privateLife{
    margin-top: 13px;
}

.menuRappel{
    max-width: 200px;
}

footer a{
    color: #545454;
    text-decoration: none;
    font-size: 14px;
    padding-bottom: 8px;
    padding-right: 10px;
    width: 100%;
    display: inline-block;
}

footer a:hover{
    text-decoration: underline;
}

.secureImg{
    position: absolute;
    right: 30px;
    top: -5px;
}

footer .quartParts{
    width: 25%;
    margin-right: -3px;
}

footer h2{
    margin-bottom: 12px;
}

footer img{
    margin-top: 3px;
}

/* Modifs du footer */

footer{
    padding-bottom: 17px;
}

footer p{
    line-height: 155%;
    color: #545454;
}

footer strong{
    font-weight: 500;
}

#footerImg{
    width: 163px;
    margin-top: 0;
    margin-bottom: 12px;
}

#footerImg+p+p{
    margin-bottom: 12px;
}

footer .halfBlock+.halfBlock img {
    margin-top: -1px;
}

.securityBlock{
    margin-bottom: 23px;
}

.securityBlock a{
    display: inline;
    padding-right: 0;
}

footer .halfBlock+.halfBlock .securityBlock img {
    margin-top: 1px;
}

footer .halfBlock h2 {
    margin-bottom: 8px;
}

/* --- Divs de type "Fiches produit" --- */

.ficheProduit{
    background-color: transparent !important;
    border: 1px solid transparent;
    text-decoration: none;
    padding: 0;
    text-align: center;
    position: relative;
    padding-bottom: 16px;
}

.ficheProduit p, .ficheProduit h2{
    padding: 0 15px;
}

.ficheProduit p{
    font-size: 12px;
}

.ficheProduit h2{
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px);
    height: 23px;
}

.ficheProduit img{
    margin-bottom: 10px;
    width: 100%;
}

.ficheProduit .blockLink{
    font-size: 14px;
    position: absolute;
    right: 0;
    border-left: 1px solid #ffffff;
    padding: 13px 18px;
    bottom: -40px;
}

.priceInfo{
    position: absolute;
    left: 0;
    border-right: 1px;
    font-size: 14px;
    padding: 13px 12px;
    bottom: -40px;
    color: #ffffff;
    background-color: #bab0a6;
    display: block;
}

/* Parties diverses réutilisables sur plusieurs pages */

.dentedLine{
    background-image: url('../resources/whiteDents.png');
    height: 11px;
}

/* Design popup Laloux */

#samplesPopup {
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    z-index: 700;

    width: 100%;
    height: 100%;
}

#closePopup{
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 25px;
}

#samplesPopup .centerBlock {
    padding: 20px;
    background-color: white;
    margin-top: 10%;

    max-width: 485px;
    min-height: 292px !important;
    padding-top: 75px;
}

#samplesPopup header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #349976;
}

#samplesPopup h2{
    padding: 18px;
    padding-left: 20px;
    font-weight: 100;
    letter-spacing: 0.2px;
    margin-bottom: 0;
}

#samplesPopup label{
    width: 174px;
    font-size: 16px;
}

#samplesPopup .link3D:not(.specialLink3D){
    padding: 13px 16px;
    border-bottom: 0;
}

#samplesPopup .requiredField {
    right: 8px;
}

#samplesPopup .deleteFabric .fa-trash-o{
    font-size: 27px;
    height: 27px;
}

#samplesPopup .fabricSquare.coverDiv{
    margin-bottom: 0;
    margin-right: 10px !important;

    width: 39px;
    height: 39px;
}

#samplesPopup .inputBulleContainer {
    width: 100%;
}

.confirmationMessage{
    margin-top: -3px;
}

#samplesPopup .inputBulleContainer.newsletterContainer{
    text-align: right;
    margin-top: -4px;
    margin-bottom: 6px;
}

#samplesPopup .newsletterContainer label {
    width: 181px;
    position: relative;
    top: -20px;
    left: 10px;
}

.explanation{
    max-width: 420px;
}

/* Ajout du sous-menu */
.subMenuBlock{
    width: 100%;
    background-color: #36b591;
    color: white;
    min-height: 43px;
}

.subMenuBlock .centerBlock{
    padding: 0 40px;
}

.subMenuBlock a{
    display: inline-block;
    padding: 15px 14px;
    text-decoration: none;
    color: white;
    background-color: rgba(255,255,255,0);

    text-transform: uppercase;
    font-size: 14px;
}

.subMenuBlock a:hover{
    background-color: rgba(255,255,255,0.2);
}

.rightSideNav{
    position: absolute;
    right: 40px;
    top: 0;

    background-color: #36B591;
}

footer .lineLink{
    text-decoration: none !important;
}

footer .lineLink:hover{
    text-decoration: underline !important;
}

footer .navFooter h2+.lineLink{
    margin-top: 11px;
}

footer .navFooter .lineLink{
    display: block !important;
    padding-bottom: 9px !important;
    padding-right: 10px !important;
}

.editorInputBulleError input{
    border: 1px dashed rgba(170, 39, 16, 0.97) !important;
}

.editorInputBulleError .requiredField{
    color: rgba(170, 39, 16, 0.97);
}

/* Feedback stuff en public */

.addToBasketForm .genericInputBulle{
    position: relative;
}

.addToBasketForm .requiredField{
    right: 10px;
    top: 5px;
    color: #36b591 !important;
}

/* Feedback banner */

.feedbackBanner{
    width: 100%;
    display: block;
    padding: 18px;
}

.feedbackBanner *{
    color: white;
}

.feedbackBanner.positiveBanner{
    background-color: #36b591;
}

.feedbackBanner.negativeBanner{
    background-color: #ca3e1b;
}

.feedbackIcon{
    border-right: 1px solid white;
    margin-right: 10px;
}

#basketUpdateFeedback{
    height: 100%;
    width: 100%;
    z-index: 800;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.1);
}

.outerCircle, .innerCircle{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: block;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.outerCircle{
    width: 200px;
    height: 200px;
    padding: 0;
    background-color: rgba(255,255,255,0.8);
}

.innerCircle{
    background-color: #36b591;
    width: 120px;
    height: 120px;
}

.innerCircle *{
    color: white;
}

.innerCircle p{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27px;
    text-transform: uppercase;
    font-size: 15px;
}

.innerCircle img{
    position: relative;
    top: 6px;
    opacity: 0;
}

/* Boutons d'ajout */

a.addToCartButton{
    background-image: url('../resources/miniCaddy.png');
    width: 40px !important;
    height: 36px !important;
    background-repeat: no-repeat;
    background-position: 11px center;
    position: relative;
    z-index: 300;
}

a.seeMore{
    position: relative !important;
    z-index: 300;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    background-image: url('../resources/miniLoupe.png');
    width: 40px !important;
    height: 36px !important;
    background-repeat: no-repeat;
    background-position: center center;

    margin-left: 9px;
    background-color: #bab0a6 !important;
}

a.seeMore:hover{
    background-color: #c9bfb5 !important;
}

.tvaBlock{
    margin-top: 12px;
}

/* Nav des gammes */

#gammesNav{
    position: fixed;
    left: 0;
    top: 135px;
    z-index: 4000;
    text-align: left;
    width: 100px;
}

#gammesNav a{
    display: inline-block;
    margin-bottom: 15px;
    background-color: white;
    padding: 8px;
    width: 46px;
    text-align: center;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-decoration: none;
    line-height: 85%;
}

#gammesNav a:hover {
    padding-left: 15px;
}

#gammesNav img{
    width: 100%;
}

#gammesNav a span {
    position: static;
    background-image: none;
    font-size: 11px;
    padding-top: 4px;
    display: inline-block;
    text-decoration: none;
    color: #A0958D;
    font-weight: 100;
}

#gammesNav a:hover span {
    color: #3ccda8;
}



/* ----- Mediaqueries principales ----- */

/* Écrans 1400 et plus */
@media only screen and (min-width: 1600px){
    .centerBlock{
        max-width: 1280px;
    }

    .centerBlock.alignedCenterBlock{
        max-width: 980px;
    }

    .mainNav .centerBlock{
        max-width: 1280px;
    }

    .specialSliderCaption h2.correctedH1{
        margin-top: 15px;
    }
}

@media only screen and (max-width: 1600px){
    footer h2{
        font-size: 18px;
    }

    .hideBlock{
        display: none !important;
    }

    .littleNav a{
        letter-spacing: 0;
    }

    #logoSite img{
        margin-top: 20px;
        width: 170px;
    }

    .littleNav a{
        margin-top: -5px;
        font-size: 14px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .littleNav {
        padding-left: 26px;
    }

    /* Corrections footer */
    footer h2{
        font-size: 16px;
        line-height: 140%;
    }

    footer p{
        font-size: 14px;
    }

    .securityBlock+h2+img{
        width: 190px;
    }

    .subNav{
        left: 0;
        width: 100%;
        height: 458px;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* Barre verte -> petits écrans */

    .subMenuBlock .centerBlock{
        padding: 0;
        max-width: 1000px;
    }

    .rightSideNav{
        right: 0;
    }

    #gammesNav a{
        width: 40px;
    }

    .gammeIconNav {
        width: 17px;
        height: 17px;
    }

    .separatorSubnav{
        top: 113px;
    }

    .hideBlock{
        position: absolute !important;
        right: 8px !important;
        top: -2px !important;
        display: block !important;
    }
}

/* Mediaquery pour petits écrans -> tablettes et autres */
@media only screen and (max-width: 1450px){
    h1, h2, h3, h4, p, a, li, label, input, textarea{
        font-weight: 100 !important;
    }

    h1 strong, h2 strong, h3 strong, h4 strong, p strong, a strong{
        font-weight: 300 !important;
    }

    /* Réduire le menu plus tôt */

    .mainNav{
        height: 60px;
    }

    #logoSite img{
        width: 160px;
    }

    .littleNav a{
        font-size: 15px;
        padding: 16px 16px;
        padding-top: 37px;

        letter-spacing: 0.1px;
    }

    .littleNav {
        padding-left: 15px;
    }
    .subNav{
        left: 340px;
    }

    #logoSite img {
        margin-top: 16px;
    }

    #logoSite img{
        margin-left: 0px;
    }

    .caddyButton{
        right: 0px;
        height: 62px;
        padding-top: 19px;
        background-position: bottom;
    }

    .caddyButton:hover{
        height: 70px;
        border-top: 6px solid #39bf99;
    }

    .caddyButton *{
        text-shadow: 0 0 12px rgba(255, 255, 255, 0);
    }

    .caddyButton:hover *{
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.95);
    }

    .littleNav{
        padding-left: 20px;
    }

    #logoSite img {
        width: 145px;
        margin-top: 15px;
    }

    .littleNav a {
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .subMenuBlock a{
        font-size: 13px;
    }

    .socialNav{
        top: 116px;
    }

    .socialNav a{
        padding: 7px;
        width: 26px;
    }

    .subNav{
        left: 0;
        height: 437px;
    }

    a:nth-child(2):hover ~ .subNav, a:nth-child(2).hover ~ .subNav, .subNav:hover{
        bottom: -388px !important;

    }

    .separatorSubnav{
        width: 1px;
        position: absolute;
        left: 25%;
        top: 103px;
        bottom: 19px;
        background-color: white;
    }

    .mainNav .bigLink{
        font-size: 20px;
    }

    .gammeIconNav {
        width: 16px;
        height: 16px;
    }

    .separatorSubnav{
        top: 113px;
    }

    .navThird {
        max-height: 315px;
    }

    .hideBlock{
        width: 85px !important;
    }

    .hideBlock{
        right: -11px !important;
    }
}

@media only screen and (max-width: 1230px){
    .centerBlock{
        max-width: 850px;

    }

    .centerBlock.alignedCenterBlock{
        max-width: 775px;
    }

    .navThird {
        max-height: 309px;
    }

    /* Footer */

    footer .quartParts{
        width: 22%;
    }

    footer .quartParts+.quartParts+.quartParts{
        width: 28%;
    }

    footer .quartParts+.quartParts+.quartParts+.quartParts{
        width: 27%;
    }

    .mainNav .centerBlock{
        max-width: 850px;
    }

    .subMenuBlock .centerBlock{
        max-width: 850px;
    }

    .subMenuBlock a{
        padding: 15px 12px;
    }

    .subMenuBlock a+a+a+a+a{
        display: none;
    }

    .hideBlock{
        right: -23px !important;
        width: 98px !important;
    }
    .littleNav {padding-left: 0px}
    .littleNav a {
        font-size: 13px;
        padding-left: 3px;
        padding-top: 38px;
        padding-right: 3px;
    }

    .mainNav .bigLink{
        font-size: 17px;
    }

    .subNav{
        left: 0;
        height: 423px;
    }

    a:nth-child(2):hover ~ .subNav, a:nth-child(2).hover ~ .subNav, .subNav:hover{
        bottom: -372px !important;
    }

    .mainNav .bigLink{
        margin-bottom: 16px;
    }





}

@media only screen and (max-width: 1050px){
    #gammesNav{
        display: none;
    }
}



@media only screen and (max-width: 890px){
    footer .quartParts{
        width: 50% !important;
        margin-bottom: 20px;
    }

    footer .quartParts+.quartParts+.quartParts{
        margin-bottom: 0;
    }

    footer .centerBlock>.halfBlock{
        width: 100%;
        margin-right: 0;
        margin-bottom: 25px;
        text-align: center;
    }

    footer .centerBlock>.halfBlock p{
        width: 85%;
        margin: auto;
    }
}

/* Version mobile */
@media only screen and (max-width: 850px){
    .centerBlock{
        width: -webkit-calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: calc(100% - 90px);
        padding: 0 20px;
    }

    #logoSite img{
        padding-top: 16px !important;
    }



    .mainNav .centerBlock{
        width: -webkit-calc(100% - 100px);
        width: -moz-calc(100% - 100px);
        width: calc(100% - 100px);
        padding: 0 25px;
    }

    .subMenuBlock{
        display: none !important;
    }

    .littleNav .onlyRespNav {
        display: block;
    }

    .mainNav .bigLink{
        display: none;
    }

    .bigLink+.bigLink{
        position: static;
    }

    /* Refonte menu mobile */

    .caddyButton{
        right: 15px;
    }

    .littleNav{
        display: none;
    }

    #brownListButton {
        background-image: url('../resources/brownList.png');
        width: 24px;
        display: block;
        height: 18px;
        position: absolute;
        top: 11px;
        left: 8px;
        z-index: 203;

        cursor: pointer;

        background-position: center;
        background-repeat: no-repeat;
        padding: 10px;
    }

    #logoSite img{
        margin:auto;
        display: block;
        padding-top: 10px;
    }

    .littleNav{
        padding-left: 0;
        width: 100%;
        position: absolute;
        left:0;
        top: 58px;
        z-index: 500;
    }

    .littleNav a{
        width: 100%;
        display: block;
        text-align: center;
        margin: 0;

        padding: 24px 20px;
        position: relative;
        left: -20px;
    }

    .hideBlock{
        display: none !important;
    }

    /* Sous-menu */

    .subNav{
        opacity: 1;
        width: 100%;
        height: auto;
        padding: 15px 0 !important;
        position: relative;
        background-color: #c7c7c7;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        z-index: 400;
        display: none;
    }

    .subNav a{
        font-size: 17px;
        line-height: 190%;
        position: static;
    }

    .navThird{
        width: 100%;
        display: block;
    }

    .separatorSubnav{
        display: none;
    }

    .navThird+.navThird a{
        text-align: center;
    }

    #logoSite.logo-franceLogo img{
        margin-top: 0;
        padding-top: 9px !important;
    }
}

@media only screen and (max-width: 580px){
    footer .halfBlock{
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }

    footer .centerBlock>.halfBlock{
        margin-bottom: 0;
    }

    footer p{
        width: 95% !important;
    }
}




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

    .centerBlock{
        width: -webkit-calc(100% - 60px);
        width: -moz-calc(100% - 60px);
        width: calc(100% - 60px);
        padding: 0 20px;
    }


    .mainNav .centerBlock{
        width: -webkit-calc(100% - 50px);
        width: -moz-calc(100% - 50px);
        width: calc(100% - 50px);
        padding: 0 25px;
    }

}

@media only screen and (max-width: 500px){
    footer .quartParts{
        width: 100% !important;
        margin-bottom: 20px !important;
        text-align: center;
    }

    footer .quartParts:nth-child(4){
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 425px){
    #logoSite img {
        width: 140px;
        padding-top: 12px;
    }

    .caddyButton {
        right: 9px;
        top: -4px;
        -moz-transform: scale(0.9);
        -o-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

/* Mediaqueries height */

@media only screen and (max-height: 640px){
    #samplesPopup .centerBlock{
        margin-top: 60px;
    }
}

@media only screen and (max-height: 600px){
    #samplesPopup .centerBlock{
        margin-top: 30px;
    }
}