body {
     background: #F0F0EA;
}

h1, h2, h3, h4 {
     font-style: normal;
     text-transform: uppercase;
     margin-bottom: 1rem;
}

h1 {
     font-style: italic;
     font-size: 2rem;
}

@media (min-width: 768px) {
     h1 {
          font-size: 2.5rem;
     }
}

h2 {
     line-height: 1.25em;
}

@media (min-width: 768px) {
     h2 {
          line-height: 1em;
     }
}

h3 {
     text-transform: none;
     line-height: 1.2em;
     font-size: 2rem;
}

@media (min-width: 768px) {
     h3 {
          line-height: 1.5em;
     }
}

h4 {
     text-transform: capitalize;
     line-height: 1;
     font-size: 1.75rem;
}

.logo {
     margin: 10px auto;
     text-align: center;
     width: 35% !important;
}


@media (min-width: 768px) {
     .logo {
          margin: 0;
          text-align: left;
          position: absolute;
          left: 0;
          top: 0;
          width: 12% !important;
     }
}

.border-10 {
     border: 10px solid #ffffff;
}

.border-red {
     border-color: rgb(151, 27, 47);
}

.image-card {
     background: rgb(151, 27, 47);
}

.button {
     font-size: 1.25rem;
     margin-bottom: 2.5rem;
}

footer {
     background: rgb(151, 27, 47);
}

footer li a ,
footer li a i {
     color: #fff;
}

.fcols {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
}

.fcol {
     width: 100%;
     margin: 0;
     cursor: pointer;
     min-height: 472px;
}

@media (min-width: 768px) {
     .fcol {
          min-height: 380px;
          width: calc(25%);
     }
}

.fcontainer {
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-perspective: 1000px;
     perspective: 1000px;
}

.front,
.back {
     background-size: cover;
     /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);*/
     /*border-radius: 10px;*/
     background-position: center;
     -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     text-align: center;
     min-height: 472px;
     height: auto;
     color: #fff;
     font-size: 1.5rem;
}

@media (min-width: 768px) {
     .front,
     .back  {
          min-height: 380px;
     }
}

.back {
     background: rgb(151, 27, 47);
     /*background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);*/
     /*background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);*/
     /*background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);*/
}

.front:after {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     content: '';
     display: block;
     opacity: 0;
     background-color: #000;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     border-radius: 0;
}
.fcontainer:hover .front,
.fcontainer:hover .back {
     -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
}

.inner {
     -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
     transform: translateY(-50%) translateZ(60px) scale(0.94);
     top: 50%;
     position: absolute;
     left: 0;
     width: 100%;
     padding: 2rem;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     outline: 1px solid transparent;
     -webkit-perspective: inherit;
     perspective: inherit;
     z-index: 2;
}

.fcontainer .back {
     -webkit-transform: rotateY(180deg);
     transform: rotateY(180deg);
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
}

.fcontainer .front {
     -webkit-transform: rotateY(0deg);
     transform: rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
}

.fcontainer:hover .back {
     -webkit-transform: rotateY(0deg);
     transform: rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
}

.fcontainer:hover .front {
     -webkit-transform: rotateY(-180deg);
     transform: rotateY(-180deg);
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
}

.front .inner p {
     font-size: 2rem;
     margin-bottom: 2rem;
     position: relative;
}

.front .inner p:after {
     content: '';
     width: 4rem;
     height: 2px;
     position: absolute;
     background: #C6D4DF;
     display: block;
     left: 0;
     right: 0;
     margin: 0 auto;
     bottom: -.75rem;
}

.front .inner span {
     color: rgba(255,255,255,0.7);
     font-family: 'Montserrat';
     font-weight: 300;
}

.back .inner p {
     color: #ffffff;
     font-size: 2rem;
     text-shadow: 0 0 10px rgba(0,0,0,0.25);
}

@media (min-width: 768px) {
     .back .inner p {
          font-size: 1.5rem;
     }
}