/* 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); }
/**
 * General Elements
 **/

:focus, button:focus { outline:none; }
body { font-family:'Canaro', sans-serif; font-family:1.25rem; font-weight:500; }

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }

/* Paragraphs */
p, address { margin-bottom:1em; }
p:last-child, address:last-child { margin-bottom:0; }

/* Link */
a { color:inherit; }
a:hover { text-decoration:none; }

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

/* Forms */
.invalid-feedback.visible { display:block !important; }

/* Titles */
h1 { font-family:'TTSupermolotNeue';  }
h2 { font-family:'TTSupermolotNeue'; font-size:2.25rem; color:#DA4849; margin-bottom:1rem; text-transform:uppercase; }

/* Buttons */
button { padding:0; background:none; border:none; }

.btn { background:#DA4849; border-radius:0; border:none; display:inline-flex; margin-top:30px; color:#fff; clip-path: polygon(30px 0, 100% 0, 100% 100%, 0% 100%); padding:5px 30px 5px 50px; }
.btn:hover { color:#fff; }

.btn.white { background: linear-gradient(90deg, #fff 0%, #fff 90%, #000 100%); color:#DA4849; }

/* Form */
.form-control,
.form-select { border-radius:0; }

/**
 * Layout
 **/

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

/* Header */
#header { position:fixed; left:0; top:0; width:100%; z-index:11; background:#000; color:#fff; font-family:'TTSupermolotNeue'; }
#header .row { height:120px; align-items:center; }
#header .logo { padding-top:15px; padding-bottom:15px; }
#header .navigation { display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; height:100%; }
#header .navigation ul { display:flex; flex-direction:row; align-items:stretch; justify-content:flex-end; }
#header .navigation .block1 { padding:5px 15px 5px 0; }
#header .navigation .block2 { display:flex; flex-direction:row; align-items:stretch; justify-content:flex-end; padding:5px 30px 5px 15px; background:#000000; }
#header .top { position:absolute; right:0; top:0; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; font-size:1rem; background:#656565; clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%); }
#header .top .item { margin-left:30px; }
#header .top .picto { filter:brightness(0) invert(1); max-width:25px; max-height:15px; object-fit:contain; }
#header .top a { text-decoration:none; }
#header .top a:hover { color:#da4849;  }
#header .bottom { padding-bottom:15px; }
#header .bottom li { margin-left:30px; }
#header .bottom a { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; text-decoration:none; transition:all 0.5s ease 0s; text-align:center; }
#header .bottom .picto { max-width:30px; max-height:25px; object-fit:contain; }

/* New */
#header .navigation { justify-content:center; align-items:center; }
#header .top { top:auto; bottom:0; transform:translateY(100%); background:#FF3C39; transition:all 0.7s ease 0s; }
#header .top svg { max-height:20px;  }
#header .top svg path { fill:#fff; }
#header .top a:hover { color:#fff; }
#header .bottom { padding-bottom:0; }
#header .bottom li { white-space:nowrap; }
#header .bottom a { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; font-family:'Canaro'}
#header .bottom a img { margin-right:15px; }
#header .right { text-align:right; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
#header .right a { margin-left:30px; font-family:'Canaro'; text-decoration:none; }
#header .right a:hover { color:#FF3C39; }
#header .right svg { fill:#FF3C39; }

#header.unpinned .top { transform:translate(calc(100% - 80px), 100%); }
#header.pinned .top { transform:translate(0, 100%); }

#header .top .item:first-child { cursor:pointer; }

/* /New */

#header .bottom a:hover { color:#da4849; }

#header .hamburger { position:relative; z-index:21; }

#header .hamburger-inner, 
#header .hamburger-inner:after, 
#header .hamburger-inner:before { background:#fff; border-radius:0; height:2px; }

#overlay { position:fixed; left:0; top:0; overflow:hidden; height:0; width:100%; height:100%; opacity:0; pointer-events:none; z-index:20; display:flex; align-items:center; justify-content:center; background:#000; color:#fff; transition:opacity 0.5s ease 0s; font-size:1.5rem; text-align:center; }
#overlay li { margin-bottom:15px; text-align:left; }
#overlay .picto { width:30px; height:30px; object-fit: contain; margin-right:15px; }
#overlay li a { text-decoration:none; }
#overlay li a:hover { color:#da4849; }
#overlay li.sep { height:1px; background:#da4849; }
body.open #overlay { opacity:1; pointer-events:auto; height:100%; }

/* Footer */
#footer {  color:#fff; position:relative; z-index:1; background:#25282A; }
#footer:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background: url(../themes/tattu/assets/img/footer-bg.svg) no-repeat left bottom; z-index:1; pointer-events:none; }
#footer .top .picto { width:30px; max-height:20px; object-fit:contain; margin-right:30px; }
#footer .top li { margin-bottom:15px; }
#footer .top a { text-decoration:none; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }

#footer .middle { margin-top:100px; }
#footer .middle .column { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
#footer .middle .picto { margin-right:30px; }
#footer .middle strong { font-family:'TTSupermolotNeue'; color:#DA4849; }
#footer .middle .phone { font-family:'TTSupermolotNeue'; }

#footer .bottom { margin-top:100px; }
#footer .bottom ul { display:flex; flex-direction:row; align-items:center; justify-content: space-evenly; height:90px; }
#footer .bottom a { color:#8A8B8D; text-decoration:none; font-size:1.125rem; }
#footer a:hover { color:#da4849 ; }

/* Sticky */
#sticky { position:fixed; right:0; top:200px; z-index:10; }
#sticky a { background: linear-gradient(90deg, #da4849 0%, #da4849 90%, #6d2425 100%); display:block; padding:10px 30px 10px 15px; }

/**
 * General
 **/

/* Classes */
.padding { padding-top:5vh; padding-bottom:5vh; }
.medpadding { padding-top:10vh; padding-bottom:10vh; }
.bigpadding { padding-top:20vh; padding-bottom:20vh; }

.dotted { background:url(../themes/tattu/assets/img/black-dot.svg) repeat center center; }

.grey { background:#E2E3E3; }

/* Components */
#banner { position:relative; z-index:2; background:#25282A; }
#banner:before { content:''; position:absolute; z-index:-1; left:30px; top:30px; right:30px; bottom:30px; background:url(../themes/tattu/assets/img/white-dot.svg) repeat center center;  }

#banner .text { background:#E6E6E6; margin-bottom:-100px; font-size:1.1rem; margin-top:100px; }
#banner .text .inner { padding:50px 80px; position:relative; height:100%; max-height:calc(100vh - 120px); overflow: auto; }
#banner .text h1 { font-family:'TTSupermolotNeue'; font-size:2rem; text-transform:uppercase; font-weight:300; margin-bottom:1em; display:flex; flex-direction:row; align-items:center; justify-content: flex-start; }
#banner .text h1 img { margin-right:1em; max-width:50px; max-height:50px; }
#banner .text h2 { text-transform:uppercase; color:#DA4849; font-size:1.25rem; margin-bottom:1em;  }
#banner .text h3 { text-transform:none; color:#DA4849; font-family:'Canaro'; font-size:1.25rem; }
#banner .text .picto { width:250px; height:250px; object-fit:contain; position:absolute; left:-30px; bottom:0; transform:translateX(-100%); }
#banner .image .bg { height:calc(100vh - 120px); object-fit:cover; width:calc(100% + 50%); max-width:none; }
#banner .image .picto { position:absolute; left:10%; bottom:0; transform:translateY(50%); min-width:15vw; width:15vw; }


#content h2 { margin-bottom:1em; }
#content h3 { margin-bottom:1em; font-size:1.125rem; font-weight:bold; }

#intro { position:relative; }
#intro h1 { font-family:'TTSupermolotNeue'; font-size:2.25rem; color:#DA4849; margin-bottom:1rem; text-transform:uppercase; }
#intro:before { content:''; position:absolute; left:-150px; bottom:-200px; opacity:0.1; z-index:-1; width:600px; height:600px; background:url(../themes/tattu/assets/img/picto.svg) no-repeat center center / contain; }
#intro .image { display:flex; flex-direction:column; align-items:center; justify-content:space-between; }

#slider { position:relative; z-index:2; background:#25282A; }
#slider:before { content:''; position:absolute; z-index:-1; left:30px; top:5vh; right:30px; bottom:calc(5vh + 42px); background:url(../themes/tattu/assets/img/white-dot.svg) repeat center center;  }
#slider .pagination { display:flex; align-items:center; justify-content:center; margin-top:30px; }
#slider .swiper-pagination-bullet { margin-left:15px; border-radius:0; background:#25282A; opacity:1; width:12px; height:12px; background:#fff; }
#slider .swiper-pagination-bullet-active { background:#DA4849; }

#savoirfaire .slider { background:#DA4849; color:#fff; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); }
#savoirfaire .swiper-container { overflow:visible; }
#savoirfaire .title,
#savoirfaire .navigation { height:120px; display:flex; align-items:center; }
#savoirfaire .title { position:relative; margin-bottom:0; }
#savoirfaire .title:before { content:''; position:absolute; right:0; top:0; width:50vw; height:100%; background:#B65051; z-index:-1; }
#savoirfaire .navigation { position:relative; justify-content:flex-end; }
#savoirfaire .navigation:before { content:''; position:absolute; left:0; top:0; width:50vw; height:100%; background:#fff; z-index:-1; }
#savoirfaire .swiper-slide { background:#DA4849; }
#savoirfaire .description { padding:50px 50px 0 0; }
#savoirfaire .next { display:flex; margin-left:50px; }
#savoirfaire .swiper-pagination-bullet { margin-left:15px; border-radius:0; background:#25282A; opacity:1; width:12px; height:12px; }
#savoirfaire .swiper-pagination-bullet-active { background:#DA4849; }

#elfsight { background:#000; color:#fff; }
#elfsight h2 { color:#fff; }

/**
 * Page specific
 **/

/* Accueil */
#accueil #banner .row { align-items:flex-end; }
#accueil #banner .text h1 { color:#FF3C39; }

#accueil #separateur img { max-width:100%; margin-left:-150px; }

#accueil #blog .inner { background:#fff; }
#accueil #blog .record { background:#25282A; height:100%; display:flex; flex-direction:column; }
#accueil #blog .image { position:relative; }
#accueil #blog .date { position:absolute; left:0; top:0; padding:10px 30px 10px 10px; background:#DD0F27; color:#fff; clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0% 100%); font-family:'TTSupermolotNeue'; font-size:0.875rem; }
#accueil #blog .text { padding:50px; text-align:center; color:#fff; height:100%; display:flex; flex-direction:column; align-items:center; }
#accueil #blog .title { font-family:'TTSupermolotNeue'; font-size:1.125rem; color:#DA4849; text-transform:uppercase; margin-bottom:1rem; }
#accueil #blog .description { margin-bottom:30px; }
#accueil #blog .square { margin-top:auto; }

#accueil #chiffres .item { text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:space-between;}
#accueil #chiffres .inner { background:#fff; }
#accueil #chiffres .title { margin-bottom:50px; font-size:1.875rem; }
#accueil #chiffres .number { margin-top:50px; color:#DA4849; font-size:6.25rem; }
#accueil #chiffres .picto { max-width:100%; max-height:200px; }

#accueil #sponsoring h2 { margin-bottom:2em; }
#accueil #sponsoring .title { padding:15px; background:#fff; }
#accueil #sponsoring .inner { background:#fff; }

/* Contact */
#contact h1 { color:#DA4849; margin-bottom:5vh; }
#contact #form { position:relative; }
#contact #form:before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0.03; z-index:-1; width:700px; height:700px; background:url(../themes/tattu/assets/img/picto.svg) no-repeat center center / contain; }

#contact_forms_flash { margin-top:30px; }
#contact_forms_flash .close { display:none; }

/* Entreprise */
#associes .record { margin-bottom:5vh; }
#associes .record .name { text-align:center; margin-bottom:50px; }
#associes .record:nth-child(even) .image { order:2; }
#associes .record:nth-child(even) .text { order:1; }

#historique { position:relative; }
#historique:before { content:''; position:absolute; left:0; top:50%; width:100%; height:2px; background:#DA4849; }
#historique .slider { position:relative; }
#historique .prev { position:absolute; left:-100px; top:50%; z-index:2; transform:translateY(-50%); }
#historique .next { position:absolute; right:-100px; top:50%; z-index:2; transform:translateY(-50%); }
#historique .swiper-container { padding:100px 0; }
#historique .record { display:flex; flex-direction:column; position:relative; padding:5px 20px; }
#historique .record:before { content:''; position:absolute; height:100px; width:2px; background:#da4849; left:0; }
#historique .record .annee { color:#DA4849; }
#historique .record .description { margin:0; }
#historique .record:nth-child(odd) { transform:translateY(-50%); }
#historique .record:nth-child(odd):before { bottom:0; }
#historique .record:nth-child(odd) .annee { margin-bottom:15px; }
#historique .record:nth-child(even) { transform:translateY(50%); }
#historique .record:nth-child(even):before { top:0; }
#historique .record:nth-child(even) .annee { order:2; margin-top:15px; }
#historique .record:nth-child(even) .description { order:1; }

/* Location */
#locations h1 { font-family:'TTSupermolotNeue'; font-size:2.25rem; color:#DA4849; margin-bottom:1rem; text-transform:uppercase; }
#locations .left { position:absolute; left:0; top:0; width:50%; height:100%; background:#B4B4B4; }
#locations .right { position:absolute; right:0; top:0; width:50%; height:100%; background:#DA4849; }
#locations .image { background:#B4B4B4; }
#locations .image img { height:100%; object-fit:cover; }
#locations .text { padding:50px; color:#fff; background:#DA4849; }
#locations .text h2 { font-size:2rem; color:#fff; }
#locations .text h3 { font-size:1.2rem; color:#fff; font-family:'TTSupermolotNeue' }

/* Réalisations */
#realisations #banner img { max-height:500px; object-fit:cover; }
#realisations .filters svg { max-width:35px; }
#realisations .slider h2 svg { max-width:35px; }

/* Location */
#location-vente-machines #banner img { max-height:500px; object-fit:cover; }


/**
 * XXL
 **/
@media (min-width: 1400px) {
}

/**
 * XL
 **/
@media (max-width: 1399px) {
    #banner .text .picto { width:150px; height:150px; }
    #banner .text .inner { padding:50px; }

    #header .right .tel { display:none; }
    #header .bottom li { margin-left:15px; }
    #header .bottom a img { margin-right:10px; }

}

/**
 * LG
 **/
@media (max-width: 1199px) {
    #banner .text .inner { padding:30px; }
    #header .row { height:80px; }
    #main { margin-top:80px; }
}

/**
 * MD
 **/
@media (max-width: 991px) {
    html { font-size:14px; }

    #header .top .item { margin-left:15px; }

    #savoirfaire .description { padding:15px 15px 0 0; }
    #savoirfaire .title, #savoirfaire .navigation { height:80px; }

    #banner .text { margin-top:0; margin-bottom:0; }
    #banner .image .bg { max-height:50vh; object-fit:cover; width:100%; min-height:0; }
    #banner .image .picto { display:none; }
    #banner .text .inner { max-height:none; }

    #header .right { display:none; }
    #header .row { justify-content: space-between; }
    #header .navigation { align-items: flex-end;}
    #header.unpinned .top { transform:translate(calc(100% - 60px), 100%); }


    #accueil #separateur { text-align:center; display:none; }
    #accueil #separateur img { max-width:90%; margin:0; }

}

/**
 * SM
 **/
@media (max-width: 767px) {
    h2 { font-size:1.75rem; }

    #header .row { height:80px; align-items:center; }
    #header .navigation { justify-content:center; }
    #header .bottom { padding-bottom:0; }
    #header .logo img { max-height:50px; }

    #footer:before { content:none; }

    #main { margin-top:80px; }

    #banner .container-md { padding:0; }

    #sticky { display:none; }
    #sticky svg { width:25px; }
    #sticky a { padding:5px 15px 10px 10px; }


    #content .col-md-4 { margin-top:30px; }

    #form .right { margin-top:30px; }

    #locations .right { width:100%; }

    #associes .image { margin-bottom:30px; order:2 !important; }
    #associes .text { margin-bottom:30px; order:1 !important; }


    #savoirfaire .title:before,
    #savoirfaire .navigation:before { content:none; }
    #savoirfaire .image { display:flex; flex-direction:column; align-items:center; margin-top:15px; }
    #savoirfaire .image img { order:1; }
    #savoirfaire .image .navigation { order:2; }
    #savoirfaire .swiper-pagination-bullet-active { background:#fff; }
    #footer { padding:30px 0; }
    #footer .top { display:none; }
    #footer .middle { margin-top:0; }
    #footer .middle .picto { display:none; }
    #footer .middle .row { flex-direction:column; align-items:center; justify-content:center; }
    #footer .middle .column { width:100%; align-items:center; justify-content:center; text-align:center; }
    #footer .middle .left { margin-bottom:30px; }
    #footer .bottom { margin-top:50px; }
}

/**
 * XS
 **/
@media (max-width: 575px) {
    #footer .bottom ul { flex-direction:column; }
    #footer .bottom ul li { margin-bottom:10px; }

    #locations .text { padding:30px; }

    .bigpadding {padding: 10vh 0;}
}