:root{
    --oscuro:#151a30;
    --claro:#29cdf1;
    --liga:#01017B;
}

@font-face {
    font-family: Futura;
    src: url(../fonts/font_futura-book.woff2);
  }
  @font-face {
    font-family: Futura;
    src: url(../fonts/font_futura-bold.woff2);
    font-weight: bold;
  }
  @font-face {
    font-family: Bahnschrift;
    src: url(../fonts/font_bahnschrift.woff2);
  }
  @font-face{
    font-family:Avenir;
    src:url(../fonts/AvenirLTStd-Book.otf);
  }
  @font-face{
    font-family: Avenir;
    src:url(../fonts/AvenirLTStd-Heavy.otf);
    font-weight: bold;
  }


html{
    margin:0;
    padding:0;
    height: 100%;
}
body{
    margin:0;
    padding:0;
    height: 100%;
    font-family:'Avenir', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    font-size: 14px; 
   
    color:#333;
    /*
     background-color: #f4f4f4;
    background-color: #29cdf1;
    background-image: linear-gradient( #151a30 120px,#29cdf1);

    background-color: #ddd;
    background-image: linear-gradient( #888 80px,#ddd);
        background-repeat: no-repeat;
        background: url(../img/fondo_pipa.png) repeat top left;
    */
    background-color: #e2e2e2;

    background-image: linear-gradient(#bbb, #e2e2e2 );
    background-repeat: no-repeat;
    background-size: 6000 6000;
    
    
}

header{
    display:flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding:4px 40px 3px 40px;
    margin:0px 0px 0px 0px;
    background-color: #fff;
    border-bottom:#01017B 1px solid;

}
header nav{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    gap:22px;
    margin-top: 20px;
    position: relative;
    align-items:center;
}
header nav a{
    color:var(--liga);
    text-decoration: none;
    font-size:.9rem;
}
header .Logo{
    width:140px;
    max-height: 90px;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
header .Logo img{
    max-height: 100%;
    max-width: 100%;
}
header a{
    color:var(--liga);
    text-decoration:none;
}

header .idiomaMenu{
    display:none;
    margin:0;
    padding:4px 12px;
    list-style: none;
    background-color: #fff;
    border:#888 1px solid;
    border-radius:3px;
    font-size:.8rem;
    position: absolute;
    top:0px;
    right:2px;
}
header .idiomaMenu li{
    display:block;
    margin:0;
    padding:4px 0px;
    list-style: none;
}
header .idiomaMenu a{
    display:block;
    padding:.5rem 1rem;
    background-color: #ccc;
    color:#333;
    cursor:pointer;
    letter-spacing: 1px;
    font-family: 'Bahnschrift';
}

.botonIdioma{
    margin-left:20px;
    padding-left:10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    gap:6px;
    align-items: center;
    cursor:pointer;
}
.botonIdioma .banderita{
    display: inline-block;
    width:24px;
    height:20px;
    background-color: #88cc88;
}

.botonIdioma .banderita.es{
    background: url(../img/mx.svg) center center no-repeat;
    background-size: auto 100%;
}
.botonIdioma .banderita.en{
    background: url(../img/us.svg) center center no-repeat;
    background-size: auto 100%;
}



.BurgerMenu{
    display:none;
    color: #333;
    width:30px;
    height:30px;
    background: transparent url(../img/burger-menu.png) no-repeat center center;
    background-size: 80% 80%;
}


main{
    padding:0px 40px;
    margin:0px;
    text-align: center;
}
h1{
    padding: 20px 40px 20px 40px;
    margin:0;
    font-size:1.5rem;
    font-weight: bold;

    text-align: center;
    letter-spacing: .1rem;
    /*color:#01017B;*/
    color:#010192;

    background-image: linear-gradient(#010192 30%, #5858e3 70% );
    color: transparent;
    background-clip: text;
}


.center{
    text-align: center;
}
.right{
    text-align: right;
}

.inlineBlock{
    display:inline-block;
}



.Caja{
    padding:10px 20px;
    border:#666 1px solid;
    border-radius: 6px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: #999 1px 1px 6px;
    width:80vw;
    margin:0px auto 0px auto;
    background-color: #f8f8f8;
    text-align: left;
}

footer{
    margin:40px 0px 0px 0px;
    padding:20px 0px;

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #444;
}
footer a{
    color:#29cdf1;
    text-decoration: none;
    font-size:.9rem;
    padding:.2rem 1rem;
    cursor:pointer;
    letter-spacing: 1px;
}


.logout{
    display: inline-block;
    border-left:#888 1px solid;
    padding:.2rem 1rem .2rem 1rem;
}



.boton{
    display:inline-block;
    font-size: 1rem;
    border: #333 1px solid;
    padding:.3rem 1rem .4rem 1rem;
    font-family: 'Bahnschrift';
    border-radius:5px;
    cursor:pointer;
    box-shadow: #666 2px 2px 3px;
    text-decoration: none;
    background: linear-gradient(180deg, #29cdf1, #021e74 50%,#021e74);
    color:#f0f0f0;
    letter-spacing: 1px;
    transition: box-shadow 300ms ease-out;
}
.boton:hover{
    background: linear-gradient(180deg, #5be1ff, #021e74 50%,#021e74);
    color:#fff;
    box-shadow: #ccc 0px 0px 0px;
}

.Tira{
    display:flex;
    justify-content: flex-start;
    flex-direction: row;
    column-gap: 20px;
    flex-wrap: wrap;
}
.Tira.centrada{
    justify-content: center;
}

.AutoScroll{
    overflow-x: auto;
    overflow-y: auto;

}


.aire{
    margin-top:20px;
    margin-bottom:20px;
}
.hscroll{
    width:100%;
    overflow-x: auto;
    }


.LogoTab{
    background-color: #fff;
    padding:1px 40px 8px 40px;
    width:302px;
    margin:-1px auto 0px auto;
    border-bottom:#01017B 1px solid;
    border-left:#01017B 1px solid;
    border-right:#01017B 1px solid;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    box-shadow: #666 2px 3px 3px;
}


.Usuario{
    display: flex;
    justify-content: flex-end;
    column-gap: 20px;
    align-items: center;
    padding:2px 2px;
}
.Usuario b{
    color:#01017B;
    font-size:1rem;
}


.OpcionEntrada{
    padding:10px 20px 10px 4px;
    border:#444 1px solid;
    border-radius:2px;
    font-size:1.1rem;
    box-shadow: #ccc 2px 2px 3px;
    cursor:pointer;
    background-image: linear-gradient(#444, #555, #999);
    color:#ddd;
    transition: box-shadow 200ms ease-out;
}
.OpcionEntrada:hover,.OpcionEntrada:active{
    box-shadow: #666 0px 0px 1px;
}

.pv20{
    padding-top:20px;
    padding-top:20px;
}
.w100{
    width:100%;
}


@media  screen and (max-width:720px) {

    h1{
        padding: 20px 10px 20px 10px;
    }

    header{
        padding:5px 10px 5px 10px;
        margin:0px 5px 0px 5px;
    }
    header .Logo{
        width:20vw;
    }
    header nav{
        display:none;
        margin:0px;
        position:absolute;
        top:0px;
        right:0px;
 background-color: #fff;
 padding:8px;
    }
    header nav a{
        display: block;
        font-size:1rem;
        padding:.2rem .2rem;
        margin:0px 2px 10px 2px;
    }
    header nav .Usuario{
        display:block;
    }
    header nav .Usuario .logout{
        display:block;
        border-left:none;
        padding-left:0px;
    }


    .botonIdioma{
        padding-left:0px;
        margin-left:0px;
    }

    
    .BurgerMenu{
        display:block;
    }

    main{
        padding:0px 10px 0px 10px;
    }

    .LogoTab{
        width:160px;       
    }
    .LogoTab img{
        width:160px;
        height:auto;
    }


    .Caja{
        width:88vw;
        padding:5px 10px;
        border-radius:4px;
        margin:0px auto 0px auto;
    }




}