:root {
	--text-colour: #1c3151;

	--cta-bg-colour: #ffefd9;
	--cta-top-border-img: url( "../img/custom/calendar/triangle_edge.png" );
	--cta-bottom-border-img: url( "../img/custom/calendar/dotted_line.png" );

	--top-bg-sm-img: url("../img/custom/calendar/background_cal_780x445.png");
	--top-bg-md-img: url("../img/custom/calendar/background_cal_1160x445.png");
	--top-bg-lg-img: url("../img/custom/calendar/background_cal_1920x445.png");
	
	--doors-bg-colour: #ffefd9;
	--doors-bg-img-left: url("../../img/custom/calendar/side_pattern_left.png");
	--doors-bg-img-right: url("../../img/custom/calendar/side_pattern_right.png");

    --door-text-colour: #1c3151;
    --door-expired-text-colour: #FFF;
	--door-label-closed-colour: #FFF;
	--door-label-opened-colour: #FFF;
	--door-label-expired-colour: #FFF;
	--door-front-bg-img: url("../img/custom/calendar/door_front.png");
	--door-back-bg-img: url("../img/custom/calendar/door_back.png");
	--door-front-expired-bg-img: url("../img/custom/calendar/door_expired.png");
	--door-back-expired-bg-img: url("../img/custom/calendar/door_expired_unopened.png");

	--footer-bg-colour: #f27c7b;
	--footer-text-colour: #1e2152;
	--footer-link-colour: #1e2152;

	--share-email-btn-bg-img: url("../img/custom/calendar/btn_cal_email_share.png");
	--share-facebook-btn-bg-img: url("../img/custom/calendar/btn_cal_facebook_share.png");
	--share-twitter-btn-bg-img: url("../img/custom/calendar/btn_cal_twitter_share.png");
	--share-linkedin-btn-bg-img: url("../img/custom/calendar/btn_cal_linkedin_share.png");
	--share-whatsapp-btn-bg-img: url("../img/custom/calendar/btn_cal_whatsapp_share.png");
	--share-copy-url-btn-bg-img: url("../img/custom/calendar/btn_cal_url_share.png");

	 --popup-panel-bg-img: url("../../img/custom/calendar/panel.png");
	 --popup-btn-bg-colour: #1c3151;
	 --popup-btn-text-colour: #fff;
	 --popup-title-colour: #ffefd9;

	 --popup-panel-close-img: url("../img/custom/calendar/btn_video_close.png");
}

body {
	background-color: #ffefd9;
}

.center img {
	padding: 0;
}

.topper {
	background-color: #ffefd9;
}

.cta-bottom {
	height: 54px;
	margin: 0;
	z-index: 1;
	position: relative;
}

.doors {
    width: 100%;
    background-color: var(--doors-bg-colour);
    background-repeat: repeat-y, repeat-y, repeat;
	background-position-x: 0%, 100%, 0%;
    background-image: var(--doors-bg-img-left), var(--doors-bg-img-right);
}

.door p {
	font-size: 18px;
}

.door .door-label-text {
	font-size: 26px;
	margin-top: 4px;
}

.submit-panel-contents, .complete-panel-contents, .already-panel-contents {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: -16px;
    padding: 30px;
    color: var(--popup-text-colour);
	transition: opacity 0.3s ease-in-out;
}


.submit-cta {
	font-size: larger;
}

.complete-cta, .already-cta {
	font-size: xx-large;
	font-weight: 800;
}

.submit-inputs {
	margin: auto;
	max-width: 400px;
}

.popup-panel.hidden {
    opacity: 0;
	max-height: 0;
	border: 0;
    pointer-events: none;
	min-height: 0;
}

.popup-overlay {
	z-index: 1;
}

.popup-overlay .popup-container {
	gap: 0;
}

.popup-header {
	margin-bottom:15px;
}

.popup-panel.hidden .popup-panel-contents,
.popup-panel.hidden .submit-panel-contents,
.popup-panel.hidden .complete-panel-contents,
.popup-panel.hidden .already-panel-contents {
	max-height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}

.submit-panel.hidden .submit-panel-contents {
	max-height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

.submit-panel.hidden {
    opacity: 0;
    pointer-events: none;
}

.submit-terms-box {
	padding: 10px;
	text-align: left;
}

.submit-panel-contents input[type=text],
.submit-panel-contents input[type=date],
.submit-panel-contents input[type=email] {
	font-family: 'Open Sans',sans-serif;
	text-align: left;
	padding: 3px 8px;
	font-size: large;
	border-radius: 7px;
	margin: 5px;
	border: 0px;
	width: 100%;
}

.submit-panel-contents input[type=checkbox] {
  width: 20px;
  height: 20px;
}

.submit-terms-box a,
.submit-terms-box a:visited {
	font-weight: 800;
	color: #1c3151;
	text-decoration-thickness: 2px;
}

.cta {
	position:relative;
}

.hero-image {
	position: absolute;
	bottom: -28px;
	z-index:0;
}

.statue {
	left:0;
	
}

.colosseum {
	right:0;
}

.landscape {
	display:inline;
}

.portrait {
	display:none;
}

.cta p {
	max-width: 30em;
}

.submit-button,
.complete-button,
.already-button {
	margin: 20px auto;
	border: 0;
    padding: 15px 30px;
    min-width: 200px;
	font-size: 18px;
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
    color: var(--popup-btn-text-colour);
    background-color: var(--popup-btn-bg-colour);
	cursor:pointer;
}

.submit-panel-contents td {
	padding: 5px 0;
}

@media screen and ( max-width: 1300px) {
    .hero-image {
		max-width: 22%;
	}
}

@media screen and ( max-width: 900px) {
    .hero-image {
		position:relative;
		margin-top: -96px;
		bottom: -56px;
		max-width: 45%
	}

	.colosseum {
		right: -10%;
	}

	.statue {
		left: -10%;
	}

	.landscape {
		display:none;
	}

	.portrait {
		display:inline;
	}
}