:root {
  --army-green: #5f7a50; 
  --afc-yellow: #ffd530; 
  --aal-red: #E61E26;
  --dark-grey: #333333;
  --light-grey: #B8B8B8;
}

/* ===== SUCCESS STORIES ===== */
.hero-success {background-image: url('../img/success-stories/hero-success-stories-sm.jpg');}
@media (min-width: 768px) {.hero-success{background-image: url('../img/success-stories/hero-success-stories-md.jpg');}}
@media (min-width: 1200px) {.hero-success {background-image: url('../img/success-stories/hero-success-stories.jpg'); }}

#useCases section {min-height:990px;}
@media (min-width: 768px) {#useCases section {min-height:760px;}}
@media (min-width: 992px) {#useCases section {min-height:670px;}}
@media (min-width: 1200px) {#useCases section {min-height:570px;}}

#useCases .carousel-control-next, 
#useCases .carousel-control-prev {color:var(--aal-red); opacity:1; width:2rem; padding-right:2rem;}
#useCases .carousel-control-next {padding-right:2rem;}
#useCases .carousel-control-prev {padding-left:2rem;}


.carousel-indicators li{ width: 10px !important; height: 10px !important; border-radius:50%;}
.carousel-indicators li.active {background-color: var(--aal-red);}
.carousel-indicators li{ background-color:brown; }
.carousel-item { transition: -webkit-transform 0.9s ease-in-out; transition: transform 0.9s ease-in-out; }

@media (min-width: 768px) { #useCases .carousel-indicators {display:none;}}
@media (max-width: 767.9px) { #useCases .carousel-control-next, #useCases .carousel-control-prev {display:none;}}

.measured-success div {font-family: "DIN"; font-weight: 700; font-size: 3.4rem; line-height: 1.2; text-align:center; border-right:2px solid var(--aal-red); padding: 1rem 0; margin:0.8rem 0;}
.measured-success div:last-child {border-right:0;}
.measured-success div span {display:block;  font-size: 1.2rem; font-weight: 500; margin-top: 0.5rem;}

@media (max-width: 767.9px) {.measured-success div{border-right: none;}}

#useCaseTabs figure img {opacity:0.4;}
#useCaseTabs figcaption {font-size:1rem; font-family: 'Roboto Mono'; color:#707070;}
#useCaseTabs .active figure img {opacity:1;}
#useCaseTabs .active figcaption {color:var(--aal-red); font-weight:500;}

.usecase-img {position: relative; overflow: hidden; margin: 0; object-fit: contain; }
.usecase-img > img {margin-bottom: 0; width: 100%; height: auto; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.05); filter: grayscale(100%) contrast(115%) sepia(40%);}

.usecase-content {border:3px solid #D9D9D9; border-width:0 3px; padding:1rem; min-height:180px;}
.usecase-content .title {font-weight: 700; color:#000000;}
.usecase-content .title:hover {color:var(--aal-red);}
.usecase-content .desc {font-size:1rem;}
.usecase-link {border:3px solid #D9D9D9; border-width:0 3px 3px 3px; padding:0 1rem 1rem 1rem; text-align: right;}