/* ================================================================== */
/*  Mixins  */
/* ================================================================== */
/* ================================================================== */
/*  Fonts  */
/* ================================================================== */
@font-face {
  font-family: "BaiJamjuree-Bold";
  src: url("../fonts/BaiJamjuree-Bold.ttf");
  font-display: swap;
  font-weight: 700;
}
@font-face {
  font-family: "FiraSansExtraCondensed-Regular";
  src: url("../fonts/FiraSansExtraCondensed-Regular.ttf");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "FiraSansExtraCondensed-SemiBold";
  src: url("../fonts/FiraSansExtraCondensed-SemiBold.ttf");
  font-display: swap;
  font-weight: 600;
}
@font-face {
  font-family: "FiraSansExtraCondensed-Light";
  src: url("../fonts/FiraSansExtraCondensed-Light.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Product";
  src: url("../fonts/ProductSans-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("../fonts/FuturaMediumBT.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Sans";
  src: url("../fonts/AlrightSans-Regular-v3.otf");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Sans";
  src: url("../fonts/AlrightSans-Black.otf");
  font-display: swap;
  font-weight: 800;
}
@font-face {
  font-family: "Sans";
  src: url("../fonts/AlrightSans-Bold.otf");
  font-display: swap;
  font-weight: 600;
}
@font-face {
  font-family: "Sans";
  src: url("../fonts/AlrightSans-Medium.otf");
  font-display: swap;
  font-weight: 200;
}
@font-face {
  font-family: "Sans";
  src: url("../fonts/AlrightSans-Light.otf");
  font-display: swap;
  font-weight: 100;
}
/* ================================================================== */
/*  Variables  */
/* ================================================================== */
:root {
  --sqr: 100px;
}
@media (max-width: 1600px) {
  :root {
    --sqr: 75px;
  }
}
@media (max-width: 1280px) {
  :root {
    --sqr: 50px;
  }
}
@media (max-width: 992px) {
  :root {
    --sqr: 30px;
  }
}
@media (max-width: 768px) {
  :root {
    --sqr: 20px;
  }
}
@media (max-width: 480px) {
  :root {
    --sqr: 10px;
  }
}

/* ================================================================== */
/*  HOME  */
/* ================================================================== */
.grid-cubes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: calc((100vw - 100px) / 3 / 1.6);
  grid-gap: 10px;
  grid-auto-flow: row;
  grid-auto-rows: calc((100vw - 100px) / 3 / 1.6);
  padding: 30px 50px;
}
@media (max-width: 1024px) {
  .grid-cubes {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc((100vw - 100px) / 2 / 1.3);
    grid-gap: 5px;
    grid-auto-rows: calc((100vw - 100px) / 2 / 1.3);
    padding: 20px;
  }
}
@media (max-width: 992px) {
  .grid-cubes {
    padding: 10px;
  }
}
@media (max-width: 768px) {
  .grid-cubes {
    padding: 5px;
  }
}
@media (max-width: 640px) {
  .grid-cubes {
    padding: 0px;
  }
}
@media (max-width: 426px) {
  .grid-cubes {
    grid-template-columns: 1fr;
    grid-template-rows: calc((100vw - 100px) / 1 / 1.0);
    grid-auto-rows: calc((100vw - 100px) / 1 / 1.0);
    padding: 5px;
  }
}
.grid-cubes .cube {
  background-size: cover;
  background-position: center top;
  position: relative;
}
.grid-cubes .cube:first-child {
  grid-column: 1;
  grid-row: 1/3;
}
.grid-cubes .cube .overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
  background-color: #b9c2c1;
  opacity: 0.9;
  color: #000;
  font-weight: 600;
  padding: 10px;
  line-height: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  height: 50px;
  width: 100%;
}
.grid-cubes .cube:hover .overlay {
  height: 100%;
  opacity: 0.6;
}

/* ================================================================== */
/*  HOME PATROCINADORES  */
/* ================================================================== */
#patrocinadores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#patrocinadores .title {
  display: inline-block;
  text-align: center;
  width: 30%;
}
#patrocinadores .title h1 {
  font-size: 36px;
}
@media (max-width: 1024px) {
  #patrocinadores .title {
    width: 100%;
    margin: 50px 0;
  }
}
#patrocinadores #patrocinios {
  display: inline-block;
  width: 69.5%;
}
#patrocinadores #patrocinios .patrocinios-slide {
  display: flex;
  min-height: 200px;
  justify-content: center;
  align-items: center;
}
#patrocinadores #patrocinios img {
  max-width: 90%;
  width: auto;
  max-height: 60px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  #patrocinadores #patrocinios {
    width: 100%;
  }
}

/* ================================================================== */
/*  HOME CARTELES  */
/* ================================================================== */
#carteles {
  background-color: #e1e1e1;
}

/* ================================================================== */
/*  HOME PRESENTADORES  */
/* ================================================================== */
#presentadores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#presentadores .title {
  display: inline-block;
  text-align: center;
  width: 30%;
}
#presentadores .title h1 {
  font-size: 36px;
}
@media (max-width: 1024px) {
  #presentadores .title {
    width: 100%;
    margin: 50px 0;
  }
}
#presentadores #presenta {
  display: inline-block;
  width: 69.5%;
}
#presentadores #presenta div.presenta-slide {
  display: flex;
  min-height: 200px;
  justify-content: center;
  align-items: center;
}
#presentadores #presenta img {
  max-width: 100%;
  width: 65%;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  #presentadores #presenta {
    width: 100%;
  }
}

/* ================================================================== */
/*  HOME SOCIAL  */
/* ================================================================== */
#social {
  margin-bottom: 0;
  padding-top: 25px;
  padding-bottom: 25px;
  width: 100%;
  margin: 0;
}
#social div {
  text-align: center;
}
#social h1 {
  //text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#social a {
  margin: 0 10px;
  color: #000;
}
#social a:hover i {
  color: #575756;
}
#social i {
  font-size: 1.5em;
  color: #fff;
}
#social i:hover {
  color: #fff;
}
@media (max-width: 770px) {
  #social .column {
    margin: 10px 0 !important;
  }
}

/*# sourceMappingURL=home.min.css.map */