@media screen {
  /* RESET PAGE */
  html, body,
  div, span,
  h1, h2, h3, h4, h5, h6, p,
  a, em, font, img, strong,
  dl, dt, dd, ol, ul, li,
  form, label, fieldset, legend, input, select, textarea, button,
  table, caption, tbody, tfoot, thead, tr, th, td,
  header, main, footer,
  article, aside, canvas, embed,
  picture, figure, figcaption, hgroup,
  menu, nav, output, ruby, section, details, summary,
  address, blockquote, cite,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: none;
    box-sizing: border-box;
  }
  header, main, footer,
  article, aside, canvas, embed,
  picture, figure, figcaption, hgroup,
  menu, nav, output, ruby, section, details, summary,
  address, blockquote, cite,
  time, mark, audio, video {
    display: block;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
  }
  ul {
    list-style: none;
  }
  a {
    text-decoration: none !important;
  }
  a, figure, img {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  input, select, textarea, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type=number] {
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
  }
  table, tr, th, td {
    border-collapse: collapse;
    vertical-align: top;
  }
  address {
    font-style: normal;
  }
  html, body {
    height: 100%;
  }
  html {
    font-size: 16px;
  }
  body {
    font-size: 1rem; /*1rem = 16px*/
  }
}
/*atoms*/
/*FONTS*/
@font-face {
  font-family: "RobotoFlex";
  src: url("../fonts/RobotoFlex-VariableFont.ttf") format("truetype");
  font-weight: 1 999;
  font-display: swap;
}
/*PRIMITIVES*/
/*colors*/
/*functional*/
/*neutral*/
/*gray*/
/*fonts size - ratio 1:20*/
/*8px*/
/*10px*/
/*13px*/
/*16px*/
/*19px*/
/*23px*/
/*28px*/
/*33px*/
/*39px*/
/*48px*/
/*57px*/
/*69px*/
/*83px*/
/*font family*/
/*font weight*/
/*space - ratio menor a normal(16px) = +4 / mayor a normal(16px) = +8*/
/*16px*/
/*normaliza alto de inputs /buttons*/
/*radius*/
/*easing*/
/*LAYOUT GLOVAL*/
@media screen {
  body {
    margin: 0 auto;
    text-align: left;
    font-family: "RobotoFlex", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    overflow-x: hidden;
    background-color: #000000;
  }
  .SafeZone {
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
  }
  .ViewportLargo {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto; /*border: 1px solid green;*/
    max-width: 110em; /*1760px*/
  }
  .Viewport {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto; /*border: 1px solid red;*/
    max-width: 100em; /*1600px*/
  }
  .ViewportCorto {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto; /*border: 1px solid blue;*/
    max-width: 56em; /*900px*/
  }
  /*img responsive*/
  img {
    max-width: 100%;
    display: block;
  }
}
@media (max-width: 1920px) {
  .Viewport {
    max-width: 85em;
  } /*1360px*/
}
@media (max-width: 1470px) {
  .Viewport {
    max-width: 75em !important;
  } /*1200px*/
}
@media (max-width: 1300px) {
  .Viewport,
  .ViewportLargo,
  .ViewportCorto {
    padding: 0 2em;
    max-width: none !important;
  }
}
@media (max-width: 500px) {
  .Viewport,
  .ViewportLargo,
  .ViewportCorto {
    padding: 0 1.5em;
  }
}
/*HOME*/
@media screen {
  .SafeZone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  #SplashPage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 100px 2.5em 2.5em 2.5em;
    max-width: 100em;
    max-height: 55em;
  }
  #Logo {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
    text-align: center;
    padding: 0 0 100px 0;
  }
  #Logo img {
    margin: 0 auto;
  }
  #NavSplash {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5em;
    width: 100%;
  }
  #NavSplash a {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff;
    border-radius: 0.5em;
  }
  #NavSplash .Overlay {
    position: absolute;
    overflow: hidden;
    z-index: 100;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    -webkit-clip-path: polygon(0% 95%, 100% 95%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 95%, 100% 95%, 100% 100%, 0% 100%);
    transform-origin: 50% 100%;
    transition: all 0.3s ease-in-out;
  }
  #NavSplash .Overlay img {
    filter: grayscale(100%) brightness(0%);
  }
  #NavSplash figure {
    width: 100%;
    max-width: 215px;
    padding: 1em;
    margin-bottom: 7%;
  }
  a#BtnMTBS .Overlay {
    background: linear-gradient(64deg, rgb(88, 87, 88) 0%, rgb(216, 216, 216) 42.36%, rgb(113, 112, 113) 84.53%, rgb(113, 112, 113) 100%);
  }
  a#BtnMTI .Overlay {
    background: linear-gradient(64deg, rgb(177, 136, 87) 0%, rgb(177, 136, 87) 10%, rgb(236, 202, 145) 50%, rgb(177, 136, 87) 91.34%, rgb(177, 136, 87) 100%);
  }
  a#BtnMTCat .Overlay {
    background: linear-gradient(64deg, rgb(241, 164, 144) 0%, rgb(241, 164, 144) 2.18%, rgb(238, 123, 113) 51.68%, rgb(241, 164, 144) 92.35%, rgb(241, 164, 144) 100%);
  }
  a#BtnMTEv .Overlay {
    background: linear-gradient(64deg, rgb(76, 37, 98) 0%, rgb(151, 19, 71) 19.63%, rgb(203, 84, 147) 81.42%, rgb(203, 84, 147) 100%);
  }
}
@media (hover: hover) and (pointer: fine) {
  #NavSplash a:hover .Overlay {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  #NavSplash a:hover .Overlay figure {
    opacity: 1;
  }
}
@media (max-width: 1400px) {
  #Logo {
    max-width: 25em;
    padding: 0 0 3.5em 0;
  }
  #NavSplash {
    gap: 1em;
  }
  #NavSplash figure {
    max-width: 15em;
  }
}
@media (max-width: 1200px) {
  #NavSplash {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .SafeZone {
    display: block;
  }
  #SplashPage {
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    justify-content: flex-start;
    padding: 3.58em 1.5em 2.5em 1.5em;
  }
  #Logo {
    max-width: 300px;
    padding-bottom: 3.5em;
  }
  #NavSplash {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  #NavSplash figure {
    max-width: 13em;
    padding-top: 3em;
    padding-bottom: 3em;
    margin-bottom: 4.5%;
  }
}
@media (max-height: 500px) {
  #SplashPage {
    height: auto;
    max-height: none;
    padding-top: 3.5em;
  }
  #Logo {
    max-width: 300px;
    padding-bottom: 3.5em;
  }
  #NavSplash figure {
    max-width: 13em;
    padding-top: 3em;
    padding-bottom: 3em;
    margin-bottom: 4.5%;
  }
}