/* ==========================================================================
   PlanTech css
   ========================================================================== */

body {
    background-color: black;
    font-family: "Trebuchet MS";
    color: white;  
    min-width: 320px;  
    padding-top: 151px; 
}

mark {background-color: inherit; color: inherit;}
strong {font-weight: normal;}

.nav-link-js {cursor: pointer;}

.bg-red {
    position: fixed;
    z-index:-9999;
    top: 0px;
    left: 130px;
    width: 56%;
    max-width: 1920px; 
    height: 0px;
    margin-top: 140px;
    border-top: 1080px solid #d60808;  
    border-left: 1080px solid transparent;
}

header {
    position: fixed;
    z-index: 9999;
    top: 0px; left: 0px;
    width: 100%;
    height: 140px;
    min-width: 320px;
    max-width: 1920px; 
    /*overflow: hidden;*/
    background-color: black;
}
header .bg-red {
    position: absolute;
    border-top: 116px solid #d60808;  
    border-left: 116px solid transparent;
}
.add-caps-color {/*utilise JS pour appliquer des balises*/}
.caps-color {color: #d60808;}
#header{ padding-top: 5px;display: flex; justify-content: center; align-items: center;align-self: flex-start; color: white; }
    #logo img {height: 85px;}
    #societe {padding-top: 17px;}
        h1 {font-size: 3.1em;}
        .subtitle {margin-top: -20px; font-style: italic;font-size: 11px;white-space: nowrap;word-spacing: -1px;}

.navbar {justify-content: flex-end !important;background-color: #d60808;  }
    #navbarContent { width: 100px;}

    .navbar-nav {flex-direction: row !important; } 
    .navbar-light .navbar-nav .nav-link {padding:0rem 0.8rem; color: rgba(0, 0, 0, 0.8);}
    .navbar-light .navbar-nav .nav-link:hover {color: white;}
    
    #lang {position: absolute; top: 5px; right: 5px;height: 26px;}
    #lang .btn {padding: 3px; font-size: 12px;}   
 
@media screen and (min-width: 340px) { 
    .bg-red {left: 41%;}
    #navbarContent {justify-content: center;}
}
@media screen and (min-width: 576px) { 
    body {padding-top: 146px; }
    .bg-red {left: 48%;}
    .bg-red {margin-top: 0px;}
    header {height: 116px;}     
        #header {justify-content: flex-start;}    
        .navbar {background-color: transparent; }
            #lang {right: 35px;}
            #navbarContent { justify-content: flex-end; margin-top: 25px;}
            .navbar-nav {flex-direction: column !important; }   
}
@media screen and (min-width: 768px) {
    header {height: 140px;}
        header .bg-red {border-top-width: 140px; border-left-width: 140px;}
        #logo img {height: 110px;}
        #societe {padding-top: 20px;}
            h1 {font-size: 4em;}
            .subtitle {margin-top: -20px; font-style: italic;font-size: 13px;white-space: nowrap;}
    #navbarContent { justify-content: center;}
    #lang {right: 15px;}
    .navbar-nav {flex-direction: row !important; }  
        .navbar-light .navbar-nav .nav-link {padding-left: 1rem; padding-right: 1rem; font-size: 1.2rem;}
}
@media screen and (min-width: 992px) {
    #header {justify-content: flex-end;}
    .navbar-light .navbar-nav .nav-link {  font-size: 1.4rem;}
}


#bg-cover {
    z-index: -999;
    position: absolute;
    width: 100%;
    height: 400px;
    overflow: hidden;
    padding-top: 0px;  
    background-color: black;

}
    #bg-cover .carousel, #bandeau-carousel2 {height: 600px;opacity: 0.7; /*margin-top: -40%;*/}
        #bg-cover .carousel-inner {height: 100%;}
        #bg-cover .carousel-item {height: 100%;background-position: center top; background-repeat: no-repeat; padding: 0px;}
        #bg-cover .carousel-item img {}
        .item__third {
            height: 400px; 
            position: relative;
            background-repeat: no-repeat;
            background-size: 533px 400px;
        }
        .carousel-ite {min-width: 533px !important;width: 533px !important;}
                
        
#bg-title {
    position: relative;
    z-index: 10;
    padding-top: 125px;
    height: 400px;
    max-width: 500px;
    text-align: center;
    font-size: 22px;  
}
    .cover{padding: 3px 5px;background-color: rgba(0,0,0,0.5);}
      
    
    
.bg-arrow {
    position: absolute;
    margin: auto;
    left: 0px; right: 0px;
    bottom: 10px;
    height: 50px;
    width: 50px;
    background: url('../img/arrow-down.png');
    background-size: 50px;
    animation: bounce 0.35s ease infinite alternate;
}
.bg-arrow-white {
    background: url('../img/arrow-down-white.png');
    background-size: 50px;
}
@keyframes bounce{
     from {bottom: 10px;}
     to   {bottom: 20px;}
}
@media screen and (min-width: 476px) {
    #bg-cover .carousel, #bandeau-carousel2 {/*margin-top: -25%;*/ }
}
@media screen and (min-width: 768px) {
    #bg-cover { height: 600px; width: 100%;}
        #bg-cover .carousel, #bandeau-carousel2 {margin-top: 0;margin: auto; }
        .item__third { height: 600px; background-size: 100%;}
            .carousel-ite {min-width: 800px !important;width: 800px !important;}


    #bg-title {
        padding-top: 225px;
        height: 600px;
        font-size: 28px;
    }
}
/*#bg-cover {position: static;}
#bg-title {display: none;}
.slick-arrow {z-index: 999;}
.slick-prev.slick-arrow{left: 0;}
.slick-next.slick-arrow {right: 0;}
.slick-dots {bottom: 45px !important;}*/

#main { position: relative; max-width: 1920px; z-index: 10;}
#main section {position: relative; margin-top: 50px;padding-bottom: 50px;overflow: hidden;}

h2 {font-size: 1.5rem;text-transform: uppercase;text-align: center;margin-bottom: 1.5rem;}
h2::after {
    content:'';
    position: absolute;
    margin-top: -2px;
    display: block;
    margin: auto;
    left: 0px; right: 0px;
    height: 1px;
    width:  100px !important;
    background-color: #e3001b;
    transition: width 0.6s ease-in-out;
}
h3 {font-size:15px !important;}

@media screen and (min-width: 576px) {
    h2::after { background-color: #e3001b; }
    h3 {font-size: 18px !important;}
}
@media screen and (min-width: 768px) {
    h2 {font-size: 2rem;}
    
}
a {color: #920000;}
a:hover {color: #d60808;}
a.icon {color: white !important;}
.alinea {margin-left: 25px;}

#services {margin-top: 20px !important;}
    #services h2::after {width: 100px;}  
    .services-content {margin-top: -30px;margin-bottom: 20px; position: absolute; left: -100%; }
        .services-content-reveal {position: relative;left: auto;}
        .bg-plans {background-image: url('../img/plans-techniques.jpg');}
        .bg-planif {background-image: url('../img/planification-et-suivi-de-chantier.jpg');}
        .bg-fabric {background-image: url('../img/fabrication-montage.jpg')}
        

#about { padding-bottom: 70px !important;}    
    #about h2::after {width: 150px;}
    #cover-about { position: relative !important; height: 200px;background-image: url('../img/about.jpg');background-size: auto 100% !important; z-index: 0;}
    .about-btn {position: absolute; z-index: 10;margin: auto; bottom: 10px; left: 0px; right: 0px;}
#contact {
}  
    #contact-flex {flex-direction: column;justify-content: center;align-items: center;}
    #contact-flex .cover-section { overflow: hidden; margin-left: -15px;}
    #contact h2::after {width: 90px;}
    #contact h3 {font-size: 75px !important;}
   /* #cover-contact {position: absolute !important; background-image: url('../img/contact.jpg');}
    #cover-contact-1 {position: absolute !important; background-image: url('../img/contact1.jpg');}
    #cover-contact-2 {position: absolute !important; background-image: url('../img/contact2.jpg');}
    #cover-contact-3 {position: absolute !important; background-image: url('../img/contact3.jpg');}*/
    .contact-content {margin-top: -15px; margin-bottom: 30px;vertical-align: middle;}
        .contact-content-social {margin-top: 0px !important;}
        .contact-content p {
            /*position: absolute;*/ bottom: 15px; left: 0px; right: 0px; margin: auto;}
        .contact-content a {color: #d60808;}
        .btn-contact {
            background-color: black !important;
            color: #d60808 !important;
            border: 0px;
            padding: 5px 10px;
            border-radius: 5px;
        }
        .disable-tel {pointer-events: none;}
        .social{ text-decoration: none !important;  }
            .social img {height: 60px;}

        
        
.cover-section {
            position: relative;
            background-repeat: no-repeat;
            background-position: center top;
            background-size: 100%;            
            height: 100%; width: 100%;
            z-index: -1;
        }
    .cover-section img {width: 100%;}
.bg-cover{position: absolute;height: 100%; width: 100%;background-color: rgba(0,0,0,.6);z-index: 0;}
.section-content {position: relative; padding-top: 25px;padding-bottom: 25px; height: 100%;color: white;}
    

 
.text-justify-center {text-align: justify; text-align-last: center;}    
@media screen and (min-width: 576px) {
    
}

@media screen and (min-width: 768px) {
    .cover-section {position: absolute;}
    .section-content {padding-top: 50px;}
    
    .services-content {margin-top: 0px;}
    .services-content div {max-width: 70%;margin: auto;}
    #planification {border-left: 10px solid black;border-right: 10px solid black;}
    #about .section-content {padding-top: 15px;}
        #cover-about {height: 250px;}    
        .about-btn {bottom: 20px;}
    #contact-flex {flex-direction: row;align-items: flex-start;}
    #contact-flex>div {padding:0px;}
        #contact h3 {font-size: 100px !important;}
        #contact-flex .cover-section { margin-left: 0px;}
        .contact-btn { background-color: rgba(0,0,0,.8); color: #d60808 !important;}
        .contact-content {margin-top: 20px; margin-bottom: 50px;}
}
@media screen and (min-width: 992px) {
    #cover-about {height: 400px;}
}


footer {margin-top: -70px; position: relative;z-index: 20;}

/* WRAPPER */

.wrapper-container {position: relative;width: 100%;overflow: hidden;}
.wrapper-flex { 
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex; 
    display: flex;
    position:relative;

    -webkit-box-lines : multiple; 
    -webkit-flex-flow : wrap;
    -moz-flex-flow : wrap;
    flex-flow : wrap;    
    -moz-box-lines : multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap : wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 245px;
    width: 100%;
    margin: auto;
    overflow:hidden;
}

.wrapper-flex-notouch .wrapper-element:nth-child(even) {
    /*order: 10;*/
}
.wrp-dpdn {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1; 
    flex: 1;
    min-width: 170px;
    height: 250px;
    margin-bottom: 50px;
    min-height: 250px;
    /*overflow: hidden;    */
    z-index: 10;
}

.wrp-dpdn-img {
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: 0;
    opacity: 1;
    height: 250px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center top;
    
}
.wrp-dpdn-img img{
    position: absolute;
    left: 50%;
    height: 350px;
    margin-top: -60px;
    margin-left: -365px;
    -webkit-transform: scale(0.72);
    transform: scale(0.72);
    }
.wrp-dpdn-img.wrp-dpdn-2-elements img {margin-left: -490px;}
.wrp-dpdn-img.wrp-dpdn-3-elements img {margin-left: -405px;}
.wrp-dpdn-img.wrp-dpdn-4-elements img {margin-left: -365px;width: 730px;}

.wrp-dpdn-title {
    display: block;
    position: absolute;z-index: 1;
    left: 0px; right: 0px;
    margin: auto;
    width: 100%;
    padding: 10px;
    color: white;
    font-size: 18px !important;
    font-weight: bold;
    text-align:center;
    cursor: pointer;
    line-height: 50px;
}
    .wrp-dpdn-title-2-line {line-height: normal;}
.wrp-dpdn-title:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;left: 0px;right: 0px;
    margin: auto;
    width: 100%;
    min-height: 100%;
    background-color: black;
    opacity: 0.8;
    z-index: -1;
}
.wrp-dpdn-active .wrp-dpdn-title {color: black;background-color: rgba(255,255,255,.8);}
.wrp-dpdn-title a {color: inherit;}
.wrp-dpdn-title a:hover {text-decoration: none;}
.wrp-dpdn-title:hover {opacity:1;}

.wrp-dpdn-active .wrp-dpdn-title:before {opacity: 0;}

.wrp-dpdn-subtitle {    
    display: block;
    position: absolute;
    margin: auto;
    top: 85px;left: 0px;right: 0px;
    min-height: 0px;height: 140px;    
    width: 255px;
    max-width: 100%;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 5px;
    opacity: 1;
    overflow: hidden;
    color: white;
    z-index: 1;
    -webkit-transition: all 0.2s;-o-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;
}   
.wrp-dpdn-subtitle p{/*position:absolute;bottom: 0px;left: 0px;right: 0px;*/padding: 3px 3px;cursor: pointer;}
    .wrp-dpdn-subtitle p:before {
            content: '';
            display: block;
            position: absolute;
            top: 0px;left: 0px;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.6;
            z-index: -1;
        }    
    .wrp-dpdn:hover .wrp-dpdn-subtitle p,
    .wrp-dpdn-active .wrp-dpdn-subtitle p{ /*bottom: -1px;border: 1px solid #d60808; /*padding: 0px 5px;*/}
    /*.wrp-dpdn-subtitle p:after {content:'+'; display: block; width: 100%; height: 35px; font-size: 30px;margin-top: -5px;}*/
    /*.wrp-dpdn-subtitle p:after {content:'en savoir +'; display: block; width: 100%; height: 35px; font-size: 12px;margin-top: 10px;}*/

    @media screen and (min-width: 568px) {
        .wrapper-flex { /*width: 70%;*/}
        .wrp-dpdn-img img{
            margin-top: -65px;
            -webkit-transform: scale(0.70);
            transform: scale(0.70);
        }
    }
    
@media screen and (min-width: 768px) {
    .wrapper-flex.wrapper-flex-notouch {
        -webkit-box-orient: horizontal; /*pour les vieux safari, on reste en affichage colonne car le wrap ne fonctionne pas'*/
        -webkit-flex-direction: row;
        flex-direction: row;
        max-width: 100%;        
    }
    .wrapper-flex {margin-bottom:20px !important;width: 100% !important;}
   
    .wrapper-flex-notouch .wrp-dpdn{ min-width: 170px;-webkit-transition: all 0.7s;-o-transition: all 0.7s;-moz-transition: all 0.7s;transition: all 0.7s;}
     .wrapper-flex-notouch .wrp-dpdn-active::after {
         content:''; 
         position: absolute;
         margin: auto;
         bottom:-25px; left: 0px; right: 0px;
         width: 46px; height: 30px; 
         background-image: url('../img/arrow-down-plain-white.png');
         background-size: 50px;
         background-repeat: no-repeat;
         background-position: center -10px;
     }
    .wrapper-flex-notouch .wrp-dpdn:hover {-webkit-box-flex: 0.7;-webkit-flex: 3;flex: 3;  -webkit-transition: all 0.7s;-o-transition: all 0.7s;-moz-transition: all 0.7s;transition: all 0.7s;}    
    .wrapper-flex-notouch .wrp-dpdn-active, .wrapper-flex-notouch .wrp-dpdn-active:hover {-webkit-box-flex: 0.4;-webkit-flex: 5;flex: 5;-webkit-transition: all 0.7s;-o-transition: all 0.7s;-moz-transition: all 0.7s;transition: all 0.7s;}   
    
    .wrapper-flex-notouch .wrapper-element {width: 100%;}

    .wrapper-flex-notouch .wrp-dpdn {
        margin-bottom: 30px;
        min-height: 245px;
    }
    .wrp-dpdn-img img{
            -webkit-transform: scale(0.72);
            transform: scale(0.72);
    }
    .wrapper-flex-notouch .wrp-dpdn-img{ position: absolute;display: block;top: 0px;margin-top: 0px;height:245px;}  
        .wrapper-flex-notouch .wrp-dpdn-img img {margin-top:-60px;}
    .wrapper-flex-notouch .wrp-dpdn-title {position: relative; height: 60px; width: 100%; margin-bottom: 0px; padding: 5px 10px; font-size:15px; font-weight: normal; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
        .wrapper-flex-notouch .wrp-dpdn-title:before {opacity: 0.8;min-height: 60px;}

    .wrp-dpdn-subtitle-2-elements {width: 265px;}    
    .wrapper-flex-notouch .wrp-dpdn-subtitle {top: 60px;height: 0px;bottom: auto;padding: 0px;opacity: 0;}/*il faut mettre les padding à 0 pour que rien ne soit affiché.*/
        .wrapper-flex-notouch .wrp-dpdn-subtitle:before {
            content: '';
            display: block;
            position: absolute;
            top: 0px;left: 0px;
            width: 100%;
            height: 185px;
            background-color: black;
            opacity: 0.6;
            z-index: -1;
        } 
    .wrapper-flex-notouch .wrp-dpdn-subtitle p{position:relative;width: auto;top: 20px;}
    .wrapper-flex-notouch .wrp-dpdn-subtitle p:before {opacity: 0;}
    .wrapper-flex-notouch .wrp-dpdn:hover .wrp-dpdn-title:before,
    .wrapper-flex-notouch .wrp-dpdn-active .wrp-dpdn-title:before {opacity: 0;}
    .wrapper-flex-notouch .wrp-dpdn:hover .wrp-dpdn-subtitle,
    .wrapper-flex-notouch .wrp-dpdn-subtitle.showOnTouchScreen
    {
        opacity: 1;
        padding: 10px; padding-top: 20px;
        min-height: 200px; 
        -webkit-transition: opacity 0.5s, min-height 0.5s;-o-transition: opacity 0.5s, min-height 0.5s;-moz-transition: opacity 0.5s, min-height 0.5s;transition: opacity 0.5s, min-height 0.5s;                                
    }
    .wrapper-flex-notouch .wrp-dpdn-subtitle.showOnTouchScreen {top: 0px;}
    .wrapper-flex-notouch .wrp-dpdn-subtitle.showOnTouchScreen:before {opacity: 0;}
    .wrapper-flex-notouch .wrp-dpdn-subtitle.showOnTouchScreen p {/*position:absolute;*/width: auto; top: 35%;bottom: auto;left: 0px;right: 0px;margin: auto;}
    .wrapper-flex-notouch .wrp-dpdn-subtitle.showOnTouchScreen p:before {opacity: 0.6;}  
    .wrapper-flex-notouch .wrp-dpdn:hover .wrp-dpdn-title,
    .wrapper-flex-notouch .wrp-dpdn-active .wrp-dpdn-title {color: black;background-color: rgba(255,255,255,.8);}

    .wrapper-flex-notouch .wrp-dpdn-title.lightBefore:before { opacity:0.3; }
    .wrapper-flex-notouch .wrp-dpdn-img.reduceImg { height:45px; }
    .wrapper-flex-notouch .wrp-dpdn-img.reduceImg img {margin-top: -170px;}
    .wrapper-flex-notouch .wrp-dpdn-subtitle.showSubtitle { opacity:1; }
    .wrapper-flex-notouch .wrp-dpdn-subtitle.hideSubtitle { opacity:0; }
    
    .wrapper-flex-notouch .wrapper-element:nth-child(even) {
        order: 10;
    }
   
}
@media screen and (min-width: 1200px) {
    .wrapper-flex-notouch .wrapper-flex { margin: auto;width: 90%; }
    .bg-nav {margin-top: 0px; height: 300px;}
        .bg-nav img{margin-top: 0px;}
    .wrapper-flex-notouch .wrp-dpdn { min-height: 300px;}
    .wrapper-flex-notouch .wrp-dpdn-title { font-size:17px; }
    .wrapper-flex-notouch .wrp-dpdn-title:before { min-height: 60px;}
    /*.bg-nav, */
    .wrapper-flex-notouch .wrp-dpdn-subtitle { top: 60px; }
    .wrapper-flex-notouch .wrp-dpdn-subtitle p{top: 0px;}
        .wrapper-flex-notouch .wrp-dpdn-subtitle:before {height: 240px;}
    
    .wrapper-flex-notouch .wrp-dpdn:hover .wrp-dpdn-subtitle, 
    .wrapper-flex-notouch .wrp-dpdn-active .wrp-dpdn-subtitle,
    .wrapper-flex-notouch .wrp-dpdn-subtitle.showOnTouchScreen {padding-top: 70px; min-height: 250px;}
    
    .wrp-dpdn-img img{
            -webkit-transform: scale(1);
            transform: scale(1);
    }
    .wrapper-flex-notouch .wrp-dpdn-img {height:300px;}
    .wrapper-flex-notouch .wrp-dpdn-img img {margin-top:-25px;}
    .wrapper-flex-notouch .wrp-dpdn-title,
    .wrapper-flex-notouch .wrp-dpdn-img.reduceImg { height: 60px; }
    
     
     
}

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

.wrapper-content {
    display: block;
    width: 100%;
    -webkit-transition: all 0.5s;-o-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;
}



.show-neighbors {
  overflow: hidden;
}
  .show-neighbors .carousel-indicators {
    margin-right: 25%;
    margin-left: 25%;
  }

  .show-neighbors .carousel-control-prev, 
  .show-neighbors .carousel-control-next {
    background: rgba(255, 255, 255, 0.3);
    width: 25%;
    z-index: 11;  /* .carousel-caption has z-index 10 */
  }

  .show-neighbors .carousel-inner {
    /*width: 150%;
    left: -25%;*/
    width: 2400px;
    left: calc( 50% - 1200px );
  }

  .show-neighbors .carousel-item-next:not(.carousel-item-left),
  .show-neighbors .carousel-item-right.active {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
  }

  .show-neighbors .carousel-item-prev:not(.carousel-item-right),
  .show-neighbors .carousel-item-left.active {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
  }
   .show-neighbors .item__third {
    float: left;
    position: relative;  /* captions can now be added */
    height: 100%;
    width: 33.33333333%;
  }
  
  .carousel-inner>.carousel-item {
            transition-duration: 18s;
            transition-timing-function: linear !important;
        }