:root{
    --bni-red: #c22429;
}

@font-face {
    font-family: Ubuntu-Regular;
    src: url(../fonts/ubuntu/Ubuntu-Regular.ttf);
}
@font-face {
    font-family: Ubuntu-Medium;
    src: url(../fonts/ubuntu/Ubuntu-Medium.ttf);
}
@font-face {
    font-family: Ubuntu-Light;
    src: url(../fonts/ubuntu/Ubuntu-Light.ttf);
}
@font-face {
    font-family: Ubuntu-Bold;
    src: url(../fonts/ubuntu/Ubuntu-Bold.ttf);
}
body{
    background-color: black;
    font-family: Ubuntu-Regular;
}
.invitacion-container{
    max-width: 740px;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    //min-height:100vh;
}
.bni-logo-container{
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    width: 61%
}
.logo-bgdegradado{
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 42%, rgba(255,255,255,.4) 58%, rgba(255,255,255,0) 100%)
}
.miembro-container{

    z-index: -1;
    position: absolute;
    width: 100%;
    bottom: 0%;

}
.bni-backgroung-wrapper img{
    width: 100%;
}
.bni-logo-container{
    text-align: center;
}
.bni-datos-wrapper{
    text-align: center;
    margin-top: 2vh;
}
.bni-datos-wrapper h3{
    font-family: Ubuntu-bold;
    font-size: 27px;
    margin: 0px 0px;
    color:white;
    text-shadow: -3px 4px 13px rgba(0,0,0,0.35);
}
.bni-datos-wrapper h1{
    font-family: Ubuntu-Medium;
    font-size: 43px;
    margin: 0px 0px;
    color:var(--bni-red);
    margin: 0px 20px;
    text-align: center;
}
.bni-datos-wrapper .logo-reunion{
    display:flex;
    width: 100%;
}
.bni-datos-wrapper .logo-reunion .logo{
    width: 50%;
    padding: 0% 3%;
    border-right: 3px solid var(--bni-red);
    margin: 0% 0% 0% 6%;
}
.bni-datos-wrapper .logo-reunion .logo img{
    width: 100%;
    height: auto;
}
.bni-datos-wrapper .logo-reunion .reunion{
    width: 50%;
    /*margin: 0 5% 5% 5%;*/
}
.lista-reunion{
    list-style: none;
    padding: 0;
    margin-left: 7%;
    margin-bottom: 0px;
    margin-top:10px;
}
.lista-reunion li{
    min-width: 150%;
}
.lista-reunion li, .lista-reunion li a{
    text-align: left;
    text-decoration: none;
    font-family: Ubuntu-light;
    color:white;
    font-weight: 100;
    font-size: 15px;
    margin: 10px 0px;
    text-shadow: -3px 4px 13px rgba(0,0,0,0.95);
    transition: all .5s  ease-out;
}
.lista-reunion li:hover, .lista-reunion li:hover a{
    color:var(--bni-red);
    font-weight: bold;
    background-color: rgba(255,255,255,.7);
    text-shadow: -3px 4px 13px rgba(255,255,255,1.95);
}
.lista-reunion li a span,.lista-reunion li span {
    font-weight: bold;

}
.lista-reunion .fecha-reunion::before{
    content: "";
    background-image: url(../images/iconos/cal-ico.png);
    margin-right: 5px;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: 100% 100%;
    position: relative;
}
.lista-reunion .fecha-reunion a{
    text-align: right;
}
.lista-reunion li a div,.lista-reunion li div{
    height: 50px;
    line-height: 26px;
    margin-top: -50px;
    margin-left:80px;
    margin-right: 12%;
}
.lista-reunion .lugar-reunion::before{
    content: "";
    background-image: url(../images/iconos/geo-ico.png);
    margin-right: 5px;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: 100% 100%;
    position: relative;
}
.lista-reunion .zoom-reunion::before{
    content: "";
    background-image: url(../images/iconos/cam-ico.png);
    margin-right: 5px;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: 100% 100%;
    position: relative;
}
.lista-reunion .costo-reunion::before{
    content: "";
    background-image: url(../images/iconos/costo-ico.png);
    margin-right: 5px;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: 100% 100%;
    position: relative;
}
.miembro-backgroung-wrapper img{
    width: 100%;
}
.bni-perfil-wrapper img{
    width: 100%;
    border-radius: 100%;
    border:5px solid var(--bni-red);
}
.perfil-container:hover .bni-perfil-wrapper{
    width: 11.5vw;
    transition: all 2s ease-out;
}
.bni-perfil-wrapper{

    position: absolute;
    width: 9.5vw;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -71%);
}
.mensaje{

    height: 7rem;
    border-radius: 90% 90% 0 0;
    position: absolute;
    width: 100%;
    bottom: 0%;
    background-color: black;
}
.mensaje h5{
    font-weight: 100;
    font-size: 24px;
    padding:0px 16%;
    color:white;
    text-align: center;
}
.mensaje h5 span{
    color:var(--bni-red);
}

.orador-container{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -60%);
}
.orador-container .orador-wrapper h4{
    font-family: Ubuntu-Light;
    font-weight: 100;
    font-size: 20px;
    color:black;
    margin: 0px 20px;
    text-align: center;
}
.orador-container .orador-wrapper h3{
    font-family: Ubuntu-Medium;
    font-size: 28px;
    color:var(--bni-red);
    margin: 0px 20px;
    text-align: center;
}
.lista-reunion .costo-reunion.hide{
    display: none;
}
/*Mobile iPhone 14 (Retina)*/
@media (max-width: 430px){
    .invitacion-container{

        position: absolute;
        left: 0%;
        top: 50%;
        transform: translate(0% ,-50%);
        //height: 60vh;
    }
    .bni-logo-wrapper img{
        width: 25%;
    }
    .bni-datos-wrapper h3 {
        font-size: 14px;
        width: 67vw;
    }
    .bni-datos-wrapper h1 {
        font-size: 21px;

    }
    .bni-datos-wrapper {
    margin-top: 4vh;
    }
    .lista-reunion li, .lista-reunion li a {
        font-size: 10px;
        margin: 0px 0px;
    }
    .lista-reunion li a div, .lista-reunion li div {
        height: 45px;
        line-height: 10px;
        margin-top: -34px;
        margin-left: 40px;
        margin-right: 0%;
    }
    .lista-reunion .fecha-reunion::before{
        width: 30px;
        height: 30px;
    }
    .lista-reunion .lugar-reunion::before{
        width: 30px;
        height: 30px;
    }
    .lista-reunion .costo-reunion::before{
        width: 30px;
        height: 30px;
    }
    .lista-reunion .zoom-reunion::before{
        width: 30px;
        height: 30px;
    }
    .orador-container .orador-wrapper h4 {
        font-size: 15px;
    }
    .orador-container .orador-wrapper h3 {
        font-size: 19px;
    }
    .mensaje {
        height: 4rem;
    }
    .mensaje h5 {
        font-size: 15px;
    }
    .bni-perfil-wrapper {
        width: 21.5vw;
        top: 52%;
        transform: translate(-50%, -20%);
    }
    .perfil-container:hover .bni-perfil-wrapper{
        width:  22vw;
        transition: all 2s ease-out;
    }

}