/** PORTFOLIO PAGES **/
.icoPort-3D {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Fi3D.svg");
}
.heroPort-3D {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FHero-3D.jpg");
  background-position: center right;
}
.disclaimer {
  width: 100%;
}
.inner-txt-disclaimer {
  margin: 0;
  padding: 2%;
}
.tit-disclaimer {
  color: #404042;
}
.txt-disclaimer {
  color: #404042;
  background-color: #f5f5f5;
}
.intext-3D {
  margin: 2% 0;
}
.grid-3D {
  margin: 3% 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(16, minmax(1rem, 195px));
}
.imgs3D {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.ps-androgel {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Fpackshot-androgel.jpg");
  grid-column: 1/5;
  grid-row: 1/6;
}
.mckup-freezer-bg {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Fmockup-freezer-bg.jpg");
  grid-column: 5/9;
  grid-row: 1/6;
}
.siteshot-gestora {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FNotes-Gestora.jpg");
  grid-column: 1/9;
  grid-row: 6/9;
}
.ps-origens-FM {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2Fpackshot-origens-FM.jpg");
  grid-column: 1/4;
  grid-row: 9/12;
}
.ps-peyronie {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FFamilia-Peyronie.jpg");
  grid-column: 4/9;
  grid-row: 9/12;
}
.eBook-GZ {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FeBook-Ground-Zero.jpg");
  grid-column: 1/6;
  grid-row: 12/15;
}
.cabo-Anel-Amarelo {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FCabos-Aubor-anel-amarelo.jpg");
  grid-column: 6/9;
  grid-row: 12/15;
}
.cabo-Anel-Laranja {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FCabos-Aubor-anel-laranja.jpg");
  grid-column: 1/3;
  grid-row: 15/17;
}
.cabo-3furos {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FCabos-Aubor-3furos.jpg");
  grid-column: 3/5;
  grid-row: 15/17;
}
.cabo-pontas-douradas {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FCabos-Aubor-pontas-douradas.jpg");
  grid-column: 5/7;
  grid-row: 15/17;
}
.cabo-anel-azul {
  background-image: url("http://www.erc7231.com/proxy.php?url=https%3A%2F%2Fwww.ewcom.com.br%2Fimages%2FCabos-Aubor-anel-azul.jpg");
  grid-column: 7/9;
  grid-row: 15/17;
}

/**  BREAKPOINTS **/

@media screen and (max-width: 1800px) {
  .grid-3D {
    grid-template-rows:
      repeat(8, minmax(1rem, 195px))
      repeat(3, minmax(1rem, 180px))
      repeat(5, minmax(1rem, 195px));
  }
}
@media screen and (max-width: 1600px) {
  .grid-3D {
    grid-template-rows:
      repeat(8, minmax(1rem, 195px))
      repeat(3, minmax(1rem, 150px))
      repeat(5, minmax(1rem, 160px));
  }
}

@media screen and (max-width: 1366px) {
  .grid-3D {
    grid-template-rows:
      repeat(8, minmax(1rem, 160px))
      repeat(3, minmax(1rem, 130px))
      repeat(5, minmax(1rem, 140px));
  }
}

@media screen and (max-width: 1200px) {
  .grid-3D {
    grid-template-rows:
      repeat(8, minmax(1rem, 120px))
      repeat(3, minmax(1rem, 150px))
      repeat(3, minmax(1rem, 80px))
      repeat(2, minmax(1rem, 100px));
  }
  .ps-origens-FM {
    grid-column: 1/5;
    grid-row: 9/12;
  }
  .cabo-Anel-Amarelo {
    grid-column: 5/9;
    grid-row: 9/12;
  }
  .eBook-GZ {
    grid-column: 1/5;
    grid-row: 12/15;
  }
  .ps-peyronie {
    grid-column: 5/9;
    grid-row: 12/15;
  }
}

@media screen and (max-width: 1024px) {
  .grid-3D {
    grid-template-rows:
      repeat(8, minmax(1rem, 120px))
      repeat(3, minmax(1rem, 150px))
      repeat(3, minmax(1rem, 60px))
      repeat(2, minmax(1rem, 100px));
  }
}

@media screen and (max-width: 980px) {
  .grid-3D {
    grid-template-rows:
      repeat(8, minmax(1rem, 120px))
      repeat(3, minmax(1rem, 120px))
      repeat(3, minmax(1rem, 60px))
      repeat(2, minmax(1rem, 90px));
  }
}

@media screen and (max-width: 960px) {
  .grid-3D {
    grid-template-rows:
      repeat(8, minmax(1rem, 100px))
      repeat(3, minmax(1rem, 120px))
      repeat(3, minmax(1rem, 60px))
      repeat(2, minmax(1rem, 90px));
  }
}

@media screen and (max-width: 800px) {
  .grid-3D {
    grid-template-rows:
      repeat(5, 70px)
      repeat(3, 70px)
      repeat(3, 100px)
      repeat(3, 120px)
      repeat(2, 160px)
      repeat(2, 70px);
  }
  .eBook-GZ {
    grid-column: 1/9;
    grid-row: 12/15;
  }
  .ps-peyronie {
    grid-column: 1/9;
    grid-row: 15/17;
  }
  .cabo-Anel-Laranja {
    grid-row: 17/19;
  }
  .cabo-3furos {
    grid-row: 17/19;
  }
  .cabo-pontas-douradas {
    grid-row: 17/19;
  }
  .cabo-anel-azul {
    grid-row: 17/19;
  }
}

@media screen and (max-width: 736px) {
  .grid-3D {
    grid-template-rows:
      repeat(5, 70px)
      repeat(3, 70px)
      repeat(3, 100px)
      repeat(3, 120px)
      repeat(2, 160px)
      repeat(4, 140px);
  }
  .cabo-Anel-Laranja {
    grid-column: 1/5;
    grid-row: 17/19;
  }
  .cabo-3furos {
    grid-column: 5/9;
    grid-row: 17/19;
  }
  .cabo-pontas-douradas {
    grid-column: 1/5;
    grid-row: 19/21;
  }
  .cabo-anel-azul {
    grid-column: 5/9;
    grid-row: 19/21;
  }
}

@media screen and (max-width: 690px) {
  .grid-3D {
    grid-template-rows:
      repeat(5, 70px)
      repeat(3, 70px)
      repeat(3, 80px)
      repeat(3, 120px)
      repeat(2, 160px)
      repeat(4, 140px);
  }
}

@media screen and (max-width: 640px) {
  .grid-3D {
    grid-template-rows:
      repeat(5, 50px)
      repeat(3, 70px)
      repeat(3, 160px)
      repeat(3, 100px)
      repeat(2, 140px)
      repeat(4, 120px);
  }
  .cabo-Anel-Amarelo {
    display: none;
  }
  .ps-origens-FM {
    grid-column: 1/9;
    grid-row: 9/12;
  }
}

@media screen and (max-width: 600px) {
  .icoPort-3D {
    margin: -4% 3% 0;
    flex-basis: 15%;
  }
  .Bx-Titles-3D {
    align-items: center !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 568px) {
  .icoPort-3D {
    margin: -2% 3% 0;
  }
}

@media screen and (max-width: 533px) {
  .grid-3D {
    grid-template-rows:
      repeat(5, 50px)
      repeat(3, 70px)
      repeat(3, 160px)
      repeat(3, 80px)
      repeat(2, 120px)
      repeat(4, 100px);
  }
}

@media screen and (max-width: 504px) {
  .Bx-Titles-3D {
    margin-top: 2.5% !important;
  }
  .T-Port-3D {
    font-size: 2em !important;
  }
  .grid-3D {
    grid-template-rows:
      repeat(5, 30px)
      repeat(3, 50px)
      repeat(3, 140px)
      repeat(3, 80px)
      repeat(2, 120px)
      repeat(4, 100px);
  }
}

@media screen and (max-width: 480px) {
  .Bx-Titles-3D {
    margin-top: -1.5% !important;
  }
  .grid-3D {
    grid-template-rows:
      repeat(5, 30px)
      repeat(3, 50px)
      repeat(3, 140px)
      repeat(3, 80px)
      repeat(2, 100px)
      repeat(4, 80px);
  }
}

@media screen and (max-width: 414px) {
  .icoPort-3D {
    flex-basis: 22%;
    height: 70px !important;
  }
  .Bx-Titles-3D {
    margin-left: 1.6% !important;
  }
  .grid-3D {
    grid-template-rows:
      repeat(5, 30px)
      repeat(3, 50px)
      repeat(3, 100px)
      repeat(3, 60px)
      repeat(2, 80px)
      repeat(4, 70px);
  }
}

@media screen and (max-width: 375px) {
  .grid-3D {
    grid-template-rows:
      repeat(5, 20px)
      repeat(3, 40px)
      repeat(3, 100px)
      repeat(3, 50px)
      repeat(2, 80px)
      repeat(4, 60px);
  }
}
@media screen and (max-width: 360px) {
  .grid-3D {
    grid-template-rows:
      repeat(5, 20px)
      repeat(3, 40px)
      repeat(3, 90px)
      repeat(3, 50px)
      repeat(2, 70px)
      repeat(4, 60px);
  }
}

@media screen and (max-width: 320px) {
  .icoPort-3D {
    flex-basis: 100% !important;
    height: 50px !important;
  }
  .grid-3D {
    grid-template-rows:
      repeat(5, 15px)
      repeat(3, 30px)
      repeat(3, 80px)
      repeat(3, 40px)
      repeat(2, 60px)
      repeat(4, 45px);
  }
}