:root {
  --clr-1: #24485E;/*DARK SLATE GRAY  filter: invert(25%) sepia(12%) saturate(2210%) hue-rotate(159deg) brightness(88%) contrast(88%);*/
  --clr-2: #177D89;/*METALLIC SEAWEED  filter: invert(36%) sepia(17%) saturate(2451%) hue-rotate(140deg) brightness(101%) contrast(82%);*/
  --clr-3: #75A8B4;/*MOONSTONE BLUE  filter: invert(64%) sepia(49%) saturate(252%) hue-rotate(144deg) brightness(91%) contrast(81%);*/
  --clr-4: #FFC857;/*MUSTARD  filter: invert(92%) sepia(75%) saturate(1772%) hue-rotate(314deg) brightness(101%) contrast(101%);*/
  --clr-5: #F18000;/*TANGERINE  filter: invert(59%) sepia(17%) saturate(5917%) hue-rotate(1deg) brightness(93%) contrast(107%);*/
  --white: #eaeaea;/*SOFT WHITE*/
  --black: #232323;/*SOFT BLACK*/
  --clr-6: #03121b;
  --clr-grey: #3899A2;

  --gradient: linear-gradient(
    45deg, #24485ede 60%,#177D89 
  ); 

width: 100vw;
    height: 100%;
    font-family: raleway, sans-serif;
    font-style: normal;
  }


  
body{
  background-color: var(--clr-6);
  position: relative;
  
}

.body {
  display: flex;
    height: 100%;
    width: 100vw;
    margin: 0;
   
}

   html {
    scroll-behavior: smooth;  
  }
  /*Disable smooth scrolling when users have prefers-reduced-motion enabled*/
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

p{
  font-family: raleway, sans-serif;
  font-style: normal;
  
}

h1 {
  font-family: montserrat, sans-serif;
  
  font-style: normal;
}
h2 {
  font-family: montserrat, sans-serif;
  font-style: normal;
}
h3 {
  font-family: raleway, sans-serif;
  font-style: normal;
}
h4 {
  font-family: raleway, sans-serif;
  font-style: normal;
}
h5 {
  font-family: raleway, sans-serif;
  font-style: normal;
}
.underline {
  font-weight: 300;
  border-bottom: 2px solid var(--white);
}



.main-bg {
  width: 100%;
  height: 100vh;
  margin: 0rem;
  padding: 0rem;
  justify-content: center;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size:cover;
  background-image: url(/Images/MCI-site/Backgrounds/Landing_Page_V.4.jpg);
  /*animation: animate-pos-main, animate-sca-main 30s ease-in-out infinite alternate-reverse;*/
}

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

.main-bg-4 {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
background-image: url(/Images/MCI-site/Backgrounds/MCI-Background_4.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%;}
}

  svg {
    width: 100%;
  }
 
  .caption h3{
    font-weight: 300;
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    line-height: 1.7rem;
   /* transition: scale 1.5sec ease-in;*/
   color: var(--clr-6);
    text-shadow: rgba(0, 0, 0, 1) 2px 2px 10px;
  }

  .parallax_1 {
    background-image: url('/Images/MCI-site/Backgrounds/MCI-Background_4.jpg');
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  } 





/*==HERO TEXT=============================================*/
  .caption-hero {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    color: #ffffff;
   
  }
 
  .caption-hero h1{
    font-weight: 300;
    font-style: normal;
    font-size: 3rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    line-height: 3rem;
    color: var(--white);
    text-shadow: rgba(0, 0, 0, 1) 2px 2px 10px;
    margin-top: -1rem;
  }

  @media (max-width: 500px) {
    .caption-hero h1{
    font-size: 1.5rem;
    margin-top:5rem;
		}
    .footnote{ 
      position: absolute;
      right: 10%;
     margin-top:40rem;
      color: var(--clr-4);
      font-size: 1.2rem;
     
    }
    .caption h1{
    font-size: 1.5rem;
    line-height: 2.2rem;    
    }
    .caption h2{
      font-size: 1.2rem;
      line-height: 2.2rem;    
      }
	}
  @media (min-width: 500px) {
    .caption-hero h1{
    font-size: 1.5rem;
    margin-top:10rem;
		}
    .footnote{ 
      position: absolute;
      right: 10%;
     margin-top:50rem;
      color: var(--clr-4);
      font-size: 1.2rem;
     
    }
    .caption h1{
    font-size: 1.5rem;
    line-height: 2.2rem;    
    }
    .caption h2{
      font-size: 1.2rem;
      line-height: 2.2rem;    
      }
	}
  @media (min-width: 800px) {
    .caption-hero h1{
    font-size: 2rem;
    margin-top:10rem;
		}
    .footnote{ 
      position: absolute;
      right: 10%;
     margin-top:54rem;
      color: var(--clr-4);
      font-size: 1.2rem;
     
    }
    .caption h1{
    font-size: 1.5rem;
    line-height: 2.2rem;    
    }
    .caption h2{
      font-size: 1.2rem;
      line-height: 2.2rem;    
      }
	}
  @media (min-width: 1000px) {
    .caption-hero h1{
    font-size: 2rem;
    margin-top:8%;
		}
    .footnote{ 
      position: absolute;
      right: 10%;
     margin-top: 60%;
      color: var(--clr-5);
      font-size: 1.2rem;
     
    }
    .caption h1{
    font-size: 1.5rem;
    line-height: 2.2rem;    
    }
    .caption h2{
      font-size: 1.2rem;
      line-height: 2.2rem;    
      }
	}

@media (min-width: 1050px) {
  .caption-hero h1{
    font-size: 3rem;
		}
    .footnote{ 
      right: 10%;
      margin-top: 40%;
     
    }
    .caption h1{
      font-size: 2rem;
      line-height: 2.2rem;    
      }
      .caption h2{
        font-size: 1.5rem;
        line-height: 2.2rem;    
        }
}
@media (min-width: 1800px) {
  .caption-hero h1{
    font-size: 4rem;
		}
    .footnote{ 
      margin-top: 60%;
      position: absolute;
      right: 10%;
      font-size: 1.5rem;
    }


}
@media (min-width: 2400px) {
  .caption-hero h1{
    font-size: 4rem;
		}
    .footnote{ 
      margin-top: 40%;
      position: absolute;
      right: 10%;
      font-size: 1.5rem;
    }


}





.nav-tabs {
  border-bottom: none;
}


/* SVG HOVERS */
svg .cls-1{
 fill: var(--clr-1);
 padding: 1rem;
}

.cls-1:hover {
  fill:#00000050;
  stroke: var(--white);
}
svg .cls-1a{
  fill: var(--clr-1);
  padding: 1rem;
 }
 
 .cls-1a:hover {
   fill:#00000050;
   stroke: var(--white);
 }

 svg .cls-2a{
  
  padding: 1rem;
 }
 .cls-2a:hover {
  fill:#00000050;
  stroke: var(--white);
}

svg .st3 {
  fill: var(--clr-1);
 padding: 1rem;
}
.st3:hover {
  stroke: #fffdfd;
}


/*VIDEO INSERT*/
.trailer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10000;
  background:var(--clr-1);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  
  }
  .trailer.active {
      visibility: visible;
      opacity: 1;
  }
  .close {
      position: absolute;
      top: 30px;
      right: 30px;
      cursor: pointer;
      
      max-width: 32px;
      font-size: 30px;
      color: #fff;
  
  }
  .trailer video {
      position: relative;
      max-width: 900px;
      outline: none;
  }
  @media (max-width: 991px) {
      .trailer video {
          max-width: 90%;
      }
  }
  


 











.team-title {
	color: var(--white);
	text-transform: uppercase;
	font-size: 1.2rem;
	padding-left: 1.3rem;
  margin-bottom: -1.5rem;
}


 @media (min-width: 1000px) {
#team {
  height: 100%; 
  padding-top: 8rem;
  padding-bottom: 8rem;
}

}
@media (min-width: 1050px) {
#team {
  height: 100%; 
  padding-top: 4rem;
  padding-bottom: 8rem;
}

}
@media (min-width: 1300px) {
#team {
  height: 100%; 
  padding-top: 8rem;
  padding-bottom: 8rem;
}

}
@media (min-width: 1300px) {
  #team {
    height: 100%; 
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  
  }
@media (min-width: 1800px) {
#team {
  height: 100%; 
  padding-top: 10rem;
  padding-bottom: 8rem;
}

}


@media (max-width: 500px) {
  .card-img-top {
    width: 8rem;
    border-radius: 50%;
    margin-right: 1rem;
    }
  .team-member-name {
    margin-right: 1rem;
   }
   .team-member-blurb {
     width: 10rem;
     text-align: left;
     margin-right: 1rem;
   }
}

/*=CONTACT================================================*/
.bg-primary {
  background: #EC7E00 !important; }


  /*=ICON TEXT===========================================*/
  .icon-text {
    color: #fff;
   margin-left: .8rem;
  }
  .icon-text:hover {
    color: #b1adad;
  
  }

/*TOOLTIPS========================================*/
.tooltip p{
  color: rgb(255, 255, 255);
}

/*TOOLTIPS========================================*/
.footer-mci {
 background-color: #EC7E00;
 height: 3rem;
 color: #ffffff;
 padding: 1rem;
 text-align: center;
 font-size: .5rem;
}

/*==IDEAS TRANSITIONS================================*/



.parAnimator {
background: #ddd;
background-image: var(--gradient);
background-size: 400%;
animation: bg-animation 5s infinite alternate;
}
@keyframes bg-animation {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}




.fromtop {
  animation:anim-fromtop 1.2s  ease-in 1 forwards;

}
@keyframes anim-fromtop {
  0% { opacity: 0; transform: translateY(-100%);}
  100% { opacity: 1; transform: translateY(0%);}
}

/* lineup class and keyframes */
.lineUp {

  animation-name: anim-lineUp;
  animation-duration: 4s;
  animation-fill-mode: forwards ;
}

@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
   
  }
  100% {
    opacity: 1;
    transform: translateY(20%);
  }
}


.grow-up:hover {
  animation: animate-pos-main, animate-sca-main .2s ease;
}


@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%;}
}