@font-face {
    font-family: 'Cooper';
    src: url(/fonts/CooperMdBT-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Cooper', sans-serif;
}

@media screen and (max-width: 640px)
{
    body, html{
        width: 100vw;
        overflow-x: hidden;
    }
}

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

html {
    background: #d6d4d0;
    background: radial-gradient(farthest-corner,#fff,#ebebeb);
    color: #00142e;
    font-family: Cooper, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.3;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

strong {
    font-weight: bold;
}
.font-title {
    font-family: Cooper, "Helvetica Neue", sans-serif;
    font-weight: 600;
}
h1 {
    font-family: Cooper, "Helvetica Neue", sans-serif;
    font-weight: 600;
    line-height: 1.2em;
    /*border-bottom: 1px solid #cccccc;*/
    /*padding-bottom: 5px;*/
    margin-bottom: 10px;
    /*padding-top: 3px;*/
}

h2 {
    font-family: Cooper, "Helvetica Neue", sans-serif;
    font-size: 1.8em;
    line-height: 1em;
    /*padding-bottom: 10px;*/
    font-weight: 600;
}

h3 {
    font-family: Cooper, "Helvetica Neue", sans-serif;
    font-size: 1.6em;
    line-height: 1em;
    /*padding-bottom: 5px;*/
    font-weight: 600;
}

h4 {
    font-family: Cooper, "Helvetica Neue", sans-serif;
    font-size: 1.1em;
    line-height: 1em;
}

.roboto-slab {
    font-family: Cooper, "Helvetica Neue", sans-serif;
}

p {
    margin: 0 0 1em;
}
a.no-hover:hover { background: none !important; }
main { background-color: #f8f8f8; }

.hero-unit {
    padding: 20px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    color: inherit;
    border-radius: 6px;
    @media (max-width: 768px) {
        padding: 20px;
    }
}

.hero-unit h1 {
    margin-bottom: 0;
    font-size: 54px;
    letter-spacing: -1px;
    color: #4d4d4f;
    @media (max-width: 768px) {
        font-size: 36px;
        line-height: 1.5;
    }
}

.hero-unit h2 {
    color: #4d4d4f;
}

.hero-unit .lead {
    margin-top: 20px;
    padding: 0;
    font-size: 20px;
    @media (max-width: 768px) {
        margin-top: 10px;
        margin-bottom: 0;
        padding: 5px;
    }
}

.hero-unit .hero-img img {
    margin-top: 60px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.fade-in {
    opacity: 0;
    transition: opacity 1s;
}

.in-view {
    opacity: 1;
}

/* Recipe Cards */

.card {
    border: rgba(211, 211, 211, 0.49) thin solid;
    border-radius: 3px;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    padding-bottom: 10px;
    cursor: pointer;
    display: block;
}

.card-img {
    height: 250px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.card-header {
    margin-left: 10px;
    margin-right: 10px;
}

.card-categories {
    line-height: normal;
    margin-top: 5px;
    margin-bottom: 10px;
}

.card-title {
    font-weight: bold;
    font-family: Signika, "Helvetica Neue", sans-serif;
    font-size: 26px;
    color: #4d4d4f;
}

.post-category {
    color: #e07e5a;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    margin-right: 10px;
}
.post-category:hover { text-decoration: none; color: gray; }

.card-rating {
    font-size: 12px;
    color: #e07e5a;
    margin-bottom: 5px;
}
.card-rating > i { margin: 1px; }
.card-rating > span { color: #4d4d4f; }

.card-body > p {
    line-height: normal;
    font-size: 16px;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.card-footer {
    margin-left: 10px !important;
    margin-right: 10px !important;
    text-align: right;
}

.btn-favorite {
    background: none;
    color: #e07e5a;
}

.btn-favorite:hover { color: #e07e5a; filter: opacity(0.95); }

/* Heart */
* {
    box-sizing: border-box;
}

.love {
    display: block;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.heart {
    fill: #AABBC2;
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
    z-index: 1;
}

.active .heart {
    fill: #FF4D70;
}

.save-heart-pop {
    -webkit-animation: saveHeartPop 0.4s ease-out;
            animation: saveHeartPop 0.4s ease-out;
}

@-webkit-keyframes saveHeartPop {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(244, 63, 94, 0));
    }
    35% {
        transform: scale(1.28);
        filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.45));
    }
    65% {
        transform: scale(0.92);
        filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.25));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(244, 63, 94, 0));
    }
}

@keyframes saveHeartPop {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(244, 63, 94, 0));
    }
    35% {
        transform: scale(1.28);
        filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.45));
    }
    65% {
        transform: scale(0.92);
        filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.25));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(244, 63, 94, 0));
    }
}
.active:not(.initial) .heart {
    transform: scale(0);
    -webkit-animation: heart 1s cubic-bezier(0.5, 0.1, 0.7, 0.8) 0.3s forwards;
    animation: heart 1s cubic-bezier(0.5, 0.1, 0.7, 0.8) 0.3s forwards;
}

.drop {
    background: #FF99AD;
    width: 0px;
    height: 0px;
    margin-top: 20px;
    position: absolute;
    left: 7px;
    top: -13px;
    opacity: 1;
    border-radius: 50%;
}

.active:not(.initial) .drop {
    background: #689CD9;
    transition: all 0.3s cubic-bezier(0.5, 0, 1, 1) 0.1s;
    -webkit-animation: drop 0.3s linear 0.1s forwards;
    animation: drop 0.3s linear 0.1s forwards;
}

.drop:before {
    content: "";
    display: block;
    background: #8CE8C3;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -5px;
    left: -5px;
    border-radius: 50%;
}

.active:not(.initial) .drop:before {
    -webkit-animation: drop 0.3s linear 0.2s forwards;
    animation: drop 0.3s linear 0.2s forwards;
}

.drop:nth-child(1) {
    top: -15px;
    left: 7px;
    transform: rotate(45deg);
}

.drop:nth-child(2) {
    top: -15x;
    left: 10px;
    transform: rotate(96deg);
}

.drop:nth-child(3) {
    top: -10px;
    left: 10px;
    transform: rotate(147deg);
}

.drop:nth-child(4) {
    top: -8px;
    left: 8px;
    transform: rotate(198deg);
}

.drop:nth-child(5) {
    top: -10px;
    left: 5px;
    transform: rotate(249deg);
}

.drop:nth-child(6) {
    top: -12px;
    left: 5px;
    transform: rotate(300deg);
}

.drop:nth-child(7) {
    top: -13px;
    left: 5px;
    transform: rotate(351deg);
}

.active .drop:nth-child(1) {
    top: -60px;
    left: 15px;
    transform: rotate(-115deg);
}

.active .drop:nth-child(2) {
    top: -35px;
    left: 50px;
    transform: rotate(-59deg);
}

.active .drop:nth-child(3) {
    top: 10px;
    left: 50px;
    transform: rotate(-4deg);
}

.active .drop:nth-child(4) {
    top: 35px;
    left: 5px;
    transform: rotate(47deg);
}

.active .drop:nth-child(5) {
    left: -35px;
    top: 15px;
    transform: rotate(98deg);
}

.active .drop:nth-child(6) {
    top: -20px;
    left: -40px;
    transform: rotate(149deg);
}

.active .drop:nth-child(7) {
    top: -50px;
    left: -25px;
    transform: rotate(200deg);
}

/* ANIMATIONS */

@-webkit-keyframes beat {
    0% {
        transform: scale(1);
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    70% {
        transform: scale(1);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes beat {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes heart {
    0% {
        transform: scale(0);
    }
    15% {
        transform: scale(1.2);
    }
    20% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.2);
    }
    80% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes heart {
    0% {
        transform: scale(0);
    }
    15% {
        transform: scale(1.2);
    }
    20% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.2);
    }
    80% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes circle {
    0% {
        border: 5px solid #E2264D;
        width: 10px;
        height: 10px;
    }
    80% {
        border: 35px solid #CC8EF5;
        width: 70px;
        height: 70px;
        top: -25px;
        left: -25px;
    }
    100% {
        border-width: 0px;
        width: 70px;
        height: 70px;
        top: -25px;
        left: -25px;
    }
}

@-webkit-keyframes drop {
    0% {
        width: 0px;
        height: 0px;
    }
    10% {
        width: 5px;
        height: 5px;
    }
    90% {
        width: 5px;
        height: 5px;
    }
    100% {
        width: 0px;
        height: 0px;
    }
}

@keyframes drop {
    0% {
        width: 1px;
        height: 1px;
    }
    10% {
        width: 0px;
        height: 0px;
    }
    90% {
        width: 5px;
        height: 5px;
    }
    100% {
        width: 0px;
        height: 0px;
    }
}

/* Submenu positioning */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -7px;
    display: none;
    position: absolute;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.caret-right { transform: rotate(-90deg); }

@-webkit-keyframes fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-slide {
    -webkit-animation: fade-slide-up 0.6s ease-out forwards;
            animation: fade-slide-up 0.6s ease-out forwards;
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
    gap: 0.25rem;
    font-size: 1.25rem; /* text-sm */
}

.pagination > a,
.pagination > span {
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 0.375rem;
    background-color: white;
    color: #334155; /* slate-700 */
    text-decoration: none;
}

.pagination > .page-item.active > .page-link {
    color: #0284c7; /* sky-600 */
    border-color: #0284c7;
    text-decoration: underline;
}

.pagination > .gap {
    color: #94a3b8; /* slate-400 */
    padding: 0.5rem 0.75rem;
}

.pagination > .page-item > .page-link:last-of-type { margin-left: 0.5rem; }
.pagination > .page-item > .page-link:hover { color: #94a3b8; }

.z-100 {
    z-index: 100;
}

.sms-panel {
    overflow: hidden;
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
    transition:
            max-height 320ms ease,
            opacity 200ms ease,
            transform 320ms ease;
}

.sms-collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    padding: 0 !important;
}