.ch-col {
	position: relative;
    overflow: hidden;
    height: 320px;
    border-radius: 4px;
	border: 1px solid #ccc;
}

.ch-col img {
  width:100%;
  -moz-transition:all, 0.5s;
  -o-transition:all, 0.5s;
  -webkit-transition:all, 0.5s;
  transition:all, 0.5s;
  height:100%;
}

.ch-col .ch-titles {
    position: absolute;
    bottom: 0;
    text-align: center;
    background-color: #ffc107;
    width: 100%;
    color: #fff;
    text-transform: capitalize;
    height: 65px;
    padding: 2px 0;
}

.ch-col .ch-title {
  font-weight:bold;
  font-size: 18px;
  padding: 10px;
}

.ch-col .on-hover {
	position: absolute;
    top: 0;
    bottom: 65px;
    width: 100%;
    padding: 25px;
    color: #fff;
    text-align: justify;
    background-color: rgba(8, 61, 86, 0.6);
    border-bottom: 1px solid #ffc107;
    visibility: hidden;
    opacity: 0;
    -moz-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    -webkit-transition: all, 0.5s;
    transition: all, 0.5s;
}

.ch-col .on-hover li{
	text-align: center;
}

.ch-col:hover .on-hover {
  visibility:visible;
  opacity:1;
  padding:5px;
  padding-top: 25px;
  -moz-transition:all, 1s;
  -o-transition:all, 1s;
  -webkit-transition:all, 1s;
  transition:all, 1s;
}

.ch-col:hover img {
  -moz-transform:perspective(1.1) scale3d(1.1, 1.1, 1.1);
  -webkit-transform:perspective(1.1) scale3d(1.1, 1.1, 1.1);
  transform:perspective(1.1) scale3d(1.1, 1.1, 1.1);
}

.btn-primary {
  background:#ab6701;
  border:none;
  border-radius:0;
  padding:10px 25px;
  border:1px solid transparent;
  -moz-transition:all, 0.3s;
  -o-transition:all, 0.3s;
  -webkit-transition:all, 0.3s;
  transition:all, 0.3s;
  margin-left: 50px;
}

.btn-primary:hover {
  background:#fff;
  color:#dc8f01;
  border:1px solid #dc8f01;
}

.btn-secondary {
  background:#fff;
  color:#dc8f01;
  border-radius:0;
}

.btn-secondary:hover {
  background:#dc8f01;
  color:#fff;
}

@media (max-width: 1200px) {
  .ch-col:hover .on-hover {
    padding:15px;
  }
}

@media (max-width: 1200px) {
  .ch-col:hover .on-hover {
    padding:25px;
  }
}

@media (max-width: 992px) {
  .ch-col {
    margin-bottom:25px;
  }
}

.fadeIn {
  -webkit-animation-name:fadeIn;
  animation-name:fadeIn;
}

.ribbon {
  position:absolute;
  right:10px;
  top:-5px;
  z-index:1;
  overflow:hidden;
  width:75px;
  height:75px;
  text-align:right;
}

.ribbon span {
  font-size:10px;
  color:#fff;
  text-transform:uppercase;
  text-align:center;
  font-weight:bold;
  line-height:20px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  width:100px;
  display:block;
  background:#79A70A;
  background: linear-gradient(#c12127 0%, #c12127 100%);
  box-shadow:0 3px 10px -5px rgba(0, 0, 0, 1);
  position:absolute;
  top:19px;
  right:-21px;
}

.ribbon span::before {
  content:'';
  position:absolute;
  left:0px;
  top:100%;
  z-index:-1;
  border-left:3px solid #c12127;
  border-right:3px solid transparent;
  border-bottom:3px solid transparent;
  border-top:3px solid #c12127;
}

.ribbon span::after {
  content:'';
  position:absolute;
  right:0%;
  top:100%;
  z-index:-1;
  border-right:3px solid #c12127;
  border-left:3px solid transparent;
  border-bottom:3px solid transparent;
  border-top:3px solid #c12127;
}

.red span {
  background:linear-gradient(#F70505 0%, #8F0808 100%);
}

.red span::before {
  border-left-color:#8F0808;
  border-top-color:#8F0808;
}

.red span::after {
  border-right-color:#8F0808;
  border-top-color:#8F0808;
}

.blue span {
  background: linear-gradient(#2196F3 0%, #3F51B5 100%);
}

.blue span::before {
  border-left-color:#3F51B5;
  border-top-color:#3F51B5;
}

.blue span::after {
  border-right-color:#3F51B5;
  border-top-color:#3F51B5;
}

.green span {
  background: linear-gradient(#8BC34A 0%, #4CAF50 100%);
}

.green span::before {
  border-left-color:#4CAF50;
  border-top-color:#4CAF50;
}

.green span::after {
  border-right-color:#4CAF50;
  border-top-color:#4CAF50;
}

.grey span {
  background: linear-gradient(#9E9E9E 0%, #607D8B 100%);
}

.grey span::before {
  border-left-color:#607D8B;
  border-top-color:#607D8B;
}

.grey span::after {
  border-right-color:#607D8B;
  border-top-color:#607D8B;
}