﻿.needles-block {
    /*background-color: #e5e5eb;*/
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-height: 880px; /*2 rows*/
    overflow: hidden;
}

.needles-block div[aria-prior="8"] {
    box-shadow: 0px 0px 10px rgba(80, 200, 250, 0.9);
}

.needles-block div[aria-prior="9"]
{
    box-shadow: 0px 0px 10px rgba(240, 160, 70, 0.8);
}

.needles-block div[aria-prior="10"]
{
    box-shadow: 0px 0px 10px rgba(200, 0, 0, 0.8);
}


.needle-item .img > div {
background:#ddd;
}

    .needle-item {
        position: relative;
        margin: 15px;
        width: 300px;
        height: 415px;
        float: left;
        border-radius: 5px;
        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.22);
        background: #fff;
    }

    .needle-item .img {
        width: 100%;
        height: 180px;
        overflow: hidden;
    }
        
    .needle-item .img img
    {
        border-radius: 5px;
        width: 100%;
    }

    .needle-label {
        position: absolute;
        bottom: 235px;
        background: #E63739;
        color: #fff;
        padding-right: 8px;
        padding-left: 8px;
        padding-top: 3px;
        font-size: 12px;
        font-weight: bold;
    }

    .needle-label .sms
    {
        font-size: 13px;
    }
    
    .needle-label .fbig
    {
        font-size: 16px;
    }
        
    .needle-item .text {
        padding: 12px;
        font-size: 19px;
        overflow: hidden;
    }

    .needle-item .subtext {
        margin-top: 10px;
        font-size: 14px;
        overflow: hidden;
        color: #888;
    }  

    .needle-item h3 {
        font-size: 18px;
        color: #2d2d29;
        height: 110px;
        overflow: hidden;
    }

    .needle-item h3 > a {
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        text-decoration: none;
    }

    .needle-counter {
        margin-top: 6px;
        margin-bottom: 6px;
        height: 6px;
        width: 100%;
        background: #EFEFEF;
        border-radius: 3px;
    }

    .needle-counter > div {
        height: 6px;
        /*background: #CFD8DC;*/
        background: #c9504c;
        border-radius: 3px;
    }

    .needle-item .date {
        font-size: 14px;
        color: #747474;
    }

    .needle-summ {
        font-size: 12px;
        color: #888;
        display: inline-block;
        width: 47%;
    }
    
    .needle-summ a
    {
        color: #888;
    }

    .needle-tsumm {
        font-size: 12px;
        color: #888;
        text-align: right;
        display: inline-block;
        width: 49%;
    }
    
    .needle-summ-bold
    {
        font-size: 14px;
        color: #000;
        font-weight: bold;
    }
    
    .needle-sms
    {
        margin-top: 30px;
        color: #444;
        margin-bottom: 20px;
    }
  
    .needle-item .needle-button {
        display: block;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        height: 30px;
        background: #CFD8DC;
        color: #000;
        font-size: 15px;
        text-align: center;
        transition: 0.3s;
        border-radius: 4px;
        padding-top: 4px;
        text-decoration: none;
    }
    
    .needle-item .needle-button:hover {
        background: #e73744;
        color: #fff;
    }
    
@media (min-width: 1200px) /*xl*/
{
    .needles-block
    {
        width: 1140px;
    } 
    .needle-item {
        width: 255px;
    }

    .needle-summ-bold
    {
        font-size: 13px;
        color: #000;
        font-weight: bold;
    }
}

@media (min-width: 992px) and (max-width: 1199px) /*lg*/
{
    .needles-block
    {
        width: 960px;
    }
    .needle-item {
        width: 290px;
    }
}

@media (min-width: 768px) and (max-width: 991px) /*md*/ {

    .needles-block
    {
        width: 720px;
    }
    .needle-item {
        width: 330px;
    }    
}

@media (max-width: 767px) /*sm*/ {
    
    .needles-block
    {
        width: 100%;
    }
    
    .needle-item {
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
        max-width: 330px;
        width: 90%;
    }
}


