:root {
  --main-green: #00aa4f;
  --accent-green: #084;
  --light-green: #aadb1e;
  --main-red: #da1a32;
}

header.banner, header.banner figure, header.banner figure > img {
  width: 100%;
  height: min(calc(100vh - var(--nav-3)),162vw);
}

header > * {text-align:center;margin: 0.618em auto;}

#overview {
  padding-top:1.618em;
  padding-bottom:1.618em;
}

.alert {
  color: var(--main-red);
}

.center {margin: 0 auto;text-align:center;}

#overview header {flex-direction:column;width:100%;}

.occ-logo {margin: 0.618em auto;}

header h4 {
  font-weight: 300;
  margin: 0 auto;
  display: block;
  text-align:center;
}

.ncw {
  border: 1px solid #000;
  margin: 0.618em auto;
  padding: 0.618em;
  border-radius: 0.618em;
}

.callout-box {
  padding: 1.618em;
  border-radius: 0.618em;
  margin-top: 1.618em;
  margin-bottom: 1.618em !important;
  background-color: #fff;
}

:not(.action-container) .donationItem, :not(.action-container) .giving-component {
  max-width: none;
  width: 100%;
}

#drop-off-location {
  padding-top:0;
  padding-bottom:0;
}




#helpful-links {
  background-color: #fff;
  padding-top: 1.618em;
  padding-bottom: 1.618em;
}

#helpful-links .callout-box {
  text-align: center;
  margin: 0 auto;
  border: 1px solid #000;
  max-width: 48ch;
}



#helpful-links ul li {
  list-style: none;
}

#helpful-links h3 {
  text-align: center;
  margin: 0.618em auto;
}

.card {
  padding: 0.618em;
}

.card a, .mapViewItem {
  font-size: 75%;
}

#cards {
  padding-top:2.618em;
}

#printRes {
  margin-top:0.618em;
}

#cards .card .locationName {
  max-width:none;
  padding-bottom:0.618em;
}


/*--Input Fields
------------------------------------*/
#input-fields {position:relative;width:100%; height:100%;margin:0 auto; display:flex; display:-webkit-flex; flex-direction:column; justify-content:center;}

@media(min-width:48em) {
  #input-fields {width:40%}
}

#legend {text-align:center;width:100%;padding:10px 3px;display:flex;justify-content:center;align-items:center;}
#es-legend-text {font-size:80%;padding-left:5px;}
.es-logo {height: 40px;width:auto;}

@media only screen and (max-width: 893px) {
    #input-fields {height:40%;}
    #legend {position:relative}
}

/*--Zip Code Field--*/
#searchBox {margin:0 auto; padding:20px 30px; text-align:center;}
#searchBox p {display:block; font-size:24px; font-weight:400; color:#555; margin:50px auto 0; text-align:center;}
input[type="number"] {width:30%; max-width:200px; min-width:130px; height:50px; text-align:center; font-size:14px; letter-spacing:.05em; border:1px solid transparent; border-radius:5px; margin:0 auto 10px;}
input[type='number'] {-moz-appearance:textfield;} /*--Firefox--*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none; margin:0;} /*--Webkit browsers like Safari and Chrome--*/

/*--Zip Code Input--*/
/*input#address {font-size:14px; font-weight:400; color:#555; text-align:center; width:100%; min-width:200px; height:58px; border-radius:5px; border:1px solid #aaa; margin:0 auto;}*/

/*--Mile Radius Control--*/
.controls {width:50%;font-size:90%;margin:1em;}

/*--Find Locations Button--*/
/*.searchButton {width:100%; min-width:200px; height:58px; font-size:16px; font-weight:500; letter-spacing:.05em; color:#fff; text-align:center; cursor:pointer; background-color:#00853E; border:0; margin:0 auto; border-radius:4px; box-shadow:0 10px 16px rgba(13,13,13,.15);}
.searchButton:hover {background-color:#69be28; text-decoration:none; color:#fff; transition:0.25s;}*/

/*--download form text--*/
.download-form-box {padding:10px 30px;}
.download-form-box-content {}
.download-form-box-content h3 {font-size:16px; line-height:normal; font-weight:400; color:#555;}
.download-form-box-content p {font-size:14px; line-height:normal; font-weight:300; color:#555; text-align:left;}
.download-form-box-content p a {font-weight:400; color:#0d72c7;}


/*--Map
------------------------------------*/
.map-container {width:100%;height:42em; background-color:#f5f5f5; margin:0 auto; display:flex; display:-webkit-flex; align-items:center;flex-direction:column;}

@media(min-width:48em) {
  .map-container {
    flex-direction:row;
    height:65vh;
  }
}




#map_canvas {position:relative; height:100%; width:100%; background-color:#fff;}
@media(min-width:48em) {#map-canvas{border-left:4px solid #fff;}}
#msgContainer {width:100%; margin:0 auto; height:100%; background:#fff; position:absolute; font-size:20px; z-index:9999; text-align:center; opacity:0.4; 
	filter:alpha(opacity=40);/* For IE8 and earlier */ border:1px solid 9999;}
#msg {padding-left:10px; text-align:center; vertical-align:middle; margin:0 auto; /*display:block;*/ display: flex; align-items: center;
    flex-direction: column;
    justify-content: center;}
.gm-style .gm-style-iw {border-radius:1.618em;padding:1.618em;}
#map_canvas > h3 {line-height:normal; margin-top:5px;}
.locationName {max-width:250px;line-height:1.2}
span.doDay {font-weight:500 !important; padding-right:5px !important;}
b, strong {font-weight:500; line-height:normal;}
span.fa.fa-location-arrow {padding-top:5px; display:block; font-weight:400;}
.doDirections {font-weight:500;}


/*--Results
------------------------------------*/
/*--Header--*/
.event-info-head-container {width:100%; padding:0 20px;}
.event-info-head h4 {font-size:30px; font-weight:400; text-align:center; color:#555; margin:0 auto 10px;}
#searchResults {width:100%; max-width:900px; margin:0 auto; padding:30px 0;}
#searchResults > div.event-info-head-container > div > button {display:block; margin:0 auto; font-size:16px; font-weight:300; color:#0D72C4; text-align:center; cursor:pointer; background-color:#fff; border:0px; border-bottom:1px dotted #fff;}
#searchResults > div.event-info-head-container > div > button:hover {border-bottom:1px dotted #0D72C4; text-decoration:none; transition:.25s;}

/*--Results Legend--*/
.legend-container {padding:20px;}
.dropoffAddress {}
.dropoffDates {font-size:13px; margin-top:-5px;}
.dropoffDay {font-weight:700;}

/*--Marker Styles--*/
.event-title {padding-bottom:5px; height:auto;}
.event-icon {width:50px; height:50px; margin-right:20px; vertical-align:middle;}
.event-location {padding-bottom:5px; margin-left:70px}
.event-date {padding-bottom:5px; margin-left:70px}
.event-details {padding-bottom:5px; margin-left:70px}
.event-spacer {padding-bottom:5px; margin-left:70px;} 
.event-share {margin-left:70px}

/*--Events List--*/
/*#eventsList {text-align:center; display:flex; display:-webkit-flex; flex-wrap:wrap; justify-content:center;}*/
/*.eventItem {padding:10px; list-style:none; cursor:pointer; width: 250px; border-radius: 5px; margin:10px; display:inline-block !important; color:#000; font-weight:500; font-size:12px; line-height:18px; border:1px solid #bbb; text-align:left;}
.eventItem a {display:inline-block; padding:10px 5px 10px 0; font-size:14px; font-weight:400;}
span#mapViewIcon {display:inline-block; color:#288c01; text-transform:lowercase; margin-bottom:5px;}
.fa-location-arrow:before {margin:0 5px 0 0;}
.fa-map-marker:before {margin:0 2px 0 0;}
.mapViewItem {font-size:14px; font-weight:400; color:#0d72c7;}
.eventItem h3, .eventItemGray h3 {color:#555; font-weight:400; font-size:24px; line-height:normal;}
.eventItem strong, .eventItemGray strong {color:#555; font-weight:400; font-size:14px; line-height:20px;}
#eventsList h3 {font-size:18px; line-height:normal; font-weight:500; padding:0 0 10px; margin:0;}*/


/*--Print Results Styles
------------------------------------*/
body.printing {opacity:.5;}
.gm-style-iw > div > div > strong, .eventItem > strong {display:block; margin-bottom:0.309em;margin-top:0.309em;}
.eventItemWhite, .eventItemGray {padding:15px 15px 7px !important; width:100% !important; max-width:260px !important; margin:10px !important; align-self:stretch !important;}
#printHeader p {text-align:center; font-size:26px; line-height:34px; font-weight:400; padding:15px 0 0;}
#printFooter {font-weight:300; margin:30px auto 0;}
#printFooter > br:nth-child(1) {display:block !important;}

/*--More Section
------------------------------------*/
.more-container {width:100%; padding:60px 30px 50px; background-color:#f5f5f5;}
.more-content {max-width:600px; margin:0 auto; background-color:#fff; border:1px solid #aaa; padding:30px 10px;}
.more-content h1 {max-width:100%; margin:0 auto; padding:0 0 10px; font-size:21px; font-weight:400; line-height:normal; text-align:center; letter-spacing:.01em; text-transform:none; color:#555;}
.more-content p {font-size:18px; font-weight:300; text-align:center; line-height:normal; text-transform:none; color:#555; margin:0 auto;}
.more-content a {color:#0D72C4; border-bottom:1px solid #fff; display:inline-block; padding:15px 0 0;}
#questions-text {max-width:600px; padding:30px 10px; margin:0 auto; border-width: 0px 1px 1px 1px; border-style:solid; border-color:#aaa; background-color:#fff;}
#questions-text p {margin:0 auto; font-size:16px; font-weight:300; line-height:normal; text-align:center; color:#555;}
#questions-text a {color:#0D72C4; border-bottom:1px dotted #fff;}
#questions-text a:hover {border-bottom:1px dotted #0D72C4; text-decoration:none;}
.basbo-text {width:100%; padding:50px 10px 0; text-align:center; letter-spacing:.01em;}
.basbo-text p {font-size:18px; font-weight:300; line-height:normal; text-align:center; color:#555; margin:0; padding:10px 0 0;}
.basbo-text p span {font-weight:500;}
.basbo-text p a {color:#0D72C4; margin:0; border-bottom:#fff;}
.basbo-text p a:hover {border-bottom:1px dotted #0D72C4; text-decoration:none; margin:0;}
#share-text p {font-size:14px; color:#888; line-height:normal; margin:30px auto 5px; text-align:center;}