/* CSS HEX
    --gray-web: #818083;
    --dark-cornflower-blue: #293a6e;
    --cyan-process: #00bcf5;
    --cultured: #f8f8f8;
    --medium-aquamarine: #3ae4ae;

     CSS HSL
    --gray-web: hsla(260, 1%, 51%, 1);
    --dark-cornflower-blue: hsla(225, 46%, 30%, 1);
    --cyan-process: hsla(194, 100%, 48%, 1);
    --cultured: hsla(0, 0%, 97%, 1);
    --medium-aquamarine: hsla(161, 76%, 56%, 1);

     SCSS HEX
    $gray-web: #818083ff;
    $dark-cornflower-blue: #293a6eff;
    $cyan-process: #00bcf5ff;
    $cultured: #f8f8f8;
    $medium-aquamarine: #3ae4aeff;


     SCSS RGB
    $gray-web: rgba(129, 128, 131, 1);
    $dark-cornflower-blue: rgba(41, 58, 110, 1);
    $cyan-process: rgba(0, 188, 245, 1);
    $cultured: rgba(248, 248, 248, 1);
    $medium-aquamarine: rgba(58, 228, 174, 1);
    */

    .news {
        min-height: 90vh;
        padding-top: 9rem;
        background-image: url(../../img/background/background_news.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .news .news_body_row {
        margin-bottom:5rem;

    }
    .news .titolo {
        text-align: center;
        color: #293a6e;
        text-shadow: -2px 2px 0px #00bcf5;
    }
    .news .main_news_row {
        justify-content: space-around;
        min-height: 18rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
     }
    .news .news_container {
        position: relative;
        padding: 0;
        min-height: inherit;

    }
    .news .news_container .bg_title {
        height: 5rem;
        width: 90%;
        background-color: #293a6e;
        border-radius: 10px;
        margin: 0 auto;
        text-align: center;
        bottom: 0;
        transform: translateY(150px);
        position:relative;
        opacity: 0;
        transition: 0.7s ease 0s;
    }
    .news .news_container .bg_title h5 {
        text-transform: uppercase;
        color: #00bcf5;
        margin: auto;
        position: absolute;
        top:40%;
        left: 50%;
        transform: translate(-50%, 40%);
        min-width: fit-content;
        transition: 0.7s ease 0s;
        transition-delay: 0.2s;
        opacity: 0;
    }
    .news .news_container .imgBox {
        position: absolute;
        z-index: 2;
        height: inherit;
        height: -webkit-fill-available;
        width: 100%;
        max-height: 15rem;
        overflow-y: hidden;
        border-radius: 10px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        filter: grayscale(1);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }
    .news .news_container .imgBox:before{
    	content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0px 0px 0px 250px rgba(0,0,0,0.45) inset;
        transition: 0.7s ease 0s;
    }
    .news .news_container h3{
        text-align: center;
        z-index: 3;
        text-transform: uppercase;
        color: #00bcf5;
        margin: auto;
        position: absolute;
        top:45%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: fit-content;
        transition: 0.7s ease 0s;
    }

    .news_container:hover .imgBox:before{
    	box-shadow: none;
    }
    .news_container:hover .imgBox{
        filter: grayscale(0);
    }
    .news .news_container:hover h3{
        opacity: 0;
        top:70%;
    }
    .news .news_container:hover .bg_title {
        transform: translateY(200px);
        opacity: 1;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }
    .news .news_container:hover .bg_title h5 {
        top:50%;
        opacity: 1;
    }
    .news .btn_extra_news_row {
        text-align: center;
        margin-top: 4rem;
    }
    .news  button {
        cursor: pointer;
        background-color: transparent;
        border: solid #00bcf5 1px;
        border-radius: 5px;
        color: #f8f8f8;
        font-size: 12px;
        transition: 0.5s ease;
    }
    .news  button:hover {
        transform: scale(1.1);
    }

    .news  .btn-news{

    }
    .news .extra_news_row {
        justify-content: space-around;
        min-height: 18rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
        transition: 0.3s ease;
     }