/**
 * @file
 * Main stylesheet file.
 */


/*****************************************************************************
 * Main elements
 ****************************************************************************/
html {
  overflow-y: scroll;
}
a {
  cursor: pointer;
}
footer svg {
  vertical-align: -.125em;
  fill: currentColor;
  width: 30px;
  height: 30px;
}
/* Main elements end */


/*****************************************************************************
 * Hose Monster Pitot Table - Should move to a separate CSS file later for efficiency
 * Or just put in body of the HTML site?
 ****************************************************************************/

td.colorfy {
    background: #4eba70 !important; /* GREEN */
    color: white;
  }

  .btnthird {
   /* padding: 5px; */
    width: calc(33% - 1px);
  }

  .dropdown-menu-font {
    font-size: 20px;
  }



  .Gear {
    animation: rotate 3s;
     transform-origin: 50% 50%;
     transform-box: fill-box;
   }
   @keyframes rotate{
      from{
         transform: rotate(0deg);}to{
         transform: rotate(360deg);
      }
   }

/*****************************************************************************
 * Various other styles
 ****************************************************************************/

/* Various other styles end */
.standout {
  text-transform: uppercase;
	background: linear-gradient( 109.6deg,  rgba(61,245,167,1) 11.2%, rgba(9,111,224,1) 91.1% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Move captions below the carousel */

.carousel { overflow: hidden; padding-bottom: 6rem; }
.carousel-caption { top: 100%; }
.carousel-inner { overflow: visible; }
.carousel-control-next, .carousel-control-prev { bottom: 6rem; }
.carousel-indicator { position: relative;  bottom: -50px;}


/* Wave animation at footer */
.waves {
  position:relative;
  width: 100%;
  height:7vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:50px;
  max-height:150px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
}