@font-face {
font-family: "Futura";
src: url("assets/fonts/FuturaBkBTBook.woff") format('woff');
}

body {background-color: #FFF; font-family: Futura;}
a {color: #221e1d;}
a:hover {color: #221e1d; text-decoration: underline;}
.container-fluid {padding: 0;}

@keyframes zoomin {
  0% {transform: scale(0.5)}
	90% {transform: scale(1.1)}
	100% {transform: scale(1.0)}
}

@keyframes fadein {
  0% {opacity: 0}
	100% {opacity: 1}

}

@keyframes slidein {
  0% {opacity: 0; transform: translateX(-100%);}
	100% {opacity: 1; transform: translateX(0);}
}
.pos-relative {position: relative;}
/*****************************
/* Barre de menu
******************************/
.site-header {background-color: #000; padding: 20px 0 30px 0; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 10;}
#main .blog-post {margin-top: 170px;}
.custom-logo-link {position: relative; display: inline-block;}
.custom-logo-link img {max-width: 100%; height: 100px; width: auto; overflow: visible; position: relative; transition: height 0.5s;}
.custom-logo-link::after {content: ''; display: block; position: absolute;  background: transparent url(assets/images/1983.png) top center no-repeat; background-size: contain; width: 30%; height: 100px; right: -15%; top: 0px;animation-name: zoomin; animation-duration: 0.5s;}
@media(min-width: 767px) {
  .scrolled .custom-logo-link img {height: 60px; }
}
@media(max-width: 768px) {
  #main .blog-post {margin-top: 270px;}
}


#navbarsecondaire {position: absolute; bottom: -25px; left: 0px; width: 70%; z-index: 10; animation: slidein 1s;}
#navbarsecondaire #second-menu .nav {background-color: #b0c825; padding: 0 10px;}

#navbarsecondaire #second-menu .nav .nav-link {color: #000; text-transform: uppercase; font-size: 0.8rem; font-weight: 500; padding: 10px 10px;}
@media(max-width: 767px) {
	#header-menu {padding-top:0px; padding-bottom: 10px; margin-top: 0px; background-color: #000; }

	#mainnavbar .container-fluid {}
	#menu-menu-entete .menu-item {padding: 5px 15px;}
	#mobilenavabartoggler {color: #b0c825; border-color: #b0c825; margin-left: 15px; position: absolute; right: 15px; top: 75px; transition: top 0.5s}
  .scrolled #mobilenavabartoggler {top: 15px; transition: top 0.5s}
	#navbarsecondaire {position: absolute; top: 190px; right: 0px; bottom: unset; width: 100%; z-index: 11; animation: slidein 1s;}
  .scrolled #navbarsecondaire {position: absolute; top: 130px;}

}
@media(min-width: 768px) {
	#navbarsecondaire #second-menu .nav {-webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);}
	#navbarsecondaire #second-menu .nav .menu-item{-webkit-transform: skew(20deg); -moz-transform: skew(20deg);-o-transform: skew(20deg);}
	#navbarsecondaire #second-menu .nav .menu-item::before {content:''; background-color: #009846; width: 4px; height: 4px; border-radius: 50%; display: inline-block; position: absolute; left: -1px; top: 50%; }
	#navbarsecondaire #second-menu .nav .menu-item:first-child::before {display: none;}
}


#btn-devis {position: absolute; z-index: 10; bottom: -20px; right: 10%; background-color: #009846; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); padding: 10px 10px;}
#btn-devis a {color: #FFF; font-size: 1.2rem; font-weight: bold; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); text-decoration: none;}


#header-menu .navbar-nav .menu-item {counter-increment:itemnav; /*width: 96px;*/}
@media(max-width: 1400px)
{
  #header-menu .navbar-nav .menu-item {counter-increment:itemnav; width: 64px;}
  #menu-menu-principal .menu-item .nav-link span::before {height: 32px!important;}
  #header-menu .navbar-nav .menu-item { width: 11%;padding-top: 20px; padding-bottom: 0/*40px*/;}
}
#header-menu .navbar-nav .nav-link {font-size: 0.8rem; color: #FFF; text-transform: uppercase; font-weight: normal; opacity: 0; padding-top: 0; padding-bottom: 0; text-align: center; animation-name: slidein; animation-duration: 0.5s; animation-fill-mode: forwards;}
#header-menu .navbar-nav .menu-item:nth-child(1) .nav-link {animation-delay: 0s;}
#header-menu .navbar-nav .menu-item:nth-child(2) .nav-link {animation-delay: 0.05s; anima}
#header-menu .navbar-nav .menu-item:nth-child(3) .nav-link {animation-delay: 0.1s;}
#header-menu .navbar-nav .menu-item:nth-child(4) .nav-link {animation-delay: 0.15s;}
#header-menu .navbar-nav .menu-item:nth-child(5) .nav-link {animation-delay: 0.2s;}
#header-menu .navbar-nav .menu-item:nth-child(6) .nav-link {animation-delay: 0.25s;}
#header-menu .navbar-nav .menu-item:nth-child(7) .nav-link {animation-delay: 0.3s;}
#header-menu .navbar-nav .menu-item:nth-child(8) .nav-link {animation-delay: 0.35s;}
#header-menu .navbar-nav .menu-item:nth-child(9) .nav-link {animation-delay: 0.4s;}

#header-menu .navbar-nav .nav-link:hover, #header-menu .navbar-nav .nav-link:focus, #header-menu .navbar-nav .current-menu-item .nav-link { color: #b0c825; text-decoration: none; }

.navbar.bg-light {background-color: transparent!important;}
@media (min-width: 768px) {
	.navbar-expand-md .navbar-nav .nav-link {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
}

#menu-menu-principal .menu-item .nav-link span::before {
	content: '';
	height: 68px;
	width: 100%;
	min-width: 68px;
	display: block;
  background-color: #FFF;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#menu-menu-principal .menu-item .nav-link:hover span::before, #menu-menu-principal .menu-item.active .nav-link span::before {
	background-color: #b0c825;
  transition: background-color 0.5s;
}
@media(max-width: 768px)
{
	#menu-menu-principal {flex-direction: row; justify-content: center;}
	#header-menu .navbar-nav .menu-item {width: 20%; padding: 0 5px}
	#header-menu .navbar-nav .menu-item span {width: 100%; display: block; margin-bottom: 15px; font-size: 0.5rem;}
  #menu-menu-principal .menu-item .nav-link span::before {width: auto; height: 48px; margin: 0 auto; max-width: 100%; min-width: unset;}
}
#menu-menu-principal .menu-fenetre .nav-link span::before {mask-image: url(assets/images/icones/fenetres.png);}
#menu-menu-principal .menu-pergolas .nav-link span::before {mask-image: url(assets/images/icones/pergolas.png);}
#menu-menu-principal .menu-volets .nav-link span::before {mask-image: url(assets/images/icones/volets.png);}
#menu-menu-principal .menu-portes .nav-link span::before {mask-image: url(assets/images/icones/portes.png);}
#menu-menu-principal .menu-stores .nav-link span::before {mask-image: url(assets/images/icones/stores.png);}
#menu-menu-principal .menu-portails .nav-link span::before {mask-image: url(assets/images/icones/portails.png);}
#menu-menu-principal .menu-portes-garage .nav-link span::before {mask-image: url(assets/images/icones/garages.png);}
#menu-menu-principal .menu-verandas .nav-link span::before {mask-image: url(assets/images/icones/verandas.png);}
#menu-menu-principal .menu-motorisations .nav-link span::before {mask-image: url(assets/images/icones/motorisations.png);}

.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28174, 203, 6, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}

.scrolled .custom-logo-link {/*margin-right: 150px;*/ transition: margin-right 0.5s;}
.scrolled #menu-menu-principal .menu-item .nav-link span::before {height: 32px; transition: height 0.5s;}
.scrolled #header-menu .navbar-nav .menu-item { padding-top: 0px; padding-bottom: 0px;}
.scrolled #header-menu .navbar-nav .nav-link {font-size: 0.6rem; transition: font-size 0.5s;}
.scrolled #mainnavbar.mt-3 {margin-top: 0px!important;transition: margin-top 0.5s;}
.scrolled .site-header {padding: 5px 0 25px 0;transition: padding 0.5s;}

@media (max-width: 768px) {
  #menu-menu-principal .menu-item .nav-link span::before {height: 32px!important;}
  #header-menu .navbar-nav .menu-item { width: 11%;}
  .scrolled .custom-logo-link {margin-right: 0; transition: margin-right 0.5s;}
  .scrolled .custom-logo-link img {height: 70px; width: auto; transition: width 0.5s, height 0.5s;}
}

.carousel_entete {padding: 0px 15%; position: relative;}
.carousel_entete::before {content:''; background: transparent url(assets/images/carousel_left.png) top right no-repeat; background-size: cover; width: 20%; height: 100%; position: absolute; z-index:2; left: 0px; top: 0px;}
.carousel_entete::after {content:''; background: transparent url(assets/images/carousel_right.png) top left no-repeat; background-size: cover; width: 20%; height: 100%; position: absolute; z-index:2; right: 0px; top: 0px;}
.carousel_entete .elementor-image-carousel {max-height: 35vw;}
.carousel_entete .elementor-swiper-button {z-index: 5!important; background-color: #000; border-radius: 50%; padding: 5px;}
.carousel_entete .elementor-swiper-button-prev {left: 7%!important;}
.carousel_entete .elementor-swiper-button-next {right: 9%!important;}


.titre_principal h1{display: inline-block!important; background-color: #FFF; border-radius: 30px 30px 0 0; padding: 10px 30px 0 30px;  max-width: 100%;}
@media (min-width: 1024px){
  .titre_principal h1{min-width: 800px; }

}
.titre_inverse h2 {display: inline-block!important; background-color: #b0c926; padding: 10px 40px; color: #FFF;}
.ombre_verte div::before {content: ''; display: block; position: absolute; width: 100% ; height: calc(100% - 35px); left: 0; top: 35px; background-color: #b0c926; z-index: -1;}
@media(min-width: 768px) {
  .galerie_realisations .elementor-widget-image img {height: 18vw; object-fit: cover;}
}


.wpcf7-submit {background-color: #006eb3; color: #FFF; border: 1px solid #006eb3; padding: 0.5rem 1rem; text-transform: uppercase; font-weight: normal;}
.wpcf7-spinner {display: block;}
.wpcf7-select {border: 1px solid #DDD; background-color: #FFF;}



.overflow-x-hidden {overflow: visible!important; overflow-x: hidden!important;}

.btn {border-radius: 0;}
.btn:focus {box-shadow: none;}
.btn-primary, .btn-primary:hover {background-color: #006eb3; color: #FFF; border: 1px solid #006eb3; outline: transparent;}
.btn-primary.btn-outline {border: 3px solid #006eb3; border-radius: 0px; background-color: #FFF; color: #006eb3; font-weight: 700; padding: 2px 15px;}

.btn-parallelogramme {position: relative; margin-left: 10px;}
.btn-parallelogramme::before, .btn-parallelogramme::after {position: absolute; top: 0px; content:''; background-color: #b0c926; height: 100%; width: 20px; display: inline-block;}
.btn-parallelogramme::before {left: -10px; transform: skew(-25deg);}
.btn-parallelogramme::after {right: -10px; transform: skew(-25deg);}

.lien-telephone, .lien-telephone p {margin-bottom: 0!important;}

@media(max-width: 767px) {
	.bg-white-mobi {background-color: #FFF;}
}

.ico-sociaux {font-size: 2.5rem;}

a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

.wpcf7-form label, .wpcf7-form .wpcf7-text, .wpcf7-form .wpcf7-textarea {width: 100%;}
.wpcf7-form .wpcf7-text, .wpcf7-form .wpcf7-textarea {border: 1px solid #DDD;}
.wpcf7 input:not([type="submit"]), .wpcf7 textarea {background-color: #FFF!important;}
.wpcf7 input.wpcf7-submit {background-color: #009846; color: #FFF; font-weight: bold;}
/*****************************
/* Contenus
******************************/

.titre-realisations {position: relative; background-color: #000; color: #FFF; text-transform: uppercase; display: inline-block; margin: 0 auto; margin-top: -5px; padding: 3px 15px;}
.titre-realisations::before {position: absolute; background-color: #000; color: transparent; width: 20px; height: 100%; content: ''; transform: skew(-25deg); left: -10px; top: 0px; display: inline-block;}
.titre-realisations::after {position: absolute; background-color: #000; color: transparent; width: 20px; height: 100%; content: ''; transform: skew(-25deg); right: -10px; top: 0px; display: inline-block;}

.titre_categorie {position: relative; }
.titre_categorie::after {content: ''; width: 0px; height: 0px; position: absolute; right: 0px; top: -40px; border-bottom : 40px solid #b0c926; border-left : 40px solid transparent;}

/* Footer */
body>footer {background-color: #000; color: #FFF; position: relative;}
footer .navbar {padding: 0;}
footer a, footer a:hover {color: #FFF; text-decoration: none;}
footer {font-size: 0.8rem;}

#menu-pied-de-page {margin-bottom: 20px;}
#menu-pied-de-page li.menu-item a {font-size: 1.1rem;}

#menu-footer {width: 100%;}
#menu-footer li.menu-item {display: list-item; list-style-type: none; font-size: 0.8rem;  padding: 15px;}
#menu-footer li.menu-item a {text-transform: uppercase; text-decoration: underline;}
#menu-footer .sub-menu {padding: 0;}
#menu-footer .sub-menu li.menu-item {padding: 0; margin-top: 5px;}
#menu-footer .sub-menu li.menu-item a {text-transform: none; text-decoration: none; font-size: 0.8rem;}
#menu-footer .sub-menu li.text-uppercase a {text-transform: uppercase;}
#menu-footer .sub-menu li.text-underline a {text-decoration: underline;}

footer #membre-gcc {font-size: 0.6rem; line-height: 0.6rem;}
footer #membre-gcc img {width: 250px; max-width: 60%;}
@media(max-width: 768px) {
	footer #membre-gcc img {width: 250px; max-width: 40%;}
}

.lien-realisation {position: absolute; bottom: 0px; right: 80px; color: #888;}
.lien-realisation .logo {height: 10px;}

#actualites h1 {color: #127D43;}
.actualite {}
.actualite img.wp-post-image {max-width: 100%!important;}
.actualite .titre_categorie {background-color: #b0c926; color: #272827; font-size: 1.1rem; padding: 5px 10px;}
.carrousel_actu {height: 500px; max-height: 80vh; overflow-y: hidden;}
.actualite .btn-parallelogramme {background-color: #b0c926; color: #272827; padding: 3px 15px; text-decoration: none; text-transform: uppercase; font-weight:500;}

.liste-actus h3 {font-size: 14px;}

.galerie-actualite .gallery-item img {height: 400px; width: 100%; object-fit:cover;}

.modal-open {cursor: pointer;}
.modal-eurohabitat .modal-dialog {background-color: #FFF; border: 10px solid #292829; border-radius:0px; }
.modal-eurohabitat .modal-dialog .modal-content {border: none; border-radius: 0;}
.modal-eurohabitat .modal-dialog .modal-header {background-color: #292829!important; border: none;border-radius: 0; align-items: start;}
.modal-eurohabitat .modal-dialog .modal-header .btn-close {background: transparent url(assets/images/FERMETURE.png) center no-repeat; background-size: contain; opacity: 1; }
.modal-eurohabitat .modal-dialog .modal-header h5 {color: #FFF; font-size: 2rem; line-height: 2rem; text-transform: uppercase; font-weight: bold;}