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

    Theme Name: Corrida Solidaria Familiar
    Theme URI: 
    Description: Página para 
    Author: NamyHanae
    Version: 1.0

-----------------------------------------------------------------------------------*/

/* Variables             */
/* --------------------- */
:root {

    --font-family--poppins: "Poppins", system-ui;;
    --font-family--montserrat: "Montserrat", system-ui;

    --color--black: #004152; /*rgb(0, 65, 82)*/
    
    --color--green-dark: rgb(0, 156, 156); /*#009c9c*/
    --color--green-light: rgb(64, 185, 201);
    --color--light-green: #C6ECC6; /*rgb(198, 236, 198)*/

    --color--orange: #ff8400; /*rgb(255, 132, 0)*/
    --color--pink: #c75d8b; /*rgb(199, 93, 139)*/
    --color--purple: #7c60c2; /*rgb(124, 96, 194)*/
    
}



/* Generic               */
/* --------------------- */
body {
    font-family: var(--font-family--poppins);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.625rem;
    box-sizing: border-box;
    color: #1D1E21;
    color: #606261;
}

section {
    overflow: hidden;
}

.row {
    margin: 0!important;
}

.py__section {
    padding-top: 8rem;
    padding-bottom: 8rem;
}


/* Color                 */
/* --------------------- */
.color--orange {
    color: var(--color--orange);
}

.color--pink {
    color: var(--color--pink);
}

.color--purple {
    color: var(--color--purple);
}

.color--greene-dark {
    color: var(--color--green-dark);
}

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

.color--light-green {
    color: var(--color--light-green);
}

.color--white {
    color: #fff;
}



/* Textos                */
/* --------------------- */
.title--section {
    font-size: 1rem;
    letter-spacing: 0.063rem;
    background-color: var(--color--light-green);
    color: var(--color--black);
    border-radius: 3.75rem;
    font-weight: 500;
    display: inline;
    margin: 0 auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.title--primary {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.05;
    margin: 0 auto;
    margin-bottom: 1.875rem;
    color: var(--color--black);
}
.title-secondary-ticket {
    
    font-size: 35px;
    text-align: center;
    margin: 0;
    margin-bottom: 80px;
    margin-top: 50px;
    letter-spacing: .1em;
    font-weight: 500;
    color: #666666;
}

.about__text {
    font-size: 1.125rem;
    margin: 0 auto;
    font-weight: 500;
    line-height: 1.8;
}


.spec__box {
    padding: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.spec__title {
    font-size: 1.375rem;
    line-height: 1.35;
    font-weight: 600;
    margin-top: 0.938rem;
    margin-bottom: 0.938rem;
    color: var(--color--black);
}

.spec__text {
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.625em;
}

.other__title {
    color: #fff;
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 600;
    display: inline-block;
}


.other__title--pink {
    background-color: rgba(199, 93, 139, 0.8);
}

.other__title--green {
    background-color: rgba(0, 156, 156, 0.8);
}

.other__title--purple {
    background-color: rgba(124, 96, 194, 0.8);
}

.hg__text {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.8;
    font-family: var(--font-family--montserrat);
}



/* Buttons               */
/* --------------------- */
.btn-inscription {
    background-color: var(--color--purple);
}

.btn-inscription .nav-link {
    color: #fff;
}

.button--inscription {
    font-size: 1.063rem;
    color: #fff;
    background-color: var(--color--purple);
    text-decoration: none;
    line-height: 1.063rem;
    padding: 1.063rem 2.019rem;
    border-radius: 3.75rem;
    text-transform: uppercase;
    border: 2px solid transparent;
    
    transition: background;
    transition-duration: 0s;
    transition-timing-function: ease;
    transition-duration: 0s;
    transition-timing-function: ease;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(0,1,0.5,1);
}

.button--inscription:hover {
    background-color: #fff;
    color: var(--color--purple);
    border: 2px solid var(--color--purple);
}

.about__link {
    font-size: 0.938rem;
    padding: 0.43rem 1.119rem;
    color: var(--color--purple);
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid var(--color--purple);
    border-radius: 1.75rem;
    
    transition: background;
    transition-duration: 0s;
    transition-timing-function: ease;
    transition-duration: 0s;
    transition-timing-function: ease;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(0,1,0.5,1);
}

.about__link:hover {
    color: var(--color--purple);
    background-color: #E7E4F7;
    border-color: transparent;
}

.about__link--green {
    color: var(--color--black);
    border: 2px solid var(--color--light-green);
}

.about__link--green:hover {
    color: var(--color--black);
    background-color: var(--color--light-green);
    border-color: transparent;
}

.about__link--pink {
    color: var(--color--pink);
    border: 2px solid rgba(199, 93, 139, 0.8);
}

.about__link--pink:hover {
    color: #fff;
    background-color: rgba(199, 93, 139, 0.8);
    border-color: transparent;
}

.hg__btn {
    font-size: 1.063rem;
    padding: 1.063rem 2.019rem;
    line-height: 1.063rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid #fff;
    border-radius: 3.75rem;
    
    transition: background;
    transition-duration: 0s;
    transition-timing-function: ease;
    transition-duration: 0s;
    transition-timing-function: ease;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(0,1,0.5,1);
}

.hg__btn:hover {
    background-color: var(--color--green-dark);
    border-color: var(--color--green-dark);
}



/* Nav                   */
/* --------------------- */
.navbar-nav {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(255,255,255,0.15);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    border-radius: none;
}

.nav-item {
    font-size: 0.875rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 600;
}

.navbar-nav .nav-link.active {
    color: var(--color--green-dark);
}

.navbar-nav .btn-inscription .nav-link:hover,
.navbar-nav .btn-inscription .nav-link.active {
    color: #fff;
}

.navbar-scrolled {
    background: rgb(255,255,255);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(255,255,255,0.15);
    box-shadow: 0 0.5rem 1rem rgba(124, 96, 194,0.4),inset 0 -1px 0 rgba(255,255,255,0.15);
}

.navbar-nav-scrolled {
    border-radius: 0%!important;
    background-color: transparent!important;
    box-shadow: none!important;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler {
    border-color: var(--color--green-dark);
    border-width: 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
    fill: var(--color--green-dark);
    width: 30px;
}


/* Header                */
/* --------------------- */
header {
    background-image: url(../img/hero/bg_corrida-desktop-v2.jpg);
    background-position: 75% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 100px;
    position: relative;
    max-height: 80vh;
    /* margin-top: 80px; */
}

.hero__wrapper {
    background-color: rgba(255, 255, 255, 0.75);
    height: 100vh;
}



/* Hero                  */
/* --------------------- */
.hero__title--primary {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.416rem;
}

.hero__title--secondary {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.01;
    margin-bottom: 2.975rem;
    margin-top: 1.9rem;
}



/* Waves                 */
/* --------------------- */
.waves--white {
    background-image: url(../img/waves/white_top_wave_02.png);
    width: 100%;
    height: 175px;
    position: absolute;
    top: 0;
}

.waves--2 {
    background-image: url(../img/waves/hero_waves.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: -160px;
}

.waves--3 {
    background-image: url(../img/waves/hero_waves.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 265px;
    position: absolute;
    bottom: 0;
}



/* About                 */
/* --------------------- */
.about__img {
    width: 100%;
    height: auto!important;
    max-width: 500px;
    margin-top: 4rem;
    border-top-left-radius: 0%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: 0 0.5rem 1rem rgb(0, 65, 82, 0.8),inset 0 -1px 0 rgba(255,255,255,0.15);
}

.spec__box {
    max-width: 300px;
}

.about__icon {
    background-color: #E7E4F7;
    fill: var(--color--purple);
    border-top-left-radius: 0%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 70px;
    height: auto;
    padding: 8px;
}


.about__icon--green {
    fill: var(--color--green-dark);
    background-color: rgba(198, 236, 198, 0.8);
    border-top-left-radius: 50%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

.about__icon--pink {
    fill: var(--color--pink);
    background-color: rgba(199, 93, 139, 0.2);
    border-top-left-radius: 50%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

.about__icon--black {
    fill: var(--color--black);
    background-color: rgb(0, 65, 82, 0.2);
}

.about__others-box {
    background-size: cover;
    background-position: center;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}   

.bg__kit {
    background-image: url(../img/about/bg_kit-desktop.JPG);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden; 
}

.bg__bicicletas {
    background-image: url(../img/about/bg_bicicletas-desktop.JPG);
}

.bg__mascotas {
    background-image: url(../img/about/bg_mascotas-desktop.JPG);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden; 
}

.others_box {
    background-color: rgba(0, 65, 82, 0.6);
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.others_box:hover {
    background-color: rgba(0, 65, 82, 0.7); 
}

.other__icon {
    fill: #fff;
    width: 60px;
    height: auto;
    border-top-left-radius: 0%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    padding: 10px;
}

.other__icon--pink {
    background-color: rgba(199, 93, 139, 0.8);
}

.other__icon--green {
    background-color: rgba(0, 156, 156, 0.8);
}

.other__icon--purple {
    background-color: rgba(124, 96, 194, 0.8);
}



/* Hogar de Cristo       */
/* --------------------- */
.bg__hg {
    background-image: linear-gradient(black, black), url(../img/hc/bg__hg--desktop.jpg);
    background-position: 74% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: saturation;
    position: relative;
}

.hg__logo {
    width: 300px;
}

.hg__wrapper {
    background-color: rgba(0, 65, 82,0.85);
    height: 100%;
    min-height: 1000px;
    display: flex;
    align-items: center;
}



/* Footer                */
/* --------------------- */
footer {
    padding: 2rem;
    background-color: #F7F7F7;
}

.link--rrss {
    width: 30px;
    margin: 1rem;
}

.link--rrss-icon {
    fill: var(--color--green-dark);
}

.link--rrss:hover .link--rrss-icon {
    fill: var(--color--black);
}


#sponsor .sponsor-small h3 {
    font-size: 1.5rem;
}
#sponsor .sponsor-small > img {
    width: 140px !important;
}

/* Animaciones           */
/* --------------------- */
/* lineup class and keyframes */
.lineUp {
    animation: 3s anim-lineUp ease-out infinite;
}
  
@keyframes anim-lineUp {
    0% {
      opacity: 0.5;
      transform: translateY(80%);
    }
    20% {
      opacity: 0.5;
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
}


/* Media Queries          */
/* ---------------------- */
@media only screen and (min-width: 576px) {

}

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

}

@media only screen and (min-width: 992px) {
    .navbar-nav {
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(255,255,255,0.15);
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 3.75rem;
        padding-bottom: 0;
    }

    .nav-item {
        font-size: 0.875rem;
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media only screen and (min-width: 1200px) {
    .hero__title--primary {
        font-size: 1.375rem;
        font-weight: 600;
        line-height: 1.416rem;
    }

    .hero__title--secondary {
        font-size: 5rem;
        font-weight: 600;
        line-height: 6rem;
        margin-bottom: 1.875rem;
    }

    header {
        background-image: url(../img/hero/bg_corrida-desktop-v2.jpg);
        background-position: bottom;
        /* background-size: contain; */
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 100px;
        position: relative;
        max-height: 80vh;
        /* margin-top: 80px; */
    }

    .title--primary {
        font-size: 3.75rem;
        line-height: 1.2;
        max-width: 65%;
    }

    .about__text {
        font-size: 1.125rem;
        max-width: 70%;
    }

}

@media only screen and (min-width: 1400px) {
    .waves--2 {
        background-image: url(../img/waves/hero_waves.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 200px;
        position: absolute;
        bottom: -200px;
    }

    .hero__wrapper {
        background-color: transparent;
    }

    .title--section {
        font-size: 1.063rem;
    }

    .other__title {
        font-size: 2.3125rem;
    }

    .bg__hg {
        background-position: center;
    }
    
    .hg__logo {
        width: 400px;
    }
    
}