html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
@font-face {
  font-family: LouisGeorgeCafe;
  src: url("../design/fonts/Louis\ George\ Cafe\ Light.ttf");
}
@font-face {
  font-family: lemonmilk;
  src: url("../design/fonts/LEMONMILK-Light.otf");
}
@font-face {
  font-family: GeoSans;
  src: url("../design/fonts/GeoSans.ttf");
}
@font-face{
  font-family: tag_title;
  src: url("../design/fonts/subway.ttf");
}
html{
  font-family: "LouisGeorgeCafe";
  font-size: 1.2rem;
  /*pour firefox*/
  scrollbar-width: auto;
  scrollbar-color: #fdb5c5 rgb(230,230,230);
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar{
  width: auto;
  height: auto;
}
::-webkit-scrollbar-track{
  background-color: rgb(230,230,230);
}
::-webkit-scrollbar-thumb{
  background-color: #fdb5c5;
}
body{
  background-color: rgb(255, 255, 255);
}
table{
  border-collapse:collapse;
}
table td{
  vertical-align: middle;
}
ul li{
  list-style-type:none;
}
h1{
  font-family:"lemonmilk";
  text-transform: uppercase;
  color: rgb(100,100,100);
  text-align:center;
  font-size:1.7rem;
  text-shadow: 0.1rem 0.1rem 0.3rem rgb(230, 230, 230);
  margin-top:3rem;
  margin-bottom:5rem;
}
h2{
  font-family: "tag_title";
  font-size: 3rem;
  color: #fdb5c5;
  text-align: center;
}
h3{
  text-align:center;
  font-size: 1.4rem;
  color:rgb(255, 0, 64);
  margin-bottom:0.5rem;
}
h4{
  color:rgb(255, 0, 64);
  font-size: 1.35rem;

}
h5{
  font-size:1.25rem;
  color:rgb(255, 0, 64);
  margin:4rem 0 4rem 0;
  text-align:center;
}
h6{
  color:rgb(255,0,64);
  font-size: 1.25rem;
  text-align:center;
  margin-bottom:1.5rem;
}
hr{
  height: 1px !important;
  border: none;
  background: rgba(230,230,230);
  background: linear-gradient(90deg, rgba(230,230,230) 10%, #fdb5c5 50%, rgba(230,230,230) 90%); 
  margin-top:2rem;
  margin-bottom:4rem;
}
hr::after {
  content: '★';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  padding: 0.85rem;
  background-color: white;
}
a{
  color:rgb(255, 0, 64);
  text-decoration: none;
  transition: all 0.3s ease-out !important;
  -webkit-transition: 0.3s ease-out !important;
  -moz-transition: 0.3s ease-out !important;
  -o-transition: 0.3s ease-out !important;
}
a:hover{
  color: #fdb5c5;
}
a:active{
  color: black;
}
.underline{
  position: relative;
}
.underline::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0.05rem;
  background-color: #fdb5c5;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  -moz-transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  -o-transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) and (pointer: fine){
  .underline:hover::before{
    left: 0;
    right: auto;
    width: 100%;
  }
}
/*link a line under*/
.link{
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.link::before, .link::after{
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none;
}
.link::before{
  content: '';
}
.line-met::before{
  transform-origin: 50% 100%;
  transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  -webkit-transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  -moz-transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  -o-transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}
.line-met:hover::before{
  transform: translate3d(0, 1px, 0) scale3d(1.08, 1, 1);
  -webkit-transform: translate3d(0, 1px, 0) scale3d(1.08, 1, 1);
  -moz-transform: translate3d(0, 1px, 0) scale3d(1.08, 1, 1);
  -o-transform: translate3d(0, 1px, 0) scale3d(1.08, 1, 1);
  clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}
.line-met{
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  -webkit-transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  -moz-transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  -o-transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.line-met:hover{
  transform: translate3d(0, -1px, 0);
  -webkit-transform: translate3d(0, -1px, 0);
  -moz-transform: translate3d(0, -1px, 0);
  -o-transform: translate3d(0, -1px, 0);
}
.font-bold{
  font-weight: bold;
}
.parag{
  margin-top: 0rem;
  margin-bottom: 2rem;
}
.imgResponsive{
  height: auto;
  max-width: 100%;
}
#scrollUp{
  position: fixed;
  z-index: 5;
  bottom: 2rem;
  right: -10rem;
  margin-right:0.66rem;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  vertical-align: middle;
}
#fleche-up{
  color:white;
  text-align:center;
}
#btn_up{
  width:2rem;
  height:1.2rem;
  background-color: rgb(100,100,100);
  opacity: 25%;
  border-radius: 15%;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -o-transition: 0.3s ease;
}
#btn_up:hover{
  background-color: #fdb5c5;
  opacity: 85%;
}

/*BODY CONTENT*/
.body_content{
  margin: 0 auto 0 auto;
  max-width: 60rem;
  height:100%;
  padding-top: 4.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 7rem;
}

/*COMMISSION.HTML*/
#msg-contact{
  max-width:45rem;
  margin:0 auto;
}
.flotte-left {
  float:left;
  height:10rem;
  width:auto;
}
#table_resume, #table_resume td, #table_resume tr{
  padding: 0.2rem 2rem 0.2rem 2rem;
  border:1px solid #fdb5c5;
  border-collapse: collapse;
}
.table_title{
  color:rgb(255,0,64);
}
#comChart{
  max-width: 60rem;
  margin: 0 auto 0 auto;
}
#forbidden-list{
  color:rgb(255,0,64);
  margin-left:1rem;
  padding-bottom:2rem;
  padding-top:0.5rem;
}
.commission{
  background-color: white;
  color: #fdb5c5!important;
  border-top: 0.15rem solid #fdb5c5;
  animation: border 2.5s ease-in-out infinite;
  -webkit-animation: border 2.5s ease-in-out infinite;
  -moz-animation: border 2.5s ease-in-out infinite;
  -o-animation: border 2.5s ease-in-out infinite;
}
@keyframes border{
  25%{
    border-color: #fdb5c5;
  }
  50%{
    border-color: rgb(245, 245, 245);
  }
  75%{
    border-color: #fdb5c5;
  }
}

/*FOOTER*/
footer{
  font-family: "Corbel";
  color: rgb(115, 115, 115);
  font-size: 0.75rem;
  background-color: rgb(245, 245, 245);
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  margin-top:5rem;
  bottom:0;
}
#social_media{
  text-align: center;
  margin: 1rem auto 2rem auto;
}
#social_media img{
  border-radius: 50%;
}
#social_media img:hover{
  border-radius: 0.5rem;
  filter: hue-rotate(325deg);
  -webkit-filter: hue-rotate(325deg);
  -moz-filter: hue-rotate(325deg);
  -o-filter: hue-rotate(325deg);
}
.logo-media{
  height: 2rem;
  margin:0 0.2rem 0 0.2rem;
  transition:border-radius 0.15s ease, filter 0.5s ease;
  -webkit-transition:border-radius 0.15s ease, filter 0.5s ease;
  -moz-transition:border-radius 0.15s ease, filter 0.5s ease;
  -o-transition:border-radius 0.15s ease, filter 0.5s ease;
}
@media only screen and (max-width: 30rem){
    #br-icons{
      display:block;
    }
    #social_media{
      margin-bottom: 1rem;
    }
    .logo-media{
      height: 2rem;
      margin:0 0.6rem 0 0.6rem;
    }
}