html, body{
    font-family: Arial, Helvetica, sans-serif;
    font-size:20px;
    padding: 0 0 0 0px;
    margin: 0;
    color:#0875C5;
    height:100%;
    overflow:hidden;
}
#joiner {display:none;}
.verthead {
    padding:0.55vw 1.5vw 0 0;
    border-bottom: solid black 5px;
    border-top: 5px solid #142611;
    display:inline-block;
    width:100%;
    height:7.5vw;
    position:relative;
}
.accountImg{
    max-width: 225px;
}
#choices{
    margin:20px 0 0 20px;
    font-weight:600;
    max-width:230px;
}
#choices a, .joiner{
    text-decoration:none;
    color:#0E8ADA;
}
#pagebody{
    margin:0;
    padding:0;
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    position:absolute;
    top:8.7vw;
    box-sizing:border-box;
}
#leftnav{
    float:left;
    overflow:auto;
    margin:0 15px;
    font-size:135%;
}
#content{
    height:100%;
    flex:1;
    overflow-y:scroll;
    overflow-x:hidden;
    border-left:solid 5px #000;
    box-sizing: border-box;
    max-width:inherit;
    font-size:0.9vw;
}
.notification{
    font-size:24px;
}
#tagline{
    padding:0 0 0px 15px;
    height:100%;
    font-size:150%;
    display:inline-block;
    vertical-align: middle;
    margin-top:50px;

}

#tab-list{
    list-style:none;
    font-size:0;
    padding-right:20px;
    /*    white-space:nowrap;*/
    float:right;
    display:flex;
    justify-content: flex-end;
    flex-wrap:nowrap;
    /*    box-shadow: 0px 1px 1px 1px #000;  because firefox positions differently than all others */
}
#tab-list li{ /*tabs*/
    color:#000;
    font-size:16px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border-left:solid 1px #555;
    border-top:solid 1px #555;
    border-right:solid 1px #555;
    background:#ddd;
    flex:1;
    align-self:flex-start;
    padding:10px;
    margin:1px;

}
#tab-list li a{
    text-decoration:none;
    color:#00e;
    min-width:45px;
}
#tab-list li a:visited{
    color:#00e;
}
#tab-list li:hover{
    background:#eee;
}
#tab-list li:active{
    color:#eee;
    top:-9px;
}
.tab-active{
    background:#fff !important;
    top: -9px  !important;
}
#content-title{
    color:#d20000;
    text-shadow: #fff 5px 5px 10px;
    font-weight:600;
    text-align:center;
    font-size:2.5vw;
    margin:15px;
}
#content{
    width:100%;
    padding:0 0 20px 20px;
    margin:0 15px;
    font-size:150%;
    overflow:auto;
    position:relative;
}
#content::before{
    content:"";
    position:fixed;
    left:0;
    right:0;
    z-index: -1;
    display:block;
    background-image: url('../images/presents4-background.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
    filter:blur(5px);
}

.imgicon{
    border-radius:200px;
    border:black solid 4px;
    height:100px;
    float:left;
    -webkit-shape-outside:circle(50%);
    left:-25px;
}

#modal {
    display:none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: #111;
    background-color: rgba(0,0,0,0.3);
}
#close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
#close:hover,
#close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
@media only screen and (min-width : 426px) {
    #navtabs{
        /*    display:flex;
            flex-wrap:nowrap;*/
        position:absolute;
        bottom:0;
        width:98%;
    }
    div#w3cmarkup{
        display:inline;
        float:right;
    }
    #mobilebuttons{
        display:none;
    }
    #content img#mpimg{
        float:right;height:150px;position:relative;top:-150px;left:100px;
    }
    #plist{
        float:left;width:40%;
    }
    .ctaButton{
        text-decoration: none;
        padding:10px;
        border-radius: 10px;
        border:3px solid #000;
        color:#000;
        background:#05c522;
        background:#fdd835;
        font-weight:600;
        position:fixed;
        bottom:100px;
        left:4vw;
        font-size:1.35vw;

    }
    #footer{
        font-size:100%;
    }
}
@media only screen and (max-device-width : 425px) {
    #leftnav{
        margin-top:5vh;
    }
    #navtabs{
        display:none;
    }
    #content{
        border-left:none;
    }
    #sandcatlogo, div#w3cmarkup{
        display:none;
    }    
    #mpimg{
        height:20vh;position:relative;top:-10px;
    }
    .ctaButton{
        display:none;
    }
    .verthead{
        height:9vh;
        border-bottom:none;
    }
    #tagline{
        font-size:3vw;
    }
    #awfus-logo{
        height:5vh;
    }
    #pagebody{
        top:9vh;
    }
    #content{
        font-size:2vw;
    }
    #content, #content p, #content {/*} div:not(.pricebox):not(pricehead){*/
        width:100%;
    }
    #joiner{
        width:85%;
        font-size:2.5vw;
        position:absolute;
        top:3vh;
        left:0.5vw;
    }
    #footer{
        font-size:3vw;
        max-height:5vh;
    }
    #mobilebuttons{
        display:flex;
        width:100%;
        max-height:7.5vh;
        background:rgba(255,255,255,0.95);
        bottom:9vh;
        position:absolute;
        padding:5px 0 15px 0;
    }
    .mbutton{
        margin:auto;
        border:thin solid black;
        border-radius:5px;
        padding:5px;
    }
    .mbutton img{
        width:20vw
    }
}