.text-dark {
  color: #000000!important;
  font-weight: normal !important;
}

.bg-primary {
  background-color: transparent!important;
}

$grid-float-breakpoint: 768px;

.page-header {
  background-color: #dd4814;
  color: white;
  margin-top: 0;
  text-align: center;
  padding: 7.5% 0;
}

.text-picture {
  padding-top: 5%;
  padding-bottom: 5%;
  &.text-picture--gray-bg {
    background-color: #EEE;
  }
  .text-picture__text {
    h2 {
      margin-top: 0;
    }
    @media (min-width: $grid-float-breakpoint) {
      p:last-child {
          margin-bottom: 0;
      }
    }    
  }  
  .text-picture__picture {
    text-align: center;
  }   
}

// I only want Flexbox to kick in for larger devices.
// i.e. I want to keep bootstraps mobile grid scaffolding intact.
@media (min-width: $grid-float-breakpoint) {
  .row--flex {
    display: flex;
    .row--flex__col {
      align-self: flex-start;
    }
    .row--flex__col--center {
      align-self: center;
    }
    .row--flex__col--bottom {
      align-self: flex-end;
    }
  }
}



.active {
  background-color: white !important;
}

.tab-pane {
  background-color: transparent !important;
}

@media (max-width: 25%) {
  #tab-work-other {
    margin-top: 500px;
  }
}

.body-wrap {
  min-height: 700px;
}

.body-wrap {
  position: relative;
  z-index: 0;
}

.body-wrap:before,
.body-wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 260px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
  background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
}

.body-wrap:after {
  top: auto;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}

@media screen and (max-width: 600px) {
  #headWeb {
    display: none!important;
  }

  #headTablet {
    display: none!important;
  }

  .greenImageTextWeb {
    display: none!important;
  }

  .greenImageTextTablet {
    display: none!important;
  }

  #tab-work-tablet {
    display: none !important;
  }

  #tab-work-other {
    margin-top: 20% !important;
  }

  #integration-logos {
    margin-top: 20% !important;
  }

  #whow {
    margin-top: 20% !important;
  }

  #sensesw {
    margin-top: 20% !important;
  }

  #tempr {
    font-size: 23px !important;
  }

  .greenImageTextWeb {
    display: none!important;
  }

  .icon_tr {
    margin-bottom: 10% !important;
  }

  #whot {
    display: none !important;
  }

  #sensest {
    display: none !important;
  }

  #tempr {
    display: none !important;
  }
  #temprt {
    display: none !important;
  }

  #sec-web {
    display: none !important;
  }

  #sec-tablet {
    display: none !important;
  }
  
}

@media (min-width: 600px) and (max-width: 992px) {
  #headWeb {
    display: none!important;
  }

  .greenImageTextWeb {
    display: none!important;
  }

  #headMobile {
    display: none!important;
  }

  .greenImageTextMobile {
    display: none!important;
  }

  #tab-work-other {
    display: none !important;
  }

  #whowt {
    margin-top: 20% !important;
  }

  #whow {
    display: none !important;
  }

  #sensesw {
    display: none !important;
  }

  #tempr {
    display: none !important;
  }

  #temprm {
    display: none !important;
  }

  #sec-web {
    display: none !important;
  }

  #sec-mobile {
    display: none !important;
  }

}

@media (min-width: 992px) {
    #headMobile {
        display: none!important;
    }

    .greenImageTextMobile {
        display: none!important;
    }

    #headTablet {
      display: none!important;
    }

    .greenImageTextTablet {
        display: none!important;
    }

    #tab-work-tablet {
      display: none !important;
    }

    #whot {
      display: none !important;
    }

    #sensest {
      display: none !important;
    }

    #temprt {
      display: none !important;
    }

    #temprm {
      display: none !important;
    }

    #sec-mobile {
      display: none !important;
    }

    #sec-tablet {
      display: none !important;
    }
}

/* Flash class and keyframe animation */
.flash{
  color:white;
	-webkit-animation: flash linear 3s infinite;
	animation: flash linear 3s infinite;
}
@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}

.img-fluid-carousel {
  position: relative;
    width:  50%;
    height: 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}