.main-fond{
    padding: 65px 0;
}
ol.gradient-list > li, ol.gradient-list > li::before {
    -webkit-box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.05);
            box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.05);
  }
  .link-color{
    color: #12557f !important;
}
.link-color:hover{
    text-decoration: underline !important;
}
.fond-title{
    font-size: 40px;
    text-align: center;
    margin-bottom: 20px;
}
ol.gradient-list {
    counter-reset: gradient-counter;
    list-style: none;
    margin: 1.75rem 0;
    padding-left: 1rem;
  }
  
  ol.gradient-list > li {
    background: white;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    counter-increment: gradient-counter;
    margin-top: 1rem;
    min-height: 3rem;
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
  }
  
  ol.gradient-list > li::before, ol.gradient-list > li::after {
    background: linear-gradient(135deg, #83e4e2 0%, #a2ed56 100%);
    border-radius: 1rem 1rem 0 1rem;
    content: '';
    color: #12557f;
    
    height: 3rem;
    left: -1rem;
    overflow: hidden;
    position: absolute;
    top: -1rem;
    width: 3rem;
  }
  
  ol.gradient-list > li::before {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    content: counter(gradient-counter);
    color: #1d1f20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font: 900 1.5em/1 'Montserrat';
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 0.125em 0.25em;
    z-index: 1;
  }
  
  ol.gradient-list > li:nth-child(10n+1):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0.2) 0%, rgba(253, 220, 50, 0.2) 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+2):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0.4) 0%, rgba(253, 220, 50, 0.4) 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+3):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0.6) 0%, rgba(253, 220, 50, 0.6) 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+4):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0.8) 0%, rgba(253, 220, 50, 0.8) 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+5):before {
    background: linear-gradient(135deg, #a2ed56 0%, #fddc32 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+6):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0.8) 0%, rgba(253, 220, 50, 0.8) 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+7):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0.6) 0%, rgba(253, 220, 50, 0.6) 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+8):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0.4) 0%, rgba(253, 220, 50, 0.4) 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+9):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0.2) 0%, rgba(253, 220, 50, 0.2) 100%);
  }
  
  ol.gradient-list > li:nth-child(10n+10):before {
    background: linear-gradient(135deg, rgba(162, 237, 86, 0) 0%, rgba(253, 220, 50, 0) 100%);
  }
  
  ol.gradient-list > li + li {
    margin-top: 2rem;
  }
  
  .face-button {    
    padding-left: 0.2px;
    height: 65px;
    display: inline-block;
    border: 3px solid #e43;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: #e43 !important;
    overflow: hidden;
  }
  
  .face-button .icon {
    margin-right: 6px;
  }
  
  .face-button .face-primary,
  .face-button .face-secondary {
    display: block;
    padding: 0 32px;
    line-height: 64px;
    -webkit-transition: margin .4s;
    transition: margin .4s;
  }
  
  .face-button .face-primary {
    background-color: #e43;
    color: #fff;
  }
  
  .face-button:hover .face-primary {
    margin-top: -64px;
  }