@charset 'utf-8';
.card-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem; 
    display: block; 
    color: #333;
    font-size: 1.3rem;
    text-rendering: optimizeLegibility;
    line-height: 1.42857143;  
}
.columns {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
}
.columns::before{
  content:"";
  display: block;
  width:22%;
  order:1;
  padding: 0.5rem 0.5rem 2.5rem 0.5rem;
}
.columns::after{
  content:"";
  display: block;
  width:22%;
  padding: 0.5rem 0.5rem 2.5rem 0.5rem;
}
.col-4 {
  width: 22%;
}
.col-3 {
  width: 27%;
}
.column {
    padding: 0.5rem 0.5rem 2.5rem 0.5rem;
}
.column.col-12, .column.col-11, .column.col-10, .column.col-9, .column.col-8, .column.col-7, .column.col-6, .column.col-5, .column.col-4, .column.col-3, .column.col-2, .column.col-1 {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}
*, *::before, *::after {
    box-sizing: inherit;
}
.card {
    background: #fff;
    border: .1rem solid #efefef;
    border-radius: .2rem;
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
}
.card .card-image {
    padding-top: 0;
    position: relative;
}
.card .card-image:first-child img {
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
}
.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}
.card .card-header, .card .card-body, .card .card-footer {
    padding: 1.5rem 1.5rem 0 1.5rem;
}
.card .card-header:last-child, .card .card-body:last-child, .card .card-footer:last-child {
    padding-bottom: 1.5rem;
}
.card .card-title {
    font-size: 1.4em;
    line-height: 1;
    margin-bottom: .5rem;
    margin-top: 0;
    font-weight: 300;
}
.card-footer {  
    text-align: center;
} 
.card .card-meta {
    color: #3F8CB8;
    font-size: 1em;
    margin-bottom: 0;
    margin-top: 1em;
    border-bottom:double 2px #D6DADB;
}
.btn.btn-primary {
    background: #fff;
    border-color: #2b8bc2;
    color: #3F8CB8;
}
.btn {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    -webkit-appearance: none;
    background: #fff;
    border: .1rem solid #2b8bc2;
    border-radius: .2rem;
    color: #3F8CB8;
    cursor: pointer;
    display: inline-block;
    font-size: 1.4rem;
    height: auto;
    line-height: 1.6rem;
    outline: 0;
    padding: .7rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: all .15s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}
a {
    color: #080808;
    text-decoration: none;
}
.btn.btn-primary:hover {
    background: #0684cb;
    background: -moz-linear-gradient(45deg,  #0684cb 0%, #3fa0f9 100%);
    background: -webkit-linear-gradient(45deg,  #0684cb 0%,#3fa0f9 100%);
    background: linear-gradient(45deg,  #0684cb 0%,#3fa0f9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0684cb', endColorstr='#3fa0f9',GradientType=1 );
    border-color: #2b8bc2;
    color: #fff;
}
@media only screen and (max-width: 954px) {
.card-container {
    font-size: 1.1rem;
}
.col-4 {
  width: 20%;  
}
.columns::before{
  content:"";
  display: block;
  width:20%;
  order:1;
}
.columns::after{
  content:"";
  display: block;
  width:20%;
}
}

@media only screen and (max-width: 660px) {

.col-4 {
  width: 25%;  
}
.columns::before{
  content:"";
  display: block;
  width:25%;
  order:1;
}
.columns::after{
  content:"";
  display: block;
  width: 25%;
}
}
@media only screen and (max-width: 460px) {

  .col-4 {
    width: 23%;  
  }
  .columns::before{
    content:"";
    display: block;
    width:23%;
    order:1;
    padding: 0.3rem;
  }
  .columns::after{
    content:"";
    display: block;
    width:23%;
    padding: 0.3rem;
  }

  .column {
      padding: 0.3rem;
  }
  .card-container {
      font-size: 0.6rem;
  }
  .card .card-header, .card .card-body, .card .card-footer {
      padding: 0.7rem 0.2rem 0 0.2rem;
  }
  .card .card-title {
    font-size: 1.6em;
  }
  .card .card-meta {
    font-size: 1.1em;
}
  .btn {
      padding: .1rem .4rem;
      font-size: 0.8rem;
  }
}