@charset "UTF-8";
/* -------- CSS ----------*/
/*======================================================*/
/*--------------------------------------------------------

Usually, the font size in HTML is 16px or 1rem by default ( 16px = 1rem ).  
Here in HTML, I have given Font Size 10px by default and here I have used REM as a Unit.  
10px = 1rem.  
*/

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/************************ NAvbar ************************/
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background: white;
  padding: 0.5rem 8rem 0.5rem 4rem; }
  .navbar > .container, .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between; }
  .navbar .navbar-nav {
    margin-left: auto; }
  .navbar .dropdown-menu {
    z-index: 1000;
    min-width: 10rem;
    padding: 0.5rem 0;
    font-size: 1rem;
    color: #FFF;
    background-color: #04babc;
    border: 0;
    border-radius: 0; }
    .navbar .dropdown-menu .dropdown-item {
      font-weight: 600;
      font-size: 16px;
      color: #FFF; }
      .navbar .dropdown-menu .dropdown-item:hover {
        color: #001e61;
        background-color: #04babc; }
  .navbar .nav-link {
    color: #001e61;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px; }
  .navbar .dropdown-toggle::after,
  .navbar .has-dropdown-icon::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f078";
    margin: 0;
    border: 0;
    vertical-align: 0;
    margin-left: 5px; }
  @media (max-width: 768px) {
    .navbar .nav-search {
      display: none}
    .nav-item {
      order: 2;
    }}
  .navbar .nav-search .input-group, .search-categories .input-group {
    border: 1.9px solid #00BABC;
    box-sizing: border-box;
    border-radius: 6px;
    margin-left: 10px;
    margin-top: 2px; }
    .navbar .nav-search .input-group .input-group-prepend .input-group-text,
    .search-categories .input-group .input-group-prepend .input-group-text{
      background-color: #ffffff;
      border: 0;
      padding: 7px 7px; }
      .navbar .nav-search .input-group .input-group-prepend .input-group-text i,
      .search-categories .input-group .input-group-prepend .input-group-text i {
        color: #00BABC;
        font-size: 14px;
        font-weight: 600; }
    .navbar .nav-search .input-group #search-input,
    .search-categories .input-group .search-input{
      color: #495057;
      border: 0;
      font-size: 14px; }

.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap; }

.nav-btn {
  background-color: #01babc;
  color: #FFF !important;
  font-weight: 600;
  border-radius: 10px; }

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none; }
  .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0; }
  .navbar-nav .dropdown-menu {
    position: static; }

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center; }

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out; }
  .navbar-toggler:hover {
    text-decoration: none; }
  .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    border-color: transparent;
    box-shadow: none; }

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%; }

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto; }

.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start; }
  .navbar-expand .navbar-nav {
    flex-direction: row; }
    .navbar-expand .navbar-nav .dropdown-menu {
      position: absolute; }
    .navbar-expand .navbar-nav .nav-link {
      padding-right: 0.5rem;
      padding-left: 0.5rem; }
  .navbar-expand .navbar-nav-scroll {
    overflow: visible; }
  .navbar-expand .navbar-collapse {
    display: flex !important;
    flex-basis: auto; }
  .navbar-expand .navbar-toggler {
    display: none; }

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9); }
  .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
    color: rgba(0, 0, 0, 0.9); }

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.55); }
  .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0, 0, 0, 0.7); }
  .navbar-light .navbar-nav .nav-link.disabled {
    color: rgba(0, 0, 0, 0.3); }

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9); }

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.1); }

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.55); }
  .navbar-light .navbar-text a {
    color: rgba(0, 0, 0, 0.9); }
    .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
      color: rgba(0, 0, 0, 0.9); }

.navbar-dark .navbar-brand {
  color: #fff; }
  .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
    color: #fff; }

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.55); }
  .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.75); }
  .navbar-dark .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.25); }

.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link.active {
  color: #fff; }

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.1); }

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.55); }
  .navbar-dark .navbar-text a {
    color: #fff; }
    .navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
      color: #fff; }

.nav-link:focus, .nav-link:hover {
    color: #001e61 !important;
}



/************************ Header ************************/
header {
     width: 100%;
     background: var(--secondary-color);
}
 @media (max-width: 768px) {
     header {
        padding: 0.94rem 1rem;
   }
   #brand-header {
     padding: 0.5rem 0;
   } 
}
 header .navbar-toggler {
     padding: 4px 11px;
     font-size: 23px;
     line-height: 1;
     background-color: transparent;
     border: 0;
     border-radius: 5px;
     transition: box-shadow .15s ease-in-out;
     border: 0 !important;
     margin-right: 2rem;
}
 header .navbar-toggler .navbar-toggler-icon {
     width: auto;
     height: auto;
}
 header .navbar-toggler .navbar-toggler-icon i {
     color: #00BABC;
     font-size: 25px;
}
 @media (max-width: 768px) {
     header .tecmilenio-logo {
         display: none;
    }
}
 @media (max-width: 768px) {
     header .navbar {
         padding: 0 1rem;
         justify-content: flex-start;
    }
}
 @media (max-width: 768px) {
     header .navbar .navbar-brand {
         padding-top: 0;
    }
}
 @media (max-width: 768px) {
     header .logo--tecmilenio {
         height: 52px !important;
         width: auto;
    }
}
 @media (max-width: 768px) {
     header .logo--cdc {
         height: 38px;
         width: auto;
    }
  .logo a .logo-img {
     max-width: 150px;
  }
}

/******* LUPA y Caja buscador *******/
 header a.search-btn {
     border: 1.4px solid #00babc;
     background-color: #00babc;
     color: #fff;
     font-size: 18px;
     width: 36px;
     height: 36px;
     margin-left: auto;
     margin-right: 16px;
     border-radius: 6px;
     min-width: 0;
}

#brand-header .btn.search-btn {
     display: none;
     margin-right: 1rem;
}

@media (max-width: 768px) {
     #brand-header .btn.search-btn {
         display: inline-flex;
    }
}
   

a.close-btn {
     /*font-size: 20px;
     display: none;
     margin-left: auto;
     min-width: 0;
     position: fixed;
     top: 6vh;
     right: 0;
     z-index: 9999;*/
     position: absolute;
     top: 0;
     right: 0.5rem;
     z-index: 9999;
     text-align: right;
}




/******************* Searcher*******************/

 .header-search-wrapper {
     position: relative;
}
 .header-search-wrapper .search-form-main {
     -webkit-transform: scale(0);
     -ms-transform: scale(0);
     transform: scale(0);
     background: var(--secondary-color);
     -webkit-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15);
     box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15);
     border-top: 3px solid #00BABC;
     padding: 20px;
     padding: 20px;
     position: absolute;
     right: 0;
     top: 198%;
     width: 350px;
     z-index: 9999;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     visibility: hidden;
     -webkit-transition: all .4s ease-in;
     -o-transition: all .4s ease-in;
     transition: all .4s ease-in;
}
 .header-search-wrapper .search-form-main:after {
     content: "";
     display: block;
     clear: both;
}
 .header-search-wrapper .search-form-main:before {
     border-left: 10px solid transparent;
     border-left: 1rem solid transparent;
     border-right: 10px solid transparent;
     border-right: 1rem solid transparent;
     border-bottom: 10px solid var(--primary-color);
     border-bottom: 1rem solid #00BABC;
     content: "";
     position: absolute;
     right: 15px;
     right: 1.5rem;
     top: -10px;
     top: -1rem;
}
 .header-search-wrapper .search-form-main .search-field {
     border-radius: 0;
     padding: 0px 10px;
     width: 85%;
     height: 40px;
     height: 4rem;
     float: left;
     display: block;
     border: 2px solid var(--primary-color);
     border: 0.2rem solid var(--primary-color);
     font-size: 16px;
     font-size: 1.6rem;
}
 .header-search-wrapper .search-form-main .search-submit {
     cursor: pointer;
     width: 15%;
     font-size: 16px;
     font-size: 1.6rem;
     height: 40px;
     height: 4rem;
     background: var(--primary-color);
     color: #00BABC;
     float: right;
     border: 2px solid var(--primary-color);
     border: 0.2rem solid var(--primary-color);
}
 .search-main > i {
     font-size: 20px;
     font-size: 2rem;
     cursor: pointer;
     vertical-align: middle;
     color: #00BABC;
}
 .search-main span {
     font-size: 20px;
     font-size: 2rem;
     cursor: pointer;
     vertical-align: middle;
     color: #00BABC;
     display: none;
}
 .search-main img {
     width: 25px;
     width: 22px;
     vertical-align: middle;
     margin-bottom: 10px;
}
 .search-form-main.active-search {
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     transform: scale(1);
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     -webkit-transition: all .4s ease-in;
     -o-transition: all .4s ease-in;
     transition: all .4s ease-in;
}
 .sticky-menu {
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     background: #ffffff;
     border-bottom: 3px solid #00BABC;
     z-index: 999;
}
 .sticky-menu.transition-3 {
     top: 50px;
}
 @media screen and (max-width: 768px) {
     .sticky-menu.transition-3 {
         top: 0;
    }
}
 .sticky-menu .main-menu li a {
     color: var(--sub-color);
}
 .sticky-menu .main-menu li a:hover {
     color: #00BABC;
}
 .sticky-menu .main-menu .search-main i {
     color: #00BABC;
     vertical-align: middle;
}

/***************** MEGAMENU CURSOS **************/
 .body-overlay {
     position: fixed;
     width: 100%;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 998;
}

 .search-categories {
     position: fixed;
     background: #FFF;
     width: 100%;
     top: 118px;
     z-index: 999;
     padding: 1rem 0 3rem;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
 .search-categories .search-field-container {
     display: none;
}
 @media (max-width: 768px) {
     a.close-search {
         /*display: none; */
         z-index: 9999;
    }
     .search-categories {
         top: 70px;
         padding: 0 1.5rem;
    }
     .search-categories .search-field-container {
         display: inline-block;
         padding: 1rem 0 3rem;
    }
}
 .search-categories h4 {
     font-family: 'Poppins';
     font-weight: 400;
     font-size: 16px;
     margin-bottom: 10px;
}
 .search-categories ul.categories-list li {
     display: inline-block;
     margin-right: 3px;
     margin-bottom: 8px;
     list-style: none;
}
 .search-categories ul.categories-list li a {
     font-family: 'Poppins';
     font-weight: 400;
     font-size: 14px;
     line-height: 21px;
     color: #1E243A;
     padding: 8px 12px;
     border: 1px solid #1E243A;
     border-radius: 40px;
     display: inline-block;
     text-decoration: none;
}
 .cursos-megamenu {
     position: fixed;
     background: #FFF;
     width: 90%;
     top: 147px;
     z-index: 1031;
     height: 85%;
     margin-left: 5%;
}
 .cursos-megamenu li a.selected {
     background-color: #38809F;
     color: #FFF!important;
}
 .cursos-megamenu .inner-section {
     background-color: #f1f1f1;
     padding: 3rem;
     position: relative;
     border-bottom: 10px solid #13a9b4;
     border-right: 1px solid #ADADAD;
}
 .cursos-megamenu .inner-section:last-child {
     border-right: 0;
}
 .cursos-megamenu .inner-section h4 {
     font-weight: 600;
     font-size: 18px;
     margin-bottom: 10px;
}
 .cursos-megamenu .inner-section.bg-dark-gray {
     background-color: #e5e5e5;
}
 .cursos-megamenu .inner-section ul.cursos-list {
     padding: 0;
}
 .cursos-megamenu .inner-section ul.cursos-list li {
     display: block;
}
 .cursos-megamenu .inner-section ul.cursos-list li a {
     display: block;
     padding: 9px 5px;
     font-family: 'Poppins';
     font-weight: 400;
     font-size: 14px;
     line-height: 21px;
     color: #000000;
     border-radius: 4px;
     position: relative;
     padding: 8px 12px;
}
 .cursos-megamenu .inner-section ul.cursos-list li a:hover, .cursos-megamenu .inner-section ul.cursos-list li a.active {
     background-color: #38809F;
     color: #FFF;
}
 .cursos-megamenu .inner-section ul.cursos-list li a:hover::after, .cursos-megamenu .inner-section ul.cursos-list li a.active::after {
     font-family: "Font Awesome 5 Pro";
     content: "\f054";
     color: #FFF;
     position: absolute;
     right: 15px;
     font-weight: 600;
}
 .cursos-megamenu .inner-section .ver-todos-cursos {
     position: absolute;
     bottom: 0;
     right: 0;
}
#resultados-mobile .ver-todos-cursos{
  position: relative;
}

#ver-todos-explorer-mobile {
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-right: 0;
}
}

 .cursos-megamenu .inner-section .ver-todos-cursos a {
     font-size: 1.5rem;
     font-weight: 600;
     color: #000;
     margin-right: 1rem;
     margin-bottom: 1rem;
}
 .cursos-megamenu #resultados {
     max-height: 100%;
     overflow-y: auto;
}
 .cursos-megamenu #areas-mobile, .cursos-megamenu #resultados-mobile {
     display: none;
}
 @media (max-width: 768px) {
     .cursos-megamenu .inner-section ul.cursos-list li a {
         line-height: 16px;
    }
     .cursos-megamenu li a.selected{
         background-color: unset;
         color: #000!important;
    }
     .cursos-megamenu .megamenu-title{
         display: none;
    }
     .cursos-megamenu {
         top: 80px;
         margin-left: 0;
         width: 94%;
         height: 65%;
    }
     .cursos-megamenu row{
         position: relative;
    }
     .cursos-megamenu .inner-section{
         min-height: 310px;
         border-bottom: none;
         background-color: #FFF;
         padding: 1.5rem;
    }
     .cursos-megamenu .inner-section ul.cursos-list li {
         margin-bottom: 1rem;
         align-items: center;
    }
    /*.cursos-megamenu .cursos-list li::before {
         font-family: "Font Awesome 5 Free";
         content: "\f054";
         position: absolute;
         right: 15px;
         font-weight: 600;
    }
    */
     .cursos-megamenu #areas {
         display: none;
    }
    /*.cursos-megamenu #areas h4::before {
         font-family: "Font Awesome 5 Free";
         content: "\f053";
         position: absolute;
         right: 15px;
         font-weight: 600;
    }
    */
     .cursos-megamenu #resultados {
         display: none!important;
    }
     .cursos-megamenu #resultados h4::before {
         font-family: "Font Awesome 5 Pro";
         content: "\f053";
         position: absolute;
         right: 15px;
         font-weight: 600;
    }
     .cursos-megamenu #areas-mobile, .cursos-megamenu #resultados-mobile {
         display: block;
         overflow-y: auto;
         max-height: 80vh;
    }
}


/**** sub menu cursos 2 **********/
 .search-categories {
     position: fixed;
     background: #FFF;
     width: 100%;
     top: 118px;
     z-index: 999;
     padding: 1rem 0 3rem;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
 .search-categories .search-field-container {
     display: none;
}
 .search-categories h4 {
     font-family: 'Poppins';
     font-weight: 400;
     font-size: 16px;
     margin-bottom: 10px;
}
 .search-categories ul.categories-list li {
     display: inline-block;
     margin-right: 3px;
     margin-bottom: 8px;
}
 .search-categories ul.categories-list li a {
     font-family: 'Poppins';
     font-weight: 400;
     font-size: 14px;
     line-height: 21px;
     color: #1E243A;
     padding: 8px 12px;
     border: 1px solid #1E243A;
     border-radius: 40px;
}
 .cursos-megamenu {
     position: fixed;
     background: #FFF;
     width: 90%;
     top: 147px;
     z-index: 1031;
     height: 85%;
     margin-left: 5%;
}
 .cursos-megamenu li a.selected {
     background-color: #38809F;
     color: #FFF!important;
}
 .cursos-megamenu .inner-section {
     background-color: #f1f1f1;
     padding: 3rem;
     position: relative;
     border-bottom: 10px solid #13a9b4;
     border-right: 1px solid #ADADAD;
}
 .cursos-megamenu .inner-section:last-child {
     border-right: 0;
}
 .cursos-megamenu .inner-section h4 {
     font-weight: 600;
     font-size: 18px;
     margin-bottom: 10px;
}
 .cursos-megamenu .inner-section.bg-dark-gray {
     background-color: #e5e5e5;
}
 .cursos-megamenu .inner-section ul.cursos-list {
     padding: 0;
}
 .cursos-megamenu .inner-section ul.cursos-list li {
     display: block;
}
 .cursos-megamenu .inner-section ul.cursos-list li a {
     display: block;
     padding: 9px 5px;
     font-family: 'Poppins';
     font-weight: 400;
     font-size: 14px;
     line-height: 21px;
     color: #000000;
     border-radius: 4px;
     position: relative;
     padding: 8px 12px;
}
 .cursos-megamenu .inner-section ul.cursos-list li a:hover, .cursos-megamenu .inner-section ul.cursos-list li a.active {
     background-color: #38809F;
     color: #FFF;
}
 .cursos-megamenu .inner-section ul.cursos-list li a:hover::after, .cursos-megamenu .inner-section ul.cursos-list li a.active::after {
     font-family: "Font Awesome 5 Pro";
     content: "\f054";
     color: #FFF;
     position: absolute;
     right: 15px;
     font-weight: 600;
}
 .cursos-megamenu .inner-section .ver-todos-cursos {
     position: absolute;
     bottom: 0;
     right: 0;
}
 .cursos-megamenu .inner-section .ver-todos-cursos a {
     font-size: 1.5rem;
     font-weight: 600;
     color: #000;
     margin-right: 1rem;
     margin-bottom: 1rem;
}
 .cursos-megamenu #resultados {
     max-height: 100%;
     overflow-y: auto;
}
 .cursos-megamenu #areas-mobile, .cursos-megamenu #resultados-mobile {
     display: none;
}
 @media (max-width: 768px) {
     .cursos-megamenu .inner-section ul.cursos-list li a {
         line-height: 16px;
    }
     .cursos-megamenu li a.selected{
         background-color: unset;
         color: #000!important;
    }
     .cursos-megamenu .megamenu-title{
         display: none;
    }
     .cursos-megamenu {
         top: 80px;
         margin-left: 0;
         width: 94%;
         height: 65%;
    }
     .cursos-megamenu row{
         position: relative;
    }
     .cursos-megamenu .inner-section{
         min-height: 310px;
         border-bottom: none;
         background-color: #FFF;
         padding: 1.5rem;
    }
     .cursos-megamenu .inner-section ul.cursos-list li {
         margin-bottom: 0.5rem;
         align-items: center;
    }
    /*.cursos-megamenu .cursos-list li::before {
         font-family: "Font Awesome 5 Free";
         content: "\f054";
         position: absolute;
         right: 15px;
         font-weight: 600;
    }
    */
     .cursos-megamenu #areas {
         display: none;
    }
    /*.cursos-megamenu #areas h4::before {
         font-family: "Font Awesome 5 Free";
         content: "\f053";
         position: absolute;
         right: 15px;
         font-weight: 600;
    }
    */
     .cursos-megamenu #resultados {
         display: none!important;
    }
     .cursos-megamenu #resultados h4::before {
         font-family: "Font Awesome 5 Pro";
         content: "\f053";
         position: absolute;
         right: 15px;
         font-weight: 600;
    }
     .cursos-megamenu #areas-mobile, .cursos-megamenu #resultados-mobile {
         display: block;
    }
}


/**** MAIN HEADER ****/

 @media (max-width: 768px) {
     #main-header {
         display: block;
    }
}
 #main-header {
     z-index: 1000;
     border-bottom: unset;
}
 #main-header .top-bar {
     background: #f3f7f9;
     /*padding: 0.7rem 8rem 0.7rem 4rem; */
     padding: 0.4375rem 8rem 0.4375rem 4rem;
     justify-content: end;
}
 @media (max-width: 768px) {
     #main-header .top-bar {
         padding: 0.7rem 1rem;
    }
}
 #main-header .top-bar .navbar-top {
     display: flex !important;
     align-self: flex-end;
}
 #main-header .top-bar .navbar-top .topbar-nav {
     display: flex;
     flex-direction: column;
     padding-left: 0;
     margin-bottom: 0;
     list-style: none;
     flex-direction: row;
}

 #main-header .top-bar .navbar-top .topbar-nav li{
     display: inline-flex;
     list-style: none; /* venia de default*/
}
 #main-header .top-bar .navbar-top .topbar-nav li a.nav-btn {
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 700;
     font-size: 16px;
     line-height: 1;
     margin-left: 15px;
     padding: 5.4px 12px;
     text-align: center;
     color: #FFFFFF;
     border-radius: 6px;
}


/**** Shopping cart ****/

 header a.shopping-cart-btn {
     border: 1.4px solid #1E243A;
     width: 36px;
     height: 36px;
     display: inline-flex;
     align-items: center;
     border-radius: 6px;
     min-width: 0;
}
 header a.shopping-cart-btn img {
     height: auto;
}

.btn.shopping-cart-btn .badge {
     background-color: #01babc;
     border-radius: 50%;
     top: -12px;
     font-size: 14px;
     font-weight: 700;
     padding: 0.35em 0.55em;
}

/***** menu user logged *****/
#menu-user {
    font-family: Poppins, sans-serif;
    color: #1e243a;
    font-size: 14px;
    font-weight: 700;
    margin-left: 1rem;
}