/** PORTFOLIO PAGES **/
.icoPort-Editor {
  flex-basis: 5%;
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FiDesignEditorial.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-Edit {
  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%2FHero-Editorial.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.grid-SQF {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 200px);
  margin: 2.5% 0;
}

.txtCase-SQF {
  color: #ffffff;
  background-color: #404042;
  padding: 5%;
  display: flex;
  flex-wrap: wrap;
  grid-column: 6/9;
  grid-row: 1/4;
}

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

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

.sqr-img-Edit {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

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

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

.grid-YOU {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 200px);
  gap: 20px;
  margin: 2.5% 0;
  background-color: #fafafa;
}

.txtCase-YOU {
  padding: 16% 5%;
  grid-column: 5/9;
  grid-row: 1/3;
}

.title-case-You {
  color: #404042;
}

.case-YOU-capa {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FCapa-You-Cafe.png");
  grid-column: 1/5;
  grid-row: 1/6;
}
.case-YOU-1 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FYou-Abertura-FPG.png");
  grid-column: 5/9;
  grid-row: 3/6;
}

.case-YOU-2 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FYou-Abertura-Perfume.png");
  grid-column: 1/5;
  grid-row: 6/9;
}

.case-YOU-3 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FYou-MioloPerfume.png");
  grid-column: 5/9;
  grid-row: 6/9;
}

.grid-Payback {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 180px);
  gap: 20px;
  margin: 2.5% 0;
  background-color: #fafafa;
}

.txtCase-Payback {
  padding: 16% 5%;
  grid-column: 6/9;
  grid-row: 5/9;
}

.title-case-Payback {
  color: #404042;
}

.case-Payback-capa {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FCapa-PayBack2.png");
  grid-column: 1/4;
  grid-row: 1/5;
}
.case-Payback-1 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FAbertura-Criatividade.png");
  grid-column: 4/9;
  grid-row: 1/5;
}

.case-Payback-2 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FKungFu.png");
  grid-column: 1/6;
  grid-row: 5/9;
}

.grid-LigthSaude {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 220px);
  gap: 20px;
  margin: 2.5% 0;
  background-color: #fafafa;
}

.txtCase-LigthSaude {
  padding: 3%;
  grid-column: 1/9;
  grid-row: 4/5;
}

.title-case-LigthSaude {
  color: #404042;
}

.case-LigthSaude-Top {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FPS-Light-Saude.jpg");
  background-size: cover;
  grid-column: 1/9;
  grid-row: 1/4;
}
.case-LigthSaude-1 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLightSaude-Qualidade.png");
  grid-column: 1/5;
  grid-row: 5/7;
}
.case-LigthSaude-2 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLightSaude-Kits.png");
  grid-column: 5/9;
  grid-row: 5/7;
}
.case-LigthSaude-3 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLightSaude-TabNutri.png");
  grid-column: 1/5;
  grid-row: 7/9;
}
.case-LigthSaude-4 {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FLightSaude-EquiDetox.png");
  grid-column: 5/9;
  grid-row: 7/9;
}

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

/**  BREAKPOINTS **/

@media screen and (max-width: 1800px) {
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 200px);
  }
  .grid-Payback {
    grid-template-rows: repeat(8, 160px);
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 160px);
  }
  .case-YOU-capa {
    background-size: contain;
  }
}
@media screen and (max-width: 1600px) {
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 180px);
  }
  .grid-Payback {
    grid-template-rows: repeat(8, 140px);
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 140px);
  }
}

@media screen and (max-width: 1536px) {
  .icoPort-Editor {
    flex-basis: 6%;
  }
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 170px);
  }
  .grid-Payback {
    grid-template-rows: repeat(8, 130px);
  }
}

@media screen and (max-width: 1440px) {
  .icoPort-Editor {
    margin-top: -1.5%;
  }
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 160px);
  }
  .grid-Payback {
    grid-template-rows: repeat(8, 120px);
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 130px);
  }
  .grid-SQF {
    grid-template-rows: repeat(3, 200px) repeat(5, 150px);
  }
}

@media screen and (max-width: 1366px) {
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 150px);
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 120px);
  }
}

@media screen and (max-width: 1280px) {
  .icoPort-Editor {
    flex-basis: 7.5%;
    margin: -2% 1.5% 0 0;
  }
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 140px);
  }
  .grid-Payback {
    grid-template-rows: repeat(8, 110px);
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 115px);
  }
}
@media screen and (max-width: 1200px) {
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 130px);
  }
  .txtCase-LigthSaude {
    padding: 2% 3%;
  }
  .grid-Payback {
    grid-template-rows: repeat(8, 100px);
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 100px);
  }
  .grid-SQF {
    grid-template-rows: repeat(3, 200px) repeat(5, 120px);
  }
}

@media screen and (max-width: 1136px) {
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 125px);
  }
  .grid-Payback {
    grid-template-rows: repeat(8, 90px);
  }
}

@media screen and (max-width: 1080px) {
  .icoPort-Editor {
    flex-basis: 12%;
    height: 75px;
    margin: 0 0 2% 0;
    background-position: left center;
  }
  .BXT-Port-Editor {
    flex-basis: 80% !important;
  }
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 120px);
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 90px);
  }
  .grid-SQF {
    grid-template-rows: repeat(3, 180px) repeat(5, 120px);
  }
}

@media screen and (max-width: 1024px) {
  .grid-LigthSaude {
    grid-template-rows: repeat(8, 110px);
  }
  .txtCase-LigthSaude {
    padding: 1% 2%;
  }
  .grid-Payback {
    grid-template-rows: repeat(8, 80px);
  }
  .grid-SQF {
    grid-template-rows: repeat(3, 180px) repeat(5, 100px);
  }
}

@media screen and (max-width: 980px) {
  .icoPort-Editor {
    height: 70px;
    margin: 0 0 5% 0;
  }
  .BXT-Port-Editor {
    flex-basis: 75% !important;
  }

  .grid-LigthSaude {
    grid-template-rows: repeat(8, 100px);
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 80px);
  }
}

@media screen and (max-width: 960px) {
  .grid-Payback {
    grid-template-rows: repeat(8, 70px);
  }
  .txtCase-Payback {
    padding: 8% 5%;
  }
  .txtCase-YOU {
    padding: 4% 5%;
  }
  .grid-SQF {
    grid-template-rows: repeat(3, 160px) repeat(5, 90px);
  }
}
@media screen and (max-width: 900px) {
  .txtCase-LigthSaude {
    padding: 2%;
  }
  .grid-LigthSaude {
    grid-template-rows: repeat(4, 120px) repeat(16, 90px);
  }
  .case-LigthSaude-1 {
    grid-column: 1/9;
    grid-row: 5/9;
  }
  .case-LigthSaude-2 {
    grid-column: 1/9;
    grid-row: 9/13;
  }
  .case-LigthSaude-3 {
    grid-column: 1/9;
    grid-row: 13/17;
  }
  .case-LigthSaude-4 {
    grid-column: 1/9;
    grid-row: 17/21;
  }
  .txtCase-Payback {
    padding: 0% 5%;
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 70px);
  }
}
@media screen and (max-width: 800px) {
  .icoPort-Editor {
    flex-basis: 12%;
    margin-right: 3%;
  }
  .grid-LigthSaude {
    grid-template-rows: repeat(3, 100px) repeat(1, 130px) repeat(16, 80px);
  }
  .txtCase-LigthSaude {
    padding: 0.5% 2%;
  }
  .grid-Payback {
    grid-template-rows: repeat(4, 60px) repeat(2, 100px) repeat(4, 100px);
  }
  .case-Payback-capa {
    background-size: contain;
  }
  .case-Payback-1 {
    background-size: contain;
  }
  .txtCase-Payback {
    padding: 3%;
    grid-column: 1/9;
    grid-row: 5/7;
  }
  .case-Payback-2 {
    grid-column: 1/9;
    grid-row: 7/11;
  }
  .case-YOU-1 {
    display: none;
  }
  .grid-YOU {
    grid-template-rows: repeat(8, 60px);
  }
  .grid-SQF {
    grid-template-rows: repeat(3, 150px) repeat(2, 120px) repeat(5, 80px);
  }
  .caseSQF {
    grid-column: 1/9;
  }
  .txtCase-SQF {
    padding: 3%;
    grid-column: 1/9;
    grid-row: 4/6;
  }
  .caseVS-Edit {
    grid-row: 6/11;
  }
}

@media screen and (max-width: 736px) {
  .grid-LigthSaude {
    grid-template-rows: repeat(3, 100px) repeat(1, 130px) repeat(16, 60px);
  }
  .case-LigthSaude-1,
  .case-LigthSaude-2,
  .case-LigthSaude-3,
  .case-LigthSaude-4 {
    background-size: contain;
  }
  .grid-Payback {
    grid-template-rows: repeat(4, 60px) repeat(2, 100px) repeat(4, 90px);
  }
  .grid-YOU {
    grid-template-rows: repeat(5, 60px) repeat(6, 140px);
  }
  .case-YOU-2 {
    grid-column: 1/9;
  }

  .case-YOU-3 {
    grid-column: 1/9;
    grid-row: 9/12;
  }
}

@media screen and (max-width: 600px) {
  .icoPort-Editor {
    flex-basis: 15%;
    margin-top: -1%;
  }

  .grid-Payback {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, minmax(min-content, 350px));
  }
  .case-Payback-capa {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .case-Payback-1 {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  .txtCase-Payback {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .case-Payback-2 {
    grid-column: 1/3;
    grid-row: 3/4;
    background-size: 98%;
  }

  .grid-YOU {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, minmax(min-content, 350px));
  }

  .case-YOU-capa {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .txtCase-YOU {
    padding: 10% 5%;
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .case-YOU-1 {
    display: block;
    grid-column: 1/3;
    grid-row: 2/3;
    background-size: 98%;
  }
  .case-YOU-2 {
    grid-column: 1/3;
    grid-row: 3/4;
    background-size: 98%;
  }
  .case-YOU-3 {
    grid-column: 1/3;
    grid-row: 4/5;
    background-size: 98%;
  }

  .grid-SQF {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(300px, min-content));
  }

  .caseSQF {
    grid-column: auto;
    grid-row: 1/2;
  }

  .txtCase-SQF {
    grid-column: auto;
    grid-row: 2/3;
  }

  .caseVS-Edit {
    grid-column: auto;
    grid-row: 3/4;
  }
}

@media screen and (max-width: 568px) {
  .icoPort-Editor {
    flex-basis: 17%;
    margin-top: 1%;
  }
  .BXT-Port-Editor {
    margin-top: 1% !important;
  }
  .T-Port-Editor {
    font-size: 2.7em !important;
  }
  .grid-LigthSaude {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, minmax(300px, min-content));
  }

  .case-LigthSaude-Top {
    grid-column: auto;
    grid-row: 1/2;
  }
  .txtCase-LigthSaude {
    padding: 15% 5%;
    grid-column: auto;
    grid-row: 2/3;
  }
  .case-LigthSaude-1 {
    grid-column: auto;
    grid-row: 3/4;
  }
  .case-LigthSaude-2 {
    grid-column: auto;
    grid-row: 4/5;
  }
  .case-LigthSaude-3 {
    grid-column: auto;
    grid-row: 5/6;
  }
  .case-LigthSaude-4 {
    grid-column: auto;
    grid-row: 6/7;
  }
}

@media screen and (max-width: 504px) {
  .icoPort-Editor {
    margin-top: 3%;
  }

  .BXT-Port-Editor {
    margin-top: 3% !important;
  }
  .T-Port-Editor {
    font-size: 2.4em !important;
  }

  .grid-YOU {
    grid-template-columns: 1fr;
    grid-template-rows: 300px min-content repeat(3, 300px);
  }

  .case-YOU-capa {
    grid-column: auto;
    grid-row: 1/2;
  }
  .txtCase-YOU {
    grid-column: auto;
    grid-row: 2/3;
  }
  .case-YOU-1 {
    display: block;
    grid-column: auto;
    grid-row: 3/4;
  }
  .case-YOU-2 {
    grid-column: auto;
    grid-row: 4/5;
  }
  .case-YOU-3 {
    grid-column: auto;
    grid-row: 5/6;
  }
  .grid-Payback {
    grid-template-columns: 1fr;
    grid-template-rows: 300px min-content repeat(2, 300px);
  }

  .case-Payback-capa {
    grid-column: auto;
    grid-row: 1/2;
  }
  .txtCase-Payback {
    grid-column: auto;
    grid-row: 2/3;
  }
  .case-Payback-1 {
    display: block;
    grid-column: auto;
    grid-row: 3/4;
  }
  .case-Payback-2 {
    grid-column: auto;
    grid-row: 4/5;
  }

  .grid-LigthSaude {
    grid-template-rows: repeat(6, minmax(min-content, 200px));
  }
  .txtCase-LigthSaude {
    padding: 5%;
  }
}

@media screen and (max-width: 480px) {
  .BXT-Port-Editor {
    margin-top: 1.5% !important;
  }
  .T-Port-Editor {
    font-size: 2.3em !important;
  }
  .caseSQF {
    background-size: contain;
    background-position: center center;
  }
  .case-YOU-capa,
  .case-Payback-capa {
    background-position: center center;
  }
}

@media screen and (max-width: 414px) {
  .icoPort-Editor {
    flex-basis: 100%;
    height: 50px;
    margin-bottom: 0;
  }
  .BXT-Port-Editor {
    flex-basis: 100% !important;
  }
  .grid-YOU {
    grid-template-rows: 200px min-content repeat(3, 200px);
  }
  .grid-Payback {
    grid-template-rows: 200px min-content repeat(2, 200px);
  }
}

@media screen and (max-width: 375px) {
  .grid-LigthSaude {
    grid-template-rows: repeat(6, minmax(150px, max-content));
  }
}

@media screen and (max-width: 360px) {
  .grid-YOU {
    grid-template-rows: 180px min-content repeat(3, 180px);
  }
  .grid-Payback {
    grid-template-rows: 180px min-content repeat(2, 180px);
  }
  .T-Port-Editor {
    font-size: 2.2em !important;
  }
}

@media screen and (max-width: 320px) {
  .grayBar-Editor {
    padding-top: 13% !important;
  }
  .T-Port-Editor {
    font-size: 1.8em !important;
  }
}