.portfolio-principal-p1 { margin:10px 0 0 0; font-size:40px; line-height:41px; font-family:"Roboto", Arial, Helvetica, sans-serif; font-weight:700; text-align: center; color:#000000 }
.portfolio-principal-p2 { font-size:20px; line-height:20px; font-weight:300; font-family:"Roboto", Arial, Helvetica, sans-serif; color:#666666; margin:5px 0 20px 0; text-align: center }

.portfolio-principal { float:left; height:auto; margin:0 10px 0 10px; background-color: #e9e9e9; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; cursor: pointer; position: relative }

.portfolio-principal-img { width: 100%; float:left; position: relative; background-position: center center; background-repeat: no-repeat; background-size:cover; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
.portfolio-principal-img:hover { transition: 0.2s ease-in-out; box-shadow: inset 0 0 0 8px rgba(51,174,226,.5); }
.portfolio-principal-img-bg { width: 100%; float:left; text-align: left; background: linear-gradient(0deg, rgba(0,0,0,0.9), rgba(0,0,0,0)); position: relative; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px }
.portfolio-principal-texto { width: 100%; float:left; padding:0px; text-align: center; bottom: 0; position:absolute }
.portfolio-principal-dados { width: calc(100% - 40px); float:left; padding:0 20px 0 20px; text-align: left }
.portfolio-principal-titulo { font-size:18px; line-height:20px; font-family:"Roboto", Arial, Helvetica, sans-serif; font-weight:300; text-align: center; color:#FFFFFF;  }
	

@media only screen and (min-width: 1251px){

.portfolio-principal { width:calc((100% / 4) - 10px); margin:0 5px 10px 5px }
.portfolio-principal-img { height:270px }
.portfolio-principal-img-bg { height:270px }

}


@media only screen and (min-width: 961px) and (max-width: 1250px){

.portfolio-principal { width:calc((100% / 4) - 10px); margin:0 5px 10px 5px }
.portfolio-principal-img { height:270px }
.portfolio-principal-img-bg { height:270px }

}


@media only screen and (min-width: 769px) and (max-width: 960px){

.portfolio-principal { width:calc((100% / 4) - 10px); margin:0 5px 10px 5px }
.portfolio-principal-img { height:250px }
.portfolio-principal-img-bg { height:250px }

}


@media only screen and (min-width: 621px) and (max-width: 768px){

.portfolio-principal { width:calc((100% / 3) - 10px); margin:0 5px 10px 5px }
.portfolio-principal-img { height:250px }
.portfolio-principal-img-bg { height:250px }

}


@media only screen and (min-width: 481px) and (max-width: 620px){

.portfolio-principal { width:calc((100% / 3) - 10px); margin:0 5px 10px 5px }
.portfolio-principal-img { height:200px }
.portfolio-principal-img-bg { height:200px }
.portfolio-principal-titulo { font-size:16px; line-height:18px; }

}


@media only screen and (min-width: 0px) and (max-width: 480px){

.portfolio-principal { width:calc((100% / 2) - 10px); margin:0 5px 10px 5px }
.portfolio-principal-img { height:200px }
.portfolio-principal-img-bg { height:200px }
.portfolio-principal-titulo { font-size:16px; line-height:18px; }
	
}