.popinfo{
    opacity:0.7;
    font-size:0.8em;
}

.popinfo:hover{
    cursor:pointer;
}

#fpart{
    width:55%;
}

#intro img, #intro .sms{
    width:10em;
    height:15em;
    display:inline-block;
    margin:0 0 0 3%;
    max-width:45%;
    max-height: 17em !important;
}

#intro .lgs{
    height:16em;
    width:12em;
}

@media screen and (min-width:700px){
    .ininp{
        width:100%;
    }
    .ininp input{
        font-size:1.1em;
    }
}

#networks{
    display:flex;
    justify-content:space-evenly;
}

#networks img{
    width:3.5em;
    height:3.5em;
    display:inline-block;
    margin-left:0em;
}

#networks img:hover{
    cursor:pointer;
}

#networks img:active{
    transform:scale(0.9);
}

#databox
{
    background:var(--c2);
    padding:0.5em 0;
    width:90%;
    box-shadow:-3px 3px 4px 1px #0002;
    margin:0 5%;
    border-radius:0.8em;
    border:1px solid #0001;
}

#databox .plan{
    display:flex;
    flex-direction:column;
}

#databox .plan .aplan
{
    display:flex;
}

.aplan{
    padding:0.5em 2em 0.5em 10%;
}

.aplan:hover{
    background:#0001;
}

.aplan:active{
    background:#0009;
    color:var(--c2);
}

.aplan:not(:first-child)
{
    border:1px ridge #2222;
    border-width:1px 0 0px 0;
}

#databox .space{
    flex:1;
    width:20%;
}

.tplan{
    width:65%;
}

.space{
    width:50%;
    flex:2;
}


.price{
    width:35%;
}

.smtxt{
    font-size:0.5em;
}

.ininp
{
    padding:1em 1% 1em;
}

.long-ininp{
    width:95%;
}

.ininp input{
    width:100%;
}

.pn{
    width:37%;
    margin-left:3%;
}

#phone_no{
    width:100%;
    margin:0 0.2em;
    letter-spacing:0.2em;
    font-size:1em;
    padding:0.5em 1em;
}

.pin{
    display:flex;
    justify-content:normal;
    width:100%;
    align-items:center;
}

.pinkey{
    width:2em;
    height:2em;
    text-align: center;
    border: 1px solid var(--c2);
    border-radius: 0.5em;
    display: flex;
    justify-content: center;
    caret-color:transparent;
    outline:none;
    color: transparent;
    margin-left:0.1em;
}

.pinkey:focus{
    background:#fff;
    color:#000;
    box-shadow:0 0 3px 1px #0002;
    transform:scale(0.8);
}

#pin{
    letter-spacing:0.5em;
    text-align:center;
    box-sizing:border-box;
    font-family:Ob;
}

#databox{
    display:none;
}

#beneficiary{
    position:absolute;
    width:40%;
    padding:0.5em;
    margin-left:0.8em;
    background:var(--c2);
    font-size:0.8em;
    text-align:center;
    display:none;
}

#beneficiary div{
    border:1px solid #0001;
    border-width:0 0 1px 0;
    padding:0.2em;
}

.ben-opt{
    padding:0.8em 0.5em;
    user-select:none;
}

.ben-opt:hover{
    background: #0009;
    cursor:pointer;
    color:var(--c2);
}

#benlist{
    max-height:15em;
    overflow-x:auto;
}

.p-layer{
    height:100%;
    width:100%;
    background:#fc21;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display:none;
}

#footer{
    margin:2em 0 0em;
}

@media screen and (max-width:400px){
    #networks img{
        width:3.2em;
        height:3.2em;
        display:inline-block;
        margin-left:0em;
    }
}

@media screen and (min-width:800px){
    #intro .sms{
        height:14em;
        width:10em;
    }
    .smtxt{
        font-size:0.6em;
    }
}

@media screen and (min-width:900px){
    #networks img{
        width:4em;
        height:4em;
    }
    #intro{
        padding-left:27%;
        justify-content:center;
    }
}

@media screen and (min-width:1000px) {
    section.sect{
        margin:3.5em 10% 0 20% !important;
    }
    #intro{
        padding-left:20%;
    }
}