body{
    width: 100%;
    margin: 0;
	font-family: Roboto, sans-serif;
    color: #333;;
    border-top: 150px;
    background-color: #FFF;
}

header{
	position: relative;
	background-color: whitesmoke;
	width: 100%;
	height: auto;/*440*/
	margin: 0px 0 0px;
    padding: 0;
	float: left;
}

header img {
	width:  100%;
	height: 440px;

	object-fit: fill;/*contain*/
	object-position: center;
} 

main {
    width:90%;
    min-height: 2000px;
    padding:20px 0;
    margin:0 5% 0 5%;
    padding-top: 135px;

    height: auto;
    min-height: 1000px;
    background-color: none;
}

.titulo-1 {font-size: 75px; letter-spacing: 3px; font-weight: 400; text-align: left; color: #333}
.titulo-2{font-size: 25px; letter-spacing: 3px; font-weight: 400; text-align: center; color: #333;}
.titulo-3{font-size: 35px; letter-spacing: 3px; font-weight: 400; text-align: center; color: #FFF;}

.main-box-1{
    width: 100%;
    height: auto;
    float: left;
    background-color: none;

    margin-top: 35px;
}
.main-box-1-a{
    width: 69%;
    min-height: 560px;;
    height: 100%;
    float: left;
    color: #333;

    padding: 15px 25px;
    background-color: whitesmoke;
}
.main-box-1-b{
    width: 29%;/*400px*/
    height: 560px;
    float: left;
    background-color: whitesmoke;
    margin-left: 2%;
    text-align: center;
    object-position: center;;
}
.main-box-1-b img{
    height: 100%;
    max-height: 560px;
    object-fit: fill;
}
.bl{
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.main-box-2{
    width: 100%;
    height: auto;
    float: left;
    background-color: none;

    margin-top: 35px;
}
.destaques-box{
    width: 23%;/* 320px, 23.5% */
    min-height: 435px;
    height: auto;
    margin-top: 23px;
    margin-left: 1%; /* 18px */
    margin-right: 1%;
    background-color: #FFF;
    box-shadow: 0px 0px 15px 2px #c6c6c6db;
    border: 1px solid #c6c6c686;
    float: left;
}
.destaques-foto{
    width: 100%;/* 320px */
    height: 200px;
    background-color: whitesmoke;
    float: left;
}
.destaques-foto img{
    width: 100%;
    height: 200px;
    background-color: whitesmoke;
    float: left;
    object-fit: fill;
}
.destaques-info{
    width: 100%;/* 320px */
    height: auto;
    min-height: 185px;
    color: #333;
    background-color: none;
    float: left;
    padding: 10px 10px;
}
.destaques-tipo{
    width: 70%;
    font-size: 13px;
    background-color: none;
    float: left;
}
.destaques-id{
    width: 30%;
    text-align: right;
    font-size: 13px;
    background-color: none;
    float: left;

}
.destaques-bairro {
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #333;
    background-color: none;
    float: left;

}
.destaques-rua{
    width: 100%;
    text-align: center;
    font-size: 13px;
    background-color: none;
    float: left;

}
.destaques-principais{
    width: 25%;
    text-align: center;
    background-color: none;
    padding: 5px 0 2px;
    float: left;

}
.destaques-venda-locacao{
    width: 100%;
    text-align: center;
    font-size: 13px;
    background-color: none;
    float: left;

}
.destaques-preco{
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #333;
    background-color: none;
    float: left;

}

.destaques-detalhes{
    width: 100%;/* 320px */
    height: 50px;
    background-color: rgb(136, 10, 52);
    color: #FFF;
    float: left;
    text-align: center;
    padding-top: 12px;
    transition: 0.3s;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 3px;
}
.destaques-detalhes:hover{
    background-color: rgb(255,198,0);
    color: #333;
}

.main-box-3{
    width: 100%;
    height: auto;
    float: left;
    background-color: none;

    margin-top: 45px;
    text-align: center;
}
.main-box-3-a{
    width: 22.5%;
    height: auto;
    float: left;
    background-color: whitesmoke;
    border-radius: 5px;
    margin: 0 1%;
}
.main-box-3-a img{
    width: 100%;
    min-height: 50px;
}
.main-box-3 p, h2, h3,a{color: #333;}
.main-box-3 p{margin-bottom: 40px;}
.main-box-3 a:hover{color: #333;; text-decoration: none;}

/* ---------------------------------------------------------------- */

/** *************** NOTE VIEW *************** */
@media only screen and (min-width:769px /*568px*/) and (max-width:1024px) {
    .titulo-1 {font-size: 45px; letter-spacing: 3px; font-weight: 400; text-align: left; color: #333}
    .destaques-box{
        width: 24%;/* 320px */
        min-height: 385px;
        height: auto;
        margin-top: 23px;
        margin-left: 0.5%;
        margin-right: 0.5%;
        background-color: #FFF;
        box-shadow: 0px 0px 15px 2px #c6c6c6db;
        border: 1px solid #c6c6c686;
        float: left;
    }
    .destaques-foto{
        width: 100%;/* 320px */
        height: 150px;
        float: left;
    }
    .destaques-foto img{
        width: 100%;
        height: 150px;
        float: left;
        object-fit: fill;
    }
    .destaques-info{
        width: 100%;/* 320px */
        height: auto;
        min-height: 185px;
        color: #333;
        background-color: none;
        float: left;
        padding: 10px 10px;
    }
}
.destaques-tipo{
    width: 70%;
    font-size: 13px;
    background-color: none;
    float: left;
}
.destaques-id{
    width: 30%;
    text-align: right;
    font-size: 13px;
    background-color: none;
    float: left;

}
.destaques-bairro {
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #333;
    background-color: none;
    float: left;

}
.destaques-rua{
    width: 100%;
    text-align: center;
    font-size: 13px;
    background-color: none;
    float: left;

}
.destaques-principais{
    width: 25%;
    text-align: center;
    font-size: 14px;
    background-color: none;
    padding: 5px 0 2px;
    float: left;

}
.destaques-venda-locacao{
    width: 100%;
    text-align: center;
    font-size: 13px;
    background-color: none;
    float: left;

}
.destaques-preco{
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #333;
    background-color: none;
    float: left;

}

.destaques-detalhes{
    width: 100%;/* 320px */
    height: 50px;
    background-color: rgb(136, 10, 52);
    color: #FFF;
    float: left;
    text-align: center;
    padding-top: 12px;
    transition: 0.3s;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 3px;
}
.destaques-detalhes:hover{
    background-color: rgb(255,198,0);
    color: #333;
}

/* ---------------------------------------------------------------- */

/** *************** TABLET VIEW *************** */
@media only screen and (min-width:500px /*568px*/) and (max-width:770px) {
    main {
        width:90%;    
        height: auto;
        background-color: none;
    }

    .titulo-1 {font-size: 30px; letter-spacing: 3px; font-weight: 400; text-align: left; color: #333}

    .main-box-1{
        width: 100%;
        height: auto;
        float: left;
        background-color: none;
    
        margin-top: 35px;
    }
    .main-box-1-a{
        width: 100%; /* 59% */
        height: auto;
        float: left;
        color: #333;
        letter-spacing: 1px;
    
        padding: 15px 25px;
        background-color: whitesmoke;
    }
    .main-box-1-a p{font-size: 20px;}
    .main-box-1-b{
        width: 45%;
        height: 100%;
        float: left;
        margin-left: 27.5%;
        margin-top: 30px;
    }
    .main-box-1-b img{
        width: 100%;
        height: auto;
        max-height: 560px;
        object-fit: fill;
    }
    
    .main-box-2{
        width: 100%;
        height: auto;
        float: left;
        background-color: none;
    
        margin-top: 35px;
    }
    .faixa-caroussel h2 {
        font-size: 17px;
        letter-spacing: 2px;
        font-weight: 400;
        text-align: center;
        color: #FFF;
    }


    /* ******* DESTAQUES ******* */
    
    .destaques-box{
        width: 49%;/* 320px */
        min-height: 385px;
        height: auto;
        margin-top: 23px;
        margin-left: 0.5%;
        margin-right: 0.5%;
        background-color: #FFF;
        box-shadow: 0px 0px 15px 2px #c6c6c6db;
        border: 1px solid #c6c6c686;
        float: left;
    }
    .destaques-foto{
        width: 100%;/* 320px */
        height: 200px;
        float: left;
    }
    .destaques-foto img{
        width: 100%;
        height: 200px;
        float: left;
        object-fit: fill;
    }
    .destaques-info{
        width: 100%;/* 320px */
        height: auto;
        min-height: 185px;
        color: #333;
        background-color: none;
        float: left;
        padding: 10px 10px;
    }

    .destaques-tipo{
        width: 70%;
        font-size: 15px;
        background-color: none;
        float: left;
    }
    .destaques-id{
        width: 30%;
        text-align: right;
        font-size: 15px;
        background-color: none;
        float: left;

    }
    .destaques-bairro {
        width: 100%;
        text-align: center;
        font-size: 25px;
        color: #333;
        background-color: none;
        float: left;

    }
    .destaques-rua{
        width: 100%;
        text-align: center;
        font-size: 15px;
        background-color: none;
        float: left;

    }
    .destaques-principais{
        width: 25%;
        text-align: center;
        font-size: 15px;
        background-color: none;
        padding: 5px 0 2px;
        float: left;

    }
    .destaques-venda-locacao{
        width: 100%;
        text-align: center;
        font-size: 15px;
        background-color: none;
        float: left;

    }
    .destaques-preco{
        width: 100%;
        text-align: center;
        font-size: 25px;
        color: #333;
        background-color: none;
        float: left;

    }

    .destaques-detalhes{
        width: 100%;/* 320px */
        height: 50px;
        background-color: rgb(136, 10, 52);
        color: #FFF;
        float: left;
        text-align: center;
        padding-top: 12px;
        transition: 0.3s;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 3px;
    }
    .destaques-detalhes:hover{
        background-color: rgb(255,198,0);
        color: #333;
    }
    
    .main-box-3 p{font-size: 20px; margin-bottom: 40px;}
}



/* ---------------------------------------------------------------- */
/** ************* CELLPHONE VIEW ************* */
@media only screen and (min-width:300px) and (max-width:499px) {
    
    
    header img {
        width:  100%;
        height: 150px;
    
        object-fit: fill;/*contain*/
        object-position: center;
    } 

    .titulo-1 {font-size: 30px; letter-spacing: 3px; font-weight: 400; text-align: left; color: #333}

    .main-box-1{
        width: 100%;
        height: auto;
        float: left;
        background-color: none;
    
        margin-top: 35px;
    }
    .main-box-1-a{
        width: 100%; /* 59% */
        height: auto;
        float: left;
        color: #333;
        letter-spacing: 1px;
    
        padding: 15px 25px;
        background-color: whitesmoke;
    }
    .main-box-1-a p{font-size: 20px;}
    .main-box-1-b{
        width: 45%;
        height: 100%;
        float: left;
        margin-left: 27.5%;
        margin-top: 30px;
    }
    .main-box-1-b img{
        width: 100%;
        height: auto;
        max-height: 560px;
        object-fit: fill;
    }
    
    .main-box-2{
        width: 100%;
        height: auto;
        float: left;
        background-color: none;
    
        margin-top: 35px;
    }
    
    .faixa-caroussel h2 {
        font-size: 17px;
        letter-spacing: 2px;
        font-weight: 400;
        text-align: center;
        color: #FFF;
    }


    /* ******* DESTAQUES ******* */
    
    .destaques-box{
        width: 99%;/* 320px */
        min-height: 385px;
        height: auto;
        margin-top: 23px;
        margin-left: 0.5%;
        margin-right: 0.5%;
        background-color: #FFF;
        box-shadow: 0px 0px 15px 2px #c6c6c6db;
        border: 1px solid #c6c6c686;
        float: left;
    }
    .destaques-foto{
        width: 100%;/* 320px */
        height: 250px;
        float: left;
    }
    .destaques-foto img{
        width: 100%;
        height: 250px;
        float: left;
        object-fit: cover;
    }
    .destaques-info{
        width: 100%;/* 320px */
        height: auto;
        min-height: 185px;
        color: #333;
        background-color: none;
        float: left;
        padding: 10px 10px;
    }

    .destaques-tipo{
        width: 70%;
        font-size: 15px;
        background-color: none;
        float: left;
    }
    .destaques-id{
        width: 30%;
        text-align: right;
        font-size: 15px;
        background-color: none;
        float: left;

    }
    .destaques-bairro {
        width: 100%;
        text-align: center;
        font-size: 25px;
        color: #333;
        background-color: none;
        float: left;

    }
    .destaques-rua{
        width: 100%;
        text-align: center;
        font-size: 15px;
        background-color: none;
        float: left;

    }
    .destaques-principais{
        width: 25%;
        text-align: center;
        font-size: 15px;
        background-color: none;
        padding: 5px 0 2px;
        float: left;

    }
    .destaques-venda-locacao{
        width: 100%;
        text-align: center;
        font-size: 15px;
        background-color: none;
        float: left;

    }
    .destaques-preco{
        width: 100%;
        text-align: center;
        font-size: 25px;
        color: #333;
        background-color: none;
        float: left;

    }

    .destaques-detalhes{
        width: 100%;/* 320px */
        height: 50px;
        background-color: rgb(136, 10, 52);
        color: #FFF;
        float: left;
        text-align: center;
        padding-top: 12px;
        transition: 0.3s;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 3px;
    }
    .destaques-detalhes:hover{
        background-color: rgb(255,198,0);
        color: #333;
    }
    
    .main-box-3 p{font-size: 20px; margin-bottom: 40px;}
    .main-box-3-a{
        width: 45%;
        height: auto;
        float: left;
        background-color: whitesmoke;
        border-radius: 5px;
        margin: 0 2.5% 5%;
    }
    .main-box-3-a img{
        width: 100%;
        min-height: 50px;
    }
}