/* Initial Card CSS */

.card-style-1 {
    margin-bottom: 3.5rem;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, .07), 0 2px 9px 0 rgba(62, 57, 107, .06);
    -moz-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, .07), 0 2px 9px 0 rgba(62, 57, 107, .06);
    box-shadow: 0 10px 40px 0 rgba(62, 57, 107, .07), 0 2px 9px 0 rgba(62, 57, 107, .06);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    will-change: transform, box-shadow;
}

.card-style-1:hover {
    box-shadow: rgba(72, 76, 89, 0.28) 0px 16px 32px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    transform: scale(1.05);
}

.card-style-1-image {
    position: relative;
    height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-style-1-content {
    padding: 1.5rem;
}

.card-style-1-content h3 {
    font-size: 1.5rem;
    color: #101314;
    margin-bottom: 1.5rem;
}

.card-style-1-texteditor {
    --max-lines: 3;
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    overflow: hidden;
    margin-bottom: 3rem;
}

.card-style-1-texteditor::before {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
}

.card-style-1-texteditor::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1rem;
    height: 1rem;
    background: white;
}

.card-style-1-button {
    color: #f60c1a;
    display: flex;
    align-items: center;
}

.card-style-1-date {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px 20px;
    background-color: #f60c1a;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}

.card-style-1-date span {
    display: block;
    text-align: center;
}

.card-style-1-filter {
    height: 100%;
    background-color: rgba(0, 0, 0, .15);
}

/* Card Style 2 */

.card-style-2 {
    height: 540px;
    margin-bottom: 1rem;
    border: 1px solid #757575;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    will-change: transform, box-shadow;
}

.card-style-2 .card-href {
    margin-left: 10px;
    margin-right: 10px;
}

.card-style-2:hover {
    transform: scale(1.05);
}

.card-style-2-image {
    position: relative;
    height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-style-2-content {
    padding: 1.5rem;
}

.card-style-2-content h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0;
}

.card-style-2-texteditor {
    --max-lines: 9;
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    overflow: hidden;
    margin-bottom: 1rem;
    color: #fff;
}

.card-style-2-texteditor::before {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
}

.card-style-2-texteditor::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1rem;
    height: 1rem;
    background: white;
}

.card-style-2-button {
    font-size: 1.25rem;
    color: #fff;
    display: flex;
    align-items: center;
}

.card-style-2-date {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px 20px;
    background-color: #f60c1a;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}

.card-style-2-date span {
    display: block;
    text-align: center;
}

.card-style-2-filter {
    height: 100%;
    background-color: rgba(0, 0, 0, .15);
}

/* Card Style 3 */

.card-style-3 {
    height: 350px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-style-3-caption {
    position: absolute;
    left: 20px;
    bottom: 20px;
}

.card-style-3-caption h3 {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0;
}

.card-style-3-filter {
    height: 100%;
    background-image: radial-gradient( circle 865px at 97.1% 8%, rgba(255, 255, 255, 0) 0%, rgba(6, 4, 4, 0.80) 100.2%);
}

.card-style-4 {
    background-color: rgba(16,24,32, .6);
    color: #fff;
    box-shadow:rgba(0, 0, 0, 0.1) 0px 15px 35px 0px, rgba(0, 0, 0, 0.07) 0px 3px 10px 0px;
}

.card-style-4-title {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.card-style-4-title span.text-orange {
    color: #f60c1a;
}

.card-style-4-title h3 {
 font-size: 1.75rem;       
}

.card-style-4-content {
    padding: 1rem;
}

.card-style-4-menu {
    padding-bottom: 2.5rem;
}

.card-style-5 {
    margin-bottom: 3.5rem;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    will-change: transform, box-shadow;
}

.card-style-5:hover {
    box-shadow: 0 10px 20px rgba(220, 220, 220, 0.5);
    transform: scale(1.05);
}

.card-style-5-image {
    position: relative;
    height: 240px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.card-style-5-content {
    padding: 2.5rem;
}

.card-style-5-content h5 {
    font-size: 1.35rem;
}

.card-style-5-content h5.text-price {
    color: #f60c1a;
}

.card-style-6 {
    margin-bottom: 3.5rem;
    background-color: rgba(16,24,32, .6);
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.52) 0px 2px 6px 0px;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    will-change: transform, box-shadow;
}

.card-style-6:hover {
    cursor: pointer;
    transform: scale(1.05);
}

.card-style-6-image {
    position: relative;
    height: 320px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
    .card-style-6-image {
        height: 170px;
    }
}

@media (min-width: 1330px) {
    .card-style-6-image {
        height: 300px;
    }
}

@media (min-width: 1600px) {
    .card-style-6-image {
        height: 420px;
    }
}

@media (min-width: 2560px) {
    .card-style-6-image {
        height: 580px;
    }
}

@media (max-width: 769px) {
    .card-style-6-image {
        height: 220px;
    }
}

@media (max-width: 426px) {
    .card-style-6-image {
        height: 370px;
    }
}

@media (max-width: 320px) {
    .card-style-6-image {
        height: 265px;
    }
}

.card-style-6-content {
    padding: .5rem 1.25rem;
}

.card-style-6-content h5 {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.card-style-6-content h5.text-price {
    color: #f60c1a;
}

/* Flexible */

.card-href {
    color: inherit;
}

.card-href:hover {
    color: inherit;
    text-decoration: none;
}