﻿.cz-rec-container{
	background: rgba(51, 51, 51, 0.90);
    height: 140px;
    width: 310px;
    position: fixed;
    z-index: 100000;
    bottom: 95px;
    right: 15px;
    border-radius: 0 0 4px 4px;
    box-shadow: 1px 1px 3px 1px rgba(51, 51, 51, 0.35), 0 0 10px 10px rgba(51,51,51,.1);
    opacity: 1 !important;

    transition: visibility 2.5s, opacity 2.5s ease-in-out;
      -moz-transition: visibility 2.5s, opacity 2.5s ease-in-out;
      -webkit-transition: visibility 2.5s, opacity 2.5s ease-in-out;
      -o-transition: visibility 2.5s, opacity 2.5s ease-in-out;
}
.cz-rec-container.hide, .cz-rec-btn.hide {
	  visibility: hidden;
      opacity: 0 !important;
}
.cz-rec-tb {
	top: 0;
    height: 27px;
    border-radius: 0 0 1px 1px;
    width: 100%;
    z-index: 100002;
    position: absolute;
}
.cz-rec-tb-title {
    padding: 5px 10px 0;
    font-size: 12px;
    opacity: .9;
    color: #fff;
}
.cz-rec-tb-x {
        position: absolute;
    right: 9px;
    top: 3px;
    font-size: 13px;
    opacity: .5;
    cursor: pointer;
    width: 5px;
    z-index: 100005;
    color: #fff;
}
.cz-rec-tb-prev:before {
   border-style: solid;
    border-width: 2px 2px 0 0;
    content: '';
    height: 5px;
    right: 26px;
    position: absolute;
    color: #fff;
    top: 10px;
    vertical-align: top;
    width: 5px;
    transform: rotate(-135deg);
    opacity: .6;
    cursor: pointer;
}
.cz-rec-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: auto;
    background-size: cover;
    background-position: 50% 50%;
    padding-top: 25px;
    z-index: 100001;
    width: 100%;
    cursor: pointer;
    border-radius: 4px 4px 3px 3px;
}
.cz-rec-inner-bg {
    width: 310px;
    height: 115px;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.cz-rec-overlay {
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
    padding: 0 10px;
}
.cz-rec-overlay:hover, .cz-rec-btn:hover ~ .cz-rec-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.1) 100%);
    transition: background .3s ease-in-out;
      -moz-transition: background .3s ease-in-out;
      -webkit-transition: background .3s ease-in-out;
      -o-transition: background .3s ease-in-out;
}
.cz-rec-title {
    color: #FFF;
    margin: 0;
    padding-top: 8px;
    font-size: 18px;
    line-height: 22px;
    text-shadow: 1px 1px 2px #333, 0 0 3px #333;
}
.cz-rec-info {
    color: #FFF;
    font-size: 13px;
    text-shadow: 1px 1px 2px #333, 0 2px 4px #333;
    margin-top: 3px;
    font-style: italic;
}
.cz-rec-about {
    position: absolute;
    bottom: -16px;
    right: 5px;
    color: #f2f2f2;
    opacity: .6;
    font-size: 10px;
    text-shadow: 0.5px 0.5px 3px rgba(51, 51, 51, 0.65);
}
.cz-rec-info-num {
    -webkit-animation-duration: 900ms;
}
@-webkit-keyframes cz-updated {
    0% {
        color: #288BD1;
    }

    100% {
        color: #FFF;
    }
}
.cz-rec-btn {
    color: #fff;
    border-radius: 3px;
    text-align: center;
    position: absolute;
    right: 15px;
    bottom: 13px;
    padding: 3px 8px 2px;
    font-size: 13px;
    line-height: 18px;
    vertical-align: middle;
    visibility: visible;
    opacity: .9;

    transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -webkit-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
}
.cz-rec-btn:hover {
    opacity: 1;
}

@keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, -50px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) translate3d(0, -40px, 0px);
        opacity: 0;
    }
}

.cz-rec-inner-bg img {
  width: 310px;
}

