/* Home Animated */


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 1.9s;
  -moz-animation-delay: 1.9s;
  animation-delay: 1.9s;
background-image:url(../../images/slide-1.jpg);
width: 100%;
    height: 282px;
   position: absolute;
    background-size: auto 282px;
    background-position: center;
    background-repeat: no-repeat;
	background-color: #deeeea;
}



.fade-in.two {
  -webkit-animation-delay: 2.7s;
  -moz-animation-delay:2.7s;
  animation-delay: 2.7s;
	background-image:url(../../images/slide-2.jpg);
   width: 100%;
    height: 282px;
    position: absolute;
    background-size: auto 282px;
    background-position: center;
    background-repeat: no-repeat;
}

.fade-in.three {
  -webkit-animation-delay: 3.7s;
  -moz-animation-delay: 3.7s;
  animation-delay: 3.7s;
	background-image:url(../../images/slide-3.jpg);
width: 100%;
    height: 282px;
    position: absolute;
    background-size: auto 282px;
    background-position: center;
    background-repeat: no-repeat;
}

.fade-in.wellness{
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  animation-delay: 2.3s;
  z-index:10;
}

.fade-in.recovery{
  -webkit-animation-delay: 3.3s;
  -moz-animation-delay: 3.3s;
  animation-delay: 3.3s;
  z-index:10;
}

.fade-in.resiliency{
  -webkit-animation-delay: 4.3s;
  -moz-animation-delay: 4.3s;
  animation-delay: 4.3s;
  z-index:10;
}

.box{
  position: relative;
  text-align:center;
}

/*---make a specific box ---*/
.wellness-box{
  width: 100%;
  height: 282px;
  width:100%;
}

.recovery-box{
  width: 100px;
  height: 282px;
  width:100%;
}

.resiliency-box{
  width: 100px;
  height: 282px;
  width:100%;
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: .3;
    -webkit-transform: translate3d(0, 200px, 0);
    transform: translate3d(0, 200px, 0);
  }

  75% {
    opacity: .6;
    -webkit-transform: translate3d(0, 195px, 0);
    transform: translate3d(0, 195px, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(0, 200px, 0);
    transform: translate3d(0, 200px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 200px, 0);
    transform: translate3d(0, 200px, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}


.home-header {
    width: 100%;
    background-image: url(../../images/background-states.jpg);
    height: 282px;
    text-align: center;
    background-size: auto 282px !important;
    background-position-x: center;
    background-repeat: no-repeat;
    background-color: #deeeea;
    position: relative;
    z-index: 0;
     margin-top: 0;
}

.drop.fade-in.wellness.bounceInDown {
    position: relative;
    margin: auto;
    z-index: 5;
    left: -245px;
	top:-20px;
}

.drop.fade-in.recovery.bounceInDown {
    position: relative;
    margin: auto;
    z-index: 5;
    left: -20px;
	top:-60px;
}

.drop.fade-in.resiliency.bounceInDown {
    position: relative;
    margin: auto;
    z-index: 5;
    left: 211px;
	top:-70px;
	width:300px;
}

.drop {
    font-weight: 900;
    font-family: 'Raleway', sans-serif;
    font-size: 42px;
    color: #fff;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.75);
}

.fade-in.one, .fade-in.two, .fade-in.three {
 /* background-size: 65%; */
      height: 282px;
    text-align: center;
    background-size: auto 282px !important;
    margin-top: 0px;
    z-index: -1;
}
/*
	@media only screen and (min-width: 1800px){
.fade-in.one, .fade-in.two, .fade-in.three {
 background-size: 65%;
      height: 282px;
    text-align: center;
    background-size: auto 282px !important;
    margin-top: 12px;
    z-index: -1;
}
		.container-fluid {
		background-size: auto 300px !important;
		height: 0;
		}
			.drop.fade-in.wellness.bounceInDown {
			position: relative;
			margin: auto;
			z-index: 5;
			left: -320px;
			top:5px;
}

.drop.fade-in.recovery.bounceInDown {
    position: relative;
    margin: auto;
    z-index: 5;
    left: -20px;
	top:-30px;
}

.drop.fade-in.resiliency.bounceInDown {
    position: relative;
    margin: auto;
    z-index: 5;
    left: 271px;
	top:-95px
	}
	}  */

	@media only screen and (max-width: 600px){
			.container-fluid, .fade-in.one, .fade-in.two, .fade-in.three {
				background-size:cover;
			}
.drop.fade-in {
    display: none;
}

		.wellness-box, .recovery-box, .resiliency-box {
			display:none;
		}

.home-header{
    background-image: url("../../images/slide-3.jpg");
	z-index:1;
         	}
}

		.drop{
			width: max-content;
	}
/* End Animated */