/* Fundraiser View Page */

body { background: #e4efec; }
#content { background: #f5f5f5; }
.mobile #content { background: #fff; }

.btn { border-radius: 24px; }

.mobile .gb_section_1 .gb_row_1_1 .gb_column { padding: 0; background: #e4efec; }
.gb_column_1_1_1 { min-height: 500px; background-size: cover; background-position: center; padding: 0; }
.gb_column_1_1_2 { min-height: 500px; background: #e4efec; text-align: center; padding-top: 5vw; padding-bottom: 2vw; }
.gb_column_1_1_2 h2 { margin: 0; font-size: 24px; font-weight: 400; color: #000; text-align: center; margin-bottom: 20px; }
.gb_column_1_1_2 h2 + h1 { margin-bottom: 20px; }
.gb_column_1_1_2 h2 img.fundraiser-logo { max-width: 300px; max-height: 150px; }
.mobile .gb_column_1_1_2 h2 img.fundraiser-logo { max-width: 50%; }
.gb_column_1_1_2 .btn { color: #000; background: #ffdc72; margin: 0 10px; font-family: Helvetica, sans-serif; text-transform: uppercase; font-weight: 900; padding: 10px 20px; min-width: 22%; }
.gb_column_1_1_2 .progress-container { width: 75%; margin: 60px auto; }
.gb_column_1_1_2 .progress-raised,
.gb_column_1_1_2 .progress-goal { font-size: 20px; font-weight: bold; }
.gb_column_1_1_2 .progress { margin-top: 10px; box-shadow: none; border-radius: 10px; background: #fff; }
.gb_column_1_1_2 .progress-bar-success { background: #ffdc72; color: #000; box-shadow: none; margin: 2px; height: calc(100% - 4px); border-radius: 8px; }
.gb_column_1_2_1 { min-height: 32vw; background: #fbe39c; padding: 80px 8vw 30px; text-align: center; }
.gb_column_1_2_1 p { font-size: 18px; line-height: 1.8em; }
.gb_column_1_2_2 { min-height: 32vw; background-size: cover; background-position: center; }
.gb_column_1_3_1 { min-height: 25vw; background-size: cover; background-position: center; }
.gb_column_1_3_2 { min-height: 25vw; background: #e4efec; padding: 80px 5vw 30px; text-align: center; }
.gb_column_1_3_2 p { font-size: 18px; line-height: 2em; }
.gb_column_1_3_3 { min-height: 25vw; background-size: cover; background-position: center; }

.gb_column_1_2_1 h2,
.gb_column_1_3_2 h2 { color: #000; font-size: 40px; text-align: center; font-weight: bold; margin-bottom: 20px; }

/**** OVER-100 PROGRESS BAR ****/
.progress.over100 { overflow: visible; position: relative; }
.progress.over100:before               { content: ' '; display: block; position: absolute; width: 3px; height: 15px; right: 0; top:    -20px; background: #f493af; transform: rotate(20deg);  } 
.progress.over100:after                { content: ' '; display: block; position: absolute; width: 3px; height: 15px; right: 0; bottom: -20px; background: #f9ac66; transform: rotate(-20deg); } 
.progress.over100 .progress-bar:before { content: ' '; display: block; position: absolute; width: 3px; height: 15px; right: -10px; top: -15px; background: #f9ac66; transform: rotate(50deg); }
.progress.over100 .progress-bar:after  { content: ' '; display: block; position: absolute; width: 3px; height: 15px; right: -10px; bottom: -15px; background: #f493af; transform: rotate(-50deg); }


@media ( max-width: 480px ) {
	.gb_column_1_1_2 .btn { margin-bottom: 20px; }	
	.embed .gb_column_1_1_2 .btn { margin-bottom: 0; }
	.gb_column_1_1_2 .progress-container { margin-top: 20px; margin-bottom: 20px; }
}
@media ( max-width: 1024px ) {
	.gb_column_1_1_2 { min-height: 0; padding-bottom: 8vw; }
	.widget .gb_column_1_1_2 { padding-bottom: 0; }
}

.gb_section_2 { margin: 0 auto; width: calc(100% - 30px); }
body.embed .gb_section_2 { width: 100% !important; }
@media ( max-width:  767px ) { .gb_section_2 .cells .cell { font-size: 18px; padding: 10px 0; } }
@media ( min-width:  768px ) { .gb_section_2 { width:  720px; } .gb_section_2 .cells .cell { font-size: 24px; line-height: 1.8em; padding: 10px 0; } }
@media ( min-width:  992px ) { .gb_section_2 { width:  940px; } .gb_section_2 .cells .cell { line-height: 1.8em; padding: 10px 0; } }
@media ( min-width: 1200px ) { .gb_section_2 { width: 1140px; } }
.gb_column_2_1_1 { padding-top: 100px; }
.mobile .gb_column_2_1_1 { padding-top: 0; }
.gb_column_2_1_1 #donate { position: relative; top: -30px; }
.mobile .gb_column_2_1_1 #donate { top: -10px; }
.gb_column_2_1_1 h4 { text-align: center; margin-bottom: 50px; }
#content .gb_column_2_1_1 h2 { text-align: left; font-size: 36px; font-weight: bold; margin-bottom: 0; color: #000; }

.mobile .gb_row_2_1 .panel { padding: 0; margin-top: 20px; border: 0; background: none; box-shadow: none; }
.mobile .gb_row_2_1 .panel-heading { padding: 0; background: none; }
.mobile .gb_row_2_1 .panel-heading a.btn { color: #000; background: #ffdc72; border-radius: 24px; margin: 0; font-family: Helvetica, sans-serif; text-transform: uppercase; font-weight: 900; padding: 10px 20px; min-width: 100%; width: 100%; }
.mobile .gb_row_2_1 .panel-group .panel-heading + .panel-collapse > .panel-body { border: 0; margin: 0 20px; padding: 10px 20px 0; background: #e4efec; border-radius: 0 0 8px 8px; }

#legend {  }
@media ( min-width: 1025px ) {
	#legend > div { text-align: right; }
	#legend > div:after { content: ' '; display: inline-block; width: 20px; height: 20px; border: 1px solid #000; margin-left: 5px; position: relative; top: 3px; }
	#legend > div.available:after { background: #fbe39c; border-color: #ffdc72; }
	#legend > div.selected:after { background: #77c2b2; border-color: #77c2b2; }
	#legend > div.sold:after { background: rgba(0,0,0,0.65); border-color: rgba(0,0,0,0.65); }
}
@media ( max-width: 1024px ) {
	#legend > div:before { content: ' '; display: inline-block; width: 20px; height: 20px; border: 1px solid #000; margin-right: 5px; position: relative; top: 3px; }
	#legend > div.available:before { background: #fbe39c; border-color: #ffdc72; }
	#legend > div.selected:before { background: #77c2b2; border-color: #77c2b2; }
	#legend > div.sold:before { background: rgba(0,0,0,0.65); border-color: rgba(0,0,0,0.65); }
	#legend { margin-bottom: 20px; }
	#legend > div { display: inline-block; width: auto; margin-right: 30px; }
}
@media ( max-width: 500px ) {
	#legend > div { margin-right: 20px; }
}


.mobile .cells { margin-left: calc(0.75% - 15px - 0.9375rem); margin-right: calc(0.75% - 15px - 0.9375rem); }


.gb_section_3 .columns { padding-left: 0; padding-right: 0; }


#content h1 { font-weight: 700; text-align: center; }

#donate-bar { display: block; position: fixed; bottom: 0; width: 100%; height: 72px; padding: 10px 0; background: #ffdc72; z-index: 1040; border-top: 5px solid #f5f5f5; }
#donate-bar #donation-total { float: right; font-size: 26px; padding-top: 5px; margin-right: 20px; }
#donate-bar .btn-success { background: #77c2b2; border-color: #77c2b2; }
.cells { margin-bottom: 50px; }

.btn.donate-btn { position: absolute; right: 0; width: 0; padding-left: 0; padding-right: 0; transition: width 0.5s, padding 0.5s; border-radius: 6px; background: #77c2b2; border: 0; z-index: 10; box-shadow: 0px 0px 10px 10px #f5f5f5; }
.btn.donate-btn:hover,
.btn.donate-btn:active,
.btn.donate-btn:focus,
.btn.donate-btn:active:focus { background: #77c2b2; border-color: #77c2b2; }
.btn.donate-btn#donate-btn { margin-top: -75px; }
.btn.donate-btn.show { width: 175px; padding-left: 16px; padding-right: 16px; }

#choose-amount  { display: inline-block; width: 200px; position: relative; top: 1px; border: 2px solid #b7e1d8; box-shadow: none; border-radius: 10px 0 0 10px; font-size: 20px; text-align: center; height: 50px; margin-left: 20px; }
#choose-squares { display: inline-block; width: 120px; position: relative; top: -1px; border: 2px solid #b7e1d8; box-shadow: none; border-radius: 0 10px 10px 0; font-size: 18px; text-align: center; height: 50px; background: #b7e1d8; border-left: 0; line-height: 35px; font-family: Arial, sans-serif; font-weight: bold; text-transform: uppercase; }

#donate-modal .modal-header { background: #ffdc72; border-radius: 6px 6px 0 0; }
#donate-modal .modal-header { padding-top: 12px; padding-bottom: 12px; }
#donate-modal .modal-header .close { margin-bottom: 0; }
#donate-modal .modal-footer { background: #f5f5f5; border-radius: 0 0 6px 6px; }
#donate-modal .modal-footer .btn-primary { background: #77c2b2; border-color: #77c2b2; }
#donate-modal .modal-footer .btn-primary:hover { background: #69ab9d; border-color: #69ab9d; }
@media ( max-width: 400px ) {
	#donate-modal .modal-dialog { margin: 0; }
	#donate-modal .modal-header,
	#donate-modal .modal-footer { border-radius: 0; padding-left: 0.9375rem; padding-right: 0.9375rem; }
	#donate-modal .modal-body { padding-left: 0; padding-right: 0; }
}

#donation-form label { line-height: 1.2em; }
#donation-form input { border-radius: 5px; margin-bottom: 10px; }
#donation-form #amount,
#donation-form #client-name { background: none; border: 0; box-shadow: none; font-weight: bold; font-size: 24px; padding-left: 0; }
#donation-form #address { margin-bottom: 3px; }


#media-gallery { margin-bottom: 0; }
#media-gallery .image { height: 20vw; width: 20%; background-size: cover; background-position: center; float: left; }
#media-gallery .image img { visibility: hidden; }


@media ( max-width: 1024px ) and ( min-width: 768px ) {
	.gb_column_1_1_1 { height: 400px; }
	.gb_column_1_2_1 { padding-top: 50px; }
	.gb_column_1_2_1 p { line-height: 1.4em; }
	.gb_column_1_2_2 { display: none; }
	.gb_column_1_3_1 { display: none; }
	.gb_column_1_3_2 { padding-top: 40px; }
	.gb_column_1_3_3 { display: none; }
	#content { background: #fff; }
}
@media ( max-width: 767px ) {
	.gb_column_1_1_1 { min-height: 400px; height: 400px; }
	.widget .gb_column_1_1_1 { min-height: 200px; height: 200px; }
	.gb_column_1_2_1 { padding-top: 50px; }
	.gb_column_1_2_1 p { line-height: 1.4em; }
	.gb_column_1_2_2 { display: none; }
	.gb_column_1_3_1 { display: none; }
	.gb_column_1_3_2 { padding-top: 40px; }
	.gb_column_1_3_3 { display: none; }
	#content { background: #fff; }
	.cells .cell { min-width: 39px; line-height: 4.5vw; }
}
@media ( max-width: 640px ) {
	#choose-squares { top: -2px; width: 80px; }
}
@media ( max-width: 550px ) {
	.gb_column_2_1_1 h4 span { display: block; margin-bottom: 10px; }
	#choose-amount { margin-left: 0; }
}
@media ( max-width: 480px ) {
	.cells .cell { min-width: 11%; line-height: 6vw; }
	#donate-bar #donation-total { font-size: 22px; }
}
@media ( max-width: 400px ) {
	.cells .cell { min-width: 18.5%; line-height: 8vw; }
}

.StripeElement { 
	box-sizing: border-box; height: 40px; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; background-color: white;
	box-shadow: none; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease;
}
.StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; }
.StripeElement--invalid { border-color: #fa755a; }
.StripeElement--webkit-autofill { background-color: #fefde5 !important; }

/* EMBED HEADER */
.Fundraisers.embed #header { background: #ffdc72; height: 50px; }
.Fundraisers.embed #header #logo { background-image: url('../../img/givingbox-logo.png'); background-repeat: no-repeat; background-position: center; background-size: contain; width: 100px; height: 100px; position: absolute; top: 0; left: calc(50% - 50px); z-index: 1; }
.Fundraisers.embed #content { margin-top: 0; }

/* WIDGET EMBED */
.widget p.fundraiser-buttons { margin-bottom: 0; }

/* VIEW HEADER */
.Fundraisers.view #header { background: #ffdc72; height: 50px; }
.Fundraisers.view #header #logo { background-image: url('../../img/givingbox-logo.png'); background-repeat: no-repeat; background-position: center; background-size: contain; width: 100px; height: 100px; position: absolute; top: 0; left: calc(50% - 50px); z-index: 1; }
.Fundraisers.view #content { margin-top: 0; }

/* DONATION TOOLTIPS */
.tooltip.gb-donation { opacity: 0.95; }
.tooltip.gb-donation .tooltip-inner { background: #e4efec; color: #444; font-size: 18px; border: 1px solid #444; border-radius: 0; }
.tooltip.gb-donation .tooltip-inner:before { content: 'Generously Filled By:'; display: block; font-weight: bold; }
.tooltip.gb-donation .tooltip-inner div.name {  }
.tooltip.gb-donation .tooltip-inner div.date { font-size: 14px; font-style: italic; }
.tooltip.gb-donation .tooltip-arrow { border-top-color: #444; }