/*##################################################################
# Colors                                                           #
/*################################################################*/
/*##################################################################
# Sizes                                                            #
/*################################################################*/
/*##################################################################
# Radius                                                           #
/*################################################################*/
/*##################################################################
# Media Quries                                                     #
/*################################################################*/
/*##############################################################################
## Transitions                                                                 #
##############################################################################*/
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: white;
  font-family: 'Open Sans', sans-serif; }
  @media only screen and (max-width: 760px) {
    body {
      overflow-y: auto; } }

div#brand_cont {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
  height: calc(100vh - 24px*2); }
  div#brand_cont div.brand,
  div#brand_cont a.brand {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-position: center center !important;
    background-size: cover !important;
    color: white;
    text-decoration: none; }
    div#brand_cont div.brand:visited,
    div#brand_cont a.brand:visited {
      color: white;
      text-decoration: none; }
    div#brand_cont div.brand:hover span.text,
    div#brand_cont a.brand:hover span.text {
      opacity: 1; }
      @media only screen and (max-width: 760px) {
        div#brand_cont div.brand:hover span.text,
        div#brand_cont a.brand:hover span.text {
          opacity: 0; } }
    div#brand_cont div.brand:hover span.sudo_button,
    div#brand_cont a.brand:hover span.sudo_button {
      opacity: 0; }
    div#brand_cont div.brand img,
    div#brand_cont div.brand span.text,
    div#brand_cont a.brand img,
    div#brand_cont a.brand span.text {
      position: relative;
      z-index: 10; }
    div#brand_cont div.brand img.logo,
    div#brand_cont a.brand img.logo {
      object-fit: contain;
      max-width: 200px; }
      @media only screen and (max-width: 760px) {
        div#brand_cont div.brand img.logo,
        div#brand_cont a.brand img.logo {
          max-width: 160px; } }
    div#brand_cont div.brand picture.bkg_img,
    div#brand_cont a.brand picture.bkg_img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none; }
      div#brand_cont div.brand picture.bkg_img img,
      div#brand_cont a.brand picture.bkg_img img {
        object-fit: cover;
        width: 100%;
        height: 100%; }
    div#brand_cont div.brand span.text,
    div#brand_cont a.brand span.text {
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      -ms-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      opacity: 0;
      position: absolute;
      left: 0;
      bottom: 0;
      background: rgba(33, 33, 33, 0.8);
      color: white;
      padding: calc(24px*1.5);
      width: 100%;
      width: calc(100% - 24px*3);
      text-align: center;
      font-size: 0.94em;
      font-weight: 600;
      z-index: 100; }
      div#brand_cont div.brand span.text div,
      div#brand_cont a.brand span.text div {
        padding-top: calc(24px/2);
        color: #cd412f; }
      div#brand_cont div.brand span.text div.link_area,
      div#brand_cont a.brand span.text div.link_area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%; }
        div#brand_cont div.brand span.text div.link_area a,
        div#brand_cont a.brand span.text div.link_area a {
          flex: 1;
          padding: 12px;
          background-color: #cd412f;
          color: #ffffff;
          text-decoration: none;
          transition: 300ms ease-in-out; }
          div#brand_cont div.brand span.text div.link_area a:hover,
          div#brand_cont a.brand span.text div.link_area a:hover {
            background-color: #b53828; }
      @media only screen and (max-width: 760px) {
        div#brand_cont div.brand span.text div.txt,
        div#brand_cont a.brand span.text div.txt {
          display: none; } }
      @media only screen and (max-width: 960px) {
        div#brand_cont div.brand span.text,
        div#brand_cont a.brand span.text {
          height: calc(100% - 24px*3);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-flow: column;
          background: rgba(33, 33, 33, 0.9); } }
      @media only screen and (max-width: 760px) {
        div#brand_cont div.brand span.text,
        div#brand_cont a.brand span.text {
          opacity: 1;
          background: transparent;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end; } }
    div#brand_cont div.brand span.sudo_button,
    div#brand_cont a.brand span.sudo_button {
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      -ms-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      background: #cd412f;
      padding: calc(24px/1.2) 24px;
      z-index: 99;
      margin-top: 8px;
      position: absolute;
      bottom: 24px;
      left: 24px;
      width: calc(100% - 24px*4);
      text-align: center;
      font-weight: 600;
      font-size: 0.98em;
      opacity: 1; }
      @media only screen and (max-width: 760px) {
        div#brand_cont div.brand span.sudo_button,
        div#brand_cont a.brand span.sudo_button {
          display: none; } }
    div#brand_cont div.brand span.darken,
    div#brand_cont a.brand span.darken {
      pointer-events: none;
      background: rgba(33, 33, 33, 0.5);
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

/*# sourceMappingURL=styles.css.map */