html {
  
  margin: 0;
  padding: 0;
  /* reset box-sizing to border box by default. but if set different carry the switch down to child elements */
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body {
    background: #000 url("../images/David-6-Hero-2024.jpeg") no-repeat right bottom;
    max-height: 100vh;  
    min-width: 100vw; 
    /*background-size: auto 100vw; */
    background-size: cover;
    color: #B8DBE8;
    font-family: 'interstate', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

body#rsvp { background-image: none; background: #9B9B93;  }

a {text-decoration: none;}


section p {line-height: 1.5; font-weight: 300;}

#container {
  padding: 100px 0 0;
  min-height: 100vh;
  overflow:hidden;
 
}

/******      Heading Styles        ******/
#main-hero {
  background: #781311; 
  box-shadow: 0px 5px 0px 0px #fff,0px 15px 0px 0px #003764;
  font-family: 'interstate', sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 2px;
  padding: 1em 0;
  position: fixed; 
  height: 100px;
  width: 100%;
  z-index: 100;
}

#main-hero h1 {
  color: #FFF;
  margin: 0;
  font-weight: 700;
  font-size: 200% /* to set to 32px */
}
#main-hero h2 {color: #fff}

#main-hero h1 a { color:inherit; display:block; text-decoration: none;}
#main-hero h1 a:hover { color:#B8DBE8}

#tag {font-weight: 300; font-size: 97%;/* was 15px */ margin: 0; letter-spacing: 1px;}

.nav-sub {text-transform: uppercase; font-size: 1rem; letter-spacing: 2px; width: 200px}
.nav-sub ul {list-style-type: none; padding-left: 1rem;}
.nav-sub li {line-height: 1.5;}
.nav-sub li a {color:#003764; display: block; min-width: 200px; padding:0.5rem; }
.nav-sub li a:hover {color: #781311; background-color: rgba(255,255,255, 0.5)}
.nav-sub li a::before {content:"\2058"; padding-right: 0.5rem;}
.nav-sub li a:hover:before {content:'\205B'; font-weight: bold}
/******      Main Article Styles. Each Page (article tag) should be 100vh -100px high        ******/

article { padding: 4% 40px 40px; min-height: calc(100vh - 100px); color: #003764;}

article h2 { font-weight:300;}

article h1 {
  font-family: 'interstate', sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 2px;
  border-bottom: 1px solid #585046;
  padding-bottom: 1em;
  margin-bottom: 2em;
}
#bio h1, #support h1, #positions h1 {color: #B8DBE8; border-bottom-color: #B8DBE8;}
#contact h1 {color: #fff; border-bottom-color: #fff;}

/******* Specific "Page" styles   ***********/

/******  First Page "Hero" Article ********/
#hero { font-size: 200%;}
#hero section { margin-left: 10%; }
#hero h3 { color: #003764; font-weight: 300; width: 40%; font-size: 1.5em; }

/******  Next Page "Positions" Article ********/
#positions {
  padding: 2em;
  box-sizing: content-box;
  margin: 0.5em auto;
  font-size: 16px;
  color: #fff;
  background-color: #003764;
  
}
#positions .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.card {
  width: 22rem;
  flex-direction: row;
  margin: 1em;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 1em;
  background-color: #254763;
}
.card-img {
  height: 22rem;
  width: 22rem;
  overflow: hidden;
  border-radius: 50%;
  display: block;
}
.card-img img {
  position: relative;
  right: 50px;
  border-radius:none;
}
.card-body h3 {
  text-align: center;
  color: #5cc5ff;
  font-size: 1.5rem;
  text-transform: uppercase;
}
/******  Second Page "about" Article ********/
#about { background: #9B9B93; color: #fff; font-weight: 300}
  #exp-bio {max-width: 560px; font-size: 18px; line-height: 1.5; padding:0 2em 2em;}


  #about h1 {color: #585046;}
#about h2 {     
    padding: 1em 0;
    border-bottom: 1px solid #fff;
    text-align: center;
    font-weight: 500;
    color: #fff;
	}
  #about section div h2 {
    text-align: left;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
#about ul { margin: 0 0.5em 2.8em; padding: 1em 0 0 1.1em;}
#about li {
	line-height: 1.4;
    margin-bottom: 0.5em;
    font-weight: 400;

	}
#about li em { font-weight: 200; font-size: 14px;}
#exp-bio h3, #bio h2 {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    color: #585046;
}
#bio {background-color: #d9d7d2}
#bio h1 { color: #781311; border-bottom-color: #781311}
#bio h2 { color: #781311; font-size: 1.17em;}
#bio section { float: left; padding: 2em; width: 66%; max-width: 560px;  line-height: 1.5; background-color: rgba(255,255,255,0.15); border-radius: 5px;}
#bio img {display: inline-block; vertical-align: top; width: 100%;}

#bio aside {float: left; width: 32%; padding-left: 3em;}
#bio p {font-weight: 300; color: #403931;}





/******  Third Page "Donate" Article ********/
#support {background: #0a3b61}
#support #donor-box-form {
  width: 423px;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 2em;
  border-radius: 5px;
}
#support #donor-box-form iframe {border-radius: 5px;}

a#donate-now b:before {content: "\2190 "}
#support #donor-box-form h2 { text-align: center; }
#support #donor-box-form.focus h2 { color: #003764;; font-weight: 600;}
#support #donor-box-form.focus {border: 1px solid #59BA41; background: rgba(255,255,255,0.7);}
#volunteer {margin-top: 6em; color: #fff;}
#volunteer .button.button-desc span {padding-left: 32px;}
#volunteer a.button {z-index: 1}
@media (max-width: 962px) {
  #volunteer {margin-top: 0; width: 430px;}
  a#donate-now b:before {content: "\2191 ";}
  #volunteer a.button {z-index: 50; margin:1em 0; }

}


/******  Fourth Page "Contact" Article ********/
#contact {background: #629ecd; color: #FAFAFb}

/*  Contact DL styles for wider screens below  */
.contact dt { 
	font-family: 'interstate', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
	font-size: 14px;
	padding-top:3px;
}
.contact dd {margin: 0 0 1em;}

@media (min-width: 960px) {
.contact dt {
    float: left;
    width: 20%;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact dd {margin-left: 22%;}
}


/* bottom nav place at bottom of veiwport */
#c-menu {display:none;}
#bottom-nav { 
	color: #39393A; 
	font-family: 'interstate', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight:700;
	}
#bottom-nav a { 
	position: fixed; 
	bottom: 20px; 
	color:inherit; 
	text-decoration: none;
	background: rgba(255,255,255,0.33);
	padding: 5px;
	padding: 5px 10px;
    line-height: 32px;
    border-radius: 3px;
	}

#bottom-nav #nav-toggle { left: 20px; width: 42px; height: 42px; line-height: 42px; text-align: center; padding: 0;}
#bottom-nav #nav-toggle i {
    background: url(../images/home-button.svg) center center no-repeat;
    background-size: cover;
    background-size: 66%;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.5;
  }
#bottom-nav #nav-toggle i:hover {opacity: 0.75;}
#bottom-nav #scroll-btn { right: 20px;}

#bottom-nav a:hover {color: #fff;}
#bottom-nav b { font-style:normal; font-weight: 300; }
#bottom-nav i { font-style:normal; font-weight: 700; }
@media (max-width: 700px) {
	#bottom-nav b, #bottom-nav span { 
		display: none;
		}
	#bottom-nav a, #bottom-nav #nav-toggle  { 
		display: block; 
		width: 32px; 
		height: 32px; 
		line-height: 32px; 
		float: right;
		padding: 0;
		text-align: center;
		}
  #bottom-nav #nav-toggle {float:none;}
}


footer {text-align: center; padding: 1em; color: #39393A;}

#pol-ad {text-align: center; width:50%; margin: 0 auto;}

/* Helper Classes  */
.dark-underlay {background: rgba(0,0,0,0.1); border-radius: 5px;}
img {border-radius: 5px;}
.align-left { float: left;}
.align-right { float: right;}

.third { width: 33%; padding-right: 2%}
.two-thirds {width: 66%;}
.row .third:last { padding-right: 0;}


/*.fade-half {opacity: 1;}*  use jquery fadeTo instead */


@media (max-width: 768px) { .third { width: 100%; clear: left; } } /* for ipad portrait and below change to full width */

.cf:after {
    content:"";
    display: table;
    clear: both;
}


.phone a { color: inherit; border-bottom: 1px inherit dotted; text-decoration:none;}

/*******     Animations     ******/

/*****  First page fade in on laod   ******/

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
	opacity:0;  /* make things invisible upon start */
	animation:fadeIn ease-in 1;
	animation-fill-mode:forwards;
	animation-duration:1s;
	animation-delay: 1s;
}



/*********                SLIDE FROM BOTTOM MENU CSS                   ************/




/*************** Buttton Styles *****************************/

.button {
  display: inline-block;
  text-align: center;
  position: relative;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  margin: 5px;
  padding: 0 22px;
  font-size: 14px;
  height: 60px;
  line-height: 60px;
  background-color: #1ABC9C;
  color: #FFF;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: none;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

body:not(.device-touch) .button {
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.button:hover {
  background-color: #444;
  color: #FFF;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.button.button-large {
  padding: 0 26px;
  font-size: 16px;
  height: 46px;
  line-height: 46px;
}

.button.button-xlarge {
  padding: 0 32px;
  font-size: 18px;
  letter-spacing: 2px;
  height: 52px;
  line-height: 52px;
}

.button.button-desc {
  text-align: left;
  padding: 24px 34px;
  font-size: 22px;
  height: auto;
  line-height: 1;
  /*font-family: 'Raleway', sans-serif;*/
}
.button.button-desc span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  /*font-family: 'Crete Round', serif;*/
  font-style: italic;
  text-transform: none;
}

.button i {
  position: relative;
  top: 1px;
  line-height: 1;
  margin-right: 5px;
  width: 16px;
  text-align: center;
}

.button.button-3d {
  border-radius: 3px;
  border-bottom: 3px solid rgba(0,0,0,0.15);
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.button.button-3d:hover {
  background-color: #1ABC9C !important;
  opacity: 0.8;
  border-bottom: 1px solid rgba(0,0,0,0.1);

}

.button.button-3d.button-light:hover,
.button.button-reveal.button-light:hover {
  text-shadow: none;
  color: #333;
}

.button.button-desc {
  text-align: left;
  padding: 24px 34px;
  font-size: 22px;
  height: auto;
  line-height: 1;
}

.button.button-desc span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  font-style: italic;
  text-transform: none;
}

.button.button-border.button-desc { line-height: 1; }


.button-red { background-color: #781311; }
.button-3d.button-red:hover,
.button-reveal.button-red:hover,
.button-border.button-red:hover,
.button-border.button-red.button-fill:before { background-color: #922a28 !important; }

.button-border.button-red {
  color: #922a28;
  border-color: #922a28;
}

.button-dirtygreen { background-color: #1693A5; }
.button-3d.button-dirtygreen:hover,
.button-reveal.button-dirtygreen:hover,
.button-border.button-dirtygreen:hover,
.button-border.button-dirtygreen.button-fill:before { background-color: #1693A5 !important; }

.button-border.button-dirtygreen {
  color: #1693A5;
  border-color: #1693A5;
}

.button-blue { background-color: #003764; }
.button-3d.button-blue:hover,
.button-reveal.button-blue:hover,
.button-border.button-blue:hover,
.button-border.button-blue.button-fill:before { background-color: #1265A8 !important; }

.button-lightblue { background-color: #1265A8; }
.button-3d.button-lightblue:hover,
.button-reveal.button-lightblue:hover,
.button-border.button-lightblue:hover,
.button-border.button-lightblue.button-fill:before { background-color: #003764!important; }

.button-border.button-blue {
  color: #1265A8;
  border-color: #1265A8;
}
.button-border.button-lightblue {
  color: #003764;
  border-color: #003764;
}

.button-green { background-color: #59BA41; }
.button-3d.button-green:hover,
.button-reveal.button-green:hover,
.button-border.button-green:hover,
.button-border.button-green.button-fill:before { background-color: #59BA41 !important; }

.button-border.button-green {
  color: #59BA41;
  border-color: #59BA41;
}

.button-lime { background-color: #AEE239; }
.button-3d.button-lime:hover,
.button-reveal.button-lime:hover,
.button-border.button-lime:hover,
.button-border.button-lime.button-fill:before { background-color: #AEE239 !important; }

.button-border.button-lime {
  color: #AEE239;
  border-color: #AEE239;
}

.button-amber { background-color: #EB9C4D; }
.button-3d.button-amber:hover,
.button-reveal.button-amber:hover,
.button-border.button-amber:hover,
.button-border.button-amber.button-fill:before { background-color: #EB9C4D !important; }

.button-border.button-amber {
  color: #EB9C4D;
  border-color: #EB9C4D;
}

.button-black { background-color: #111; }
.button-3d.button-black:hover,
.button-reveal.button-black:hover,
.button-border.button-black:hover,
.button-border.button-black.button-fill:before { background-color: #111 !important; }

.button-border.button-black {
  color: #111;
  border-color: #111;
}

.button-white { background-color: #F9F9F9; color: #781311}
.button-3d.button-white:hover,
.button-reveal.button-white:hover { background-color: #F9F9F9 !important; }


form #submit-button { margin-left: 0 !important; }
#hero .button {min-width: 200px;}


/************    MEDIA QUEIRIES    ************************ /


/****** Handle background cover image to for larger screens to fit to right edge  **/
@media (min-width: 768px) and (orientation: landscape) { 
  body { background-size: cover; background-position-x: 50%; background-position-y: 100px; } 
  #hero h3 {  margin-top: 3em; width: 50%; }
  .button {margin: 1em}
  #about .button, #bio .button { font-size: 12px; display: block; margin: 1em 0; text-align: center; padding: 0 8px;}
}
@media (min-width: 768px) and (orientation: portrait) { 
  body { background-size: cover; background-position-x: 66%; } 
  #hero h3 {  margin-top: 50%; width: 50%; }
  #hero section {margin: 0;}
  .button {margin: 1em; }

  #about .third  {width: 33%; float: left; }
  #about #exp-bio {float: right;}
  #about #exp-bio p {font-weight: 300;}
  #about .button, #bio .button { font-size: 12px; display: block; margin: 1em 0; text-align: center; padding: 0 8px;}
  #bio .button { font-size: 10px; }


}
@media (max-width: 767px) and (orientation: landscape) { 
  body {background-position-y: -25%; }
  #hero h3 { font-size: 20px; margin-top: 0; width: 50%; }
  .button {height: 40px; line-height: 40px; min-width: 200px; padding: 0 8px; text-align: center; font-size: 12px; margin: 1em 1em 0 0;}
  aside {margin-left: 0;}

  #main-hero h1 { font-size: 150%; }
  #main-hero h2 { font-size: 90%; }
  #main-hero {height: 75px }  

  #exp-bio, #bio section, #bio aside {width: 100% !important; padding: inherit 0; text-align: left;}
  #bio aside img, #about img {padding: 2em; max-width: 360px; margin: 2em auto; }
  .img-group {text-align: center;}
  #main-hero {position: relative;}
  article { min-height: 100vh }

  #container {padding: 0 0 0;}
  #donor-box-form {width: 100%; max-width: 423px; margin: inherit auto;}
    #donate-now { margin: 1em 0; z-index: 50}

}

@media (min-width: 569px) and (max-width: 767px) and (orientation: portrait) { 
  #hero h3 { font-size: .9em; margin-top: 40%; width: 100%; }
  #hero { background-color: rgba(255,255,255,0.7); }
  #about img {max-width: 420px; margin-left: auto; margin-right: auto; display: block;}


}

@media (max-width: 568px) and (orientation: portrait) { 
  article {padding: 4% 10px 10px ;}
  #hero h3 { font-size: .9em; margin-top: 40%; width: 100%; }
  #hero { background-color: rgba(255,255,255,0.7); }
  .button {height: 40px; margin: 1em; line-height: 40px; min-width: 200px; padding: 0 8px; text-align: center; font-size: 12px;}
  #main-hero {position: relative;}
  article { min-height: 100vh }
  #container {padding: 0 0 0;}

  #main-hero h1 { font-size: 150%; }
  #main-hero h2 { font-size: 90%; }
  #main-hero {height: 75px }  

  #exp-bio, #bio section {width: 100% !important; font-weight: 300; font-size: 16px;}
  #bio img {width: 100%; padding: 0;}
  #bio .button, #about .button { display: block; margin: 1em auto; }
  #exp-bio, #bio section, #bio aside {width: 100% !important; padding: inherit 0;  }
  #bio aside img, #about img {padding: 2em; max-width: 360px}
  #bio aside {text-align: center; padding-left: 0;}
  .img-group {text-align: center;}
  #support #donor-box-form {
    width: auto;
    padding: 0;
    border-radius: 0;
  }
  #volunteer {margin-top: 0; width: 100%;}

.card {width: 18rem}
.card-img {width: 18rem; height:18rem;}


  }