/* Animations */
*:hover {-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}

.rayen-effect{overflow:hidden;padding:0;position:relative}
.rayen-effect::before {
    /*content:attr(data-text);*/
    content: '';
    position:absolute;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.3);color:#fff;
    -webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)
}
.rayen-effect > span{display:block}
.rayen-effect::before,.rayen-effect > span {
    padding: 5px 15px;
    -webkit-transition:-webkit-transform .3s;transition:transform .3s;
    -webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1);
    transition-timing-function:cubic-bezier(0.75,0,0.125,1)
}
.rayen-effect:hover::before{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
/*.rayen-effect:hover > span{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}*/

figure.sadie-effect{position:relative;overflow:hidden;text-align:center;cursor:pointer;border:1px solid #fff;padding:10px;max-height: 400px;}
figure.sadie-effect img{display:block;min-height:100%;width:100%;opacity:.8}
figure.sadie-effect figcaption::before{
    position:absolute;top:10px;left:10px;right:10px;bottom:10px;content:'';opacity:0;
    background:-webkit-linear-gradient(top,rgba(44,44,44,0) 0%,rgba(44,44,44,0.7) 75%);
    background:linear-gradient(to bottom,rgba(44,44,44,0) 0%,rgba(44,44,44,0.7) 75%);
    -webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)
}
figure.sadie-effect .box{position:absolute;font-family: 'Oswald', sans-serif;bottom:-10px;left:40px;right:40px;color:#fff;text-align:center;
    -webkit-transition:-webkit-transform 0.35s,color .35s;transition:transform 0.35s,color .35s;
    -webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)
}
figure.sadie-effect .title{border:1px solid #fff;padding:8px 5px;font-size:20px;line-height:26px;text-transform:uppercase}
figure.sadie-effect figcaption::before,
figure.sadie-effect p{-webkit-transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s}
figure.sadie-effect p{margin-bottom:10px;font-size:12px;color:#fff;opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}

figure.sadie-effect:hover .box{-webkit-transform:translate3d(0,-60%,0) translate3d(0,-50px,0);transform:translate3d(0,-60%,0) translate3d(0,-50px,0)}
figure.sadie-effect:hover .box .title{background:rgba(0,0,0,0.4)}
figure.sadie-effect:hover figcaption::before,
figure.sadie-effect:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

figure.bubba-effect{background:rgba(0,0,0,0.5);position: relative;      overflow: hidden;      text-align: center;      cursor: pointer;      border: 1px solid #fff;      padding: 10px;}
figure.bubba-effect img{opacity: .9;-webkit-transition:opacity .35s;transition:opacity .35s;display: block;      min-height: 100%;      width: 100%;      }
figure.bubba-effect:hover img{opacity:.5}

figure.bubba-effect figcaption{position:absolute;top: 10px;right: 10px;bottom: 10px;left: 10px;}
figure.bubba-effect figcaption .box{position:absolute;right: 40px;bottom: 40px;left: 40px;height: 100px;color:#fff;text-align:center;}
figure.bubba-effect figcaption .box p{margin-bottom:10px;font-size:12px;color:#fff;}

figure.bubba-effect figcaption .box .title{padding:8px 5px;font-size:20px;line-height:26px;text-transform:uppercase;position:relative;font-family: 'Oswald', sans-serif;}
figure.bubba-effect figcaption .box .title::before,
figure.bubba-effect figcaption .box .title::after{content:'';opacity:0;width:100%;height:100%;
    position: absolute;top: 0;left: 0;
    -webkit-transition:background 0.35s,opacity 0.35s,-webkit-transform .35s;
    transition:background 0.35s,opacity 0.35s,transform .35s;}

figure.bubba-effect figcaption .box .title::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1)}
figure.bubba-effect figcaption .box .title::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0)}

figure.bubba-effect:hover {}
figure.bubba-effect:hover figcaption .box .title{background: rgba(0,0,0,0.3)}
figure.bubba-effect:hover figcaption .box .title::before,
figure.bubba-effect:hover figcaption .box .title::after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}

.animated{
    opacity:0;animation-play-state: paused;
    -webkit-animation-duration:.5s;animation-duration:.5s;
    -webkit-animation-fill-mode:both;animation-fill-mode:both;
    -webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out
}
.animated.animate{opacity:1;animation-play-state:running;}
.animated.slow{-webkit-animation-duration:.8s;animation-duration:.8s;}

.anim1{-webkit-animation-delay: 0s;animation-delay: 0s;}
.anim2{-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
.anim3{-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
.anim4{-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
.anim5{-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}
.anim6{-webkit-animation-delay: 2s;animation-delay: 2s;}
@-webkit-keyframes fadeInLeft {
    0%{opacity:0;-webkit-transform:translateX(-40px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@keyframes fadeInLeft {
    0%{opacity:0;transform:translateX(-40px)}
    100%{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes fadeInRight {
    0%{opacity:0;-webkit-transform:translateX(40px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@keyframes fadeInRight {
    0%{opacity:0;transform:translateX(40px)}
    100%{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes fadeInTop {
    0%{opacity:0;-webkit-transform:translateY(40px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@keyframes fadeInTop {
    0%{opacity:0;transform:translateY(40px)}
    100%{opacity:1;transform:translateY(0)}
}
@-webkit-keyframes fadeInBottom {
    0%{opacity:0;-webkit-transform:translateY(-40px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@keyframes fadeInBottom {
    0%{opacity:0;transform:translateY(-40px)}
    100%{opacity:1;transform:translateY(0)}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
.fadeInTop{-webkit-animation-name:fadeInTop;animation-name:fadeInTop}
.fadeInBottom{-webkit-animation-name:fadeInBottom;animation-name:fadeInBottom}

@-webkit-keyframes bounceUpDown {
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}
    40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}
    60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}
}
@keyframes bounceUpDown {
    0%,20%,50%,80%,100%{-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}
    40%{-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-webkit-transform:translateY(-30px);transform:translateY(-30px)}
    60%{-moz-transform:translateY(-15px);-ms-transform:translateY(-15px);-webkit-transform:translateY(-15px);transform:translateY(-15px)}
}
.bounceUpDown{-moz-animation:bounceUpDown 2s 3;-webkit-animation:bounceUpDown 2s 3;animation:bounceUpDown 2s 3}

/* End Animations*/