.news {
    position:relative;
    float:left;
    width:25%;
    height:270px;
}

.news .imagem {
    position:absolute;
    width:100%;
    height:100%;
    background-size:cover;
    background-repeat:repeat;
    background-position:center;
}

.news .detalhes {
    position:absolute;
    bottom:0px;
    background-color:rgba(14, 52, 83, 0.747);
}

.news .title {
    font-weight: bold;
    font-size:2vw;
}

.news .subtitle {
    font-size:0.6vw;
}

.news .category {
    position:absolute;
    right:0px;
    top:0px;
    font-size:9px;
    text-transform: uppercase;
    background-color:rgba(0,50,0,0.5)
}

.modal {
    display: none; 
    position: absolute; 
    width:100%; 
    min-height:1080px; 
}
.modal .background {
    position:fixed;
    width:100%;
    min-height: 100%;
    background-color: rgb(23, 58, 78);
}

.modal .background img {
    width:100%;
    filter:blur(20px) contrast(0.8) brightness(0.8);
    display:none;
}

.modal .foreground {
    position:absolute;
    width:100%;
}

.modal .foreground .post {
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

.modal .foreground .post .fimage {
    width:60%;
    margin-left:auto;
    margin-right:auto;
}

.modal .foreground .post .fimage img {
    width:100%;
}

.modal .foreground .post h1 {
    text-align: center;
}

.modal .foreground .post h2 {
    text-align: center;
}

.modal .foreground .post .text {
    text-align: justify;
}

.modal .foreground .post h3 {
    text-align: center;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
    transform: scale(0);
    }
    100% {
    transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
    transform: scale(1);
    }
    100% {
    transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
    transform: translate(0, 0);
    }
    100% {
    transform: translate(24px, 0);
    }
}

@media (max-width: 800px){
    .news {width:50%;}
    .news .title {font-size:3vw;}
    .news .subtitle {font-size:2vw;}
    .modal .foreground .post {font-size:2vw;}
};