@media only screen and (min-width:0px){
  /************************************************************ ESTRUTURA GERAL *************************************************************/
  /**                                                                                                                                      **/
  /**                                             ESTRUTURA QUE SE APLICA A TODOS OS TAMANHOS                                              **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/

  /************************************************************* VARIAVEIS CSS **************************************************************/
  /**                                                                                                                                      **/
  /**                                     VARIAVEIS PARA ESTRUTURA DEFAULT (MARGINS/PADDINGS DEFAULT)                                      **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  :root{
    --margintopdefault: 56px;
    --marginrightdefault: 32px;
    --marginbottomdefault: 62px;
    --marginleftdefault: 32px;

    --margintopdefault2: 125px;
    --marginrightdefault2: 120px;
    --marginbottomdefault2: 110px;
    --marginleftdefault2: 120px;

    /* Variaveis de compatibilidade usadas pelas classes existentes */
    --marginfooter: var(--marginleftdefault);
    --paddingtop: var(--margintopdefault);
    --paddingrightdefault: var(--marginrightdefault);
    --paddingbottom: var(--marginbottomdefault);
    --paddingleftdefault: var(--marginleftdefault);
    --marginbottomcolunas: 30px;

    /* Gaps default para Flex e Grid */
    --gapdefault: 30px;
    --gapdefaultmobile: 20px;
    --gridgaprow: 0px;
    --gridgapcolumn: 0px;
    --gridminwidth: 250px;
  }
  /*********************************************************** FIM VARIAVEIS CSS ************************************************************/

  /************************************************************ DEFAULT RESET ***************************************************************/
  *, *::before, *::after{ box-sizing: border-box; }
  img, video{ max-width: 100%; height: auto; display: block; }
  svg{ max-width: 100%; }
  iframe{ max-width: 100%; }
  /********************************************************** FIM DEFAULT RESET *************************************************************/

  /************************************************************* DEFAUTLS LENIS *************************************************************/

  /**                                                                                                                                      **/
  /**                                          CLASES DEFAULT LENIS (SMOOTH SCROLL) NAO MODIFICAR                                          **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }
  .lenis.lenis-scrolling iframe { pointer-events: none; }
  /*********************************************************** FIM DEFAUTLS LENIS ***********************************************************/

  /************************************************************ DEFAULT ELEMENTS ************************************************************/
  /**                                                                                                                                      **/
  /**                                             CLASES DEFAULT ELEMENTOS BASE NAO MODIFICAR                                              **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  section{position: relative; float: left; width: 100%; clear: both;}
  nav{position: relative; float: left; clear: none;}
  .div{ position: relative; float: left; clear: none; }
  .divboth{ position: relative; float: left; clear: both; }
  .divbothright{ position: relative; float: right; clear: both; }
  .divright{ position: relative; float: right; clear: none; }
  .divdefault{ float: left; position: relative; width: 100%; clear: both; }
  .divdefaultright{ float: right; position: relative; width: 100%; clear: both; }

  .gridContainer{ margin-left:auto;margin-right:auto;width:100%; padding-left:0%; padding-right:0%; overflow-x:clip; z-index: 0; }
  #LayoutDiv{ clear:both; float:left; margin-left:0; width:100%; display: block; position: relative; background: #fff; z-index: 100; }
  .leftContainer,
  .centerContainer,
  .rightContainer{width: min(100%, calc(100% - 50px)); max-width: none;}
  
  .leftContainer { margin: 0 auto 0 0; }
  .centerContainer { margin: 0 auto; }
  .rightContainer { margin: 0 0 0 auto; }

  .fakeMargin{width: 0;}  
  /********************************************************** FIM DEFAULT ELEMENTS **********************************************************/

  /******************************************************** DEFAULT MARGINS/PADDINGS ********************************************************/
  /**                                                                                                                                      **/
  /**                                  CLASES DEFAULT MARGINS/PADDINGS NAO MODIFICAR, USAR VARIAVEIS CSS                                   **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  .margindefault{margin-left: var(--marginleftdefault); margin-right: var(--marginrightdefault); width: calc(100% - ( var(--marginleftdefault) + var(--marginrightdefault))); }
  .margindefaulttop{margin-top: var(--margintopdefault); }
  .margindefaultright{margin-right: var(--marginrightdefault); width: calc(100% - var(--marginrightdefault)); }
  .margindefaultbottom{margin-bottom: calc(var(--marginbottomdefault)); }
  .margindefaultleft{margin-left: var(--marginleftdefault); width: calc(100% - var(--marginleftdefault)); }

  .margindefault2{margin-left: var(--marginleftdefault2); margin-right: var(--marginrightdefault2); width: calc(100% - ( var(--marginleftdefault2) + var(--marginrightdefault2))); }
  .margindefaulttop2{margin-top: var(--margintopdefault2); }
  .margindefaultright2{margin-right: var(--marginrightdefault2); width: calc(100% - var(--marginrightdefault2)); }
  .margindefaultbottom2{margin-bottom: calc(var(--marginbottomdefault2)); }
  .margindefaultleft2{margin-left: var(--marginleftdefault2); width: calc(100% - var(--marginleftdefault2)); }

  .margindefault section.nomargin{width: calc(100% + ( var(--marginleftdefault) + var(--marginrightdefault))); margin-left: calc(var(--marginleftdefault) * (-1))}
  .margindefault section.nomargin.margindefaultleft{width: calc(100% + ( var(--marginleftdefault))); margin-left: calc(var(--marginleftdefault) * 0)}
  .margindefault section.nomargin.margindefaultright{width: calc(100% + ( var(--marginleftdefault))); margin-left: calc(var(--marginleftdefault) * (-1))}

  .marginfooterdefault{margin: 0 var(--marginfooter); width: calc(100% - ( var(--marginfooter) * 2)); }
  .marginfooterdefaultleft{margin-left: var(--marginfooter); width: calc(100% - var(--marginfooter)); }
  .marginfooterdefaultright{margin-right: var(--marginfooter); width: calc(100% - var(--marginfooter)); }

  .paddingdefault{padding-left: var(--marginleftdefault); padding-right: var(--marginrightdefault); }
  .paddingdefaulttop{padding-top: var(--paddingtop); }
  .paddingdefaultright{padding-right: var(--paddingrightdefault); }
  .paddingdefaultbottom{padding-bottom: calc(var(--paddingbottom)); }
  .paddingdefaultleft{padding-left: var(--paddingleftdefault); }

  .paddingdefault2{padding-left: var(--marginleftdefault2); padding-right: var(--marginrightdefault2); }
  .paddingdefaulttop2{padding-top: var(--margintopdefault2); }
  .paddingdefaultright2{padding-right: var(--marginrightdefault2); }
  .paddingdefaultbottom2{padding-bottom: var(--marginbottomdefault2); }
  .paddingdefaultleft2{padding-left: var(--marginleftdefault2); }

  .nomargindefault{margin: 0; width: 100%; }
  .nomargindefaulttop{margin-top: 0; }
  .nomargindefaultright{margin-right: 0; width: 100%; }
  .nomargindefaultbottom{margin-bottom: 0; }
  .nomargindefaultleft{margin-left: 0; width: 100%; }

  .nopaddingdefault{padding: 0; }
  .nopaddingdefaulttop{padding-top: 0; }
  .nopaddingdefaultright{padding-right: 0; }
  .nopaddingdefaultbottom{padding-bottom: 0; }
  .nopaddingdefaultleft{padding-left: 0; }
  /****************************************************** FIM DEFAULT MARGINS/PADDINGS ******************************************************/

  /********************************************************* CONTROLOS SHOW / HIDE **********************************************************/
  .showmobile, .showmobile481, .showmobile769, .showmobile1024, .showmobile1280{display: block;}
  .showmobileflex, .showmobileflex481, .showmobileflex769, .showmobileflex1024, .showmobileflex1280{display: flex;}
  .showmobiletr, .showmobiletr481, .showmobiletr769, .showmobiletr1024, .showmobiletr1280{display: table-row;}
  .showmobiletd, .showmobiletd481, .showmobiletd769, .showmobiletd1024, .showmobiletd1280{display: table-cell;}
  .showmobileinline, .showmobileinline481, .showmobileinline769, .showmobileinline1024, .showmobileinline1280{display: inline;}
  .showmobiletable, .showmobiletable481, .showmobiletable769, .showmobiletable1024, .showmobiletable1280{display: table;}

  .hidemobile1280, .hidemobileflex1280, .hidemobiletr1280, .hidemobiletd1280, .hidemobileinline1280, .hidemobiletable1280{ display:none; }
  .hidemobile1024, .hidemobileflex1024, .hidemobiletr1024, .hidemobiletd1024, .hidemobileinline1024, .hidemobiletable1024{ display:none; }
  .hidemobile769, .hidemobileflex769, .hidemobiletr769, .hidemobiletd769, .hidemobileinline769, .hidemobiletable769{ display:none; }
  .hidemobile481, .hidemobileflex481, .hidemobiletr481, .hidemobiletd481, .hidemobileinline481, .hidemobiletable481{ display:none; }
  .hidemobile, .hidemobileflex, .hidemobiletr, .hidemobiletd, .hidemobileinline, .hidemobiletable{ display:none; }
  /******************************************************* FIM CONTROLOS SHOW / HIDE ********************************************************/

  /*************************************************************** MAX WIDTHS ***************************************************************/
  .maxwidth800{width:100%;max-width:800px;margin:0 auto;position:relative; }
  .maxwidth1200{width:100%;max-width:1200px;margin:0 auto;position:relative; }
  .maxwidth1350{width:100%;max-width:1350px;margin:0 auto;position:relative; }
  .maxwidth1600{width:100%;max-width:1600px;margin:0 auto;position:relative; }
  .maxwidth1700{width:100%;max-width:1700px;margin:0 auto;position:relative; }
  .maxwidth1900{width:100%;max-width:1900px;margin:0 auto;position:relative; }

  .maxwidth800right{width:100%;max-width:800px;margin:0 0 0 auto;position:relative; }
  .maxwidth1200right{width:100%;max-width:1200px;margin:0 0 0 auto;position:relative; }
  .maxwidth1350right{width:100%;max-width:1350px;margin:0 0 0 auto;position:relative; }
  .maxwidth1600right{width:100%;max-width:1600px;margin:0 0 0 auto;position:relative; }
  .maxwidth1700right{width:100%;max-width:1700px;margin:0 0 0 auto;position:relative; }
  .maxwidth1900right{width:100%;max-width:1900px;margin:0 0 0 auto;position:relative; }

  .maxwidth800left{width:100%;max-width:800px;margin:0 auto 0 0;position:relative; }
  .maxwidth1200left{width:100%;max-width:1200px;margin:0 auto 0 0;position:relative; }
  .maxwidth1350left{width:100%;max-width:1350px;margin:0 auto 0 0;position:relative; }
  .maxwidth1600left{width:100%;max-width:1600px;margin:0 auto 0 0;position:relative; }
  .maxwidth1700left{width:100%;max-width:1700px;margin:0 auto 0 0;position:relative; }
  .maxwidth1900left{width:100%;max-width:1900px;margin:0 auto 0 0;position:relative; }
  /************************************************************* FIM MAX WIDTHS *************************************************************/

  /************************************************************* DEFAULTS FLEX **************************************************************/
  .flex{ display: flex; }
  .flex.wrap,
  .showmobileflex.wrap,
  .hidemobileflex.wrap{ flex-wrap: wrap; }
  .flex.nowrap,
  .showmobileflex.nowrap,
  .hidemobileflex.nowrap{ flex-wrap: nowrap; }
  .flex.grow,
  .showmobileflex.grow,
  .hidemobileflex.grow{ flex-grow: 1; }
  .flex.column,
  .showmobileflex.column,
  .hidemobileflex.column{ flex-direction: column; }
  .flex.row,
  .showmobileflex.row,
  .hidemobileflex.row{ flex-direction: row; }
  .flex.reversecolums,
  .showmobileflex.reversecolums,
  .hidemobileflex.reversecolums{ flex-direction: column-reverse; }
  .flex.reverserow,
  .showmobileflex.reverserow,
  .hidemobileflex.reverserow{ flex-direction: row-reverse; }
  .flex.align-start,
  .showmobileflex.align-start,
  .hidemobileflex.align-start{align-items: flex-start}
  .flex.align-end,
  .showmobileflex.align-end,
  .hidemobileflex.align-end{align-items: flex-end}
  .flex.align-center,
  .showmobileflex.align-center,
  .hidemobileflex.align-center,
  .hidemobileflex769.align-center{align-items: center}
  .flex.align-stretch,
  .showmobileflex.align-stretch,
  .hidemobileflex.align-stretch{align-items: stretch}
  .flex.align-base,
  .showmobileflex.align-base,
  .hidemobileflex.align-base{align-items: baseline}
  .flex.justify-start,
  .showmobileflex.justify-start,
  .hidemobileflex.justify-start{justify-content: flex-start}
  .flex.justify-end,
  .showmobileflex.justify-end,
  .hidemobileflex.justify-end{justify-content: flex-end}
  .flex.justify-center,
  .showmobileflex.justify-center,
  .hidemobileflex.justify-center{justify-content: center}
  .flex.justify-between,
  .showmobileflex.justify-between,
  .hidemobileflex.justify-between,
  .hidemobileflex769.justify-between{justify-content: space-between}
  .flex.justify-around,
  .showmobileflex.justify-around,
  .hidemobileflex.justify-around{justify-content: space-around}
  .flex.justify-evenly,
  .showmobileflex.justify-evenly,
  .hidemobileflex.justify-evenly{justify-content: space-evenly}

  .flex > .align-self-start{ align-self: flex-start; }
  .flex > .align-self-center{ align-self: center; }
  .flex > .align-self-end{ align-self: flex-end; }
  /*********************************************************** FIM DEFAULTS FLEX ************************************************************/

  /************************************************************ DEFAULTS COLUNAS ************************************************************/
  .colunas2, .colunas3, .colunas4, .colunas5, .colunas20, .colunas30, .colunas35, .colunas40, .colunas60, .colunas65, .colunas70, .colunas80{clear:both; float:left; width:100%; margin-bottom: var(--marginbottomcolunas);}
  .colunas2.nomarginmobile, .colunas3.nomarginmobile, .colunas4.nomarginmobile, .colunas5.nomarginmobile, .colunas20.nomarginmobile, .colunas30.nomarginmobile, .colunas35.nomarginmobile, .colunas40.nomarginmobile, .colunas60.nomarginmobile, .colunas65.nomarginmobile, .colunas70.nomarginmobile, .colunas80.nomarginmobile{margin-bottom: 0px;}
  /********************************************************** FIM DEFAULTS COLUNAS **********************************************************/

  /********************************************************** FIM ESTRUTURA GERAL ***********************************************************/
}



@media only screen and (max-width:768px){
  /********************************************************** ESTRUTURA SO MOBILE ***********************************************************/
  /**                                                                                                                                      **/
  /**                                            ESTILOS QUE SO SE APLICAM AO MOBILE (MAX 768)                                             **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/

  /******************************************************** DEFAULT MARGINS/PADDINGS ********************************************************/
  /**                                                                                                                                      **/
  /**                                  CLASES DEFAULT MARGINS/PADDINGS NAO MODIFICAR, USAR VARIAVEIS CSS                                   **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  .margindefault-mobile{margin-left: var(--marginleftdefault) !important; margin-right: var(--marginrightdefault) !important; width: calc(100% - ( var(--marginleftdefault) + var(--marginrightdefault))) !important; }
  .margindefaulttop-mobile,
  .margindefaulttop-mobile-mobile{margin-top: var(--margintopdefault); }
  .margindefaultright-mobile{margin-right: var(--marginrightdefault); width: calc(100% - var(--marginrightdefault)); }
  .margindefaultbottom-mobile{margin-bottom: calc(var(--marginbottomdefault)); }
  .margindefaultleft-mobile{margin-left: var(--marginleftdefault); width: calc(100% - var(--marginleftdefault)); }


  .nomargindefault-mobile{margin-left: 0; margin-right: 0; width: 100%; }
  .nomargindefaulttop-mobile{margin-top: 0; }
  .nomargindefaultright-mobile{margin-right: 0; width: 100%; }
  .nomargindefaultbottom-mobile{margin-bottom: 0; }
  .nomargindefaultleft-mobile{margin-left: 0; width: 100%; }


  .margindefault2-mobile{margin-left: var(--marginleftdefault2); margin-right: var(--marginrightdefault2); width: calc(100% - ( var(--marginleftdefault2) + var(--marginrightdefault2))); }
  .margindefaulttop2-mobile{margin-top: var(--margintopdefault2); }
  .margindefaultright2-mobile{margin-right: var(--marginrightdefault2); width: calc(100% - var(--marginrightdefault2)); }
  .margindefaultbottom2-mobile{margin-bottom: calc(var(--marginbottomdefault2)); }
  .margindefaultleft2-mobile{margin-left: var(--marginleftdefault2); width: calc(100% - var(--marginleftdefault2)); }

  .paddingdefault-mobile{padding-left: var(--paddingleftdefault); padding-right: var(--paddingrightdefault); }
  .paddingdefaulttop-mobile{padding-top: var(--paddingtop); }
  .paddingdefaultright-mobile{padding-right: var(--paddingrightdefault); }
  .paddingdefaultbottom-mobile{padding-bottom: calc(var(--paddingbottom)); }
  .paddingdefaultleft-mobile{padding-left: var(--paddingleftdefault); }

  .paddingdefault2-mobile{padding-left: var(--marginleftdefault2); padding-right: var(--marginrightdefault2); }
  .paddingdefaulttop2-mobile{padding-top: var(--margintopdefault2); }
  .paddingdefaultright2-mobile{padding-right: var(--marginrightdefault2); }
  .paddingdefaultbottom2-mobile{padding-bottom: var(--marginbottomdefault2); }
  .paddingdefaultleft2-mobile{padding-left: var(--marginleftdefault2); }

  .nopaddingdefault-mobile{padding: 0; }
  .nopaddingdefaulttop-mobile{padding-top: 0; }
  .nopaddingdefaultright-mobile{padding-right: 0; }
  .nopaddingdefaultbottom-mobile{padding-bottom: 0; }
  .nopaddingdefaultleft-mobile{padding-left: 0; }
  /****************************************************** FIM DEFAULT MARGINS/PADDINGS ******************************************************/

  /******************************************************** DEFAULTS FLEX SO MOBILE *********************************************************/
  .flex-mobile{ display: flex; }
  .flex.wrap-mobile,
  .flex-mobile.wrap-mobile{ flex-wrap: wrap; }

  .flex.nowrap-mobile,
  .flex-mobile.nowrap-mobile{ flex-wrap: nowrap; }

  .flex.grow-mobile,
  .flex-mobile.grow-mobile{ flex-grow: 1; }

  .flex.column-mobile,
  .showmobileflex.column-mobile,
  .showmobileflex769.column-mobile,
  .flex-mobile.column-mobile{ flex-direction: column; }

  .flex.row-mobile,
  .flex-mobile.row-mobile{ flex-direction: row; }

  .flex.reversecolums-mobile,
  .flex-mobile.reversecolums-mobile{ flex-direction: column-reverse; }

  .flex.reverserow-mobile,
  .flex-mobile.reverserow-mobile{ flex-direction: row-reverse; }

  .flex.align-start-mobile,
  .flex-mobile.align-start-mobile{align-items: flex-start}

  .flex.align-end-mobile,
  .flex-mobile.align-end-mobile{align-items: flex-end}

  .flex.align-center-mobile,
  .flex-mobile.align-center-mobile{align-items: center}

  .flex.align-stretch-mobile,
  .flex-mobile.align-stretch-mobile{align-items: stretch}

  .flex.align-base-mobile,
  .flex-mobile.align-base-mobile{align-items: baseline}

  .flex.justify-start-mobile,
  .flex-mobile.justify-start-mobile{justify-content: flex-start}

  .flex.justify-end-mobile,
  .flex-mobile.justify-end-mobile{justify-content: flex-end}

  .flex.justify-center-mobile,
  .flex-mobile.justify-center-mobile{justify-content: center}

  .flex.justify-between-mobile,
  .flex-mobile.justify-between-mobile{justify-content: space-between}

  .flex.justify-around-mobile,
  .flex-mobile.justify-around-mobile{justify-content: space-around}

  .flex.justify-evenly-mobile,
  .flex-mobile.justify-evenly-mobile{justify-content: space-evenly}
  /****************************************************** FIM DEFAULTS FLEX SO MOBILE *******************************************************/

  /******************************************************** FIM ESTRUTURA SO MOBILE *********************************************************/
}

@media only screen and (min-width:481px){
  /********************************************************** ESTRUTURA BIG MOBILE **********************************************************/

  /********************************************************* CONTROLOS SHOW / HIDE **********************************************************/
  .showmobile481, .showmobileflex481, .showmobiletr481, .showmobiletd481, .showmobileinline481, .showmobiletable481{ display: none; }

  .colunas4:nth-child(2n+1){clear: both; width: 50%; margin-bottom: var(--marginbottomcolunas);}
  .colunas4:nth-child(2n+2){clear: none; width: 50%; margin-bottom: var(--marginbottomcolunas);}

  .hidemobile481{display: block;}
  .hidemobileflex481{display: flex;}
  .hidemobiletr481{display: table-row;}
  .hidemobiletd481{display: table-cell;}
  .hidemobileinline481{display: inline;}
  .hidemobiletable481{display: table;}
  /******************************************************* FIM CONTROLOS SHOW / HIDE ********************************************************/
}

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

}

@media only screen and (min-width:769px){
  /************************************************************ ESTRUTURA TABLET ************************************************************/
  /**                                                                                                                                      **/
  /**                                                        ESTRUTURA PARA TABLET                                                         **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  /************************************************************* VARIAVEIS CSS **************************************************************/
  /************************************************************* VARIAVEIS CSS **************************************************************/
  /**                                                                                                                                      **/
  /**                                     VARIAVEIS PARA ESTRUTURA DEFAULT (MARGINS/PADDINGS DEFAULT)                                      **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  :root{
    --margintopdefault: 56px;
    --marginrightdefault: 32px;
    --marginbottomdefault: 62px;
    --marginleftdefault: 32px;
  }
  .fakeMargin { width: max(25px, calc((100vw - 769px) / 2)); }
  .sm\:fakeMargin { width: max(25px, calc((100vw - 769px) / 2)); }

  .leftContainer,
  .centerContainer,
  .rightContainer { width: min(769px, calc(100% - 50px)); }

  .sm\:leftContainer,
  .sm\:centerContainer,
  .sm\:rightContainer{ width: min(769px, calc(100% - 50px)); }
  
  .leftContainer { margin: 0 auto 0 0; }
  .centerContainer { margin: 0 auto; }
  .rightContainer { margin: 0 0 0 auto; }

  .sm\:leftContainer { margin: 0 auto 0 0; }
  .sm\:centerContainer { margin: 0 auto; }
  .sm\:rightContainer { margin: 0 0 0 auto; }

  /*********************************************************** FIM VARIAVEIS CSS ************************************************************/

  /********************************************************* CONTROLOS SHOW / HIDE **********************************************************/
  .showmobile769, .showmobileflex769, .showmobiletr769, .showmobiletd769, .showmobileinline769, .showmobiletable769{ display: none; }

  .hidemobile769{display: block;}
  .hidemobileflex769{display: flex;}
  .hidemobiletr769{display: table-row;}
  .hidemobiletd769{display: table-cell;}
  .hidemobileinline769{display: inline;}
  .hidemobiletable769{display: table;}
  /******************************************************* FIM CONTROLOS SHOW / HIDE ********************************************************/

  /*************************************************************** MAX WIDTHS ***************************************************************/

  /************************************************************* FIM MAX WIDTHS *************************************************************/


  /************************************************************ DEFAULTS COLUNAS ************************************************************/
  .colunas2:nth-child(2n+1){clear: both; width: 50%; margin-bottom: var(--marginbottomcolunas);}
  .colunas2:nth-child(2n+2){clear: none; width: 50%; margin-bottom: var(--marginbottomcolunas);}

  .colunas3:nth-child(3n+1){clear: both; width: calc(100% / 3); margin-bottom: var(--marginbottomcolunas);}
  .colunas3:nth-child(3n+2){clear: none; width: calc(100% / 3); margin-bottom: var(--marginbottomcolunas);}
  .colunas3:nth-child(3n+3){clear: none; width: calc(100% / 3); margin-bottom: var(--marginbottomcolunas);}

  .colunas4:nth-child(2n+1){clear: both; width: 50%; margin-bottom: var(--marginbottomcolunas);}
  .colunas4:nth-child(2n+2){clear: none; width: 50%; margin-bottom: var(--marginbottomcolunas);}

  .colunas5:nth-child(3n+1){clear: both; width: calc(100% / 3); margin-bottom: var(--marginbottomcolunas);}
  .colunas5:nth-child(3n+2){clear: none; width: calc(100% / 3); margin-bottom: var(--marginbottomcolunas);}
  .colunas5:nth-child(3n+3){clear: none; width: calc(100% / 3); margin-bottom: var(--marginbottomcolunas);}

  .colunas20:nth-child(2n+1){clear: both; width: 20%; margin-bottom: var(--marginbottomcolunas);}
  .colunas20:nth-child(2n+2){clear: none; width: 20%; margin-bottom: var(--marginbottomcolunas);}
  .colunas30:nth-child(2n+1){clear: both; width: 30%; margin-bottom: var(--marginbottomcolunas);}
  .colunas30:nth-child(2n+2){clear: none; width: 30%; margin-bottom: var(--marginbottomcolunas);}
  .colunas35:nth-child(2n+1){clear: both; width: 35%; margin-bottom: var(--marginbottomcolunas);}
  .colunas35:nth-child(2n+2){clear: none; width: 35%; margin-bottom: var(--marginbottomcolunas);}
  .colunas40:nth-child(2n+1){clear: both; width: 40%; margin-bottom: var(--marginbottomcolunas);}
  .colunas40:nth-child(2n+2){clear: none; width: 40%; margin-bottom: var(--marginbottomcolunas);}
  .colunas60:nth-child(2n+1){clear: both; width: 60%; margin-bottom: var(--marginbottomcolunas);}
  .colunas60:nth-child(2n+2){clear: none; width: 60%; margin-bottom: var(--marginbottomcolunas);}
  .colunas65:nth-child(2n+1){clear: both; width: 65%; margin-bottom: var(--marginbottomcolunas);}
  .colunas65:nth-child(2n+2){clear: none; width: 65%; margin-bottom: var(--marginbottomcolunas);}
  .colunas70:nth-child(2n+1){clear: both; width: 70%; margin-bottom: var(--marginbottomcolunas);}
  .colunas70:nth-child(2n+2){clear: none; width: 70%; margin-bottom: var(--marginbottomcolunas);}
  .colunas80:nth-child(2n+1){clear: both; width: 80%; margin-bottom: var(--marginbottomcolunas);}
  .colunas80:nth-child(2n+2){clear: none; width: 80%; margin-bottom: var(--marginbottomcolunas);}
  .colunas2.nomargin, .colunas3.nomargin, .colunas4.nomargin, .colunas5.nomargin, .colunas20.nomargin, .colunas30.nomargin, .colunas35.nomargin, .colunas40.nomargin, .colunas60.nomargin, .colunas65.nomargin, .colunas70.nomargin, .colunas80.nomargin{margin-bottom: 0px;}
  /********************************************************** FIM DEFAULTS COLUNAS **********************************************************/

  /********************************************************** FIM ESTRUTURA TABLET **********************************************************/
}

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

}

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

}

@media only screen and (min-width:1024px){
  /************************************************************ ESTRUTURA LAPTOP ************************************************************/
  /**                                                                                                                                      **/
  /**                                                    PRIMEIROS ESTRUTURA DE DESKTOP                                                    **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/

  /************************************************************* VARIAVEIS CSS **************************************************************/
  /**                                                                                                                                      **/
  /**                                     VARIAVEIS PARA ESTRUTURA DEFAULT (MARGINS/PADDINGS DEFAULT)                                      **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  :root{
    --margintopdefault: 125px;
    --marginrightdefault: 143px;
    --marginbottomdefault: 70px;
    --marginleftdefault: 143px;

    --margintopdefault2: 60px;
    --marginrightdefault2: 120px;
    --marginbottomdefault2: 110px;
    --marginleftdefault2: 120px;
  }


  
  .fakeMargin { width: max(25px, calc((100vw - 1024px) / 2)); }
  .sm\:fakeMargin { width: max(25px, calc((100vw - 1024px) / 2)); }
  .md\:fakeMargin{width: max(25px, calc((100vw - 1024px) / 2));}

  .leftContainer,
  .centerContainer,
  .rightContainer { width: min(1024px, calc(100% - 70px)); }

  .sm\:leftContainer,
  .sm\:centerContainer,
  .sm\:rightContainer{ width: min(1024px, calc(100% - 70px)); }

  .md\:leftContainer,
  .md\:centerContainer,
  .md\:rightContainer{ width: min(1024px, calc(100% - 70px)); }
  
  .leftContainer { margin: 0 auto 0 0; }
  .centerContainer { margin: 0 auto; }
  .rightContainer { margin: 0 0 0 auto; }

  .sm\:leftContainer { margin: 0 auto 0 0; }
  .sm\:centerContainer { margin: 0 auto; }
  .sm\:rightContainer { margin: 0 0 0 auto; }

  .md\:leftContainer { margin: 0 auto 0 0; }
  .md\:centerContainer { margin: 0 auto; }
  .md\:rightContainer { margin: 0 0 0 auto; }

  /*********************************************************** FIM VARIAVEIS CSS ************************************************************/

  /********************************************************* CONTROLOS SHOW / HIDE **********************************************************/
  .showmobile, .showmobileflex, .showmobiletr, .showmobiletd, .showmobileinline, .showmobiletable{ display: none; }
  .showmobile1024, .showmobileflex1024, .showmobiletr1024, .showmobiletd1024, .showmobileinline1024, .showmobiletable1024{ display: none; }

  .hidemobile, .hidemobile1024 { display: block; }
  .hidemobileflex, .hidemobileflex1024 { display: flex; }
  .hidemobiletr, .hidemobiletr1024 { display: table-row; }
  .hidemobiletd, .hidemobiletd1024 { display: table-cell; }
  .hidemobileinline, .hidemobileinline1024 { display: inline; }
  .hidemobiletable, .hidemobiletable1024 { display: table; }
  /******************************************************* FIM CONTROLOS SHOW / HIDE ********************************************************/

  /******************************************************** DEFAULTS FLEX SO DESKTOP ********************************************************/
  .flex-desktop{ display: flex; }

    .flex.wrap-desktop,
  	.flex-desktop.wrap-desktop{ flex-wrap: wrap; }
    .flex.nowrap-desktop,
  	.flex-desktop.nowrap-desktop{ flex-wrap: nowrap; }
    .flex.grow-desktop,
  	.flex-desktop.grow-desktop{ flex-grow: 1; }

    .flex.column-desktop,
  	.flex-desktop.column-desktop{ flex-direction: column; }
    .flex.row-desktop,
  	.flex-desktop.row-desktop{ flex-direction: row; }
    .flex.reversecolums-desktop,
  	.flex-desktop.reversecolums-desktop{ flex-direction: column-reverse; }
    .flex.reverserow-desktop,
  	.flex-desktop.reverserow-desktop{ flex-direction: row-reverse; }

    .flex.align-start-desktop,
  	.flex-desktop.align-start-desktop{align-items: flex-start}
    .flex.align-end-desktop,
  	.flex-desktop.align-end-desktop{align-items: flex-end}
    .flex.align-center-desktop,
  	.flex-desktop.align-center-desktop{align-items: center}
    .flex.align-stretch-desktop,
  	.flex-desktop.align-stretch-desktop{align-items: stretch}
    .flex.align-base-desktop,
  	.flex-desktop.align-base-desktop{align-items: baseline}

    .flex.justify-start-desktop,
  	.flex-desktop.justify-start-desktop{justify-content: flex-start}
    .flex.justify-end-desktop,
  	.flex-desktop.justify-end-desktop{justify-content: flex-end}
    .flex.justify-center-desktop,
  	.flex-desktop.justify-center-desktop{justify-content: center}
    .flex.justify-between-desktop,
  	.flex-desktop.justify-between-desktop{justify-content: space-between}
    .flex.justify-around-desktop,
  	.flex-desktop.justify-around-desktop{justify-content: space-around}
    .flex.justify-evenly-desktop,
  	.flex-desktop.justify-evenly-desktop{justify-content: space-evenly}

    .flex.justify-center-desktop,
  	.flex-desktop.justify-center-desktop{ justify-content: center; }
    .flex.space-between-desktop,
  	.flex-desktop.space-between-desktop{ justify-content: space-between; }

  	.flex > .align-self-start-desktop,
  	.flex-desktop > .align-self-start-desktop{ align-self: flex-start; }
  	.flex > .align-self-center-desktop,
  	.flex-desktop > .align-self-center-desktop{ align-self: center; }
  	.flex > .align-self-end-desktop,
  	.flex-desktop > .align-self-end-desktop{ align-self: flex-end; }
  /****************************************************** FIM DEFAULTS FLEX SO DESKTOP ******************************************************/

  /************************************************************ DEFAULTS COLUNAS ************************************************************/
  .colunas4:nth-child(4n+1){clear: both; width: 25%; margin-bottom: var(--marginbottomcolunas);}
  .colunas4:nth-child(4n+2){clear: none; width: 25%; margin-bottom: var(--marginbottomcolunas);}
  .colunas4:nth-child(4n+3){clear: none; width: 25%; margin-bottom: var(--marginbottomcolunas);}
  .colunas4:nth-child(4n+4){clear: none; width: 25%; margin-bottom: var(--marginbottomcolunas);}

  .colunas5:nth-child(5n+1){clear: both; width: 20%; margin-bottom: var(--marginbottomcolunas);}
  .colunas5:nth-child(5n+2){clear: none; width: 20%; margin-bottom: var(--marginbottomcolunas);}
  .colunas5:nth-child(5n+3){clear: none; width: 20%; margin-bottom: var(--marginbottomcolunas);}
  .colunas5:nth-child(5n+4){clear: none; width: 20%; margin-bottom: var(--marginbottomcolunas);}
  .colunas5:nth-child(5n+5){clear: none; width: 20%; margin-bottom: var(--marginbottomcolunas);}
  .colunas2.nomargin, .colunas3.nomargin, .colunas4.nomargin, .colunas5.nomargin, .colunas20.nomargin, .colunas30.nomargin, .colunas35.nomargin, .colunas40.nomargin, .colunas60.nomargin, .colunas65.nomargin, .colunas70.nomargin, .colunas80.nomargin{margin-bottom: 0px;}
  /********************************************************** FIM DEFAULTS COLUNAS **********************************************************/
  /********************************************************** FIM ESTRUTURA LAPTOP **********************************************************/
}

@media only screen and (min-width:1280px){
  /*************************************************************** ESTILOS PC ***************************************************************/
  /************************************************************* VARIAVEIS CSS **************************************************************/
  /**                                                                                                                                      **/
  /**                                     VARIAVEIS PARA ESTRUTURA DEFAULT (MARGINS/PADDINGS DEFAULT)                                      **/
  /**                                                                                                                                      **/
  /******************************************************************************************************************************************/
  
  .fakeMargin { width: max(25px, calc((100vw - 1280px) / 2)); }
  .sm\:fakeMargin { width: max(25px, calc((100vw - 1280px) / 2)); }
  .md\:fakeMargin{width: max(25px, calc((100vw - 1280px) / 2));}
  .xl\:fakeMargin{width: max(25px, calc((100vw - 1280px) / 2));}

  .leftContainer,
  .centerContainer,
  .rightContainer { width: min(1280px, calc(100% - 90px)); }

  .sm\:leftContainer,
  .sm\:centerContainer,
  .sm\:rightContainer{ width: min(1280px, calc(100% - 90px)); }

  .md\:leftContainer,
  .md\:centerContainer,
  .md\:rightContainer{ width: min(1280px, calc(100% - 90px)); }

  .xl\:leftContainer,
  .xl\:centerContainer,
  .xl\:rightContainer{ width: min(1280px, calc(100% - 90px)); }
  
  .leftContainer { margin: 0 auto 0 0; }
  .centerContainer { margin: 0 auto; }
  .rightContainer { margin: 0 0 0 auto; }

  .sm\:leftContainer { margin: 0 auto 0 0; }
  .sm\:centerContainer { margin: 0 auto; }
  .sm\:rightContainer { margin: 0 0 0 auto; }

  .md\:leftContainer { margin: 0 auto 0 0; }
  .md\:centerContainer { margin: 0 auto; }
  .md\:rightContainer { margin: 0 0 0 auto; }

  .xl\:leftContainer { margin: 0 auto 0 0; }
  .xl\:centerContainer { margin: 0 auto; }
  .xl\:rightContainer { margin: 0 0 0 auto; }


  /*********************************************************** FIM VARIAVEIS CSS ************************************************************/

  /********************************************************* CONTROLOS SHOW / HIDE **********************************************************/
  .showmobile1280, .showmobileflex1280, .showmobiletr1280, .showmobiletd1280, .showmobileinline1280, .showmobiletable1280{ display: none; }

  .hidemobile1280{display: block;}
  .hidemobileflex1280{display: flex;}
  .hidemobiletr1280{display: table-row;}
  .hidemobiletd1280{display: table-cell;}
  .hidemobileinline1280{display: inline;}
  .hidemobiletable1280{display: table;}
  /******************************************************* FIM CONTROLOS SHOW / HIDE ********************************************************/
}

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

}

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

}


/******************************************************** CAMADA MODERNA / COMPATIBILIDADE *************************************************/
/**
 * Esta camada complementa a estrutura antiga sem remover classes existentes.
 * As classes .colunasX continuam em float.
 * As classes .colunasX-grid usam CSS Grid e podem ser testadas em paralelo.
 */

@media only screen and (min-width:0px){
  /******************************************************** UTILITARIOS GERAIS **************************************************************/
  .relative{position:relative;}
  .absolute{position:absolute;}
  .fixed{position:fixed;}
  .sticky{position:sticky;}

  .w100{width:100%;}
  .h100{}
  .minwidth0{min-width:0;}
  .minheight0{min-height:0;}
  .maxwidth100{max-width:100%;}

  .flow-root{display:flow-root;}
  .clearfix::after{content:"";display:table;clear:both;}
  .overflow-hidden{overflow:hidden;}
  .overflow-visible{overflow:visible;}
  .overflow-auto{overflow:auto;}

  .object-cover{object-fit:cover;}
  .object-contain{object-fit:contain;}

  .gap{gap:var(--gapdefault);}
  .gaprow{row-gap:var(--gapdefault);}
  .gapcolumn{column-gap:var(--gapdefault);}
  .gap0{gap:0;}
  .gap10{gap:10px;}
  .gap15{gap:15px;}
  .gap20{gap:20px;}
  .gap30{gap:30px;}
  .gap40{gap:40px;}
  .gap50{gap:50px;}
  /****************************************************** FIM UTILITARIOS GERAIS ************************************************************/

  /******************************************************** FLEX COMPLETO *******************************************************************/
  /* Permite flex no mobile + desktop sem perder display entre 769px e 1023px. */
  .flex-mobile.flex-desktop,
  .flex-mobile.flex-tablet,
  .flex-tablet.flex-desktop{display:flex;}

  /* Modificadores independentes: funcionam com qualquer classe que ative Flex. */
  .wrap{flex-wrap:wrap;}
  .nowrap{flex-wrap:nowrap;}
  .grow{flex-grow:1;}
  .column{flex-direction:column;}
  .row{flex-direction:row;}
  .reversecolumns,
  .reversecolums{flex-direction:column-reverse;}
  .reverserow{flex-direction:row-reverse;}
  .align-start{align-items:flex-start;}
  .align-end{align-items:flex-end;}
  .align-center{align-items:center;}
  .align-stretch{align-items:stretch;}
  .align-base{align-items:baseline;}
  .justify-start{justify-content:flex-start;}
  .justify-end{justify-content:flex-end;}
  .justify-center{justify-content:center;}
  .justify-between,
  .space-between{justify-content:space-between;}
  .justify-around{justify-content:space-around;}
  .justify-evenly{justify-content:space-evenly;}

  /* Alias correto; reversecolums continua suportado por compatibilidade. */
  .flex.reversecolumns,
  .showmobileflex.reversecolumns,
  .hidemobileflex.reversecolumns{flex-direction:column-reverse;}

  .flex-1{flex:1 1 0;min-width:0;}
  .flex-auto{flex:1 1 auto;min-width:0;}
  .flex-none{flex:none;}
  .grow-0{flex-grow:0;}
  .shrink{flex-shrink:1;}
  .shrink-0{flex-shrink:0;}
  .basis-0{flex-basis:0;}
  .basis-auto{flex-basis:auto;}

  .align-content-start{align-content:flex-start;}
  .align-content-end{align-content:flex-end;}
  .align-content-center{align-content:center;}
  .align-content-between{align-content:space-between;}
  .align-content-around{align-content:space-around;}
  .align-content-stretch{align-content:stretch;}

  .align-self-stretch{align-self:stretch;}
  .align-self-baseline{align-self:baseline;}
  .order-first{order:-1;}
  .order-last{order:999;}
  /****************************************************** FIM FLEX COMPLETO *****************************************************************/

  /******************************************************** GRID GERAL **********************************************************************/
  .grid{display:grid;}
  .inline-grid{display:inline-grid;}

  /* A combinacao mobile + desktop mantem Grid ativo no intervalo tablet. */
  .grid-mobile.grid-desktop,
  .grid-mobile.grid-tablet,
  .grid-tablet.grid-desktop{display:grid;}

  .grid-cols-1{grid-template-columns:minmax(0,1fr);}
  .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
  .grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}

  .grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--gridminwidth)),1fr));}
  .grid-auto-fill{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--gridminwidth)),1fr));}
  .grid-flow-row{grid-auto-flow:row;}
  .grid-flow-column{grid-auto-flow:column;}
  .grid-flow-dense{grid-auto-flow:dense;}

  .items-start{align-items:start;}
  .items-end{align-items:end;}
  .items-center{align-items:center;}
  .items-stretch{align-items:stretch;}
  .justify-items-start{justify-items:start;}
  .justify-items-end{justify-items:end;}
  .justify-items-center{justify-items:center;}
  .justify-items-stretch{justify-items:stretch;}
  .content-start{align-content:start;}
  .content-end{align-content:end;}
  .content-center{align-content:center;}
  .content-between{align-content:space-between;}
  .content-around{align-content:space-around;}
  .content-evenly{align-content:space-evenly;}

  .col-span-1{grid-column:span 1;}
  .col-span-2{grid-column:span 2;}
  .col-span-3{grid-column:span 3;}
  .col-span-4{grid-column:span 4;}
  .col-span-5{grid-column:span 5;}
  .col-span-6{grid-column:span 6;}
  .col-span-full{grid-column:1 / -1;}
  /****************************************************** FIM GRID GERAL ********************************************************************/

  /******************************************************* SHOW / HIDE GRID *****************************************************************/
  .showmobilegrid,
  .showmobilegrid481,
  .showmobilegrid769,
  .showmobilegrid1024,
  .showmobilegrid1280{display:grid;}

  .hidemobilegrid,
  .hidemobilegrid481,
  .hidemobilegrid769,
  .hidemobilegrid1024,
  .hidemobilegrid1280{display:none;}
  /***************************************************** FIM SHOW / HIDE GRID ***************************************************************/

  /**************************************************** COLUNAS GRID - MIGRACAO **************************************************************/
  /**
   * A classe -grid continua a ser colocada nos filhos, tal como a classe antiga.
   * :has() transforma automaticamente o pai imediato num grid de 60 unidades.
   * Para fallback/manual, pode adicionar .grid-colunas ao pai.
   */
  .grid-colunas,
  *:has(> :is(
    .colunas2-grid,
    .colunas3-grid,
    .colunas4-grid,
    .colunas5-grid,
    .colunas20-grid,
    .colunas30-grid,
    .colunas35-grid,
    .colunas40-grid,
    .colunas60-grid,
    .colunas65-grid,
    .colunas70-grid,
    .colunas80-grid
  )){
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-flow:row;
    align-items:start;
    row-gap:var(--gridgaprow);
    column-gap:var(--gridgapcolumn);
  }

  :is(
    .colunas2-grid,
    .colunas3-grid,
    .colunas4-grid,
    .colunas5-grid,
    .colunas20-grid,
    .colunas30-grid,
    .colunas35-grid,
    .colunas40-grid,
    .colunas60-grid,
    .colunas65-grid,
    .colunas70-grid,
    .colunas80-grid
  ){
    position:relative;
    float:none;
    clear:none;
    width:auto;
    min-width:0;
    max-width:100%;
    grid-column:span 60;
    margin-bottom:var(--marginbottomcolunas);
  }

  :is(
    .colunas2-grid,
    .colunas3-grid,
    .colunas4-grid,
    .colunas5-grid,
    .colunas20-grid,
    .colunas30-grid,
    .colunas35-grid,
    .colunas40-grid,
    .colunas60-grid,
    .colunas65-grid,
    .colunas70-grid,
    .colunas80-grid
  ).nomarginmobile{margin-bottom:0;}
  /************************************************** FIM COLUNAS GRID - MIGRACAO ************************************************************/
}

@media only screen and (max-width:768px){
  .gap-mobile{gap:var(--gapdefaultmobile);}
  .gap0-mobile{gap:0;}

  .wrap-mobile{flex-wrap:wrap;}
  .nowrap-mobile{flex-wrap:nowrap;}
  .grow-mobile{flex-grow:1;}
  .column-mobile{flex-direction:column;}
  .row-mobile{flex-direction:row;}
  .reversecolumns-mobile,
  .reversecolums-mobile{flex-direction:column-reverse;}
  .reverserow-mobile{flex-direction:row-reverse;}
  .align-start-mobile{align-items:flex-start;}
  .align-end-mobile{align-items:flex-end;}
  .align-center-mobile{align-items:center;}
  .align-stretch-mobile{align-items:stretch;}
  .align-base-mobile{align-items:baseline;}
  .justify-start-mobile{justify-content:flex-start;}
  .justify-end-mobile{justify-content:flex-end;}
  .justify-center-mobile{justify-content:center;}
  .justify-between-mobile,
  .space-between-mobile{justify-content:space-between;}
  .justify-around-mobile{justify-content:space-around;}
  .justify-evenly-mobile{justify-content:space-evenly;}

  .flex.reversecolumns-mobile,
  .flex-mobile.reversecolumns-mobile,
  .showmobileflex.reversecolumns-mobile{flex-direction:column-reverse;}

  .align-self-start-mobile{align-self:flex-start;}
  .align-self-center-mobile{align-self:center;}
  .align-self-end-mobile{align-self:flex-end;}
  .align-self-stretch-mobile{align-self:stretch;}
  .order-first-mobile{order:-1;}
  .order-last-mobile{order:999;}

  .grid-mobile{display:grid;}
  .grid-cols-1-mobile{grid-template-columns:minmax(0,1fr);}
  .grid-cols-2-mobile{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-cols-3-mobile{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid-cols-4-mobile{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media only screen and (min-width:481px){
  .showmobilegrid481{display:none;}
  .hidemobilegrid481{display:grid;}

  /* Mantem o comportamento antigo: colunas4 passa a duas colunas no big mobile. */
  .colunas4-grid{grid-column:span 30;}
}

@media only screen and (min-width:769px) and (max-width:1023px){
  /******************************************************** FLEX / GRID TABLET **************************************************************/
  .flex-tablet{display:flex;}
  .wrap-tablet{flex-wrap:wrap;}
  .nowrap-tablet{flex-wrap:nowrap;}
  .grow-tablet{flex-grow:1;}
  .column-tablet{flex-direction:column;}
  .row-tablet{flex-direction:row;}
  .reversecolumns-tablet,
  .reversecolums-tablet{flex-direction:column-reverse;}
  .reverserow-tablet{flex-direction:row-reverse;}
  .align-start-tablet{align-items:flex-start;}
  .align-end-tablet{align-items:flex-end;}
  .align-center-tablet{align-items:center;}
  .align-stretch-tablet{align-items:stretch;}
  .align-base-tablet{align-items:baseline;}
  .justify-start-tablet{justify-content:flex-start;}
  .justify-end-tablet{justify-content:flex-end;}
  .justify-center-tablet{justify-content:center;}
  .justify-between-tablet,
  .space-between-tablet{justify-content:space-between;}
  .justify-around-tablet{justify-content:space-around;}
  .justify-evenly-tablet{justify-content:space-evenly;}
  .flex.wrap-tablet,
  .flex-tablet.wrap-tablet{flex-wrap:wrap;}
  .flex.nowrap-tablet,
  .flex-tablet.nowrap-tablet{flex-wrap:nowrap;}
  .flex.column-tablet,
  .flex-tablet.column-tablet{flex-direction:column;}
  .flex.row-tablet,
  .flex-tablet.row-tablet{flex-direction:row;}
  .flex.reversecolumns-tablet,
  .flex.reversecolums-tablet,
  .flex-tablet.reversecolumns-tablet,
  .flex-tablet.reversecolums-tablet{flex-direction:column-reverse;}
  .flex.reverserow-tablet,
  .flex-tablet.reverserow-tablet{flex-direction:row-reverse;}
  .flex.align-start-tablet,
  .flex-tablet.align-start-tablet{align-items:flex-start;}
  .flex.align-end-tablet,
  .flex-tablet.align-end-tablet{align-items:flex-end;}
  .flex.align-center-tablet,
  .flex-tablet.align-center-tablet{align-items:center;}
  .flex.align-stretch-tablet,
  .flex-tablet.align-stretch-tablet{align-items:stretch;}
  .flex.justify-start-tablet,
  .flex-tablet.justify-start-tablet{justify-content:flex-start;}
  .flex.justify-end-tablet,
  .flex-tablet.justify-end-tablet{justify-content:flex-end;}
  .flex.justify-center-tablet,
  .flex-tablet.justify-center-tablet{justify-content:center;}
  .flex.justify-between-tablet,
  .flex-tablet.justify-between-tablet{justify-content:space-between;}
  .flex.justify-around-tablet,
  .flex-tablet.justify-around-tablet{justify-content:space-around;}
  .flex.justify-evenly-tablet,
  .flex-tablet.justify-evenly-tablet{justify-content:space-evenly;}

  .align-self-start-tablet{align-self:flex-start;}
  .align-self-center-tablet{align-self:center;}
  .align-self-end-tablet{align-self:flex-end;}
  .align-self-stretch-tablet{align-self:stretch;}
  .order-first-tablet{order:-1;}
  .order-last-tablet{order:999;}

  .grid-tablet{display:grid;}
  .grid-cols-1-tablet{grid-template-columns:minmax(0,1fr);}
  .grid-cols-2-tablet{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-cols-3-tablet{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid-cols-4-tablet{grid-template-columns:repeat(4,minmax(0,1fr));}
  .grid-cols-5-tablet{grid-template-columns:repeat(5,minmax(0,1fr));}
  /****************************************************** FIM FLEX / GRID TABLET ************************************************************/
}

@media only screen and (min-width:769px){
  .showmobilegrid769{display:none;}
  .hidemobilegrid769{display:grid;}

  /* Mesma distribuicao das colunas antigas no tablet. */
  .colunas2-grid{grid-column:span 6;}
  .colunas3-grid{grid-column:span 6;}
  .colunas4-grid{grid-column:span 3;}
  .colunas6-grid{grid-column:span 2;}

  .colunas20-grid{grid-column:span 12;}
  .colunas30-grid{grid-column:span 18;}
  .colunas35-grid{grid-column:span 21;}
  .colunas40-grid{grid-column:span 24;}
  .colunas60-grid{grid-column:span 36;}
  .colunas65-grid{grid-column:span 39;}
  .colunas70-grid{grid-column:span 42;}
  .colunas80-grid{grid-column:span 48;}

  :is(
    .colunas2-grid,
    .colunas3-grid,
    .colunas4-grid,
    .colunas6-grid,
    .colunas20-grid,
    .colunas30-grid,
    .colunas35-grid,
    .colunas40-grid,
    .colunas60-grid,
    .colunas65-grid,
    .colunas70-grid,
    .colunas80-grid
  ).nomargin{margin-bottom:0;}
}

@media only screen and (min-width:1024px){
  .wrap-desktop{flex-wrap:wrap;}
  .nowrap-desktop{flex-wrap:nowrap;}
  .grow-desktop{flex-grow:1;}
  .column-desktop{flex-direction:column;}
  .row-desktop{flex-direction:row;}
  .reversecolumns-desktop,
  .reversecolums-desktop{flex-direction:column-reverse;}
  .reverserow-desktop{flex-direction:row-reverse;}
  .align-start-desktop{align-items:flex-start;}
  .align-end-desktop{align-items:flex-end;}
  .align-center-desktop{align-items:center;}
  .align-stretch-desktop{align-items:stretch;}
  .align-base-desktop{align-items:baseline;}
  .justify-start-desktop{justify-content:flex-start;}
  .justify-end-desktop{justify-content:flex-end;}
  .justify-center-desktop{justify-content:center;}
  .justify-between-desktop,
  .space-between-desktop{justify-content:space-between;}
  .justify-around-desktop{justify-content:space-around;}
  .justify-evenly-desktop{justify-content:space-evenly;}

  .showmobilegrid,
  .showmobilegrid1024{display:none;}
  .hidemobilegrid,
  .hidemobilegrid1024{display:grid;}

  .flex.reversecolumns-desktop,
  .flex.reversecolums-desktop,
  .flex-desktop.reversecolumns-desktop,
  .flex-desktop.reversecolums-desktop{flex-direction:column-reverse;}

  .grid-desktop{display:grid;}
  .grid-cols-1-desktop{grid-template-columns:minmax(0,1fr);}
  .grid-cols-2-desktop{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-cols-3-desktop{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid-cols-4-desktop{grid-template-columns:repeat(4,minmax(0,1fr));}
  .grid-cols-5-desktop{grid-template-columns:repeat(5,minmax(0,1fr));}
  .grid-cols-6-desktop{grid-template-columns:repeat(6,minmax(0,1fr));}
  .grid-cols-12-desktop{grid-template-columns:repeat(12,minmax(0,1fr));}

  /* Mesma distribuicao das colunas antigas no desktop. */
  .colunas3-grid{grid-column:span 4;}
  .colunas4-grid{grid-column:span 3;}
  .colunas6-grid{grid-column:span 2;}
}

@media only screen and (min-width:1280px){
  .showmobilegrid1280{display:none;}
  .hidemobilegrid1280{display:grid;}
}

/****************************************************** FIM CAMADA MODERNA / COMPATIBILIDADE ***********************************************/