#body{ overflow:hidden; }

#content{
	margin:0px auto;
	max-width:800px;
	padding:10px;
	width:100%;
}

#event .info{ margin-bottom:10px; }
#event .info h1, #event .info h2, #event .info #dateTime, #event .info #location, #event .info h3{ margin:0px; }

#event .buttons{
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
#event .info .buttons{ margin:10px 0; }
#event .info .buttons .button{ flex:1; }

#sponsors h1{
	margin:0px;
	text-align:left;
}
#sponsors .slick-track{ width:800px; }
#sponsors .slick-slide{
	height:200px;
	line-height:200px;
}
#sponsors .slick-slide a{
	display:inline-block;
	line-height:normal;
	text-decoration:none;
	width:100%;
	vertical-align:middle;
}
#sponsors .slick-slide .sponsor .logo{
	background-color:#fff;
	background-position:center;
	background-repeat:no-repeat;
	background-size:150px;
	border-radius:50%;
	border:solid 2px var(--gray);
	color-scheme:only light;
	display:table;
	height:175px;
	left:50%;
	position:relative;
	text-align:center;
	transform:translatex(-50%);
	vertical-align:middle;
	width:175px;
}
#sponsors .slick-slide .sponsor .logo .name{
	color:var(--black);
	display:table-cell;
	vertical-align:middle;
}
#sponsors .slick-slide .sponsor p{
	color:var(--gray);
	font-size:14px;
	margin:5px 0 0 0;
	text-align:center;
}
#sponsors .slick-slide .inner{ text-align:center; }
#sponsors .slick-slide .button{
	display:block;
	font-size:14pt;
	margin:0px auto;
	max-width:320px;
}
#sponsors .slick-arrow::before{ color:var(--gray); }

#event #speakers{ margin-top:20px; }
#event #speakers h2{ margin:0px; }
#event #speakers .wrap{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(200px, 1fr));
}
#event #speakers .wrap .speaker{
	align-items:center;
	display:flex;
	padding:5px 0;
	text-align:left;
	text-decoration:none;
}
#event #speakers .wrap .speaker .picture{
	filter:grayscale(100%);
	margin-right:10px;
	-webkit-filter:grayscale(100%);
}
#event #speakers .wrap .speaker:hover .picture{
	filter:grayscale(0%);
	-webkit-filter:grayscale(0%);
}
#event #speakers .wrap .speaker .picture .icon, #event #speakers .wrap .speaker .picture .image{
	border:solid 2px var(--grayMed);
	border-radius:50%;
	color:var(--white);
	display:block;
	height:70px;
	width:70px;
}
#event #speakers .wrap .speaker .picture .image{
	background-color:var(--white);
	background-position:center;
	background-repeat:no-repeat;
	background-size:70px;
}
#event #speakers .wrap .speaker .name{
	color:var(--black);
	font-size:20px;
	font-weight:bold;
} body.dark #event #speakers .wrap .speaker .name{ color:var(--white); }
.underline{ position:relative; }
.underline:before{
	background-color:var(--gray);
	bottom:0;
	content:"";
	height:2px;
	left:0;
	position:absolute;
	transition:all 0.3s ease-in-out;
	visibility:hidden;
	width:0;
}
#event #speakers .wrap .speaker:hover .name{ color:var(--blue); }
#event #speakers .wrap .speaker:hover .underline:before,#events .event:hover .wrap .info .name:before{
	background-color:var(--blue);
	visibility:visible;
	width:100%;
}
#event #speakers .wrap .speaker .company{
	color:var(--gray);
	font-size:14px;
} body.dark #event #speakers .wrap .speaker .company{ color:var(--grayLight); }

#event form{ border:2px solid var(--grayLight); }
body.dark #event form{ border:2px solid var(--grayDark); }

#event form .wrap{
	left:0%;
    position:relative;
}

#event form .wrap h2{ margin-bottom:0px; }

#event #ticketTypes .type{
	align-items:stretch;
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
#event #ticketTypes .type:not(:first-child){ margin-top:10px; }

#event #ticketTypes .type .information{
	border:solid var(--black) 1px;
	flex-grow:1;
	padding:10px;
	max-width:calc(100% - 150px);
} body.dark #event #ticketTypes .type .information{ border-color:var(--white); }
#event #ticketTypes .type .information .namePrice{ display:flex; }
#event #ticketTypes .type.notAvailabile .information{ border-color:var(--grayLight) !important; }
#event #ticketTypes .type.notAvailabile .information p{ color:var(--grayMed); }
#event #ticketTypes .type .information .name, #event #ticketTypes .type .information .price{ margin:0px; }
#event #ticketTypes .type .information .name{ font-weight:bold; }
#event #ticketTypes .type .information .price{
	color:var(--gray);
	margin-left:auto;
} body.dark #event #ticketTypes .type .information .price{ color:var(--grayMed); }
#event .price .complimentary{ font-style:italic; }
#event #ticketTypes .type .information .note{ margin: 0px; }
#event #ticketTypes .type .information .description{
	font-size:13px;
	margin-top:10px;
	text-align:justify;
}
#event #ticketTypes .type .information .description :last-child{ margin-bottom:0px; }
#event #ticketTypes .type .button{
	border-radius:0;
	width:150px;
}
#event #ticketTypes .type .button:after{ margin-left: auto; }

#content form .wrap .count{
	float:left;
	margin:30px 0 0 0;
	padding:5px 0;
}

#content #attendees #registered .label{ font-weight:bold; }

#content #attendees div[person]{ margin-bottom:20px; }

#content form #attendees .type .inputBorder{ position:relative; }

#content form .spinner{ margin-top:15px; }
#content form .spinner div{ background-color:var(--green); }
#content form #attendees .spinner{ float:right; }

#content form #attendees .price, #content form #payment .price{ text-align:right; }
#content form #attendees .price{
	font-weight:normal;
	margin-top:10px;
}
#content form #attendees .price .name{ font-weight:bold; }

#content form #attendees #recaptcha{
	height:78px;
	margin-bottom:10px;
	position:relative;
}
#content form #attendees #recaptcha > div{
	position:absolute;
	right:0;
}

#content form #attendees .buttons .button{
	flex:1;
	margin:0 5px;
}
#content form #attendees .buttons .button:first-of-type{ margin-left:0px; }
#content form #attendees .buttons .continue, #content form #attendees .buttons .submit{ margin-right:0px; }

#content .disclaimer{
	color:var(--gray);
	font-size:13px;
	margin-top:10px;
	text-align:justify;
} body.dark #content .disclaimer{ color:var(--grayMed); }

#content #receipt .attendees{ width:100%; }
#content #receipt .attendees div[person]{ margin:10px 0; }
#content #receipt .attendees div[person] .namePrice,#content #receipt .attendees div[person] .statusPriceName{ display:flex; }
#content #receipt .attendees div[person] .namePrice .price{
	color:var(--gray);
	margin-left:auto;
} body.dark #content #receipt .attendees div[person] .namePrice .price{ color:var(--grayMed); }
#content #receipt .attendees div[person] .statusPriceName{ font-size:14px; }
#content #receipt .attendees div[person] .statusPriceName .priceName{ margin-left:auto; }
#content #receipt .attendees div[person].cancelled .statusPriceName .status{ font-style:italic; }
#content #receipt .attendees div[person].cancelled .namePrice,#content #receipt .attendees div[person].cancelled .statusPriceName .priceName{ text-decoration:line-through; }

#content #receipt .total{
	border-top:1px solid var(--grayMed);
	margin:10px 0;
	padding-top:10px;
	text-align:right;
}

#content form #payment #paymentForm{ margin-bottom:10px; }
#content form #payment #paymentForm .method{
	float:right;
	margin:0 0 5px 10px;
}
#content form #payment #paymentForm #creditCardForm, #content #checkInfo{ border:1px solid var(--grayLight); }
body.dark #content form #payment #paymentForm #creditCardForm, body.dark #content #checkInfo{ border-color:var(--grayDark); }

#content form #payment #paymentForm #checkInfo{ display:none; }
#content #checkInfo .warning{
	background-color:var(--red);
	color:var(--white);
	font-style:italic;
	margin:0px;
	padding:10px;
}
#content #checkInfo .info { padding:10px; }
#content #checkInfo .info p:first-of-type{ margin-top:0px; }
#content #checkInfo .info p:last-of-type{ margin-bottom:0px; }
#content #checkInfo .info .red{ font-style:italic; }
#content .emphasis{ font-weight:bold; }
#content #checkInfo .info .location{
	font-size:19px;
	text-align:center;
}

#content form #payment #recaptcha > div{ margin:5px auto 0px auto; }
#content form #payment .submit{
	font-size:22px;
	margin:10px 0;
	padding:10px !important;
}

#content #confirmation{ margin-top:20px; }

#content #confirmation .left,#content #confirmation .right{ width:calc(50% - 10px); }
#content #confirmation .left{ margin-right:10px; }
#content #confirmation .right{ margin-left:10px; }
#content #confirmation .table{
	margin-bottom:10px;
	text-align:right;
	width:100%;
}
#content #confirmation h2{ margin-top:0px; }

#content #confirmation #transactionID{ font-size:20px; }

#content #confirmation #qr{
	background-color:#fff;
	border:var(--grayLight) 1px solid;
	padding:10px;
	text-align:center;
}

#closed{ margin-top:20px; }

/* Events List --- */
#events .header{
	display:flex;
	flex-wrap:wrap;
}
#events .header h1{
	flex-grow:1;
	margin:0px;
}
#events .header label{ margin-left:10px; }

#events .image{
	background-position:center center;
	background-size:cover;
}

#events #featured, #events .event{
	border:solid var(--grayMed) 1px;
	color:var(--black);
	margin:10px 0;
	text-decoration:none;
	width:100%;
}
body.dark #events #featured, body.dark #events .event{
	border-color:var(--gray);
	color:var(--white);
}

#events #featured{ display:block; }
#events #featured .image{
	height:200px;
	width:100%;
}
#events #featured .date{ background-color:var(--gray); }
#events #featured:hover .date{ background-color:var(--blue); }

#events .event.past{ display:none; }

#events .event .wrap{ display:flex; }

#events .event .wrap > *{ padding:10px; }

#events .event .wrap .date{
	align-content:center;
	color:var(--white);
	display:grid;
	font-size:30px;
	font-weight:700;
	text-align:center;
	width:120px;
}
#events .event .wrap .date > *{ display:block; }
#events .event .wrap .date .time{
	font-size:14px;
	font-weight:300;
}

#events .event .wrap .info{ flex:1; }
#events .event:hover .wrap .info .name{ color:var(--blue); }
#events .event .wrap .info .name{
	font-size:24px;
	font-weight:bold;
}

#events .event .wrap .info .location{ margin-top:5px; }
#events .event .wrap .info .location .online{
	color:var(--green);
	font-style:italic;
}

#events .event .wrap .info .description{ color:var(--gray); }
body.dark #events .event .wrap .info .description{ color:var(--grayLight); }

#events .event .wrap .date{
	position:relative;
	z-index:0;
}
#events .event .wrap .date .image,#events .event .wrap .date .filter{
	height:100%;
	left:0;
	top:0;
	position:absolute;
	width:100%;
}
#events .event .wrap .date .image{
	filter:grayscale(100%);
	-webkit-filter:grayscale(100%);
	z-index:-2;
}
#events .event .wrap .date .filter{
	background:rgba(var(--grayRGB),0.85);
	z-index:-1;
}
#events .event:hover .wrap .date .filter{ background:rgba(var(--blueRGB),0.85); }

/* Resize --- */
@media screen and (max-width:600px){
	#event #ticketTypes .type .information{ max-width:100%; }
	#event #ticketTypes .type .button{ width: 100%; }
}