@media screen and (min-width: 720px) {
    ul.servicos li.last{ margin-right: 0; }
    ul.servicos li{
        width: 23.5%;
        margin: 0 2% 0 0;
    }
    ul.servicos li:nth-child(4n){ margin-right: 0; }
    ul.servicos .legenda{ margin-bottom: 25%; } 
}

@media screen and (max-width: 720px) and (min-width: 517px){
    ul.servicos li{
        width: 31.2%;
        margin: 0 3% 0 0;
    }
    ul.servicos li:nth-child(3n){ margin-right: 0; }
    ul.servicos .legenda{ margin-bottom: 22%; } 
    .container-servicos .barra{ display:none; }
}

@media screen and (max-width: 517px) and (min-width: 384px){
    ul.servicos li{
        width: 31.2%;
        margin: 0 3% 0 0;
    }
    ul.servicos li:nth-child(3n){ margin-right: 0; }
    ul.servicos .legenda{ margin-bottom: 27%; } 
    .container-servicos .barra{ display:none; }
}

@media screen and (max-width: 384px) {
    ul.servicos li{
        width: 47.5%;
        margin: 0 5% 0 0;
    }
     ul.servicos li:nth-child(2n){ margin-right: 0; }
    ul.servicos .legenda{ margin-bottom: 25%; } 
    .container-servicos .barra{ display:none; }
}

.container-servicos h1{
    margin-bottom: 2%;
    margin-top: 2%;
}

.container-servicos{
    background: url('../../images/layout/bg_quadriculado.jpg') repeat;
    position: relative;
    overflow: hidden;
}

.container-servicos .container{
    width: 97%;
}

.container-servicos .col.last img{
    position: relative;
    margin: 0 2% 2% 0;
    float: left;
    position: relative;
    width: 41%;
}

.container-servicos .col.last .texto{
    padding-top: 2%;
}

.container-servicos .barra{          
    width: 100%;
    height: 5%;
    max-width: 1040px;
    margin: 0 auto;
    background: #FFFFFF;
}

ul.servicos li a{
    text-decoration: none;
    display: inline-block;
}

ul.servicos h3{
    position: absolute;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -o-transition: color 0.5s;
    -ms-transition: color 0.5s;
    transition: color 0.5s;
}

ul.servicos li a:hover h3{
    color: rgb(235,2,235);
}

ul.servicos li{
    overflow: hidden;
    position: relative;
    float: left;    
    cursor: pointer;
}

.container-servicos .container-imagem{
    background: #A1DB29;
    width: 100%;   
    margin: 0px 0px 5px 0px;
}

.container-servicos .container-imagem img{
    width: 100%;
}