/*slideUp effect*/
@-webkit-keyframes text-slideUp1 { /* Safari and Chrome */
  from {
    -webkit-transform: translateY(100%);
  } 25% {
    -webkit-transform: translateY(0%);
  } to {
    -webkit-transform: translateY(0%);
  }
}
@-moz-keyframes text-slideUp1 { /* Firefox */
  from {
    -moz-transform: translateY(100%);
  } 25% {
    -moz-transform: translateY(0%);
  } to {
    -moz-transform: translateY(0%);
  }
}
@keyframes text-slideUp1 { 
  from {
    transform: translateY(100%);
  } 25% {
    transform: translateY(0%);
  } to {
    transform: translateY(0%);
  }
}


@-webkit-keyframes text-slidUp20px {
  form {
    -webkit-transform: translateY(20px);
  } to {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}
@-moz-keyframes text-slidUp20px {
  form { 
    -moz-transform: translateY(20px);
  } to {
    -moz-transform: translateY(0);
    opacity: 1;
  }
}
@keyframes text-slidUp20px {
  form { 
    transform: translateY(20px);
  } to {
    transform: translateY(0);
    opacity: 1;
  }
}


/*rotate effect*/
@-webkit-keyframes rotateX180 { /* Safari and Chrome */
  from {
    -webkit-transform: rotateX(0);
  } to {
    -webkit-transform: rotateX(180deg);
  }
}
@-moz-keyframes rotateX180 { /* Firefox */
  from {
    -moz-transform: rotateX(0);
  } to {
    -moz-transform: rotateX(180deg);
  }
}
@keyframes rotateX180 { 
  from {
    transform: rotateX(0);
  } to {
    transform: rotateX(180deg);
  }
}


/*width effect*/
@-webkit-keyframes widthFull {
  form { 
    width: 0%;
  } to { 
    width: 100%;
  }
}
@-moz-keyframes widthFull {
  form { 
    width: 0%;
  } to { 
    width: 100%;
  }
}
@keyframes widthFull {
  form { 
    width: 0%;
  } to { 
    width: 100%;
  }
}


/*height effect*/
@-webkit-keyframes heightFull {
  form {
    height: 0%;
  } to { 
    height: 100%;
  }
}
@-moz-keyframes heightFull {
  form {
    height: 0%;
  } to { 
    height: 100%;
  }
}
@keyframes heightFull {
  form {
    height: 0%;
  } to { 
    height: 100%;
  }
}


@-webkit-keyframes shutter-out-vertical {
  form {
    -webkit-transform: scaleY(0);
  } to {
    -webkit-transform: scaleY(1);
    opacity: 1;
  }
}
@-moz-keyframes shutter-out-vertical {
  form {
    -moz-transform: scaleY(0);
  } to {
    -moz-transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes shutter-out-vertical {
  form {
    transform: scaleY(0); 
  } to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* logoSlide keyframe */
/* @keyframes flowRolling {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-1300px);
  }
} */

/*figure.effect-style1*/
figure.effect-style1 {
 position: relative;
 z-index: 1;
 display: block;
 overflow: hidden;
 text-align: center;
 cursor: pointer;
}

figure.effect-style1 figcaption,
figure.effect-style1 a {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}

figure.effect-style1 figcaption {
 top: auto;
 bottom: 0;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(0,100%,0);
 transform: translate3d(0,100%,0);
}

figure.effect-style1 h5 {
 color:#000;
 background: #fff;
 float: inherit;
 padding:4% 4%;
 font-size: 22px;
 text-transform:uppercase;
 margin-bottom:0;
}

figure.effect-style1 figcaption > span {
 float: right;
}

figure.effect-style1 p {
 padding:0 3%;
 color: #fff;
 text-transform: none;
 text-shadow: 0 1px 0 #999;
 font-size: 16px;
 opacity: 0;
 -webkit-transition: opacity 0.35s;
 transition: opacity 0.35s;
}

figure.effect-style1 h5,
figure.effect-style1 figcaption > span {
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(0,200%,0);
 transform: translate3d(0,200%,0);
}

figure.effect-style1:hover p {
 opacity: 1;
}

figure.effect-style1:hover figcaption,
figure.effect-style1:hover h5{
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

/*figure.effect-style2*/
figure.effect-style2{
 background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
}

figure.effect-style2:hover img {
 opacity: 0.4;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-style2 figcaption {
 width:100%;
 position: absolute;
 top: 0;
 text-align: left;
}

figure.effect-style2 h5 { 
 color:#fff;
 font-size: 22px;
 text-transform:uppercase;
 position: relative;
 overflow: hidden;
 padding: 0.5em 0;
 font-weight:600;
 text-shadow: 0 1px 0 #999;
}

figure.effect-style2 h5::after {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: #fff;
 content: '';
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(-100%,0,0);
 transform: translate3d(-100%,0,0);
}

figure.effect-style2:hover h5::after {
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-style2 p {
 padding: 0;
 opacity: 0;
 font-size:16px;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(100%,0,0);
 transform: translate3d(100%,0,0);
 text-shadow: 0 1px 0 #999;
}

figure.effect-style2:hover p {
 position: relative;
    color:#fff;
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

/*figure.style0*/
figure.style0{ }
figure.style0 figcaption{ color: #493e2c; text-decoration: none; border: white solid 1px; box-sizing: border-box;}
figure.style0:hover figcaption{ color: #89724F }

/*figcaption*/
figure.style0 figcaption{background-color: white;}
figure.style0 figcaption h5{ word-break: break-all; font-weight: bold; }
figure.style0 figcaption h5{ padding-left: 5px; padding-right: 5px; }
figure.style0 figcaption p{ word-break: break-all; }
figure.style0 figcaption p{ padding-left: 5px; padding-right: 5px; }

/*figure.style1*/
figure.style1{ position: relative; }
figure.style1{ overflow: hidden; }
figure.style1 img{ display: block; }
figure.style1 figcaption{ width: 100%; }
figure.style1 figcaption{ transition: all 0.6 ease; }

figure.style1 figcaption{
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    color: white;
}

/*common*/
figure.style1 figcaption{ padding: 10px 20px; }
figure.style1 figcaption{
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

/*left*/
figure.style1.left figcaption{ bottom: 0; }

figure.style1.left figcaption{ left: -100%; opacity: 0; }
figure.style1.left:hover figcaption{ left: 0%; opacity: 1; }

/*right*/
figure.style1.right figcaption{ bottom: 0; }
figure.style1.right figcaption{ right: -100%; opacity: 0; }
figure.style1.right:hover figcaption{ right: 0%; opacity: 1; }

/*top*/
figure.style1.top figcaption{ left: 0; }
figure.style1.top figcaption{ top: -100%; opacity: 0; }
figure.style1.top:hover figcaption{ top: 0%; opacity: 1; }

/*bottom*/
figure.style1.bottom figcaption{ left: 0; }
figure.style1.bottom figcaption{ bottom: -100%; opacity: 0; }
figure.style1.bottom:hover figcaption{ bottom: 0%; opacity: 1; }

/*figcaption*/
figure.style1 figcaption h5{ word-break: break-all; font-weight: bold; }
figure.style1 figcaption p{ word-break: break-all; }

/*figure.style2*/
figure.style2{
    margin: 0;
    position: relative;
    display: block;
}

figure.style2 img{ width: 100%; display: block; }

figure.style2 figcaption{ z-index: 1000; position: absolute; top: 0; left: 0; }
figure.style2 figcaption{
    width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75);
    color: white;
}

figure.style2 figcaption{
    height: 100%;
    width: 100%;
    opacity: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.5s, opacity 0.3s;
    -moz-transition: -moz-transform 0.5s, opacity 0.3s;
    transition: transform 0.5s, opacity 0.3s;
}

figure.style2:hover figcaption{
    opacity: 1;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
    -ms-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
}

figure.style2 figcaption h5{ margin-top: 30%; }
figure.style2 figcaption h5{ word-break: break-all; font-weight: bold; }
figure.style2 figcaption p{ word-break: break-all; padding-left: 10%; padding-right: 10%; }

/*figure.style3*/
figure.style3{
    background: #2c3f52;
    width: 100%;
    margin: 0;
    position: relative;
}

figure.style3 img{
    width: 100%;
    display: block;
    position: relative;
    z-index: 10;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
}

figure.style3:hover img{
    -webkit-transform: translateY(-65px);
    -moz-transform: translateY(-65px);
    -ms-transform: translateY(-65px);
    -o-transition: translateY(-65px);
    transform: translateY(-65px);
}

figure.style3 figcaption{
    height: 65px;
    width: 100%;
    bottom: 0;
    position: absolute;
    left: 0;
    color: white;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.style3 figcaption h5{ word-break: break-all; font-weight: bold; padding-left: 15px; padding-right: 15px; }
figure.style3 figcaption h5{ margin-top: 15px; margin-bottom: 0; }
figure.style3 figcaption p{ word-break: break-all; padding-left: 15px; padding-right: 15px; }
figure.style3 figcaption p{ width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/*figure.style4*/
figure.style4{
    width: 100%;
    margin: 0;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 600px;
    -moz-perspective: 1700px;
    perspective: 1700px;
    -webkit-perspective-origin: 0 50%;
    -moz-perspective-origin: 0 50%;
    perspective-origin: 0 50%;
}

figure.style4 img{ width: 100%; display: block; }
figure.style4 figcaption{ position: absolute; z-index: 10; top: 0; left: 0; }
figure.style4 figcaption{ background: rgba(0, 0, 0, 0.75); color: white; }

figure.style4 figcaption{
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
    width: 50%;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.5s, opacity 0.1s 0.3s;
    transition: transform 0.5s, opacity 0.1s 0.3s;
}

figure.style4:hover figcaption{
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
    -moz-transition: -moz-transform 0.5s, opacity 0.1s;
    transition: transform 0.5s, opacity 0.1s;
}

figure.style4 figcaption h5{ word-break: break-all; font-weight: bold; }
figure.style4 figcaption p{ word-break: break-all; }

/*figure.style5*/
figure.style5{ width: 100%; margin: 0; position: relative; }
figure.style5{ opacity: 1; box-shadow: 0 0 0 0px #2c3f52; }
figure.style5:hover{ opacity: 1; box-shadow: 0 0 0 10px #2c3f52; }
figure.style5:hover{ z-index: 10; }
figure.style5{
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

figure.style5 img{ width: 100%; display: block; position: relative; z-index: 11; }

figure.style5 figcaption{ position: absolute; z-index: 10; top: 50%; background: #2c3f52; color: white; width: 100%; }
figure.style5 figcaption{ box-shadow: 0 0 0 0px #2c3f52; }
figure.style5 figcaption{
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
figure.style5 figcaption{ }
figure.style5:hover figcaption{ top: 100%; box-shadow: 0 0 0 10px #2c3f52; }

figure.style5 figcaption h5{ word-break: break-all; font-weight: bold; }
figure.style5 figcaption h5{ padding-left: 5px; padding-right: 5px; }
figure.style5 figcaption p{ word-break: break-all; }
figure.style5 figcaption p{ width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
figure.style5 figcaption p{ padding-left: 5px; padding-right: 5px; }