:root {
    --primary: #012B44;
    --accent: #FFD800;
    --gray: #646464;
    --white: #ffffff;
    --black: #000000;
    --gray-light: #F8F6F6;
    --red: #A5211E;
    --ht-secondary: #839BC2;   /* renombrado: evita colisión con --accent-secondary de Vivento */
    --tag: #F7B565;
    --blue-medium: #1B335C;
}

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

@font-face {
    font-family: 'Raleway-Bold';
    src: url(../font/Raleway-Bold.ttf);
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'Theatrical';
    src: url(../font/Theatrical.ttf);
    font-weight: normal;
    font-style: normal;
}

.main {
    width: 100%;
    /*    overflow-x: hidden;*/
}

h1 {
    font-size: 5rem;
}

/***************************************** FUENTES *****************************************/
.font-raleway {
    font-family: 'Raleway';
}

.font-caveat {
    font-family: 'Caveat';
}

.font-theatrical {
    font-family: 'Theatrical';
}

.font-raleway-bold {
    font-family: 'Raleway-Bold';
}

/***************************************** COLORES DE FONDO *****************************************/
.backgroud-primary {
    background-color: var(--primary);
}

.backgroud-accent {
    background-color: var(--accent);
}

.backgroud-gray {
    background-color: var(--gray);
}

.backgroud-white {
    background-color: var(--white);
}

.backgroud-black {
    background-color: var(--black);
}

.backgroud-gray-light {
    background-color: var(--gray-light);
}

/***************************************** ALINEACION *****************************************/
.text-end {
    text-align: end;
}

.text-start {
    text-align: start;
}

/***************************************** COLORES DE FUENTE *****************************************/
.text-accent {
    color: var(--accent) !important;
}

.text-white {
    color: #fff !important;
}

.text-red {
    color: var(--red) !important;
}

.text-black {
    color: #000 !important;
    text-decoration: none;
}

.text-primary {
    color: var(--primary) !important;
}

.text-gray {
    color: var(--gray) !important;
}

/***************************************** TRANFORMACIÓN DE FUENTE *****************************************/
.uppercase {
    text-transform: uppercase;
}

/***************************************** HEADER *****************************************/
.header-top {
    background-color: var(--primary);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0px -20px 18px -20px rgba(0, 0, 0, 0.95) inset;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff !important;
}

    .navbar-dark .navbar-nav .nav-link.active,
    .navbar-dark .navbar-nav .show > .nav-link {
        color: var(--accent)
    }

    .navbar-dark .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-nav .nav-link:hover {
        color: var(--accent)
    }

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--black);
    background-color: #fff;
    border-color: #fff;
    border-bottom: 5px solid var(--primary) !important;
}

.nav-tabs .nav-link {
    color: var(--gray);
}

.nav-tabs .nav-link {
    color: var(--gray);
}

    .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
        border-color: #fff;
        text-decoration: underline;
    }

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
}

#navbarRRSS.hide {
    transition: all 0.4s ease-in-out 0s;
}

.hideHeader {
    /* display: none; */
    opacity: 0;
    transition: opacity 0.9s ease-in-out 0s;
    /* -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s; */
}


.icon-header {
    text-align: right !important;
}

    .icon-header a {
        text-decoration: none;
    }

.font-top {
    font-size: 1.5rem;
}
/***************************************** TERMINA HEADER *****************************************/



/* --------------------------------------- MEDIA QUERY ----------------------------------------------------- */
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media screen and (min-width: 1025px) {
    .mobile-only {
        display: none !important;
    }
}

/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    .mobile-only {
        display: none !important;
    }
}

/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .mobile-only {
        display: none !important;
    }
}

/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    .desktop-only {
        display: none !important;
    }

    h1 {
        font-size: 2rem;
    }

    .font-top {
        font-size: .8rem;
    }

    .icon-header {
        text-align: center !important;
        font-size: 1rem;
    }

    .logo img {
        height: 70px;
    }

    #navbar-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* --------------------------------------- END MEDIA QUERY ----------------------------------------------------- */