@font-face{font-display:block;font-family:SoleRepsolText;font-style:normal;font-weight:400;
    src:url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolText_W_Rg.woff) format("woff")
}
@font-face{font-display:block;font-family:RepsolSoleDisplayRegular;font-style:normal;
    src:
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolDisplay_W_Rg.woff2) format("woff2"),
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolDisplay_W_Rg.woff) format("woff")
    }
@font-face{font-display:block;font-family:RepsolSoleDisplayBold;font-style:bold;
    src:
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolDisplay_W_Md.woff2) format("woff2"),
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolDisplay_W_Md.woff) format("woff")
    }
@font-face{font-display:block;font-family:RepsolSoleTextRegular;font-style:normal;
    src:
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolText_W_Rg.woff2) format("woff2"),
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolText_W_Rg.woff) format("woff")
    }
@font-face{font-display:block;font-family:RepsolSoleTextBold;font-style:bold;
    src:
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolText_W_SBd.woff2) format("woff2"),
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/fonts/Repsol/SoleRepsolText_W_SBd.woff) format("woff")
    }
@font-face{font-display:block;font-family:rds-e-icon-font;
    src:
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/icon/icomoon.ttf?heauzz) format("truetype"),
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/icon/icomoon.woff?heauzz) format("woff"),
        url(/etc.clientlibs/repsol-catalog/clientlibs/clientlib-site/resources/icon/icomoon.svg?heauzz) format("svg")
    }

* {
    font-family: 'RepsolSoleDisplayBold';
    /* font-weight: 500; */
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 16px;
    font-weight: 100;
    outline: 0 !important;
}

body {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-image: url(/content/dam/repsol-corporate/es/landings/xmas/imgs/background.jpeg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* overflow-x: hidden; */

}


/* NAVBAR---------------------------------------- */

#logo>img {
    height: 40px;
    width: auto;
}

#idiomas {
    gap: 1rem;
}

#idiomas>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
    height: 50px;
    width: 50px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 8px;
    color: #ffffff;
    text-transform:uppercase;

}

#idiomas #sec {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color: #ffffff;
    border: none;
}

#idiomas #sec:hover {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: rgba(25, 22, 32, 0.9, .5);   
    text-shadow: 0 0 5px #ffffff, 0 0 15px #ffffff, 0 0 30px #ffffff;
    -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
            transform: scale(1.25);
}

h1 {
    font-family: 'RepsolSoleDisplayBold';
    font-size: 70px;
    text-align: center;
    text-shadow: 0 0 5px #ffffff, 0 0 15px #ffffff, 0 0 30px #ffffff;
    color: #ffffff;
    font-weight: 100;
    line-height: 56px;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-name: h1;
            animation-name: h1;
    position: relative;
    margin-bottom:3rem
}

h2 {
    width: 100%;
    text-align: center;
    font-size: 26px;
    margin-top: 13px;
    color: #ffffff;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-name: h1;
            animation-name: h1;
}

h3 {
    width: 100%;
    text-align: center;
    font-size: 26px;
    color: #ffffff;
}

/* VIDEO SECTION---------------------------- */

iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.50);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.50);
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-name: iframe;
            animation-name: iframe;
}


/* SOCIALS SECTION---------------------------- */

#compartir {
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-name: ul;
            animation-name: ul;
    margin-top: 20px;
}

ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

li img {
    width: 33px;
}

li {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    display: inline-block;
}

li:hover {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
            transform: scale(1.25);
    -webkit-filter: drop-shadow(0 0 0.75rem #ffffff);
            filter: drop-shadow(0 0 0.75rem #ffffff);
}


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

@media (max-width: 1366px) {
    body {
        width: 100%;
        height: 100%;
        background-image: url(../imgs/background.jpeg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;

    }

    #logo>img {
        height: 40px;
        width: auto;
    }

    #idiomas>a {
        height: 40px;
        width: 40px;
    }

    h1 {
        font-size: 56px;

    }

    h2,
    h3 {
        font-size: 24px;

    }
}

@media (max-width: 1024px) {
    body {
        width: 100%;
        height: 100%;
        background-image: url(../imgs/background.jpeg);
        background-size: cover;
        background-position: 5% 5%;
        background-repeat: no-repeat;
        background-attachment: fixed;

    }


    #logo>img {
        height: 30px;
        width: auto;
    }

     #idiomas>a {
        height: 30px;
        width: 30px;
        font-size: 14px;
    }

    h1 {
        font-size: 50px;

    }

    h2,
    h3 {
        font-size: 24px;

    }

}

@media (max-width: 768px) {
    body {
        width: 100%;
        height: 100%;
        background-image: url(../imgs/background_mobile.jpeg);
        background-size: cover;
        background-position: 5% 5%;
        background-repeat: no-repeat;
        background-attachment: fixed;

    }

    #logo>img {
        height: 20px;
        width: auto;
    }

    #idiomas>a {
        height: 25px;
        width: 25px;
        font-size: 11px;
    }

    h1 {
        font-size: 46px;

    }

    h2,
    h3 {
        font-size: 24px;

    }

}


@media (max-width: 576px) {
    body {
        width: 100%;
        height: 100%;
        background-image: url(../imgs/background_mobile.jpeg);
        background-size: cover;
        background-position: 5% 5%;
        background-repeat: no-repeat;
        background-attachment: fixed;

    }

    #logo>img {
        height: 20px;
        width: auto;
    }

    #idiomas {
        gap: .5rem;
    }

    #idiomas>a {
        height: 25px;
        width: 25px;
        font-size: 11px;
    }

    .greetings {
        gap: 0;
    }

    h1 {
        font-size: 44px;
        padding-top: 20px;

    }

    h2,
    h3 {
        font-size: 20px;

    }

    .custom-row-gap {
        row-gap: .2rem !important;
    }

    li img {
        width: 28px;
    }
}

/* KEYFRAMES  ----------------------------*/

@-webkit-keyframes h1 {
    0% {
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        opacity: 0;
    }

    15% {
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        opacity: 0;
    }

    65% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}

@keyframes h1 {
    0% {
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        opacity: 0;
    }

    15% {
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        opacity: 0;
    }

    65% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes iframe {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }
}

@keyframes iframe {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }
}

@-webkit-keyframes ul {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes ul {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}