﻿
.blogList {

}

.blogWelcome h2 {
    text-align: left;
}

.blogElement {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.16);
    height: 100%;
    background: white;
}

    .blogElement .blogImg {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }
        .blogElement .blogImg img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            transition: all 0.5s;
        }

    .blogElement:hover .blogImg img {
        transform: scale(1.1);
        transition: all 0.5s;
    }

.blogContent {
    position: relative;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 200px);
}
    .blogContent .blogTitle {
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.64px;
        text-transform: uppercase;
    }

    .blogContent .blogTag {
        width: fit-content;
        padding: 5px 15px;
        border-radius: 2px;
        position: absolute;

        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .blogContent .blogTag p {
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            font-size: 14px;
            width : max-content;
        }

    .blogContent .blogDate {
        color: #D9D9D9;
        font-weight: 600;
    }

    .blogContent .blogFooter {
        margin-top: 20px;
        text-align: right;
    }

        .blogContent .blogFooter p {
            font-size: 13px;
            font-weight: 600;
        }


/* SLIDER CATEGORY */
.mobileSlider {
    display: block;
}

.categorySlider {
    display: none;
}

.categoryTag {
    padding: 5px;
    width: 100% !important;
    border-radius: 3px;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 14px;
    width: max-content;
    text-align: center;
    display: block;
    transition: all 0.5s;
}

.categoryTag:hover {
    color : white;
}





/* COLOR CLASS */

.coloraad14e {
    background: #aad14e;
    border: 2px solid #aad14e;
}

.color73b544 {
    background: #73b544;
    border: 2px solid #73b544;
}

.color334335 {
    background: #334335;
    border: 2px solid #334335;
}


.colorb72a37 {
    background: #b72a37;
    border: 2px solid #b72a37;
}

.color5f5f5f {
    background: #5f5f5f;
    border: 2px solid #5f5f5f;
}

.colore3cf56 {
    background: rgb(227, 207, 86);
    border: 2px solid #e3cf56;
}

.color0c6576 {
    background: #0c6576;
    border: 2px solid #0c6576;
}

.color94b0b3 {
    background: #94b0b3;
    border: 2px solid #94b0b3;
}
.colorffcb71 {
    background: #ffcb71;
    border: 2px solid #ffcb71;
}
.colorfb6771 {
    background: #fb6771;
    border: 2px solid #fb6771;
}
.colorb46134 {
    background: #b46134;
    border: 2px solid #b46134;
}

.color00e1fd {
    background: #00e1fd;
    border: 2px solid #00e1fd;
}




.isMain .coloraad14e {
    background: #fff;
    color: #aad14e;
    border: 2px solid #aad14e;
}

.isMain .color73b544 {
    background: #fff;
    color: #73b544;
    border: 2px solid #73b544;
}

.isMain .color334335 {
    background: #fff;
    color: #334335;
    border: 2px solid #334335;
}

.isMain .colorfb6771 {
    background: #fff;
    color: #fb6771;
    border: 2px solid #fb6771;
}

.isMain .colorb72a37 {
    background: #fff;
    color: #b72a37;
    border: 2px solid #b72a37;
}

.isMain .color5f5f5f {
    background: #fff;
    color: #5f5f5f;
    border: 2px solid #5f5f5f;
}


.isMain .color0c6576 {
    background: #fff;
    color: #0c6576;
    border: 2px solid #0c6576;
}

.isMain .color94b0b3 {
    background: #fff;
    color: #94b0b3;
    border: 2px solid #94b0b3;
}

.isMain .colorffcb71 {
    background: #fff;
    color: #ffcb71;
    border: 2px solid #ffcb71;
}

.isMain .colorfb6771 {
    background: #fff;
    color: #fb6771;
    border: 2px solid #fb6771;
}

.isMain .colorb46134 {
    background: #fff;
    color: #b46134;
    border: 2px solid #b46134;
}

.isMain .color00e1fd {
    background: #00e1fd;
    border: 2px solid #00e1fd;
}



.coloraad14e:hover {
    background: #fff;
    color: #aad14e;
    border: 2px solid #aad14e;
}

.color73b544:hover {
    background: #fff;
    color: #73b544;
    border: 2px solid #73b544;
}

.color334335:hover {
    background: #fff;
    color: #334335;
    border: 2px solid #334335;
}

.colorfb6771:hover {
    background: #fff;
    color: #fb6771;
    border: 2px solid #fb6771;
}

.colorb72a37:hover {
    background: #fff;
    color: #b72a37;
    border: 2px solid #b72a37;
}

.color5f5f5f:hover {
    background: #fff;
    color: #5f5f5f;
    border: 2px solid #5f5f5f;
}


.color0c6576:hover {
   background: #fff;
    color: #0c6576;
    border: 2px solid #0c6576;
}

.color94b0b3:hover {
    background: #fff;
    color: #94b0b3;
    border: 2px solid #94b0b3;
}

.colorffcb71:hover {
     background: #fff;
    color: #ffcb71;
    border: 2px solid #ffcb71;
}

.colorfb6771:hover {
    background: #fff;
    color: #fb6771;
    border: 2px solid #fb6771;
}

.colorb46134:hover {
    background: #fff;
    color: #b46134;
    border: 2px solid #b46134;
}
.color00e1fd:hover {
    background: #00e1fd;
    border: 2px solid #00e1fd;
}

./*isMain .coloraad14e:hover {
    background: #aad14e;
    border: 2px solid #aad14e;
    color: #fff;
}

.isMain .color73b544:hover {
    background: #73b544;
    border: 2px solid #73b544;
    color: #fff;
}

.isMain .color334335:hover {
    background: #334335;
    border: 2px solid #334335;
    color: #fff;
}

.isMain .colorfb6771:hover {
    background: #fb6771;
    border: 2px solid #fb6771;
    color: #fff;
}

.isMain .colorb72a37:hover {
    background: #b72a37;
    border: 2px solid #b72a37;
    color: #fff;
}

.isMain .color5f5f5f:hover {
    background: #5f5f5f;
    border: 2px solid #5f5f5f;
    color: #fff;
}*/


@media (min-width: 768px) {
}

@media (min-width: 1024px) {
    .mobileSlider {
        display: none;
    }

    .categorySlider {
        display: block;
    }

    #categorySlider .carousel-inner .carousel-item-end.active,
    #categorySlider .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    #categorySlider .carousel-inner .carousel-item-start.active,
    #categorySlider .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }


    #categorySlider .carousel-inner .carousel-item-end,
    #categorySlider .carousel-inner .carousel-item-start {
        transform: translateX(0);
    }
}



@media (min-width: 1200px) {
    .mobileSlider {
        display: none;
    }

    .categorySlider {
        display: block;
    }
    .blogContent .blogTitle {
        font-size: 20px;
    }

    #categorySlider .carousel-inner .carousel-item-end.active,
    #categorySlider .carousel-inner .carousel-item-next {
        transform: translateX(16.66666667%);
    }

    #categorySlider .carousel-inner .carousel-item-start.active,
    #categorySlider .carousel-inner .carousel-item-prev {
        transform: translateX(-16.66666667%);
    }


    #categorySlider .carousel-inner .carousel-item-end,
    #categorySlider .carousel-inner .carousel-item-start {
        transform: translateX(0);
    }
}