/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #373737;

    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.loader{display:block; position:fixed; z-index:999999999; top:0; left:0; width:100%; height:100%; padding:0; margin:0; background-color:#373737;
}
.loader .gif{display:block; position:absolute; top:50%; left:50%; height:100px; line-height:100px; width:100px; margin:-50px 0 0 -50px; padding:0; text-align:center; font-size:6rem; color:#fff; -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;}
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.loader .logo{display:block; position:absolute; top:50%; left:50%; height:60px; line-height:60px; width:60px; margin:-30px 0 0 -30px; padding:0; text-align:center; font-size:3rem; color:#fff; }

header{display:block; position:fixed; z-index:999; top:-100px; left:0;  width:100%; margin:0; padding:0; opacity:0; background-color:#373737; transition:top 0s linear 0.3s, opacity 0.3s linear 0s;}
header .wrapper{display:block; width:1200px; margin:0 auto; padding:0; position:relative; height:80px;}
header .menu-navigation{display:block; width:50px; height:50px; text-align:center; position:absolute; top:15px; left:0; padding:0; margin:0; border:solid 1px #fff;
 overflow:hidden; cursor:pointer; z-index:99999999; color:#fff;
 font-size:2rem;}
header .menu-navigation hr{display:block; border:none; padding:0; margin:-1px 0 0 -20px; height:2px; width:40px; position:absolute; left:50%; background-color:#fff;
}
header .menu-navigation .haut{top:35%; }
header .menu-navigation .centre{top:50%; }
header .menu-navigation .bas{top:65%; }
header .menu-navigation:hover .haut{top:30%;}
header .menu-navigation:hover .bas{top:70%;}
header .logo{display:block; width:100px; height:80px; position:absolute; top:0; left:50%; padding:0; margin:0 0 0 -50px; 
overflow:hidden; cursor:pointer; z-index:99999999;}
header .logo i{display:block; width:100%; height:80px; text-align:center; line-height:80px;  padding:0; margin:0; color:#fff; font-size:6rem;}
header .menu-contact{display:block; width:50px; height:50px; text-align:center; line-height:50px; position:absolute; top:15px; right:0; padding:0; margin:0; border:solid 2px #fff;
 z-index:99999999; color:#fff;
 font-size:2rem; }
.header-scroll{top:0; opacity:1; transition:top 0.3s linear, opacity 0s linear 0s; }


.background-noir-jcg{display:block; position:relative; z-index:9; width:100%; height:300px; padding:0; margin:0; overflow:hidden; 
 background: url('../img/bck-noir.png') top center no-repeat fixed; background-color:#373737;}
.background-noir-jcg .wrapper{display:block; position:absolute; width:1200px; height:300px; bottom:0; left:50%; margin:0 0 0 -600px; padding:0;}
.background-noir-jcg .wrapper .menu-navigation{display:block; opacity:0; width:60px; height:60px; position:absolute; top:20px; left:0; padding:0; margin:0; border:solid 1px transparent; overflow:hidden; cursor:pointer; z-index:99999999; animation:mario-active-menu-border 10s linear 3s; animation-fill-mode:forwards; }
.background-noir-jcg .wrapper .menu-navigation hr{display:block; border:none; padding:0; margin:-1px 0 0 -20px; height:2px; width:40px; position:absolute; left:50%; background-color:#f4f4f4;}
.background-noir-jcg .wrapper .menu-navigation .haut{top:110%; animation:mario-active-menu-barre-haut 10s linear 3s; animation-fill-mode:forwards;}
.background-noir-jcg .wrapper .menu-navigation .centre{top:110%; animation:mario-active-menu-barre-centre 10s linear 3s; animation-fill-mode:forwards;}
.background-noir-jcg .wrapper .menu-navigation .bas{top:110%; animation:mario-active-menu-barre-bas 10s linear 3s; animation-fill-mode:forwards;}
.background-noir-jcg .wrapper .menu-navigation:hover .haut{top:30%;}
.background-noir-jcg .wrapper .menu-navigation:hover .bas{top:70%;}
.background-noir-jcg .wrapper .menu-contact{display:block; opacity:0; width:60px; height:60px; text-align:center; line-height:60px; position:absolute; top:20px; right:0; padding:0; margin:0; border:solid 2px #f4f4f4; z-index:99999999; color:#f4f4f4; font-size:0rem;  animation:mario-active-contact 10s linear 3s; animation-fill-mode:forwards; }

.background-noir-jcg .porte{display:block; z-index:1; width:30px; height:35px; position:absolute; bottom:0; left:0; padding:0; margin:0; background-color:#f4f4f4; }
.background-noir-jcg .pont1{display:block; z-index:1; width:30px; height:2px; position:absolute; bottom:350px; left:46%; padding:0; margin:0; background-color:#f4f4f4; animation:mario-active-pont1 10s linear 3s infinite;}
.background-noir-jcg .pont2{display:block; z-index:1; width:30px; height:2px; position:absolute; bottom:350px; left:49%; padding:0; margin:0; background-color:#f4f4f4; animation:mario-active-pont2 10s linear 3s infinite; }
.background-noir-jcg .pont3{display:block; z-index:1; width:30px; height:2px; position:absolute; bottom:350px; left:52%; padding:0; margin:0; background-color:#f4f4f4; animation:mario-active-pont3 10s linear 3s infinite; }
.background-noir-jcg .mario{display:block; z-index:9; opacity:0; width:17px; height:26px; position:absolute; bottom:0; left:8px; padding:0; margin:0;  animation:mario 10s linear 3s infinite;}
.background-noir-jcg .tuyaux{display:block; z-index:99; width:40px; height:70px; position:absolute; bottom:-70px;  right:-5px; padding:0; margin:0; background-color:green; animation:mario-active-tuyaux 10s linear 3s; animation-fill-mode:forwards;}


.contenu{display:block; position:relative; width:100%; padding:150px 0 40px 0; margin:0; background: url('../img/bck-blanc.png') top center no-repeat fixed; background-color:#fff; overflow:hidden;}
.contenu .citation{display:block; width:100%; max-width:800px; font-family: 'Prociono', serif; font-size:1.8rem;  text-align:center; padding:0; margin:0 auto; color:#c0b283; letter-spacing:2px;}


@keyframes mario { 0% { opacity:0; } 2% { opacity:1; } 4% { opacity:0; } 6% { opacity:1; } 8% { opacity:0; } 10% { opacity:1; } 11%{ left:8px; } 13% { left:30px; bottom:0px; } 17% { bottom:200px; } 21% { bottom:0; left:3%;} 47%{bottom:0;} 53%{ bottom:150px;} 55%{bottom:121px;} 62%{bottom:121px;} 64%{bottom:150px;} 70%{bottom:0px;} 92%{bottom:0;} 96%{bottom:200px;} 98%{ bottom:70px; left:98%; } 100%{bottom:40px; left:98%; opacity:1;} }
@keyframes mario-active-menu-border {0% { opacity:1; border-color:transparent; } 23% { border-color:transparent; } 25%{ border-color:#f4f4f4; } 27%{ border-color:transparent; }  29%{ border-color:#f4f4f4; } 31%{ border-color:transparent; }  33%{ border-color:#f4f4f4; } 100%{ border-color:#f4f4f4; opacity:1; }  }
@keyframes mario-active-menu-barre-haut {0% { top:110%; } 17% { top:110%; } 19%{top:35%;} 100%{top:35%;}}
@keyframes mario-active-menu-barre-centre {0% { top:110%; } 19% { top:110%; } 21%{top:50%;} 100%{top:50%;}}
@keyframes mario-active-menu-barre-bas {0% { top:110%; } 21% { top:110%; } 23%{top:65%;} 100%{top:65%;} }
@keyframes mario-active-contact {0% { opacity:1; font-size:0rem; border-color:transparent; } 96% { border-color:transparent; font-size:0rem; } 97%{ border-color:#eee;  } 98%{ border-color:transparent; }  99%{ border-color:#f4f4f4; } 100%{  border-color:#f4f4f4; font-size:2rem; opacity:1; }   }
@keyframes mario-active-pont1 {0% { background-color:#f4f4f4; bottom:350px;} 30% {bottom:350px;} 35% {bottom:120px;} 55% { background-color:#f4f4f4; } 56%{ background-color:red; } 57%{ background-color:#f4f4f4; }  58%{ background-color:red; } 59%{ bottom:120px; transform:rotate(0deg); }  65%{ bottom:-18px; transform:rotate(-90deg); } 100%{bottom:-18px; background-color:red; transform:rotate(-90deg);} }
@keyframes mario-active-pont2 {0% { background-color:#f4f4f4; bottom:350px;} 31% {bottom:350px;} 36% {bottom:120px;} 59% { background-color:#f4f4f4; } 60%{ background-color:red; } 61%{ background-color:#f4f4f4; }  62%{ background-color:red; } 63%{ bottom:120px; transform:rotate(0deg); }  69%{ bottom:-18px; transform:rotate(-90deg); } 100%{bottom:-18px; background-color:red; transform:rotate(-90deg);} }
@keyframes mario-active-pont3 {0% { background-color:#f4f4f4; bottom:350px;} 32% {bottom:350px;} 37% {bottom:120px;} 63% { background-color:#f4f4f4; } 64%{ background-color:red; } 65%{ background-color:#f4f4f4; }  66%{ background-color:red; } 67%{ bottom:120px; transform:rotate(0deg); }  73%{ bottom:-18px; transform:rotate(-90deg); } 100%{bottom:-18px; background-color:red; transform:rotate(-90deg);} }
@keyframes mario-active-tuyaux {0% { bottom-70px} 73% {bottom:-70px;} 76% {bottom:0px;}  100%{bottom:0;} }



.services{display:block; width:1200px; padding:80px 0; margin:0 auto; }
.services li{display:block; float:left; width:33.333%; padding:0; margin:0; box-sizing:border-box; }
.services li a{display:block; position:relative; text-decoration:none; color:#373737; margin:20px 0; padding:20px 20px; border-right:solid 1px #ddd; overflow:hidden;}
.services li a .hover{display:block; position:absolute; top:0; left:20px; opacity:0; overflow:hidden; width:calc( 100% - 40px ); height:100%; padding:0; margin:0; background-color:transparent; transition:all 0.6s linear 0s;}
.services li a:hover .hover{opacity:1; background-color:#373737; transition:all 0.3s linear 0s;}
.services li:nth-child(3n) a{border:none;}
.services li hr{display:block; border:none; padding:0; margin:0 auto; height:1px; width:calc( 100% - 40px ); background-color:#ddd;}
.services li a .icone{display:block; width:80px; height:80px; border:solid 2px #888; border-radius:50%; background-color:#fff; line-height:85px; text-align:center; font-size:2rem; padding:0; margin:0 auto; color:#666; transition:all 0.5s linear;}
.services li a h2{font-size:1.2rem; text-align:center; padding:20px 20px; margin:0; color:#373737;  transition:all 0.5s linear;}
.services li a h3{font-size:0.9rem; text-align:justify; text-align-last:center; padding:0 20px; margin:0; color:#888;  transition:all 0.5s linear;}
.services li a:hover .icone{border-color:#c0b283; color:#666;}
.services li a:hover h2{color:#c0b283;}
.services li a:hover h3{color:#373737;}


.contenu-black{display:block; position:relative; width:100%; padding:0; margin:0; background-color:#f4f4f4; overflow:hidden;}
.contenu-black .titre{display:block; position:absolute; width:1200px; top:0; left:50%; padding:20px 0 0 630px; margin:0 0 0 -600px; font-size:2.4rem; letter-spacing:1px; color:#373737; z-index:99; box-sizing:border-box;}


/* slider-classique */
.wrapper-slider-classique {display:block; position:relative; z-index:9; width:1200px; padding:0; margin:0 auto; overflow:hidden;}
.wrapper-slider-classique .bx-wrapper {position: relative;margin: 0 auto;padding: 0;*zoom: 1;}
.wrapper-slider-classique .bx-wrapper .slider-classique{display:block; padding:0; margin:0;}
.wrapper-slider-classique .bx-wrapper li{display:block; width:100%; padding:0 600px 0 0; margin:0; box-sizing:border-box;}
.wrapper-slider-classique .bx-wrapper img {display:block; width:100%; max-width: 100%;display: block;}
.wrapper-slider-classique .bx-wrapper .bx-viewport {background: #f4f4f4;}
.wrapper-slider-classique .bx-wrapper .bx-loading {min-height: 50px;background: url(../img/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}
/*affichage des puces*/
.wrapper-slider-classique .bx-wrapper .bx-pager {display:none;text-align: center; position: absolute; bottom: 30px; width: 100%; z-index:99;}
.wrapper-slider-classique .bx-wrapper .bx-pager .bx-pager-item,.wrapper-slider-classique .bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;}
.wrapper-slider-classique .bx-wrapper .bx-pager.bx-default-pager a {background: white;text-indent: -9999px;display: block;width: 20px;height: 20px;margin: 0 10px;outline: 0;border-radius: 50%;}
.wrapper-slider-classique .bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active {background: #000;}
/*affichage des fleches*/
.wrapper-slider-classique .bx-wrapper .bx-prev {display:block; position:absolute; bottom:20px; right: 0px; width:60px; height:60px; margin:0; padding:0; text-align:center; line-height:80px; text-decoration:none; font-size:2.3rem; color:#373737;  Background-Color: transparent; border:solid 2px #373737; z-index:99; transition:all 0.3s ease;}
.wrapper-slider-classique .bx-wrapper .bx-next {display:block; position:absolute; bottom:100px; right: 0px; width:60px; height:60px; margin:0; padding:0; text-align:center; line-height:80px; text-decoration:none;  font-size:2.3rem; color:#373737;  Background-Color: transparent; border:solid 2px #373737; z-index:99; transition:all 0.3s ease;}
.wrapper-slider-classique .bx-wrapper .bx-prev:hover ,.wrapper-slider-classique .bx-wrapper .bx-next:hover{Background-Color: white; color:#f6e400;}
.wrapper-slider-classique .bx-wrapper .bx-prev:active ,.wrapper-slider-classique .bx-wrapper .bx-next:active{Background-Color: white; color:#f6e400;}


.client{display:block; position:relative; width:100%; padding:100px 0; margin:0; overflow:hidden;}
.client .titre{display:block; width:100%; max-width:800px; font-family: 'Prociono', serif; font-size:1.8rem;  text-align:center; padding:0; margin:0 auto; color:#c0b283; letter-spacing:2px;}

/* slider-classique */
.wrapper-slider-client {display:block; position:relative; z-index:9; width:1200px; padding:0; margin:0 auto; overflow:hidden;}
.wrapper-slider-client .bx-wrapper {position: relative;margin: 0 auto;padding: 0 100px;*zoom: 1;}
.wrapper-slider-client .bx-wrapper .slider-classique{display:block; padding:0; margin:0;}
.wrapper-slider-client .bx-wrapper li{max-width:100%; width:20%; padding:0; margin:0; box-sizing:border-box;}
.wrapper-slider-client .bx-wrapper img {display:block; width:100%; height:auto; padding:20px; margin:0; box-sizing:border-box; }
.wrapper-slider-client .bx-wrapper .bx-viewport {background: transparent;}
.wrapper-slider-client .bx-wrapper .bx-loading {min-height: 50px;background: url(../img/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}
/*affichage des puces*/
.wrapper-slider-client .bx-wrapper .bx-pager {display:none;text-align: center; position: absolute; bottom: 30px; width: 100%; z-index:99;}
.wrapper-slider-client .bx-wrapper .bx-pager .bx-pager-item,.wrapper-slider-client .bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;}
.wrapper-slider-client .bx-wrapper .bx-pager.bx-default-pager a {background: white;text-indent: -9999px;display: block;width: 20px;height: 20px;margin: 0 10px;outline: 0;border-radius: 50%;}
.wrapper-slider-client .bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active {background: #000;}
/*affichage des fleches*/
.wrapper-slider-client .bx-wrapper .bx-prev {display:block; position:absolute; bottom:50%; left: 0px; width:60px; height:60px; margin:0; padding:0; text-align:center; line-height:80px; text-decoration:none; font-size:2.3rem; color:#373737;  Background-Color: transparent; border:solid 2px #373737; z-index:99; transition:all 0.3s ease;}
.wrapper-slider-client .bx-wrapper .bx-next {display:block; position:absolute; bottom:50%; right: 0px; width:60px; height:60px; margin:0; padding:0; text-align:center; line-height:80px; text-decoration:none;  font-size:2.3rem; color:#373737;  Background-Color: transparent; border:solid 2px #373737; z-index:99; transition:all 0.3s ease;}
.wrapper-slider-client .bx-wrapper .bx-prev:hover ,.wrapper-slider-client .bx-wrapper .bx-next:hover{Background-Color: white; color:#f6e400;}
.wrapper-slider-client .bx-wrapper .bx-prev:active ,.wrapper-slider-client .bx-wrapper .bx-next:active{Background-Color: white; color:#f6e400;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* #222 prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}