/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

/* Start debug css */
/* .grid-container {
  border: solid;
  border-color: green;
}

.square {
  border: 1px solid red;
  aspect-ratio: 1;
}

.btn {
  border: 1px solid yellow;
} */

/* End debug css */

:root {
	--ratio: 1.5;
	--s-5: calc(var(--s-4) / var(--ratio));
	--s-4: calc(var(--s-3) / var(--ratio));
	--s-3: calc(var(--s-2) / var(--ratio));
	--s-2: calc(var(--s-1) / var(--ratio));
	--s-1: calc(var(--s0) / var(--ratio));
	--s0: 1rem;
	--s1: calc(var(--s0) * var(--ratio));
	--s2: calc(var(--s1) * var(--ratio));
	--s3: calc(var(--s2) * var(--ratio));
	--s4: calc(var(--s3) * var(--ratio));
	--s5: calc(var(--s4) * var(--ratio));
  }

@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200&family=Roboto&display=swap');

body {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-family: 'SF Pro Display', "Roboto", sans-serif !important;
}


.page-container {
	background-image: url("img/johnlegendbg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: black;
	min-height: 100vh;
}

div.center + div.center {
	-webkit-margin-before: var(--s1);
	        margin-block-start: var(--s1);
}

.seo {
	display: none;
}

a {
	text-decoration: none;
}

.center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.logo {
	width: 40%;
	max-width: 20rem;
	min-width: 10rem;
	-webkit-filter: drop-shadow(0 0 1rem black);
	        filter: drop-shadow(0 0 1rem black);
	-webkit-margin-before: var(--s0);
	        margin-block-start: var(--s0);
}

.liveblog {
	border-radius: 1vh;
	margin-bottom: 2vh;
	width: 90%;
	height: 100%;
	max-width: 750px;
	background: rgba(0, 0, 0, 0.3);
}

/* Align time and date liveblog */
.kpNef > div {
	text-align: left;
}

/* Set a margin for time and date in liveblog */
@media screen and (max-width: 450px) {
	.dSQOIS {
		width: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-margin-start: var(--s-2);
		        margin-inline-start: var(--s-2);
		-ms-flex-align: center;
		    align-items: center;
	}
}

.jYwDEF {
	overflow: hidden !important;
}

.live-message--message {
	width: 100%;
}

.grid-container {
	display: -ms-grid;
	display: grid;
	grid-gap: var(--s0);
	-ms-grid-columns: 1fr var(--s0) 1fr var(--s0) 1fr;
	grid-template-columns: repeat(3, 1fr);
	width: 90%;
	max-width: 750px;
	margin-bottom: var(--s4);
}

.btn {
	-webkit-box-shadow: 1px 2px 18px 0px rgba(0, 0, 0, 0.15);
	        box-shadow: 1px 2px 18px 0px rgba(0, 0, 0, 0.15);
	color: black;
	aspect-ratio: 1 / 1;
	border-radius: 1vh;
	-webkit-transition: -webkit-transform 0.2s ease-in;
	transition: -webkit-transform 0.2s ease-in;
	-o-transition: transform 0.2s ease-in;
	transition: transform 0.2s ease-in;
	transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
	position: relative;
	overflow-x: hidden;
}

.btn--imessage {
	background-color: #fff;
	color: black;
	display: none;
}

.btn--whatsapp {
	background: #25d366;
	color: #fff;
}

.btn--freshchat {
	background: #11024e;
	color: #fff;
}

.btn--messenger {
	background: #0085ff;
	color: #fff;
	background: -webkit-gradient(linear,
			left top, left bottom,
			from(rgb(237, 17, 87)),
			color-stop(50%, rgb(161, 58, 235)),
			to(rgb(6, 133, 230)));
	background: -o-linear-gradient(rgb(237, 17, 87) 0%,
			rgb(161, 58, 235) 50%,
			rgb(6, 133, 230) 100%);
	background: linear-gradient(rgb(237, 17, 87) 0%,
			rgb(161, 58, 235) 50%,
			rgb(6, 133, 230) 100%);
}

.btn--twitter {
	background: #55acee;
	color: #fff;
}

.btn--mail {
	background: #231f20;
	color: #fff;
}

.btn--instagram {
	color: #fff;
	background-image: -webkit-gradient(linear,
			left top, left bottom,
			from(hsl(280deg 100% 20%)),
			color-stop(11%, hsl(306deg 100% 23%)),
			color-stop(22%, hsl(322deg 100% 31%)),
			color-stop(33%, hsl(331deg 100% 39%)),
			color-stop(44%, hsl(346deg 77% 52%)),
			color-stop(56%, hsl(4deg 95% 62%)),
			color-stop(67%, hsl(20deg 100% 59%)),
			color-stop(78%, hsl(35deg 100% 54%)),
			color-stop(89%, hsl(46deg 100% 50%)),
			to(hsl(55deg 100% 50%)));
	background-image: -o-linear-gradient(top,
			hsl(280deg 100% 20%) 0%,
			hsl(306deg 100% 23%) 11%,
			hsl(322deg 100% 31%) 22%,
			hsl(331deg 100% 39%) 33%,
			hsl(346deg 77% 52%) 44%,
			hsl(4deg 95% 62%) 56%,
			hsl(20deg 100% 59%) 67%,
			hsl(35deg 100% 54%) 78%,
			hsl(46deg 100% 50%) 89%,
			hsl(55deg 100% 50%) 100%);
	background-image: linear-gradient(180deg,
			hsl(280deg 100% 20%) 0%,
			hsl(306deg 100% 23%) 11%,
			hsl(322deg 100% 31%) 22%,
			hsl(331deg 100% 39%) 33%,
			hsl(346deg 77% 52%) 44%,
			hsl(4deg 95% 62%) 56%,
			hsl(20deg 100% 59%) 67%,
			hsl(35deg 100% 54%) 78%,
			hsl(46deg 100% 50%) 89%,
			hsl(55deg 100% 50%) 100%);
}

.btn--snapchat {
	background: yellow;
	color: white;
}

.btn--tiktok {
	color: #fff;
	background: grey;
	opacity: 0.5;
}

.btn--signal {
	background: grey;
	color: #fff;
	opacity: 0.5;
}

.btn--telegram {
	background: grey;
	color: #fff;
	opacity: 0.5;
}

.btn--hover:hover {
	cursor: pointer;
}

.small-text {
	font-size: min(3vw, 16px);
	margin-left: 0.6rem;
	margin-top: 0.6em;
	margin-bottom: 0.1em;
}

.text--grey {
	color: rgba(120, 120, 120, 0.8);
}

.text--white {
	color: rgba(255, 255, 255, 0.8);
}

.text-shadow {
	text-shadow: 1px 1px 1px #999;
}

.big-text {
	font-size: min(4vw, 20px);
	margin-left: 0.6rem;
	margin-top: 0.1em;
	margin-bottom: 0.1em;
	font-weight: bold;
}

svg {
	width: 25%;
	aspect-ratio: 1 / 1;
}

.svg-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	margin-bottom: 40px;
	margin-top: -2px;
}

.contact-details {
	position: absolute;
	margin-bottom: 0.6rem;
	bottom: 0;
	left: 0;
}

.google-calender {
	margin-bottom: 2vh;
	width: 90%;
	max-width: 750px;
}

/* Selectors of arena.im text inside of liveblog */
.cdnkpq {
	opacity: 0;
	padding-top: 0vh !important;
	padding-bottom: 0.5vh !important;
}

.bwTOPL {
	opacity: 0;
}

/* Link in liveblog message should be blue and underlined */
.dqKNuJ p a {
	color: #007bff !important;
	text-decoration: underline;
}

/* Padding of textblock in liveblog */
.buvRrU {
	-webkit-padding-before: var(--s-3) !important;
	        padding-block-start: var(--s-3) !important;
	-webkit-padding-after: var(--s-3) !important;
	        padding-block-end: var(--s-3) !important;
}

/* More space between timestamp and title of liveblog */
@media screen and (max-width: 450px) {
	.dqKNuJ {
		margin-top: var(--s2) !important;
		/* padding: 2px 0px !important; */
	}
}

/* If the screen is smaller then 600 px , show 2 buttons next to each other */
@media (max-width: 600px) {
	.grid-container {
		-ms-grid-columns: 1fr var(--s0) 1fr;
		grid-template-columns: repeat(2, 1fr);
	}

	.big-text {
		font-size: min(4vw, 20px);
	}
}

/* If the screen is smaller then 300 px , show all buttons on top of each other */
@media (max-width: 300px) {
	.grid-container {
		-ms-grid-columns: 1fr;
		grid-template-columns: repeat(1, 1fr);
	}

	.small-text {
		font-size: 6vw;
	}

	.big-text {
		font-size: 8vw;
	}
}

/* If the screen is smaller then 200 px , show all buttons on top of each other */
@media (max-width: 200px) {
	.logo {
		min-width: auto;
	}
}

/* Liveblog  bolletjes  text kleur */
.style__LiveCountdownTimerItemNumber-hDZOIB {
	color: black !important;
}

.non-iOS-device {
	display: none;
}

/* @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700"); */

/* The button */
.addeventatc {
	display: inline-block;
	position: relative;
	cursor: pointer;
	background: #fff;
	/* font-family: "Open Sans", Calibri, Arial, sans-serif; */
	font-weight: 400;
	color: #333 !important;
	font-size: 15px;
	line-height: 100%;
	-webkit-box-shadow: 0 0 0 0.5px rgba(50, 50, 93, 0.17),
		0 2px 5px 0 rgba(50, 50, 93, 0.1), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07),
		0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 0 0 0 transparent !important;
	box-shadow: 0 0 0 0.5px rgba(50, 50, 93, 0.17),
		0 2px 5px 0 rgba(50, 50, 93, 0.1), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07),
		0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 0 0 0 transparent !important;
	border-radius: 1vh;
	width: 100%;
}

.addeventatc:hover {
	background-color: #f8f8f8;
}

.addeventatc .date {
	/* width: 200px; */
	/* height: 4vh; */
	/* float: left; */
	position: relative;
}

.addeventatc .date .mon {
	display: block;
	text-align: center;
	margin-top: 0.8rem;
	font-size: 0.8em;
	margin-bottom: 0.3em;
	color: #bf5549;
	font-weight: bold;
	line-height: 110%;
	text-transform: uppercase;
}

.addeventatc .date .day {
	display: block;
	text-align: center;
	margin-bottom: 0.3em;
	font-size: 1.6em;
	font-weight: bold;
	color: #333;
	line-height: 100%;
}

.addeventatc .date .bdr1 {
	width: 1px;
	height: 50px;
	background: #eaeaea;
	position: absolute;
	top: 5px;
	right: -3px;
}

.addeventatc .date .bdr2 {
	width: 1px;
	height: 50px;
	background: #fff;
	position: absolute;
	top: 5px;
	right: -4px;
}

.addeventatc .desc {
	/* height: 60px; */
	/* float: left; */
	position: relative;
	/* padding: 0px 15px 0px 0px; */
	padding-bottom: 0.8em;
}

.addeventatc .desc p {
	margin: 0;
	display: block;
	text-align: center;
	/* padding: 7px 0px 0px 15px; */
	font-size: 1em;
	color: #666;
	line-height: 130%;
}

.addeventatc .desc .hed {
	/* height: 15px; */
	/* font-family: gotham-bold; */
	display: block;
	overflow: hidden;
	margin-bottom: 0.5em;
	font-size: 0.9rem;
	line-height: 110%;
	color: #333;
	text-transform: uppercase;
}

.addeventatc .desc .des {
	/* height: 28px; */
	display: block;
	overflow: hidden;
	/* font-family: gotham-light; */
	margin-top: 0.6em;
}

.addeventatc-selected {
	background-color: #f4f4f4;
}

.addeventatc .start,
.addeventatc .end,
.addeventatc .timezone,
.addeventatc .title,
.addeventatc .description,
.addeventatc .location,
.addeventatc .organizer,
.addeventatc .organizer_email,
.addeventatc .facebook_event,
.addeventatc .all_day_event,
.addeventatc .date_format,
.addeventatc .alarm_reminder,
.addeventatc .recurring,
.addeventatc .attendees,
.addeventatc .calname,
.addeventatc .uid,
.addeventatc .status,
.addeventatc .method,
.addeventatc .client,
.addeventatc .transp {
	display: none !important;
}

/* Drop down */
.addeventatc_dropdown {
	width: 75%;
	max-width: 230px;
	position: absolute;
	/* padding: 6px 0px 0px 0px; */
	font-family: "Open Sans", Roboto, "Helvetica Neue", Helvetica, Optima, Segoe,
		"Segoe UI", Candara, Calibri, Arial, sans-serif;
	color: #000 !important;
	font-weight: 600;
	line-height: 100%;
	background: #fff;
	font-size: 15px;
	text-decoration: none;
	text-align: left;
	margin-left: -1px;
	display: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 26px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 26px;
	-webkit-transform: scale(0.98, 0.98) translateY(5px);
	    -ms-transform: scale(0.98, 0.98) translateY(5px);
	        transform: scale(0.98, 0.98) translateY(5px);
	-webkit-transition: -webkit-transform 0.15s ease;
	transition: -webkit-transform 0.15s ease;
	-o-transition: transform 0.15s ease;
	transition: transform 0.15s ease;
	transition: transform 0.15s ease, -webkit-transform 0.15s ease;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.addeventatc_dropdown.topdown {
	-webkit-transform: scale(0.98, 0.98) translateY(-5px) !important;
	    -ms-transform: scale(0.98, 0.98) translateY(-5px) !important;
	        transform: scale(0.98, 0.98) translateY(-5px) !important;
}

.addeventatc_dropdown span {
	display: block;
	line-height: 100%;
	background: #fff;
	text-decoration: none;
	cursor: pointer;
	font-size: 15px;
	color: #333;
	font-weight: 600;
	padding: 14px 10px 14px 55px;
	margin: -2px 0px;
}

.addeventatc_dropdown span:hover {
	background-color: #f4f4f4;
	color: #000;
	text-decoration: none;
	font-size: 15px;
}

.addeventatc_dropdown em {
	color: #999 !important;
	font-size: 12px !important;
	font-weight: 400;
}

.addeventatc_dropdown .frs a {
	background: #fff;
	color: #cacaca !important;
	cursor: pointer;
	font-size: 9px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 110% !important;
	padding-left: 10px;
	position: absolute;
	right: 10px;
	text-align: right;
	text-decoration: none;
	top: 5px;
	z-index: 101;
}

.addeventatc_dropdown .frs a:hover {
	color: #999 !important;
}

.addeventatc_dropdown .atefacebook {
	background: url(../gfx/icon-facebook-t5.svg) 18px 50% no-repeat;
	background-size: 22px 100%;
}

.addeventatc_dropdown .copyx {
	height: 21px;
	display: block;
	position: relative;
	cursor: default;
}

.addeventatc_dropdown .brx {
	height: 1px;
	overflow: hidden;
	background: #e8e8e8;
	position: absolute;
	left: 10px;
	right: 10px;
	top: 9px;
}

.addeventatc_dropdown.addeventatc-selected {
	-webkit-transform: scale(1, 1) translateY(0px);
	    -ms-transform: scale(1, 1) translateY(0px);
	        transform: scale(1, 1) translateY(0px);
}

.addeventatc_dropdown.topdown.addeventatc-selected {
	-webkit-transform: scale(1, 1) translateY(0px) !important;
	    -ms-transform: scale(1, 1) translateY(0px) !important;
	        transform: scale(1, 1) translateY(0px) !important;
}

.addeventatc_dropdown .drop_markup {
	background-color: #f4f4f4;
}

#addeventatc1-home,
#addeventatc2-home {
	display: none;
}