/**
 * All elements
 */

.form-item { margin-bottom: 15px; position:relative; }
.form-item label { display: inline-block; margin:0; }

.form-item.required label { position:relative; }
.form-item.required label:after { content:'*'; color:#d9534f; }

.form-item .message { font-size:10px; position:absolute; right:0; top:8px; }

/**
 * Textfields & Textarea
 */

.form-item.textfield input,
.form-item.textarea textarea { display: block; width: 100%; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.15); }
.form-item.textfield input:focus,
.form-item.textarea textarea:focus { outline: none; border-color: rgba(0, 0, 0, 0.40); }

.form-item.textfield.success,
.form-item.textarea.success { color:#5cb85c; }
.form-item.textfield.success input { border-color:#5cb85c; }
.form-item.textarea.success textarea { border-color:#5cb85c; }

.form-item.textfield.error,
.form-item.textarea.error { color:#d9534f; }
.form-item.textfield.error input { border-color:#d9534f; }
.form-item.textarea.error textarea { border-color:#d9534f; }


/**
 * Checkbox & Radio
 */

.form-item.checkbox,
.form-item.radio { line-height: 20px; }
.form-item.checkbox input,
.form-item.radio input { width:20px; height:20px; float:left; margin-right:10px; }
.form-item.checkbox label,
.form-item.radio label { position:relative; margin-bottom: 0; cursor: pointer; }

.form-item.checkbox span:before,
.form-item.radio span:before { content:''; position:absolute; left:0; top:0; width:20px; height:20px; border:1px solid rgba(0, 0, 0, 0.15); background:#fff; }

.form-item.checkbox span:after,
.form-item.radio span:after { content:''; position:absolute; left:3px; top:3px; width: 14px; height:14px; background:rgba(0, 0, 0, 0.15); opacity:0; transition:all 0.5s ease 0s; }

.form-item.checkbox input:checked+span:after,
.form-item.radio input:checked+span:after { opacity: 1; }

.form-item.checkbox.error,
.form-item.radio.error { color:#d9534f; }
.form-item.checkbox.error span:before,
.form-item.radio.error span:before{ border-color:#d9534f; }
.form-item.checkbox.error span:after,
.form-item.radio.error span:after{ background-color:#d9534f; }

.form-item.checkbox.success,
.form-item.radio.success { color:#5cb85c; }
.form-item.checkbox.success span:before,
.form-item.radio.success span:before{ border-color:#5cb85c; }
.form-item.checkbox.success span:after,
.form-item.radio.success span:after{ background-color:#5cb85c; }

.form-item.checkbox .message:before,
.form-item.checkbox .message:after,
.form-item.radio .message:before,
.form-item.radio .message:after { content:none; }

/* checkbox */

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

/* Radio */

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

/**
 * Switch
 */

.form-item.switch .bootstrap-switch { border-radius:0; }
.form-item.switch .bootstrap-switch .bootstrap-switch-handle-on { border-radius:0; background-color:#5cb85c; color:#fff; }
.form-item.switch .bootstrap-switch .bootstrap-switch-handle-off { border-radius:0; background-color:#d9534f; color:#fff; }

.form-item.switch.required .bootstrap-switch-label { position:relative; }
.form-item.switch.required .bootstrap-switch-label:after { content:'*'; color:#d9534f; }

.form-item.switch.error .bootstrap-switch { border-color:#d9534f; }
.form-item.switch.error .bootstrap-switch-label { color:#d9534f; }

.form-item.switch.success .bootstrap-switch { border-color:#5cb85c; }
.form-item.switch.success .bootstrap-switch-label { color:#5cb85c; }

/**
 * Select
 */

.form-item.select .selectize-control { line-height:normal; }
.form-item.select .selectize-input { padding:13px; display:block; }
.form-item.select .selectize-input,
.form-item.select .selectize-input.focus { border-radius: 0; box-shadow: none; }
.form-item.select .selectize-input.focus,
.form-item.select .selectize-dropdown { border-color:rgba(0, 0, 0, 0.40); }
.form-item.select .selectize-dropdown .optgroup-header { color: #aaa; text-transform: uppercase; font-size: 12px }
.form-item.select .selectize-control.multi .selectize-input > div { padding:7px 5px; }

.form-item.select.error { color:#d9534f; }
.form-item.select.error .selectize-input { border-color:#d9534f; }
.form-item.select.success { color:#5cb85c; }
.form-item.select.success .selectize-input { border-color:#5cb85c; }

/**
 * Addresses
 */

.form-item.address .ap-input { height:auto; line-height:auto; border-radius:0; }
.form-item.address .ap-dropdown-menu { color:#000; }

/**
 * Submit
 */

.form-item.submit { margin-top:15px; text-align:center; }

.form-item.submit button { padding: 10px 20px; border: 1px solid rgba(0, 0, 0, 0.15); background: none; cursor: pointer; transition:all 0.5s ease 0s; }
.form-item.submit button:focus,
.form-item.submit button:active { outline: none; border-color: rgba(0, 0, 0, 0.40); }

.form-item.submit button i { float:left; font-size:20px; line-height:24px; margin-right:10px; }
.form-item.submit button svg { float:left; width:0; margin-right:10px; }
.form-item.submit button svg .circ { stroke:#000; fill:none; stroke-width:3; opacity: 0; stroke-dasharray: 130; stroke-dashoffset: 130; transition: all 1s; }
.form-item.submit button svg .tick { stroke-dasharray: 50; fill:none; stroke:#000; stroke-width:3; stroke-dashoffset: 50; transition: stroke-dashoffset 1s 0.5s ease-out; }

.form-item.submit.loading button { position:relative; }
.form-item.submit.loading button:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.95); }
.form-item.submit.loading button:after { content:"\f021"; animation: fa-spin 2s infinite linear; font-family:'fontAwesome'; font-size:20px; width:20px; height:20px; line-height: 20px; position:absolute; left:50%; top:50%; margin:-10px 0 0 -10px; }

.form-item.submit.success button i { display:none; }
.form-item.submit.success button svg { width:24px; }
.form-item.submit.success button svg .path{ opacity: 1; stroke-dashoffset: 0; }

/**
 * Layout
 **/
body { font-family:'Roboto'; font-weight:300; }
.captcha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 30px;
}
form.contact {
  margin-bottom: 30px;
}
/* Header */
#header { background:#000000; color:#fff;  }
#header .container-fluid { padding-left:0; padding-right:0; }
#header .row { justify-content:center; }
#header .left { align-items:flex-end; position:static; }

#header .navigation { margin-right:120px; font-family:'Gotham'; font-weight:bold; text-transform:uppercase; }
#header .navigation img { margin-bottom:50px; }
#header .navigation ul { list-style:none; }
#header .navigation li { margin:25px 0; }
#header .navigation li:before { content:none; }
#header .navigation a { color:#fff; transition:all 0.5s ease 0s; }

#header .navigation li.active a,
#header .navigation a:hover { color:#e00a17; text-decoration:none; }

/* Responsive */
.hamburger { position:absolute; left:30px; top:30px; z-index:15; padding:0; outline:0; display:none; }
.hamburger:hover { opacity:1; }
.hamburger:focus { outline:0; }
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background-color:#e00816; border-radius:0; }

body.open { overflow:hidden; }

/* Footer */
#footer { background:#000; padding:80px 0; color:#fff; }
#footer .col-md-4 { display:flex; align-items:center; justify-content:center; }
#footer .col-md-4 p { margin-bottom:0; line-height:1.4em; }
#footer .col-md-4 a { color:#fff; }
#footer .col-md-4 span { display:block; }

#footer .left:before { content:''; position:absolute; left:15px; top:50%; width:38px; height:100%; transform:translateY(-50%); background:#e00816; }
#footer .middle { position:relative; }
#footer .middle:before { content:''; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:2px; height:70%; background:#fff; }
#footer .middle:after { content:''; display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); width:2px; height:70%; background:#fff; }
#footer .middle .tel { font-weight:bold; font-size:18px; }

#footer .right img { max-width:130px; margin-right:20px; }
#footer .right a { color:#e00816; }

/* Main */
#main img { max-width:100%; height:auto; display:inline-block; }

/**
 * Pages
 **/

/* General */
h1 { font-family:'Gotham'; font-weight:900; text-transform:uppercase; font-size:36px; color:#000; letter-spacing:4px; margin-bottom:0; line-height:1.2em; display:flex; flex-direction:column; }
h1:after { content:''; margin:20px 0; width:35px; height:10px; background:#e00816; }

h2 { font-family:'Gotham'; font-weight:900; text-transform:uppercase; font-size:36px; color:#000; letter-spacing:4px; margin-bottom:0; line-height:1.2em; display:flex; flex-direction:column; }
h2:after { content:''; margin:20px 0; width:35px; height:10px; background:#e00816; }

h3 { margin-bottom:40px; text-transform:uppercase; font-size:20px; line-height:1em; }

p { line-height:2.2em; }

ul { list-style:none; padding:0; }
ul li { margin:8px 0; }
ul li:before { content:''; display:inline-block; width:10px; height:10px; background:#e00a17; border-radius:2px; margin-right:10px; }

section { padding:60px 0; }
section .row { margin-bottom:60px; }
section .row:last-child { margin-bottom:0; }

figcaption { padding:15px 30px; background:#000; color:#fff; font-size:14px; }

.valign { display:flex; flex-direction:column; justify-content:center; }
.intro { font-weight:500; text-align:center; margin-bottom:60px; }
.bold { font-weight:500; }

.btn { border:1px solid #000; padding:15px 20px; font-family:'Gotham'; font-weight:bold; text-transform:uppercase; font-size:16px; display:inline-block; align-self: flex-start; margin:20px 0; color:#000; transition:all 0.5s ease 0s; }
.btn:hover { text-decoration:none; background:#000; color:#fff; }

.swiper-pagination-bullet-active { background:#e00816; }

.hide { display:none; }

/* Form */
.form-item { margin-bottom:30px; }
.form-item .message { top:auto; bottom:-16px; }

.form-item.submit { margin:0; }

/* Accueil */
#accueil .news { background:#f8f8f8; }
#accueil .news .swiper-wrapper { box-sizing:border-box; }
#accueil .news .left { text-align:right;  }
#accueil .news .left h2:after { align-self:flex-end; }
#accueil .news .left .carousel { padding-bottom:50px; }
#accueil .news .left .swiper-pagination { text-align:right }

/* Pose chantiers */
#pose-chantiers section .row { margin-bottom:80px; }
#pose-chantiers section ul { column-count:2; column-gap:30px; padding:0; list-style-position:inside; }

/* Carrelage */
#vente-carrelage section .left img { margin-top:10px; }
#vente-carrelage section .right p { margin-bottom:40px; }
#vente-carrelage section .right ul { margin-bottom:40px; }
#vente-carrelage section .right .bold { margin-bottom:60px; }

/* L'entreprise */
#entreprise .showroom h2 { margin-top:35px; }

/* Résalisations */
#realisations .realisations h1 { align-items:center; margin-bottom:20px; }
#realisations .realisations .col-sm-6 { margin-bottom:30px; }
#realisations .realisations .col-sm-6 a { display:none; position:relative; }
#realisations .realisations .col-sm-6 a:first-child { display:block; }
#realisations .realisations .col-sm-6 a:first-child:before { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:5; content:''; opacity:0; transition:all 0.5s ease 0s; }
#realisations .realisations .col-sm-6 a:first-child:after { font-size:12px; content:'Zoomer'; font-family:'Gotham'; font-weight:bold; text-transform:uppercase; color:#fff; padding:5px 20px; display:block; position:absolute; z-index:10; left:50%; top:50%; transform:translate(-50%, -20%); background:#e00816; opacity:0; transition:all 0.5s ease 0s; }
#realisations .realisations .col-sm-6 a:first-child:hover:before { opacity:1; }
#realisations .realisations .col-sm-6 a:first-child:hover:after { opacity:1; transform:translate(-50%, -50%); }

#realisations .realisations .col-sm-6 a:hover { }

/* Contact */
#contact section { padding-bottom:0; }
#contact section h1 { margin-bottom:50px; }
#contact section .container { max-width:820px; }
#contact section .left .form-item:last-child { margin-bottom:0; }
#contact section .right { display:flex; flex-direction:column; }
#contact section .right .textarea { display:flex; flex:1; margin:0; }
#contact section .right .submit { margin-top:25px; text-align:right; }
#contact section .right .btn { background:#e00816; color:#fff; border:none; text-transform:none; font-family:'Roboto'; font-weight:500; margin:0; border:1px solid transparent; }
#contact section .right .btn:hover { background:#fff; color:#e00816; border:1px solid #e00816; }
#contact .map { height: 400px; width: 100%; margin-top:60px; }

/* News */
#news h2 { margin-bottom:40px; text-transform:uppercase; font-size:20px; line-height:1em; }
#news h2:after { display:none; }
/**
 * Large devices (desktops, less than 1200px)
 **/
@media (max-width: 1199px) {
  
}

/**
 * Medium devices (tablets, less than 992px)
 **/
@media (max-width: 991px) {
  #header .left { position:fixed; left:0; top:0; width:350px; height:100%; z-index:10; background:#000; align-items:center; transform:translateX(-350px); transition:all 0.5s ease 0s; }
  #header .navigation { margin:0; }
  #header .navigation li:first-child { text-align:center; }
  #header .navigation li:first-child img { max-width:200px; }
  #header .swiper-container .swiper-slide img {  width:100%; }
  
  .hamburger { display:block; }
    
  #main,
  #header .right { transition:all 0.5s ease 0s; }
  
  body.open { overflow-x:hidden; }
  body.open #main,
  body.open #header .right { transform:translateX(350px); }  
  body.open #header .left { transform:translateX(0); }
}

/**
 * Small devices (landscape phones, less than 768px)
 **/
@media (max-width: 767px) {
  #accueil .savoir-faire img { margin-bottom:20px; }
  #accueil .news .right { display:none; }
  #accueil .news .left { text-align:left; }
  #accueil .news .left h2:after { align-self:flex-start; }
  #accueil .news .left .swiper-pagination { text-align:left; }
  
  
  #pose-chantiers .pose h2 { margin-top:20px; }
  #pose-chantiers .pose .left { order:2; }
  #pose-chantiers .pose .right { order:1; }
  #pose-chantiers .pose .row { margin-bottom:20px; }
  
  #vente-carrelage .carrelage .left { order:2; }
  #vente-carrelage .carrelage .right { order:1; }
  
  #entreprise .showroom .left { order:2; }
  #entreprise .showroom .right { order:1; }
  
  #footer .col-md-4 { margin:15px 0; text-align:center; }
  #footer .col-md-4:before,
  #footer .col-md-4:after { content:none; }
  #footer .right { display:flex; flex-direction:column; }
  #footer .right img { margin:0 0 20px 0; }
  
  #contact section .right .textarea { margin-top:30px; }
  
}

/**
 * Extra small devices (portrait phones, less than 544px)
 **/
@media (max-width: 543px) {
  
}