/*
Theme Name: Materiaux Archi
Theme URI: http://wigo-media.com
Author: the WigoMedia team
Author URI: http://wigo-media.com/
Description: Thème starter de Wigo Media.
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
@import url('./css/menu-header.css');
@import url('./css/footer.css');

*{font-size: 16px; font-family: 'Poppins', sans-serif;}
body {overflow-x: hidden;}

h1, .h1 {font-size: 3rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem}
h2, .h2 {font-size: 2rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem}
h3, .h3 {font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem}
h4, .h4 {font-size: 1rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem}
h5, .h5 {font-size: 0.8rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem}

.lead{font-size: 1.25rem}
p {font-size: 1rem; margin-bottom: 1.5rem}
a {color: #235789;}
a:hover {color: #235789;}
img {max-width: 100%; height: auto;}
hr {margin: 1.6rem 0 1.2rem 0; background-color: #D4D4D4; opacity: 1; border: none;}


/* Text Colors */
.has-light-gray-color, .text-light-grey {color: #A4ACB1;}
.has-medium-gray-color, .has-medium-gray-color a {color: #767D82;}
.has-blue-color, .has-blue-color a, .has-blue-color a:hover {color: #1D61A1;}
.has-orange-color, .has-orange-color a, .has-orange-color a:hover {color: #EC6726!important;}
.has-green-color, .has-green-color absolute {color: green;}
.has-light-color, .has-light-color a, .has-light-color a:hover {color: #F4F9FF;}
.has-dark-color {color: #000;}
.has-success-color, .has-success-color a {color: #5AAB59;}

/* Background Colors */
.has-light-gray-background-color {background-color: #A4ACB1;}
.has-medium-gray-background-color {background-color: #767D82;}
.has-blue-background-color {background-color: #1D61A1;}
.has-orange-background-color {background-color: #EC6726;}
.has-green-background-color {background-color: green;}
.has-light-background-color {background-color: #F4F9FF;}
.has-dark-background-color {background-color: #000;}
.has-success-background-color {background-color: #5AAB59;}

/* Buttons */
.btn, .wp-block-button a {border: none; border-radius: 0; padding: 1rem 2rem; transition: 350ms ease;}
.btn:hover, .wp-block-button a:hover {transform: scale(1.02);}
.btn-outline {border: #5A5A5F solid 0.05rem; background-color: #FFF;}

a.has-orange-background-color:hover, a.has-blue-background-color:hover, a.has-green-background-color:hover, a.has-dark-background-color:hover, a.has-success-background-color:hover {color: #FFF;}
a.has-light-gray-background-color:hover, a.has-medium-gray-background-color, a.has-light-background-color:hover {color: #000;}

/* Styles Gutemberg */
.is-style-full-width-image {left: -10%; position: relative; width: 120%;}
.is-style-full-width-image .wp-block-media-text__content {padding-left: 8%; padding-right: calc(20% * 0.8);}
.has-media-on-the-right.is-style-full-width-image .wp-block-media-text__content {padding-right: 8%; padding-left: calc(20% * 0.8);}
.is-style-full-width-cover {padding: 3rem 1rem;}
.is-style-full-width-cover span {clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%); -webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%); width: calc(100vw - 15px); margin-left: calc(-50vw + 7px); left: 50%!important;}

/* Custom Class Gutemberg */
.top-card {display: inline-block; box-shadow: 0px 23px 34px -10px rgba(0, 0, 0, 0.15); transform: translateY(-80%);}

/* Header */
header {position: relative; box-shadow: 0px 4px 64px rgba(1, 30, 66, 0.1); z-index: 9999;}
header .wrapper-icons {z-index: 1000;}
header .wrapper-icons i {padding: 1rem; cursor: pointer;}
header .menu-mobile i.fa-bars {opacity: 1; transition: 250ms ease;}
header .menu-mobile i.fa-xmark {opacity: 0; right: 2px; transition: 250ms ease;}

/* SearchBar */
.searchbar{height: 58px; width: 100%; border: #D4D4D4 solid 0.05rem; border-radius: 1.875rem; background-color: #FFF; display: flex; align-items: center;}
.search_input{color: #D4D4D4; background-color: transparent; border: none; border-radius: 0 1.875rem 1.875rem 0; width: 100%; height: 100%; line-height: 1.2; transition: width 0.4s linear;}
.search_icon{display: block; color:#D4D4D4; text-decoration:none;}

/* Page header */
.page-header .btn {mix-blend-mode: screen;}
.filter {padding-top: 8rem; padding-bottom: 8rem; background-image: url('img/angle-mask.svg'); background-position: bottom -86px left; background-repeat: no-repeat; position: relative;}
.angle-mask {background-image: url('img/angle-mask.svg'); background-position: bottom 42px left; background-repeat: no-repeat; width: 100%; position: absolute; height: 100%;}

/* Page header with image and linear gradient overlay */
.has-background-img.has-style-gradient {background-size: cover; background-position: center right; background-repeat: no-repeat;}
.has-style-gradient.has-color-orange .filter {background: linear-gradient(265.62deg, rgba(236, 103, 38, 0) 26.09%, #EC6726 76.5%);}
.has-style-gradient.has-color-blue .filter {background: linear-gradient(265.62deg, rgba(29, 97, 161, 0) 26.09%, #235789 76.5%);}
.has-style-gradient.has-color-grey-medium .filter {background: linear-gradient(265.62deg, rgba(118, 125, 130, 0) 26.09%, #767D82 76.5%);}
.has-style-gradient.has-color-green .filter {background-image: linear-gradient(265.62deg, rgba(90, 171, 89, 0) 26.09%, #5AAB59 76.5%);}

/* Page header with background color */
.has-style-full .filter {padding-bottom: 12rem;}
.has-style-full.has-color-orange {background-color: #EC6726;}
.has-style-full.has-color-blue {background-color: #235789;}
.has-style-full.has-color-grey-medium {background-color: #A4ACB1;}
.has-style-full.has-color-green {background-color: #5AAB59;}

/* Page header with image and background color */
.has-background-img.has-style-full .filter {padding-bottom: 3.429vw;}
.has-background-img.has-style-full .filter .full-img {position: relative; top: 42px;}

/* Responsive */
@media screen and (max-width: 1199px) {
    .has-background-img.has-style-full .filter { padding-top: 10.667vw; padding-bottom: 4vw;}
}
@media screen and (max-width: 991px) {
    body.active .wrapper-mobile {transform: translateX(0);}
    body.active .menu-mobile i.fa-bars {opacity: 0;}
    body.active .menu-mobile i.fa-xmark {opacity: 1;}
    
    header .logo {z-index: 1000;}
    header .logo img {width: 60%;}
    header .menu-wrapper {padding-top: calc(103px + 0.75rem); transition: 250ms ease;}
    header .wrapper-mobile {position: absolute; top: 0; left: 0; z-index: 900; background-color: #FFF; width: 100vw; height: 100vh; transform: translateX(-100%); transition: 250ms ease;}
    header .wrapper-mobile > .row {padding: 0 calc(1rem * 2);}

    .is-style-full-width-cover span {clip-path: polygon(0 0, 100% 10%, 100% 95%, 0% 100%); -webkit-clip-path: polygon(0 0, 100% 10%, 100% 95%, 0% 100%);}
    .has-background-img.has-style-full .filter {padding-top: 6.452vw; padding-bottom: 4.839vw;}
    .has-background-img.has-style-full .filter .full-img {position: static;}
}

@media  screen and (max-width: 767px) {
    .page-welcome .angle-mask{background-image: none;}
    .page-welcome .filter{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    h1{font-size: 2rem;}
    .page-welcome .filter h1{font-size: 2rem;}
    .has-background-img.has-style-full .filter {padding-top: 50%; padding-bottom: 6.25vw;}
    .page-header.has-style-full .order-2{padding-top: 40%!important;}
}

/* WP CORE */
.alignnone{margin:5px 20px 20px 0}
.aligncenter,div.aligncenter{display:block;margin:5px auto}
.alignright{float:right;margin:5px 0 20px 20px}
.alignleft{float:left;margin:5px 20px 20px 0}
a img.alignright{float:right;margin:5px 0 20px 20px}
a img.alignnone{margin:5px 20px 20px 0}
a img.alignleft{float:left;margin:5px 20px 20px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:5px 3px 10px;text-align:center}
.wp-caption.alignnone{margin:5px 20px 20px 0}
.wp-caption.alignleft{margin:5px 20px 20px 0}
.wp-caption.alignright{margin:5px 0 20px 20px}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,0.6);clip:auto!important;color:#21759b;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}