.principal {
    padding: 1.9em 0
}

.principal .coluna {
    width: 30.02070393374741%;
    /* height: 503px; */
    float: left;
    margin-right: 4.86542443064182%;
    text-align: center;
    position: relative
}

.principal .coluna:last-child {
    margin-right: 0
}

.principal .coluna .img-container {
    /* height: 500px */
}

.principal .coluna .img-container img {
    display: block;
    /* height: 498px; */
    border: 1px solid #dcdbdb;
    margin: auto;
    width: 100%;
}

.blog h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2.8em;
    color: #000;
    font-family: avantgarde_md_btmedium
}

.blog ul li {
    width: 19.04761904761905%;
    min-height: 146px;
    float: left;
    margin-right: 1.13871635610766%;
    margin-bottom: 1.13871635610766%;
    position: relative
}


.blog ul li:first-child {
    width: 39.33747412008282%;
    min-height: 300px
}
@media screen and (max-width: 400px) {
    .blog ul li:first-child {
    min-height: 0px
    }   
}


.blog ul li:first-child a {
    font-size: 2.1em
}

.blog ul li:first-child a .legenda p {
    padding-top: 130px;
    margin-top: 2em
}

.blog ul li:last-child,
.blog ul li:nth-child(4) {
    margin: 0
}
.blog ul li .foto{
	position:relative;
	text-align: center;
}

.blog ul li .foto:after, .blog ul li .foto:before {
    position:absolute;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.blog ul li .foto:after {
    content:'\A';
    width:100%; height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.6);
}
.blog ul li .foto:before {
    content: attr(data-content);
    width:100%;
    color:#fff;
    z-index:1;
    bottom:0;
    padding:4px 10px;
    text-align:center;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    font-family: avantgarde_bk_btbook;
}


.blog ul li .foto img{
	width:100%;
    vertical-align:top;
}

.blog ul li a {
    color: #fff;
    font-size: 1.6em
}

.blog ul li a:hover {
    color: #ffda02
}

.responsive-container {
    position: relative;
    width: 100%
}

@media screen and (max-width:800px) {
    .principal {
        padding: 1em
    }
    .principal .coluna {
        width: 45.13457556935818%;
        margin-right: 4.86542443064182%
    }
    .principal .coluna:last-child {
        display: none
    }
    .principal .coluna:nth-child(2) {
        float: right;
        margin-right: 0
    }
    .blog ul li {
        display: none
    }
    .blog ul li:first-child {
        display: block;
        width: 72%
    }
    .blog ul li:nth-child(2),
    .blog ul li:nth-child(3) {
        display: block;
        width: 25%
    }
    .blog ul li:nth-child(2) a .legenda p,
    .blog ul li:nth-child(3) a .legenda p {
        display: none
    }
}

@media screen and (max-width:600px) {
    .principal .coluna {
        width: 100%;
        margin-right: 0;
        display: none;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover
    }
    .principal .coluna:first-child {
        display: block
    }
    .blog ul li {
        display: none!important
    }
    .blog ul li:first-child {
        display: block!important;
        width: 100%
    }
    .blog ul li a .legenda p {
        display: none
    }
}