/* ====MAIN============================*/
.team-bg {
  width: 100vw;
  height: 100%;
  margin: 0;
  padding: 0;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
background-image: url(/Images/MCI-site/Backgrounds/MCI-Background_1.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 (min-width: 500px) {
    .team-bg {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
  @media (min-width: 1000px) {
    .team-bg {
      padding-top: 8rem;
      padding-bottom: 8rem;
    }
  }
  
 /* ====HEADLINES============================*/
 .caption-team {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--white);
  }
 
  .caption-team h1{
    font-weight: 500;
    font-size: 2rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    line-height: 2.2rem;
   /* transition: scale 1.5sec ease-in;*/
    color: #ffffff;
    text-shadow: rgba(0, 0, 0, 1) 2px 2px 10px;
    margin-top: -1rem;
  }
  .caption-team h2{
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    line-height: 2.2rem;
   /* transition: scale 1.5sec ease-in;*/
    color: #ffffff;
    text-shadow: rgba(0, 0, 0, 1) 2px 2px 10px;
    margin-top: -1rem;
  }

    .caption-team-upper {
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center;
      color: var(--white);
    }
   
    .caption-team-upper h1{
      font-weight: 500;
      font-size: 2rem;
      letter-spacing: 8px;
      text-transform: uppercase;
      line-height: 2.2rem;
     /* transition: scale 1.5sec ease-in;*/
      color: #ffffff;
      text-shadow: rgba(0, 0, 0, 1) 2px 2px 10px;
      margin-top: -1rem;
    }
    .caption-team-upper h2{
      font-weight: 300;
      font-size: 1.5rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      line-height: 2.2rem;
     /* transition: scale 1.5sec ease-in;*/
      color: #ffffff;
      text-shadow: rgba(0, 0, 0, 1) 2px 2px 10px;
      margin-top: 0rem;
    
  }
  @media (max-width: 500px) {
    .caption-team-upper {
      margin-top: 10rem;
    }
      .caption-team-upper h1{
        font-size: 1.5rem;
        line-height: 2rem; 
         
        }
        .caption-team-upper h2{
          font-size: .8rem;
          line-height: 1.2rem;    
          }
    }
  @media (min-width: 500px) {
    .caption-team-upper {
      margin-top: 0rem;
    }
      .caption-team-upper h1{
        font-size: 2rem;
        line-height: 3.5rem; 
         
        }
        .caption-team-upper h2{
        
          font-size: 1rem;
          line-height: 2.5rem;    
          }
    }
  @media (min-width: 1000px) {
    .caption-team-upper {
      margin-top: 0rem;
    }
    .caption-team-upper h1{
      font-size: 2rem;
      line-height: 2.2rem;    
      }
      .caption-team-upper h2{
        font-size: 1.5rem;
        line-height: 2.2rem;    
        }
  }
  @media (min-width: 1050px) {
    .caption-team-upper {
      margin-top: 3rem;
    }
  }
  @media (min-width: 1300px) {
    .caption-team-upper {
      margin-top: 0rem;
    }
    .caption-lower {
     margin-top: 6rem;
    }
  }
  @media (min-width: 1400px) {
    .caption-team-upper {
      margin-top: 10rem;
    }
    .caption-team-upper{
     margin-top: 2rem;
    }
  }
  @media (min-width: 1800px) {
    .caption-team-upper {
      margin-top: 2rem;
    }
  
    .caption-team-upper h1{
      font-size: 2.5rem;
      line-height: 3.5rem;    
      }
      .caption-team-upper h2{
        font-size: 1.5rem;
        line-height: 2.5rem;    
        }
  
  }

   /*=TEAM BOX=======================*/
   @media (max-width: 500px) {
    .team-box {
      padding-top: 18rem;
     margin-left: 0rem;
   }
   }
   @media (min-width: 500px) {
    .team-box {
      margin-top: 12rem;
     margin-left: 0rem;
     padding-top: 0;
   }
   }
@media (min-width: 900px) {
  .team-box {
    margin-top: 8rem;
   margin-left: 0rem;
 }
 }
 @media (min-width: 1050px) {
   .team-box {
    margin-top: 10rem;
    margin-left: 0rem;
  }
  }
  @media (min-width: 1400px) {
   .team-box {
 margin-top: 8rem;
    margin-left: 0rem;
  }
  }
  @media (min-width: 2400px) {
   .team-box {
 margin-top: 14rem;
    margin-left: 6rem;
  }
  }


/*==CAROUSEL====================*/

.card_box {
	border-radius: 0px;
	margin: 2rem 0rem 2rem 0rem;
	transition: .3s;
	width: 16rem;
	max-height: 16rem;
	min-height: 16rem;
	padding-top: .4rem;
	background:none;

}

.card_box:hover {

	box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.05);
	transform: translateY(-10px);
}

.card_text {
	padding: .5rem;
	background-color:transparent;
	text-align: left;
}

.card_text h4 {
	font-size: .8rem;
	font-weight: 600;
	color:var(--clr-5);
	background-color: transparent;
	text-transform: uppercase;
}

.card_text p {
	 font-size:.6rem;
	 line-height: .8rem;
	 color: #ffffff;
	 font-weight: 100;
	 text-transform: uppercase;
	 padding-top: .5rem;
}


  .card-img-top-main {
	width: 7rem!important;
	border: 1px solid #7b7b7b;
	display: block;
	margin-left: .5rem;

	}


/*==MODAL=============================*/

/* Team Modal */
/* Modal fullscreen BG */
.modal-content-team {
  background-color: #0b031b57;
  z-index: -1;
}

.modal-body-team {
	margin-top: 10%;

	font-size: .9rem;
	color: var(--white);
	padding: 2rem;
	height:max-content;
	width: 80%; 
	background-image: var(--gradient);
	background-position: top;
}

.card-img-top-modal {
	width: 10rem!important;
	border: 2px solid var(--clr-4);
	display: block;
  }
.modal-hero {
	float: left;
	padding: 0rem 1rem 1rem 0rem;
}
.modal-name-team {
  color: var(--clr-4);

	font-weight: 700;
	font-size: .8rem;
  padding-top: .5rem;
	
  }
.modal-title-team {
	color: var(--white);
	font-weight: 700;
	font-size: .6rem;
	text-transform: uppercase;	
}

 .btn-closer {
	color: var(--white);
  text-transform: uppercase;
  word-spacing: 4px;
  margin-left: 45%;
  margin-right: 45%;
  }

  @media (max-width: 500px) {
    .modal-body-team {
      margin-top: 0%;
     font-size: .9rem;
      color: var(--white);
      padding: 0rem;
      height:max-content;
      width: 100%; 
      background-image: var(--gradient);
      background-position: top;
    }
    .card-img-top-modal {
      width: 10rem!important;
      border: 2px solid var(--clr-5);
      display: block;
      
      }
      .modal-body-team p{
        font-weight: 900;
        margin-left: -4rem;
        margin-right: 1rem;
        margin-top: 18rem;
      }
  
    .modal-hero {
      padding: 1rem 0rem 1rem 0rem;
      margin-left: 7rem;
    }
  }
  

  @media (min-width: 1800px) {
    .modal-body-team {
    width: 50%; 
    }
  }
  
/* scroller bar */
  /* width */
  .modal-body-team::-webkit-scrollbar {
	width: 10px;
  }
  
  /* Track */
  .modal-body-team::-webkit-scrollbar-track {
	background: #000; 
  }
   
  /* Handle */
  .modal-body-team::-webkit-scrollbar-thumb {
	background: #888; 
  }
  
  /* Handle on hover */
  .modal-body-team::-webkit-scrollbar-thumb:hover {
	background: #bbb; 
  }


  /*CAROUSEL PREVIOUS AND NEXT ==============================================*/

  .slider_carousel .owl-nav {
	position: absolute;
	top: 50%;
	width: 100%;
}


.slider_carousel .owl-prev, .slider_carousel .owl-next {
	width: .8rem;
	font-size: 2rem;
	background: none;
	color: var(--clr-4);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	
}

@media (max-width: 500px) {
  .slider_carousel .owl-next {
  left: 18rem;
  top: -3rem;
  }
  .slider_carousel .owl-prev {
  right:18rem;
  top: -3rem;
  }
  }
@media (min-width: 500px) {
.slider_carousel .owl-next {
left: 30rem;
top: -3rem;
}
.slider_carousel .owl-prev {
right:30rem;
top: -3rem;
}
}

@media (min-width: 1000px) {
.slider_carousel .owl-next {
left: 42rem;
top: -3rem;
}
.slider_carousel .owl-prev {
right:42rem;
top: -3rem;
}
}

@media (min-width: 1300px) {
.slider_carousel .owl-next {
left: 52rem;
top: -3rem;
}
.slider_carousel .owl-prev {
right:56rem;
top: -3rem;
}
}

@media (min-width: 1800px) {
.slider_carousel .owl-next {
left: 70rem;
top: -3rem;
}
.slider_carousel .owl-prev {
right:80rem;
top: -3rem;
}
}
@media (min-width: 2400px) {
.slider_carousel .owl-next {
left: 84rem;
top: -3rem;
}
.slider_carousel .owl-prev {
right:100rem;
top: -3rem;
}
}