@mixin animation($str) {
	-webkit-animation: #{$str};
	-moz-animation: #{$str};
	-ms-animation: #{$str};
	-o-animation: #{$str};
	animation: #{$str};
	@media (prefers-reduced-motion) {
		.animated {
			-webkit-animation: unset !important;
			animation: unset !important;
			-webkit-transition: none !important;
			transition: none !important;
		}
	}
}

@mixin keyframes($animation-name) {
	@-webkit-keyframes #{$animation-name} {
		@content;
	}
	@-moz-keyframes #{$animation-name} {
		@content;
	}
	@-ms-keyframes #{$animation-name} {
		@content;
	}
	@-o-keyframes #{$animation-name} {
		@content;
	}
	@keyframes #{$animation-name} {
		@content;
	}
}

@mixin transform($value) {
	-webkit-transform: $value;
	-moz-transform: $value;
	-ms-transform: $value;
	-o-transform: $value;
	transform: $value;
}
/*
.doing {
  transform: rotate(-35deg);
  display: block;
  position: absolute;
  top: 0;
  left: -90px;
  margin-top: 25px;
  text-align: center;
  background-color: #15748b;
  width: 300px;
  color: #fff;
  padding: 5px 0px;
}
*/
/*
.will-fadeIn {
  display: block;
  width: 100%;
 
  max-width: 640px;
  margin: 20px auto;
  height: 250px;
 
  background-color: #b7f7f7;
  padding: 10px;
  &:nth-child(odd) {
    background: #ffeded;
  }
  &:first-child {
    height: auto;
    background-color: #edffff;
  }
}
*/
.fadeInRight {
  animation: fadeInRight .5s ease .4s both;
}

.fadeInLeft {
  animation: fadeInLeft .5s ease .4s both;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}