html{
font-size: 18px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
touch-action: manipulation;
}
html, body {
min-height: 100%;
}
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
text-decoration: none; 
}
img, fieldset {
border: 0;
} img {
display: block;
max-width: 100%;
height: auto;
width: auto\9; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
display: block;
}
ul li {
list-style-type: none;
}
h1, h2, h3, h4{
font-weight: 600;
}
p{
line-height: 1.5em;
}
#human{display:none !important;}
@font-face{
font-family: 'Dancing';
font-display: swap;
src: url(//www.clotureseques.com/wp-content/themes/blankslate-child/fonts/dancing-webfont.woff2);
} .table{display:table;}
.flex{display:flex;}
.grid{display:grid;}   :root {
--primary-color: #0b4a2b;
--secondary-color: #05341d;
}
.wrap{position:relative; margin:0 auto; width: 1400px;}
.specialheight{min-height:760px;}
.bold{font-weight:700;}
.light{font-weight:300;}
.flex{display:flex;}
.flex-wrap{flex-wrap:wrap; flex-direction: row !important;}
.text-center{text-align: center;}
.alignright{float: right; margin: 0 0 15px 50px;}
.alignleft{float: left; margin: 0 50px 15px 0}
.aligncenter{display: block; margin-left: auto; margin-right: auto;}
body.no-scroll{overflow: hidden;}
.dark-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.2;}
.blue-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--my-color); opacity: 0.6;}
.shadow{
width:80%; padding-bottom:7%; z-index:-1; margin: auto;
background:url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/shadow.png) no-repeat top center/contain;
}
.anchor{position:relative; visibility:hidden; top:-150px; display:block;}
.overlay{position: fixed; top: 0; width: 100%; height: 100%; background-color: #000; visibility: hidden; opacity: 0; z-index: 1100;
transition: all 0.6s;
}
.overlay.appear{visibility: visible; opacity: 0.3;}  .btn{display: flex; align-items: center; width: max-content; color: var(--primary-color); font-size: 20px; font-weight: 600; text-transform: uppercase; padding: 20px 30px;
background-image: linear-gradient(to top, var(--primary-color) 50%, #fff 50%); background-size: 200% 200%; background-position: top;
transition: all 0.3s;
}
.btn svg{margin-right: 12px;}
.btn svg > path{fill: var(--primary-color); transition: all 0.3s; margin-right: }
.btn:hover{color: #fff; background-position: bottom;}
.btn:hover svg > path{fill: #fff;}
.btn.btn-colour{color: #fff; background-image: linear-gradient(to top, var(--secondary-color) 50%, var(--primary-color) 50%);}
.btn.btn-colour svg > path{fill: #fff;}
.btn-full-width{display: flex; align-items: center; gap: 50px;}
.btn-full-width .full-line{flex-grow: 1; height: 1px; background-color: var(--secondary-color); opacity: 0.3;}
.text-section.text-center{
width: 70%;
margin: auto;
}
.text-section h2{
font-size: 36px;
color: var(--secondary-color);
text-transform: uppercase;
line-height: 1.3em;
margin-bottom: 25px;
}
.text-section p{
line-height: 2em;
}
.text-section p:not(:last-of-type){
margin-bottom: 15px;
}
.text-section .btn{
margin-top: 45px;
}
.box-line-title{
display: flex;
align-items: flex-end;
margin-bottom: 50px;
}
.box-line-title h2{
width: max-content;
color: #000;
text-transform: uppercase;
background-color: #fff;
padding: 20px 50px;
margin: 0 30px;
}
.box-line-title.color-title h2{
color: #fff;
background-color: var(--primary-color);
}
.box-line-title:before, .box-line-title:after{
display: block; content: '';
flex-grow: 1;
height: 1px;
background-color: #fff;
margin-bottom: 15px;
}
.box-line-title.color-title:before, .box-line-title.color-title:after{
background-color: var(--primary-color);
}   #nav{
position: fixed;
width: 100%;
top: 0;
box-shadow: 0 0 10px #00000066;
transition: all 0.8s;
z-index: 1000;
}
#nav .nav-left{
display: flex;
align-items: center;
width: 30%;
padding: 30px 80px 30px 100px;
background-color: var(--secondary-color);
transition: padding 0.3s;
}
#nav .nav-left .logo{
display: block;
transition: all 0.3s;
}
#nav .nav-left .logo:hover{
opacity: 0.8;
}
#nav .nav-left .logo .logo-subtitle{
font-family: 'Dancing';
max-height: 40px;
color: #d4d4d4;
font-size: min(2vw, 30px);
margin-top: 10px;
text-wrap: nowrap;
transition: all 0.3s;
}
#nav .nav-right{
position: relative;
width: 70%;
padding: 30px 100px 30px 30px;
background-color: var(--primary-color);
transition: padding 0.3s;
}
#nav .nav-right .nav-right-top{
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 20px;
transition: all 0.3s;
}
#nav .nav-right .nav-right-top a{
position: relative;
color: #fff;
}
#nav .nav-right .nav-right-top > *{
display: block;
margin-left: 30px;
}
#nav .nav-right .nav-right-top .item{
display: flex;
font-size: 20px;
font-weight: 700;
transition: all 0.3s;
}
#nav .nav-right .nav-right-top .item .top-icon{
margin-right: 15px;
}
#nav .nav-right .nav-right-top .rbq{
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 600;
color: #fff;
}
#nav .nav-right .nav-right-top .item:hover, #nav .nav-right .nav-right-top a.cart:hover{
opacity: 0.7;
}
#nav .nav-right .nav-right-top .cart span{
position: absolute;
top: -14px;
right: -14px;
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
font-size: 14px;
background-color: red;
border-radius: 50%;
}
#nav .nav-right .nav-right-top .socials{
display: flex;
}
#nav .nav-right .nav-right-top .socials > a{
margin-right: 8px;
}
#nav .nav-right .nav-right-top .socials img{
width: 24px;
height: 24px;
transition: opacity 0.3s;
}
#nav .nav-right .nav-right-top .socials img:hover{
opacity: 0.7;
}
#nav .nav-right .nav-right-menu .menu{
display: flex;
gap: 20px;
align-items: center;
justify-content: flex-end;
text-wrap: nowrap;
}
#nav .nav-right .nav-right-menu .menu > li > a{
position: relative;
display: block;
color: #d4d4d4;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
transition: all 0.3s;
z-index: 1001;
}
#nav .nav-right .nav-right-menu .menu > li > a:hover{
color: #fff;
}
#nav .nav-right .nav-right-menu .menu .soumission > a{
position: relative;
color: var(--primary-color);
padding: 15px 30px;
background-color: #fff;
border-radius: 10px;
transition: all 0.3s;
z-index: 1001;
}
#nav .nav-right .nav-right-menu .menu .soumission > a:hover{
color: #fff;
background-color: var(--secondary-color);
}
#nav .nav-right .nav-right-top .menu-icon{
all: unset;
display: none;
width: 48px;
height: 48px;
background: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-menu-white.svg) no-repeat center center/contain;
cursor: pointer;
transition: all 0.3s;
}
#nav .nav-right .nav-right-top .menu-icon:hover{
opacity: 0.7;
} #nav .sub-menu{position: absolute; left: 0; display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-top: 45px solid var(--primary-color);
background-color: var(--secondary-color); top: 100%; opacity: 0; visibility: hidden;
transition: all 0.3s;
}
#nav .sub-menu a{display: block; padding: 15px; font-size: 16px; color: #d4d4d4; font-weight: 400; text-transform: uppercase;
transition: all 0.3s;
}
#nav .sub-menu a:hover{color: #fff; padding-left: 20px; background-color: #000;}
#nav .menu-item-has-children > a:after{
display: block; content: '';
width: 10px;
height: 1px;
background-color: #d4d4d4;
margin: auto;
transition: all 0.3s;
}
#nav .menu-item-has-children > a:hover:after{
background-color: #fff;
}
#nav .menu-item-has-children:hover .sub-menu{top: calc(100% - 45px); opacity: 1; visibility: visible;}
#nav .nav-right .nav-right-menu .menu > li.menu-item-has-children:hover > a{color: #fff;}
#nav .top-icon{
width: 26px;
height: 26px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transition: all 0.3s;
}
#nav .nav-right .nav-right-top .lang-switch{
color: var(--primary-color);
font-weight: 600;
padding: 8px;
background-color: #fff;
margin-left: 50px;
transition: all 0.3s;
}
#nav .nav-right .nav-right-top .lang-switch:hover{
color: #fff;
background-color: var(--secondary-color);
} #nav.scrolled .nav-left{
padding: 15px 80px 15px 100px;
}
#nav.scrolled .nav-left .logo .logo-subtitle{
max-height: 0;
opacity: 0;
visibility: hidden;
margin-top: 0;
}
#nav.scrolled .nav-right{
padding: 15px 100px 15px 30px;
}
#nav.scrolled .nav-right .nav-right-top{
margin-bottom: 10px;
}
#nav.scrolled .sub-menu{
border-top: 30px solid var(--primary-color);
}
#nav.scrolled .menu-item-has-children:hover .sub-menu{
top: calc(100% - 30px);
opacity: 1;
visibility: visible;
} #mobile-menu{
position: fixed;
right: -50%;
top: 0;
background-color: #ededed;
height: 100%;
width: 50%;
padding: 30px;
box-sizing: border-box;
transition: all 0.6s;
z-index: 1200;
}
#mobile-menu:after{
display: block; content: '';
}
#mobile-menu.show{
right: 0;
}
#mobile-menu .menu > li > a{
display: inline-block;
font-size: 24px;
color: #333;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 15px;
transition: all 0.4s;
}
#mobile-menu .menu > li > a:hover{
color: var(--primary-color);
}
#mobile-menu .menu > li > a:after{
display: block; content: '';
border-bottom: 2px solid var(--primary-color);
padding-top: 5px;
transform: scaleX(0);
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
transform-origin: 0% 50%;
}
#mobile-menu .menu > li > a:hover:after{
transform: scaleX(0.3);
}
#mobile-menu .menu .sub-menu{
display: flex;
flex-wrap: wrap;
}
#mobile-menu .menu .sub-menu > li{
padding-right: 15px;
}
#mobile-menu .extra{
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 15px;
}
#mobile-menu .extra a{
color: #333; 
opacity: 1;
font-weight: 400;
transition: all 0.4s;
}
#mobile-menu .extra a:hover{
color: var(--primary-color);
}
#mobile-menu .extra .lang-switch{
width: max-content;
color: #fff;
font-weight: 600;
padding: 8px;
background-color: var(--primary-color);
transition: all 0.3s;
}
#mobile-menu .extra .lang-switch:hover{
color: #fff;
background-color: #000;
}
#mobile-menu .menu-close{
all: unset;
position: absolute;
top: 30px;
right: 30px;
width: 24px;
height: 24px;
background: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-close.svg) no-repeat center center/contain;
transition: opacity 0.3s;
cursor: pointer;
}
#mobile-menu .menu-close:hover{
opacity: 0.7;
}    #accueil-top{
position: relative;
height: calc(100vh - 166px);
margin-top: 166px;
}
#accueil-top .slider,
#accueil-top .slider .wrap,
.slider .slick-list,
.slider .slick-track{
height: 100%;
}
#accueil-top .slider .slogan{
position: absolute;
bottom: 20%;
left: 0;
right: 0;
width: 730px;
background-color: #00000099;
padding: 20px 20px 40px;
border-radius: 30px;
text-align: center;
margin: auto;
z-index: 5;
}
#accueil-top .slider .slogan .slider-titre{
font-size: 30px;
color: #fff;
line-height: 1.6em;
text-transform: uppercase;
}
#accueil-top .slider .slogan a{
position: absolute;
left: 0;
right: 0;
bottom: -35px;
color: #000;
margin: auto;
}
#accueil-top .slider .slogan a svg > path{
fill: #000;
}
#accueil-top .slider .slogan a:hover,
#accueil-top .slider .slogan a:hover svg > path{
color: #fff;
fill: #fff;
}
#accueil-top .arrows .arrow{
all: unset;
width: 32px;
height: 32px;
position: absolute;
bottom: 50px;
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-arrow-circle-white.svg);
background-size: contain;
opacity: 0.5;
cursor: pointer;
transition: all 0.3s;
}
#accueil-top .arrows .arrow:hover{
opacity: 1;
}
#accueil-top .arrows .arrow.arrow-prev{
left: 0;
}
#accueil-top .arrows .arrow.arrow-next{
right: 0;
transform: scaleX(-1);
}   #accueil-content .main-home-section{
margin-bottom: 100px;
} #accueil-content .about-section{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/bg-shape-apropos-accueil.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
padding: 100px 0;
}
#accueil-content .about-section .flex-section{
display: flex; 
align-items: center;
gap: 50px;}
#accueil-content .about-section .flex-section > *{
width: 100%;
} #accueil-content .products-section{
background-image: linear-gradient(to top, #ededed 40%, transparent 0);
padding-bottom: 100px;
}
#accueil-content .products-section .products{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 15px; 
margin: 50px 0;
}
#accueil-content .products-section .products .product-single{
position: relative; 
padding-bottom: 56%; 
background-repeat: no-repeat; 
background-size: cover;
}
#accueil-content .products-section .products .product-single:after{
display: block; content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
transition: all 0.3s;
}
#accueil-content .products-section .products .product-single:hover:after{
opacity: 0.4;
}
#accueil-content .products-section .products .product-single .banner{
position: absolute;
bottom: 20px;
width: 100%;
color: #fff;
text-transform: uppercase;
text-align: center;
background-color: var(--primary-color);
padding: 10px;
box-sizing: border-box;
z-index: 10;
transition: all 0.3s;
}
#accueil-content .products-section .products .product-single:hover .banner{
background-color: var(--secondary-color);
}
#accueil-content .products-section .products .product-single .banner h3:after{
display: block; content: '';
width: 30px;
height: 1px;
background-color: #fff;
margin: 5px auto 0;
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#accueil-content .products-section .products .product-single:hover .banner h3:after{
width: 25%;
margin: 5px auto 8px;
}
#accueil-content .products-section .products .product-single .banner .arrow-icon{
width: 18px;
height: 0;
background: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-arrow-circle-white.svg) no-repeat center center/contain;
margin: auto;
transform: scaleX(-1);
transition: all 0.3s;
}
#accueil-content .products-section .products .product-single:hover .banner .arrow-icon{
height: 18px;
} #accueil-content .services-banner{
position: relative;
color: #fff;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
padding: 80px 0;
}
#accueil-content .services-banner:after{
display: block; content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-color);
opacity: 0.7;
}
#accueil-content .services-banner .wrap{
z-index: 10;
}
#accueil-content .services-banner .text-section{
width: 75%;
margin: auto;
}
#accueil-content .services-banner .services-list{
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 80%;
margin: 25px auto 50px;
}
#accueil-content .services-banner .services-list > li{
display: flex;
align-items: center;
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
padding: 20px 30px;
}
#accueil-content .services-banner .services-list > li:before{
display: block; content: '';
width: 10px;
height: 10px;
background: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-triangle-white.png) no-repeat center center/contain;
margin-right: 15px;
}
#accueil-content .services-banner .btn{
margin: auto;
} #accueil-content .projects-section{
background: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/bg-shape-portfolio-accueil.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
padding: 100px 0;
}
#accueil-content .projects-section .projects{
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 180px 180px;
gap: 8px;
margin: 65px 0 50px;
}
#accueil-content .projects-section .projects .project-single{
position: relative;
display: flex;
align-items: center;
color: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding-right: 15px;
overflow: hidden;
}
#accueil-content .projects-section .projects .project-single:after{
display: block; content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
transition: all 0.3s;
}
#accueil-content .projects-section .projects .project-single .arrow-border{
position: relative;
left: -40px;
height: 100%;
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-arrow-circle-white.svg);
background-repeat: no-repeat;
background-size: 28px 28px;
background-position: center center;
background-color: var(--secondary-color);
padding: 0 20px;
transform: scaleX(-1);
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 10;
}
#accueil-content .projects-section .projects .project-single .project-title{
position: relative;
left: -15px;
opacity: 0;
visibility: hidden;
margin-left: 15px;
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 10;
}
#accueil-content .projects-section .projects .project-single .project-title h3{
font-size: 30px;
text-transform: uppercase;
margin-top: 8px;
}
#accueil-content .projects-section .projects .project-single:first-child{
grid-column: span 3;
grid-row: span 2;
}
#accueil-content .projects-section .projects .project-single:nth-child(2){
grid-column: span 2;
}
#accueil-content .projects-section .projects .project-single:nth-child(3){
grid-column: span 3;
}
#accueil-content .projects-section .projects .project-single:nth-child(4){
grid-column: span 2;
grid-row: span 2;
}
#accueil-content .projects-section .projects .project-single:nth-child(5){
grid-column: span 3;
}
#accueil-content .projects-section .projects .project-single:last-child{
grid-column: span 2;
}
#accueil-content .projects-section .projects .project-single:nth-child(2) .project-title h3,
#accueil-content .projects-section .projects .project-single:nth-child(4) .project-title h3,
#accueil-content .projects-section .projects .project-single:nth-child(6) .project-title h3{
font-size: 22px;
}
#accueil-content .projects-section .btn-full-width{
flex-direction: row-reverse;
}
@media (hover: hover) {
#accueil-content .projects-section .projects .project-single:hover:after{
opacity: 0.4;
}
#accueil-content .projects-section .projects .project-single:hover .arrow-border{
left: 0;
}
#accueil-content .projects-section .projects .project-single:hover .project-title{
left: 0;
opacity: 1;
visibility: visible;
transition-delay: 0.2s;
}
} #accueil-content .blog-section{
padding-bottom: 100px;
}
#accueil-content .blog-section .blog-container{
display: flex;
gap: 15px;
}
#accueil-content .blog-section .blog-container .blog-box{
width: 33%;
}
#accueil-content .blog-section .blog-container .blog-box img{
aspect-ratio: 1.34/1;
object-fit: cover;
margin-bottom: 20px;
}
#accueil-content .blog-section .blog-container .blog-box .blog-text h2{
color: var(--secondary-color);
margin-bottom: 8px;
}
#accueil-content .blog-section .blog-container .blog-box .blog-text p{
line-height: 1.6em;
}
#accueil-content .blog-section .blog-container .blog-box .blog-text .blog-date{
font-size: 16px;
color: var(--primary-color);
margin-bottom: 5px;
}
#accueil-content .blog-section .blog-container .blog-box .btn.btn-colour{
font-size: 0.8em;
padding: 15px 20px;
margin-top: 20px;
} #accueil-content .contact-section .form-section{
position: relative;
z-index: 50;
}
#accueil-content .contact-section .form-section:after{
display: block; content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 90%;
height: 10px;
box-shadow: 0 0 30px #000;
margin: auto;
z-index: -1;
}
#accueil-content .contact-section .form-section > *{
position: relative;
width: 100%;
}
#accueil-content .contact-section .form-section img{
width: 100%;
height: 100%;
object-fit: cover;
}
#accueil-content .contact-section .form-section form{
background-color: #ededed;
padding: 40px;
box-sizing: border-box;
}
#accueil-content .contact-section .form-section form .form-fields{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
#accueil-content .contact-section .form-section form .form-fields input,
#accueil-content .contact-section .form-section form .form-fields textarea{
all: unset;
font-size: 16px;
background-color: #fff;
padding: 10px;
border: 1px solid #c4c4c4;
transition: all 0.1s linear;
}
#accueil-content .contact-section .form-section form .form-fields input:focus,
#accueil-content .contact-section .form-section form .form-fields textarea:focus{
box-shadow: inset -5px 0px 1px 0px var(--primary-color);
}
#accueil-content .contact-section .form-section form .form-fields input[type=email]{
grid-column: span 2;
}
#accueil-content .contact-section .form-section form .form-fields textarea{
height: 120px;
grid-column: span 2;
}
#accueil-content .contact-section .form-section form input[type=submit]{
border: none;
margin-top: 30px;
cursor: pointer;
}
#accueil-content .contact-section .form-section .form-msg{ color: #fff;
padding: 20px;
box-sizing: border-box;
margin: 15px 0;
}
#accueil-content .contact-section iframe{
display: block;
width: 100%;
height: 600px;
margin-top: -100px;
}    #page-top{
position: relative;
height: 400px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 166px 0 100px;
box-shadow: 0 0 10px 10px #00000033;
}
#page-top h1{
position: absolute;
display: inline-block;
left: 8%;
bottom: 60px;
color: #fff;
text-transform: uppercase;
background-color: #00000099;
padding: 20px 50px;
border-radius: 20px;
}
.page-content{
min-height: 40vh;
}
.page-content h2{
color: var(--secondary-color);
line-height: 1.3em;
}
.page-content h2.title-underline{
margin-bottom: 50px;
}
.page-content h2.title-underline:after{
display: block; content: '';
width: 50px;
border-bottom: 1px solid var(--secondary-color);
margin-top: 15px;
}
.page-content h2.title-underline.text-center:after{
margin: 15px auto;
}
.page-content .text-section h2{
text-transform: initial;
}
.page-content .flex-overflow-section.wrap{
position: unset;
}
.page-content .flex-overflow-section{
display: flex;
align-items: center;
margin: 15% auto;
}
.page-content .flex-overflow-section .text-section{
max-width: 50%;
padding-right: 60px;
box-sizing: border-box;
}
.page-content .flex-overflow-section img{
position: absolute;
right: 0;
width: 50%;
max-height: 650px;
object-fit: cover;
aspect-ratio: 1.51/1;
}
.page-content .flex-section{
display: flex;
align-items: center;
gap: 60px;
}
.page-content .flex-section > *{
width: 50%;
}
.page-content .flex-section > .text-section{
width: 50%;
}
.page-content .flex-section > .text-section > p > a{
color: var(--primary-color);
}
.page-content .flex-section > .text-section > p > a:hover{
text-decoration: underline;
}
.page-content .flex-section > img, .page-content .flex-section .video{
width: 50%;
}
.page-content .half-bg-section{
position: relative;
padding: 100px 0;
margin-top: -100px;
}
.page-content .half-bg-section:after{
display: block; content: '';
position: absolute;
width: 650px;
max-width: 36%;
height: 100%;
top: 0;
right: 0;
background-color: #ecf7f1;
z-index: -1;
}
.page-content .video{
position: relative;
}
.page-content .video:before{
display: block; content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
background-color: #000;
opacity: 0.3;
transition: all 0.3s;
z-index: 1;
}
.page-content .video:hover:before{
opacity: 0.4;
}
.page-content .video:after{
display: flex; content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
font-size: 2.2em;
color: #fff;
background: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-play.svg) no-repeat center center/36px;
background-color: var(--primary-color);
border-radius: 50%;
padding: 12px;
margin: auto;
transition: all 0.6s;
z-index: 2;
}
.page-content .video:hover:after{
filter: brightness(1.3);
}
.page-content.general-padding{
padding: 220px 0 50px;
}
.page-content .custom-note{
margin-bottom: 30px;
} .page-content .entry-title{
font-size: 36px;
color: var(--secondary-color);
line-height: 1.3em;
margin-bottom: 50px;
}
.page-content .entry-title:after{
display: block; content: '';
width: 50px;
border-bottom: 1px solid var(--primary-color);
padding-top: 10px;
}    #apropos .top-section{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/bg-shape-apropos-accueil.png);
background-repeat: no-repeat;
background-position: center 90%;
background-size: 100%;
padding-bottom: 100px;
}
#apropos .top-section img{
width: 90%;
margin: 60px auto 0;
}
#apropos .advantages{
background-color: #ededed;
padding: 60px 0 100px;
}
#apropos .advantages .grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
#apropos .advantages .grid .grid-box{
display: flex;
align-items: center;
}
#apropos .advantages .grid .grid-box img{
width: 100px;
filter: var(--filter-secondary-color);
}
#apropos .advantages .grid .grid-box .grid-box-text{
margin-left: 30px;
}
#apropos .advantages .grid .grid-box .grid-box-text h3{
margin-bottom: 15px;
}    #services .flex-overflow-section{
margin: 15% auto;
}
#services .flex-overflow-section:not(:last-child){
margin-bottom: 20%;
}
#services .flex-overflow-section:nth-child(even){
flex-direction: row-reverse;
}
#services .flex-overflow-section:nth-child(even) .text-section{
padding-right: 0;
padding-left: 60px;
}
#services .flex-overflow-section:nth-child(even) img{
right: unset;
left: 0;
} #services-single .slider-section{
position: relative;
padding: 100px 0;
}
#services-single .slider-section:after{
display: block; content: '';
position: absolute;
width: 920px;
max-width: 50%;
height: 100%;
top: 0;
left: 0;
background-color: #ededed;
z-index: -1;
}
#services-single .slider-section .slide-content{
display: flex;
align-items: center;
min-height: 500px;
}
#services-single .slider-section .slide-content .slide-images{
height: 500px;
}
#services-single .slider-section .slide-content .slide-images img{
object-fit: cover;
}
#services-single .slider-section .slide-content .slide-container{
position: relative;
width: 55%;
}
#services-single .slider-section .slide-content .slide-container .arrow{
position: absolute;
top: 0; bottom: 0;
width: 32px;
height: 32px;
padding: 8px;
border-radius: 50%;
margin: auto;
}
#services-single .slider-section .slide-content .slide-container .arrow > button{
all: unset;
display: block;
width: 32px;
height: 32px;
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-arrow-circle.svg);
background-size: contain;
opacity: 0.5;
margin: auto;
cursor: pointer;
transition: all 0.3s;
}
#services-single .slider-section .slide-content .slide-container .arrow:hover > button{
opacity: 1;
}
#services-single .slider-section .slide-content .slide-container .arrow.arrow-prev{
left: -24px;
background-color: #ededed;
}
#services-single .slider-section .slide-content .slide-container .arrow.arrow-next{
right: -24px;
background-color: #fff;
transform: scaleX(-1);
} .swiper-button-next:after, .swiper-button-prev:after{
content: none;
}
#services-single .slider-section .slide-content .text-section{
width: 45%;
padding-left: 60px;
}
#services-single .slider-section .slide-content .text-section .subtitle{
color: #333;
font-size: 20px;
}
#services-single .slider-section .slide-content .text-section .subtitle:after{
display: block; content: '';
width: 50px;
border-bottom: 1px solid #333;
margin: 5px 0 20px;
}
#services-single .slider-section .slide-content .text-section .slide-text:not(:first-of-type){
display: none;
} #services-single .bottom-section{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/services/services-bottom-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-color: #ededed;
background-blend-mode: screen;
padding: 100px 0;
}
#services-single .bottom-section .flex{
gap: 80px;
}
#services-single .bottom-section .flex .text-section{
width: 50%;
}
#services-single .bottom-section .text-section h2{
font-size: 30px;
margin-bottom: 20px;
}    #diy .diy-steps{
display: flex;
}
#diy .diy-steps .step-box{
position: relative;
width: 100%;
padding: 50px 0 50px 50px;
}
#diy .diy-steps .step-box:nth-child(1){
background-color: #ededed;
}
#diy .diy-steps .step-box:nth-child(2){
background-color: #cfcfcf;
}
#diy .diy-steps .step-box:nth-child(3){
color: #fff;
background-color: var(--primary-color);
}
#diy .diy-steps .step-box:not(:last-child):after{
display: block; content: '';
position: absolute;
top: 0;
right: -75px;
width: 150px;
height: 100%;
background-color: inherit;
clip-path: polygon(50% 0, 100% 50%, 50% 100%);
z-index: 10;
}
#diy .diy-steps .step-box .step-content h3{
font-size: 24px;
margin-bottom: 15px;
}
#diy .diy-steps .step-box .step-content p > a{
color: var(--primary-color);
font-weight: 600;
transition: all 0.3s;
}
#diy .diy-steps .step-box .step-content p > a:hover{
color: var(--secondary-color);
text-decoration: underline;
}
#diy .diy-steps .step-box:nth-child(2) .step-content{
padding-left: 50px;
}
#diy .diy-steps .step-box:nth-child(3) .step-content{
padding: 0 50px;
}
#diy article{
padding: 100px 0;
}
#diy article img{
display: inline;
max-width: 50%;
}
#diy article h2{
font-size: 36px;
}
#diy article h3{
font-size: 24px;
}
#diy article h2, #diy article h3, #diy article h4{
color: var(--secondary-color);
margin-bottom: 15px;
}
#diy article h2:not(:first-of-type), #diy article h3:not(:first-of-type){
margin-top: 30px;
}
#diy article p{
line-height: 2em;
margin-bottom: 15px;
}
#diy .videos-section{
margin-bottom: 80px;
}
#diy .videos-section h2{
margin-bottom: 25px;
}
#diy .videos-section .videos-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
#diy .videos-section .videos-grid  h3{
margin: 15px 0 25px;
}
#diy .videos-section .videos-grid .video{
display: block;
position: relative;
height: 0;
padding-bottom: 56.25%;
}
#diy .videos-section .videos-grid .video img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
}    #realisations .projects-section{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
gap: 15px;
margin: 80px auto;
}
#realisations .projects-section .project-single{
position: relative;
display: flex;
align-items: center;
color: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding-right: 15px;
overflow: hidden;
}
#realisations .projects-section .project-single:after{
display: block; content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
transition: all 0.3s;
}
#realisations .projects-section .project-single .arrow-border{
position: relative;
left: -40px;
height: 100%;
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-arrow-circle-white.svg);
background-repeat: no-repeat;
background-size: 28px 28px;
background-position: center center;
background-color: var(--secondary-color);
padding: 0 20px;
transform: scaleX(-1);
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 10;
}
#realisations .projects-section .project-single .project-title{
position: relative;
left: -15px;
opacity: 0;
visibility: hidden;
margin-left: 15px;
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 10;
}
#realisations .projects-section .project-single .project-title h3{
font-size: 30px;
text-transform: uppercase;
margin-top: 8px;
}
@media (hover: hover) {
#realisations .projects-section .project-single:hover:after{
opacity: 0.4;
}
#realisations .projects-section .project-single:hover .arrow-border{
left: 0;
}
#realisations .projects-section .project-single:hover .project-title{
left: 0;
opacity: 1;
visibility: visible;
transition-delay: 0.2s;
}
} #realisations-single .text-section{
background-color: #ededed;
padding: 80px 0;
margin-top: -100px;
}
#realisations-single .project-gallery{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin: 80px auto;
}
#realisations-single .project-gallery .project-img{
position: relative;
display: block;
padding-bottom: 100%;
height: 0;
overflow: hidden;
}
#realisations-single .project-gallery .project-img:after{
display: block; content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-color);
opacity: 0;
transform: scale(0.7);
filter: blur(20px);
transition: all 0.3s;
}
#realisations-single .project-gallery .project-img:hover:after{
opacity: 0.7;
transform: scale(1);
filter: blur(0);
}
#realisations-single .project-gallery .project-img > img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s;
}
#realisations-single .project-gallery .project-img:hover > img{
transform: scale(1.1);
}    #blogue .blog-container{
display: flex;
margin-bottom: 100px;
}
#blogue .blog-container .main-content{
width: 70%;
margin-right: 100px;
}
#blogue .blog-container .main-content article:not(:last-child){
margin-bottom: 75px;
}
#blogue:not(.single) .blog-container .main-content article img{
max-width: 80%;
aspect-ratio: 1.34/1;
object-fit: cover;
}
#blogue .blog-container .main-content article .entry-title{
margin-top: 30px;
margin-bottom: 20px;
}
#blogue .blog-container .main-content article h2{
font-size: 30px;
margin: 25px 0 8px;
}
#blogue .blog-container .main-content article .entry-meta{
font-size: 16px;
color: var(--primary-color);
margin-bottom: 10px;
}
#blogue.single .blog-container .main-content article .entry-meta{
margin-bottom: 30px;
}
#blogue .blog-container .main-content article > p{
line-height: 2em;
}
#blogue .blog-container .main-content article > p:not(:last-child){
margin-bottom: 20px;
}
#blogue .blog-container .main-content article .btn.btn-colour{
font-size: 0.8em;
padding: 15px 20px;
margin-top: 20px;
}
#blogue .blog-container .main-content .nav-links{
display: flex;
justify-content: center;
align-items: center;
width: max-content;
text-align: center;
border: 1px solid #9e9e9e;
margin: 30px auto 0;
}
#blogue .blog-container .main-content .nav-links > *{
width: 36px;
height: 36px;
line-height: 36px;
color: #000;
background-color: #ededed;
transition: all 0.3s;
}
#blogue .blog-container .main-content .nav-links > *:not(span):hover{
background-color: #d7d7d7;
}
#blogue .blog-container .main-content .nav-links > *:not(:last-child){
border-right: 1px solid #9e9e9e;
}
#blogue .blog-container .main-content .nav-links > .current{
color: #fff;
background-color: var(--secondary-color);
border-right: 1px solid var(--secondary-color);
}
#blogue .blog-container .sidebar{
position: sticky;
top: 180px;
width: 30%;
height: max-content;
}
#blogue .blog-container .sidebar .widget_block{
background-color: #ededed;
padding: 25px;
box-sizing: border-box;
margin-bottom: 30px;
}
#blogue .blog-container .sidebar .widget_block h2{
margin-bottom: 15px;
}
#blogue .blog-container .sidebar .widget_block ul{
border-left: 2px solid var(--primary-color);
}
#blogue .blog-container .sidebar .widget_block ul > li > a{
display: block;
color: var(--primary-color);
background-image: linear-gradient(to right,  var(--primary-color) 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
padding: 10px;
transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#blogue .blog-container .sidebar .widget_block ul > li > a:hover{
color: #fff;
background-position: left bottom;
padding-left: 15px;
}
#blogue .blog-container .sidebar .widget_block ul > li.current-page > a{
color: #fff;
background-color: var(--primary-color);
padding: 10px 10px 10px 15px;
}    #contact-us{
position: relative;
}
#contact-us:before{
display: block; content: '';
position: absolute;
bottom: -105px;
right: 0;
width: 100%;
height: 100%;
background: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/bg-shape-portfolio-accueil.png);
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(180deg);
}
#contact-us .flex-section{
align-items: flex-start;
padding-bottom: 100px;
}
#contact-us .coords-section .coord-item{
display: flex;
color: var(--secondary-color);
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
#contact-us .coords-section .coord-item .coord-icon{
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
filter: var(--filter-secondary-color);
margin-right: 15px;
}
#contact-us .coords-section .coord-item.phone .coord-icon{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-phone-solid.svg);
}
#contact-us .coords-section .coord-item.email .coord-icon{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-email-solid.svg);
}
#contact-us .coords-section .coord-item.address .coord-icon{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-map-solid.svg);
}
#contact-us .coords-section .coord-item.facebook .coord-icon{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-facebook-dark.svg);
}
#contact-us .coords-section iframe{
display: block;
width: 100%;
margin-top: 50px;
}
#contact-us .form-section form{
margin-top: 30px;
}
#contact-us .form-section form .form-fields{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
#contact-us .form-section form .form-fields input,
#contact-us .form-section form .form-fields textarea{
all: unset;
font-size: 16px;
background-color: #fff;
padding: 10px;
border: 1px solid var(--secondary-color);
transition: all 0.1s linear;
}
#contact-us .form-section form .form-fields input:focus,
#contact-us .form-section form .form-fields textarea:focus{
box-shadow: inset -5px 0px 1px 0px var(--primary-color);
}
#contact-us .form-section form .form-fields input[type=email]{
grid-column: span 2;
}
#contact-us .form-section form .form-fields textarea{
height: 120px;
grid-column: span 2;
}
#contact-us .form-section form input[type=submit]{
border: none;
margin-top: 30px;
cursor: pointer;
}    #soumission form{
width: 80%;
margin: 100px auto;
}
#soumission form .field-section > *:not(:first-child),
#soumission form .field-section > *:not(:last-child){
margin-bottom: 35px;
}
#soumission form .radio-container{
display: flex;
justify-content: center;
gap: 30px;
}
#soumission form .radio-container .radio-btn > input{
appearance: none;
width: 16px;
height: 16px;
border: 2px solid var(--primary-color);
border-radius: 50%;
}
#soumission form .radio-container .radio-btn > input:checked:before{
display: block; content: '';
width: 100%;
height: 100%;
background-color: var(--primary-color);
border-radius: 50%;
transform: scale(0.5);
}
#soumission form .form-fields{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
#soumission form input[type=text],
#soumission form input[type=email],
#soumission form textarea{
all: unset;
width: 100%;
font-size: 16px;
line-height: 1.5em;
background-color: #fff;
padding: 10px;
border: 1px solid var(--secondary-color);
box-sizing: border-box;
transition: all 0.1s linear;
}
#soumission form .form-fields input:focus,
#soumission form .form-fields textarea:focus{
box-shadow: inset -5px 0px 1px 0px var(--primary-color);
}
#soumission form textarea{
height: 200px;
}
#soumission form .dropdown-container{
display: flex;
justify-content: center;
gap: 15px;
}
#soumission form .dropdown-container select{
font-family: 'Raleway', sans-serif;
flex: 1;
max-width: 33%;
font-size: 16px;
background-color: #fff;
padding: 10px;
border: 1px solid var(--secondary-color);
}
#soumission form .dropdown-container .dropdown-box{
display: flex;
flex-direction: column;
flex: 1;
max-width: 33%;
}
#soumission form .dropdown-container .dropdown-box select{
max-width: 100%;
max-height: 43px;
}
#soumission form .dropdown-container .dropdown-box .quantity input[type=number]{
font-family: 'Raleway';
font-size: 14px;
max-width: 100px;
border: 1px solid var(--secondary-color);
padding: 8px;
margin-top: 10px;
}
#soumission form .check-container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
#soumission form .check-container .checkbox{
display: flex;
align-items: center;
}
#soumission form .check-container .checkbox > input{
appearance: none;
position: relative;
width: 16px;
height: 16px;
border: 2px solid var(--primary-color);
margin-right: 10px;
}
#soumission form .check-container .checkbox > input:checked{
background-color: var(--primary-color);
}
#soumission form .check-container .checkbox > input:before{
display: none; content: '';
height: 100%;
background-color: #fff;
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
#soumission form .check-container .checkbox > input:checked:before{
display: block;
}
#soumission form .fence-styles h3{
margin-top: 30px;
margin-bottom: 20px;
}
#soumission form .fence-styles .check-container{
margin-bottom: 30px;
}
#soumission form .fence-styles .radio-box{
display: flex;
flex-direction: column;
width: 25%;
}
#soumission form .fence-styles .radio-box label{
font-size: 16px;
padding: 15px 8px;
cursor: pointer;
}
#soumission form .fence-styles .radio-box input{
appearance: none;
position: relative;
aspect-ratio: 1/1;
border: 5px solid #fff;
background-size: cover;
cursor: pointer;
transition: all 0.15s;
}
#soumission form .fence-styles .radio-box input:hover{
opacity: 0.8;
}
#soumission form .fence-styles .radio-box input:checked{
border: 5px solid var(--primary-color);
}
#soumission form .fence-styles .radio-box input:checked:before{
display: block; content: '';
position: absolute;
bottom: 5px;
right: 5px;
width: 24px;
height: 24px;
background-color: #fff;
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
z-index: 2;
}
#soumission form .fence-styles .radio-box input:checked:after{
display: block; content: '';
position: absolute;
bottom: 0;
right: 0;
width: 36px;
height: 36px;
background-color: var(--primary-color);
border-top-left-radius: 10px;
}
#soumission form .fence-styles .radio-box.small-box{
flex-direction: row;
width: auto;
}
#soumission form .fence-styles .radio-box.small-box input{
min-width: 48px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#soumission form .fence-styles .radio-box.small-box input:checked:before{
width: 18px;
height: 18px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#soumission form .fence-styles .radio-box.small-box input:checked:after{
width: 24px;
height: 24px;
left: 0;
top: 0;
border-top-left-radius: 0;
margin: auto;
}
#soumission form .file-section{
display: flex;
align-items: flex-start;
gap: 30px;
}
#soumission form .file-section .file-input{
width: 60%;
}
#soumission form .file-section .file{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border: 1px solid var(--secondary-color);
padding: 10px 15px;
box-sizing: border-box;
}
#soumission form .file-section .file input[type="file"]{
width: 0.1px;
height: 0.1px;
opacity: 0;
position: absolute;
}
#soumission form .file-section .file p{
color: #919191;
font-size: 16px;
}
#soumission form .file-section .file label{
display: flex;
align-items: center;
height: 30px;
font-size: 16px;
color: #000;
background-color: #fff;
border: 1px solid var(--primary-color);
padding: 5px 15px;
cursor: pointer;
transition: all 0.3s;
}
#soumission form .file-section .file label:hover{
color: #fff;
background-color: var(--primary-color);
}
#soumission form .file-section .file-example{
width: 40%;
}
#soumission form .file-section .file-example h3{
margin-bottom: 15px;
}
#soumission form .file-section .file-message{
font-size: .75rem;
font-weight: 600;
color: red;
margin: 1rem 0;
}
#soumission form .file-section .file-message span{
color: #000;
}
#soumission form input[type=submit]{
border: none;
margin-top: 30px;
cursor: pointer;
margin: 80px auto 0;
}
#soumission form .box-line-title:not(:first-child){
margin-top: 50px;
}
#soumission .remove-fence-section h3{
margin: 35px auto;
}
#soumission form .field-hidden{
display: none;
}
#after-submit{
margin-bottom: 100px;
}    #products .products-container{
display: flex;
margin-bottom: 100px;
}
#products .products-container .main-content{
width: 70%;
}
#products .products-container .main-content .nav-links{
display: flex;
justify-content: center;
align-items: center;
width: max-content;
text-align: center;
border: 1px solid #9e9e9e;
margin: 30px auto 0;
}
#products .products-container .main-content .nav-links > *{
width: 36px;
height: 36px;
line-height: 36px;
color: #000;
background-color: #ededed;
transition: all 0.3s;
}
#products .products-container .main-content .nav-links > *:not(span):hover{
background-color: #d7d7d7;
}
#products .products-container .main-content .nav-links > *:not(:last-child){
border-right: 1px solid #9e9e9e;
}
#products .products-container .main-content .nav-links > .current{
color: #fff;
background-color: var(--secondary-color);
border-right: 1px solid var(--secondary-color);
}
#products .products-container .product-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-right: 30px;
}
#products .products-container .product-grid .product{
text-align: center;
border: 1px solid #d4d4d4;
padding: 20px;
}
#products .products-container .product-grid .product .product-info{
color: #000;
}
#products .products-container .product-grid .product .product-info .product-img{
overflow: hidden;
}
#products .products-container .product-grid .product .product-info .product-img img{
transition: all 0.3s;
}
#products .products-container .product-grid .product:hover .product-info .product-img img{
transform: scale(1.1);
}
#products .products-container .product-grid .product .product-info .product-name{
font-size: 18px;
font-weight: 400;
margin: 15px 0;
}
#products .products-container .product-grid .product .product-info .product-price{
font-size: 30px;
font-weight: 600;
margin-bottom: 30px;
}
#products .products-container .product-grid .product .product-info .product-price del{
font-size: 0.6em;
text-decoration: line-through;
opacity: 0.5;
}
#products .products-container .product-grid .product .btn{
font-size: 16px;
padding: 15px;
margin: auto;
}
#products .products-container .product-grid .product .add_to_cart_inline{
border: none !important;
}
#products .products-container .product-grid .product .add_to_cart_inline bdi{
display: none;
}
#products .products-container .product-grid .product .add_to_cart_inline .add_to_cart_button{
color: #fff;
background-color: var(--primary-color);
transition: all 0.3s;
}
#products .products-container .product-grid .product .add_to_cart_inline .add_to_cart_button:hover{
background-color: var(--secondary-color);
}
#products .products-container .product-grid .product .add_to_cart_inline a.added_to_cart{
display: block;
color: var(--primary-color);
}
#products .products-container .product-grid .product .add_to_cart_inline a.added_to_cart:hover{
text-decoration: underline;
}
#products .products-container .sidebar{
position: sticky;
top: 180px;
width: 30%;
height: max-content;
}
#products .products-container .sidebar > .aws-container{
margin-bottom: 20px;
}
#products .products-container .sidebar .cat-section{
background-color: #ededed;
padding: 25px;
box-sizing: border-box;
}
#products .products-container .sidebar .cat-section .prod-categories{
border-left: 2px solid var(--primary-color);
}
#products .products-container .sidebar .cat-section .prod-categories > li > a{
display: block;
color: var(--primary-color);
background-image: linear-gradient(to right,  var(--primary-color) 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
padding: 10px;
transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#products .products-container .sidebar .cat-section .prod-categories > li > a:hover{
color: #fff;
background-position: left bottom;
padding-left: 15px;
}
#products .products-container .sidebar .cat-section .prod-categories > li.current-page > a{
color: #fff;
background-color: var(--primary-color);
padding: 10px 10px 10px 15px;
}
#products .products-container .sidebar .cat-section .show-categories{
all: unset;
position: relative;
display: none;
width: 100%;
font-weight: 600;
cursor: pointer;
padding: 10px;
box-sizing: border-box;
transition: all 0.3s;
}
#products .products-container .sidebar .cat-section .show-categories:hover{
background-color: #e6e6e6;
}
#products .products-container .sidebar .cat-section .show-categories:before{
display: block; content: '';
position: absolute;
right: 10px;
bottom: 8px;
width: 24px; height: 24px;
transform: rotate(-90deg);
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-arrow-circle.svg);
filter: var(--filter-secondary-color);
}
#products .products-container .sidebar .cat-section .show-categories.open:before{
transform: rotate(90deg);
} #product-single .content-area{
padding-top: 200px;
}
#product-single .woocommerce-product-gallery__wrapper a{
position: relative;
display: block;
overflow: hidden;
}
#product-single .woocommerce-product-gallery__wrapper a:after{
display: block; content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-color);
opacity: 0;
transform: scale(0.7);
filter: blur(20px);
transition: all 0.3s;
}
#product-single .woocommerce-product-gallery__wrapper a:hover:after{
opacity: 0.7;
transform: scale(1);
filter: blur(0);
}
#product-single .woocommerce-product-gallery__wrapper a img{
transition: all 0.3s;
}
#product-single .woocommerce-product-gallery__wrapper a:hover img{
transform: scale(1.1);
}
#product-single h1{
font-size: 30px;
color: var(--secondary-color);
line-height: 1.3em;
}
#product-single h2{
font-size: 24px;
color: var(--secondary-color);
line-height: 1.3em;
margin-bottom: 20px;
}
#product-single ul.products li.product h2.woocommerce-loop-product__title{
font-size: 20px;
margin-bottom: 0;
}
#product-single ul.products li.product .price{
font-size: 20px;
font-weight: 600;
color: #000;
margin: 0;
}    .woocommerce form .form-row select{
padding: 8px;
}
.woocommerce div.product form.cart .variations tbody{
display: flex;
margin-top: 30px;
}
.woocommerce div.product form.cart .variations tbody tr{
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
width: 50%;
}
.woocommerce div.product form.cart .variations .value{
width: 100%;
}
.woocommerce div.product form.cart .variations .value select{
font-family: 'Raleway', sans-serif;
font-size: 16px;
width: 95%;
padding: 8px;
border: 1px solid var(--secondary-color);
}
.woocommerce div.product form.cart .variations label{
font-weight: 300;
}
.woocommerce div.product form.cart .reset_variations{
color: var(--primary-color);
}
.woocommerce div.product form.cart .reset_variations:hover{
text-decoration: underline;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt{
background-color: unset;
background-image: linear-gradient(to top, var(--secondary-color) 50%, var(--primary-color) 50%);
background-size: 200% 200%;
padding: 20px 30px;
border-radius: 0;
transition: all 0.3s;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover{
background-position: bottom;
}
.woocommerce div.product div.images{
width: 35%;
}
.woocommerce div.product div.summary{
width: 62%;
}
.woocommerce div.product div.summary .woocommerce-product-details__short-description{
margin-bottom: 25px;
}
.woocommerce div.product div.summary .price del{
font-size: 0.8em;
font-weight: 500;
text-decoration: line-through;
}
.woocommerce div.product div.summary .product_meta a{
color: var(--primary-color);
}
.woocommerce div.product form.cart{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.woocommerce .quantity .qty{
appearance: none;
border: 1px solid #d4d4d4;
padding: 10px;
margin-right: 15px;
margin-bottom: 25px;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{
display: block;
font-size: 30px;
font-weight: 600;
color: #000;
margin: 10px 0 30px;
}
.woocommerce-Tabs-panel--description p{
line-height: 2em;
}
.woocommerce-Tabs-panel--description p:not(:last-child){
margin-bottom: 15px;
}
.woocommerce #review_form #respond textarea{
all: unset;
width: 100%;
font-size: 16px;
line-height: 1.5em;
background-color: #fff;
padding: 10px;
border: 1px solid var(--secondary-color);
box-sizing: border-box;
transition: all 0.1s linear;
}
.woocommerce #review_form #respond textarea:focus{
box-shadow: inset -5px 0px 1px 0px var(--primary-color);
}
.woocommerce .woocommerce-breadcrumb{
margin: 0 0 35px;
}
.wc-block-components-product-name{
color: var(--primary-color);
}
.wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon-link, .wc-block-components-button:not(.is-link){
display: flex;
align-items: center;
width: max-content;
color: #fff;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
border: none;
padding: 12px 20px;
background-image: linear-gradient(to top, var(--secondary-color) 50%, var(--primary-color) 50%); background-size: 200% 200%; background-position: top;
transition: all 0.3s;
}
.wc-block-components-checkout-place-order-button:hover, .wc-block-components-totals-coupon-link:hover{
color: #fff; background-position: bottom;
}
.woocommerce-order-details__title, .woocommerce-column__title{
margin-bottom: 15px;
}
.woocommerce-notice{
margin-bottom: 30px;
}
.woocommerce-table__product-name.product-name > a{
color: var(--primary-color);
}
.woocommerce-table__product-name.product-name > a:hover{
text-decoration: underline;
}
.wc-block-product-new{
margin-top: 30px;
}
.wc-block-grid__product-link{
color: var(--primary-color);
}
.wc-block-grid__product-link:hover .wc-block-grid__product-title{
text-decoration: underline;
}
.wc-block-components-product-price del{
text-decoration: line-through;
opacity: 0.5;
}
.wp-block-button__link{
background-color: var(--primary-color);
transition: all 0.3s;
}
.wp-block-button__link:hover{
background-color: var(--secondary-color);
}
.wc-block-cart .wc-block-cart__submit-container--sticky{
background-color: #fff !important;
}
.woocommerce .woocommerce-customer-details address{
box-sizing: border-box;
}
.woocommerce ul.order_details li{
margin-bottom: 15px;
}
.woocommerce ul.products li.product a.added_to_cart{
display: block;
color: var(--primary-color);
}
.woocommerce ul.products li.product a.added_to_cart:hover{
text-decoration: underline;
}
.woocommerce span.onsale{
background-color: red;
}
.woocommerce div.product p.stock{
font-size: 1.2em;
margin: 20px 0;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock{
color: green;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
border-radius: 0;
}
.woocommerce .comment-form-rating{
margin-top: 20px;
}
.woocommerce p.stars a{
color: var(--primary-color);
}
.woocommerce-page .entry-content > img{
margin-bottom: 20px;
}    #quote-banner{
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 80px 0;
}
#quote-banner:after{
display: block; content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-color);
opacity: 0.7;
}
#quote-banner .wrap{
z-index: 10;
}
#quote-banner .flex{
align-items: center;
gap: 65px;
}
#quote-banner .text-section{
color: #fff;
font-size: 20px;
font-weight: 400;
}
#quote-banner .btn{
flex-shrink: 0;
}  #default-page h1, #default-page h2, #default-page h3, #default-page h4{color: var(--secondary-color);}
#default-page h2{margin-bottom: 15px;}
#default-page h3, #default-page p{margin-bottom: 10px;}
#default-page p + h2, #default-page ul + h2{margin-top: 30px;}
#default-page ul{padding-left: 50px;}
#default-page ul li{list-style-type: initial; color: var(--font-color); line-height: 1.5em; margin-bottom: 10px;}    #footer{
color: #fff;
background-color: #2d3d35;
padding: 60px 0;
}
#footer .top{
display: flex;
justify-content: space-between;
gap: 65px;
}
#footer .top .left{
width: 25%;
}
#footer .top .left p{
font-size: 16px;
line-height: 1.5em;
margin: 30px 0;
}
#footer .top .left p.rbq{
font-family: 'Roboto', sans-serif;
}
#footer .top .left .logo img{
transition: opacity 0.3s;
}
#footer .top .left .socials{
display: flex;
}
#footer .top .left .socials > a{
margin-right: 8px;
}
#footer .top .left .socials img{
width: 32px;
height: 32px;
transition: opacity 0.3s;
}
#footer .top .left .logo:hover img, #footer .top .left .socials img:hover{
opacity: 0.7;
}
#footer .top .middle{
display: flex;
gap: 80px;
flex-shrink: 0;
}
#footer .top .middle .footer-menu a{
display: block;
max-width: 150px;
}
#footer .top .coords .coord-item{
display: flex;
align-items: center;
font-weight: 600;
margin-bottom: 15px;
}
#footer .top .coords a.phone .footer-icon{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-phone-white.svg);
}
#footer .top .coords a.email .footer-icon{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-email-white.svg);
}
#footer .top .coords a.address .footer-icon{
background-image: url(//www.clotureseques.com/wp-content/themes/blankslate-child/img/icons/icon-map-white.svg);
}
#footer .top .coords .policies-links{
display: flex;
gap: 10px;
flex-direction: column;
margin-top: 50px;
}
#footer .top .footer-menu h3{
margin: 30px 0 20px;
}
#footer .top .footer-menu a{
font-size: 14px;
color: #fff;
transition: opacity 0.3s;
}
#footer .top .footer-menu a:hover{
opacity: 0.7;
}
#footer .top .footer-menu a:after{
display: block; content: '';
border-bottom: 1px solid #fff;
padding-top: 5px;
transform: scaleX(0);
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
transform-origin: 0% 50%;
}
#footer .top .footer-menu a:hover:after{
transform: scaleX(0.2);
}
#footer .top .footer-menu ul > li:not(:last-child){
margin-bottom: 10px;
}
#footer .top .footer-menu .policies-links ul > li:not(:last-child){
margin-bottom: 0;
}
#footer .top .footer-menu.product-menu ul{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 30px;
}
#footer .footer-icon{
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
margin-right: 10px;
}
#subfooter{
background-color: #333;
padding: 20px 0;
}
#subfooter .flex{
justify-content: space-between;
}
#subfooter p, #subfooter a{
font-size: 12px;
color: #fff;
}
#subfooter a:hover{
opacity: 0.6;
}  .tall-img {
height: auto;
width: 100%;
max-height: none;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.wide-img {
width: auto;
height: 100%;
max-width: none;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.cover {
position: relative;
overflow: hidden;
}
.cover > img{
position:absolute;
}
.form-msg{
max-height: 500px;
color: #fff;
visibility: visible;
margin: 15px 0;
transition: all 0.6s;
}
.form-msg.hide{
max-height: 0;
visibility: hidden;
margin: 0;
}
.form-msg .form-msg-pad{
padding: 15px;
}
.form-msg.error{
background-color: red;
}
.form-msg.success{
background-color: var(--secondary-color);
}  @media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1450px) {
.wrap{width:1100px;} .btn{
font-size: 16px;
} #nav .nav-left{
padding: 30px;
}
#nav .nav-right .nav-right-menu .menu > li > a{
font-size: 14px;
}
#nav .nav-right .nav-right-top .item, #nav .nav-right .nav-right-top .lang-switch{
font-size: 16px;
}
#nav .top-icon{
width: 24px;
height: 24px;
}
#accueil-top{
height: calc(100vh - 161px);
margin-top: 161px;
}
#accueil-content .about-section{
background-size: cover;
} #page-top{
margin: 161px 0 100px;
}
#diy .diy-steps{
flex-wrap: wrap;
}
#diy .diy-steps .step-box{
padding: 50px;
}
#diy .diy-steps .step-box:nth-child(1), #diy .diy-steps .step-box:nth-child(2){
flex: 1;
width: 50%;
}
#diy .diy-steps .step-box:nth-child(2) .step-content, #diy .diy-steps .step-box:nth-child(3) .step-content{
padding-left: 0; padding: 0;
}
#diy .diy-steps .step-box:not(:last-child):after{
display: none;
}
#products .products-container .product-grid{
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 1150px) {
.wrap{width:900px;} .text-section h2{
font-size: 30px;
}
.text-section p, p{
font-size: 14px;
}
.form-msg .form-msg-pad{
font-size: 14px;
} #nav .nav-left{
padding: 30px 80px 30px 100px;
}
#nav .nav-right{
display: flex;
}
#nav .nav-right .nav-right-menu, #nav .nav-right .nav-right-top .item{
display: none;
}
#nav .nav-right .nav-right-top{
width: 100%;
margin-bottom: 0;
flex-wrap: wrap;
}
#nav .nav-right .nav-right-top .menu-icon{
display: block;
margin-left: 50px;
}
#nav .nav-right .nav-right-top .lang-switch{
order: -1;
margin-right: auto;
margin-left: 0;
}
#nav .nav-right .nav-right-top .rbq{
order: -1;
flex-basis: 100%;
font-size: 14px;
margin-left: 0;
margin-bottom: 10px;
}
#nav .top-icon{
width: 36px;
height: 36px;
}
#nav.scrolled .nav-right .nav-right-top{
margin-bottom: 0;
} #accueil-top{
height: 100vh;
height: 100dvh;
margin-top: 0;
}
#accueil-top .slider .slogan{
bottom: 15%;
}
#accueil-content .products-section .products .product-single{
padding-bottom: 70%;
}
#accueil-content .products-section .products .product-single .banner{
font-size: 16px;
}
#accueil-content .services-banner .services-list{
width: 100%;
}
#accueil-content .services-banner .services-list > li{
font-size: 18px;
}
#accueil-content .projects-section{
background-size: 160%;
}
#accueil-content .projects-section .projects{
grid-template-rows: repeat(3, 180px);
}
#accueil-content .projects-section .projects .project-single:nth-child(2){
grid-column: span 4;
}
#accueil-content .projects-section .projects .project-single:nth-child(4){
grid-column: span 3;
grid-row: auto;
}
#accueil-content .projects-section .projects .project-single:nth-child(5){
grid-column: span 4;
grid-row: span 2;
}
#accueil-content .projects-section .projects .project-single:last-child{
grid-column: span 6;
}
#accueil-content .projects-section .projects .project-single .project-title h3,
#accueil-content .projects-section .projects .project-single:nth-child(2) .project-title h3,
#accueil-content .projects-section .projects .project-single:nth-child(4) .project-title h3,
#accueil-content .projects-section .projects .project-single:nth-child(6) .project-title h3{
font-size: 20px;
} #page-top{
margin: 50px 0 100px;
}
.page-content .flex-overflow-section{
margin: 5% auto 10%;
}
#apropos .top-section{
background-position: center 65%;
}
#realisations .projects-section{
grid-auto-rows: 300px;
}
#realisations .projects-section .project-single .project-title h3{
font-size: 24px;
}
#blogue .blog-container .main-content{
margin-right: 50px;
}
#contact-us:before{
bottom: 0;
}
#contact-us .coords-section .coord-item{
font-size: 18px;
}
#products .products-container .sidebar{
width: 40%;
}
#product-single .content-area{
padding-top: 180px;
}
#diy .videos-section .videos-grid{
grid-template-columns: repeat(3, 1fr);
}
#soumission form .fence-styles .check-container{
gap: 0;
}
#soumission form .fence-styles .radio-box{
width: 28%;
} #footer .top{
gap: 0;
flex-wrap: wrap;
}
#footer .top .left{
width: 38%;
}
#footer .top .middle{
gap: 60px;
}
}
@media screen and (max-width: 950px) {
.wrap{width:700px;} .alignleft{margin: 0 30px 10px 0;}
.alignright{margin: 0 0 10px 30px}
.text-section.text-center{
width: 100%;
} #nav .nav-left{
padding: 30px;
}
#nav.scrolled .nav-left{
padding: 15px 30px;
}
#nav .nav-right{
padding: 30px;
}
#nav.scrolled .nav-right{
padding: 15px 30px;
}
#nav .nav-left .logo .logo-subtitle{
font-size: min(2.5vw, 30px);
}
#mobile-menu .menu > li > a{
font-size: 18px;
} #accueil-top .slider .slogan{
width: 100%;
box-sizing: border-box;
}
#accueil-top .slider .slogan .slider-titre{
font-size: 24px;
}
#accueil-content .about-section{
background-position: center 35%;
background-size: 300%;
}
#accueil-content .about-section .flex-section{
flex-direction: column-reverse;
}
#accueil-content .products-section .products{
grid-template-columns: 1fr 1fr;
}
#accueil-content .services-banner .text-section{
width: 100%;
}
#accueil-content .projects-section{
background-size: 300%;
}
#accueil-content .blog-section .blog-container{
flex-direction: column;
gap: 0;
}
#accueil-content .blog-section .blog-container .blog-box{
width: 100%;
margin-bottom: 50px;
}
#accueil-content .contact-section .form-section{
flex-direction: column;
}
#accueil-content .contact-section .form-section > .image{
height: 350px;
}
#accueil-content .contact-section .form-section form .form-fields{
grid-template-columns: auto;
}
#accueil-content .contact-section .form-section form .form-fields input[type=email],
#accueil-content .contact-section .form-section form .form-fields textarea{
grid-column: auto;
}  .page-content.general-padding{
padding: 175px 0 50px;
}
.page-content .flex-section{
flex-direction: column;
}
.page-content .flex-section > .text-section, .page-content .flex-section > img, .page-content .flex-section .video{
width: 100%;
}
.page-content .flex-overflow-section, #services .flex-overflow-section:nth-child(even){
flex-direction: column;
}
.page-content .flex-overflow-section .text-section, #services .flex-overflow-section:nth-child(even) .text-section{
max-width: 100%;
padding: 0;
margin-bottom: 50px;
}
.page-content .flex-overflow-section img{
position: static;
width: 100%;
max-height: 100%;
}
.page-content .half-bg-section{
padding: 100px 0 0;
}
.page-content .half-bg-section:after{
width: 100%; max-width: 100%;
height: 75%;
}
#diy article{
padding: 60px 0;
}
#diy article h2{
font-size: 24px;
}
#diy article h3{
font-size: 20px;
}
#diy .videos-section .videos-grid .video:after{
width: 30px;
height: 30px;
background-size: 24px;
}
#apropos .top-section img{
width: 100%;
}
#apropos .advantages .grid .grid-box{
flex-direction: column;
}
#apropos .advantages .grid .grid-box img{
margin-bottom: 30px;
}
#apropos .advantages .grid .grid-box .grid-box-text{
text-align: center;
margin-left: 0;
}
#services .flex-overflow-section{
margin: 50px auto;
}
#services .flex-overflow-section:not(:last-child){
border-bottom: 1px solid #eeeeee;
padding-bottom: 75px;
margin-bottom: 0;
}
#services-single .slider-section:after{
width: 100%; max-width: 100%;
height: 63%;
top: unset;
bottom: 0;
}
#services-single .slider-section .slide-content{
flex-direction: column;
}
#services-single .slider-section .slide-content .slide-images{
max-height: 400px;
}
#services-single .slider-section .slide-content .slide-container, #services-single .slider-section .slide-content .text-section{
width: 100%;
}
#services-single .slider-section .slide-content .slide-container .arrow.arrow-prev{
background-color: #fff;
}
#services-single .slider-section .slide-content .text-section{
padding-left: 0;
padding-top: 60px;
}
#services-single .bottom-section .flex{
flex-direction: column;
gap: 50px;
}
#services-single .bottom-section .flex .text-section{
width: 100%;
}
#diy .diy-steps{
margin-top: 60px;
}
#realisations .projects-section{
grid-template-columns: 1fr 1fr;
}
#realisations-single .text-section{
padding: 50px 0;
}
#realisations-single .project-gallery{
grid-template-columns: repeat(3, 1fr);
margin: 50px auto;
}
#blogue .blog-container{
flex-direction: column;
}
#blogue .blog-container .main-content{
width: 100%;
margin-right: 0;
}
#blogue .blog-container .sidebar{
width: 100%;
position: relative;
top: unset;
margin-top: 50px;
}
#blogue .blog-container .sidebar .widget_block{
margin-bottom: 15px;
}
#blogue:not(.single) .blog-container .main-content article img{
max-width: 100%;
}
#contact-us .flex-section{
flex-direction: row;
}
#contact-us .coords-section iframe{
height: 350px;
}
#contact-us .form-section form .form-fields{
grid-template-columns: auto;
}
#contact-us .form-section form .form-fields input[type=email], #contact-us .form-section form .form-fields textarea{
grid-column: auto;
}
#soumission form .form-fields{
grid-template-columns: auto;
}
#soumission form .radio-container{
flex-direction: column;
align-items: center;
gap: 15px;
}
#soumission form .dropdown-container{
flex-wrap: wrap;
}
#soumission form .dropdown-container select, #soumission form .dropdown-container .dropdown-box{
max-width: 50%;
}
#soumission form .file-section{
flex-direction: column;
}
#soumission form .file-section .file-input, #soumission form .file-section .file-example{
width: 100%;
}
#soumission form .fence-styles .radio-box label{
font-size: 14px;
}
#products .products-container{
flex-direction: column-reverse;
}
#products .products-container .sidebar{
position: static;
}
#products .products-container .main-content, #products .products-container .sidebar{
width: 100%;
}
#products .products-container .product-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 15px;
margin-right: 0;
}
#products .products-container .product-grid .product .product-info .product-name{
font-size: 2vw;
}
#products .products-container .product-grid .product .product-info .product-price{
font-size: 3.3vw;
}
#products .products-container .product-grid .product .btn{
font-size: 1.5vw;
padding: 10px 15px;
}
#products .products-container .product-grid .product .btn svg{
width: 10px;
}
#products .products-container .sidebar .cat-section{
margin-bottom: 30px;
}
#products .products-container .sidebar .cat-section .prod-categories{
display: none;
margin-top: 10px;
}
#products .products-container .sidebar .cat-section  .show-categories{
display: block;
} #footer .top .left{
width: 100%;
}
#footer .top .middle{
gap: 40px;
}
#footer .top .footer-menu.product-menu ul{
gap: 0 15px;
}
#footer .top .coords{
width: 30%;
}
}
@media screen and (max-width: 750px) {
.wrap{width:500px;}  #nav-left{
width: 50%;
}
#nav .nav-right .nav-right-top .menu-icon{
margin-left: 30px;
}
#mobile-menu{
width: 60%;
right: -60%;
} #accueil-content .about-section, #accueil-content .projects-section{
padding: 75px 0;
}
#accueil-content .products-section{
padding-bottom: 75px;
}
#accueil-content .services-banner .services-list > li{
padding: 15px;
}
#accueil-content .projects-section .projects{
grid-template-columns: auto;
grid-template-rows: repeat(6, 300px);
}
#accueil-content .projects-section .projects .project-single{
grid-column: auto !important;
grid-row: auto !important;
}
#accueil-content .blog-section{
padding-bottom: 75px;
}
#quote-banner{
padding: 50px 0;
}
#quote-banner .flex{
align-items: flex-start;
gap: 30px;
flex-direction: column;
} #page-top{
height: 300px;
}
#page-top h1{
font-size: 24px;
}
#apropos .top-section{
background-position: center center;
background-size: cover;
}
#apropos .top-section img{
height: 300px;
object-fit: cover;
}
#apropos .advantages .grid{
grid-template-columns: auto;
}
#diy article img{
max-width: 100%;
margin: 30px 0;
}
#diy article p:first-child img{
margin-top: 0;
}
#diy .diy-steps .step-box:nth-child(1), #diy .diy-steps .step-box:nth-child(2){
flex: auto;
width: 100%;
}
#diy .videos-section .videos-grid{
grid-template-columns: 1fr 1fr;
gap: 0 8px;
}
#realisations .projects-section .project-single .project-title h3{
font-size: 20px;
}
#realisations-single .text-section{
margin-top: -50px;
}
#realisations-single .project-gallery{
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 30px auto;
}
#contact-us:before{
background-size: 300%;
}
#contact-us .flex-section{
flex-direction: column-reverse;
padding-bottom: 50px;
}
#contact-us .flex-section > *{
width: 100%;
}
#contact-us .coords-section iframe{
margin-top: 30px;
}
#soumission form{
width: 100%;
}
#soumission form input[type=text],
#soumission form input[type=email],
#soumission form textarea,
#soumission form .dropdown-container select,
#soumission form .check-container .checkbox{
font-size: 14px;
}
#soumission form .check-container{
gap: 15px;
}
#soumission form .fence-styles .radio-box{
width: 50%;
}
#soumission form .file-section .file{
font-size: 14px;
}
#products .products-container .product-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#products .products-container .sidebar .cat-section .prod-categories > li > a, #products .products-container .sidebar .cat-section .show-categories{
font-size: 16px;
}
#product-single h1{
font-size: 24px;
}
.woocommerce div.product div.images, .woocommerce div.product div.summary{
width: 100%;
} #footer .top .middle{
width: 100%;
justify-content: space-between;
}
#footer .top .coords{
width: 100%;
}
#footer .top > *:not(:last-child){
margin-bottom: 30px;
}
#subfooter .flex{
flex-direction: column;
text-align: center;
gap: 10px;
}
}
@media screen and (max-width: 550px) {
.wrap{width: 90%;} .btn{
font-size: 14px;
}
.btn-full-width{
gap: 15px;
}
.text-section h2, .page-content h2{
font-size: 24px;
}
.box-line-title h2{
font-size: 24px;
padding: 15px 30px;
}
#mobile-menu{
width: 70%;
right: -70%;
padding: 30px 20px;
}
#mobile-menu .menu > li > a{
font-size: 16px;
}
#mobile-menu .menu-close{
right: 20px;
} #nav > .flex{
flex-direction: column;
}
#nav .nav-left, #nav .nav-right{
width: 100%;
box-sizing: border-box;
}
#nav .nav-left, #nav.scrolled .nav-left{
justify-content: center;
padding: 15px 30px;
}
#nav .nav-left .logo{
max-width: 250px;
}
#nav .nav-left .logo .logo-subtitle{
font-size: min(4.8vw, 30px);
text-align: center;
}
#nav .nav-right{
padding: 15px 20px;
}
#nav.scrolled .nav-right{
padding: 10px 30px;
}
#nav .nav-right .nav-right-top{
flex-wrap: nowrap;
}
#nav .nav-right .nav-right-top > *{
margin-left: 20px;
}
#nav .nav-right .nav-right-top a:not(:last-child){
margin-right: 0;
}
#nav.scrolled .nav-right .nav-right-top .menu-icon{
width: 36px;
height: 36px;
}
#nav .nav-right .nav-right-top .cart span{
top: -8px;
width: 20px;
height: 20px;
}
#nav .nav-right .nav-right-top a.lang-switch{
font-size: 12px;
margin-right: auto;
}
#nav .nav-right .nav-right-top .rbq{
order: unset;
flex-basis: auto;
font-size: 3vw;
margin-left: 20px;
margin-bottom: 0;
}
#nav .nav-right .nav-right-top .socials{
display: none;
}
#nav .top-icon, #nav.scrolled .top-icon, #nav .nav-right .nav-right-top .menu-icon, #nav.scrolled .nav-right .nav-right-top .menu-icon{
width: 30px;
height: 30px;
} #accueil-top .slider .slogan{
padding: 15px 15px 40px;
}
#accueil-top .slider .slogan a{
bottom: -25px;
}
#accueil-top .slider .slogan .slider-titre{
font-size: 20px;
}
#accueil-content .about-section{
background-size: 530%;
background-position: center 50%;
}
#accueil-content .products-section .products{
grid-template-columns: auto;
}
#accueil-content .products-section .products .product-single{
padding-bottom: 56.25%;
}
#accueil-content .products-section .products .product-single .banner{
bottom: 0;
}
#accueil-content .products-section .products .product-single .banner h3:after{
margin: 5px auto 8px;
}
#accueil-content .products-section .products .product-single .banner .arrow-icon{
height: 18px;
}
#accueil-content .services-banner{
padding: 60px 0;
}
#accueil-content .services-banner .services-list > li{
font-size: 16px;
}
#accueil-content .contact-section .form-section > .image{
height: 250px;
}
#accueil-content .contact-section .form-section form{
padding: 20px;
}
#accueil-content .contact-section .form-section form .form-fields input,
#accueil-content .contact-section .form-section form .form-fields textarea{
font-size: 14px;
}
#accueil-content .contact-section iframe{
height: 500px;
} #page-top{
margin: 150px 0 50px;
}
#page-top h1{
right: 8%;
bottom: 30px;
text-align: center;
padding: 15px 30px;
}
.page-content .half-bg-section{
padding: 50px 0 0;
margin-top: -50px;
}
#apropos .top-section{
padding-bottom: 0;
}
#apropos .top-section img{
height: 250px;
padding-bottom: 50px;
}
#apropos .advantages{
padding: 60px 0;
}
#services .flex-overflow-section:not(:last-child){
padding-bottom: 50px;
}
#services-single .slider-section{
padding: 50px 0;
}
#services-single .slider-section:after{
height: 70%;
}
#services-single .slider-section .slide-content .slide-images{
max-height: 275px;
}
#services-single .slider-section .slide-content .text-section .subtitle{
font-size: 16px;
}
#services-single .bottom-section{
padding: 50px 0;
}
#services-single .bottom-section .text-section h2{
font-size: 24px;
}
#realisations .projects-section{
grid-template-columns: auto;
grid-auto-rows: 75vw;
margin: 50px auto;
}
#blogue .blog-container .main-content article:not(:last-child){
margin-bottom: 50px;
}
#blogue .blog-container .main-content article .entry-title{
font-size: 24px;
}
#soumission .box-line-title h2{
font-size: 20px;
}
#soumission form{
margin: 50px auto;
}
#soumission form .dropdown-container select, #soumission form .dropdown-container .dropdown-box{
max-width: 100%;
}
#soumission form .dropdown-container .dropdown-box{
flex-basis: 100%;
}
#soumission form .dropdown-container .dropdown-box .quantity{
font-size: 14px;
}
#after-submit{
margin-bottom: 50px;
}
#products .products-container{
margin-bottom: 50px;
}
#products .products-container .product-grid .product{
padding: 10px;
}
#products .products-container .product-grid .product .product-info .product-name{
font-size: 3vw;
margin: 15px 0 8px;
}
#products .products-container .product-grid .product .product-info .product-price{
font-size: 5vw;
margin-bottom: 15px;
}
#products .products-container .product-grid .product .btn{
font-size: 2vw;
}
#products .products-container .sidebar .cat-section{
padding: 15px;
}
#product-single .content-area{
padding-top: 230px;
}
#product-single h1{
font-size: 20px;
}
.woocommerce div.product form.cart{
flex-wrap: wrap;
}
.woocommerce div.product form.cart .variations tbody{
flex-wrap: wrap;
gap: 20px;
}
.woocommerce div.product form.cart .variations tbody tr,
.woocommerce div.product form.cart .variations .value select{
width: 100%;
}
.woocommerce .quantity .qty{
margin: 10px 15px 10px 0;
}
.woocommerce .woocommerce-breadcrumb{
font-size: 0.7em;
}
#diy .videos-section{
margin-bottom: 50px;
}
#diy .videos-section .videos-grid h3{
font-size: 16px;
margin: 10px 0 15px;
}
#diy article img{
width: 100%;
max-height: 450px;
object-fit: contain;
margin-bottom: 30px;
} #footer .top .middle{
gap: 20px;
flex-wrap: wrap;
}
#footer .top .middle .footer-menu a{
max-width: 100%;
}
#footer .top .left .logo img{
max-width: 250px;
}
} @media screen and (max-height: 920px) {
}
@media screen and (max-height: 810px) {
}