html, body {margin: 0; padding: 0;}

@font-face {font-family: 'Krub'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('../fonts/krub-400.woff2') format('woff2'), url('../fonts/krub-400.woff') format('woff');
}
@font-face {font-family: 'Krub'; font-style: normal; font-weight: 500; font-display: block;
  src: local(''), url('../fonts/krub-500.woff2') format('woff2'), url('../fonts/krub-500.woff') format('woff');
}
@font-face {font-family: 'Krub'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('../fonts/krub-600.woff2') format('woff2'), url('../fonts/krub-600.woff') format('woff');
}

@font-face {font-family: 'Limelight'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('../fonts/limelight.woff2') format('woff2'), url('../fonts/limelight.woff') format('woff');
}

body {font-family: 'Krub', Arial, Helvetica, sans-serif; font-variant-ligatures: none;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; background-color: #FF0;}

a, a:visited, a:hover {text-decoration: none; outline: none;}
#bottomarea a, #nav a {text-decoration: none !important;}

img {border: 0; image-rendering: -webkit-optimize-contrast;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;}
.phlink:hover {cursor: text;}

/*-----------------------------------------------*/


/*HEADER*/

@media (min-width: 1150px) and (max-width: 1399px) {#header {max-width: 1100px;}}

#headertop {position: relative; height: 20px; background:url('../lights.png'); background-repeat: repeat-x; background-size: 16px; background-position: center; background-color: #000000;}
#headertop.btmlites {height: 15px; background-size: 12px;}

#headerback {position: relative; height: 105px; background:url('../curtain.jpg'); background-repeat: no-repeat; background-size: auto; background-position: center;}
#header {margin: auto;} #header table {width: 100%; padding: 0 10px 0 0;}
#header td {vertical-align: top;} #header img {width: 100px;}
@media (min-width: 480px) {#header img {position:relative; animation:animatebottom_logo 1.2s;}}
#logo {width: 290px;}
#header img {z-index: 0; float: left;}
.logotext {position:relative; z-index: 1; font-family: 'Limelight', Arial, Helvetica, sans-serif; font-size: 24px; line-height: 28px; color: #B4DDFF; text-shadow: -20px -1px 45px #0087E6, 20px -1px 45px #0087E6, -1px 1px 15px #0087E6, 1px 1px 45px #0087E6; /*-webkit-text-stroke: 1px 24679B;*/ margin: 23px 0 0 -6px;}
.logotext span {display: block;}
#phaddr {text-align: right; position: relative;}
#addr {margin-top: 5px; font-size: 16px; line-height: 21px;}
#phone {margin-top: 9px; font-size: 24px; font-weight: 600;}

@media (max-width: 625px) {
#header table {width: 100%; padding: 0 6px 0 0;}
#addr {margin-top: 1px; font-size: 14px; line-height: 18px;}
#addr .comma {display: none;}
#addr .nextline {display: block;}
#phone {margin-top: 7px; font-size: 20px;}
.logotext {font-size: 22px; line-height: 26px; margin: 25px 0 0 -6px;}
#logo {width: 275px;}
#headerback {background-size: cover; background-position: center; }
}

@media (max-width: 460px) {
#headertop {background-size: 12px;} #headertop.btmlites {height: 14px; background-size: 10px;}
#headerback {height: auto;} #header table {width: 100%; padding: 0;} #header td {display: block;}
#phaddr {text-align: center; width: 100%; margin-top: 10px;}
#addr .comma, #addr .nextline {display: inline;}
#header img {width: 90px; float: none; margin-top: -5px;}
#logo {width: 100%; margin: auto !important; text-align: center;}
.logotext {margin: 0 auto;} .logotext span {display: inline;}
#phone {margin: 6px auto 8px auto; font-size: 22px;}
#social {right: 8px !important;}
}

@media (max-width: 300px) {
.logotext span, #addr .nextline {display: block;} #addr .comma {display: none;} #header img {width: 80px;}
.logotext {margin: -10px auto 0 auto;} #phaddr {margin-top: 7px;} #phone {font-size: 20px;}
}

#social {z-index: 20; position: absolute;}
@media (min-width: 626px) {#social {height: 20px; width: 70px; background:url('../fb.gif'); background-size: 70px 20px; right: 0px; bottom: 0;}}
@media (max-width: 625px) {#social {height: 22px; width: 22px; background:url('../fb-sm.gif'); background-size: 22px 22px; right: 0px; bottom: 0;}}

/*-----------------------------------------------*/

/*TOP PIC*/

@keyframes kenburns {
45% {transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, -10px, 0px); animation-timing-function: ease-in;}
100% {transform: scale3d(1, 1, 1) translate3d(0, 0, 0); animation-timing-function: ease;}
}

@keyframes zoom {0% {transform: scale(0.5,0.5);} 5% {transform: scale(1,1);}}

@keyframes animatebottom_logo {
    10% {opacity: 0; bottom: -40px; animation-timing-function: ease-out;}
	20% {opacity: 0;} 100% {opacity: 1; bottom: 0px;}
}

@keyframes animatetop{from{top:-70px;opacity:0} to{top:0;opacity:1}}
@keyframes animatebottom{from{bottom:-100px;opacity:0} to{bottom:0;opacity:1}}

#toppicback {position: relative; overflow: hidden;}
#toppictext {position: absolute; width: 100%; height: 100%; text-align: center; z-index: 1;}
h1 {padding: 0 10px 18px 10px; font-weight: 400; color: #FFFFFF; margin: auto; font-family: 'Caveat', Arial, Helvetica, sans-serif; font-weight: 400;}
#slogan {font-family: 'Caveat', Arial, Helvetica, sans-serif; font-weight: 700; color: #FFDA0A;}

@media (min-width: 480px) {
#picholder {position: relative; animation: kenburns 20s /*infinite*/;}
#slogan { position:relative; animation: animatetop 0.7s;}
h1 {animation: zoom 15s;}
}

/*-----------------------------------------------*/

/*MENU*/

.nav, .nav a {-webkit-tap-highlight-color:transparent;} .nav a:hover {background: none;}

.nav .selected, .nav .selected:hover {cursor: text;}
.nav {display:none; position: relative; z-index:900; line-height: 55px;}
.nav ul {display:block; position:relative; zoom:1; list-style-type:none; margin:0; padding:0;}
.nav ul ul li {line-height: 45px;}
.nav a {display:block; position:relative; text-decoration:none; font-size: 16px; cursor: pointer;}
.nav .nav-submenu>a:after {position:absolute; display:block; right:10px; top:1px;}

@media (min-width:1071px) {.nav a {padding:0 25px 1px 25px;}}
@media (min-width:901px) and (max-width:1070px) {.nav a {padding:0 15px 1px 15px;}}
@media (max-width:900px) and (min-width:746px) {.nav a {font-size: 14px; padding:0 10px 1px 10px;}}
@media (max-width:745px) {.nav a {padding:0 15px 1px 15px;}}

@media (min-width:746px) {
#navhead, .nav-button {display: none;}
.nav {display:block; position:relative; overflow:visible; padding:0; margin: auto; text-align: center;}
.nav ul {display:block}
.nav li {position:relative; text-align: left; white-space:nowrap;}
.nav>ul>li {display:inline-block; border-top:none}
.nav li>ul {box-shadow:0 2px 5px 0 rgba(0,0,0,.75)} /*sublink shadow*/
.nav ul ul {display:none; position:absolute; top:100%; left:0; z-index:901}
.nav-no-js .nav li:hover>ul {display:block}
.nav .nav-submenu>ul {margin:0} /*position of sublinks under parent link*/
}

@media (max-width:745px) {
#navhead {position: relative; width: 100%; height: 50px; display:block; top:0; left:0; right:0; z-index:901;}
.nav-button {position: absolute; left: 0; right: 0; text-align: center; margin: 7px auto 0 auto; width: 30px; z-index: 902; padding: 8px; cursor: pointer; border-radius: 6px; -webkit-border-radius: 6px;}.nav-button span {display: block; background: url("../navlines_white.png") no-repeat center; background-size: 28px 19px; height: 19px; width: 28px; margin: auto;}
.nav ul li {line-height: 45px;}
.nav .nav-submenu>ul {padding-left: 15px}
.nav ul ul a::before {content: "\2022"; display: inline-block; padding-right: 7px; color: #FFF;} /*bullet before sublinks*/
}

/*-----------------------------------------------*/


/*BODY AREA*/

.bodyarea, h2 {font-size: 21px !important; line-height: 1.65 !important; font-weight: 400;}

@media (min-width: 1400px) {.bodyarea, #header {width: 90%;}}
@media (min-width: 1180px) {.bodyarea {margin: 0px auto auto auto; padding: 10px 0 20px 0;}}
@media (min-width: 1180px) and (max-width: 1399px) {.bodyarea {max-width: 1100px;}}
@media (max-width: 1179px) {.bodyarea {padding: 10px 25px 20px 25px;}}
@media (max-width: 920px) {.bodyarea {padding: 4px 20px 20px 20px;}}
@media (max-width: 400px) {.bodyarea, h2 {font-size: 20px !important;}}

.bodyhead {font-weight: 600; font-size: 30px; line-height: 37px; text-align: center; margin-top: 20px; text-transform: none;}
.bodyhead2 {font-size: 18px; line-height: 25px; font-weight: 400; text-align: center; margin: 3px auto 20px auto;}

@media (max-width: 399px) {
.bodyarea {padding: 0 15px 20px 15px;} .bodyhead {font-size: 27px; line-height: 33px;} .bodyhead2 {display: none;}
}

.heading, h3 {font-weight: 600; font-size: 26px; line-height: 32px; margin: 0 !important; padding: 0 !important;}
.heading2 {font-weight: 500; font-size: 1.1em; line-height: 1.1em; text-decoration: underline;}

.section .bodyarea {padding: 25px; margin: auto; font-size: 17px; line-height: 24px;}

/*-----------------------------------------------*/

/*Misc*/

.supporthead {font-weight: 600; text-transform: uppercase; font-size: 26px; line-height: 30px;}
@media (max-width: 370px) {.supporthead {display: inline-block; text-align: center; margin: auto; width: 100%;}}
@media (max-width: 350px) {.supporthead {font-size: 24px; line-height: 28px;}}

#otherways {text-align: center; font-weight: 600; margin: 40px auto;}
#otherways, #otherways a {color: #376ABB;}
#otherways a {background-color: #FCD94D; padding: 5px 10px 8px 10px; border: 1px solid #fdb405; border-radius: 4px; box-shadow: 1px 1px 2px 0px #333333; cursor: pointer; font-size: 24px; line-height: 30px; width: auto; text-align: center; display: inline-block;}
#otherways a:hover, #otherways a:active {background-color: #ffea38; box-shadow: inset 1px 1px 2px #bf7e00; margin-left: 3px !important;}

@media (max-width: 370px) {#otherways {margin: 30px auto;} #otherways span {display: block;}}

#donate {margin: 10px auto 15px auto;}
#thankyou {margin: 120px auto auto auto; padding: 0 20px; font-size: 48px; line-height: 55px; font-weight: 600; text-align: center;}
#thankyou2 {margin: 40px auto 130px auto; padding: 0 20px; font-size: 32px; line-height: 40px; font-weight: 600; text-align: center;}
@media (max-width: 480px) {
#thankyou {margin: 80px auto auto auto; font-size: 38px; line-height: 48px;}
#thankyou2 {margin: 30px auto 100px auto; font-size: 22px; line-height: 32px;}
}

/*-----------------------------------------------*/

/*BOTTOM AREA*/

#bottomarea {text-align: center; font-size: 13px; line-height: 21px; padding: 10px 0 0 0; font-family: Arial, Helvetica, sans-serif;}
.copy {padding-bottom: 5px;}
#social img {text-align: center; margin: 0 auto 10px auto;}

.btmcont a {display: block; margin-top: 8px; font-size: 18px;} .btmcont a:hover {text-decoration: none !important;}
.tb {font-style: italic;} .tb:hover {text-decoration: underline !important;}

#btm_menu {text-align: center; font-size: 14px; line-height: 28px; padding: 10px 8px 10px 8px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; margin: 10px auto 0 auto;}
#btm_menu span {text-transform: uppercase; text-decoration: underline; font-weight: 600; display: block;}
#btm_menu a {text-decoration: none; white-space: nowrap;}
#btm_menu a::after {content: " | "; padding: 0 4px;}
#btm_menu a.last::after {content: "";}
#btm_menu a:hover {text-decoration: underline !important;}

@media (max-width: 410px) {.btmcont span, .web a {display: block;}} @media (max-width: 320px) {.btmco span {display: block;}}


/*====================================================*/


/*COLORS*/

.section1 {background-color: #dde4ec;}
.section2 {background-color: #fcd94d;}
.section3 {background-color: #FEE17F;}
.section4 {background-color: #ABE689;}
.section5 {background-color: #85E5C8;}
.section6 {background-color: #96CDE9;}
.section7 {background-color: #9EBAEA;}
.section8 {background-color: #C5AFEE;}
.section9 {background-color: #E3BCF1;}

#mapinfo {color: #FFF !important;}
#headerback {background-color: #000000;}
#phaddr, #phone, #phone a {color: #92CDFB;}

body {background-color: #FFF; color: #02142A;} a, a:visited, a:hover {color: #376ABB;}
.bodyhead, .heading, h3 {color: #0E59A5;} .bodyhead2 {color: #777;}

/*Menu Colors*/
.nav .selected, .nav .selected:hover {background-color: #022C56;}
.nav a,.nav a:active,.nav a:hover,.nav a:visited {color: #FFF;}
#navhead, .nav ul {background-color: #000}
.nav ul ul {background: #222} /*sublinks*/
.nav li {border-top:1px solid #284763;}
.nav li.nav-active>a,.nav li:hover>a, .nav-button:hover {color:#FFF; background:#063D70;}

#bottomarea, #bottomarea a, #btm_menu a {color: #FFF;} #bottomarea {background-color: #022C56;}
#btm_menu {background-color: #000; color: #888;}
.tb, .tb a {color: #F8DA11 !important;}
.tb:hover {color: #FF6 !important;}