/**************************************/
/******** iconbox-container **********/
/**************************************/
.iconbox-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s ease;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.iconbox-container:before, .iconbox-container:after,  .iconbox-container .item-image:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.iconbox-container:before {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;	
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease, -webkit-transform 0.7s ease;
  transition: opacity 0.5s ease, transform 0.7s ease;
  transition: opacity 0.5s ease, transform 0.7s ease, -webkit-transform 0.7s ease;
}
.iconbox-container:after {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;	
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}
.iconbox-container:hover:before, .iconbox-container:hover:after {
  opacity: 1;

}

.iconbox-container h1, .iconbox-container h2, .iconbox-container h3,.iconbox-container  h4, .iconbox-container h5, .iconbox-container h6 {
  width:100%; 
  padding: 5px;
}
.iconbox-container a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1000000000;
 -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/***************************************/
/************** Animation**************/
/**************************************/
.iconbox-container.moveup:before {
  -webkit-transform: translate3d(0, 0, 0) translateY(70%);
          transform: translate3d(0, 0, 0) translateY(70%);

}
.iconbox-container.moveup:hover:before {
  -webkit-transform: translate3d(0, 0, 0) translateY(0%);
          transform: translate3d(0, 0, 0) translateY(0%);
  transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease, -webkit-transform 0.9s ease;
}	
.iconbox-container.amoveup:after {
  -webkit-transform: translate3d(0, 0, 0) translateY(70%);
          transform: translate3d(0, 0, 0) translateY(70%);

}
.iconbox-container.amoveup:hover:after {
  -webkit-transform: translate3d(0, 0, 0) translateY(0%);
          transform: translate3d(0, 0, 0) translateY(0%);
  transition: opacity 0.7s ease, -webkit-transform 0.7s ease;
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition: opacity 0.7s ease, transform 0.7s ease, -webkit-transform 0.7s ease;
}	

/* 
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
transform: inherit;
transform: initial;
transform: revert;
transform: unset;
*/

.iconbox-container.movedown:before, .iconbox-container.amovedown:after {
  -webkit-transform: translate3d(0, 0, 0) translateY(-50%);
          transform: translate3d(0, 0, 0) translateY(-50%);
}
.iconbox-container.movedown:hover:before, .iconbox-container.amovedown:hover:after {
  -webkit-transform: translate3d(0, 0, 0) translateY(0);
          transform: translate3d(0, 0, 0) translateY(0);
  transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease, -webkit-transform 0.9s ease;

}

.iconbox-container.moveleft:before, .iconbox-container.amoveleft:after {
  -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
          transform: translate3d(0, 0, 0) translateX(-50%);
}
.iconbox-container.moveleft:hover:before, .iconbox-container.amoveleft:hover:after {
  -webkit-transform: translate3d(0, 0, 0) translateX(0);
          transform: translate3d(0, 0, 0) translateX(0);
  transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease, -webkit-transform 0.9s ease;	
}


.iconbox-container.moveright:before, .iconbox-container.amoveright:after {
  -webkit-transform: translate3d(0, 0, 0) translateX(50%);
          transform: translate3d(0, 0, 0) translateX(50%);
}
.iconbox-container.moveright:hover:before, .iconbox-container.amoveright:hover:after {
  -webkit-transform: translate3d(0, 0, 0) translateX(0);
          transform: translate3d(0, 0, 0) translateX(0);
  transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease, -webkit-transform 0.9s ease;	
}

.iconbox-container.zoomin:before, .iconbox-container.azoomin:after {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.iconbox-container.zoomin:hover:before, .iconbox-container.azoomin:hover:after {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease, -webkit-transform 0.9s ease;	
}

.iconbox-container.zoomout:before, .iconbox-container.azoomout:after {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.iconbox-container.zoomout:hover:before, .iconbox-container.azoomout:hover:after {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition: opacity 0.9s ease, transform 0.9s ease, -webkit-transform 0.9s ease;	
}

.iconbox-container .animate-transition{
    -webkit-transition: all 0.9s ease !important;
    -moz-transition: all 0.9s ease !important;
    -o-transition: all 0.9s ease !important;
    -ms-transition: all 0.9s ease !important;
    transition: all 0.9s ease !important;	
}


/********************/
/* layout1 General */
/********************/


/**************************************/
/************** item-image ************/
/**************************************/

.iconbox-container .item-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  transition: -webkit-filter 0.5s ease;
  transition: filter 0.5s ease;
  transition: filter 0.5s ease, -webkit-filter 0.5s ease;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-transform: scale(1);
	transform: scale(1);	
}

.iconbox-container:hover .item-image {
	-webkit-filter: grayscale(100%);
          filter: grayscale(100%);
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
}

.iconbox-container .item-image:before {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.iconbox-container:hover .item-image:before {
  opacity: 0;
}