/************************************************************************* List View */
/* Use Flexbox for items now */
#volunteerOpps .items { display: block; padding: 0; }

#volunteerOpps .items article { width: 100%; margin: 0 0 4em; text-align: center; }

@media (min-width: 48em) and (max-width: 63.99em) { /* Funny BP, but it will keep the nth-child rules from creating havoc at the next BP... */
  #volunteerOpps .items { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: start; justify-content: flex-start; padding: 0 0 4em; }
  #volunteerOpps .items article { flex-basis: 48%; padding: 0; margin-bottom: 4em; margin-left: 2%; margin-right: 2%; text-align: left; }
  #volunteerOpps .items article:first-child, #volunteerOpps .items article:nth-child(2n+1) { margin-left: 0; }
  #volunteerOpps .items article:nth-child(2n) { margin-right: 0; } }

@media (min-width: 64em) { #volunteerOpps .items { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: start; justify-content: flex-start; padding: 0; }
  #volunteerOpps .items article { flex-basis: 30.666666667%; padding: 0; margin-bottom: 4em; margin-left: 2%; margin-right: 2%; text-align: left; }
  #volunteerOpps .items article:first-child, #volunteerOpps .items article:nth-child(3n+1) { margin-left: 0; }
  #volunteerOpps .items article:nth-child(3n) { margin-right: 0; } }

#volunteerOpps .items article h3 { padding-top: 1rem; }

#volunteerOpps .items article .linked-image + h3 { padding-top: 0; }

#volunteerOpps .items article .button-container { margin-bottom: 0; margin-top: 1em; }

#volunteerOpps .items article .more { margin-bottom: 1em; -webkit-backface-visibility: hidden; }

#volunteerOpps .items article .more > img { -webkit-backface-visibility: hidden; }

article header { /*background: url(../_img/groupfinder_article_more.png) no-repeat 100% 50%;*/ cursor: pointer; padding-right: 12.5%; /*don't creep on the arrow*/ }

article .previewText p { margin-bottom: 0; }

article .details { display: none; border-top: 1px solid #ffffff; padding-top: 2.5%; margin-top: 2.5%; text-align: center; }

.serveThird { padding: 2em; text-align: center; }

.whereText h4 { margin-top: 0; }

.whereText p { margin-bottom: 1em; }

/************************************************************************* Detail View */
#volunteerOpps .return { margin-bottom: 2em; white-space: normal; }

#volunteerOpps .return > span { vertical-align: -1px; }

article.detail { padding: 0; border: none; background: none; }

article.detail header h1, article.detail header h3 { margin-bottom: 5px; }

article.detail header { cursor: default; padding: 0; margin-bottom: 2em; }

article.detail header section { display: block; width: 100%; }

article.detail p.meta span.sep { color: #3c3c3c; font-weight: 700; }

article.detail header aside { float: right; width: 29%; padding: 2.5%; }

article.detail .details { display: block; border-top: none; margin: 0 0 4em; text-align: left; }

article.detail .details section { width: 100%; margin-bottom: 2em; text-align: left; box-sizing: border-box; }

article.detail .details aside { width: 100%; box-sizing: border-box; text-align: center; }

@media (min-width: 48em) { article.detail .details { display: -webkit-box; display: flex; border-top: none; margin: 0 0 4em; text-align: left; }
  article.detail .details section { flex-basis: 70%; padding: 0 3% 0 0; margin-bottom: 0; box-sizing: border-box; text-align: left; }
  article.detail .details aside { flex-basis: 30%; box-sizing: border-box; text-align: center; } }

article.detail .details aside #contact-info { padding: 2em; }

article.detail .details aside h4, article.detail .details aside h5 { text-align: center; line-height: 1.35; }

article.detail .details aside .buttons p { margin: 0; line-height: 1; }

.button-container { display: inline-block; }

.serveThird .iconBox { display: block; width: 100%; margin-bottom: 1.5em; text-align: center; }

.serveThird .iconBox > .icon { font-size: 4em; }

.whereText { display: inline-block; vertical-align: top; width: 64%; }

.serveThird .whereText { width: 100%; }

/* Serve Wide */
.serveWide { display: block; padding: 2em; text-align: center; }

.serveWide .iconBox { display: block; width: 100%; box-sizing: border-box; margin-bottom: 2em; }

.serveWide .iconBox > .icon { font-size: 5em; }

.serveWide .whereText { display: block; width: 100%; box-sizing: border-box; margin-bottom: 2em; }

.serveWide .button-container { display: block; width: 100%; box-sizing: border-box; }

@media (min-width: 64em) { .serveWide { display: -webkit-box; display: flex; padding: 3em; -webkit-box-align: center; align-items: center; text-align: left; }
  .serveWide .iconBox { flex-basis: 17%; box-sizing: border-box; margin-bottom: 0; }
  .serveWide .iconBox > .icon { font-size: 5em; }
  .serveWide .whereText { flex-basis: 62%; box-sizing: border-box; padding-right: 4em; margin-bottom: 0; }
  .serveWide .button-container { flex-basis: 25%; box-sizing: border-box; } }

.serveWide p { margin-bottom: 0; }

.highlight { display: block; text-align: center; padding: 2em; margin: 0 0 2rem; }

.highlight .button-container .btn { white-space: normal; line-height: 1.35; display: block; width: 100%; }

@media (min-width: 48em) { .highlight { text-align: left; padding: 3em; }
  .highlight .button-container .btn { display: inline-block; width: auto; } }

/************************************************************************* GRID STYLES - remove this if site has existing styling */
.div-row { width: 100%; position: relative; margin-bottom: -2rem; } /* negative margin offset the margin that each column will have */

.div-row::after { content: ''; display: block; clear: both; }

.div-row .div-col { float: none; width: 100%; margin: 0 0 2rem 0; padding: 0; }

@media (min-width: 47.9375em) { .div-row .div-col { float: left; margin: 0 0 2rem 4%; } }

@media (min-width: 47.9375em) { .div-row .div-col:first-child { margin-left: 0 !important; } }

.div-row .div-col p:last-child { margin: 0; }

.div-row .div-col p img, .div-row .div-col div img, .div-row .div-col p iframe, .div-row .div-col div iframe, .div-row .div-col p object, .div-row .div-col div object, .div-row .div-col p video, .div-row .div-col div video { margin-bottom: 1em; }

#volunteerOpps iframe, #volunteerOpps .fluid-width-video-wrapper iframe { border: none !important; }

@media (min-width: 47.9375em) { .div-row.one-half .div-col { width: 48%; } }

@media (min-width: 47.9375em) { .div-row.one-third .div-col { width: 30.66666666666667%; } }

@media (min-width: 47.9375em) { .div-row.one-fourth .div-col { width: 22%; } }

@media (min-width: 47.9375em) { .div-row.two-third .div-col { width: 72%; } }

@media (min-width: 47.9375em) { .div-row.two-third .div-col:first-child { width: 24%; } }

@media (min-width: 47.9375em) { .div-row.two-third.right .div-col { width: 24%; } }

@media (min-width: 47.9375em) { .div-row.two-third.right .div-col:first-child { width: 72%; } }

/************************************************************************** HTML 5 considerations */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }