/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html { color: #3d3d3d; font-size: 16px; line-height: 1.4; border-top:6px solid #3d3d3d; }
body { font-size: 66%; font-family: Ubuntu, sans-serif; background: url(../img/back.png) repeat-y top center } /*environ 10px*/
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection {    background: #b3d4fc;    text-shadow: none; }
::-webkit-input-placeholder{ color: #484949 }
::-moz-placeholder{ color: #484949 }
:-ms-input-placeholder { color: #484949 }

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

audio,canvas,iframe,img,svg,video { vertical-align: middle; }
fieldset {    border: 0;    margin: 0;    padding: 0;}
textarea {    resize: vertical;}
.error { padding: 5px 15px; color: #e3050f; border: 1px solid #e3050f; display: inline-block;}
a {color: #fff; text-decoration: none }
main p a {color: #e3050f}
a:hover { text-decoration: underline;}

h1, h2, h3, h4 { font: italic 700 36px Georgia; }
h1 { color: #e3050f; margin: 0; line-height: 1.6em }
h2 { color: #e3050f; font-size:2.5em; margin: 0 }
h3 { font-size:1.5em; }
h4 { font-size: 1.4em; }

p {font-size:15px; line-height: 1.3em;}
ul { margin: 0; padding: 0; list-style: none; }

main ul { margin: 0px 0 0 30px; padding: 0; list-style: none;font-size: 15px; }
main>ul, main>div>ul { margin-top: 10px;}
main ul h3 { display: inline; font-size:1.2em; vertical-align: middle;}
main ul ul { list-style: circle}

main>ul>li:before, main>div>ul>li:before { content: "• "; font-size:2.5em; vertical-align: middle; line-height: .8em; color: #e3050f; /* or whatever color you prefer */}
main>ul>li:before, main>div>ul>li:before { font-size:1.6em; }
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.content { width:1070px; margin: auto; box-sizing: border-box} .jus { text-align: justify }

header {padding-bottom: 10px; background: #fff}
header nav { width: 633px; float: right; position: relative; height: 65px; }
header nav .link_salarie { position: absolute; right: 20px; margin-top:-5px; font-size:1.1em; color: #6f6f6e }
header nav .link_client { position: absolute; right: 110px; margin-top:-5px; font-size:1.1em; color: #6f6f6e }
header nav ul { margin-top: -6px; }
header nav ul:before { display: inline-block; content:' '; background: url(/img/navbar-sep.png) no-repeat center center; width: 42px; height: 42px; vertical-align: top; margin-right: -1px;}
header nav li {
    display: inline-block;  background:#3d3d3d; vertical-align: bottom;
    font-size: 14px; text-transform: uppercase; box-sizing: border-box;
    height: 36px; margin: 0 -1px; padding-top: 3px;
}
header nav li a { padding: 0 10px}
header nav li a.current {text-decoration: overline}
header nav li i.fa { font-size:25px; float:left; margin: 0; }
header nav li.alsace { background:#e7242d; vertical-align: top; padding-top: 0; margin-top: -1px; }
header nav .sep3 { margin-left: 10px; margin-top: -6px; vertical-align: top; }

header .locaux { width:591px; float:right; color: #e3050f; text-transform: uppercase; font-size: 12px; margin-top: -10px;}
header .locaux li { display: inline-block; margin-right: 15px; padding-right: 15px; border-right:1px solid #6f6f6e}
header .locaux li:last-child { border:none }
header .locaux a { color: #6f6f6e; font-size: 14px; }
header .locaux i { font-size: 18px; vertical-align: middle}

#diapo { height: 429px; overflow: hidden; border-top:2px solid #e3050f; position: relative}
#diapo figure { position:absolute; width: 100%; background: url(/img/diapo-transports/flotte-camions-min.jpg) center center no-repeat; background-size: cover; height: 100%; margin: 0;padding: 0;transform-style: preserve-3d;  }
#diapo.not-home figure h1 { position:absolute; text-align:center; color:#fff; left:50%; bottom: 100px; font-size:3em; transform: translate(-50%, 0);}
#diapo.not-home figure h1 span { background: #e3050f; display: inline-block; height: 47px; padding: 0 10px }
#diapo.not-home figure h1:before, #diapo.not-home figure h1:after { content:' ';background: url(/img/sep-mn.png); float: right; width: 47px; height: 47px; }
#diapo.not-home figure h1:before { transform: rotate(180deg); float: left }
#diapo figcaption { 
    width:50%; height: 100%; background:rgba(0,0,0,.36); display: block; float:left; position: relative; 
}
#diapo figcaption .goLeft, #diapo .goRight { float:left; color:#fff; line-height: 429px; width: 10%; text-align: center; cursor: pointer; padding-top: 25px}
#diapo .goRight { width:5%; position: absolute; right: 0; z-index:10 }
#diapo figcaption .legende { margin-top:80px; width: 80%; float:left; margin-left: 10%; color:#fff}
#diapo figcaption .legende h1, #diapo figcaption .legende h2 { font: italic 700 48px / 69px; color: #ffffff; margin: 20px 0; }
#diapo figcaption .legende hr { width: 60%; margin: 20px 0}
#diapo figcaption .legende p { font-weight: bold; font-size:24px}
#diapo figcaption:after { content:' '; background: url(../img/fd-diapo.png) no-repeat; display: block; width: 428px; height: 429px; position: absolute; left: 100%; top:0%}

#diapo nav { 
    width:calc(50% + 428px - 44px); height:47px; background:#e3050f; display: block; float:left; position: relative; text-align: right;
    font-size:16px; text-transform: uppercase; font-family: Ubuntu; font-weight: 300; line-height: 45px; color:#fff;
}
#diapo nav a { margin: 0 10px; display: inline-block; line-height: 20px; vertical-align: middle; text-align: center;}
#diapo nav:after { content:' '; background: url(../img/sep-mn.png) no-repeat; display: block; width: 428px; height: 47px; position: absolute; left: 100%; top:0%}

main {
    box-sizing: border-box;
    width: 1005px; margin: auto;
    box-shadow: 0px 0px 10px 0.00px rgba(0, 0, 0, 0.75);
    position:relative;
    padding:30px;
    background:#fff url(../img/back-main.png) no-repeat bottom right;
}

 main { margin-top: -50px }
.blocs { max-width:950px; margin: auto; width:100% }
.bloc {
    width: 235px; height: 190px; float:left;
    margin: 15px 1px 15px 0;
    background-size: cover; background-position: center;
}
.bloc div { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); margin: 0; transition: all 0.4s; box-sizing: border-box; cursor: pointer }
.bloc div:hover, .bloc.current div { background-color: rgba(0, 0, 0, 0); border-top:8px solid #e3050f; border-bottom:8px solid #e3050f; }
.bloc div p { margin: 90px 0 0 0; color: #fff; text-align: center; font-size:2em; float:left; width: 100%; opacity: .9; transition: all .7s; text-shadow:0px 0px 5px #000 }
.bloc div:hover p, .bloc.current div p { margin: 70px 0 0 0; color:#e3050f}

.bl_march { background-image: url(../img/home-transport/marchandises.jpg); }
.bl_hydro { background-image: url(../img/home-transport/hydrocarbures.jpg); }
.bl_pulve { background-image: url(../img/home-transport/pulverulents.jpg); }
.bl_vehic { background-image: url(../img/home-transport/vehicules.jpg); }

.home .d-flex article { flex-basis: 33%; margin-right: 4%; flex-shrink: 0;flex-direction: column }
.home .d-flex article h2 { margin-bottom: 15px; }
.blocs.d-flex { flex-wrap: wrap; justify-content: center}
.blocs.d-flex.hasActu .bloc { flex-basis: 45%; margin: 1%}

main.salarie article { border-bottom: 1px solid #e3050f; padding-bottom: 20px }

#onglets{
    display: none; margin-left: 0;
}
#onglets li{
    position: relative; display: inline-block;
    padding: 10px 15px;  margin-right: 5px;
    border: 1px solid #d1d1d1;background-color: #f1f1f1;
    opacity: .7;z-index: 1;
    font-size: 1.1em;cursor: pointer;
}
#onglets li:before { content: '';}
#onglets .actif{
    color:#e3050f; opacity: 1;
    border-bottom: 1px solid #f1f1f1;
    z-index: 10;
}
#contenu_onglet{
    background:#f1f1f1;    border: 1px solid #d1d1d1;
    position: relative;margin-top: -1px;
    padding: 20px;    z-index: 5;
}

.offre { border: 1px solid #e3050f; background: #fff; padding: 7px 15px; cursor: pointer; margin-bottom: 5px;}
.offre>span { display: inline-block; float: right; color: #e3050f; font-size: 2em; font-weight: bold; margin-top: -10px;}
.detail { width: 100%; overflow: hidden }

footer {
    width: 100%; clear:both;
    background: url(../img/bk-footer.jpg) no-repeat center center;
    background-size:cover; font-size:14px; line-height: 24px;
    padding: 40px 0; margin-top:50px;   
    box-sizing:border-box;
}
footer .col { width: 225px; float: left; margin-right:3%;}
footer .mn-footer { width: 780px }
footer .mn-footer strong { color: #fff }
footer .mn-footer div.alignleft { width: 43%; margin-right:2%; line-height: 1.9em }
footer .mn-footer .alignleft.partenaires { width: 70px; margin-right: 0;}
footer .mn-footer .alignleft.partenaires img { margin-bottom: 2px}
footer hr { border-width: 1px; margin: 0}
footer .siege { float:left; border-left:9px solid #e3050f; text-align: center; color:#fff; font-weight: 300; line-height: 19px; padding: 14px; margin-bottom:14px }
footer .siege strong {font-style: italic; font-family: Georgia }

#feed { border: 1px solid #e3050f; padding: 5px; text-align: center; border-left-width: 5px}
.contact form { font-size: 1.4em; margin-bottom: 50px}
.contact input[type=text], .contact input[type=email], .contact input[type=tel], .contact textarea { width: 100%; border:1px solid #959595; margin-bottom: 10px; padding: 3px 5px;}
input[type=submit], .btn { font-family: Georgia; text-transform: uppercase; font-weight: normal; border:0; background-color: #e3050f; color: #fff; transition: background-color 0.6s; text-align: center; display: inline-block; padding: 7px 30px; font-size: 1.2em }
input[type=submit]:hover, .btn:hover { background-color: #b30000; text-decoration: none }

.postuler_rappel { flex-basis: 40%; margin-left: 5%; flex-shrink: 0}
.postuler .error { width: 90%; font-size: 1.4em; font-weight: bold; margin: auto; text-align: center;}
.equipe { text-align: center; padding-bottom: 20px; }
.equipe div { width: 33%; display: inline-block; text-align: left; }
.equipe h4 { margin-bottom: 0;}

div.hideandshow { display: none; }
.transports>div.blocs, div.hideandshow.current { display: block }
/* ==========================================================================
   Helper classes
   ========================================================================== */
.alignright { float: right; }
.alignleft { float: left; }
.d-flex { display: flex;}
.tac { text-align: center;}
.col2 {width: 50%; padding: 0 2%; float: left; box-sizing:border-box; }
.col3 {width: 33%; padding: 0 2%; float: left; box-sizing:border-box; }
.col4 {width: 25%; padding: 0 2%; float: left; box-sizing:border-box; }
.alpha { padding-left: 0} .omega { padding-right: 0}
.hidden {
    display: none;
}

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

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

.invisible {    visibility: hidden;}

.clearfix:before,.clearfix:after {    content: " ";    display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    a,
    a:visited {
        text-decoration: underline;
    }

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

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

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

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

    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;
    }
    
    body>footer { display: none}
}