/** PORTFOLIO PAGES **/

.grayBar {
  display: flex;
  width: 100%;
  height: 153px;
  background-color: #404042;
  padding: 38px 47px 30px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.icoPort-Graf {
  flex-basis: 5%;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FiDesignGrafico.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: 1%;
}

.BoxTitles-Port {
  flex-basis: 90%;
  padding-top: 1%;
}

.subT-Port {
  color: white;
}

.T-Port {
  color: #ffd402;
}

.heroPort-Graf {
  width: 100%;
  height: 306px;
  border-bottom: solid 22px #ffd402;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Ffusao-heroPortGraf-ew.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.grid-Container {
  width: 100%;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 500px 500px 393px;
  margin: 2.5% 0;
}

.grid-Cont-2 {
  grid-template-rows: 500px 393px;
}

.top-img-portGraf {
  grid-column: 1 /5;
  grid-row: 1 / 2;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Ffeatured-Redesign-Juscon.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.divider-cases {
  margin: 5% 0;
  border-color: #f7f7f7;
}

.Box-Txt-img {
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

.Bx-txt-img-2 {
  grid-row: 1 / 2;
}

.txtCase {
  flex-basis: 50%;
  color: #ffffff;
  background-color: #404042;
  padding: 3%;
  display: flex;
  flex-wrap: wrap;
}

.titCase {
  color: #fed400;
  flex-basis: 100%;
  align-self: flex-end;
  line-height: 120%;
}

.txtBlock-case {
  flex-basis: 100%;
}

.img-Case-txtSide {
  flex-basis: 50%;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Fmain-case-juscon.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.case-sqr-img {
  background-color: #eaeaea;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.caseJus1 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLgVertSolo.jpg");
}

.caseJus2 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2F28+anos+JUS-3L%402x-100.jpg");
}

.caseJus3 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-Juscon-2018.jpg");
}

.caseJus4 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FSelo30-Redesign-Juscon.jpg");
}

.abertura-BeBright {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FbeBright-final-abertura%402x-100.jpg");
}

.caseBbright1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FBeBright-final%402x-100.jpg");
}

.caseBbright2 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FEstudo-BeBright1%402x-100.jpg");
}

.caseBbright3 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FEstudo-BeBright2%402x-100.jpg");
}

.caseBbright4 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FEstudo-BeBright3%402x-100.jpg");
}

.abertura-DB {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-BD-abertura%402x-100.jpg");
}

.caseDB1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-BD-sqr1%402x-100.jpg");
}

.caseDB2 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-BD-sqr2%402x-100.jpg");
}

.caseDB3 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-BD-sqr3%402x-100.jpg");
}

.caseDB4 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-BD-sqr4%402x-100.jpg");
}

.topCase-GA {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Ftop-Case-Garcia.jpg");
}

.abertura-Case-GA {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FAbertura-Case-Garcia.jpg");
}

.caseGA1 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FGrid-LG-Garcia.jpg");
}

.caseGA2 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FNegativo-LG-Garcia1.jpg");
}

.caseGA3 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FPositivo-LG-Garcia.jpg");
}

.caseGA4 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FNegativo-LG-Garcia2.jpg");
}

.topCase-MF {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Ftop-Case-Maria-da-Fe.jpg");
}

.abertura-MF {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FAbertura-Case-Maria-da-Fe.jpg");
}

.caseMF1 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FPS-Case-Maria-da-Fe-Antigo-100.jpg");
}

.caseMF2 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-Case-Maria-da-Fe-Principal.jpg");
}

.caseMF3 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-Case-Maria-da-Fe-Mono.jpg");
}

.caseMF4 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLG-Case-Maria-da-Fe-Negativo.jpg");
}
/**  BREAKPOINTS **/

@media screen and (max-width: 1600px) {
  .grid-Container {
    grid-template-rows: 500px 500px 333px;
  }
  .grid-Cont-2 {
    grid-template-rows: 500px 333px;
  }
}

@media screen and (max-width: 1536px) {
  .icoPort-Graf {
    height: 80px;
    margin-top: 1%;
  }
  .BoxTitles-Graf {
    flex-basis: 70%;
    margin-left: 1%;
  }
  .abertura-DB {
    background-size: contain;
  }
  .abertura-BeBright {
    background-size: contain;
  }
}

@media screen and (max-width: 1440px) {
  .icoPort-Graf {
    flex-basis: 6%;
    margin-top: 0;
  }
  .grid-Container {
    grid-template-rows: 500px 500px 298px;
  }
  .grid-Cont-2 {
    grid-template-rows: 500px 298px;
  }
  .txtCase {
    line-height: 1.3em;
  }
}

@media screen and (max-width: 1366px) {
  .icoPort-Graf {
    height: 100px;
    margin-top: -1.2%;
  }
}

@media screen and (max-width: 1280px) {
  .icoPort-Graf {
    flex-basis: 7%;
    margin-top: -1.5%;
  }
}

@media screen and (max-width: 1200px) {
  .icoPort-Graf {
    flex-basis: 7%;
  }
  .grid-Container {
    grid-template-rows: 500px 500px 245px;
  }
  .grid-Cont-2 {
    grid-template-rows: 500px 245px;
  }
  .txtBlock-case {
    font-size: 0.9em;
  }
}

@media screen and (max-width: 1136px) {
  .icoPort-Graf {
    flex-basis: 8%;
  }

  .grid-Container {
    grid-template-rows: 400px 500px 232px;
  }
  .grid-Cont-2 {
    grid-template-rows: 500px 232px;
  }
}

@media screen and (max-width: 1080px) {
  .grid-Container {
    grid-template-rows: 300px 500px 232px;
  }
  .grid-Cont-2 {
    grid-template-rows: 500px 232px;
  }
}

@media screen and (max-width: 1024px) {
  .icoPort-Graf {
    flex-basis: 9%;
  }
  .grid-Container {
    grid-template-rows: 300px 500px 207px;
  }
  .grid-Cont-2 {
    grid-template-rows: 500px 207px;
  }
}

@media screen and (max-width: 980px) {
  .grid-Container {
    grid-template-rows: 300px 780px 198px;
  }
  .grid-Cont-2 {
    grid-template-rows: 650px 198px;
  }
  .Box-Txt-img {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .txtCase {
    grid-column: 1/3;
    grid-row: 1/2;
  }
  .img-Case-txtSide {
    grid-column: 1/3;
    grid-row: 2/3;
  }
}

@media screen and (max-width: 960px) {
  .icoPort-Graf {
    margin-top: -2.1%;
  }
}

@media screen and (max-width: 900px) {
  .icoPort-Graf {
    flex-basis: 9.5%;
  }
}

@media screen and (max-width: 800px) {
  .grayBar {
    padding: 5% 5%;
    height: 135px;
  }
  .icoPort-Graf {
    flex-basis: 11%;
    margin-right: 2%;
  }
  .BoxTitles-Port {
    flex-basis: 80%;
  }
  .grid-Container {
    grid-template-rows: 300px 780px 157px;
  }
  .grid-Cont-2 {
    grid-template-rows: 650px 157px;
  }
}

@media screen and (max-width: 736px) {
  .cwPort {
    width: 87%;
  }
  .grayBar {
    padding: 6% 5%;
  }
  .BoxTitles-Port {
    padding: 0;
  }
  .T-Port {
    font-size: 20pt;
  }
  .heroPort-Graf {
    height: 200px;
  }
  .Box-Txt-img {
    grid-template-rows: 1fr 0.8fr;
  }
  .grid-Container {
    grid-template-rows: 250px 750px 143px;
  }
  .grid-Cont-2 {
    grid-template-rows: 630px 143px;
  }
}

@media screen and (max-width: 690px) {
  .icoPort-Graf {
    flex-basis: 12.5%;
  }
  .BoxTitles-Graf {
    margin-top: 1.2% !important;
  }
  .T-Port-Graf {
    font-size: 2.7em !important;
  }
}

@media screen and (max-width: 667px) {
  .grid-Container {
    grid-template-rows: 250px 750px 254px 254px;
  }
  .grid-Cont-2 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 630px 254px 254px;
  }
  .top-img-portGraf {
    grid-column: 1/5;
  }
  .Bx-txt-img-2 {
    grid-column: 1/5;
  }
  .img-Case-txtSide {
    grid-column: 1/5;
  }
  .abertura-DB {
    background-size: 90%;
    background-position-y: 35%;
  }
  #caseDB1 {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  #caseDB2 {
    grid-column: 3/5;
    grid-row: 2/3;
  }
  #caseDB3 {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #caseDB4 {
    grid-column: 3/5;
    grid-row: 3/4;
  }
  #caseMF1 {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #caseMF2 {
    grid-column: 3/5;
    grid-row: 3/4;
  }
  #caseMF3 {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  #caseMF4 {
    grid-column: 3/5;
    grid-row: 4/5;
  }
  #caseGA1 {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #caseGA2 {
    grid-column: 3/5;
    grid-row: 3/4;
  }
  #caseGA4 {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  #caseGA3 {
    grid-column: 3/5;
    grid-row: 4/5;
  }
  .abertura-BeBright {
    background-size: 90%;
    background-position-y: 25%;
  }
  #caseBbright1 {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  #caseBbright2 {
    grid-column: 3/5;
    grid-row: 2/3;
  }
  #caseBbright3 {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #caseBbright4 {
    grid-column: 3/5;
    grid-row: 3/4;
  }
  #caseJus1 {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #caseJus2 {
    grid-column: 3/5;
    grid-row: 3/4;
  }
  #caseJus3 {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  #caseJus4 {
    grid-column: 3/5;
    grid-row: 4/5;
  }
}

@media screen and (max-width: 640px) {
  .icoPort-Graf {
    flex-basis: 12%;
    margin-right: 2%;
  }
  .BoxTitles-Port {
    padding-top: 1%;
  }
  .Box-Txt-img {
    grid-template-rows: repeat(2, 1fr);
  }
  .abertura-DB {
    background-size: 80%;
    background-position: center center;
  }
  .abertura-MF {
    background-size: cover;
    background-position: center center;
  }
  .abertura-BeBright {
    background-size: cover;
    background-position: center center;
  }
}

@media screen and (max-width: 600px) {
  .icoPort-Graf {
    flex-basis: 13%;
  }

  .BoxTitles-Graf {
    margin-top: 3% !important;
  }

  .T-Port-Graf {
    font-size: 2.3em !important;
  }
}

@media screen and (max-width: 568px) {
  .grid-Container {
    grid-template-rows: 250px 750px 225px 225px;
  }
  .grid-Cont-2 {
    grid-template-rows: 630px 225px 225px;
  }
  .cwPort {
    width: 83%;
  }
  .grayBar {
    padding: 3% 5%;
  }
  .icoPort-Graf {
    flex-basis: 14%;
    margin-right: 3%;
  }
  .BoxTitles-Port {
    padding-top: 5.5%;
    flex-basis: 80%;
  }
  .BoxTitles-Graf {
    padding-top: 0 !important;
  }
}

@media screen and (max-width: 504px) {
  .T-Port-Graf {
    font-size: 2em !important;
  }
  .grid-Container {
    grid-template-rows: 250px 750px 197px 197px;
  }
  .grid-Cont-2 {
    grid-template-rows: 630px 197px 197px;
  }
  .Bx-txt-img-2 {
    grid-template-rows: 70% 30%;
  }
}

@media screen and (max-width: 480px) {
  .grayBar {
    height: max-content !important;
    padding: 4%;
  }
  .icoPort-Graf {
    flex-basis: 15%;
    height: 85px;
    margin-right: 2%;
  }
  .BoxTitles-Port {
    flex-basis: 65%;
    padding-top: 7%;
    line-height: 20pt;
  }

  .BoxTitles-Graf {
    margin-top: 0 !important;
  }

  .txtCase {
    overflow-y: scroll;
    padding: 3%;
  }
  .grid-Container {
    grid-template-rows: 250px 750px 187px 187px;
  }
  .grid-Cont-2 {
    grid-template-rows: 630px 187px 187px;
  }
}

@media screen and (max-width: 414px) {
  .cwPort {
    width: 78%;
  }
  .icoPort-Graf {
    flex-basis: 20%;
    margin-right: 4%;
  }
  .BoxTitles-Port {
    padding-top: 10%;
  }
  .subT-Port {
    font-size: 12pt;
  }
  .T-Port {
    font-size: 18pt;
  }
  .grid-Container {
    grid-template-rows: 250px 750px 150px 150px;
  }
  .grid-Cont-2 {
    grid-template-rows: 630px 150px 150px;
  }
  .abertura-DB {
    background-size: 100%;
  }
  .abertura-Case-GA {
    background-position: center center;
  }
  .abertura-Jus {
    background-position: center top;
  }
}

@media screen and (max-width: 375px) {
  .grayBar {
    padding-left: 5%;
  }
  .icoPort-Graf {
    background-position: left center;
    flex-basis: 100%;
    height: 45px;
  }
  .T-Port-Graf {
    font-size: 1.8em !important;
  }
  .grid-Container {
    grid-template-rows: 250px 750px 134px 134px;
  }
  .grid-Cont-2 {
    grid-template-rows: 630px 134px 134px;
  }
  .txtCase {
    padding: 5%;
  }
}

@media screen and (max-width: 360px) {
  .grayBar {
    padding-left: 7%;
  }
  .BoxTitles-Port {
    flex-basis: 70%;
    padding-top: 14%;
    line-height: 16pt;
  }
  .subT-Port {
    font-size: 10pt;
  }
  .T-Port {
    font-size: 14pt;
  }
}

@media screen and (max-width: 320px) {
  .cwPort {
    width: 75%;
  }
  .icoPort-Graf {
    flex-basis: 30%;
    height: 3.3em;
    background-position-x: left;
  }
  .BoxTitles-Port {
    flex-basis: 100%;
    padding-top: 1%;
  }
  .subT-Port {
    font-size: 12pt;
  }
  .T-Port-Graf {
    font-size: 1.6em !important;
  }
  .heroPort-Graf {
    background-position: 89% top;
  }
  .grid-Container {
    grid-template-rows: 250px 750px 109px 109px;
  }
  .grid-Cont-2 {
    grid-template-rows: 630px 109px 109px;
  }
  .abertura-DB {
    background-size: 120%;
  }
  .abertura-Case-GA {
    background-position: center center;
  }
  .abertura-BeBright {
    background-size: 98%;
  }
}