/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

@media screen and (min-width: 600px) {
    /**************************************************
        COMPONENTE REWARDS
    **************************************************/
    .rewards__grid {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    /**************************************************
        COMPONENTE MENU
    **************************************************/
    .menu__container--alternative {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;

    }
    .menu__item--alternative {
        margin-right: 1rem;
        margin-bottom: 0;
        text-align: left;
    }

}

@media screen and (min-width: 768px) {
    /**************************************************
        COMPONENTE PAGE INFO
    **************************************************/
    .page-info__grid {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }
    .page-info__image {
        /*max-height: 450px;*/
        padding-left: 5rem;
        -ms-grid-column-align: end;
            justify-self: end;
        margin: 0 auto;
    }
    .page-info__image--alternative {
        padding-right: 5rem;
        padding-left: 0;
        /*max-height: 650px;*/
        -ms-grid-column-align: start;
            justify-self: start;
    }

    /**************************************************
        COMPONENTE LEVELS
    **************************************************/
    .levels__grid {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }
    .levels__grid > *:last-of-type {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
        width: calc(50% - .5rem);
        -webkit-transform: translateX(50%);
            -ms-transform: translateX(50%);
                transform: translateX(50%);
    }

    /**************************************************
        COMPONENTE SCENE (MOVIMIENTO FLIP CARD)
    **************************************************/
    .scene__face {
        padding: 0 2rem;
    }



    /**************************************************
        COMPONENTE ACCOUNT
    **************************************************/
    .account__grid {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .rewards, .benefits, .contact, .account, .new-password {
        padding: 4rem 2rem 8rem;
    }
}

@media screen and (min-device-width: 900px) {
    /**************************************************
        COMPONENTE CONTACT
    **************************************************/
    .contact__grid {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
        -ms-grid-rows: auto;
        grid-template-rows: auto;
    }
    .contact__grid > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    .contact__grid > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    /**************************************************
            COMPONENTE REWARDS
        **************************************************/
    .rewards__grid {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }

    /**************************************************
        COMPONENTE MENU
    **************************************************/
    .menu__item {
        margin-right: 3rem;
    }
}

@media screen and (min-width: 960px) {
    /**************************************************
        COMPONENTE BANNER
    **************************************************/
    .banner {
       min-height: 960px;
    }

    /**************************************************
       COMPONENTE HEADER
   **************************************************/
    .header {
        padding: 2rem;
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        position: static;
    }
    .header__logotipo {
        /*width: 125px !important;*/
        /*max-width: 100%;*/
        height: 250px !important;
    }
    .header--alternative {
        position: absolute;
    }
    .header__logotipo--desktop {
        display: block;
    }
    .header__logotipo--mobile {
        display: none;
    }

    /**************************************************
        COMPONENTE MENU
    **************************************************/
    .menu {
        display: block;
    }
    .menu__container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: unset;
        -ms-flex-pack: unset;
        justify-content: unset;
    }
    .menu__container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .navbar-menu {
        display: none;
    }
    .menu__item--alternative {
        margin-right: 3rem;
    }
    .menu__item {
        margin-right: 2.5rem;
    }
    .menu__link {
        font-size: 1.1rem;
    }

    /**************************************************
        COMPONENTE BANNER
    **************************************************/
    .banner__slogan {
        color: var(--color-white);
        font-size: 3.2rem;
        line-height: 1.1;
        position: relative;
    }
    .banner__highlight {
        font-family: 'La Petite Robe', sans-serif;
        font-size: 7rem;
        line-height: 1.1;
        position: absolute;
        top: -2rem;
        left: 4rem;
    }
}

@media screen and (min-width: 1024px) {
    /**************************************************
        COMPONENTE FOOTER
    **************************************************/
    .footer__grid {
        -ms-grid-columns: 1fr auto;
        grid-template-columns: 1fr auto;
    }

    /**************************************************
        COMPONENTE SOCIAL MEDIA
    **************************************************/
    .socialmedia {
        text-align: left;
    }
    .socialmedia__menu {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

    /**************************************************
        COMPONENTE LEGAL
    **************************************************/
    .legal {
        text-align: left;
        -webkit-box-ordinal-group: 1;
            -ms-flex-order: 0;
                order: 0;
    }

    /**************************************************
        COMPONENTE MENU
    **************************************************/
    .menu--alternative {
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        margin-bottom: 0;
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }
    .menu--alternative {
        -ms-flex-item-align: end;
            -ms-grid-row-align: end;
            align-self: end;
    }

}


@media screen and (min-width: 1280px) {
    /**************************************************
        COMPONENTE REWARDS
    **************************************************/
    .rewards__grid {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }

    /**************************************************
        COMPONENTE LEVELS
    **************************************************/
    .levels__grid {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }
    .levels__grid > *:last-of-type {
        grid-column: unset;
        width: 100%;
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
    }
}