
@media (min-width: 768px) {

    /* About Us Section
  --------------------------------*/

  .protocols-mobile {
    display: none;
  }

  .protocols-type {
    list-style: none;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
  }

  .protocols-type li {
    cursor: pointer;
    margin: 0 15px 15px 0;
    display: inline-block;
    padding: 6px 20px;
    font-size: 12px;
    line-height: 20px;
    color: #1954a4;
    border-radius: 50px;  
    background: #ecf5ff;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
  }

  .protocols-type li:hover,
  .protocols-type li.filter-active {
    background: #1954a4;
    color: #fff; 
  }

  .protocols-type li:hover a {
    color: #fff; 
  }

  .protocols-type li:last-child {
    margin-right: 0;
  }

  #protocol .protocols {
    display: none;
  }

  #protocol #body-treatments {
    display: flex;
  }

  #protocol .protocols .background {
    animation: slideOut .3s forwards;
  }

  #protocol .protocols .background.show {  
    animation: slideIn .3s forwards;
  }

  #protocol .protocols .background .body-protocol {
    display: none;
  }

  #protocol .protocols .background #hidrolipo {
    display: flex;
  }

  #protocol .protocols .background .body-protocol img,
  #protocol .protocols .background .facial-protocol img,
  #protocol .protocols .background .hair-protocol img,
  #protocol .protocols .background .relaxing-protocol img {
    border-radius: 30px;  
    width: 100%;  
  }

  #protocol .protocols .background .body-protocol h2,
  #protocol .protocols .background .facial-protocol h2,
  #protocol .protocols .background .hair-protocol h2,
  #protocol .protocols .background .relaxing-protocol h2 {
    font-weight: 700;
    color: #1954a4;
  }

  #protocol .protocols .background .body-protocol h4 {
    font-weight: 700;
  }

  #protocol .protocols .background .body-protocol p,
  #protocol .protocols .background .facial-protocol p,
  #protocol .protocols .background .hair-protocol p,
  #protocol .protocols .background .relaxing-protocol p,
  #protocol .protocols .background .body-protocol ul li,
  #protocol .protocols .background .facial-protocol ul li,
  #protocol .protocols .background .hair-protocol ul li,
  #protocol .protocols .background .relaxing-protocol ul li {  
    color: #777;
  }

  #protocol .btn-container-protocols {
    display: flex;
    justify-content: left;
    margin-top: 20px;   
  }  

  #protocol .btn-container-protocols .btn-assessment {  
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 32px;
    border-radius: 50px;
    transition: 0.5s;  
    color: #fff;
    background: #1954a4; 
    border: 2px solid #1954a4;   
    animation: slideOut .3s forwards;
  }

  #protocol .btn-container-protocols .btn-assessment.show {  
    animation: slideIn .3s forwards;
  }

  #protocol .btn-container-protocols .btn-assessment:hover {
    background:  #6ec5a6;  
    border-color: #6ec5a6;
    color: #fff;
  }

  #protocol .protocols .content {
    background: #fff;
  }
  
  #protocol .protocols .content .protocols-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #protocol .protocols .content .protocols-list li {
    font-size: 16px;
    color: #777;  
    padding: 5px 10px 5px 0;
    letter-spacing: -0.5px; 
    font-weight: 550;   
    text-transform: uppercase;
    position: relative;
    transition: color 0.005s;
  }

  #protocol .protocols .content .protocols-list li a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 5px 0;
  }

  #protocol .protocols .content .protocols-list li::after {  
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #eee;
    transition: background-color 0.2s;  
  }

  #protocol .protocols .content .protocols-list li:hover {
    color: #6ec5a6;  
  }

  #protocol .protocols .content .protocols-list li:hover::after {
    background-color: #6ec5a6;  
    width: 2.5px;
  }

  #protocol .protocols .content .protocols-list li.active {
    color: #1954a4;   
  }

  #protocol .protocols .content .protocols-list li.active::after {
    background-color: #1954a4; 
    width: 2.5px;
  }

  #protocol .protocols .title {
    color: #333;
    font-weight: 700;
    font-size: 32px;
  }

  #protocol .protocols p {
    line-height: 26px;
  }

  #protocol .protocols p:last-child {
    margin-bottom: 0;
  }

  #protocol .protocols .icon-box {
    background: #fff;
    background-size: cover;
    padding: 0 0 30px 0;
  }

  #protocol .protocols .icon-box .icon {
    float: left;
    background: #fff;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid #007bff;
    transition: all 0.3s ease-in-out;
  }

  #protocol .protocols .icon-box .icon i {
    color: #007bff;
    font-size: 24px;
    line-height: 0;
  }

  #protocol .protocols .icon-box:hover .icon {
    background: #007bff;
  }

  #protocol .protocols .icon-box:hover .icon i {
    color: #fff;
  }

  #protocol .protocols .icon-box .title {
    margin-left: 80px;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 18px;
  }

  #protocol .protocols .icon-box .title a {
    color: #283d50;
  }

  #protocol .protocols .icon-box .description {
    margin-left: 80px;
    line-height: 24px;
    font-size: 14px;
  }

  #protocol .about-extra {
    padding-top: 60px;
  }

  #protocol .about-extra h4 {
    font-weight: 600;
    font-size: 24px;
  }  
}