.category-bg {
    height:400px;
    background-color:antiquewhite;
    background-size:cover;
    position:relative;
}

.category-name h1 {
    color: #fff;
    font-size:2rem;
}

.category-name {
    background-color: #00477F;
    padding: 10px 40px;

    position: absolute;
    bottom: 0;
}

.horizontal-list-container{
    padding:4rem 0 2rem 0;
}

.horizontal-product {
    padding: 0;
    height: 260px;
    /* overflow: hidden;*/
    transition: height .7s;
    margin-bottom:2.5rem;
}

.horizontal-product:hover{
    height:300px;
}

.horizontal-product a{
    display:flex;
    height: 100%;
    position:relative;
}


.bg-image {
    width: calc(100% - 310px);
    background-size: cover;
    background-position: center center;
    height: 100%;
    margin-right: 40px;
    position:relative;
}

    .bg-image:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /* Permalink - use to edit and share this gradient. Kalıcı bağlantı - bu gradyanı düzenlemek ve paylaşmak için kullanın: https://colorzilla.com/gradient-editor/#00477f+42,7db9e8+100&1+12,0+100 */
        background: linear-gradient(to right, rgba(0,71,127,1) 12%,rgba(0,71,127,0.66) 42%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        z-index: 1;
    }

.horizontal-product a h4 {
    position:absolute;
    z-index:2;
    color: #fff;
    font-size: 3rem;
    bottom: 20px;
    left: 40px;
}

.dimension-image{
    width:260px;
    background-size:cover;
}

/*.bg-image img{
    width:100%;
}*/
.category_title {
    margin: 40px 0 20px 0;
}

.category_title h1{
color: #484848;
     font-family: 'Fredoka One', sans-serif;
    text-align: left;
    font-size: 2rem;
}

.blog-section {
    padding: 20px;
    border: 1px solid #d5cfcf;
    border-radius: 8px;
}

.blog-section > h4 {
    font-family: 'Rubik', sans-serif;
    font-weight: 800;
    font-size: 1.4em;
    margin:0 0 5px 0;
}

.blog-section hr{
    display:inline-block;
    text-align:left;
    background-color:#EAC41D;
    width:50px;height:3px;border:none;
}


.news {
    height: 100%;
}

    .news a img {
        width: 100%;
        height:230px;
        display: block;
        border-radius: 10px 10px 0 0;
    }

.news-title {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    box-shadow: 0 5px 9px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 9px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 5px 9px rgba(0,0,0,.2);
}

    .news-title span {
        background-color: #fff;
        padding: 10px;
        position: absolute;
        top: -30px;
        width: 150px;
        text-align: center;
        left: calc(50% - 75px);
        border-radius: 10px 10px 0 0;
    }

    .news-title a {
        color: #000;
        font-size: 1.5rem;
    }

    .news-title p {
        margin-top: 15px;
    }

        .news-title p a {
            color: #666;
            font-size: 1rem;
            font-family: 'Roboto';
        }



@media screen and (max-width: 800px) {


    .horizontal-product {
        height: 130px;
        margin-bottom:1rem;
    }

    .dimension-image {
        width: 130px;
        background-size: cover;
    }

    .horizontal-product a h4 {
        left:20px;
        right:160px;
        bottom:20px;
        font-size: 1.5rem;
    }

    .bg-image {
        width: calc(100% - 150px);
        background-size: cover;
        background-position: center center;
        height: 100%;
        margin-right: 20px;
        position: relative;
    }
}