/* Style général concernant les gammes */

/* Couleurs */

.gamme1Color{
    color: #f1bc3c;
}

a.gamme1Color, .bodyGamme1 a.lineLink{
    color: #f1bc3c !important;
}

div .navThird a.lineLink, div .navThird a.lineLink:hover{
    color: white !important;
}

a.gamme1Color:hover, .bodyGamme1 a.lineLink:hover{
    color: #f1bc3c !important;
}

.gamme2Color, .bodyGamme2 a.lineLink{
    color: #6dbccb !important;
}

a.gamme2Color:hover, .bodyGamme2 a.lineLink:hover{
    color: #6dbccb !important;
}

.gamme3Color, .bodyGamme3 .requiredField{
    color: #d46e79;
}

.gamme1BackgroundColor, .gamme1Block a:not(.productArrow){
    background-color: #f1bc3c !important;
}

.gamme2BackgroundColor, .gamme2Block a:not(.productArrow){
    background-color: #6dbccb !important;
}

.gamme3BackgroundColor, .gamme3Block a:not(.productArrow), .bodyGamme3 .downloadBlock{
    background-color: #d25e70 !important;
}

.gamme4BackgroundColor, .gamme4Block a:not(.productArrow), .bodyGamme4 .downloadBlock{
    background-color: #36b591 !important;
}


    a.gamme1BackgroundColor:hover, .gamme1Block a:hover:not(.productArrow){
        background-color: #f9c43c !important;
    }

    a.gamme2BackgroundColor:hover, .gamme2Block a:hover:not(.productArrow){
        background-color: #7bcedd !important;
    }

    a.gamme3BackgroundColor:hover, .gamme3Block a:hover:not(.productArrow), .bodyGamme3 .downloadBlock:hover{
        background-color: #e86282 !important;
    }

    a.gamme4BackgroundColor:hover, .gamme4Block a:hover:not(.productArrow), .bodyGamme4 .downloadBlock:hover{
        background-color: #3ccda8 !important;
    }

    .gamme1BackgroundColor.whiteText, .gamme2BackgroundColor.whiteText, .gamme3BackgroundColor.whiteText{
        color: white !important;
    }

/* Slider */

.sliderGamme1 .lSSlideOuter .lSPager.lSpg > li:hover a, .sliderGamme1 .lSSlideOuter .lSPager.lSpg > li.active a{
    background-color: #f1bc3c !important;
}

.sliderGamme2 .lSSlideOuter .lSPager.lSpg > li:hover a, .sliderGamme2 .lSSlideOuter .lSPager.lSpg > li.active a{
    background-color: #6dbccb !important;
}

/* Border when hover */

.hoverBorderGamme1:hover img{
    border: 1px solid #f1bc3c !important;
}

.hoverBorderGamme2:hover img{
    border: 1px solid #6dbccb !important;
}

/* Sous-nav */

.bodyGammePremade1 .subMenuBlock, .bodyGamme1 .subMenuBlock, .bodyGamme1 .subNavProject{
    background-color: #f1bc3c !important;
}

    .bodyGamme1 .subMenuBlock .centerBlock, .bodyGammePremade1 .subMenuBlock .centerBlock{
        background-image: url('../resources/gamme1Icon.png');
        background-repeat: no-repeat;
        background-position: 7px center;
        border-left: 1px solid white;
    }

.bodyGammePremade2 .subMenuBlock, .bodyGamme2 .subMenuBlock, .bodyGamme2 .subNavProject{
    background-color: #6dbccb !important;
}

    .bodyGamme2 .subMenuBlock .centerBlock, .bodyGammePremade2 .subMenuBlock .centerBlock{
        background-image: url('../resources/gamme2Icon.png');
        background-repeat: no-repeat;
        background-position: 8px center;
        background-size: 28px;
        border-left: 1px solid white;
    }

    #kraftBody .subMenuBlock .centerBlock, #onlyMecha .subMenuBlock .centerBlock{
        background-image: url('../resources/diyWhiteIcon.png');
        background-repeat: no-repeat;
        background-position: 8px center;
        background-size: 28px;
    }

.bodyGamme3 .subMenuBlock, .bodyGamme3 .subMenuBlock, .bodyGamme3 .subNavProject{
    background-color: #e86282 !important;
}

/* Triangles - explication gammes */

.triangleGamme1{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 65px;
    border-color: transparent transparent #f1bc3c transparent;

    display: block;
    opacity: 0.8;

    -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;
}

      .bodyGamme1 .triangleGamme{
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 13px 15px 0 15px;
          border-color: #f1bc3c transparent transparent transparent;

          display: block;

          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;
      }

        .bodyGamme2 .triangleGamme{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 13px 15px 0 15px;
            border-color: #6dbccb transparent transparent transparent;

            display: block;
            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;
        }

.triangleGamme2{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 65px;
    border-color: transparent transparent #6dbccb transparent;

    display: block;
    opacity: 0.8;

    -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;
}

.triangleGamme3{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 65px;
    border-color: transparent transparent #d25e70 transparent;

    display: block;
    opacity: 0.8;

    -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;
}

.triangleGammeDIY{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 65px;
    border-color: transparent transparent #36b591 transparent;

    display: block;
    opacity: 0.8;

    -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;
}

.gamme1Icon, .gamme2Icon, .gammeDIYIcon, .gamme3Icon{
    background-image: url('../resources/gamme1Icon.png');
    width: 19px;
    height: 29px;

    display: block;

    left: 15px !important;
}

    .gammeDIYIcon{
        width: 31px;
        height: 25px;
        left: 20px !important;
        background-image: url('../resources/diyWhiteIcon.png');
    }

.gamme1Icon.coloredIcon{
    background-image: url('../resources/gamme1IconColored.png');
}

.gamme1Icon{
    width: 27px;
    height: 23px;
}

.gamme2Icon{
    background-image: url('../resources/gamme2Icon.png');
    width: 31px;
    height: 29px;

    display: block;
}

.gamme3Icon{
    background-image: url('../resources/gamme3icon.png');
    width: 31px;
    height: 28px;

    display: block;
}

.gamme2Icon.coloredIcon{
    background-image: url('../resources/gamme2IconColored.png');
}

/* Effets au hover */

.pictureContainer:hover .triangleGamme1, .pictureContainer:hover .triangleGamme2, .pictureContainer:hover .triangleGammeDIY, .pictureContainer:hover .triangleGamme3{
    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;
}

.pictureContainer:hover .gamme1Icon, .pictureContainer:hover .gamme2Icon, .pictureContainer:hover .gammeDIYIcon,  .pictureContainer:hover .gamme3Icon{
    top: -10px !important;
}

.pictureContainer{
    position: relative;
}

.ficheProduit .pictureContainer div, .ficheProduit .pictureContainer div:hover{
    position: absolute;
    right: 0;
    bottom: 12px;
}

.ficheProduit .pictureContainer a, .ficheProduit .pictureContainer a:hover{
    background-color: transparent !important;
}

.explanationGamme{
    background-color: rgba(255,255,255,0.85);
    padding: 10px;
    padding-bottom: 22px;

    position: absolute;
    right: 24px !important;

    width: 180px;
    opacity: 0;

    bottom: 40px !important;
    top: auto;

    z-index: -1;
}

.triangleBottomSide{
    cursor: pointer;
}

.bottomTriangleBit{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 20px 0;
    border-color: transparent #ffffff transparent transparent;

    display: block;

    position: absolute;
    bottom: -20px !important;
    right: 0;
    opacity: 0.85;
}

.triangleBottomSide:hover .explanationGamme{
    opacity: 1;
    bottom: 68px !important;
    top: auto;
    z-index: 2;
}

.explanationGamme a{
    font-size: 15px;
}

.explanationGamme h3{
    font-weight: 400;
    padding-top: 8px;
    font-size: 18px;
    text-transform: uppercase;
}

/* Header */

.circleHeader{
    width: 130px;
    height: 130px;
    display: block;
    background-color: #f7f4f1;

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    display: block;

    position: relative;
    z-index: 100;
    top: -63px;
    margin: auto;

    transform: rotate(0deg) ;
    -webkit-transform: rotate(0deg) ;
    -moz-transform: rotate(0deg) ;
    -o-transform: rotate(0deg) ;
    -ms-transform: rotate(0deg) ;

    cursor: pointer;
}

    .gamme1Block .circleHeader{
        background-image: url('../resources/gamme1.png');
        background-position: center center;
        background-size: 88%;

        background-repeat: no-repeat;
    }

    .gamme2Block .circleHeader{
        background-image: url('../resources/gamme2.png');
        background-position: center center;
        background-size: 88%;

        background-repeat: no-repeat;
    }

    .gamme3Block .circleHeader{
        background-image: url('../resources/gamme3.png');
        background-position: center center;
        background-size: 88%;

        background-repeat: no-repeat;
    }

        .gamme4Block .circleHeader{
            background-image: url('../resources/gamme4.png');
        }

    .gamme1Block .headerGamme .brownDash{
        top: 0;
        bottom: auto;
    }

    .gamme1Block .brownDash{
        background-image: url('../resources/brownDashGamme1.png');
    }

    .gamme2Block .headerGamme .brownDash{
        top: 0;
        bottom: auto;
    }

    .gamme2Block .brownDash{
        background-image: url('../resources/brownDashGamme2.png');
    }

    .gamme3Block .headerGamme .brownDash{
        top: 0;
        bottom: auto;
    }

    .gamme3Block .brownDash{
        background-image: url('../resources/brownDashGamme3.png');
    }

    .gamme3Block.gamme4Block .brownDash{
        background-image: url('../resources/brownDashGamme4.png');
    }

.headerGamme{
    margin-top: 100px;
    margin-bottom: -82px;
    position: relative;
}

.headerGamme:hover .circleText{
    opacity: 1;
}

.gamme1Block .headerGamme:hover .circleText{
opacity: 0.88;
}

.circleText{
    opacity: 0;
    background-color: #f7f4f1;
    position: absolute;
    width: 100px;
    height: 100px;
    text-align: center;

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    margin: auto;
}

.gamme1Block .circleText{
    width: 120px;
    height: 140px;
    top: 20px;
}

.gamme1Block .circleText span{
    top: 37px;
}

.circleText span{
    position: relative;
    top: 25px;
    line-height: 145%;
    width: 80px;
    display: inline-block;

    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
}

/* Modifs pages catégories */

.bodyGamme3 label{
    color: #545454;
}

.bodyGamme1 .blockLink, .bodyGamme1 .lSSlideOuter .lSPager.lSpg > li:hover a, .bodyGamme1 .lSSlideOuter .lSPager.lSpg > li.active a{
    background-color: #f1bc3c !important;
}

    .bodyGamme1 .blockLink:hover{
        background-color: #fac43d !important;
    }

    .bodyGamme1 .radioContainer:hover, .bodyGamme1 textarea:focus, .bodyGamme1 input:focus{
        border: 1px solid #b8a89a;
    }

.bodyGamme2 .blockLink, .bodyGamme2 .lSSlideOuter .lSPager.lSpg > li:hover a, .bodyGamme2 .lSSlideOuter .lSPager.lSpg > li.active a{
    background-color: #6dbccb !important;
}

    .bodyGamme2 .blockLink:hover{
        background-color: #6dbccb !important;
    }

    .bodyGamme2 .radioContainer:hover, .bodyGamme2 textarea:focus, .bodyGamme2 input:focus{
        border: 1px solid #b8a89a;
    }

.bodyGamme3 .blockLink, .bodyGamme3 .lSSlideOuter .lSPager.lSpg > li:hover a, .bodyGamme3 .lSSlideOuter .lSPager.lSpg > li.active a{
    background-color: #d25e70 !important;
}

.bodyGamme1 .triangleBottomSide, .bodyGamme2 .triangleBottomSide, .bodyGamme3 .triangleBottomSide{
    cursor: pointer;
    position: absolute;
    bottom: 3px;
    right: 0;
}

/* Gamme 3 */

.bodyGamme3 textarea:focus, .bodyGamme3 input:focus{
    border: 1px solid #d25e70;
}

.bodyGamme3 #productList{
    margin-top: 38px;
    margin-bottom: 44px;
}

/* Titlepic */

.bodyGamme1 .breadcrumbBlock h1{
    background-image: url('../resources/titlePicGamme1.png');
}

.bodyGamme2 .breadcrumbBlock h1{
    background-image: url('../resources/titlePicGamme2.png');
}

.bodyGamme3 .breadcrumbBlock h1{
    background-image: url('../resources/titlePicGamme3.png');
}

/* Produits */

.bodyGamme1 .link3D{
    border-color: #df9c24;
}

.bodyGamme2 .link3D{
    border-color: #5faebd;
}

.bodyGamme3 .link3D{
    border-color: #b65361;
}


.lSSlideOuter+.triangleBottomSide{
    z-index: 400;
    bottom: 35px;
}

.lSSlideOuter+.triangleBottomSide .triangleGamme1, .lSSlideOuter+.triangleBottomSide .triangleGamme2{
    border-width: 0 0 50px 93px;
    opacity: 1;
}

.lSSlideOuter+.triangleBottomSide .gamme1Icon, .lSSlideOuter+.triangleBottomSide .gamme2Icon{
    left: 22px !important;
    top: -8px !important;
}

.gamme1Block .explanationGamme a, .gamme2Block .explanationGamme a, .gamme1Block .explanationGamme a:hover, .gamme2Block .explanationGamme a:hover{
    background-color: transparent !important;
}

#garantie2{
    position: absolute;
    right: 96px;
    bottom: 39px;
    z-index: 180;
    width: 100px;
    height: auto;
}

    #garantie.alignedIcon{
        position: absolute;
        right: 13px;
        bottom: 39px;
        z-index: 180;
        width: 71px;
        height: auto;
    }

    .bodyGamme2 #garantie.alignedIcon{
        display: none;
    }

    .bodyGamme2 #garantie2{
        right: 13px;
    }

    .maisonSlider+#garantie2, .maisonSlider+#garantie2+#garantie.alignedIcon{
        bottom: 14px;
    }

    .bodyGamme1 .titleStore, .bodyGamme2 .titleStore{
        margin-left: 4px;
    }


/* Partie de droite sur sous-menu */

.bodyGamme1 .rightSideNav{
    background-color: #f1bc3c;
}

.bodyGamme2 .rightSideNav{
    background-color: #6dbccb;
}

.bodyGamme3 .rightSideNav{
    background-color: #e86282;
}

/* Mediaqueries */

@media only screen and (min-width: 1600px){
    .explanationGamme p {
        font-size: 14px;
        margin: 12px 0;
    }
}

@media only screen and (max-width: 1600px){
    .triangleBottomSide:hover .explanationGamme{
        top: auto;
    }

    .explanationGamme{
        width: 158px;
        padding-left: 3px;
        padding-right: 3px;
    }

    .explanationGamme a{
        font-size: 14px;
    }

    .explanationGamme p{
        margin: 12px 0;
        line-height: 150%;
    }

    /* Corrections icones */

    .bodyGamme1 .subMenuBlock .centerBlock, .bodyGammePremade1 .subMenuBlock .centerBlock, .bodyGamme2 .subMenuBlock .centerBlock, .bodyGammePremade2 .subMenuBlock .centerBlock, #kraftBody .subMenuBlock .centerBlock, #onlyMecha .subMenuBlock .centerBlock{
        background-image: none;
    }

        .bodyGamme1 .subMenuBlock, .bodyGammePremade1 .subMenuBlock{
            background-image: url('../resources/gamme1Icon.png');
            background-repeat: no-repeat;
            background-position: 7px center;
            border-left: 1px solid white;

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

        .bodyGamme2 .subMenuBlock, .bodyGammePremade2 .subMenuBlock{
            background-image: url('../resources/gamme2Icon.png');
            background-repeat: no-repeat;
            background-position: 8px center;
            background-size: 28px;
            border-left: 1px solid white;

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

        #kraftBody .subMenuBlock, #onlyMecha .subMenuBlock{
            background-image: url('../resources/diyWhiteIcon.png');
            background-repeat: no-repeat;
            background-position: 8px center;
            background-size: 28px;
        }

        .bodyGamme1 .titleStore, .bodyGamme2 .titleStore{
            margin-left: 13px;
        }
}

@media only screen and (max-width: 1230px){
    .ficheProduit .explanationGamme p{
        margin: 8px 0;
        line-height: 150%;
    }

    .triangleBottomSide .explanationGamme{
        right: 21px !important;
    }

    .triangleBottomSide:hover .explanationGamme{
        top: auto;
    }
}

@media only screen and (max-width: 1000px){
    .explanationGamme{
        display: none;
    }
}