/* Cards */
.card {
  max-width: 340px;
  position: relative;
  background: #333333;
  color: #000;
  cursor: pointer;
  margin-bottom: 40px;
  text-align: center;
}

.border {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #ff5003;
  opacity: 0.5;
  left: 0px;
  top: 0px;
}

.card {
  position: relative;
  padding: 150px 0px 30px 0px;
  width: 100%;
}

.card > img {
  width: 100%;
  position: absolute;
  top: -10%;
  left: 0;
}

.card-color-0 {
  background-color: #f4d2c9;
}

.card-color-1 {
  background-color: #333333;
}

.card-color-2 {
  background-color: #333333;
}

.card-color-3 {
  background-color: #333333;
}

.btn-foro{
  width: 90%;
  height: 40px;
  text-align: center;
  margin-top: 20px;
  font-size: 1.2em;
  background: #ff5003;
  color: black;
  position: relative;
  border-radius: 10px;
  transition: all .3s;
}
.btn-foro:hover{
  background: #c23b01;
}
.btn:hover {
 
  outline: 0 !important;
}
.btn:focus {
  outline: 0 !important;
}
.btn:active {
  outline: 0 !important;
}
/* 
** Transitions
*/

.card {
  -webkit-transition: opacity 200ms linear 320ms, -webkit-transform 200ms ease-out 320ms;
  transition: opacity 200ms linear 320ms, -webkit-transform 200ms ease-out 320ms;
  transition: opacity 200ms linear 320ms, transform 200ms ease-out 320ms;
  transition: opacity 200ms linear 320ms, transform 200ms ease-out 320ms, -webkit-transform 200ms ease-out 320ms;
}

.border {
  -webkit-transition: opacity 200ms linear, -webkit-transform 200ms ease-out;
  transition: opacity 200ms linear, -webkit-transform 200ms ease-out;
  transition: opacity 200ms linear, transform 200ms ease-out;
  transition: opacity 200ms linear, transform 200ms ease-out, -webkit-transform 200ms ease-out;
}

.card img {
  -webkit-transition: opacity 200ms linear 0ms, -webkit-transform 200ms ease-in 0ms;
  transition: opacity 200ms linear 0ms, -webkit-transform 200ms ease-in 0ms;
  transition: opacity 200ms linear 0ms, transform 200ms ease-in 0ms;
  transition: opacity 200ms linear 0ms, transform 200ms ease-in 0ms, -webkit-transform 200ms ease-in 0ms;
}

.card {
  -webkit-transform: translate3d(5%, 0px, 0px);
          transform: translate3d(5%, 0px, 0px);  
  -webkit-transition: opacity 200ms linear 120ms, -webkit-transform 200ms ease-in 120ms;  
  transition: opacity 200ms linear 120ms, -webkit-transform 200ms ease-in 120ms;  
  transition: opacity 200ms linear 120ms, transform 200ms ease-in 120ms;  
  transition: opacity 200ms linear 120ms, transform 200ms ease-in 120ms, -webkit-transform 200ms ease-in 120ms;
}
/* 
** Media Queries
*/

@media screen and (max-width: 600px) {
  .card-column {
    width: 100%;
  }
}