* {
    font-family: 'Roboto Condensed', sans-serif;
}

a {
    color: #210135;
    text-decoration: none;
}
.clear {clear: both;}
.panel {
    padding: 0;
    background-color: #fff;
}
.view header {
    background: #000;
    height: 10vh;
    border: 0
}

.view header h1 {
    display: none;
}

.view header {
    background: #111 url('../images/logo.png') no-repeat 50% 50%;
    background-size: 65%;
}
span.menu {position: absolute;left:9vh; line-height: 10.4vh;
color: #fff;
text-transform: uppercase;
font-size:2.6vh;
font-weight: lighter;
    text-shadow: 0vh 0vh 1vh #200035;

}
.view footer {
    background: #f0f0f0 url('../images/footer.png') no-repeat center center;
    background-size: 40%;
    border: 0;
}

header .menuButton {
    position: absolute;
    top: 0;
    left: 0;
    height: 10vh;
    width: 10vh;
    z-index: 2;
    float: left;
    line-height: 10vh;
    text-align: center;
    color: #fff;
    font-size: 4vh;
}

nav {
    width: 75vw;
    background: transparent url('../images/nav-bg.jpg') repeat 0 0;
}

nav .view header {
    height: auto !important;
    background-color: transparent;
    background-image: none;
}

nav .view header img {
    width: 100%;
    height: auto;
}

nav .view ul {
    margin-top: 5vh;
}

nav .view ul li {
    background: transparent url('../images/icon-home.svg') no-repeat 10% 50%;
    background-size: 12%;
    height: 10vh;
    line-height: 10vh;
}

nav .view ul li:nth-child(even) {
    background-color: #d7d7d7;
}

nav .view ul li a {
    display: block;
    padding-left: 20vw;
    font-size: 4vh;
    text-transform: uppercase;
    font-weight: bold;
}

nav .view ul li.about {
    background-image: url('../images/icon-about.svg');
    background-size: 8%;
    background-position: 11.5% 50%
}

nav .view ul li.calendar {
    background-image: url('../images/icon-cal.svg');
    background-size: 9%;
    background-position: 11% 50%
}

nav .view ul li.donate {
    background-image: url('../images/icon-donate.svg');
}

nav .view ul li.media {
    background-image: url('../images/icon-media.svg');
}

nav .view ul li.contact {
    background-image: url('../images/icon-contact.svg');
    background-size: 7%;
    background-position: 12% 50%
}

.banner img {
    width: 100%;
    height: auto;
}
article {
    padding: 5vw;
}
article h1 {
    position: relative;
    font-size: 8vw;
    z-index: 1;
    overflow: hidden;
    display: block;
    background-color: #fff;
    text-align: center;
    margin-bottom: 2vh;
    font-weight: lighter;
    text-transform: uppercase;
}
article h1:before, article h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 45%;
    height: .4vh;
    content: '\a0';
    background-color: #ccc;
}
article h1:before {
    margin-left: -50%;
    text-align: right;
}
article h1:after {
    margin-left: 5%
}
article p {
    font-size:4vw;
    line-height: 7vw
}
article ul {
    background: transparent url('../images/wave.png') repeat center center;
    margin: 5vw -5vw;
    padding: 5vw;
    font-size:4vw;
    line-height: 7vw
}
article ul li {margin-bottom: 2vh; list-style-type: none;}
.back {position: relative; background:#eee;
display: block; margin: -5vw 0 2.5vh -5vw;width:100vw; padding: 1vh 0; text-align: center;    text-transform: uppercase; font-weight: bold;}
/* =================================== */
/* ============= SPLASH ============= */
/* ================================= */
#splashscreen {
    background: transparent url('../images/splash.png') no-repeat center center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}


/* =================================== */
/* ============== HOME ============== */
/* ================================= */

#home {
    background: transparent url('../images/home.png') no-repeat center center;
    background-size: cover;
}
#home .menuButton {
        text-shadow: 0vh 0vh 1vh #200035;

}
/* =================================== */
/* ============== ABOUT ============= */
/* ================================= */
#about article {padding: 0;}
#about article .box,
.line-box {
    height: 16vh;
    position: relative;
}

#about article .box h2,
.line-box h2 {
    display: block;
    font-size: 8vw;
    margin: 0;
    line-height: 3vh;
    padding-top: 4vh;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #210135;
}

#about article .box h3,
.line-box h3 {
    display: block;
    font-size: 4vw;
    line-height: 10vh;
    margin: 0;
    padding-top: 0vh;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    color: #959595;
}

#about article .box .line,
.line-box .line {
    position: absolute;
    bottom: 0;
    display: block;
    height: 1px;
    width: 100%;
    background: -moz-linear-gradient(left, #020303 0%, #ffffff 8%, #ffffff 92%, #020303 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #020303), color-stop(8%, #ffffff), color-stop(92%, #ffffff), color-stop(100%, #020303));
    background: -webkit-linear-gradient(left, #020303 0%, #ffffff 8%, #ffffff 92%, #020303 100%);
    background: linear-gradient(to right, #020303 0%, #ffffff 8%, #ffffff 92%, #020303 100%);
}
/* =================================== */
/* ============== CAL =============== */
/* ================================= */
#calendar article {padding: 0;}

.event {
    padding: 2vh 5vw;
}

.event:nth-child(even) {
    background-color: #cfcfcf
}

.event-date {
    float: left;
    width: 16vw;
    height: 16vw;
    border-radius: 8vw;
    background-color: #210135;
    text-align: center;
    margin-right: 5vw;
}

.event:nth-child(1) .event-date {
    background-color: #e0b82b
}

.event-month,
.event-day {
    display: block;
    color: #fff;
    text-transform: uppercase;
    font-size: 5vw;
    font-weight: normal;
    line-height: 5vw;
}

.event-month {
    margin-top: 3.5vw;
}

.event-day {
    font-size: 6vw;
    line-height: 6vw;
    font-weight: bold;
}

.event h2 {
    font-size: 5vw;
    line-height: 5vw;
    color: #210135;
    font-weight: bold;
    margin-bottom: .5vh;
}

.event h3 {
    font-size: 4vw;
    line-height: 4vw;
    color: #000;
    font-weight: lighter;
}

.event p {
    font-size: 4vw;
    line-height: 6vw;
    color: #000;
    font-weight: normal;
    display: block;
    position: relative;
    margin-left: 21vw;
}
/* =================================== */
/* ============ SUPPORT ============= */
/* ================================= */



#give article h2 {
    color: #210135;
    text-align: center;
    font-size: 8vw;
    margin: 0 18vw 2vh 18vw;
    font-weight: bold;
    text-transform: uppercase;
}

#give article p {
    margin: 0 18vw;
    text-align: center;
    color: #636363;
    font-weight: normal;
    line-height: 6vw;
    font-size: 5vw;
    margin-bottom: 2vh;
}

.button-purple {
    margin: 0 18vw;
    text-align: center;
    background-color: #2e1041;
    display: block;
    line-height: 5.5vh;
    height: 6.1vh;
    font-size: 4vw;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .2vw;
    border-bottom: .6vh solid #643a7e;
    border-radius: 0 0 .6vh .6vh;
}
/* =================================== */
/* ============= CONTACT ============ */
/* ================================= */

#contact {
    text-align: center;
}

#contact article h4 {
    font-size: 5vw;
    padding-top: 2vh;
    font-weight: bold;
    text-transform: uppercase;
    color: #2e1041;
}

#contact article p {
    font-size: 3.5vw;
    font-weight: normal;
    text-transform: none;
    color: #555555;
}
/* =================================== */
/* ============== HOME ============== */
/* ================================= */

#home a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 10vh;
    width: 10vh;
    z-index: 2;
    float: left;
    line-height: 10vh;
    text-align: center;
    color: #fff;
    font-size: 4vh;
}
/* =================================== */
/* ============ LISTVIEW ============ */
/* ================================= */
#media article {padding: 0;}

.listview {
    list-style-type: none;
}
.listview li a {display: block; 
padding:5vw;}
.listview li:nth-child(even) a {
    background-color: #eee;
}
.listview li a .img {
    background: transparent url('../images/icon-media.png') no-repeat center center;
    background-size: cover;
    width: 8vh;
    height: 8vh;
    float: left;
    margin-right:4vw;
    border-radius: 2vw;
}
.listview li a .img h4 {
    line-height: 2vh;
    text-align: center;
    color:#fff;
    font-size:2vh;
    margin-top: 1.25vh;
    font-weight: lighter;
    text-transform: uppercase;
}
.listview li a .img h5 {
    color:#fff;
    text-align: center;
    line-height: 4vh;
    font-weight: lighter;
    font-size:3.5vh;
}
.listview li a h2 {
    font-size:5vw;
    color: #210135;
    font-size:6vw;
    padding-top:.5vh;
}
.listview li a h3 {
    font-size:4vw;
    color: #444;
    font-size:4vw;
    font-weight: lighter;
    font-style: italic;
}


body .afPopup {
  border: 0;
  background: #000;
  width: 80vw;
  padding: 2vw;
  color: #eee; }
  body .afPopup header, body .afPopup div {
    margin: 0;
    padding: 0;
    font-size: 4vw;
    line-height: 5vw;
    margin-bottom: 1vh;
    text-align: center;
    color: #ccc;
    text-transform: uppercase; }
  body .afPopup div {
    font-weight: lighter;
    font-size: 5vw;
    line-height: 6vw;
    text-transform: none;
    color: #fff; }
  body .afPopup footer {
    background-color: transparent;
    height: 8vh;
    overflow: hidden; }
    body .afPopup footer .button {
      width: 100%;
      background-image: none;
      line-height: 8vw;
      border: 0;
      font-size: 3vw;
      margin: 2vh 0 0 0;
      padding: 0;
      background-color: #222;
      color: #FFC700; }