/* make keyframes that tell the start state and the end state of our object */

@-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; } }


.out {
	opacity:0;  /* make things invisible upon start */
}

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-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: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

/*---make a basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
}





.animation-target {
  -webkit-animation: animation 3000ms linear infinite both;
  animation: animation 3000ms linear infinite both;
}

/* HOVER*/
/* Underline From Left */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 4px;
  background: #F04E37;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}

/*Slidiing-IN*/

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

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

.slideInDown {
  animation-name: slideInDown;

  animation-duration: .75s;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 90vh, 0);
    visibility: visible;
  }

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

.slideInUp {
  animation-name: slideInUp;

  animation-duration: .75s;
}


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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;

  animation-duration: .4s;
}

/*Animation durations*/
/*
.block-views-blockour-projects-block-1 {
	animation-duration: 0.75s;
}

.block-region-four {
	animation-duration: 0.8s;
}*/

/*Button effect*/

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
	-webkit-transition: all ease 0.2s;
	-moz-transition: all ease 0.2s;
	transition: all ease 0.2s;
}



/*Mur*/
.perspective-change-child-block-up{
	width:100%;
	height:25%;
	top:0;
	left:0;
	position: absolute;
}
.perspective-change-child-block-right{
	width:50%;
	height:50%;
	right:0;
	top:25%;
	position: absolute;
}
.perspective-change-child-block-down{
	width:100%;
	height:25%;
	bottom:0;
	left:0;
	position: absolute;
}
.perspective-change-child-block-left{
	width:50%;
	height:50%;
	left:0;
	top:25%;
	position: absolute;
}

 .perspective-change{
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.perspective-change-image-right{
	-webkit-transform: perspective( 900px ) rotateY( 5deg );
	-moz-transform: perspective( 900px ) rotateY( 5deg );
	-ms-transform: perspective( 900px ) rotateY( 5deg );
	-o-transform: perspective( 900px ) rotateY( 5deg );
	transform: perspective( 900px ) rotateY( 5deg );
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.perspective-change-image-left{
	-webkit-transform: perspective( 900px ) rotateY( -5deg );
	-moz-transform: perspective( 900px ) rotateY( -5deg );
	-ms-transform: perspective( 900px ) rotateY( -5deg );
	-o-transform: perspective( 900px ) rotateY( -5deg );
	transform: perspective( 900px ) rotateY( -5deg );
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.perspective-change-image-up{
	-webkit-transform: perspective( 900px ) rotateX( 5deg );
	-moz-transform: perspective( 900px ) rotateX( 5deg );
	-ms-transform: perspective( 900px ) rotateX( 5deg );
	-o-transform: perspective( 900px ) rotateX( 5deg );
	transform: perspective( 900px ) rotateX( 5deg );
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.perspective-change-image-down{
	-webkit-transform: perspective( 900px ) rotateX( -5deg );
	-moz-transform: perspective( 900px ) rotateX( -5deg );
	-ms-transform: perspective( 900px ) rotateX( -5deg );
	-o-transform: perspective( 900px ) rotateX( -5deg );
	transform: perspective( 900px ) rotateX( -5deg );
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.perspective-change-master-block{
	position: relative;
	display: inline-block;
}

/*Slider Control*/
/*
#pp-nav li .active span, .pp-slidesNav .active span {
	transform: scale(1.3);
}*/

/*

line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dash 2s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}*/