/**
 * General
 **/

/* Hamburger */
.hamburger { display:none; }
.hamburger:hover { opacity:1; }
.hamburger:focus { outline:none; }

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

[data-contextual] { position:relative; overflow:hidden; }
[data-contextual] .contextual { position:absolute; right:10px; top:10px; text-align:center; font-size:14px;  list-style:none; margin:0; padding:0; opacity:0; visibility:hidden; transform:translateY(-35px); transition:all 0.5s ease 0s; }
[data-contextual] .contextual li { float:left; }
[data-contextual] .contextual a { display:block; width:24px; height:24px; line-height:24px; color:#fff; border-radius:50%; margin-left:5px; transition:all 0.2s ease 0s; }
[data-contextual] .contextual .edit { background:#2980b9; }
[data-contextual] .contextual .edit:hover { transform:scale(1.2); }
[data-contextual] .contextual .add { background:#27ae60; }
[data-contextual] .contextual .add:hover { transform:scale(1.2); }

.editor .ct-widget.ct-ignition { bottom:40px; }
.editor [data-contextual] .contextual { opacity:1; visibility:visible; z-index:100; transform:translateY(0); }
.editor [data-contextual],
.editor [data-editable],
.editor [data-fixture] { outline:2px dashed #f39c12; }

/* Pagination */
.pagination { margin:30px 0; text-align:center; }
.pagination .loading { position: relative; }
.pagination .loading:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; background:#fff; }
.pagination .loading:after { font-family:'Font Awesome 5 Regular'; content:"\f3f4"; display:inline-block; width:24px; height:24px; line-height:24px; animation:fa-spin 2s infinite linear; position:absolute; left:50%; top:50%; margin-top:-12px; margin-left:-12px; z-index:3; }

.pagination.simple ul { margin:0; padding:0; }
.pagination.simple li { display:inline-block; margin:0 2px; }
.pagination.simple i { line-height:inherit; }
.pagination.simple a { display:block; width:30px; height:30px; line-height:30px; border:1px solid #ccc; color:#777; }
.pagination.simple a.active { background:rgba(0,0,0,0.1); }

.pagination.scroll { text-align:center; }

.pagination.dropdown { display:flex; justify-content:flex-end; }



/**
 * Responsive
 * Modifier le media query en selon du besoin
 **/
@media (max-width: 991px) {
  
  .hamburger { display:inline-block; }
  .menu { z-index:5; transition:all 0.5s ease 0s; overflow:hidden; background:rgba(0,0,0,0.5); display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .menu ul { opacity:0; transition:all 0.4s ease 0.3s; transform:translateY(30px); list-style:none; margin:0; padding:0;  }
  .open .menu ul { opacity:1; transform:translateY(0); }
  
  /**
   * Fullscreen
   **/
  .fullscreen .menu { position:fixed; left:0; top:0; width:100%; height:100%; }
  .fullscreen .hamburger { z-index: 10; }
  
  /* Fullscreen Fade */
  .fullscreen.fade .menu { opacity:0; visibility:hidden; }
  .fullscreen.fade.open .menu { opacity:1; visibility:visible; }
  
  /* Fullscreen Top */
  .fullscreen.top .menu { transform:translateY(-100%); }
  .fullscreen.top.open .menu { transform:translateY(0); }
  
  /* Fullscreen Right */
  .fullscreen.right .menu { transform:translateX(100%); }
  .fullscreen.right.open .menu { transform:translateX(0); }
  
  /* Fullscreen Bottom */
  .fullscreen.bottom .menu { transform:translateY(100%); }
  .fullscreen.bottom.open .menu { transform:translateY(0); }
  
  /* Fullscreen Left */
  .fullscreen.left .menu { transform:translateX(-100%); }
  .fullscreen.left.open .menu { transform:translateX(0); }
  
  /**
   * Over
   **/
   
  .over .menu { position:fixed; }
  .over .hamburger { z-index: 10; }
  
  /* Over Top */
  .over.top .menu { left:0; top:0; width:100%; height:auto; transform:translateY(-100%); }
  .over.top.open .menu { transform:translateY(0); }
  
  /* Over Right */
  .over.right .menu { right:0; top:0; width:300px; height:100%; transform:translateX(100%); }
  .over.right.open .menu { transform:translateX(0); }
  
  /* Over Bottom */
  .over.bottom .menu { left:0; bottom:0; width:100%; height:auto; transform:translateY(100%); }
  .over.bottom.open .menu { transform:translateY(0); }
  
  /* Over Left */
  .over.left .menu { left:0; top:0; width:300px; height:100%; transform:translateX(-100%); }
  .over.left.open .menu { transform:translateX(0); }
  
  /**
   * Push
   **/
   
  .push { transition:all 0.5s ease 0s; }
  .push.open { overflow:hidden; }
  .push .menu { position:fixed; }
  
  /* Push Top */
  .push.top .menu { left:0; top:0; height:300px; width:100%; transform:translateY(-100%); overflow-y:hidden; }
  .push.top.open { transform:translateY(300px); }
  
  /* Push Right */
  .push.right .menu { right:0; top:0; height:100vh; width:300px; transform:translateX(100%); overflow-x:hidden; }
  .push.right.open { transform:translateX(-300px); }
  
  /* Push Bottom */
  .push.bottom .menu { left:0;margin-top:100vh; height:300px; width:100%; overflow-y:hidden; }
  .push.bottom.open { transform:translateY(-300px); }
  
  /* Push Left */
  .push.left .menu { left:0; top:0; height:100vh; width:300px; transform:translateX(-100%); overflow-x:hidden; }
  .push.left.open { transform:translateX(300px); }
}
/**
 * General Elements
 **/

body { font-family:'Montserrat'; font-weight:normal;  }
body.open { overflow:hidden; }
:focus { outline:none; }

/* Titles */
h1 { }
h2 { }
h3 { }
h4 { }
h5 { }
h6 { }

/* Links */
a { }
a:visited { }
a:hover { text-decoration:none; }
a:focus { text-decoration:none; }

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

/* Boutons */
.btn { position:relative; display:inline-block; padding:25px; line-height:1em; color:#66656a; font-size:22px; font-weight:bold; }
.btn.cadre > .tr { width:6px;  }
.btn.cadre > .br { height:6px; }
.btn.cadre > .bl { width:6px; }
.btn.cadre > .tl { height:6px; }

.cadre > .tr { position:absolute; top:0; right:0; width:10px; height:0; background:#bea892; z-index:-2; transition:all 0.4s ease 0s;  }
.cadre > .br { position:absolute; bottom:0; right:0; width:0; height:10px; background:#bea892;  z-index:-2; transition:all 0.4s ease 0.4s; }
.cadre > .bl { position:absolute; bottom:0; left:0; width:10px; height:0; background:#bea892;  z-index:-2; transition:all 0.4s ease 0.8s; }
.cadre > .tl { position:absolute; top:0; left:0; width:0; height:10px; background:#bea892; z-index:-2; transition:all 0.4s ease 1.2s; }
.cadre > .mask { position:absolute; right:0; top:0; width:50%; height:75%; background:#fff; z-index:-1; }

.cadre.active > .tr { height:100%; }
.cadre.active > .br { width:100%; }
.cadre.active > .bl { height:100%; }
.cadre.active > .tl { width:100%; }
.cadre.active > .mask { }

/* Formulaire */
.field.textfield { position:relative; font-weight:600; margin-bottom:30px; }
.field.textfield label { position:absolute; left:0; top:50%; transform:translateY(-50%); transition:all 0.3s ease 0s; }
.field.textfield input { border:none; border-bottom:3px solid #bea892; padding:10px 0; }
.field.textfield.active label { top:0; font-size:14px; color:#bea892; }
.field.textfield.active input { border-color:#bea892; }

.field.textarea { position:relative; font-weight:600; margin-top:60px;  }
.field.textarea label { position:absolute; left:10px; top:10px; transition:all 0.3s ease 0s; }

.field.textarea.active label { top:-30px; left:0; font-size:14px; color:#bea892; }

.field .btn { background:#bea892; color:#fff; font-weight:700; padding:15px 30px; border:none; font-size:16px; }

.field .message { top:auto; bottom:-30px; }



/**
 * Layout
 **/
 
/* Header */
#header { padding:40px 80px 80px 80px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; position:relative; }
#header .logo h1 { margin:0; }
#header .navigation { margin-top:-50px; }
#header .navigation ul { list-style:none; padding:0; margin:0; }
#header .navigation li { display:inline-block; margin-left:15px; }
#header .navigation a { font-size:24px; font-weight:bold; color:#66656a; transition:all 0.5s ease 0s; }
#header .navigation a:hover { color:#bea892; }
#header .navigation li.active a { color:#bea892; }

#header .navigation .home a { position:absolute; right:0; bottom:100px; background:#bea892; color:#fff; padding:10px 30px 10px 30px; transition:all 0.3s ease 0s; }
#header .navigation .home a:hover { padding-right:80px; }

/* Footer */
#footer { padding:60px 0; text-align:center; font-size:20px; }
#footer .mentions { margin-top:20px; }
#footer .mentions a { color:#000; }


/**
 * Pages
 **/
.page { background-size:contain; font-size:18px; }
.page .inner { background:#fff; padding:60px; transform:translateY(-30px); box-shadow: 0px .0px 20px 0px rgba(0,0,0,0.1); line-height:2em; }
.page .gallerie { margin-top:50px; margin-bottom:50px; }
.page .gallerie img { margin-bottom:30px; }
.page h1 { color:#bea892; margin-bottom:50px; margin-top:30px; font-size:40px; }
.page p { margin-bottom:30px; }

/* Accueil */
#accueil .page { background:#ffffff url(../themes/bole/assets/img/intro-bg.jpg) no-repeat left top; }
#accueil .page h2 { color:#66656a; min-height:250px; display:flex; align-items:center; position:relative; padding-left:50px; font-size:44px; font-weight:bold; line-height:1.1em; margin-bottom:30px; }
#accueil .page h2 > span { visibility:hidden; }
#accueil .page .cadre { width:250px; position:absolute; left:0; top:0; height:100%; z-index:-1; }
#accueil .page .cadre > .mask { top:50%; transform:translateY(-50%); width:10px; }
#accueil .page .gallerie { margin-top:100px; margin-bottom:70px; }
#accueil .page .texte { font-weight:600; font-size:18px; }
#accueil .page .bottom { font-weight:normal; text-align:center; line-height:2.2em; max-width:720px; margin-left:auto; margin-right:auto; }

#accueil .type { background:url(../themes/bole/assets/img/type-bg.jpg) no-repeat center bottom; background-size:cover; padding-bottom:400px; padding-top:60px; position:relative;  }
#accueil .type ul { padding:0; list-style:none; }
#accueil .type li a { display:flex; align-items:center; justify-content:center; height:350px; background:#fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); color:#66656a; font-size:34px; font-weight:bold; }
#accueil .type li span { display:inline-block; position:relative; margin-top:80px; line-height:1em; padding-left:55px; }
#accueil .type li span:before { content:''; position:absolute; left:0; bottom:7px; }
#accueil .type li.portes span:before { width:79px; height:128px; background:url(../themes/bole/assets/img/picto-porte.png) no-repeat left top; }
#accueil .type li.escaliers span:before { width:115px; height:128px; background:url(../themes/bole/assets/img/picto-escalier.png) no-repeat left top; }
#accueil .type li.fenetres span:before { width:173px; height:128px; background:url(../themes/bole/assets/img/picto-fenetre.png) no-repeat left top; }
#accueil .type .blur { position:absolute; left:0; bottom:0; overflow:hidden; width:100%; padding:50px 0; text-align:center; color:#fff; font-weight:600; }
#accueil .type .blur:before { content:''; position:absolute; left:-10px; top:-10px; right:-10px; bottom:-10px; background:url(../themes/bole/assets/img/type-bg.jpg) no-repeat center bottom; filter:blur(10px); -webkit-filter:blur(10px); }
#accueil .type .blur p { margin-bottom:0; }

/* Portes */
#portes .page { background:#ffffff url(../themes/bole/assets/img/portes-bg.jpg) no-repeat center top; }

/* Fenêtres */
#fenetres .page { background:#ffffff url(../themes/bole/assets/img/fenetres-bg.jpg) no-repeat center top; }

/* Divers */
#divers .page { background:#ffffff url(../themes/bole/assets/img/divers-bg.jpg) no-repeat center top; }

/* Escaliers */
#escaliers .page { background:#ffffff url(../themes/bole/assets/img/escaliers-bg.jpg) no-repeat center top; }

/* Mentions légales */
#mentions-legales .page { background:#ffffff url(../themes/bole/assets/img/intro-bg.jpg) no-repeat left top; }

/* Contact */
#contact .page { background:#ffffff url(../themes/bole/assets/img/contact-bg.jpg) no-repeat center top; }
#contact .page .right { display:flex; }
#contact .page .right .inner { display:flex; align-items:center; }
#contact .page .inner { margin-bottom:30px; }
#contact .thanks { color:#bea892; font-weight:600; margin-top:80px; }
#contact form .btn { display:block; width:100%; }

/* Merci */
#merci .page { background:#ffffff url(../themes/bole/assets/img/contact-bg.jpg) no-repeat center top; }
/**
 * Large devices (desktops, less than 1200px)
 **/
@media (max-width: 1199px) {
  #header { padding-left:40px; padding-right:40px; }
}

/**
 * Medium devices (tablets, less than 992px)
 **/
@media (max-width: 991px) {
  #header .navigation li { display:block; margin:10px 0; text-align:center; }
  #header .navigation a { color:#fff; }
  #header .navigation .menu { background:rgba(190, 168, 146, 0.95); }
  .hamburger { padding:0; position:relative; }
  body.open #header .hamburger { z-index:6; }
  .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background-color:#66656a; }
  
  #header .navigation .home a { position:static; right:auto; bottom:auto; background:none; color:#fff; padding:0; transition:none; }
  #header .navigation .home a:hover { padding-right:30px; }
  
  #header .navigation a:hover { color:#fff; }
  #header .navigation li.active a { color:#fff; }
  
  .page .gallerie { margin:30px 0; }
  .page .inner { padding:30px; }
  
  #accueil .page h2 { font-size:34px; }
  #accueil .page h2 > span { visibility:visible; }
  #accueil .inner .left { display:none; }
  #accueil .page .gallerie { margin:30px 0; }
  #accueil .page .bottom { text-align:left; }
  #accueil .type { padding-bottom:200px; }
  #accueil .type ul { position:relative; top:-30px; }
  #accueil .type li a { height:200px; font-size:20px; }
  #accueil .type li span { margin-top:60px; }
  #accueil .type li span::before { transform:scale(0.6); bottom:-20px; }
  #accueil .type li.fenetres span::before { left:-20px; }
  
}

/**
 * Small devices (landscape phones, less than 768px)
 **/
@media (max-width: 767px) {
  #accueil .page .gallerie { display:none; }
  #accueil .type li { margin-bottom:30px; }
}

/**
 * Extra small devices (portrait phones, less than 544px)
 **/
@media (max-width: 575px) {
  #header .logo { width:100%; text-align:center; }
  .hamburger { position:absolute; right:40px; top:40px; }
  
}