/* Roboto font */
       @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

       /* Vars */

       :root {
        --primaryColor: #001CA7;
        --blueColor: #4861DD;
        --lightBlue: #aab8ff;
        --blackColor: #000000;
         --grayColor: #C8C8C8;
         --textColor: #030303;
         --whitecolor: #fff;
         --paddingWrap: calc((100% - 1200px)/ 2);
         --fontRoboto: 'Roboto', sans-serif;
         --fontArial: 'Arial', sans-serif;
         --fontSizeDefault: 10px;
       }

       /* Util */

       html {
         font-size: var(--fontSizeDefault);
       }

       body {
         font-family: var(--fontRoboto);
         font-size: 1.7rem;
         line-height: 100%;
       }

        main#app {
            background-image: url(https://cdn-3.expansion.mx/8c/b8/d98af3634d8f9436b66b80b3203e/bg.jpg);
            background-size: cover;
        }

       .color__yellow {
         color: var(--primaryColor);
       }

       .color__white {
         color: var(--primaryColor);
       }

       .img-fluid {
         display: block;
         height: auto;
         width: 100%;
       }

       .row {
         margin: 0;
         justify-content: center;
       }

       .align-items-center {
         align-items: center !important;
       }

       .d-none {
         display: none !important;
       }

       .d-block {
         display: block !important;
       }

       .d-flex {
         display: flex !important;
       }

       .row {
         --bs-gutter-x: 1.5rem;
         --bs-gutter-y: 0;
         display: flex;
         flex-wrap: wrap;
         margin-top: 5px;
         margin-left: 15px;
         margin-right: 15px;
       }

       .row>* {
         flex-shrink: 0;
         max-width: 100%;
         padding-right: calc(var(--bs-gutter-x) * .5);
         padding-left: calc(var(--bs-gutter-x) * .5);
         margin-top: var(--bs-gutter-y);
       }

       .col-6 {
         flex: 0 0 auto;
         width: 50%;
       }

       .col-12 {
         flex: 0 0 auto;
         width: 100%;
       }

       .col-4 {
         flex: 0 0 auto;
         width: 33.3333%;
       }

       .diamante {
         display: none;
       }

       @media (min-width: 768px) {
         .col-md-3 {
           flex: 0 0 auto;
           width: 25%;
         }

         .col-md-4 {
           flex: 0 0 auto;
           width: 33.33333333%;
         }

         .col-md-6 {
           flex: 0 0 auto;
           width: 50%;
         }

         .d-md-block {
           display: block !important;
         }

         .d-md-none {
           display: none !important;
         }

         .diamante {
           display: block;
         }
       }

      @media (max-width: 767px) {
       .categories__title h2{
          font-size: 50px !important;
         }
        }

       body.has-navbar-fixed-top,
       html.has-navbar-fixed-top {
         padding-top: 0;
       }

       .diamante {
         position: absolute;
       }

       .diamante-1 {
         top: -10%;
         left: -50px;
       }

       .diamante-3 {
         top: 0;
         right: -50px;
       }

       /* Header */

    

       .header {
         background-color: var(--primaryColor);
         padding-left: var(--paddingWrap);
         padding-right: var(--paddingWrap);
         padding-top: 22px;
         padding-bottom: 22px;
         position: fixed;
         top: 0;
         width: 100%;
         z-index: 9;
       }

       .header__images {
         margin: 0;
       }

       .header__logo,
       .header-logo {
         margin-bottom: 0;
         max-width: 185px;
         position: relative;
         padding-left: 10px;
         width: 220px;
       }

       .header__logo .glitch__layer:nth-child(1),
       .header__logo .glitch__layer:nth-child(2) {
         position: absolute;
         background-image: url('https://cdn-3.expansion.mx/d9/43/975d225b4fbab79cc68de0acef32/logo.svg');
         background-repeat: no-repeat;
         background-position: top;
         background-repeat: no-repeat;
         background-size: 100%;
       }

       .header__date {
         display: none;
         max-width: 75px;
         margin-left: auto;
       }

       .header__date .img-fluid {
         display: block;
         margin-left: auto;
       }

       .header .navigation__list {
         display: block;
         padding: 0;
         align-items: center;
         justify-content: end;
         list-style-type: none;
         margin-left: auto;
         max-width: 100%;
         padding: 0 15px;
       }

       .header .navigation__item {
         padding: 2.4vh 12px;
         text-align: center;
         width: 100%;
       }

       .header .navigation a {
         font-size: 2.4rem;
         font-weight: 700;
         text-decoration: none;
         text-transform: uppercase;
         white-space: nowrap;
         color: var(--whitecolor);
       }

       .header .navigation a:hover {
         color: var(--lightBlue);
       }

       .header .header__navigation {
         height: 0vh;
         transition: all 355ms ease-in-out;
         overflow: hidden;
         width: 100%;
       }

       .hamburguer {
         width: 30px;
         height: 20px;
         display: block;
         position: relative;
         background: none;
         margin: 0 0 10px 0;
         position: absolute;
         right: 20px;
         top: 33px;
       }

       .hamburguer:after,
       .hamburguer:before,
       .hamburguer span,
       .hamburguer label {
         content: " ";
         display: block;
         width: 100%;
         height: 4px;
         background: var(--whitecolor);
         border-radius: 2px;
         left: 0;
         position: absolute;
         transition: all 355ms ease-in-out;
       }

       .hamburguer:before {
         top: 0;
       }

       .hamburguer:after {
         bottom: 0;
       }

       .hamburguer:focus {
         outline: none;
       }

       .hamburguer label {
         width: 100%;
         height: 100%;
         background: none;
         cursor: pointer;
         z-index: 1000;
       }

       .hamburguer span {
         top: 8px;
       }

       #change-hamburguer {
         display: none;
       }

       #change-hamburguer:checked~.hamburguer:before,
       #change-hamburguer:checked~.hamburguer:after {
         top: 10px;
         margin-top: -10%;
       }

       #change-hamburguer:checked~.hamburguer:before {
         transform: rotate(-45deg);
       }

       #change-hamburguer:checked~.hamburguer:after {
         transform: rotate(45deg);
       }

       #change-hamburguer:checked~.hamburguer span {
         opacity: 0;
       }

       #change-hamburguer:checked~.navigation {
         height: calc(100vh - 85px);
         background-color: var(--colorGreen);
         top: 15px;
         position: relative;
       }

       .navigation {
         position: relative;
       }

       .header .navigation__list li:nth-child(1) {
         padding-right: 50px;
       }

       .header .navigation__list li:nth-last-child(1) a {
         color: var(--lightBlue);
       }

       .navigation li:nth-last-child(1):after,
       .navigation li:nth-child(2):after,
       .navigation li:nth-child(1):after {
         display: none;
       }

       .header .navigation__list li:nth-child(1) {
         display: none;
       }

       @media screen and (min-width: 1023px) {
         .hamburguer {
           display: none;
         }

         .header {
           padding-bottom: 18px;
           padding-top: 18px;
         }

         .header__date {
           display: block;
         }

         .header .header__navigation {
           height: auto;
           margin-left: auto;
         }

         .header .navigation__list {
           display: flex;
           margin: 0 auto;
           padding: 0;
         }

         .header .navigation__list li:nth-child(1) {
           display: list-item;
         }

         .header__logo {
           max-width: 215px;
         }

         .header .navigation a {
           color: var(--whitecolor);
           display: block;
           font-size: 1.6rem;
           text-transform: uppercase;
         }

         .header .navigation__item {
           padding: 0 15px;
           text-align: center;
           position: relative;
         }

         .header .navigation__list li:nth-last-child(1) a {
           color: var(--lightBlue);
           font-size: 1.5rem;
         }

         .navigation li::after {
           content: '';
           background-color: var(--textColor);
           position: absolute;
           left: 0;
           top: -5px;
           right: 0;
           bottom: 0;
           transform: skewy(0);
           transform-origin: 50% 0;
           outline: 1px solid transparent;
           backface-visibility: hidden;
           height: 30px;
           width: 3px;
         }

         .header-logo {
           display: none;
         }
       }

       /* Content */
       .content:not(last-child) {
         padding-left: var(--paddingWrap);
         padding-right: var(--paddingWrap);
         padding-top: 10vh;
         padding-bottom: 15vh;
         margin: 85px 0 0 !important;
         overflow: hidden;
        }

       .card {
         background-color: transparent;
         box-shadow: none;
       }

       .card-content {
         text-align: center;
       }

       .content h3 {
         color: var(--whitecolor);
         font-size: 14px;
         margin-bottom: 0;
         text-transform: uppercase;
         font-weight: 400;
       }

       .content h4 {
         font-size: 14px;
       }

       .content h4 a {
         color: var(--blueColor);
       }

       .container.section {
         flex: 0 0 auto;
         width: 66.66666667%
       }

       .categories__category {
         display: block;
         margin: 0;
       }

       .categories__category-item.voted {
         color: var(--grayColor);
       }

       .categories__category-item {
         font-size: 22px;
         color: var(--whitecolor);
         border-bottom: 1px solid var(--textColor);
         cursor: pointer;
         line-height: normal;
         padding: 12px 0;
         font-weight: 700; 
       }

       .categories__category-item.active {
         color: var(--blueColor);
       }

       .categories__category-item span {
         color: var(--blueColor);
         font-size: 28px;
         font-weight: 400;
         padding-right: 20px;
       }

       .categories__title h2 {
        font-size: 90px;
        font-weight: 700;
        color: var(--whitecolor);
        margin-bottom: 20px;
        margin-top: 20px;
        text-align: center;
        text-transform: uppercase;
       }

       .categories__description {
         color: var(--whitecolor);
         text-align: center;
         max-width: 600px;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 60px;
       }

       .categories__name {
         display: none;
       }

       .row-pics {
         max-width: 700px;
         margin: 0 auto;
       }

       .nominado {
         margin-bottom: 40px;
         width: 33.33%;
         padding: 0;
         text-align: center;
       }

       .content figure {
         margin: 0;
       }

       .nominado-wrapper {
         margin-top: 20px;
       }

       .nominado-picture {
         max-width: 180px;
         margin: 0 auto;
       }

       .nominado-picture img {
         max-width: 100%;
         width: auto;
       }

       .voted.nominado {
         max-width: 420px;
         width: 100%;
       }

       .voted .nominado-picture {
         max-width: 100%;
       }

       .voted .nominado-picture img {
         border: 5px solid var(--lightBlue);
         padding: 5px;
         border-radius: 100%;
       }

       .nominado:nth-child(odd) {
         z-index: 2;
       }

       .nominado:nth-child(even) {
         z-index: 1;
       }

       .btn__votar {
         color: var(--whitecolor);
         cursor: pointer;
         background-color: var(--blackColor);
         border-radius: 50px;
         box-shadow: none;
         border: none;
         font-size: 20px;
         font-weight: 700;
         padding: 15px 10px;
         max-width: 180px;
         width: 100%;
       }

       .btn__votar:hover {
        background-color: var(--blueColor);
       }

       .btn__session {
         display: block;
         margin: 0 auto 20px;
       }

       .categories__desc {
         color: var(--whitecolor);
         font-weight: 700;
         margin-bottom: 20px;
         text-align: center;
       }

       .categories__desc.login{
        background: #00000040;
        padding: 40px 0 10px;
       }

       .voted__message {
         color: var(--whitecolor);
         font-size: 24px;
         font-weight: 700;
         text-align: center;
       }

       .categories-select {
         display: none;
       }

       .categories-select select {
         width: 100%;
         padding: .375rem .75rem;
         font-size: 1rem;
         font-weight: 400;
         line-height: 1.5;
         color: var(--primaryColor);
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         background-color: var(--bs-body-bg);
         background-clip: padding-box;
         border: var(--bs-border-width) solid var(--bs-border-color);
         border-radius: var(--bs-border-radius);
         transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
         background-color: var(--lightBlue);
         font-size: 26px;
         font-weight: 700;
         text-align: center;
       }

       @media(max-width: 1024px) {

         .content:not(last-child) {
           padding-bottom: 5vh;
         }

         .content .flex-direction-column {
           flex-direction: column;
         }

         .categories-select {
           display: block;
           text-align: center;
           max-width: 370px;
           margin: 0 auto;
         }

         .categories-list {
           display: none;
           position: relative;
         }

         .container.section {
           width: 100%;
         }

         .nominado {
           width: 50%;
           padding: 0 5px;
         }
       }

       /* Sponsors */

       .sponsors {
         background-image: url(https://cdn-3.expansion.mx/51/11/a7bd75634349a751e57aa169f295/fondo-d-premia4-3.jpg);
         background-size: cover;
         padding-left: var(--paddingWrap);
         padding-right: var(--paddingWrap);
         padding-top: 100px;
         padding-bottom: 100px;
         color: var(--whitecolor);
         font-size: 20px;
         text-align: center;
       }

       .sponsors p {
         margin-bottom: 40px;
       }

       .sponsors__logo {
         max-width: 800px;
         margin: 0 auto;
         padding: 0 15px;
       }

       /* Footer */

       .star {
         position: absolute;
       }

       footer {
         background: url(https://cdn-3.expansion.mx/51/11/a7bd75634349a751e57aa169f295/fondo-d-premia4-3.jpg);
         background-size: cover;
         padding: 40px 0;
         position: relative;
         overflow: hidden;
       }

       footer .wrapper {
         padding-left: var(--paddingWrap);
         padding-right: var(--paddingWrap);
         display: flex;
         flex-direction: row;
          justify-content: space-between;
       }

       footer .footer-logo {
          display: flex;
          max-width: 200px;
       }

       footer .redes {
          display: flex;
          align-items: center;
       }

       footer .redes a {
         color: var(--whitecolor);
         font-size: 24px;
         font-weight: 800;
         padding: 5px;
       }

       footer .footer-1 {
         bottom: 10px;
         max-width: 180px;
         left: 0;
       }

       footer .footer-2 {
         max-width: 280px;
         left: 30%;
         bottom: 0px;
         transform: rotate(180deg);
       }

       footer .footer-3 {
         max-width: 280px;
         bottom: -50px;
         right: 0;
       }

       @media screen and (max-width: 580px) {
         footer {
           padding: 50px 0;
         }

         footer .star {
           display: none;
         }
       }

       /* Login */
       .header .header__logo {
         max-width: 100%;
         height: auto;
         display: block;
       }

       /* Thanks Message */

       .cateories__message {
         font-family: var(--fontRoboto);
         text-align: center;
         line-height: normal;
         margin-bottom: 20px;
       }

       .thanks__text {
         color: var(--primaryColor);
         font-size: 40px;
         font-weight: 900;
         margin-bottom: 0 !important;
       }

       .thanks__message {
         color: var(--whitecolor);
         font-size: 32px;
         font-weight: 900;
         margin-bottom: 0 !important;
       }

       .thanks__result {
         color: var(--whitecolor);
         font-size: 20px;
         font-weight: 700;
       }