/* ====MAIN============================*/
.training-bg {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url(/Images/MCI-site/Backgrounds/MCI-Background_5.jpg);
/*animation: animate-pos-main, animate-sca-main 30s ease-in-out infinite alternate-reverse;*/
}

@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) {
  .training-bg {
  padding-bottom: 18rem;
  }
  }
@media (min-width: 500px) {
  .training-bg {
  padding-bottom: 18rem;
  }
  }
@media (min-width: 1000px) {
.training-bg {
padding-bottom: 20rem;
}
}
@media (min-width: 1050px) {
.training-bg {
padding-bottom: 24rem;
}
}
@media (min-width: 1300px) {
.training-bg {
padding-bottom: 32rem;
}
}
@media (min-width: 1400px) {
.training-bg {
padding-bottom: 20rem;
}
}
@media (min-width: 1800px) {
.training-bg {
padding-bottom: 40rem;
}
}


/* ====HEADLINES============================*/
.caption-upper-training {
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-upper-training {
  margin-top: 8rem;
  }
  .caption-lower-training {
  margin-top: 0rem;
  }
  .caption-upper-training h1{
    font-size: 2rem;
    line-height: 2.5rem;    
    }
    .caption-upper-training h2{
    font-size: 1rem;
    line-height: 1.5rem;    
    }
    .caption-lower-training h1{
    font-size: 2rem;
    line-height: 1rem;    
    }
    .caption-lower-training h2{
    font-size: 1.2rem;
    line-height: 2rem;    
    }
  }
@media (min-width: 500px) {
.caption-upper-training {
margin-top: 6rem;
}
.caption-lower-training {
margin-top: 2rem;
}
.caption-upper-training h1{
  font-size: 2rem;
  line-height: 2.5rem;    
  }
  .caption-upper-training h2{
  font-size: 1.5rem;
  line-height: 2rem;    
  }
  .caption-lower-training h1{
  font-size: 2rem;
  line-height: 2.5rem;    
  }
  .caption-lower-training h2{
  font-size: 1.2rem;
  line-height: 2rem;    
  }
}
@media (min-width: 1000px) {
.caption-upper-training {
margin-top: 8rem;
}
.caption-lower-training {
margin-top: 2rem;
}
.caption-upper-training h1{
  font-size: 2rem;
  line-height: 2.5rem;    
  }
  .caption-upper-training h2{
  font-size: 1.5rem;
  line-height: 2rem;    
  }
  .caption-lower-training h1{
  font-size: 2rem;
  line-height: 3.5rem;    
  }
  .caption-lower-training h2{
  font-size: 1.5rem;
  line-height: 2rem;    
  }
}
@media (min-width: 1050px) {
.caption-upper-training {
margin-top: 6rem;
}
.caption-lower-training {
margin-top: 3rem;
}
}
@media (min-width: 1300px) {
.caption-upper-training {
margin-top: 8rem;
}
.caption-lower-training {
margin-top: 6rem;
}
}
@media (min-width: 1400px) {
.caption-upper-training {
margin-top: 6rem;
}
.caption-lower-training {
margin-top: 2rem;
}
}
@media (min-width: 1800px) {
.caption-upper-training {
margin-top: 10rem;
}
.caption-lower-training {
margin-top: 6rem;
}
.caption-upper-training h1{
font-size: 10rem;
line-height: 3.5rem;    
}
.caption-upper-training h2{
font-size: 3rem;
line-height: 3.5rem;    
}
.caption-lower-training h1{
font-size: 3rem;
line-height: 4.5rem;    
}
.caption-lower-training h2{
font-size: 2rem;
line-height: 2.5rem;    
}
}

/*==TRAINING-BOX============*/
.training-box {
padding-top: 16rem;
position: relative;
}
.tab-title-training {
text-transform: uppercase;
color: var(--clr-1);
font-family: raleway, sans-serif;
font-weight: 600; 
font-size: 1.5rem; 
margin-top: 0rem;
text-shadow:1px 1px 4px  #00000035;
}
.training-content {
  width: 80%;
  background-color: #75a8b466; 
  border-radius: 20px; 
  height: 14rem;
  position: relative;
  }

.points-training {
width: 20rem;
color: var(--clr-1);
font-size: 1rem; 
line-height: 1.3rem;
letter-spacing: 1px;
margin-top: 1.5rem;
padding-left: 1rem;
}


@media (max-width: 500px) {
.training-box {
padding-top: 16rem;
position: relative;
width: 24rem;
}
.training-content {
width: 100%;
background-color: #75a8b466; 
border-radius: 20px; 
height: 20rem;
position: relative;
}
.tab-title-training {
  font-size: 1.5rem; 
  margin-top: -1rem;
  }
  .tab-training-links {
  width: 100%;
  margin-top: -10rem;
  margin-left: 0rem; 
  position: absolute;
  }
  .tab-content-training {
  background-color: transparent; 
  color: #000;
  margin-left: -4rem;
  text-align: left;
  width: fit-content;
  }

.points-training {
  width: 20rem;
  font-size: 1rem; 
  line-height: 1.3rem;
  letter-spacing: 1px;
  margin-top: .5rem;
  padding-left: 1rem;
  }
  .svg-button-width-1 {
    width: 100%;
    padding-left: 0rem;
    padding-top: 0rem;
    }
    .svg-button-width-2 {
    width: 50%;
    padding-left: 0rem;
    padding-top: 3rem;
    }
  }
@media (min-width: 500px) {
.training-box {
padding-top: 14rem;
position: relative;
width: 80rem;
}
.training-content {
  width: 80%;
  background-color: #75a8b466; 
  border-radius: 20px; 
  height: 34rem;
  position: relative;
  }
  .tab-title-training {
    font-size: 1.5rem; 
    margin-top: 0rem;
    }
.tab-training-links {
width: 90%;
margin-top: -6rem;
margin-left: 2rem; 
position: absolute;
}
.tab-content-training {
background-color: transparent; 
color: #000;
margin-left: -4rem;
text-align: left;
width: fit-content;
}

.points-training {
  width: 20rem;
  font-size: 1rem; 
  line-height: 1.3rem;
  letter-spacing: 1px;
  margin-top: 1.5rem;
  padding-left: 1rem;
  }
.svg-button-width-1 {
  width: 100%;
  padding-left: 6rem;
  padding-top: 2rem;
  }
  .svg-button-width-2 {
  width: 70%;
  margin-left: 0rem;
  margin-top: 4rem;
  }
}
@media (min-width: 1000px) {
.training-box {
padding-top: 16rem;
position: relative;
width: 80rem;
}
.tab-training-links {
width: 50%;
margin-top: -18rem;
margin-left: 23rem; 
position: absolute;
}

.training-content {
width: 80%;
background-color: #75a8b466; 
border-radius: 20px; 
height: 14rem;
position: relative;
}
.points-training {
width: 20rem;
margin-top: .5rem;
padding-left: 0rem;
}

.svg-button-width-1 {
width: 100%;
padding-left: 6rem;
padding-top: 2rem;
}
.svg-button-width-2 {
width: 70%;
margin-left: 0rem;
margin-top: 4rem;
}

}
@media (min-width: 1100px) {
.training-box {
padding-top: 16rem;
position: relative;
}
.tab-training-links{
margin-top: -18rem;
margin-left: 24rem; 

}
.points-training {
width: 30rem;
}
}
@media (min-width: 1300px) {
.training-box {
padding-top: 18rem;
position: relative;
}
.tab-training-links {
margin-top: -18rem;
margin-left: 26rem; 

}
.points-training {
width: 20rem;
margin-top: .5rem;
padding-left: 0rem;
}
.svg-button-width-1 {
width: 100%;
padding-left: 6rem;
padding-top: -10rem;
}
.svg-button-width-2 {
width: 70%;
margin-left: 0rem;
margin-top: 4rem;
}
}
@media (min-width: 1400px) {
.training-box {
padding-top: 16rem;
position: relative;
}
.tab-training-links {
width: 50%;
margin-top: -19rem;
margin-left: 30rem; 

}
.points-training {
width: 26rem;
}
}
@media (min-width: 1800px) {
.training-box {
padding-top: 24rem;
position: relative;
width: 200rem;
}
.tab-training-links {
margin-top: -16rem;
margin-left: 36rem; 

}
.training-content {
width: 100%;
height: 18rem;
}
.points-training {
width: 30rem;
margin-top: .5rem;
padding-left: 0rem;
}
.svg-button-width-1 {
width: 100%;
padding-left: 0rem;
padding-top: 3rem;
}
.svg-button-width-2 {
width: 50%;
padding-left: 10rem;
padding-top: 3rem;
}
}