/**
 * General
 **/

/* Hamburger */
.hamburger { display:none; }
.hamburger:hover { opacity:1; }
.hamburger:focus { outline:none; }

.hamburger .text { position:relative; top:-5px; margin-right:10px; text-transform:uppercase; font-weight:600; color:#636572; }

/* Contextual */
[data-contextual] { position:relative; }
[data-contextual] .contextual { display:none !important; position:absolute; right:10px; top:10px; width:24px; height:24px; line-height:24px; text-align:center; font-size:14px; background:#42a5f5; border-radius:50%; color:#fff; transition:all 0.2s ease 0s; }
[data-contextual] .contextual:hover { transform:rotate(-15deg); }
.editor--editable-mode { min-height:100vh; }
.editor--editable-mode [data-contextual] { border:2px dashed rgba(243, 156, 18, 0.1); }
.editor--editable-mode [data-contextual] .contextual { display:block !important; z-index:100; }

/**
 * Responsive
 * Modifier le media query en selon du besoin
 **/
@media (max-width: 5000px) {
  
  .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 { position:relative; 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 { position:absolute; 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:400px; 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); }
}
/**
 * All elements
 */

.field { margin-bottom: 15px; position:relative; }
.field label { display: inline-block; margin:0; }

.field.required label { position:relative; }
.field.required label:after { content:'*'; color:#d9534f; }

.field .message { font-size:10px; position:absolute; right:0; top:8px; }

/**
 * Textfields & Textarea
 */

.field.textfield input,
.field.textarea textarea { display: block; width: 100%; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.15); }
.field.textfield input:focus,
.field.textarea textarea:focus { outline: none; border-color: rgba(0, 0, 0, 0.40); }

.field.textfield.success,
.field.textarea.success { color:#5cb85c; }
.field.textfield.success input { border-color:#5cb85c; }
.field.textarea.success textarea { border-color:#5cb85c; }

.field.textfield.error,
.field.textarea.error { color:#d9534f; }
.field.textfield.error input { border-color:#d9534f; }
.field.textarea.error textarea { border-color:#d9534f; }


/**
 * Checkbox & Radio
 */

.field.checkbox,
.field.radio { line-height: 20px; }
.field.checkbox input,
.field.radio input { width:20px; height:20px; float:left; margin-right:10px; }
.field.checkbox label,
.field.radio label { position:relative; margin-bottom: 0; cursor: pointer; }

.field.checkbox span:before,
.field.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; }

.field.checkbox span:after,
.field.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; }

.field.checkbox input:checked+span:after,
.field.radio input:checked+span:after { opacity: 1; }

.field.checkbox.error,
.field.radio.error { color:#d9534f; }
.field.checkbox.error span:before,
.field.radio.error span:before{ border-color:#d9534f; }
.field.checkbox.error span:after,
.field.radio.error span:after{ background-color:#d9534f; }

.field.checkbox.success,
.field.radio.success { color:#5cb85c; }
.field.checkbox.success span:before,
.field.radio.success span:before{ border-color:#5cb85c; }
.field.checkbox.success span:after,
.field.radio.success span:after{ background-color:#5cb85c; }

.field.checkbox .message:before,
.field.checkbox .message:after,
.field.radio .message:before,
.field.radio .message:after { content:none; }

/* checkbox */

.field.checkbox span:before,
.field.checkbox span:after { border-radius: 0; }

/* Radio */

.field.radio span:before,
.field.radio span:after { border-radius: 50%; }

/**
 * Select
 */

.field.select .selectize-control { line-height:normal; }
.field.select .selectize-input { padding:13px; display:block; }
.field.select .selectize-input,
.field.select .selectize-input.focus { border-radius: 0; box-shadow: none; }
.field.select .selectize-input.focus,
.field.select .selectize-dropdown { border-color:rgba(0, 0, 0, 0.40); }
.field.select .selectize-dropdown .optgroup-header { color: #aaa; text-transform: uppercase; font-size: 12px }
.field.select .selectize-control.multi .selectize-input > div { padding:7px 5px; }

.field.select.error { color:#d9534f; }
.field.select.error .selectize-input { border-color:#d9534f; }
.field.select.success { color:#5cb85c; }
.field.select.success .selectize-input { border-color:#5cb85c; }

/**
 * Addresses
 */

.field.address .ap-input { height:auto; line-height:auto; border-radius:0; }
.field.address .ap-dropdown-menu { color:#000; }

/**
 * Captcha
 **/

.field.captcha { display:flex; justify-content:center; }

/**
 * Submit
 */

.field.submit { margin-top:15px; text-align:center; }

.field.submit button { padding: 10px 20px; border: 1px solid rgba(0, 0, 0, 0.15); background: none; cursor: pointer; transition:all 0.5s ease 0s; }
.field.submit button:focus,
.field.submit button:active { outline: none; border-color: rgba(0, 0, 0, 0.40); }

.field.submit.loading button { position:relative; }
.field.submit.loading button:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.95); }
.field.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; }
/**
 * General Elements
 **/

body { font-family:'Roboto'; font-weight:normal; font-size:16px; line-height:2.2em; overflow-x:hidden; top:0 !important; background:url(../themes/pellegrini/assets/img/main-bg.png) no-repeat center 250px; }
body.lockscroll #header { transform:translateY(-100%); }
body#accueil.lockscroll .intro { margin-top:-128px; }

/* Titles */
h1 { text-align:center; color:#4c4b4f; font-size:36px; text-transform:uppercase; margin-bottom:60px; font-family:'Montserrat'; font-weight:bold; line-height:1em; }
h2 { font-family:'Montserrat'; font-weight:bold; font-size:26px; text-transform:uppercase; color:#4c4b4f; font-weight:600; line-height:1em; }
h3 { }
h4 { }
h5 { }
h6 { }

/* Links */
a { transition:all 0.3s ease 0s; }
a:hover, a:active, a:focus { text-decoration:none; color:#7db628; }

/* Images */
img { max-width:100%; height:auto; }

/* Buttons */
.btn { border:1px solid #7db628; color:#7db628; padding:8px 15px; text-transform:uppercase; background:transparent; transition:all 0.5s ease 0s; cursor:pointer; display:inline-block; }
.btn:hover, .btn:focus, .btn:active { background:#7db628; color:#fff; text-decoration:none; outline:0; text-decoration:none; }

/* Slideshow */
.slideshow { margin:0; z-index:5; }
.editor--editable-mode .slide--open .slide__title { z-index: 0; }
.slideshow-header { text-align:center; padding:40px 0 40px 0; position:relative; }
.slideshow-header ul { list-style:none; margin:0; padding:0; }
.slideshow-header li { display:inline-block; margin:0 15px; }
.slideshow-header a { font-weight:bold; text-transform:uppercase; color:#636572; padding:10px; border-bottom:3px solid transparent; transition:all 0.5s ease 0s; }
.slideshow-header li.active a,
.slideshow-header a:hover { color:#7db628; border-color:#7db628; text-decoration:none; }
.slideshow .deco--expander { width:500px; height:500px; margin:-250px 0 0 -250px; }

.slideshow .slide__inner { width:600px; height:600px; z-index:9999; position:relative; }
.slideshow .slide__inner .slide__img--small { transform:translateY(50px); }

.slideshow .slide__title { pointer-events:auto; width:120%; background:#e7e7e7; padding:50px 0; }
.slideshow .slide__title .container { max-width:500px; }
.slideshow .slide__title h2 { font-size:32px; letter-spacing:normal; margin-bottom:20px; text-transform:uppercase; }
.slideshow .slide__title p { font-family:'Roboto'; font-weight:normal; color:#4c4b4f; text-transform:none; letter-spacing:normal;  }

.slideshow .slide__content { }
.slideshow .slide__content .slide__title { background:none; width:100%; padding:0; margin-bottom:50px; }
.slideshow .slide__content .slide__img--large { max-height:250px; margin-bottom:10px; }
.slideshow .slide__content .slide__description { text-transform:none; font-weight:normal; letter-spacing:1px; color:#4c4b4f; }
.slideshow .slide__content .buttons { margin-top:40px; }
.slideshow .slide__content .buttons .btn { margin:5px 20px; }
.slideshow .deco--circle { background:#fff; }

.slideshow .navbutton { color:#bdbcc1; font-size:60px; cursor:pointer; transition:all 0.3s ease 0s; z-index:1000; height:60px; }
.slideshow .navbutton--prev { transform:translate3d(-400px,-150px,0); }
.slideshow .navbutton--next { transform:translate3d(300px,-150px,0); }
.slideshow .navbutton:hover { color:#aaa; }

.slideshow .slide__inner .btn { background:none; border:1px solid #4c4b4f; color:#4c4b4f; width:60px; height:60px; font-size:22px; line-height:45px; margin:0; position:absolute; right:80px; top:80px; left:auto; border-radius:50%; bottom:auto; cursor:pointer; transition:all 0.3s ease 0s; }
.slideshow .slide__inner .btn:hover { transform:none; background:#4c4c4f; color:#fff; }

.slideshow .action--close { position:fixed; right:20px; top:20px; background:#fff; }

/* Slider */
.swiper-wrapper { box-sizing:border-box; }
.swiper-pagination .swiper-pagination-bullet-active { background:#669119; }

/* Slideshow */
.slideshow2 { text-align:center; background:#f7f7f7; }
.slideshow2 img { max-height:350px; }
.slideshow2 .title { background:#f7f7f7; padding:50px 0; margin-top:30px; }
.slideshow2 .title h2 { opacity:0; transition:all 0.5s ease 0.5s; margin-left:30px; }
.slideshow2 .title p { opacity:0; transition:all 0.5s ease 0.8s; margin-right:30px; }
.slideshow2 .title button { opacity:0; transition:all 0.5s ease 1s; margin-left:30px; }

.slideshow2 .swiper-slide-active .title h2 { opacity:1; margin-left:0; }
.slideshow2 .swiper-slide-active .title p { opacity:1; margin-right:0; }
.slideshow2 .swiper-slide-active .title button { opacity:1; margin-left:0; }

/* Separator */
.separator { position:relative; }
.separator:before { content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:75px; height:10px; background:#6b991a; display:block; }

/**
 * Layout
 **/
 
/* Header */
#header { background:#f0f0f0; padding:30px; transition:all 0.5s ease 0s; height:166px; }
#header .logo { position:absolute; }
#header .logo h1 { margin:0; }
#header .hamburger { transition:all 0.5s ease 0s; padding:0; position:relative; z-index:9999; float:right; }
#header .menu { background:#3d3d3d; z-index:9; float:right; }
#header .menu li { margin:8px 0; padding:8px 0; line-height:1em; }
#header .menu a { color:#fff; text-transform:uppercase; font-family:'Montserrat'; font-size:18px;  }
#header .menu a:hover { color:#7db628; }
#header .menu li.active a { color:#7db628; }
#header .submenu { display:inline-block; font-family:'Roboto'; font-size:16px; font-weight:600; text-transform:uppercase; float:right; margin-right:30px; position:relative; z-index:8; margin-top:15px; }
#header .submenu ul { list-style:none; margin:0; padding:0;  }
#header .submenu li { display:inline-block; }
#header .submenu a { color:#7db628; }
#header .submenu i { margin-right:10px; }
#header .baseline { text-transform:uppercase; color:#5F6265; font-size:26px; font-weight:bold; margin-left:250px; margin-top:40px; float:left; }

#page { width:100%; overflow:hidden; }

body.lockscroll #header .hamburger { top:-80px; }
body .hamburger { margin-top:20px; margin-right:10px; }
body .hamburger-inner, 
body .hamburger-inner:after, 
body .hamburger-inner:before { background-color:#636572; }

body.open .hamburger-inner, 
body.open .hamburger-inner:after, 
body.open .hamburger-inner:before { background-color:#7db628; }
body.open .hamburger .text { color:#7db628; }


/* Content */
#main > section { padding:60px 0; }

/* Footer */
#footer { background:#424242 url(../themes/pellegrini/assets/img/footer-bg.png) repeat left top; color:#fff; text-align:center; padding:50px 0; }
#footer h2 { color:#fff; font-size:24px; margin-bottom:20px; }
#footer p { line-height:1.6em; }
#footer a { color:#fff; }
#footer ul { margin:40px 0 0 0; list-style:none; padding:0; font-size:34px; }
#footer ul li { display:inline-block; margin:0 15px; }
#footer ul li a { opacity:0.4;  }
#footer ul li a:hover { opacity:1; }

#footer ul.legal { font-size:16px; }
#footer ul li a { display:inline-block; }

/**
 * Pages
 **/

/* Accueil */ 
#accueil #header { background:#f7f7f7;  }
#accueil .intro { margin-top:0px; z-index:10; transition:all 0.5s ease 0s;  text-align:center; }
#accueil .intro .slideshow-images { padding:0 50px; position:relative; }
#accueil .intro .baseline { text-transform:uppercase; text-align:center; color:#5F6265; font-size:26px; padding:30px 0; font-weight:bold; }
#accueil .intro .subsection { background:rgba(0,0,0,0.1); padding:50px 0; }
#accueil .intro .navigation { position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%); display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
#accueil .intro .navigation button { border:none; padding:0; width:30px; height:30px; display:flex; }

/* Actualités */
#accueil .actualites { padding:60px 0; }
#accueil .actualites .swiper-container { padding-bottom:50px; }
#accueil .actualites .swiper-pagination { bottom:0; }
#accueil .actualites h2 { text-align:center; margin-bottom:60px; text-transform:uppercase; }
#accueil .actualites img { width:100%; }
#accueil .actualites .more { margin-top:40px; text-align:center; }

#actualites .actualites article { margin-bottom:30px; width:100%; }



/* Filters */
.filters { list-style:none; text-align:center; margin:40px 0 60px 0; padding:0; }
.filters li { display:inline-block; margin:0 15px; }
.filters li .btn { color:#7db628; }
.filters li .btn:hover { color:#fff; }
.filters li.active .btn { background:#7db628; color:#fff; }

/* Réalisations */
.realisations { padding:60px 0; }
.realisations .results article { position:relative; margin-bottom:30px; }
.realisations .results article a { display:block; }
.realisations .results article a:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; background:rgba(125, 182, 40, 0.75); transition:all 0.5s ease 0s; }
.realisations .results article h2 { position:absolute; text-align:right; right:30px; bottom:20px; color:#fff; font-size:15px; font-family:'Roboto'; font-weight:bold; margin:0; opacity:0; transition:all 0.5s ease 0s; }
.realisations .results article .hidden { display:none; }
.realisations .results article:hover a:before { opacity:1; }
.realisations .results article:hover h2 { opacity:1; right:20px; }

/* Projets */
.projets { padding:60px 0; }
.projets h1 { margin-bottom:30px; }
.projets h2 { text-align:center; margin:40px 0; }
.projets .intro { text-align:center; margin-bottom:40px; }
.projets .results article { position:relative; margin-bottom:30px; }
.projets .results article a { display:block; }
.projets .results article a:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; background:rgba(125, 182, 40, 0.75); transition:all 0.5s ease 0s; }
.projets .results article h2 { position:absolute; width:100%; left:0; text-align:center; bottom:10px; color:#fff; font-size:15px; font-family:'Roboto'; font-weight:bold; margin:0; opacity:0; transition:all 0.5s ease 0s; }
.projets .results article .hidden { display:none; }
.projets .results article:hover a:before { opacity:1; }
.projets .results article:hover h2 { opacity:1; bottom:20px; }

.more { text-align:center; }

/* Projets */
.projet .swiper-container { }
.projet .swiper-pagination { width:100%; }
.projet .swiper-pagination-bullet { margin:0 5px; }

.projet .textes { background:#f0f0f0; display:flex; height:100%; }
.projet .description { padding:30px;  }
.projet .description p { margin-bottom:0; }
.projet .btn { position:absolute; left:0; bottom:0; width:100%; background:#f44b4d; color:#fff; padding:0; border:none; line-height:60px; }
.projet .btn i { display:block; width:60px; height:60px; background:#454545; color:#fff; line-height:60px; font-size:30px; }
.projet .btn.tofiles i { float:right; }
.projet .btn.todesc i { float:left; }

.projet .files { padding:30px; text-align:center; }
.projet .files a { background:url(../themes/pellegrini/assets/img/pdf.png) no-repeat center top; padding-top:50px; margin-bottom:20px; color:#767676; display:block; background-size:40px; font-size:12px; line-height:1em; }

/* Contact */
.field .message { right:10px; top:12px; }
.field.submit button { background:#7db628; color:#fff; border:1px solid #7db628; }
.field.captcha { justify-content:flex-start; }
.field.submit { text-align:right; margin-top:0; }
.field.select { min-height:46px; }
.field.textarea .message { top:5px; }
.field.select label { float:left; margin-right:15px; line-height:46px; }
.field.select .selectize-control { float:right; margin-bottom:15px; }
.field.select .selectize-input { padding:13px 50px 13px 13px; }
.selectize-control.single .selectize-input:before { width:41px; height:46px; position:absolute; right:0; top:0; background:#7db628; content:''; display:block; left:auto; }
.selectize-control.single .selectize-input:after { border-color:#fff transparent transparent transparent; }
.selectize-control.single .selectize-input.dropdown-active:after { border-color:transparent transparent #fff transparent; }

.grey { background:#f0f0f0; padding:50px 0; text-align:center; }
.grey h2 { color:#7db628; margin-bottom:40px; }

/* Entreprise */
#main .entreprise { padding-bottom:0; }
.entreprise .intro { margin-bottom:50px; text-align:center; font-weight:600; }
.entreprise .row { margin-bottom:50px; }
.entreprise .row p { margin:0 0 0 0; }

/**
 * Large devices (desktops, less than 1200px)
 **/
@media (max-width: 1199px) {
	#header { height:126px; }
  #header .logo { max-width:150px; }
  #header .baseline { font-size:22px; margin-left:180px; margin-top:25px; }
  .slideshow-header { padding-top:60px; }
}

/**
 * Medium devices (tablets, less than 992px)
 **/
@media (max-width: 991px) {
  .field.select label { float:none; }
  .field.select .selectize-control { float:none; }
  .field.captcha { justify-content:center; }
  .field.submit { text-align:center; }
}

/**
 * Small devices (landscape phones, less than 768px)
 **/
@media (max-width: 767px) {
	#header { height:auto; overflow:hidden; }
	#header .logo { position:static; float:left; }
  #header .submenu { display:none; }
  .slideshow-header { display:none; }
  #accueil .intro { margin-top:0; }
}

/**
 * Extra small devices (portrait phones, less than 544px)
 **/
@media (max-width: 543px) {
	.btn { padding:4px 8px; }
	
  #header .logo { max-width:250px; }
  
  .slideshow .slide__inner { width:300px; height:200px; }
  .slide__img--large { height:150px; }
  .slideshow .slide__title h2 { font-size:24px; margin-bottom:10px; }
  .slideshow .slide__content .slide__description { font-size:12px; line-height:15px; }
  body#accueil.lockscroll .intro { margin-top:-107px; }
  .slideshow-header { font-size:12px; }
 
 	.projets .filters li { margin:5px; }
 	.projets .results article { margin-bottom:15px; }
 	.projet .files a { background-size:50%; font-size:11px; padding-top:40px; }
 	.projet .btn { font-size:12px; }
 	.projet .btn i { display:none; }
 	
 	.realisations .filters li { margin:5px; }
 	.realisations .results article { margin-bottom:15px; }
 	
 	body.lockscroll .actualites { opacity:0 !important; }
 	
 	.slideshow .deco--circle { background:transparent; }
 	.slideshow .slide__inner .btn { right:0; top:50px; }
 	
 	#header .logo { max-width:150px; }
 	
}