/* _____________ colors _____________*/
 /*       */
.color-red{color:#cd511a}
.bg-red{background-color:#cd511a}

.color-dark-red{color:#aa312d}
.bg-dark-red{background-color:#aa312d}

.color-orange{color:#e57f12}
.bg-orange{background-color:#e57f12}

.color-yellow{color:#ffcd26}
.bg-yellow{background-color:#ffcd26}


.color-green{color:#57a116}
.bg-green{background-color:#57a116}

.color-dark-green{color:#57a116}
.bg-dark-green{background-color:#57a116}

.color-light-green{color:#55a607}
.bg-light-green{background-color:#55a607}

.color-blue{color:#2f6d9f}
.bg-blue{background-color:#2f6d9f}

.color-dark-blue{color:#152532}
.bg-dark-blue{background-color:#152532}

.color-light-blue{color:#528ccd}
.bg-light-blue{background-color:#528ccd}

.color-pink{color:#cd52c9}
.bg-pink{background-color:#cd52c9}

.color-gold{color:#e99740}
.bg-gold{background-color:#e99740}

.color-white{ color: #FFF; }
.bg-white{ background: #FFF; }

.color-black{ color: #000; }
.bg-black{ background: #000; }

.color-grey{ color: #777; }
.bg-grey{ background: #777; }

.color-light-grey{ color: #ddd; }
.bg-light-grey{ background: #ddd;  }

.color-dark-grey{ color: #333; }
.bg-dark-grey{ background: #333; }


.text-shadow-btn{ text-shadow: 0px 1px 1px rgba(0,0,0,0.8); }

.tshadow-white{ text-shadow: 0px 0px 20px rgba(255,255,255,0.5); }
.tshadow-white-raid{ text-shadow: 1px 1px 0px rgba(255,255,255,0.5); }

.box-shadow-s{ box-shadow: 0px 0px 5px rgba(0,0,0,0.5); }
.box-shadow-m{ box-shadow: 0px 0px 10px rgba(0,0,0,0.4); }
.box-shadow-l{ box-shadow: 0px 0px 15px rgba(0,0,0,0.3); }
.box-shadow-xl{ box-shadow: 0px 0px 20px rgba(0,0,0,0.2); }


  /*
$white-10:  rgba(255,255,255,0.1);
$white-20:  rgba(255,255,255,0.2);
$white-30:  rgba(255,255,255,0.3);
$white-40:  rgba(255,255,255,0.4);
$white-50:  rgba(255,255,255,0.5);
$white-60:  rgba(255,255,255,0.6);
$white-70:  rgba(255,255,255,0.7);
$white-80:  rgba(255,255,255,0.8);
$white-90:  rgba(255,255,255,0.9);
$white-100: rgba(255,255,255,1);

$black-10:  rgba(0,0,0,0.1);
$black-20:  rgba(0,0,0,0.2);
$black-30:  rgba(0,0,0,0.3);
$black-40:  rgba(0,0,0,0.4);
$black-50:  rgba(0,0,0,0.5);
$black-60:  rgba(0,0,0,0.6);
$black-70:  rgba(0,0,0,0.7);
$black-80:  rgba(0,0,0,0.8);
$black-90:  rgba(0,0,0,0.9);
$black-100: rgba(0,0,0,1);
*/

/* _____________background_____________*/

.bg-dark-xs{ background-color: rgba(0,0,0,0.1); }
.bg-dark-s { background-color: rgba(0,0,0,0.3); }
.bg-dark-m { background-color: rgba(0,0,0,0.5); }
.bg-dark-l { background-color: rgba(0,0,0,0.9); }
.bg-dark-xl{ background-color: rgba(0,0,0,1); }

.bg-light-xs{ background-color: rgba(255,255,255,0.1); }
.bg-light-s { background-color: rgba(255,255,255,0.3); }
.bg-light-m { background-color: rgba(255,255,255,0.5); }
.bg-light-l { background-color: rgba(255,255,255,0.9); }
.bg-light-xl{ background-color: rgba(255,255,255,1); }



/* _____________opacity_____________*/

.opacity-xs{ background: rgba(255,255,255,0.1); }
.opacity-s { background: rgba(255,255,255,0.3); }
.opacity-m { background: rgba(255,255,255,0.5); }
.opacity-l { background: rgba(255,255,255,0.9); }
.opacity-xl{ background: rgba(255,255,255,1); }

/* _____________space_____________*/

.padding-s{ padding: 3px; }
.padding-m{ padding: 6px; }
.padding-l{ padding: 9px; }
.padding-xl{ padding: 12px; }
.padding-xxl{ padding: 24px; }

.nomargin{ margin: 0 }
.nopadding{ padding: 0 }

.margin-top-s{ margin-top : 10px }
.margin-top-m{ margin-top : 20px }
.margin-top-l{ margin-top : 30px }

/* _____________font_____________*/

.font-size-s{ font-size: 10px }
.font-size-m{ font-size: 13px }
.font-size-l{ font-size: 16px }
.font-size-xl{ font-size: 20px }
.font-size-xxl{ font-size: 24px }



/* _____________ btn _____________*/

.btn-simple, .btn-blue, .btn-white, .btn-black, .btn-grey, .btn-green, .btn-yellow, .btn-orange, .btn-red{
display: inline-block;
cursor: pointer;
border-radius: 4px;
padding: 6px 10px;
margin-bottom:4px;
font-size: 15px;
font-weight: 100;
text-decoration: none;
text-align: center;
border: none;
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
user-select: none; /* Propriété standard */
}

.btn-simple:hover, .btn-blue:hover, .btn-white:hover, .btn-black:hover, .btn-grey:hover, .btn-green:hover, .btn-yellow:hover, .btn-orange:hover, .btn-red:hover{
filter:brightness(110%);
}

.btn-small{
  padding: 3px 5px;
  font-size: 13px;
}

.btn-simple{
  color: #333;
  background-color: #ffcd26;
}


.btn-black{
  color: #fff;
  background-color: #152532;
}

.btn-grey{
  color: #333;
  background-color: #dfdfdf;
}

.btn-blue{
  color: #FFF;
  background-color: #2f6d9f;
}

.btn-white{
  color: #333;
  background-color: #fff;
}

.btn-green{
  color: #FFF;
  background-color: green;
}


.btn-yellow{
  color: #333;
  background-color: yellow;
}
.btn-orange{
  color: #FFF;
  background-color: orange;
}
.btn-red{
  color: #FFF;
  background-color: #fc0d1a;
}

.btn:hover, .btn-blue:hover, .btn-green:hover, .btn-yellow:hover, .btn-orange:hover, .btn-red:hover, .btn1:hover, .btn2:hover, .btn3:hover{
filter: brightness(110%);
}

.btn-big{
font-size: 18px;
font-weight: 400;
}
.btn-txt-white{
color: #fff;
}
.btn-txt-black{
color: #000;
}


/* _____________badge_____________*/

.badge{
border-radius:3px;
padding: 3px;
}

/* _____________border_____________*/

.border-radius-s{ border-radius:3px  }
.border-radius-m{ border-radius:6px  }
.border-radius-l{ border-radius:10px  }

.border-light-s{ border: 1px solid rgba(255,255,255,0.3) }
.border-light-m{ border: 1px solid rgba(255,255,255,0.5) }
.border-light-l{ border: 1px solid rgba(255,255,255,0.9) }

.border-dark-s{ border: 1px solid rgba(0,0,0,0.3) }
.border-dark-m{ border: 1px solid rgba(0,0,0,0.5) }
.border-dark-l{ border: 1px solid rgba(0,0,0,0.9) }

.border-bottom{ border-width: 0px 0px 1px 0px;}

.dotted{ border-style: dotted;}
.dashed{ border-style: dashed;}


.space-s{ clear: both; height: 10px}
.space-m{ clear: both; height: 20px}
.space-l{ clear: both; height: 30px}

hr{
clear: both; height: 30px; border:none;display: block; width: 100%;
}

.w100{
width: 100%;
}

/* _____________ size _____________*/


.xsmall{ font-size: 10px }
.small{ font-size: 12px }
.normal{ font-size: 14px }
.large{ font-size: 16px }
.xlarge{ font-size: 18px }
.xxlarge{ font-size: 20px }
.xxxlarge{ font-size: 22px }


/* _____________ align _____________*/

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

.float-right{
  float: right;
}
.float-left{
  float: left;
}
.float-none{
  float: none;
}


/* _____________ decoration _____________*/

.decoration-none{
  text-decoration:none;
}
.decoration-underline{
  text-decoration:underline;
}
.decoration-through{
  text-decoration:line-through;
}


/* _____________ case _____________*/


.normalcase{
text-transform:none;
}
.uppercase{
text-transform:uppercase;
}
.lowercase{
text-transform:lowercase;
}


/* _____________ center _____________*/



.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-center-x{
  display: flex;
  justify-content: center;
}
.flex-center-y{
  display: flex;
  align-items: center;
}

.flex-between{
  display: flex;
  justify-content: space-between;
}

.flex-around{
  display: flex;
  justify-content: space-around;
}

.flex{
display: flex;
align-items: center;
}
.flex-row{
  display: flex;
  flex-direction: row;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

/* _____________ zoning _____________*/


.bloc{
padding: 20px;
background: #efefef;
border-radius: 2px;
}

.zoning{
margin: 20px 0px;
display: flex;
justify-content: center;
align-items: center;
background: #efefef;
min-height: 300px;
color: #444;
}


/* _____________ cols _____________*/

.c2,.c3,.c4,.c5,
.c2sameonmob, .c3sameonmob, .c4sameonmob, .c5sameonmob,
.c2largeonpad, .c3largeonpad, .c4largeonpad, .c5largeonpad,
.c4toc2onmob{
  display: flex;
  justify-content: space-between;
}

.c2 > .c { width: 48% }
.c3 > .c { width: 31% }
.c3 > .cc { width: 62% }
.c4 > .c { width: 23% }
.c4 > .cc { width: 50% }
.c4 > .ccc { width: 75% }
.c5 > .c { width: 18% }
.c5 > .cc { width: 38% }
.c5 > .ccc { width: 58% }
.c5 > .cccc { width: 78% }

.c2sameonmob > .c { width: 48% }
.c3sameonmob > .c { width: 31% }
.c3sameonmob > .cc { width: 62% }
.c4sameonmob > .c { width: 23% }
.c4sameonmob > .cc { width: 50% }
.c4sameonmob > .ccc { width: 75% }
.c5sameonmob > .c { width: 18% }

.c2largeonpad > .c { width: 48% }
.c3largeonpad > .c { width: 31% }
.c3largeonpad > .cc { width: 62% }
.c4largeonpad > .c { width: 23% }
.c4largeonpad > .cc { width: 50% }
.c4largeonpad > .ccc { width: 75% }
.c5largeonpad > .c { width: 18% }

.c4toc2onmob > .c { width: 23% }
.cXtoc2onmob > .c {   }


@media screen and (max-width: 1180px)
{
  .nomob{ display: none }
  body .mobonly { display: block; }
  .desktoponly{ display:none; }

  .c2largeonpad,.c3largeonpad,.c4largeonpad,.c5largeonpad{
  flex-flow: column;
  }

  .c2largeonpad > .c { width: 100% }
  .c3largeonpad > .c { width: 100% }
  .c3largeonpad > .cc { width: 100% }
  .c4largeonpad > .c { width: 100% }
  .c4largeonpad > .cc { width: 100% }
  .c4largeonpad > .ccc { width: 100% }
  .c5largeonpad > .c { width: 100% }

}


@media screen and (max-width: 1180px)
{
  .c2,.c3,.c4,.c5{
  flex-flow: column;
  }
  .mob-row-reverse{
  flex-direction: row-reverse;
  }
  .mob-column-reverse{
  flex-direction: column-reverse;
  }
  .c2 > .c { width: 100% }
  .c3 > .c { width: 100% }
  .c3 > .cc { width: 100% }
  .c4 > .c { width: 100% }
  .c4 > .cc { width: 100% }
  .c4 > .ccc { width: 100% }
  .c4 > .ccc { width: 100% }
  .c5 > .c { width: 100% }
  .c5 > .cc { width: 100% }
  .c5 > .ccc { width: 100% }
  .c5 > .cccc { width: 100% }

  .c4toc2onmob { flex-wrap: wrap}
  .c4toc2onmob > .c { width: 48%; }

  .rowonmob{ flex-flow: row; }
  .c2onmob > .c,
  .c2onmob > .cc,
  .c2onmob > .ccc { width: 48%; flex-wrap: wrap  }

  .align-center-onmob{text-align: center;}


}

.nomob{}
.mobonly{ display:none; }
.desktoponly{ display:block; }