/*
Theme Name: Twenty Twenty Child
Description: Twenty Twenty Child Theme
Template: twentytwenty
Version: 1.0.0
License: GNU General Public License v2 or later
License URL: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* Placer votre CSS ci-dessous */


:root {
    --primary-color: #19b1e7;
    --secondary-color: white;
    --third-color: #03A9F4;
}

::-webkit-scrollbar {
  display: none;
}


h1, h2, .entry-content h3 {letter-spacing: 0.3px; color:var(--primary-color);}

button a {color:white}

button {border-radius: 30px;}

body {background:white;padding-right: 0px !important;overflow: auto!important;/*used for animation to not show blank space on right side*/}

body {
padding: 0!important;
overflow-x: hidden!important
}

body.no-scroll {margin: 0; height: 100%; overflow-x: hidden!important;padding:0!important} /* no scroll on modal */

h2 {margin:0}
p { margin: 0;text-align: justify; font-size:24px }

h6 {
        color: var(--primary-color);
        margin-top: 24px;
}

.modal-menu a {color:var(--primary-color)!important;}


.entry-content hr::after, hr.styled-separator::before, hr.styled-separator::after {display:none}


button:hover,button:active,button:focus,button:visited{outline: none;}

section {padding: 0;}
.container-fluid {padding:0}

button {background-color:var(--primary-color)!important;}


.primary-menu > li {
    margin: 0 10px;
}
.primary-menu > li > a {color:var(--primary-color)!important}


.header-navigation-wrapper {
    align-items: center;
    display: -webkit-inline-box;
    width:100%
}

.header-titles svg {
  width: 100%;
  position: relative;
  z-index: 2;
  max-width: 300px;
  }

.header-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 20px 0 10px 0;
}

  .header-toggles { display: none;}

  .header-titles-wrapper {
      align-items: center;
      display: flex;
      justify-content: normal;
      padding: 0 4rem;
      text-align: center;
      margin-right: 0;
  }

  .primary-menu li {font-size:18px}

  .primary-menu a {text-transform: uppercase;}

#site-header {
    position: relative;
    z-index: 2;
    background: transparent
  }

@media screen AND (min-width:581px) {

#site-header.sticky {
      position: fixed;
      width: 100%;
      top: 0;
      background-color: rgba(255, 255, 255);
      transition: all 0.2s ease-in;
      border-bottom: 1px solid #03A9F4;
  }

#site-header.sticky .header-titles svg {
    width: 60%;
    top:8px
}

}

.nav-toggle {margin-left: auto;}
.toggle {background:transparent!important}
.search-toggle {display: none!important;}

#site-header.sticky .header-inner {padding: 1.2rem 0;}

.front-box {
    position: relative;
    top: -120px;
    height: 100vh;
}

.header-smile {

        position: absolute;
        bottom: -40px;
        display: block;
        width: 100%;
        z-index: 2;

      }



/* Flexslider CUSTOM */

.flexslider {

  background-size: cover;
  border:none;
  height: 100%;
  width: 100%;

}

  .flexslider .slides {
  position:absolute;
  bottom: -35px;
  }

  .flexslider .slides .text {
      position: relative;
      width: 100%;
      left: 100px;
      margin-top: 120px;
    }

  .flexslider .slides .text .title {margin:0;color:white;letter-spacing: 0.3px;font-size: 42px;}

  .flexslider .text h2, .flexslider .text p, .flexslider .text span {margin-bottom:0; color:white;letter-spacing: 0.3px;}

  .flexslider h2 {
  font-size: 40px;
  text-align: center;
  font-size: calc(3vw);
  }

  .flexslider h3 {margin:0; text-align: center;}

  .flexslider .text p {font-size:20px;}

  .flexslider button {
    border: 1px solid white;
    padding: 14px;
    }

  .flex-control-nav {
      width: 100%;
      position: absolute;
      bottom: -12px;
      text-align: center;
      z-index: 3
  }

  .flex-control-paging li a {background: rgba(35, 35, 35, 0.28);}
  .flex-control-paging li a:hover {
      background: #00BCD4;
  }
  .flex-control-paging li a.flex-active {
      background: #00BCD4;
  }


  @media screen AND (max-width:767px) {

    .slides {
        bottom: 0;
    }

    .flexslider h2 {font-size: 34px;}

    .text {
        text-align: center;
        left:0
      }

      button {left:100px}

  }

/* end Flexslider CUSTOM */


.container-fluid {position:relative}

.container {margin-top:150px}

.featured-media img {
    margin: auto;
    width: 100%;
		max-height: 200px;
    object-fit: cover;
}


/* EKKO */

.ekko-lightbox-container {
    max-height:420px;
    background:black
}

.ekko-lightbox .no-gutters {padding:0}
.ekko-lightbox .modal-side {
    text-align: left;
    height: auto;
    color: black;
    border-radius: 0;
    background:white;
    height: 420px;
    padding : 40px

}

.ekko-lightbox button {
    right: 0;
    position: absolute;
    border-radius: 0;
    z-index:2
  }

.ekko-lightbox .modal-body {padding:0}


.grid-item-masonry{width: 180px;}


/* Grid Masonry  */

.grid-masonry {
list-style: none;
margin: 20px auto;
padding: 0;

}

.grid-item-masonry {
display: block;
float: left;
text-align: center;

}

.featured-media-inner img {border-radius: 0!important}

.entry-content .products hr::before {
    background: currentColor;
    content: "\f0c8";
    font-family: "Font Awesome 5 Free";
    width: 0;
    top: calc(50% - 1.8rem);

}

.post-inner {
    padding-top: 2em;
}

#shape02 {
      position: absolute;
      width: 240px;
      top: 200px;
      right: 0;
      z-index: -1;
}

.entry-content hr {
    margin: 5px 0 20px 0;
}

.products a {text-decoration:none}

#products-list a { position: relative;  left: 40px; }

.products img {
object-fit: cover;
border-radius: 10px;
border: 2px solid #214c75;
}


.products .grid-item-masonry img {
object-fit: cover;
min-height: 180px;
border-radius: 10px;
border: 2px solid white;
}

.products .product-item .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  border-radius:10px
}

.products .product-item:hover .overlay {
  opacity: 1;
}

.product-item {position: relative;}

@media screen AND (min-width:581px) {
.products h6 {max-width: 150px;}

}


.products .product-item .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.modal-side button {position:absolute;bottom:0}
.modal-side .container-fluid {height: 100%;}

/* end Grid Masonry and ekkolighbox*/



#drawing-line {
    position: relative;
    width: 100%;
    margin-top: -20%;
    z-index: -1;
  }


#hexagones-iso {
top:30px;
width: 88%;
position: relative;
margin-left: auto;

}

@media screen AND (max-width: 761px) {

  #hexagones-iso {
  width: 100%;
  }

}

/*PAGE*/

.page .entry-title {
position: absolute;
width: 100%;
text-align:center;
z-index: 2;
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

.entry-content h1, .entry-content h2, .entry-content h3 {
    margin: 3rem auto 3rem;
}


h1.entry-title, h2.entry-title {
    margin: 0;
    position: absolute;
    z-index: 2;
    padding:50px;
    width: 100%;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

.featured-media-inner::after {
		 content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: black;
     opacity: .2;
		 z-index: 1;
}

#products-list .item {margin-bottom: 30px;}

#products-list .item .content a {
background: #03A9F4;
padding: 10px;
color: white;
border-radius: 30px;
margin-top:10px
}

#products-list .item .content p {
margin-top:10px
}

#products-list .post-image img {border-bottom: 2px solid white;}
#products-list .content {
    max-width: 500px;
    padding-left: 35px;
}
#products-list img {border-color: white; margin: auto;}

.mx-auto {margin:auto}

.mobile {display:none}

.quality { padding-right: 80px;}
.quality h2 {margin-top: 100px;}

#contact-section {padding-bottom: 30px;}
#contact-section p {font-size: 14px;margin: auto;text-decoration: none;}
#contact-section img {
  position:relative;
  top: 40px;
  margin-left: 80px;
}

/*SVG*/
#hexasrev {
    width: 200px;
    margin:auto;
    margin-top: -120px;
}

.footer-separator {    margin-top: -40px;}

@media screen AND (max-width: 980px) {

.front-box {height: 95vh;}


}

@media screen AND (max-width:769px) {


.front-box {height: 98vh;}

  .header-inner {
      padding: 10px;
    }

.mobile {display:block;}
.no-mobile {display:none}

.grid-item-masonry {
    width: auto!important;
}

.flexslider .slides .text {
  position: relative;
  text-align:center;
  left: 0;
}

.imagediv { top: 32px;}

.flexslider .slides .text h2, .flexslider .slides .text p {
  text-align:center!important;
}

#products-list .content {
    margin-left: 0!important;
    max-width:100%;
    text-align: center;
}

#products-list .content .col-sm-12 {text-align: center!important}


.modal-dialog {
  /* position: absolute;
  top: 0; */
}
.ekko-lightbox .modal-side {
  padding: 20px;
}

.ekko-lightbox button {
  left: 0;
}


}


#contactDiv {
position: fixed;
width: 100%;
display: block;
z-index: 8;
top: 0px;
left: 0px;
height: 100%;
overflow: hidden;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(8px);

}

#contactDiv #contact-wrap {
position: relative;
margin-left: auto;
margin-right: auto;
width:80%;
padding:5%
}

#contactDiv a.close {

position: absolute;
right: 30px;
top: 30px;

}

#contactDiv button {min-width: 170px;}



fieldset {    border-color: transparent!important; padding:0}


.footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
    margin-top: -64px;
    margin-bottom: 20px;
}

.footer-widgets {
    width: auto;

}

.footer-widgets-outer-wrapper {
    padding: 0;
    border-bottom: none;
}

.widget .widget-title {
    margin-bottom: 0;
    font-size:20px
}

.textwidget, .footer-widgets a {font-size:15px}
.footer-widgets a {color:#42545d!important; font-weight: 300;}

.footer-widgets p { color:#42545d}

#site-footer {padding: 1em;font-size: 12px;}

.footer-copyright {
    font-weight: 600;
    margin: auto;
}

.footer-credits {
    display: flex;
    margin: auto;
}


@media screen AND (max-width:580px) {

.container {margin-top:80px}

#contact-phone p , #contact-link p { text-align: center !important}


.ekko-lightbox button.close {
    width: 100%;
    text-align: right;
    background-color: transparent!important;
}

.quality {padding-right:0}

button.close-nav-toggle {
    left: 0;
}

.quality .content  {margin-left: -50px;}

.flexslider .slides {
    bottom: 20px;}

.flexslider .text h2 {
    font-size: 22px;
}

.flexslider .text p {
    font-size: 15px;
}

h2 {text-align: center;}

#multi-hexa {
    width: 100%;

  }

.quality {padding-right:15px}

#hexagones-iso {
    top:0;
  }

.quality h2 {margin-top: 40px;}

#contact-section button {width:60%!important;text-align:  }
#contact-section p {font-size:70%}

.footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
    margin-top: -20px;
}

} /* end resp 580px */