/**
 * Forms
 */

/* All elements */
.field { margin-bottom: 30px; position:relative; }
.field label { display: inline-block; margin:0; }

[data-validate-for] { display:none; font-size:10px; line-height:10px; position:absolute; right:0; bottom:-1.2em; }
[data-validate-for].visible { display:block; }

/* Textfields & textareas */
.field.textfield input,
.field.textarea textarea { display: block; width: 100%; padding: 10px; border: 1px solid #ccc; }

/* Checkbox & Radio */
.field.checkbox label,
.field.radio label { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; position:relative; margin-bottom:10px; cursor: pointer; }

.field.checkbox input,
.field.radio input,
.field.checkbox span:before,
.field.radio span:before { width:20px; height:20px; margin-right:10px; }

.field.checkbox span:before,
.field.radio span:before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); border:1px solid #ccc; background:#fff; }

.field.checkbox span:after,
.field.radio span:after { content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%); width: 14px; height:14px; background:#ccc; opacity:0; transition:all 0.5s ease 0s; }

.field.checkbox input:checked+span:after,
.field.radio input:checked+span:after { opacity: 1; }

.field.checkbox span:before,
.field.checkbox span:after { border-radius: 0; }

.field.radio span:before,
.field.radio span:after { border-radius: 50%; }

.field.radio.inline,
.field.checkbox.inline { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
.field.radio.inline label,
.field.checkbox.inline label { margin-right:15px; margin-bottom:0; }

/* Select */
.field.select select { display:block; width:100%; padding:10px; border:1px solid #ccc; }

/* Captcha */
.field.captcha { display:flex; flex-direction:row; justify-content:center; }

/**
 * Navigation
 **/
 
/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }

/**
 * Legal
 **/
.legal { margin:60px 0; }
.legal h1 { font-size:4rem; margin:0 0 1em 0; }
.legal h2 { font-size:3rem; margin:1em 0; }
.legal h3 { font-size:2.5rem; margin:1em 0; }
.legal h4 { font-size:2rem; margin:1em 0; }
.legal h5 { font-size:1.5rem; margin:1em 0; }
.legal table { width:100%; margin:2em 0; }
.legal table th,
.legal table td { padding:1em; border:1px solid rgba(0,0,0,0.25); }
/**
 * General Elements
 **/

html { font-size:10px; }
body { font-size:2rem; font-family:'Mont', sans-serif; color:#000; }
:focus, button:focus { outline:none; }

/* Images */
img { max-width:100%; height:auto; }
img[data-sizes] { display:block; width:100%; }

/* Paragraphs */
p { margin-bottom:1em; line-height:1.6em; opacity:0.6; }
p:last-child { margin-bottom:0; }

p i { color:#005C7F; font-style:normal; opacity:1; }

/* Link */
a { color:#005C7F; }
a:hover { text-decoration:none; }

/* Lists */
ul, ol { list-style:none; margin-bottom:0; padding:0; }

/**
 * Components
 **/

/* Alert */
.alert { position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; }
.alert .close { display:none; }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-primary { color: #004085; background-color: #cce5ff; border-color: #b8daff; }
.alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/**
 * Layout
 **/
#page { position:relative; width:100%; overflow:hidden; }
#main { margin-top:120px; }

#header { position:fixed; left:0; top:0; width:100%; z-index:5; background:#fff; }
#header .row { height:120px; align-items:center; }
#header .navigation { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; height:100%; }
#header .navigation .top { display:flex; flex-direction:row; align-items:center; justify-content: flex-start; font-size:1.8rem; }
#header .navigation .top .item { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:10px 15px; margin-left:15px; }
#header .navigation .top .item svg { margin-left:15px; }
#header .navigation .top .item.extranet { color:#fff; position:relative; }
#header .navigation .top .item.extranet:before { content:''; position:absolute; left:0; top:0; width:50vw; height:100%; z-index:-1; background:rgba(0, 92, 127, 0.7); color:#fff; }
#header .navigation .top .item.extranet svg { margin-left:0; margin-right:15px; }
#header .navigation .bottom { margin-bottom:30px; }
#header .navigation .bottom .menu { font-size:1.6rem; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
#header .navigation .bottom .menu li { margin-left:50px; }
#header .navigation .bottom .menu a { color:#707070; padding:10px; position:relative; }
#header .navigation .bottom .menu a:before { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:2px; background:#005C7F; opacity:0.7; transition:all 0.5s ease 0s; }
#header .navigation .bottom .menu li.active a:before,
#header .navigation .bottom .menu a:hover:before { width:100%; }

#overlay { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; height:100%; }
#footer .image img { min-height:200px; object-fit:cover; }
#footer .map iframe { display:block; }
#footer .bottom { background:rgba(0,92,127,0.69); text-align:center; padding:50px 0; }
#footer .bottom a { color:#fff; }
#footer .bottom .coordonnees { color:#fff; margin:30px 0; }
#footer .bottom .links { opacity:0.6; }
#footer .bottom .links ul { display:flex; flex-direction:row; align-items:center; justify-content: center; color:#fff; font-size:1.4rem; }
#footer .bottom .links li:after { content:'|'; margin:0 5px; }
#footer .bottom .links li:last-child:after { content:none; }

.hamburger { display:none; padding:0; }
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background:#005C7F; }
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before { background:#fff; }

/**
 * Components
 */

/* General elements */
h2 { font-size:3.2rem; color:#005C7F; font-weight:900; margin-bottom:1em; display:flex; flex-direction:column; align-items:center; justify-content:center; }
h2 svg { margin-bottom:50px; }
h2 i { font-size:2.6rem; font-weight:normal; font-style:normal; }

/* Utility classes */
.align-center { align-items:center; }
.text-center { text-align:center; }

.btn { display:inline-flex; background:#005C7F; border:2px solid #005C7F; color:#fff; padding:10px 15px; font-size:1.4rem; font-weight:bold; transition:all 0.5s ease 0s; margin-top:50px; }
.btn:hover { background:#4CAC9A; border-color:#4CAC9A; color:#fff; }

.bubble { display:flex; flex-direction:column; align-items:center; justify-content:center; width:200px; height:200px; background:#fff; border-radius:100%; color:#005C7F; text-align:center; font-size:1.4rem; transition:all 0.5s ease 0s; }
.bubble .icon { margin-bottom:15px; }
.bubble .arrow { margin-top:15px; }
.bubble svg { transition:all 0.5s ease 0s; }
.bubble p { opacity:1; }
.bubble b { font-size:1.6rem; font-weight:900; }
a.bubble:hover { background:#005C7F; color:#fff; }
a.bubble:hover svg { fill:#fff; }

.padding { padding-top:100px; padding-bottom:100px; }

.trait { position:relative; padding-top:250px; }
.trait:before { content:''; position:absolute; left:50%; top:15px; width:1px; height:200px; background:#005C7F; }
.trait.mini { padding-top:150px; }
.trait.mini:before { height:100px; }

.slider { position:relative; }
.swiper-wrapper { box-sizing:border-box; }
.slider .pagination { display:flex; flex-direction:row; align-items:center; justify-content: center; margin-top:50px; }
.slider .pagination .swiper-pagination-bullet { background:rgba(0,92,127,0.2); opacity:1; margin:0 5px; width:8px; height:8px; }
.slider .pagination .swiper-pagination-bullet-active { background:rgba(0,92,127,1); width:12px; height:12px; }

.legal h1, .legal h2, .legal h3, .legal h4 { text-align:left; display:block; }

[data-bg] { background-size:cover; background-position:center center; background-repeat:no-repeat; }

#heading { position:relative; }
#heading .slider .swiper-slide img { min-height:700px; object-fit:cover; object-position:center center; }

#heading .slider:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.2); pointer-events:none; z-index:2; }
#heading .left .caption { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3; text-align:center; width:70%; }
#heading .left .caption h1 { font-size:6rem; color:#fff; line-height:1em; font-weight:bold; }
#heading .left .caption .btn { margin-top:50px; }
#heading .left .pagination { position:absolute; bottom:50px; width:100%; z-index:2; justify-content:center; align-items:center; display:flex; }
#heading .left .pagination .swiper-pagination-bullet { background:#fff; opacity:0.2 width:8px; height:8px; }
#heading .left .pagination .swiper-pagination-bullet-active { background:#fff; opacity:1; width:12px; height:12px; }
#heading .right { display:flex; align-items:center; justify-content: center; }
#heading .right:before { content:''; position:absolute; z-index:0; left:0; top:0; width:100%; height:100%; background:rgba(0, 92, 127, 0.35); pointer-events:none; }

#heading .overlay { position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; overflow:hidden; }
#heading .overlay .row { height:100%; }
#heading .overlay .left { padding-right:100px; }
#heading .overlay .right { color:#fff; font-size:1.6rem; padding-left:100px; }
#heading .overlay .right:before { z-index:-1; }
#heading .overlay .right .text { max-width:80%; }
#heading .overlay .right .text p { opacity:1; }
#heading .overlay .bubble { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }

/**
 * Page specific
 **/

#accueil #heading .right ul { position:relative; z-index:2; }
#accueil #heading .right li { margin:50px 0; }
#accueil #heading .slider,
#accueil #heading .swiper-container { height:100%; }
#accueil #heading .swiper-wrapper { align-items:stretch; }

#accueil #heading img { height:100%; object-fit:cover; min-height:0 !important; }
#accueil #intro .left { text-align:right; }
#accueil #intro .left h2 { opacity:0.6; }
#accueil #actualites .title { color:#005C7F; opacity:0.6; font-size:2.2rem; font-weight:900; margin-bottom:1em; }

#entreprise #historique .carousel { text-align:center; position:relative; margin-top:80px; }
#entreprise #historique .carousel .swiper-wrapper { box-sizing:border-box; align-items:center; }
#entreprise #historique .carousel .date { font-size:2.4rem; font-weight:900; color:rgba(0,92,127,0.6); transition:all 0.5s ease 0s; }
#entreprise #historique .carousel .text { font-size:1.8rem; color:rgba(0,92,127,0.6); transition:all 0.5s ease 0s; }
#entreprise #historique .carousel .swiper-slide { cursor:pointer; }
#entreprise #historique .carousel .swiper-slide-active .date { font-size:4.8rem; color:#005C7F; }
#entreprise #historique .carousel .swiper-slide-active .text { color:#005C7F; }
#entreprise #historique .carousel .navigation button { padding:0; background:none; border:none; position:absolute; top:50%; transform:translateY(-50%); }
#entreprise #historique .carousel .navigation .prev { left:-100px; }
#entreprise #historique .carousel .navigation .next { right:-100px; }

#entreprise #galerie .swiper-slide { cursor:pointer; }
#entreprise #galerie .swiper-slide:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; z-index: 1; background:rgba(44,127,142); opacity:0.5; transition:all 0.5s ease 0s; }
#entreprise #galerie .caption { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; text-align:center; color:#fff; opacity:0; margin-top:30px; transition:all 0.5s ease 0s; }
#entreprise #galerie .caption p { opacity:1; font-size:1.4rem; }
#entreprise #galerie .swiper-slide:hover:before,
#entreprise #galerie .swiper-slide-active:before { opacity:0/*.8*/; }
#entreprise #galerie .swiper-slide:hover .caption,
#entreprise #galerie .swiper-slide-active .caption { margin-top:0; opacity:1; }
#entreprise #galerie .swiper-slide img { min-height:200px; object-fit:cover; }

#secteurs-activite #intro { text-align:center; }
#secteurs-activite #intro .swiper-wrapper { align-items:center; }
#secteurs-activite #intro .swiper-slide { opacity:0.5; transition:all 0.5s ease 0s; cursor:pointer; }
#secteurs-activite #intro .swiper-slide-active { opacity:1; }
#secteurs-activite #intro .swiper-slide svg { margin-bottom:50px; }
#secteurs-activite #clients .icons { display:flex; flex-direction:row; align-items:center; justify-content: space-evenly; margin:50px 0; flex-wrap:wrap; }
#secteurs-activite #clients .icons img { margin:15px; display:block; }

#plan-de-transport #intro .left h3 { font-size:3.2rem; margin:100px 0 50px 0; text-align:center; font-weight:normal; color:#005C7F; }
#plan-de-transport #intro .right .map { margin-bottom:100px; }
#plan-de-transport #intro .right .downloads {  text-align:center; }
#plan-de-transport #intro .right .downloads h3 { font-size:2.4rem; font-weight:350; color:rgba(0,0,0,0.6); }
#plan-de-transport #intro .right .downloads li { margin-bottom:50px; }
#plan-de-transport #intro .right .downloads a { display:flex; flex-direction:row; align-items:center; justify-content:center; }
#plan-de-transport #intro .right .downloads svg { margin-left:30px; }
#plan-de-transport #intro .form { position:relative; }
#plan-de-transport #intro .form .textfield { margin-bottom:0; }
#plan-de-transport #intro .form .textfield:before { content:''; position:absolute; left:0; bottom:0; width:calc(100% - 40px); height:1px; background:#005C7F; }
#plan-de-transport #intro .form .textfield label { display:block; text-align:center; font-size:3.6rem; font-weight:900; color:#005C7F; }
#plan-de-transport #intro .form .textfield input { border:none; }
#plan-de-transport #intro .form .textfield svg { position:absolute; right:0; bottom:5px; }
#plan-de-transport #intro .form .dropdown { left:0; width:100%; border:1px solid #ccc; background:#fff; font-size:1.4rem; }
#plan-de-transport #intro .form .dropdown a { display:block; padding:5px 15px; }

#plan-de-transport #intro #table { margin-top:100px; }
#plan-de-transport #intro #table { text-align:center; }
#plan-de-transport #intro #table h4 { color:#005C7F; font-size:3rem; font-weight:bold; text-transform:uppercase; margin-bottom:1em; }
#plan-de-transport #intro #table table { width:100%; border-collapse:separate; border-spacing:15px; }
#plan-de-transport #intro #table th { padding:15px; background:#ccc; border-radius:50px; background-color:rgba(0,92,127,0.42); text-transform:uppercase; color:#fff; }
#plan-de-transport #intro #table th.active { background:rgba(0,92,127,1); }
#plan-de-transport #intro #table td { padding:15px 30px 30px 30px; color:#005C7F; font-size:3.2rem; }
#plan-de-transport #intro #table td.active { border-bottom:2px solid rgba(0,92,127,0.2); }

#contact #form { background-color:#e9f1f4; background-blend-mode:multiply; }
#contact #form .title-wrapper { margin-bottom:60px; }
#contact #form .title-wrapper h1 { font-size:6rem; font-weight:900; color:#005C7F; }
#contact #form .title-wrapper p { text-align:right; }
#contact #form { background-position:bottom left; background-size:auto; }
#contact #form .top { align-items:stretch; }
#contact #form .top .left .field:last-child { margin-bottom:0; }
#contact #form .top .right .field,
#contact #form .top .right textarea { height:100%; }
#contact #form .field label { position:absolute; left:15px; top:50%; transform:translateY(-50%); font-size:1.8rem; color:rgba(0,0,0,0.6); transition:all 0.5s ease 0s; }
#contact #form .field.textarea label { top:15px; transform:translateY(0); }
#contact #form .field.active label,
#contact #form .field.filled label { top:5px; transform:translateY(0); font-size:1.4rem; }
#contact #form .field.textfield input { padding:25px 15px 5px 15px; border:none; }
#contact #form .field.textarea textarea { padding:30px 15px; border:none; }
#contact #form .bottom { display:flex; flex-direction:row; align-items:stretch; justify-content: flex-end; margin-top:50px; }
#contact #form .bottom .field { margin:0; }
#contact #form .bottom .field .btn { margin:0 0 0 50px; height:100%; display:flex; align-items:center; justify-content:center; padding:15px 50px; }
#contact #form #contact_forms_flash { margin-top:30px; }
#contact #form .rgpd { margin-top:50px; }







/**
 * Extra large
 **/
@media (min-width: 1600px) {
    .container { max-width:1230px; }
    .container-fluid { padding-left:150px; padding-right:150px; }
}

/**
 * Extra large
 **/
@media (max-width: 1599px) {
    html { font-size:9px; }
    
    .container-fluid { padding-left:100px; padding-right:100px; }
    
    .bubble { width:150px; height:150px; }
    .bubble .icon { margin-bottom:10px; }
    .bubble .arrow { margin-top:10px; }
    .bubble svg { max-height:30px; }
    
    #accueil #heading .right li { margin:30px 0; }
}

/**
 * Large devices
 **/
@media (max-width: 1199px) {
    html { font-size:8px; }
    
    .container-fluid { padding-left:60px; padding-right:60px; }
    .padding { padding-top:80px; padding-bottom:80px; }
    
    .trait { padding-top:150px !important; }
    .trait:before { height:100px; }
    .trait.mini { padding-top:100px !important; }
    .trait.mini:before { height:50px; }
    
    #header .row { height:100px; }
    #header .navigation .bottom { margin-bottom:20px; }
    #header .navigation .bottom .menu li { margin-left:30px; }
    #header .navigation .bottom .menu a { padding:5px; }
    #main { margin-top:100px; }
    #heading .overlay .bubble { left:80%; }
    #heading .overlay .left { padding-right:0; }
    
    #plan-de-transport #intro .left h3,
    #plan-de-transport #intro #table { margin-top:50px; }
    
    #entreprise #heading .overlay .bubble { left:50%; }
    
}

/**
 * Medium devices
 **/
@media (max-width: 991px) {
    html { font-size:7px; }
    
    .container-fluid { padding-left:30px; padding-right:30px; }
    .padding { padding-top:60px; padding-bottom:60px; }
    

    
    #header .container { max-width:none; }
    #header .row { height:90px; }
    #header .navigation .bottom { margin-bottom:15px; }
    #header .navigation .bottom .menu li { margin-left:15px; }
    #main { margin-top:90px; }
    
    #heading .left .caption { top:30%; }
    #heading .overlay .bubble { left:50%; top:70%; } 
    
    #entreprise #heading .overlay .left { height:50%; }
    #entreprise #heading .overlay .right { height:50%; }
    #entreprise #heading .overlay .bubble { display:none; }
    #entreprise #heading .left .caption { top:50%; }
    #entreprise #heading .left .caption .btn { margin-top:15px; }
    #entreprise #heading .left .pagination { bottom:15px; }
    #entreprise #heading .overlay .right { padding-left:0; }
    
    
}

/**
 * Small devices
 **/
@media (max-width: 767px) {
    
    .container-fluid { padding-left:15px; padding-right:15px; }
    .hamburger { display:block; }
    .btn { margin-top:30px; }
    
    .padding { padding-top:40px; padding-bottom:40px; }
    .trait { padding-top:100px !important; }
    .trait:before { height:50px; }
    .trait.mini { padding-top:70px !important; }
    .trait.mini:before { height:30px; }
    
    
    #overlay { position:fixed; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none; transition:all 0.5s ease 0s; background:rgba(0, 92, 127, 0.95); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
    #header .navigation .top { display:flex; flex-direction:column; align-items:center; justify-content:center; order:2; padding-top:15px; border-top:1px solid #fff; }
    #header .navigation .top .item { font-size:3rem; color:#fff; background:none; }
    #header .navigation .top .item a { color:#fff; }
    #header .navigation .top .item svg { display:none; }
    #header .navigation .top .item.extranet:before { content:none; }
    
    #header .navigation .bottom { order:1; }
    #header .navigation .bottom .menu { display:flex; flex-direction:column; align-items:center; justify-content:center; }
    #header .navigation .bottom .menu a { display:block; font-size:3rem; color:#fff; text-transform:uppercase; }
    
    body.open #overlay { opacity:1; pointer-events:auto; }
    
    #accueil #heading .right ul { display:flex; flex-direction:row; align-items:center; justify-content:center; }
    #accueil #heading .right li { margin:30px; }
    #accueil #intro { text-align:center; }
    #accueil #intro .left { text-align:center; margin-bottom:30px; }
    
    #accueil #actualites .image { margin-bottom:15px; }
    #heading .left .caption h1 { font-size:4rem; }
    #heading .slider .swiper-slide img { min-height:500px; }
    #heading .left .caption .btn { margin-top:15px; }
    #heading .left .pagination { bottom:15px; }
    
    #plan-de-transport #intro .right { margin-top:50px; order:1; }
    #plan-de-transport #intro .left { margin-top:50px; order:2; }
    
    #contact #form .title-wrapper,
    #contact #form .title-wrapper p { text-align:center; }
    #contact #form .title-wrapper .left { order:2; }
    #contact #form .title-wrapper .right { order:1; }
    #contact #form .top .left .field:last-child { margin-bottom:30px; }
    
    #entreprise #heading .overlay { position:static; }
    #entreprise #heading .overlay .left { position:static; }
    #entreprise #heading .slider .swiper-slide img { min-height:300px; }
    #entreprise #heading .left .caption { top:150px; }
    #entreprise #heading .overlay .right { padding:50px 0; background:#005C7F; }
    #entreprise #heading .left .pagination { display:none; }
    
}

/**
 * Extra small devices
 **/
@media (max-width: 575px) {
    

    #header .row { height:70px; }
    #main { margin-top:70px; }
    #footer .bottom .links ul { flex-direction:column; }
    #footer .bottom .links li { margin:10px 0; }
    #footer .bottom .links li:after { content:none; }
    
    #heading .left .caption h1 { font-size:3rem; }
    #heading .left .caption .btn { margin-top:15px; }
    #heading .left .pagination { bottom:15px; }
    
    #accueil #heading .right ul { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:15px 0; }
    #accueil #heading .right li { margin:5px; }
    #accueil #heading .slider { min-height:300px; }
 
    #heading .slider .swiper-slide img { min-height:400px; }
    
    #heading .overlay .bubble { width:130px; height:130px; }
    
    #plan-de-transport #intro #table table { border-spacing:5px; }
    #plan-de-transport #intro #table th { padding:5px; }
    #plan-de-transport #intro #table td { padding:15px 5px; font-size:2rem; }
    
    #contact #form .bottom { flex-direction:column; align-items:center; justify-content:center; }
    #contact #form .bottom .submit { margin-top:30px; margin-left:0; }
    #contact #form .bottom .submit .btn { margin:0; }
}