body {
  /* overflow-x: hidden; */
}
/********************** Vidéo ***********************/
video { 
  width:100%;
  max-width:700px;
  height:auto;
}
/********************** SVG ***********************/
a.svg {
  position: relative;
  display: inline-block; 
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}

.fixed-top{
  background-color:rgba(255, 255, 255, 0.9);
}
.hide{
  display:none;
}
.other{
  background-color: #f5f4f4 
}
.other img{
  width: 100%;
}
a.resec{
  color: #000000;
}
a.resec:hover{
  color: #4bdfd2
}
/********************** nav bar ***********************/
a.navbar-brand {
  margin-top: 0.5rem;
}
button.navbar-toggler {
  border: 0 none;
  outline: none;
}
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(191, 33, 75, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  
}
/*.folio .h4, .home .h4*/.h4{
  text-align: center;
  color: #bf214b;
  font-size: 1rem;
  font-family: 'Josefin Sans', sans-serif;
  text-decoration: none;
}
.folio .h4 :hover{
  color: #000000;
}
/********************** animation "X"nav bar ***********************/
.navbar-toggle {
  border: solid;
  color: #bf214b;
  background: transparent !important;
}
  .icon-bar {
    color: #bf214b;
    width: 22px;
    transition: all 0.2s;
  }
  .top-bar {
    color: #bf214b;
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .middle-bar {
    color: #bf214b;
    opacity: 0;
  }
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }

  .collapsed 
    
    .top-bar{
      transform: rotate(0);      
    }
    .middle-bar {
      opacity: 1;
    }
    .bottom-bar {
      transform: rotate(0);
    }

.navbar-toggle.collapsed

  .top-bar{
    transform: rotate(0);
  }
  .top-bar{
    transform: rotate(0);
  }
  .middle-bar {
    opacity: 1;
  }
  .bottom-bar {
    transform: rotate(0);
  }
 
/********************** COMMUN ***********************/



/********************** test position block  ***********************/

/********************** menu  home ***********************/
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(176,22,29, 0.7)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
} 

#collapsibleNavbar ul li a:hover h5{
  color: #333333;
}

h1{
  color: #bf214b;
  text-transform: uppercase;
}
h1 .light{
  font-family: "Open Sans light";
}

h2{
  color: #bf214b;
  font-family: "Josefin Sans";
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
}

.number{
  color: #bf214b;
  font-family: "Open Sans";
  font-size: 5rem;
  font-weight: 700;
}

h3{
  color: #000000;
  font-family: "Open Sans";
  font-size: 1.875rem;
  font-weight: 700;
  text-transform: uppercase;
}

h4{
  color: #707070;
  font-family: "Open Sans";
  font-size: 1.5rem;
  font-weight: 400;
}

p{
  color: #707070;
  font-family: "Open Sans";
  font-size: 1rem;
  font-weight: 400;
}
.btn{
  color: #343a40;
  border: 0.125rem solid #bf214b;
  background-color: #ffffff;
}
.btn:hover{
  color: #ffffff;
  background-color: #bf214b;
  border: 0.125rem solid #bf214b;
}

.container-contact{
  color: #fff;
  font-family: "Josefin Sans";
  font-size: 2rem;
  font-weight: 700;
}
.btn-send{
  color: #fff;
  border: 0.125rem solid #fff;
  background-color: #bf214b;
}
.background-red{
  background-color: #bf214b;
}
/**************** fin page menu  home *********************/

/**************** page portfolio **************************/ 
.folio .portfolio{
  background-image: url(../images/background\ logo.jpg);
  background-repeat: no-repeat;
  background-size: cover; 
  text-align: center;  
}
.project01 :hover{
  background-color: #bf214b
}

/*.card-img-overlay{
  color: #fff;
}*/


.gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  column-width: 33%; 
}
.gallery .pics {
  vertical-align: top;
}
.gallery .animation {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); 
}

/**************** page boves **************************/ 

.mairie-boves h1{
  color: #8CC648;
}
p.white-boves{
  color: #fff;
}
.mairie-boves .number{
  color: #fff;
}
.mairie-boves .background{
  background-color: #8CC648;
}
.mairie-boves .number p{
  color: #fff;
}
.background-link{
  background-color: #8CC648;
}
.background .btn{
  color: #fff;
  border:0.125rem solid #fff;
  background-color: #8CC648;
}
/**************** page patisserie **************************/ 

h1.color-cook{
  color:#C4AD60;
}
.patisserie p.white-cook{
  color: #fff;
}
.patisserie .number{
  color: #fff;
}
.patisserie .background{
  background-color: #C4AD60;
}
.patisserie.number p{
  color: #fff;
}
.patisserie .number.color{
  color: #C4AD60;
}

.patisserie p.brown-cook{
  color: #C4AD60;
}

.patisserie .background .btn{
  color: #fff;
  border:0.125rem solid #fff;
  background-color: #C4AD60; 
}
.patisserie .color{
  color: #C4AD60; 
}

/**************** page GOLF **************************/ 
h1.color-golf{
  color:#35AF86;
}
.golf .background{
background-color:#35AF86;
}
.golf .number{
  color: #fff;
}
.golf .white-golf{
  color: #fff;
}
.golf .number.color{
  color: #35AF86;
}
.golf .color{
 color: #35AF86;
}
.golf .site{
  background-image: url(../images/home\ site\ golf.jpg);
  background-repeat: no-repeat;
  background-size: 100vh; 
  text-align: center; 
}
.golf .background .btn{
  color: #fff;
  border:0.125rem solid #fff;
  background-color: #35AF86;
}

/**************** page approlocal **************************/
.approlocal .color{
  color: #007b46;
}
.approlocal .number{
  color: #007b46;
}
.approlocal.background{
  color: #007b46;
}
.approlocal .white-appro{
  color:white;
}
.approlocal .background-color{
  background-color: #007b46;
}


/**************** page fm **************************/
.fm .background{
  color: #05b94c;
}
.fm .number{
  color: #05b94c;
}
.color-fm{
  color: #05b94c;
}
/**************** page contact **************************/ 
.contact .color{
  color: #bf214b;
  font-size: 0.8rem;
}

/**************** page approlocal / vidéo **************************/ 
.approlocal .white{
  color:white
}
/**************** créasoul **************************/ 
.creasoul .color{
  color: #30a894;
}
.creasoul .background{
  background-color: #30a894;
}
.creasoul .number{
  color: #fff;
}
.creasoul .white{
  color: #fff;
}
.creasoul .number.color{
  color:#30a894;
}
/**************** inté-créasoul **************************/ 
.inte-creasoul h2{
  color:#707070;
  font-size: 1rem;
}

.contact .logo-background{
  background-image: url(../images/background\ logo.jpg);
  background-repeat: no-repeat;
  background-size: cover; 
  text-align: center;  
}

a, a:hover,a:visited, a:focus {
  text-decoration:white;
}
a:hover {
  color: black;
}

/**************** wolf gang **************************/ 
.wolfgang .color{
  color: #ff9d00;
}
.wolfgang .background{
  background-color: #ff9d00;
}
.wolfgang.number{
  color: #fff;
}
.wolfgang .white{
  color: #fff;
}
.wolfgang .number.color{
  color:#ff9d00;
}


/**************** Les écrémés 2017 **************************/ 
.ecremes .number{
  color: #CC504F;
}
.ecremes .color{
  color: #CC504F;
}

/*----------- ECREMES 02 (2018) --------*/
.ecremes02 .color{
  color:#EA6D19;
}


/**************** Saruw Design **************************/ 
.saruw .color{
  color:#dbdce1;
}
.saruw .background{
  background-color:#dbdce1;
}
.saruw .number{
  color: #dbdce1;
}
.saruw .white{
  color: #fff;
}

/**************** save the date **************************/ 
.savethedate .number.color{
  color: #D8CE73;
}

.savethedate .color{
  color: #D8CE73;
}

/**************** Axians **************************/ 
.axians .color{
  color:#5f2e8a;
}
.axians .background{
  background-color:#5f2e8a;
}

.axians .white{
  color: #fff;
}

/*---- Jorgensen pisciculture------*/
.fish .color{
  color: #41b8eb;
}

/**************** FORMAT MOBILE **************************/ 
@media screen and (max-width:768px){
  h1{
    font-size: 2rem;
  }
  h2{
    font-size: 20px
  }
  p{
    font-size: 12px;
  }
  .number{
    font-size: 30px;
    padding-left: 15px; 
  }
  .home .number{
    padding-left: 0px;
  }
  .title-project{
    padding-left: 15px;
  }
  .btn{
    font-size: 12px;
  }
  .fixed-top{
   background-color: rgba(255, 255, 255, 1) 
  }
  body{
    padding-top: 5rem;
  }
  .hide{
    display: block;
  }
  .hidden{
    display: none;
  }
  h3{
    font-size: 16px;
  } /* titre home page - ui design ... */
}

/**************** format desktop **************************/ 


  @media (min-width: 1024px){
    .align-logo{
      max-width: 1140px;
      min-height: calc(100vh - 92px);
      margin-top: 92px;
  }
}
/**************** FORMAT MOBILE **************************/ 
@media screen and (max-width:375px){
}