:root{
    --purple: #7D4199;
    --font-body: "new-atten-round", sans-serif
}
html{
	-webkit-font-smoothing: antialiased;
}
body{
	background:url("../images/bg-image.jpg") no-repeat top center #262626;
	width:100%;
	background-size: 100%;
	background-attachment: fixed;
	margin:0;
	font-size:18px;
	line-height: 1.4em;
	color:#ffffff;
	font-family: var(--font-body);
	font-weight: 400;
}
*{
	box-sizing: border-box;
}
p{
	margin:0 0 16px 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mbl-show{
	display: block;
}
.dsk-show{
	display: none;
}

@media (min-width: 1060px) {
	.mbl-show{
	display: none;
	}
	.dsk-show{
		display: block;
	}
}
.pmdc-bg-image{
	width:100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding:40px 0;
}
@media (min-width: 750px) {
	.pmdc-bg-image{
		padding:150px 0;
	}
}
.pmdc-wrapper{
	width:100%;
	max-width: 338px;
	margin:0 auto;
}
@media (min-width: 750px) {
	.pmdc-wrapper{
		width:616px;
		max-width: 616px;
		margin:0 auto;
		padding:0;
	}
}
@media (min-width: 1060px) {
	.pmdc-wrapper{
		width:1040px;
		max-width: 1040px;
		margin:0 auto;
		padding:0;
	}
}
/*LOGO  FADE IN*/
@keyframes pmdcFadeInLogo {
    0% {
        opacity: 0; 
		visibility: hidden; 
    }
	
    100% {
        opacity: 1; 
		visibility: visible;
    }
}

.pmdc-logo-back-container{
	margin-bottom: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.top-logo-animation{
	animation-name: pmdcFadeInLogo;
    animation-duration: 0.5s;
    animation-delay: 2.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
	opacity: 0; 
	visibility: hidden;
}
#backButton{
	background:none;
	border:none;
	text-transform: uppercase;
	color:#ffffff;
	font-size:20px;
	display: flex;
	gap:8px;
	text-decoration: none;
}
@keyframes growWidth { 
	0% { 
		width: 330px; 
	}

	100% { 
		width: 100%;
	} 
} 

#pmdc-content-container{
	border:1px solid #ffffff;
	background:rgba(0,0,0,0.45);
	padding:40px 32px;
	border-radius:16px;
	min-height: 330px;
	margin:0 auto;
}
.content-container-animation{
	width:330px;
	/* Apply the animation */ 
	animation-name: growWidth; 
	/* Name of our keyframe animation */ 
	animation-duration: 0.5s; 
	/* How long the animation takes to complete its growth */ 
	animation-delay: 2.8s; 
	/* The delay before the animation starts */ 
	animation-timing-function: ease-in-out; 
	/* Smooth start and end */ 
	animation-fill-mode: forwards; 
}
@media (min-width: 750px) {
	@keyframes growWidth { 
		0% { 
			width: 500px; /* Starting width */ 
		}

		100% { 
			width: 100%; /* Final width */ 
		} 
	}
	.pmdc-content-container{
	padding:56px 40px;
	width:500px;
	min-height: 500px;
	}
}
@media (min-width: 1060px) {
	@keyframes growWidth { 
		0% { 
			width: 434px; /* Starting width */ 
		}

		100% { 
			width: 100%; /* Final width */ 
		} 
	}
	.pmdc-content-container{
	padding:56px 40px;
	width:434px;
	min-height: 440px;
	}
}
/*INTRO SCREEN FADE OUT*/
@keyframes pmdcFadeOut {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0; 
        visibility: hidden; 
		height:0;
		overflow: hidden;
    }
}
#pmdc-intro{
    animation-duration: 0.8s;
    animation-delay: 2.5s;
    animation-name: pmdcFadeOut;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
#pmdc-intro img{
	margin:0 auto;
	display: none;
	height:auto;
	max-width: 100%;
	width:100%;
}
@keyframes pmdcFadeOutCopy {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0; 
        visibility: hidden; 
    }
}
#pmdc-intro-copy{
	text-align:center;
	letter-spacing: 0.7px;
	font-size: 24px;
	line-height:1.2em;
	margin-top:24px;
    animation-duration: 0.8s;
    animation-delay: 2.5s;
    animation-name: pmdcFadeOutCopy;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
@media (min-width: 1060px) {
	#pmdc-intro-copy{
		margin-top:30px;
		font-size: 30px;
	}
}
/*CALCULATOR SCREEN*/
/* CALCULATOR FADE IN */
@keyframes pmdcFadeInCalc {
    0% {
        opacity: 0; 
		visibility: hidden; 
		height:0;
		overflow: hidden;
    }
	50%{
		height:auto;
	}
    100% {
        opacity: 1; 
		visibility: visible;
		height:auto;
		overflow: visible;
    }
}
.calculatorFormAnimation{
	opacity: 0; 
	visibility: hidden;
	height:0;
	overflow: hidden;
	animation-name: pmdcFadeInCalc;
    animation-duration: 1s;
    animation-delay: 3.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
#calculatorForm{
	width:100%;
}
.calculatorNoAnimation{
	width:100%;
	opacity: 1; 
	visibility: visible;
	height:auto;
	overflow: visible;
}
.pmdc-form-flex{
	display: flex;
	flex-wrap: wrap;
	gap:30px;
	font-size:18px;
	line-height:1.4em;
	width:100%;
}
@media (min-width: 750px) {
	.pmdc-form-flex{
		font-size:24px;
		padding:24px 68px;
	}
}
@media (min-width: 1060px) {
	.pmdc-form-flex{
		gap:58px;
		padding:0;
	}
}
.pmdc-calc-right{
	width:100%;
}
.pmdc-calc-left{
	width:100%;
}
@media (min-width: 1060px) {
	.pmdc-calc-right{
		width:350px;
	}
	.pmdc-calc-left{
		width:550px;
	}
}
label{
	margin-bottom: 16px;
}
#calculatorForm h1{
	color:#ffffff;
	font-size:30px;
	line-height:1.1em;
	font-weight: 400;
	margin:0 0 16px 0;
}
@media (min-width: 750px) {
	#calculatorForm h1{
	font-size:38px;
	margin:0 0 24px 0;
	}
}
.pmdc-field-container{
	border:2px solid #ffffff;
	display: flex;
	flex-wrap: wrap;
}
@media (min-width: 1060px) {
	.pmdc-field-container{
	flex-wrap: nowrap;
	}
}
.pmdc-field-container input[type="number"]{
	font-size:50px;
	color:#ffffff;
	background:none;
	width:100%;
	text-align: center;
	padding:22px 25px;
	border:none;
	-moz-appearance: textfield;
	font-family: var(--font-body);
	font-weight: 400;
}
.pmdc-field-container input[type="number"]::placeholder{
	color:#BEBEBE;
}
.pmdc-field-container input[type="number"]:focus::placeholder {
  color: transparent; /* Makes the placeholder text invisible */
}

/* For older browser compatibility */
.pmdc-field-container input[type="number"]:focus:-moz-placeholder {
  color: transparent;
}

.pmdc-field-container input[type="number"]:focus::-webkit-input-placeholder {
  color: transparent;
}

.pmdc-field-container input[type="number"]:focus:-ms-input-placeholder {
  color: transparent;
}
.pmdc-field-container input[type="number"]::-webkit-outer-spin-button,
.pmdc-field-container input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (min-width: 750px) {
	.pmdc-field-container input[type="number"]{
	font-size:80px;
	}
}
@media (min-width: 1060px) {
	.pmdc-field-container input[type="number"]{
	font-size:120px;
	padding:30px 25px;
	width:calc(100% - 200px);
	}
}
/* --- Custom Listbox Styles --- */ 
		.custom-select-wrapper { 
			position: relative; 
			width: 100%; 
			display: inline-block; 
		} 
		.custom-select-display { 
			padding: 16px 24px; 
			background-color: rgba(255,255,255,0.1); 
			cursor: pointer; 
			font-size: 22px; 
			text-transform: uppercase;
			display: flex; 
			justify-content: center; 
			align-items: center; 
			outline: none; 
			height: 100%;
		} 
		@media (min-width: 750px) {
			.custom-select-display { 
				font-size: 28px; 
			}
		}
		@media (min-width: 1060px) {
			.custom-select-wrapper { 
				width:200px;
			}
			.custom-select-display { 
				justify-content: flex-start; 
			}
		}
		.custom-select-display:focus { 
			/*border-color: #345FCC; 
			box-shadow: 0 0 0 1px rgba(52, 95, 204, 0.6); 
			background-color: rgba(255,255,255,0.2);*/
			background-color:rgba(125,65,153,0.8);
		} 
		.custom-select-display::after { 
			content: url(../images/select-chevron.svg); 
			width:24px;
			height:24px;
			font-size: 0.8em; margin-left: 10px; 
			transition: transform 0.2s ease; 
			position: absolute;
			right:16px;
		} 
		.custom-select-display.expanded::after { 
			transform: rotate(180deg); 
		} 
		.custom-select-list { 
			list-style: none; 
			padding: 16px 16px 12px 16px; 
			margin: 0;  
			position: absolute; 
			width: 100%; 
			background-color: var(--purple);
			z-index: 10; 
			box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
			max-height: 200px; 
			overflow-y: auto; 
			display: none; 
		} 
	
		.custom-select-list li { 
			padding: 8px; 
			margin-bottom: 4px;
			cursor: pointer; 
			font-size: 22px; 
			white-space: nowrap; 
			border-radius:8px;
			text-transform: uppercase;
			color:white;
			border:1px solid var(--purple);
		} 
		@media (min-width: 1060px) {
			.custom-select-list li{
				font-size:28px;
			}
		}
		.custom-select-list li:hover, .custom-select-list li.focused { 
			background-color: var(--purple);
			color:white;
			border:1px solid #ffffff;
		} .custom-select-list li.selected { 
			background-color: white; 
			color: #000; 
		} 
.pmdc-keypad {
	margin-top:0px;
}
@media (min-width: 1060px) {
	.pmdc-keypad {
		margin-top:48px;
	}
}
.pmdc-keypad p{
margin:0 0 24px;	
}
.keypad-row{
	display: flex;
	gap:8px;
	margin-top: 8px;
}
#pmdc-form .number-btn, #pmdc-form .clear-button{
	font-size:36px;
	border-radius:8px;
	border:1px solid #ffffff;
	font-weight: bold;
	width:50px;
	height:50px;
	text-align: center;
	background:none;
	color:#ffffff;
	cursor: pointer;
	font-family: var(--font-body);
	padding:0;
}
#pmdc-form .number-btn:focus, #pmdc-form .number-btn:hover, #pmdc-form .clear-button:focus, #pmdc-form .clear-button:hover{
	background:var(--purple);
}
#pmdc-form .clear-button img{
	width:25px;
	height:auto;
	margin:0 auto;
}
@media (min-width: 750px) {
	#pmdc-form .number-btn, #pmdc-form .clear-button{
		font-size:52px;
		width:76px;
		height:76px;
	}
	#pmdc-form .clear-button img{
		width:38px;
	}
}
@media (min-width: 1060px) {
	#pmdc-form .number-btn, #pmdc-form .clear-button{
		font-size:44px;
		width:64px;
		height:64px;
	}
	#pmdc-form .clear-button img{
		width:32px;
	}
}
#pmdc-form .calculate-btn{
	font-size:22px;
	border-radius:8px;
	font-weight: bold;
	height:50px;
	text-align: center;
	background:#ffffff;
	color:#000000;
	cursor: pointer;
	border:none;
	text-transform: uppercase;
	padding:12px 50px;
	line-height: 1em;
	width:calc(100% - 58px);
	font-family: var(--font-body);
}
#pmdc-form .calculate-btn:focus, #pmdc-form .calculate-btn:hover{
	background: var(--purple);
	color:#ffffff;
}
@media (min-width: 750px) {
	#pmdc-form .calculate-btn{
	font-size:33px;
	height:76px;
	padding:15px 65px;
	width:calc(100% - 84px);
	}
}
@media (min-width: 1060px) {
	#pmdc-form .calculate-btn{
	font-size:22px;
	height:64px;
	padding:15px 65px;
	width:calc(100% - 72px);
	}
}
#error-message{
background:#BE1919;
color:#fff;
text-transform: uppercase;
font-size:14px;
line-height: 1.5em;
padding:4px 4px 4px 28px;
position: relative;
display: none;
}
#error-message:before{
	content:'';
	background:url(../images/icon-error.svg);
	background-size:100%;
	background-repeat: no-repeat;
	width:16px;
	height:16px;
	position: absolute;
	left:4px;
	top:50%;
	margin-top:-8px;
}

/* POST CALCULATION SCREEN */
#displayResultContainer{

}
#displayResultContainer h1{
	font-size:30px;
	font-weight: 400;
	text-transform: uppercase;
	width:100%;
	margin:0;
	line-height:1.1em;
}
@media (min-width: 750px) {
	#displayResultContainer h1{
	font-size:50px;
	}
}
@media (min-width: 1060px) {
	#displayResultContainer h1{
	width:50%;
	}
}
.results-top{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
@media (min-width: 1060px) {
	.results-top{
		flex-wrap: nowrap;
	}
}
.results-right{
	width:100%;
}
@media (min-width: 1060px) {
	.results-right{
	width:50%;
	}
}
.results-right .button{
	font-size:16px;
	line-height: 1.2em;
	border-radius: 0 0 8px 8px;
	background: var(--purple);
	color:#ffffff;
	text-align: center;
	width:100%;
	padding:12px 12px;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	border:2px solid #ffffff;
}
.results-right .button:hover{
	background:#ffffff;
	color: var(--purple);
}
.new-date-container{
	border:2px solid #ffffff;
	border-bottom: none;
	padding:30px 16px;
	width:100%;
	font-size:56px;
	text-transform: uppercase;
	text-align: center;
	margin-top:16px;
}
@media (min-width: 1060px) {
	.new-date-container{
		padding:32px 16px;
		margin-top:0;
	}
}


.book-brunch{
	background:rgba(255,255,255,0.1);
	padding:16px;
	margin-top:32px;
}
@media (min-width: 750px) {
	.book-brunch{
	padding:40px;
	margin-top:40px;
	}
}
@media (min-width: 1060px) {
	.book-brunch{
	margin-top:64px;
	}
}
.book-brunch .title-cta{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap:24px;
}
.book-brunch h2{
	font-weight:400;
	font-size:20px;
	line-height: 1.3em;
	margin:0;
	width:100%;
}
@media (min-width: 750px) {
	.book-brunch h2{
		font-size:30px;
	}
}
@media (min-width: 1060px) {
	.book-brunch h2{
		width:calc(100% - 384px);
	}
}
.book-brunch .button{
	font-size:16px;
	border-radius: 8px;
	background:#ffffff;
	color:#000000;
	text-align: center;
	width:100%;
	padding:12px 12px;
	text-decoration: none;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	gap:10px;
}
@media (min-width: 1060px) {
	.book-brunch .button{
		width:360px;
	}
}
.book-brunch .button:hover{
	background:var(--purple);
	color:#ffffff;
	text-decoration: none;
}
.book-brunch .button svg{
	width:100px;
	height: auto;
}
@media (min-width: 750px) {
	.book-brunch .button svg{
	width:126px;
	}
}
.book-brunch .button:hover path{
	fill:#ffffff;
}

.fresh-block{
	background:var(--purple);
	color:#ffffff;
	padding:16px;
	margin-top:32px;
	font-size:16px;
	display: flex;
	flex-wrap: wrap;
	gap:16px;
}
@media (min-width: 750px) {
	.fresh-block{
		margin-top:40px;
		gap:24px;
		padding:24px;
	}
}
@media (min-width: 1060px) {
	.fresh-block{
		flex-wrap: nowrap;
		padding:24px 40px 24px 24px
	}
}
.fresh-block .logo-copy{
	width:100%;
	position: relative;
	font-size:18px;
	line-height: 1.3em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding:0 0 16px 0;
}
@media (min-width: 750px) {
	.fresh-block .logo-copy{
		font-size:24px;
		gap:24px;
		flex-wrap: nowrap;
		padding:0 0 30px 0;
	}	
}
@media (min-width: 1060px) {
	.fresh-block .logo-copy{
		width:50%;
		padding:0 24px 0 0;
	}	
}
.fresh-block .logo-copy:after{
	position: absolute;
	content:'';
	border-bottom:2px solid rgba(255,255,255,0.5);
	bottom:0;
	left:50%;
	margin-left:-32px;
	width:64px;
}
@media (min-width: 750px) {
	.fresh-block .logo-copy:after{
		width:192px;
		margin-left:-96px;
	}	
}
@media (min-width: 1060px) {
	.fresh-block .logo-copy:after{
		width:auto;
		height:64px;
		margin-left:0;
		left:auto;
		bottom:auto;
		border-bottom:none;
		border-right:2px solid rgba(255,255,255,0.5);
		right:0;
		top:50%;
		margin-top:-32px;
	}	
}
.fresh-block .logo-copy p{
	width:100%;
	margin:16px 0 0 0;
}
@media (min-width: 750px) {
	.fresh-block .logo-copy p{
		width:auto;
		margin:0 0 0 0;
	}
}
.fresh-block .logo-copy img{
	display: block;
	margin:0 auto;
	width:72px;
	height: auto;
}
@media (min-width: 750px) {
	.fresh-block .logo-copy img{
	width:114px;
	}
}

.fresh-block ol{
	margin:0;
	padding:0 0 0 20px;
	width:100%
}
@media (min-width: 1060px) {
	.fresh-block ol{
	width:50%;
	}
}
.fresh-block ol li{
	margin-bottom:8px;
}
.fresh-block ol li:last-child{
	margin-bottom: 0;
}

/* CUSTOM CARD FORM */
/* Fieldset and Legend for accessibility */
.radio-group {
    border: none;
    padding: 0px;
    margin:0 0 20px 0;
    display: flex; 
    flex-wrap: wrap; 
    gap: 4px; 
    justify-content: center;
}

.radio-group-legend, label {
    font-size: 14px;
	line-height: 1.2em;
    color: #ffffff;
	margin-bottom: 10px;
	text-transform: uppercase;
	display: block;
}
@media (min-width: 750px) {
 .radio-group-legend{
	text-align: center;;
 }
}
@media (min-width: 1060px) {
 .radio-group-legend{
	text-align: left;;
 }
}
/* Style for the custom radio button (the label) */
.custom-radio-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; 
    height: 50px; 
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out; 
	border-radius:3px;
}
@media (min-width: 750px) {
	.custom-radio-button {
		width: 73px; 
		height: 90px; 
		border: 2px solid transparent;
	}
}
@media (min-width: 1060px) {
	.custom-radio-button {
		width: 74px; 
		height: 90px; 
	}
}
.custom-radio-button:hover {
    border-color: #888; 
    background-color: #eee;
}

.custom-radio-button img {
    width: 35px;
	height:auto;
    display: block; 
	margin:0 auto;
}
@media (min-width: 750px) {
	.custom-radio-button img {
    width: 64px;
	}
}

.radio-label-text {
    font-size: 0.9em;
    color: #555;
    text-align: center;
}

/* Active state: Border around the selected radio button */
input[type="radio"]:checked + .custom-radio-button {
    border-color: #ffffff; 
    background-color: #000000; 

}

/* Focus state for accessibility (keyboard navigation) */
input[type="radio"]:focus + .custom-radio-button {
    outline: 2px solid #ffffff; 
    outline-offset: 2px; 
}
textarea{
	width:100%;
	border:1px solid #ffffff;
	color:#ffffff;
	background:none;
	padding:12px 16px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	margin:0 0 0 0;
	display: block;
}
textarea::placeholder {
  color: #BEBEBE; 
  font-style: italic; 
}
.char-count{
	font-size:12px;
	color:#ffffff;
	display: block;
	text-align: right;
}

#customImageForm{
margin-top:32px;
}
@media (min-width: 750px) {
	#customImageForm{
		margin-top:40px;
	}
}
@media (min-width: 1060px) {
	#customImageForm{
		margin-top:64px;
	}
}
#customImageForm h3{
	width:100%;
	margin:0 0 24px 0;
	font-weight: 400;
	font-size:20px;
	line-height: 1.3em;
	text-align: center;
	display: block;
}
@media (min-width: 750px) {
	#customImageForm h3{
		font-size:30px;
		margin:0 0 40px 0;
	}
}
@media (min-width: 1060px) {
	#customImageForm h3{
		display: none;
	}
}
#customImageForm .card-selection h3{
	display: none;
}
@media (min-width: 1060px) {
	#customImageForm .card-selection h3{
	display: block;
	}
}
.custom-card{
	
}
@media (min-width: 750px) {
	.custom-card{
	display: grid;
	justify-content: space-between;
	}
}

.card-preview{
	width:100%;
	grid-column: 1;
	grid-row: 1 / 3;
	text-align: center;
	font-size: 14px;
}
.card-preview .preview-txt-mbl{
	display: block;
}
.card-preview .preview-txt-tbl-dsk{
	display: none;
}
@media (min-width: 750px) {
	.card-preview .preview-txt-mbl{
	display: none;
	}
	.card-preview .preview-txt-tbl-dsk{
		display: block;
	}
}
.card-preview canvas{
	width:100%;
	height:auto;
	display: block;
	margin:0 auto;
	margin:10px 0 24px 0;
}
@media (min-width: 750px) {
	.card-preview canvas{
		margin:0 0 10px 0;
	}
}
.card-selection{
	width:100%;
	grid-column: 2;
	grid-row: 1 / 2;
	align-self: start;
}
.card-message-cta{
	width:100%;
	grid-column: 2;
	grid-row: 2 / 5;
	align-self: start;
}
.card-message-cta #downloadLink{
width:100%;
background:#ffffff;
border-radius:8px;
color: var(--purple);
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
font-size:16px;
line-height: 1.1em;
padding:16px 8px;
margin-top:24px;
text-decoration: none;
cursor: pointer;
}
.card-message-cta #downloadLink:hover{
	background: var(--purple);
	color:#ffffff;
	text-decoration: none;
}
.card-message-cta #downloadLink:hover path{
	fill:#ffffff;
}
@media (min-width: 750px) {
	.card-message-cta #downloadLink{
		margin-top:40px;
	}
	.card-preview{
		width:370px;
	}
	.card-selection{
		width:150px;
		grid-row: 1 / 3;
		align-self: center;
	}
	.card-message-cta{
		width:100%;
		grid-column: 1 / 3;
		grid-row: 3 / 5;
		margin-top:24px;
	}
}
@media (min-width: 1060px) {
	.card-preview{
		width:468px;
		grid-column: 1 ;
		grid-row: 1 / 3;
	}
	.card-selection{
		width:468px;
		grid-column: 2 ;
		grid-row: 1 / 2;
		align-self: start;
	}
	.card-message-cta{
		width:468px;
		grid-column: 2 ;
		grid-row: 2 / 5 ;
		align-self: start;
		margin-top:0;
	}
}
/* FOOTER BAR */
.footer-bar{
	background:var(--purple);
	padding:40px 0;
	font-size:18px;
	line-height: 1.4em;
}
@media (min-width: 1060px) {
	.footer-bar{
	font-size:24px;
	}
}
.footer-wrapper{
	width:100%;
	max-width: 338px;
	margin:0 auto;
}
@media (min-width: 750px) {
	.footer-wrapper{
		width:616px;
		max-width: 616px;
		margin:0 auto;
		padding:0;
	}
}
@media (min-width: 1060px) {
	.footer-wrapper{
		width:1040px;
		max-width: 1040px;
		margin:0 auto;
		padding:0;
	}
}
.footer-bar a{
	color:#ffffff;
	text-decoration: none;
}
.footer-bar a:hover{
	color:#ffffff;
	text-decoration: underline;
}
.footer-bar ul{
	list-style: none;
	font-size:16px;
	margin:0;
	padding:0;
}
.footer-bar ul li{
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}
.footer-bar ul li::before {
  content: ""; /* Required for pseudo-elements to work */
  display: inline-block;
  width: 24px; /* Set your desired width */
  height: 24px; /* Set your desired height */
  background-image: url("../images/icon-arrow.svg"); /* Your image path */
  background-size: cover; /* Ensures the image covers the area */
  background-repeat: no-repeat;
  margin-right: 10px; /* Space between the image and text */
}
.footer-flex{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
@media (min-width: 1060px) {
	.footer-flex{
	flex-wrap: nowrap;
	}
}
.footer-left{
	border-top:1px solid #ffffff;
	order:2;
	padding-top:40px;
	width:100%;
}
.footer-right{
	width:100%;
	font-size:16px;
	line-height: 1.3em;
	box-sizing: content-box;
	order:1;
	padding-bottom:40px;
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:16px;
}
@media (min-width: 750px) {
	.footer-left{

	}
	.footer-right{

	}
}
@media (min-width: 1060px) {
	.footer-left{
		padding-top:0;
		padding-right:70px;
		order:1;
		border-top:none;
		border-right:1px solid #ffffff;
		width:50%;
	}
	.footer-right{
		width:50%;
		padding-left:70px;
		order:2;
	}
}
.footer-right p{
	margin:20px 0 8px 0;
}
.footer-right .footer-logo-cpbf{
	width: 100%;
	height: auto;
}
.footer-right .donate{
	max-width: 50%;
}
@media (min-width: 750px) {
	.footer-right .donate{
		width: calc(100% - 260px);
	}
}
@media (min-width: 1060px) {
	.footer-right .donate{
		width: calc(100% - 220px);
	}
}
.footer-logo-pmdc{
	width:160px;
}
@media (min-width: 750px) {
	.footer-logo-pmdc{
		width:230px;
	}
}
@media (min-width: 1060px) {
	.footer-logo-pmdc{
		width:195px;
	}
}
.footer-right a.button{
	font-size:16px;
	border-radius: 8px;
	background:#ffffff;
	border:2px solid #ffffff;
	color: var(--purple);
	text-align: center;
	width:100%;
	display: inline-block;
	padding:12px 12px;
	text-decoration: none;
}
.footer-right a.button:hover{
	background:var(--purple);
	color:#ffffff;
	text-decoration: none;
}

/* COOKIE BANNER */
#cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-height: 100vh;
    z-index: 999999;
    overflow-y: auto;
    background: rgba(0,0,0,0.85);
    color: #ffffff;
}
#cookie-banner button{
	background:#ffffff;
	color:#000000;
	border-radius: 4px;
	padding:4px 8px;
	font-size: 12px;
	text-transform: uppercase;
	border:none;
	font-weight: bold;
	font-family: var(--font-body);
}
.cookie-banner-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

.cookie-disclaimer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    align-self: center;
    max-width: 1200px;
}

.cookie-disclaimer p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
}

.cookie-disclaimer a {
    color: inherit;
}

.cookie-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

@media (min-width: 750px) {
    .cookie-actions {
        flex-direction: row-reverse;
        justify-content: center;
    }
}

.home-button{
	font-size:16px;
	border-radius: 8px;
	background:#ffffff;
	color:#000000;
	text-align: center;
	padding:12px 12px;
	text-decoration: none;
	text-transform: uppercase;
	margin-top:24px;
	display: inline-block;
}

.home-button:hover{
	background:var(--purple);
	color:#ffffff;
	text-decoration: none;
}