/* estilo principales */

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: 'Roboto-light';
    src: url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: 'Barlow-Light';
    src: url('../fonts/Barlow/Barlow-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@keyframes fadeInAnimation {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
  
html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        font-family: 'Roboto', sans-serif;
        color: var(--color-font);
        background-color: var(--color-secondary);
        animation: fadeInAnimation ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
}

.theme-light {
    --color-primary: #5e0829;
    --color-secondary: #fcfcfc;
    --color-light: #eeeeee;
    --color-hover-gray:#b1b1b18f;
    --color-hover-color:#B53458;
    --color-active:  #8d1d48;
    --color-accent:  #800a37;
    --color-sidebar: #f3f6fc;
    --color-font:  #292a2b;
    --color-font-active: #ececec;
    --color-font-hover: var(var(--color-font-active));
    --color-icon: #292a2b;
    --color-transparent: var(--color-transparent);

    --color-filter-icon: invert(9%) sepia(1%) saturate(3634%) hue-rotate(218deg) brightness(95%) contrast(82%);

    --icon-size: 1.3rem;
    --topbar-icon-size: 1.3rem;
    --menu-text-size: 0.8rem;

    --background-color-light:  var(--color-light);

}


main {
    display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    height: -webkit-fill-available;
    max-height: 100vh;
    overflow-x: auto;
    overflow-y: auto;
  }

 
.container-fluid {
    display: flexbox;
    width: 100%;
    height: 100%;
    background: var(--color-secondary);
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
    padding: 0%;
}

.progress {
  animation: progressBar 1s ease-in-out;
  animation-fill-mode:both; 
}

.fadeIn{
  animation: fadeInAnimation ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@media screen and (max-width: 567px) {

}

@media screen and (min-width: 568px) {

}

/*@media (orientation: landscape) {
  body {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}*/