:root{
    --primario: #509EAA;
    --secundario: #254369;
    --master: #1C293A;
    --slave: #4167B0;
    --gray: #CBD5E1;
}
*{
    padding: 0 ;
    margin: 0 ;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
    
}
img {
    width: 100%;
}
/***** Fuentes *****/
@font-face {
    font-family: FuturaBold;
    src: url('../fonts/Futura/FuturaPTBold.otf');
}
@font-face {
    font-family: FuturaBook;
    src: url('../fonts/Futura/FuturaPTBook.otf');
}
@font-face {
    font-family: FuturaDemi;
    src: url('../fonts/Futura/FuturaPTDemi.otf');
}
@font-face {
    font-family: Roboto-Light;
    src: url('../fonts/Roboto/Roboto-Light.ttf');
}
@font-face {
    font-family: Roboto-Medium;
    src: url('../fonts/Roboto/Roboto-Medium.ttf');
}
@font-face {
    font-family: Roboto-Bold;
    src: url('../fonts/Roboto/Roboto-Bold.ttf');
}

.FuturaBook{
    font-family: 'FuturaBook';
}
.FuturaBold{
    font-family: 'FuturaBold';
}
.FuturaDemi{
    font-family: 'FuturaDemi';
}
.RobotoBold{
    font-family: 'Roboto-Bold';
}
.RobotoMedium{
    font-family: 'Roboto-Medium';
} 
.RobotoLigth{
    font-family: 'Roboto-Ligth';
} 

.fs_16px{
    font-size: 1rem;
}
.fs_20px{
    font-size: 1.25rem;
}
.fs_22px{
    font-size: 1.375rem;
}
.fs_24px{
    font-size: 1.5rem;
}
.fs_26px{
    font-size: 1.625rem;
}
.fs_28px{
    font-size: 1.75rem;
}
.fs_30px{
    font-size: 1.875rem;
}

/**** width y height ****/
.w100vw{
    width: 100vw;
}
.h100vh{
    height: 100vh;
}
.w550px{
    width: 34.375rem;
}

.w64px{
    width: 4rem;
}
.h64px{
    height: 4rem;
}


/***** Colors *****/
.text-primario{
    color: var(--primario);
} 
.text-secundario{
    color: var(--secundario);
} 
.text-master{
    color: var(--master);
} 
.text-slave{
    color: var(--slave);
} 
.text-gray{
    color: var(--gray);
}


/***** heading *****/
h1, h2 h3, h4{
    color: var(--primario);
    font-family: 'Roboto-Medium';
    text-transform: uppercase;   
}
h1{
    font-size: 5rem;
}
h2{
    font-size: 2.5rem;
}
h3{
    font-size: 2rem;
}



/***** Background *****/

.bg__promociones{
    background-image: url('../img/bg/kids_park.jpg');
    background-position: center center;
    background-size: contain;
    background-repeat:  no-repeat;
    height: 70vh;
    background-attachment: fixed;
}
.bg__primario{
    background-color: var(--primario);
}
.bg__gray-200{
    background-color: #D9D9D9;
}
.bg__gray-500{
    background-color: var(--gray);
}
.bg__bluetrasparent{
    background-color: #1c293a48;
}

/**** position ****/

.top-1{
    top: 1rem;
}
.right-1{
    right: 1rem;
}
.bottom-1{
    bottom: 1rem;
}
.left-1{
    left: 1rem;
}

/* parallax-section */
.parallax-section {
    height: 70vh;
    background: linear-gradient(rgba(28, 41, 58, 0.50), rgba(28, 41, 58, 0.40)), url('../img/bg/kids_park.jpg') center/cover fixed no-repeat;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    color: #fff;
    text-align: end;
    padding-right: 4rem;
  }

/**** padding ****/

.seccion{
    padding: 7rem 0;
}
/* Sobre-escribir Clases de Bootstrap */
.navbar-light .navbar-brand{
    color: var(--primario);
    text-transform: uppercase;
    transition: all ease-in .2s;
}
.navbar-light .navbar-brand:hover{
    color: var(--secundario);
}
.navbar-brand{
    font-size: 1.5rem;
}