/* 
Theme Name: Esports City League
Theme URI: https://esportscityleague.es
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://esportscityleague.es
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
body{overflow-x: hidden!important;}

body.elementor-page-2:not(.elementor-motion-effects-element-type-background){
    background-color: #002323;
    background-image: url("/imgs/esports-city-league-bg-1900.jpg");
    background-position: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Header */
#headerMenu{z-index: 999;}
/**********/

#quees{width: 100%!important;}
#quees .elementor-widget-wrap{padding: 0;}

.lineacolores{background: linear-gradient(270deg, #FF9900 -0.03%, #56CCF2 22.55%, #FF9900 36.94%, #005875 55.69%, #FF6DD6 73.77%, #FFFFFF 88.79%, #FF9900 99.97%); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}

.paddingLat15pp{padding-left: 15%; padding-right: 15%;}
.paddingLat7pp{padding-left: 7%; padding-right: 7%;}

/* Estilos textos */
.txtGood{font-family: "Good Timing", Sans-serif;}
.txtAmarillo{color: #FEA621;}
.subAmarillo{background-color: #FEA621; color: #002323; padding: 1px 4px; font-weight: 700;}
.txt30px{font-size: 30px;}
.txt400{font-weight: 400!important;}
.txt500{font-weight: 500!important;}
.displayBlock{display: block;}
/******************/

.botonMenuMovil{width: 240px; margin-left: auto!important; margin-right: auto!important; margin-top: 25px!important;}
.botonMenuMovil a{padding-top: 19px!important; padding-bottom: 19px!important; color:  #002323!important;}
.botonMenuMovil a:hover{color: #002323!important;}
.botonAmarillo, .botonMenuMovil{
    color: #002323; padding: 19px 40px; border-radius: 40px;
    background: conic-gradient(from 180deg at 50.35% 52.34%, #D78F24 0deg, #E5A646 33.17deg, #FFC772 150deg, #D08C25 299.12deg, #D78F24 360deg);
    position: absolute;
    z-index: 9;
}

.botonAmarillo, .botonMenuMovil, #icoTwitter, #icoFacebook, #icoInstagram, #btnRegistrateHeader a{transition: transform .3s; transform: scale(1, 1);}
.botonAmarillo:before, .botonMenuMovil:before{border-radius: 30px;}
.botonAmarillo:hover, .botonMenuMovil:hover{color: #002323!important;}
.botonAmarillo:hover, .botonMenuMovil:hover, #icoTwitter:hover, #icoFacebook:hover, #icoInstagram:hover, #btnRegistrateHeader a:hover{transform: scale(1.05, 1.05); transition: transform .3s;}

/* Fases */
#divRayos{position: absolute; mix-blend-mode: screen; top: 0; left: 0;}

.destelloAmarillo {
    background: radial-gradient(50% 50% at 50% 50%, #FEA621 49.48%, rgba(254, 166, 33, 0) 100%);
    filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.5));
    max-width: 269px;
    margin: auto;
    height: 3px;
    margin-top: 28px;
    margin-bottom: 22px;
}

.bgRotate{transform: rotate(-180deg);}

.fondoDegradado {
    background: conic-gradient(from 225deg at 50% 50%, #AD00FF 0deg, #FF1183 90deg, #FFAC5F 180deg, #00A3FF 270deg, #648F98 326.25deg, #AD00FF 360deg);
    opacity: 0.7;
    filter: blur(20px);
    border-radius: 40px;
    min-height: 303px;
}

.fondoOscuro {
    background-color: #002323;
    border-radius: 40px 40px 40px 40px;
    z-index: 9;
    position: absolute;
    top: -260px;
    left: 0;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 55px;
}

.fondoOscuro:before{border-radius: 40px;}

.fondoOscuro:before, .botonAmarillo:before, .botonMenuMovil:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding: 2px;
  background: conic-gradient(from 225deg at 50% 50%, #AD00FF 0deg, #FF1183 90deg, #FFAC5F 180deg, #00A3FF 270deg, #648F98 326.25deg, #AD00FF 360deg);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.fondoOscuro h3, .fondoDegradado h3 {
    color: #FFFFFF;
    font-family: "Good Timing", Sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Fin de Fases */

/* Juegos */
.divJuegos img{background: #ffffff20; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 5px;}
#juegos{background: url("/imgs/flecha-metal-izq.png") bottom left no-repeat,
 url("/imgs/flecha-metal-drcha.png") bottom right no-repeat;}
/**********/

/* Fechas */
#fechas{background-position-y: bottom; background-position-x: -2vw;}
#fechas .elementor-widget-wrap, #juegos .elementor-widget-wrap{padding: 0;}
.sombraElipse img{background: url("/imgs/linea-tiempo-sombra-elipse.png") no-repeat 0 0;}
/*******************/

/* RRSS */
#sombraCaballo{background: radial-gradient(90% 50% at 50% 50%, #171717 0%, rgba(0, 0, 0, 0)65%);
max-width: 354px;
height: 78px;
mix-blend-mode: multiply;
filter: blur(10px);
margin: auto;}


#brilloTwitter, #brilloInstagram, #brilloFacebook{top: -107px; position: absolute; max-width: 330px; max-height: 330px;}
#brilloTwitter{left: -120px;}
#brilloInstagram{left: 55px; transform: rotate(-180deg);}
#brilloFacebook{left: 238px; transform: rotate(-120deg);}

#icoTwitter, #icoInstagram{margin-right: 90px;}
#icoTwitter, #icoInstagram, #icoFacebook{z-index: 2; position: relative;}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
#brilloTwitter, #brilloFacebook, #brilloFacebook2, #brilloInstagram{-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; margin: 0!important;}
#brilloTwitter{
    -webkit-animation: 20s rotate linear infinite;
    animation: 20s rotate linear infinite;
}
#brilloFacebook{
    -webkit-animation: 30s rotate linear infinite;
    animation: 30s rotate linear infinite;
}
#brilloFacebook2, #brilloInstagram{
    -webkit-animation: 20s rotate linear infinite;
    animation: 20s rotate linear infinite;
    -webkit-animation-direction: reverse;
     animation-direction: reverse;
}
/**************************************/

/* FORMULARIO */
#success-message .sib-form-message-panel__text, #success-message .sib-form-message-panel__text .sib-notification__icon{color: #FEA621!important;}
#success-message{border-color: #FEA621!important;}
#sib-form, .sib-multiselect__label-text{font-family: Montserrat!important; font-size: 15px!important;}
.sib-form{padding: 0!important;}
#sib-container{background: transparent!important; padding: 0!important;}
#sib-container .width48pp{width: 48%; display: inline-block;}
#sib-container .marginRight1pp{margin-right: 1.5%;}
#sib-container .marginLeft1pp{margin-left: 1.5%;}

#error-message{background-color: #fff!important; font-weight: 500!important;}
.sib-form .entry__error{color: red!important; font-weight: 500!important; margin: 0 !important;}

.sib-form .entry__field, .sib-sms-select{margin: 10px 0!important;}

.sib-sms-select__number-input{height: 60px; z-index: 0;}

li.sib-menu__item label{margin-left: 32px;}

.sib-menu{top: 227px!important; width: 100%!important; left: 0!important; border-top: 1px solid #f2f2f2; background: #fff; border-radius: 0 0 6px 6px; margin: 0; padding: 15px 0!important; font-weight: 400!important; color: #002323!important;}
.clickable_link{color: #002323!important;}
.clickable_link:hover, .clickable_link:focus{text-decoration: none!important; color: #FEA621!important; background: none!important;}
.sib-form .clickable_button {background: #fea621!important; border: 1px solid #fea621!important; color: #002323!important;}
.sib-form-block{padding: 0!important;}
.entry__field, .sib-sms-select__phone-number, .sib-sms-select__calling-code{color: #002323!important; border: none!important;}
.entry__field input, .entry__field{font-size: 14px!important; font-weight: 400!important;}

.entry__field #NOMBRE, .entry__field #APELLIDOS, .entry__field #CIUDADES, .entry__field #EMAIL{padding: 11px 15px!important;}
.entry__field:focus{border: 1px solid blue!important;}

.input--multiselect::before{content: ''!important;
position: absolute!important;
right: 8px!important;
border: 6px solid transparent!important;
    border-top-color: transparent!important;
border-top-color: #343F4E!important;
top: calc(50% - 4px); border-radius: 3px!important;}

.input--multiselect{padding: 20px 11px 2px 11px !important;}
.sib-sms-select__title{display: none;}
.sib-optin{margin-left: 24px;}
.sib-optin p{color: #fff!important;}
.sib-form .input_replaced:checked + .checkbox_tick_positive{background: #002323!important; border-color: #fff!important;}
.sib-form-block__button, .sib-form-block__button:focus{font-weight: 500!important; font-size: 18px!important; letter-spacing: 0.25px!important; margin-top: 15px!important;}

ul.sib-menu__item-list{padding: 15px 0!important;}
.sib-menu__apply-button{border-radius: 28px!important; margin-left: 15px!important;}
/**************/

/* Footer */
.linksFooter a{color: #FEA621!important; text-decoration: underline; padding-right: 35px;}
.linksFooter a:last-child{padding-right: 0!important;}
/**********/

/*==========================================*/
/* Estilos para corte escritorio */
@media only screen and ( min-width: 1180px ) {
    #headerMenu.elementor-sticky--effects{background-color: rgba(0, 0, 0, 0.9) !important;}
    #headerMenu{transition: background-color 1.5s ease !important;}
    #headerMenu > .elementor-container{transition: min-height 1.5s ease !important;}

    #menuPpal ul li a:hover, a.elementor-item-active{font-weight: 700!important;}
    .botonMenuMovil, .divMenuLuces{display: none!important;}
}

@media only screen and ( max-width: 1560px ) {
    #fechas{background-position-x: -9vw!important;}
}

@media only screen and ( max-width: 1400px ) {
    body.elementor-page-2:not(.elementor-motion-effects-element-type-background){
        background-image: url("/imgs/esports-city-league-bg-1400.jpg");
        background-position: 0 42vw;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #imgPlayVideo div{margin-top: -26%;}
}

@media only screen and ( max-width: 1300px ) {
    #fechas{background-position-x: -15vw!important;}
}

/*--------- Móvil --------------*/
@media only screen and ( max-width: 1180px ) {
    #headerMenu{background-color: #000;}
    .eicon-menu-bar:before{content: url("/imgs/ecl-toogle-button.png");}
    .elementor-menu-toggle.elementor-active i:before{content: url("/imgs/ecl-toogle-button-activo.png");}

    .elementor-menu-toggle{padding: 8px 5px 8px 5px; border-radius: 0; z-index: 9999!important;}
    [class*=" eicon-"], [class^="eicon"]{line-height: 0;}
    .elementor-nav-menu--dropdown{
        top: -30px!important; margin-top: 0!important;
        background: url("/imgs/ecl-background-menu-movil.jpg") no-repeat top center;
        background-size: cover;
        padding: 120px 0 46px 0;
    }

    li.menu-item a{z-index: 99;}
    .divMenuLuces{background: url("/imgs/ecl-luces-resalte-boton.png") no-repeat center;
        padding: 139px!important;
        margin-top: -165px!important;
    }
    .divMenuLuces a{display: none;}

    .displayBlock{display: inline;}

    .destelloAmarillo{display: none;}

    #imgPlayVideo img{width: 100px;}


    .paddingLat15pp, .fondoDegradado{padding-left: 7%; padding-right: 7%;}
    .fondoOscuro{top: 0;}
    .fondoOscuro, .fondoDegradado{text-align: left; padding-top: 16px; padding-bottom: 25px; margin-top: 0;/*-522px;*/}
    .fondoDegradado{min-height: 0;}

    #fases{
        background: url("/wp-content/uploads/2021/08/ecl-girl-with-gun-fortnite.png") -175px 15px no-repeat,
        url("/imgs/ecl-fortnite-kenji-new-kuno-skin-fortnite-movil.png") right 185px no-repeat;
        padding-bottom: 157px;
    }

    #divCocheMovil{background-repeat: no-repeat; background-size: contain; background-position: center;}
    
    #juegos{background: none;}

    #fechas{background-position-x: 14%!important; background-position-y: -8px!important;}
    .txtMes{transform: rotate(-90deg); display: inline-block;}
    .txtMesBlanco{font-weight: 700; font-size: 15px;}
    .txtMesNegro{font-weight: bold; font-size: 11px;}

    .imgSombraElipse{background: url("/imgs/ecl-sombra-elipse-blanca-movil.png") no-repeat 0 0;}
    .imgSombraElipse{margin-top: -11px;}
    .imgElipseNegraMovil{margin-top: -9px;}

    #btnSumate{padding-left: 14px!important; padding-right: 14px!important;}
    #btnApuntate{width: 100%; text-align: center; max-width: 322px;}

    .elementor-2 .elementor-element.elementor-element-531d883:not(.elementor-motion-effects-element-type-background){
        background-size: inherit!important;
    }
    #fechas{background-position-x: 10vw !important; background-position-y: -107px !important;}

    #icoTwitter, #icoInstagram, #icoFacebook{width: 64px;}
    #icoTwitter, #icoInstagram{margin-right: 30px;}
    
    #brilloTwitter, #brilloFacebook, #brilloInstagram{width: 29%; top: -7.5vw;}
    #brilloTwitter{left: -4.5em;}
    #brilloInstagram{left: 1em;}
    #brilloFacebook{left: 7em;}

    #sib-container .width48pp{width: 100%; display: block;}
    #sib-container .marginRight1pp{margin-right: 0;}
    #sib-container .marginLeft1pp{margin-left: 0;}
    .sib-form-block__button{width: 100%;}
    .sib-menu{top: 307px !important;}

    .linksFooter a{display: block; padding-right: 0; padding-bottom: 5px;}
}

@media only screen and ( max-width: 1170px ) {
    #fechas{background-position-x: 9.5vw !important;}
}

@media only screen and ( max-width: 1160px ) {
    #fechas{background-position-x: 9.3vw !important;}
}

@media only screen and ( max-width: 1150px ) {
    #fechas{background-position-x: 9vw !important;}
}

@media only screen and ( max-width: 1140px ) {
    #fechas{background-position-x: 8.7vw !important;}
}

@media only screen and ( max-width: 1130px ) {
    #fechas{background-position-x: 8.3vw !important;}
}

@media only screen and ( max-width: 1120px ) {
    #fechas{background-position-x: 8vw !important;}
}

@media only screen and ( max-width: 1100px ) {
    #fechas{background-position-x: 7.5vw !important;}
}

@media only screen and ( max-width: 1000px ) {
    #fechas{background-position-x: 7vw !important;}
}

@media only screen and ( max-width: 970px ) {
    body.elementor-page-2:not(.elementor-motion-effects-element-type-background){
        background-image: url("/imgs/esports-city-league-bg-movil.jpg");
        background-position: 0 45vw;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #fases{padding-bottom: 180px;}
}

@media only screen and ( max-width: 880px ) {
    #fechas{background-position-x: 6.5vw !important;}
}

@media only screen and ( max-width: 800px ) {
    #brilloTwitter, #brilloFacebook, #brilloInstagram{width: 29%; top: -7.5vw;}
    #brilloTwitter{left: -3.5em;}
    #brilloInstagram{left: 2em;}
    #brilloFacebook{left: 8em;}
    #fechas{background-position-x: 5.5vw !important;}
}

@media only screen and ( max-width: 700px ) {
    #fechas{background-position-x: 4.5vw !important;}
}

@media only screen and ( max-width: 690px ) {
    #brilloTwitter{left: -2.5em;}
    #brilloInstagram{left: 3em;}
    #brilloFacebook{left: 9em;}
}

@media only screen and ( max-width: 646px ) {
    #fases{padding-bottom: 207px;}
}

@media only screen and ( max-width: 600px ) {
    #brilloTwitter, #brilloFacebook, #brilloInstagram{width: 38%; top: -10.5vw;}
    #brilloTwitter{left: -3.5em;}
    #brilloInstagram{left: 2em;}
    #brilloFacebook{left: 8em;}
    #fechas{background-position-x: 4vw !important;}
}

@media only screen and ( max-width: 550px ) {
    .elementor-2 .elementor-element.elementor-element-531d883:not(.elementor-motion-effects-element-type-background) {
    background-size: cover!important;}
    #fechas{background-position-x: 0!important;}
}

@media only screen and ( max-width: 539px ) {
    #fases{padding-bottom: 234px;}
    #imgPlayVideo div{margin-top: -52%;}

    #brilloTwitter{left: -2.5em;}
    #brilloInstagram{left: 3em;}
    #brilloFacebook{left: 9em;}
}

@media only screen and ( max-width: 516px ) {
    #fases{padding-bottom: 261px;}

    .divJuegos img{background: none; box-shadow: none;}
    .divJuegos .imgJuego{background: #ffffff20; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 5px;}
    #divCocheMovil{background-size: 120%; background-position: -70px 0;}
}

@media only screen and ( max-width: 450px ) {
    #fechas {background-position-y: -80px !important;}
}

@media only screen and ( max-width: 414px ) {
    #fechas {background-position-y: -32px !important;}
    #brilloTwitter, #brilloFacebook, #brilloInstagram{width: 60%; top: -70px;}
    #brilloTwitter{left: -65px;}
    #brilloInstagram{left: 32px;}
    #brilloFacebook{left: 127px;}
}

@media only screen and (max-width: 390px) {
    .elementor-2 .elementor-element.elementor-element-3950856,
    .elementor-2 .elementor-element.elementor-element-e87fd0c,
    .elementor-2 .elementor-element.elementor-element-bc66f1b > .elementor-element-populated,
    .elementor-2 .elementor-element.elementor-element-c0bf1bb,
    .elementor-2 .elementor-element.elementor-element-f2a1b38 > .elementor-widget-container,
    .elementor-2 .elementor-element.elementor-element-ade045a > .elementor-widget-container,
    .elementor-2 .elementor-element.elementor-element-9ec5d0a > .elementor-element-populated,
    .elementor-2 .elementor-element.elementor-element-642fe9d{padding-left: 6%!important; padding-right: 6%!important;}

    #btnApuntate {max-width: 260px;}

    #fechas {background-position-y: -9px !important;}
}

@media only screen and (max-width: 380px) {
    #fechas {background-position-y: -7px !important; background-position-x: 11% !important;}
}