:root {
    /*--main-color: #232323;*/
    --main-color: #FFEBCD;
    --add-color: #393939;
    --green-color: #2d9062;
    --yellow-color: #faaf08;
    --wheat-color: #FFEBCD;
    --pattern: url(/img/menu-icons/black-scratch-lines.png);
}

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

.front-side, .back-side {
    background-size: cover;
    background-position: center;
    min-height: 120px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
    text-align: center;
    color: var(--yellow-color);
    text-shadow: 2px 1px #000;
    -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
}

.back-side {
    background: var(--add-color);
    background: -webkit-linear-gradient(45deg,var(--add-color) 0%,#000 100%);
    background: -o-linear-gradient(45deg,var(--add-color) 0%,#000 100%);
    background: linear-gradient(37deg,#faaf08 2%,#232323 30%,#232323 65%,#faaf08 100%)
}

.image-container:hover .front-side, .image-container:hover .back-side {
    -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-side {
    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
}

.image-container .back-side {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 3px;
    margin: 0px 0px 3px 3px;
    display: block;
    overflow: hidden;
    height: 120px;
    width: 123px;
}

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

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

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

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

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

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