@font-face {
           font-family: 'Gotham_Black';
           src: url('/fonts/Gotham-Black.otf') format('opentype');
           /* url('fonts/fonnts.com-Korolev_Compressed_Medium.ttf') format('truetype'); */
           font-weight: normal;
           font-style: normal;
       }

       @font-face {
           font-family: 'Gotham_Book';
           src: url('/fonts/Gotham-Book.otf') format('opentype');
           /* url('fonts/fonnts.com-Korolev_Compressed_Bold.ttf') format('truetype'); */
           font-weight: normal;
           font-style: normal;
       }

       @font-face {
           font-family: 'Gotham_Medium';
           src: url('/fonts/Gotham-Medium.otf') format('opentype');
           /* url('fonts/fonnts.com-Korolev_Compressed_Bold.ttf') format('truetype'); */
           font-weight: normal;
           font-style: normal;
       }


       body {
           font-family: 'Gotham_Book', sans-serif;
           /* font-family: 'Public Sans', sans-serif; */
           display: flex;
           flex-direction: column;
       }

       .nav-container {
           background: black;
       }

       .nav-link {
           color: white !important;
           /* font-weight: 600; */
           text-align: center;
           display: block;
           padding: 0.3rem 0;
           font-size: 1.3vw;
           background: black;
       }

       .nav-link.active {
           background-color: #404040;
           color: white !important;
           border-radius: 3px;
       }

       .detalle-estatal {
           font-size: 1.16vw;
           text-align: justify;
       }

       .logo {
           height: 5.9vw;
       }

       .titulo {
           font-size: 2.2vw;
           margin-top: 14px !important;
           font-family: 'Gotham_Medium', sans-serif;
       }

       /* regiones culturales */
       .detalle-region {
           font-size: 1.02vw;
           text-align: justify;
       }

       @media (max-width: 768px) {
           .logo {

               height: 57px;
               width: 342px;
               margin-top: 10px !important;
           }

           .titulo {
               font-size: x-large;
               margin-left: 10px !important;
           }

           .nav-link {
               color: white !important;
               text-align: center;
               display: block;
               padding: 0.5rem 0;
               font-size: 20px;
           }

           /* regiones culturales */
           .detalle-region {
               font-size: 13px;
               text-align: justify;
           }
           .detalle-estatal {
               font-size: 14px;
               text-align: justify;
           }
           .nombres-region img {
               width: auto
           }
       }