* {
    background-color: #dcd0ff;
}

.mobile {
    display: none;
}

@media only screen and (max-device-width: 480px) {
   .mobile {display: block;}
   .desktop {display: none;}
   img.logo {width: 50%;}
}

@media only screen and (min-device-width: 481px) {
   img.logo {width: 25%;}
}

.banner {
    position: relative;
    width: 100%;
}

.title {
    position: absolute;
    right: 28.5%;
    left: 28.5%;
}

.logo {
    position: absolute;
    top: 2%;
    right: 75%;
    height: 160px;
}

.logo img {
    height: 160px;
    width: 110px;
}

#wrapper {
    margin-left: 5%;
}

.sectionHeader {
    font-family: "TimesNewRoman";
    font-size: 14pt;
}

.statementBody {
    font-family: "TimesNewRoman";
    font-size: 12pt;
    margin-left: 5%;
    margin-right: 4%;
}

#statementAndFeed {
    width: 80%;
    padding-right: 1%;
    border-right: 4px solid #734f96;
    float: left; /* add this */
}

.facebookBorder {
    border-style: solid;
    border-radius: 10px;
    border-width: 4px;
    border-color: #734f96;
    margin-left: 10%;
    margin-right: 10%;
}

.fb-page {
    position: relative;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 5%;
    padding-bottom: 5%;
}

#mainBody {
    position: relative;
    top: 173px;
    height: 1200px;
}

#column {
    padding-left: 1%;
    padding-top: 10%;
    padding-bottom: 10%;
    height: 100vh;
    contain: paint; /* if you don't want #second to wrap below #first */
}

#column h3 {
    border: 3px solid #734f96;
    width: 55%;
}

.donate {
    padding-left: 1%;
    padding-right: 1%;
}

.volunteer {
    padding-left: 1%;
    padding-right: 1%;
}

.mailing {
    padding-left: 1%;
    padding-right: 1%;
}

.mailingListMessage {
    color: red;
}

.contact {
    padding-left: 1%;
    padding-right: 1%;
}

hr {
    width: 50%;
}

p {
    text-indent: 30px;
    text-align: justify;
}


/* MOBILE LAYOUT */

.mBanner {
    position: relative;
    width: 100%;
}

.mTitle {
    font-size: 11pt;
}

.mLogo {
    position: absolute;
    top: 0%;
    left: 10%;
}

.mLogo img {
    height: 70px;
    width: 45px;
}

.mWaffle {
    position: absolute;
    color: #734f96;
    top: 10%;
    right: 10%;
    font-size: 30px;
}

.mSectionHeader {
    font-family: "TimesNewRoman";
    font-size: 12pt;
}

.mStatementBody {
    font-family: "TimesNewRoman";
    font-size: 12pt;
    margin-left: 5%;
    margin-right: 5%;
}

.mFacebookBorder {
    border-style: solid;
    border-radius: 10px;
    border-width: 4px;
    border-color: #734f96;
}

.waffleColumn {
    padding-top: 10%;
    padding-bottom: 10%;
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: 0.5s;
}

.waffleColumn .closebtn {
    position: absolute;
    color: #734f96;
    top: 4%;
    right: 10%;
    font-size: 30px;
}

