/**
 * 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:'Montserrat', sans-serif; font-weight:300; }
:focus, button:focus { outline:none; }

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

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

span.orange { color:#f05521; }
span.darkgrey { color:#3d464e; font-weight:700; }

/* Bold & Italic */
strong { font-weight:700; }

/* Link */
a { color:#3D464E; }
a:hover { text-decoration:none; }

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

/* Titles */
h1 { font-size:5rem; font-weight:400; margin-bottom:1em; }
h2 { font-size:4rem; font-weight:400; margin-bottom:1em; }
h3 { font-size:3.5rem; font-weight:400; margin-bottom:1em; }

.uppertitle { text-align:center; font-weight:400; }
.uppertitle span { color:#F05522; font-size:1.8rem; text-transform:uppercase; display:block; margin-bottom:15px; }

/* Forms */
.field.textfield label { position:absolute; left:0; top:50%; transform:translateY(-50%); transition:all 0.3s ease 0s; z-index:1; }
.field.textfield input { border:1px solid #D5D5D5; border-width:0 0 1px 0; padding:25px 0 5px 0; height:auto; line-height:normal; }
.field.textfield.active label,
.field.textfield.filled label { top:5px; transform:translateY(0); font-size:1.4rem; }

.field.textarea { text-align:left; }
.field.textarea textarea { max-height:0; border:1px solid #D5D5D5; border-width:0 0 1px 0; padding:5px 0; overflow:hidden; transition:all 0.5s ease 0s; }

.field.textarea.active label,
.field.textarea.filled label { font-size:1.4rem; }

.field.textarea.active textarea,
.field.textarea.filled textarea { max-height:400px; }

/**
 * Layout
 **/
 
#page { width:100%; overflow:hidden; }

#header { position:absolute; left:0; top:100px; width:100%; z-index:2; padding:10px 0; min-height:0; }
#header .logo { text-align:center; }
#header .socials ul { display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
#header .socials li { margin-left:15px; }
#header .socials svg { fill:#fff; }
#header .socials span { display:none; }
#header .menu { opacity:0; overflow:hidden; pointer-events:none; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:450px; text-align:center; }
#header .menu li { margin:15px 0; }
#header .menu a { color:#3D464E; font-size:2.5rem; font-weight:400; text-transform:uppercase; transition:all 0.5s ease 0s; display:block; padding:5px; }
#header .menu a:hover,
#header .menu li.active a { background:#F05522; color:#fff; }

#header.is_stuck { background:#f2f2f2; transition:all 0.5s ease 0s; }
#header.is_stuck .socials svg { fill:#3D464E; }
#header.is_stuck .logo .imamovic { fill:#3D464E; }
#header.is_stuck .hamburger-inner, 
#header.is_stuck .hamburger-inner:after, 
#header.is_stuck .hamburger-inner:before { background:#3D464E; }
#header.is_stuck .hamburger .text { color:#3D464E; }
#header.is_stuck .phone { color:#212121; }

#header .phone { color:#fff; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; position:relative; top:3px; }
#header .phone svg { margin-right:10px; }
#header .socials { display:flex; flex-direction:row; justify-content:flex-end; align-items:center; }


body.open { overflow:hidden; }
body.open #header { position:fixed; top:0; padding-top:110px; min-height:100vh; transition:min-height 0.5s ease 0s; background:#f2f2f2; }
body.open #header.is_stuck { padding-top:10px; }
body.open #header .logo .imamovic { fill:#3D464E; transition:all 0.5s ease 0s; }
body.open #header .hamburger-inner, 
body.open #header .hamburger-inner:after, 
body.open #header .hamburger-inner:before { background:#3D464E; transition:all 0.5s ease 0ss; }
body.open #header .hamburger .text { color:#3D464E; transition:all 0.5s ease 0s; }
body.open #header .socials svg { fill:#3D464E; }
body.open #header .menu { opacity:1; transition:all 0.5s ease 0.5s; pointer-events:auto; }
body.open #header .phone { color:#3D464E; }

.invert #header .logo .imamovic { fill:#3D464E; }
.invert #header .hamburger-inner, 
.invert #header .hamburger-inner:after, 
.invert #header .hamburger-inner:before { background:#3D464E; }
.invert #header .hamburger .text { color:#3D464E; }
.invert #header .socials svg { fill:#3D464E; }
.invert .heading .title { color:#3D464E; }

#footer .top { padding-top:80px; padding-bottom:80px; background:#F05522; color:#fff; font-size:1.8rem; }
#footer .top a { color:#fff; }
#footer .top .socials { line-height:2.2em; }
#footer .top .socials svg { fill:#fff; margin-right:15px; }
#footer .bottom { text-align:center; padding:80px 0 50px 0; }
#footer .bottom h2 { margin:1em 0; }

#footer .copyright { display:flex; flex-direction:row; align-items:center; justify-content:center; font-size:1.4rem; font-weight:400; padding:20px 0; }
#footer .copyright ul { display:flex; flex-direction:row; align-items:center; justify-content: center; }
#footer .copyright li { margin:0 5px; }
#footer .copyright p { margin-bottom:0; margin-right:15px; }
#footer .copyright a { color:#3D464E; text-decoration:underline; }

.hamburger { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background:#fff; border-radius:0; height:2px; }
.hamburger .text { margin-left:15px; color:#fff; text-transform:uppercase; font-size:1.4rem; }

/**
 * Components
 **/
 
/* Utility classes */
.relative { position:relative; }
.padding { padding-top:100px; padding-bottom:100px; }
.align-center { display:flex; flex-direction:row; align-items:center; }
.grey { background:#F2F2F2; }
.text-center { text-align:center; }

/* Buttons */
.btn { border:2px solid #3D464E; padding:15px 30px; color:#3D464E; text-align:center; background:transparent; text-transform:uppercase; font-size:1.2rem; font-weight:bold; display:inline-flex; flex-direction:row; align-items:center; justify-content:center; transition:all 0.5s ease 0s; }
.btn svg { width:20px; max-height:20px; fill:#f05521; margin-right:10px; }

.btn:hover { background:#f05521; color:#fff; border-color:#f05521; }
.btn:hover svg { fill:#3D464E; }

.btn.orange { background:#f05522; color:#fff; border-color:#f05522; }
.btn.orange:hover { background:#3D464E; border-color:#3D464E; }

.buttons { margin-top:80px; }
.buttons .btn { display:block; }

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

/* Carousel */
.carousel .navigation { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
.carousel .navigation button { position:absolute; border:none; background:none; }
.carousel .navigation .prev { left:-100px; }
.carousel .navigation .next { right:-100px; }

/* Swiper */
.swiper-pagination-bullet { background:#fff; opacity:1; }
.swiper-pagination-bullet-active { background:#F05522; }

/* Réalisations */
.realisations .hide { display:none; }

/* Partenaires */
.partenaires .swiper-wrapper { align-items:center; }

/* Heading */
.heading { min-height:800px; max-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; background-size:cover; background-position:center center; }
.heading .title { font-size:6rem; text-transform:uppercase; letter-spacing:10px; font-weight:300; margin-top:80px; }
.heading .arrow { position:absolute; left:50%; bottom:-100px; animation: bounce 1s cubic-bezier(.93,.22,.89,.65) 0s infinite alternate; }

#jarallax-container-0 > div { height:800px !important; }

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 20px, 0); }
}

/* Intro */
.intro iframe { width:100%; height:550px; margin:50px 0 100px 0; }
.intro .row { margin-top:80px; }
.intro .row:first-child { margin-top:0; }
.intro p a { text-decoration:underline; }

/* Socials */
.socials svg { width:20px; max-height:20px; }

/* More */
.more { text-align:center; margin-top:50px; }

/* Intro */
.intro ul { margin:50px 0 50px 50px; font-weight:400; }
.intro li { margin:10px 0; }
.intro li:before { content:'•'; display:inline-block; margin-right:5px; }
.intro .btn { margin-top:30px; }

.intro .swiper-container img { opacity:1 !important; }

.target { margin-bottom:80px; }

/* Compétences */
.competences a { display:block; text-align:center; overflow:hidden; }
.competences img { transition:all 0.5s ease 0s; }
.competences a:hover img { transform:scale(1.1); }

.competences h3 { position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%); font-size:1.8rem; text-transform:uppercase; color:#fff; font-weight:400; margin:0; letter-spacing:2px; }
.competences .black h3 { color:#3D464E; }

/* Réalisations */
.realisations a { display:block; text-align:center; overflow:hidden; }
.realisations img { transition:all 0.5s ease 0s; }
.realisations a:hover img { transform:scale(1.1); }

/**
 * Page specific
 **/
#accueil #jarallax-container-0 > div { background-position:center right !important; }
#accueil .heading .title { font-size:3.6rem; text-transform:none; letter-spacing:0; font-weight:300; }
#accueil .intro .row { margin:50px 0; }
#accueil .intro .row:first-child { margin-top:0; }
#accueil .intro .sika { margin-top:80px; margin-bottom:30px; }

#chapes .intro img { margin:80px 0 50px 0; }
#chapes .intro iframe { margin-top:0; }
#chapes .eqiom { margin-top:60px; }
#chapes .eqiom img { margin-top:0; }

#parquets .realisations .swiper-wrapper { box-sizing:border-box; }
#parquets .realisations .caption { }
#parquets .realisations a:hover .caption { opacity:1; }
#parquets .realisations a:hover img { transform:scale(1); }

#contact .infos { margin:80px 0; }
#contact .infos p { margin:0; }
#contact .infos .btn { margin:30px 0; }

#contact form h3 { font-size:2.2rem; text-align:left; margin-top:60px; }
#contact .radios .radio { display:flex; flex-direction:row; align-items:center; justify-content: flex-start; }
#contact .radios label { margin-right:30px;  }
#contact .checkboxes .checkbox { display:flex; flex-direction:row; align-items:center; justify-content: flex-start; }
#contact .checkboxes label { margin-right:30px;  }
#contact .rgpd a { color:#F05522; }
#contact .textarea label { width:100%; }

.responsiv-uploader-fileupload { margin-bottom:50px;}
.responsiv-uploader-fileupload.style-file-multi .upload-button { width:100%; border-style:dashed; padding:30px; border-color:#F05522; color:#F05522; }
.responsiv-uploader-fileupload.style-file-multi .upload-button:hover { background:#ddd; }








/**
 * Extra large
 **/
@media (min-width: 1600px) {
    .container { max-width:1550px; padding-left:25px; padding-right:25px; }
    .row { margin-left:-25px; margin-right:-25px; }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding-left:25px; padding-right:25px; }
}

/**
 * Extra large
 **/
@media (max-width: 1599px) {
    h1, h2 { font-size:4rem; }
    h3 { font-size:3rem; }
    body { font-size:1.8rem; }
    .heading .title { font-size:5rem; }
}

/**
 * Large devices
 **/
@media (max-width: 1199px) {
    h1, h2 { font-size:3.5rem; }
    h3 { font-size:2.5rem; }
    #header { top:50px; }
    body.open #header { padding-top:60px; }
    .heading { min-height:700px; }
    #jarallax-container-0 > div { height:700px !important; }
    .heading .title { font-size:4.5rem; }
    .uppertitle span { font-size:1.7rem; }
    .padding { padding-top:80px; padding-bottom:80px; }
    #accueil .intro .row { align-items:center; }
    #accueil .intro .sika { margin-top:0; }
    
    #carrelages-et-faiences .intro .row { align-items:center; }
    #footer .top  { font-size:1.4rem; }
}

/**
 * Medium devices
 **/
@media (max-width: 991px) {
    body { font-size:1.6rem; }
    h1, h2 { font-size:3rem; }
    h3 { font-size:2rem; }
    .heading .title { font-size:4rem; }
    .uppertitle span { font-size:1.6rem; }
    .competences .container { max-width:100%; }
    .padding { padding-top:60px; padding-bottom:60px; }
    .intro iframe { height:400px; }
    
    #footer .top .container { max-width:none; }
    #footer .bottom .copyright { margin-top:100px; }
    #footer .copyright p { display:none; }
    
    #footer .top .socials { display:none; }
    #footer .top .row { justify-content:center; }
}

/**
 * Small devices
 **/
@media (max-width: 767px) {
    h1, h2 { font-size:2.5rem; }
    
    .heading { min-height:600px; }
    #jarallax-container-0 > div { height:600px !important; }
    .heading .title { font-size:3.5rem; }
    .uppertitle span { font-size:1.5rem; }
    .padding { padding-top:40px; padding-bottom:40px; }
    .intro .image { margin:15px 0; }
    .intro iframe { height:285px; }
    #header .hamburger .text { display:none; }
    
    #accueil .heading .title { font-size:2.5rem; }
    #accueil .intro .row-3 .text { order:2; }
    #carrelages-et-faiences .intro .row-2 .image { order:2; }
    
    #footer .top { text-align:center; }
    
    
    #footer .bottom .copyright { margin-top:50px; }
    #footer .bottom .copyright ul { flex-direction:column; }
    #footer .bottom .copyright li { margin:5px 0; }
}

/**
 * Extra small devices
 **/
@media (max-width: 575px) {
    .heading { min-height:100vh; }
    #jarallax-container-0 > div { height:100vh !important; }
    .heading .title { font-size:2.5rem; }
    .uppertitle span { font-size:1.4rem; }
    .intro iframe { height:300px; }
    
    .competences .relative { margin-bottom:30px; }
    .carousel .navigation .prev { left:-50px; }
    .carousel .navigation .next { right:-50px; }
    #header .navigation { order:2; display:flex; flex-direction:row; justify-content:flex-end; }
    #header .socials { display:none; }
    #footer .top { padding:40px 0; }
    #footer .top .phones { order:3; }
    #footer .top .socials { display:block; order:4; }
    #footer .copyright ul {flex-direction: column;}
    
    #contact .checkboxes .checkbox {flex-direction: column; align-items: flex-start;}
}