/* ====MAIN============================*/
.solution-bg {
    width: 100vw;
    height: 100vh;


justify-content: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(/Images/MCI-site/Backgrounds/MCI-Background_2.jpg);
}
  @keyframes animate-sca-main {
  0% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
  }
  @keyframes animate-pos-main {
    0% {background-position: 0% 100%;}
    100% {background-position: 100% 70%;}
  }
  @media (max-width: 500px) {
    .solution-bg {
      margin-top: 0;
       padding-top: 8rem;
    padding-bottom: 10rem;
  }
}
  @media (min-width: 500px) {
    .solution-bg {
      margin-top: 0;
       padding-top: 10rem;
    padding-bottom: 16rem;
  }
}
  @media (min-width: 1000px) {
    .solution-bg {
       padding-top: 8rem;
    padding-bottom: 20rem;
  }
}
@media (min-width: 1050px) {
    .solution-bg {
       padding-top: 8rem;
    padding-bottom: 30rem;
  }
}
@media (min-width: 1300px) {
    .solution-bg {
       padding-top: 8rem;
    padding-bottom: 36rem;
  }
}
@media (min-width: 1400px) {
    .solution-bg {
       padding-top: 8rem;
    padding-bottom: 16rem;
  }
}
@media (min-width: 1800px) {
    .solution-bg {
       padding-top: 12rem;
    padding-bottom: 24rem;
  }
}
  
  
/* ====HEADLINES============================*/
.caption-solution {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--white);
    text-shadow: black 1px 1px 2px;
  }
    .caption-lower-training {
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center;
      color: var(--white);
      text-shadow: black 1px 1px 2px;
    }
@media (max-width: 500px) {
  .caption-solution {
    margin-top: 1rem;
  }
} 
@media (min-width: 500px) {
  .caption-solution {
    margin-top: 0rem;
  }
} 
@media (min-width: 1000px) {
.caption-solution {
  margin-top: 0rem;
}

}
@media (min-width: 1050px) {
.caption-solution {
  margin-top: 0rem;
}
}
@media (min-width: 1300px) {
.caption-solution {
  margin-top: 0rem;
}
}
@media (min-width: 1400px) {
.caption-solution {
  margin-top: 0rem;
}
}
@media (min-width: 1800px) {
.caption-solution {
  margin-top: 0rem;
}
.caption-solution h1{
  font-size: 3rem;
  line-height: 3.5rem;    
  }
  .caption-solution h2{
    font-size: 3rem;
    line-height: 3.5rem;    
    }

}

/*==SOLUTION-BOX============*/
@media (max-width: 500px) {
  .solution-box {
    margin-top: 6rem;
    margin-right: 0;
    background-color:#3899a2ba;
    height: 16rem;
    border-radius: 0px 20px 20px 0px; 
    text-align: center;
    width: 24rem;
    
  }
  .solution-img {

    opacity: 0;
  }
  .tab-content {
    background-color: transparent; 
    color: #000;
    margin-left: -8rem;
    text-align: left;
    width: fit-content;
    padding-right: 1rem;
  }
  
.tab-title-solution {
  text-transform: uppercase;
  color: var(--white);
  font-weight: 400; 
  letter-spacing: 8px;
  font-size: 2rem; 
  margin-top: 0rem;
  padding-left: 10rem;
  text-shadow:1px 1px 10px  #000000a1;
  text-align: left;
  }      
  .points-solution {
    font-size: 1rem; 
    line-height: 1rem;
    letter-spacing: 1px;
    text-align: left;
    padding-bottom: .5rem;
    padding-top: .5rem;
    padding-left: 10rem;
    width: 30rem;
    }
 
    .svg-button-width-1 {
      width: 34rem;
      margin-left: -4rem;
      margin-top: .3rem;
      z-index: 1;
      }
    .svg-button-width-2 {
      width: 16rem;
      margin-top: -2rem;
      margin-left: 1rem;
      
      }
  }
@media (min-width: 500px) {
    .solution-box {
      margin-top: 9rem;
      margin-right: 0;
      padding: .5rem 0rem 2rem 10rem; 
      background-color:#177e8998;
      height: 16rem;
      border-radius: 0px 20px 20px 0px; 
      text-align: center;
      width: 47rem;
      
    }
    .solution-img {
      width: 28rem; 
      margin-top: -1rem;
      margin-left: -1.5rem;
    }
    .tab-content {
      background-color: transparent; 
      color: #000;
      margin-left: -8rem;
      text-align: left;
      width: fit-content;
      padding-right: 1rem;
    }
    
.tab-title-solution {
    text-transform: uppercase;
    color: var(--white);
    font-weight: 400; 
    letter-spacing: 8px;
    font-size: 2rem; 
    margin-top: 0rem;
    text-shadow:1px 1px 10px  #000000a1;
    text-align: center;
    padding-left: 0;
    }      
    .points-solution {
      font-size: .8rem; 
      line-height: 1rem;
      letter-spacing: 1px;
      text-align: center;
      padding-bottom: .5rem;
      padding-top: .5rem;
      padding-left: 0;
      }
   
      .svg-button-width-1 {
        width: 40rem;
        margin-left: 2rem;
        margin-top: 4rem;
        z-index: 1;
        }
      .svg-button-width-2 {
        width: 10rem;
        margin-top: -2rem;
        margin-left: 22rem;
        
        }
    }
@media (min-width: 1000px) {
.solution-box {
  margin-top: 7rem;
  margin-right: 10%;
  height: 11rem;
  width: 60rem;
  padding-left: -10rem;
}
.solution-img {
  width: 22rem; 
  margin-top: -1.5rem;
  margin-left: 1rem;
}
.tab-content {
  margin-left: 0rem;
}

.tab-title-solution {
font-size: 2rem; 
margin-top: 0rem;
}      
.points-solution {
  font-size: .8rem; 
  line-height: 1rem;
  padding-bottom: .5rem;
  padding-top: .5rem;
  }
  .tab-link-position {
    margin-top: -4rem;
    margin-left: 4rem;
  }
  .svg-button-width-1 {
    width: 40rem;
    margin-left: -1rem;
    margin-top: 0rem;
    }
  .svg-button-width-2 {
    margin-top: 0rem;
    width: 10rem;
    margin-left: -1rem;
    }
}
@media (min-width: 1050px)  {
    .solution-box {
      margin-top: 9rem;
      margin-right: 10%;
      height: 11rem;
      width: 60rem;
      padding-left: -10rem;
    }
    .solution-img {
      width: 22rem; 
      margin-top: -1.5rem;
      margin-left: 1rem;
    }
    .tab-content {
      margin-left: 0rem;
    }
    
.tab-title-solution {
    font-size: 2rem; 
    margin-top: 0rem;
    }      
    .points-solution {
      font-size: .8rem; 
      line-height: 1rem;
      padding-bottom: .5rem;
      padding-top: .5rem;
      }
      .tab-link-position {
        margin-top: -4rem;
        margin-left: 4rem;
      }
      .svg-button-width-1 {
        width: 40rem;
        margin-left: -1rem;
        margin-top: 0rem;
        }
      .svg-button-width-2 {
        margin-top: 0rem;
        width: 10rem;
        }
    }   
@media (min-width: 1300px)  {
    .solution-box {
      margin-top: 9rem;
      margin-right: 10%;
      height: 11rem;
      width: 74rem;
      padding-left: 10rem;
    }
    .solution-img {
      width: 26rem; 
      margin-top: -2.5rem;
      margin-left: 1rem;
    }
    .tab-content {
      margin-left: 4rem;
    }
    
.tab-title-solution {
    font-size: 2rem; 
    margin-top: 0rem;
    }      
    .points-solution {
      font-size: .8rem; 
      line-height: 1rem;
      padding-bottom: .5rem;
      padding-top: .5rem;
      }
      .tab-link-position {
        margin-top: -4rem;
        margin-left: 4rem;
      }
      .svg-button-width-1 {
        width: 40rem;
        margin-left: 6rem;
        margin-top: 0rem;
        }
      .svg-button-width-2 {
        margin-top: 0rem;
        width: 10rem;
        }
    }
@media (min-width: 1400px)  {
        .solution-box {
          margin-top: 9rem;
          margin-right: 10%;
          height: 11rem;
          width: 80rem;
          padding-left: 14rem;
        }
        .solution-img {
          width: 26rem; 
          margin-top: -2.5rem;
          margin-left: 1rem;
        }
        .tab-content {
          margin-left: 4rem;
        }
        
    .tab-title-solution {
        font-size: 2rem; 
        margin-top: 0rem;
        }      
        .points-solution {
          font-size: .8rem; 
          line-height: 1rem;
          padding-bottom: .5rem;
          padding-top: .5rem;
          }
          .tab-link-position {
            margin-top: -4rem;
            margin-left: 4rem;
          }
          .svg-button-width-1 {
            width: 50rem;
            margin-left: 0rem;
            margin-top: 0rem;
            }
          .svg-button-width-2 {
            margin-top: 0rem;
            width: 10rem;
            }
        }  
@media (min-width: 1800px) {
    .solution-box {
      margin-top: 16rem;
      margin-right: 5%;
      height: 14rem;
      width: 110rem;
      padding-left: -10rem;
    }
    .solution-img {
      width: 32rem; 
      margin-top: -3.5rem;
      margin-left: 1rem;
    }
    .tab-content {
      margin-left: 10rem;
    }
    
.tab-title-solution {
    font-size: 2.5rem; 
    margin-top: 0rem;
    }      
    .points-solution {
      font-size: 1rem; 
      line-height: 1.2rem;
      padding-bottom: .5rem;
      padding-top: .5rem;
      }

      .svg-button-width-1 {
        width: 60rem;
        margin-left: 12rem;
        margin-top: 8rem;
        }
        .svg-button-width-2 {
            margin-top: 8rem;
            margin-left: -10rem;
            width: 30rem;
            }
    }          
@media (min-width: 2400px) {
    .solution-box {
      margin-top: 16rem;
      margin-right: 5%;
      height: 16rem;
      width: 130rem;
      padding-left: -30rem;
    }
    .solution-img {
      width: 40rem; 
      margin-top: -4.5rem;
      margin-left: 1rem;
    }
    .tab-content {
      margin-left: 30rem;
    }
    
.tab-title-solution {
    font-size: 3rem; 
    margin-top: 0rem;
    }      
    .points-solution {
      font-size: 1rem; 
      line-height: 1.2rem;
      padding-bottom: .5rem;
      padding-top: .5rem;
      }

      .svg-button-width-1 {
        width: 60rem;
        margin-left: 30rem;
        margin-top: 8rem;
        }
        .svg-button-width-2 {
            margin-top: 8rem;
            margin-left: -10rem;
            width: 30rem;
            }
    }