@import url("../_external/fonts.googleapis.com/icon");

/* Form fields */

input[type="text"], input[type="password"], input[type="email"],
input[type="file"], input[type="url"], input[type="number"], input[type="tel"],
input[type="date"], input[type="time"], input[type="datetime"], textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.2em 0.5em;
	border: 1px solid rgb(204,204,204);
}

select {
	padding: 0.1em 0.2em;
	border: 1px solid rgb(204,204,204);
}

input[type="submit"], input[type="reset"], button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(230,230,230) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(230,230,230))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(230,230,230) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(230,230,230) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(230,230,230) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgb(255,255,255) 0%,rgb(230,230,230) 100%); /* W3C */
	padding: 0.2em 1.4em;
	border: 1px solid rgb(204,204,204);
	border-radius: 0.2em;
}

input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
	background: linear-gradient(to bottom, rgb(255,255,255) 0%,rgb(240,240,240) 100%);
}

/* Material Icons */
/* https://google.github.io/material-design-icons/ */

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}


/* NAVIGATION STRUCTURE */

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.7.1
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.dropdown {
	position: relative;
	z-index: 597;
	float: left;
}

ul.dropdown li {
	float: left;
	line-height: 1.3em;
	vertical-align: middle;
	zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
	position: relative;
	z-index: 599;
	cursor: default;
}

ul.dropdown ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
	width: 100%;
}

ul.dropdown ul li {
	float: none;
}

ul.dropdown ul ul {
	top: 1px;
	left: 99%;
}

ul.dropdown li:hover > ul {
	visibility: visible;
}

ul.dropdown-vertical {
	z-index: 596;
}

ul.dropdown-vertical ul {
	top: 1px;
	left: 99%;
}

ul.dropdown-vertical li {
	float: none;
}

#horizmenucheckbox, #horizmenulabel, #vertmenucheckbox, #vertmenulabel  {
	display: none;
}

span.templatename::after, span.updateddate::after, span.appname::after {
	content: '\2022';
	padding: 0 0.15em 0 0.5em;
}

#breadcrumbs { display: none; }

/* TEMPLATE ELEMENTS */

div.dlfile {
	margin: 1em 0em;
}

div.dlfile img {
	float: left;
	margin-top: 4px;
	margin-right: 10px;
}

div.backlink {
	margin: 1em 0;
}

div.backlink::before {
	content: '\25C0';
	display: inline-block;
	margin-right: 0.5em;
}

/* COMMENT FORM */

#commenttext { display: none; }

/* ACCORDION STYLES */

.ui-accordion-header {
	cursor: pointer;
}

/* ADMINISTRATION SYSTEM */

span.editlink { font-size: 0.7em; }

li span.editlink {
	display: inline-block;
	margin-left: 1em;
	opacity: 0;
}

li:hover span.editlink {
	opacity: 1;
}

li span.editlink a, li span.editlink a:visited {
	display: block;
	background-color: rgb(204,204,204);
	background-color: rgba(255,255,255,0.7);
	color: black;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0.1em 0.5em;
	border: 1px solid black;
	border-radius: 0.3em;
}

li span.editlink a:hover {
	background-color: white;
}

ul.eventlinks > li > span.editlink {
	position: absolute;
	margin-top: -3em;
}

div.adminflag {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 10000;
	background-color: rgba(255,0,0,0.5);
	color: white;
	font-weight: bold;
	padding: 0.3em 0.8em;
	cursor: help;
}

p.admin, div.admin {
	display: inline-block;
	font-size: 0.8em;
	color: rgb(102,102,102);
	padding: 0.5em 0.8em;
	border: 1px dashed rgb(255,0,0);
}

body#tinymce.mceContentBody .accordion {
	border: 1px dashed red;
	padding: 5px;
}

body#tinymce.mceContentBody .accordion::before {
	content: 'accordion region - odd blocks are headings; even blocks are drop-downs';
	background-color: rgb(255,255,204);
	font-size: 10px;
	display: block;
	margin-bottom: 0.5em;
	padding: 0px 0.5em;
}

body#tinymce.mceContentBody .accordion > *:nth-child(odd)::before {
	content: '\25BC';
	color: rgb(127,127,127);
	padding-right: 0.5em;
}

body#tinymce.mceContentBody .accordion > *:nth-child(even) {
	border: 1px dashed green;
	padding: 0.5em;
}

/* RESPONSIVE SLIDE BANNER */

div.slidebanner {
	position: relative;
	overflow: hidden;
	min-height: 360px;
}

div.slideshow {
	position: absolute;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgb(200,200,200);
}

div.slide {
	position: absolute;
	overflow: hidden;
	top: 0;
	bottom: 0;
	width: 100%;
	left: 100%;
	padding: 0;
	margin: 0;
	background-size: cover;
	background-position: center center;
	-moz-transition: left 0.5s;
	-webkit-transition: left 0.5s;
	-o-transition: left 0.5s;
	transition: left 0.5s;
}

div.slide.anchor_tl { background-position: 20% 20%; }
div.slide.anchor_tc { background-position: 50% 20%; }
div.slide.anchor_tr { background-position: 80% 20%; }
div.slide.anchor_ml { background-position: 20% 50%; }
div.slide.anchor_mc { background-position: 50% 50%; }
div.slide.anchor_mr { background-position: 80% 50%; }
div.slide.anchor_bl { background-position: 20% 80%; }
div.slide.anchor_bc { background-position: 50% 80%; }
div.slide.anchor_br { background-position: 80% 80%; }

div.slide > a, div.slide > a:visited, div.slide > a:hover {
	position: absolute;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	color: black!important;
}

div.slide > span.adminlink {
	position: absolute;
	background-color: rgba(255,255,255,0.5);
	text-shadow: 1px 1px 0px white;
	padding: 0.2em;
}

input.slideselector { display: none; }

ul.slidenav {
	position: absolute;
	list-style: none;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	padding: 0;
	margin: 0;
	z-index: 500;
}

ul.slidenav li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

ul.slidenav li label {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid white;
	border-radius: 6px;
}

ul.slidenav li label:hover {
	background-color: rgba(255,255,255,0.5);
}

ul.slidenav li label span { display: none; }

.for_1:checked ~ ul.slidenav > .nav_1 > label { background-color: white; }
.for_2:checked ~ ul.slidenav > .nav_2 > label { background-color: white; }
.for_3:checked ~ ul.slidenav > .nav_3 > label { background-color: white; }
.for_4:checked ~ ul.slidenav > .nav_4 > label { background-color: white; }
.for_5:checked ~ ul.slidenav > .nav_5 > label { background-color: white; }
.for_6:checked ~ ul.slidenav > .nav_6 > label { background-color: white; }
.for_7:checked ~ ul.slidenav > .nav_7 > label { background-color: white; }
.for_8:checked ~ ul.slidenav > .nav_8 > label { background-color: white; }
.for_9:checked ~ ul.slidenav > .nav_9 > label { background-color: white; }

.for_1:checked ~ .id_1 { left: 0% }
.for_2:checked ~ .id_2 { left: 0% }
.for_3:checked ~ .id_3 { left: 0% }
.for_4:checked ~ .id_4 { left: 0% }
.for_5:checked ~ .id_5 { left: 0% }
.for_6:checked ~ .id_6 { left: 0% }
.for_7:checked ~ .id_7 { left: 0% }
.for_8:checked ~ .id_8 { left: 0% }
.for_9:checked ~ .id_9 { left: 0% }

/* For full right-to-left (rather than in-and-out from right only) sliding: */
.for_2:checked ~ .id_1, .for_3:checked ~ .id_1, .for_4:checked ~ .id_1, .for_5:checked ~ .id_1, .for_6:checked ~ .id_1, .for_7:checked ~ .id_1, .for_8:checked ~ .id_1, .for_9:checked ~ .id_1 { left: -100% }
.for_3:checked ~ .id_2, .for_4:checked ~ .id_2, .for_5:checked ~ .id_2, .for_6:checked ~ .id_2, .for_7:checked ~ .id_2, .for_8:checked ~ .id_2,  .for_9:checked ~ .id_2 { left: -100% }
.for_4:checked ~ .id_3, .for_5:checked ~ .id_3, .for_6:checked ~ .id_3, .for_7:checked ~ .id_3, .for_8:checked ~ .id_3, .for_9:checked ~ .id_3 { left: -100% }
.for_5:checked ~ .id_4, .for_6:checked ~ .id_4, .for_7:checked ~ .id_4, .for_8:checked ~ .id_4, .for_9:checked ~ .id_4 { left: -100% }
.for_6:checked ~ .id_5, .for_7:checked ~ .id_5, .for_8:checked ~ .id_5, .for_9:checked ~ .id_5 { left: -100% }
.for_7:checked ~ .id_6, .for_8:checked ~ .id_6, .for_9:checked ~ .id_6 { left: -100% }
.for_8:checked ~ .id_7, .for_9:checked ~ .id_7 { left: -100% }
.for_9:checked ~ .id_8 { left: -100% }

/* Responsive Video Banner */

#videobannerbox {
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: rgb(200,200,200);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	z-index: 800;
}

#bannervideo, #videobannerbox img {
	display: block;
	width: 101%;
	height: auto;
	margin-left: 50%;
	transform: translateX(-50%);
	z-index: 801;
}

#vidbanneroverlay {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 802;
}

#vidbannerlink,
a.vidbannerlink,
a.vidbannerlink:visited {
	background: rgba(0,0,0,0.3);
	color: white !important;
	font-size: 2em;
	line-height: 1;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.5em 0.8em;
	border: 2px solid white;
}

/* #vidbannerlink {
	position: absolute;
	top: 23vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 803;
} */

#vidbannerlink,
#vidbanneroverlay {
	transition: opacity 0.8s;
}

#vidbannerlink.hide,
#vidbanneroverlay.hide {
	opacity: 0;
}

@media (max-width: 960px) {
	#bannervideo, #videobannerbox img {
		width: auto;
		height: 360px;
	}
	#vidbannerlink {
		top: 200px;
	}
}

@media (max-width: 640px) {
	#videobannerbox {
		margin-top: 0;
	}
	#vidbannerlink {
		/* display: none; */
	}
}

/* JCAROUSEL DEFAULTS */

.jcarousel-wrapper {
	position: relative;
	/* border: 1px dashed red; */
}

.jcarousel {
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0;
	/* border: 1px dashed yellow; */
}

/* LOGOS */

#logobox {
	position: relative;
	overflow: hidden;
}

/* FEATURED SPEAKERS */

div.speakerinfo {
	position: relative;
	overflow: hidden;
	margin: 1em 0;
}

img.speakerphoto {
	float: left;
	margin: 0 20px 10px 0;
}

div.speakerteaser,
div.speakerlink {
	margin-top: 0.5em;
}

div.speakersocial span + span::before {
	content: ' - ';
}

div.speakersocial > span.twitter > a::before {
	content: '@';
}

div.speakersocial > span.facebook > a::before {
	content: 'FB: ';
}

ul.speakers {
	width: 20000em;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	margin: 1em 0;
}

ul.speakers > li {
	box-sizing: border-box;
	float: left;
	padding: 0;
	margin: 0;
}

ul.speakers > li div.speakerinfo {
	margin: 0;
}

ul.speakers > li img.speakerphoto {
	margin-right: 10px;
	margin-bottom: 0;
}

/* RESPONSIVE TABLE */
/* https://codepen.io/pixelchar/pen/rfuqK */

.responsive-table {
	width: 100%;
	margin-bottom: 1.5em;
}

.responsive-table caption {
	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 1em;
}

.responsive-table thead th {
	background-color: #1d96b2;
	color: white;
	font-weight: normal;
	line-height: 1.1;
	text-align: center;
	border: 1px solid #1d96b2;
}

.responsive-table th,
.responsive-table td {
	vertical-align: middle;
	text-align: center;
	padding: .75em .5em;
}

.responsive-table th:first-of-type {
	text-align: left;
}

.responsive-table tbody tr:nth-of-type(even) {
	background-color: rgba(94, 93, 82, 0.1);
}

.responsive-table tbody td {
	border-bottom: 1px solid #1d96b2;
}

.responsive-table td.num {
	text-align: right;
}

.responsive-table tfoot td {
	font-style: italic;
	font-size: .8em !important;
	text-align: left;
	padding-left: 0;
}

@media (max-width: 48em) {

	.responsive-table caption {
		font-size: 1em;
	}

	.responsive-table thead {
		position: absolute;
		clip: rect(1px 1px 1px 1px);
		/* IE6, IE7 */
		clip: rect(1px, 1px, 1px, 1px);
		padding: 0;
		border: 0;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}

	.responsive-table tbody tr:nth-of-type(even) {
		background-color: transparent;
	}

	.responsive-table tbody,
	.responsive-table tr,
	.responsive-table th,
	.responsive-table td {
		display: block;
		text-align: right;
		white-space: normal;
	}

	.responsive-table tbody tr {
		margin-bottom: 1em;
		border: 2px solid #1d96b2;
	}

	.responsive-table tbody tr:last-of-type {
		margin-bottom: 0;
	}

	.responsive-table tbody th:first-of-type {
		background-color: #1d96b2;
		color: white;
	}

	.responsive-table tbody td[data-title]::before {
		content: attr(data-title);
		float: left;
		font-size: 0.9em;
		color: rgba(94, 93, 82, 0.75);
	}

}

@media (max-width: 48em) {
	.responsive-table th {
		font-size: 0.8em !important;
	}
}

@media (max-width: 62em) {

	.responsive-table th,
	.responsive-table td {
		font-size: 0.9em !important;
	}

	.responsive-table tfoot {
		font-size: .8em;
	}

}

/* COUNTDOWN CLOCK */

.countdown-container {
	display: flex;
	width: 90%;
	padding: 2em 5%;
	justify-content: space-around;
}

.days-container,
.hours-container,
.minutes-container,
.seconds-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.1);
	border: 5px solid rgba(255,255,255,0.3);
	width: 140px;
	height: 140px;
	border-radius: 99px;
}

.days,
.hours,
.minutes,
.seconds {
	font-size: 2.5em;
	margin: 10px 0;
}


.days-label,
.hours-label,
.minutes-label,
.seconds-label {
	text-transform: uppercase;
	margin-bottom: 5px;
}

@media (max-width: 800px) {

	.countdown-container {
		max-width: 90%;
	}

	.days-container,
	.hours-container,
	.minutes-container,
	.seconds-container {
		font-size: 0.8em;
		width: 100px;
		height: 100px;
	}
}


/* Clearfix for div.main */

div.main::after {
	content: '';
	display: table;
	clear: both;
}

/* Responsive images */

div.bodytext img,
#vertmenu img {
	max-width: 100%;
	height: auto;
}

/* Animation Test */

/* .for_2:checked ~ .id_2 { background-position: 80% 20%!important; } */

/* Tracking Consent Dialog */

#consentbox {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgb(240,240,220) !important;
	color: rgb(51,51,51) !important;
	padding: 32px 32px 32px 64px;
	border: 2px solid white;
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	z-index: 30000;
}

#consentbox > p {
	max-width: 50em;
	font-size: 24px !important;
	line-height: 1.3 !important;
	margin: 0.5em 1.2em;
}

#consentbox > p.consentstatement {
	font-weight: bold;
	font-size: 32px;
	margin-left: 32px;
}

#consentbox > p.consentdetails {
	margin-left: 32px;
}

#consentbox > p.consentoptions {
	float: right;
	margin-right: 2em;
}

p.consentoptions button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: rgb(240,240,240) !important;
	color: rgb(51,51,51) !important;
	font-size: 1.4em;
	text-align: center;
	padding: 0.25em 1.5em;
	border: 1px solid rgb(153,153,153);
}

#vptyes {
	font-weight: bold;
	min-width: 4em;
	border: 2px solid rgb(0,102,0);
}

#vptyes:hover {
	background: rgb(220,255,220) !important;
}

#vptx {
	box-sizing: border-box;
	position: absolute;
	top: 16px;
	left: 16px;
	width: 1.6em;
	height: 1.6em;
	font-size: 0.7em;
	line-height: 1.1em;
	padding: 0;
	border-radius: 0.8em;
}

#vptx:hover {
	background: rgb(244,220,220) !important;
}

label[for="consentboxtoggle"] {
	float: left;
	width: 24px;
	height: 24px;
	background: url("../images/information.png") no-repeat center center;
	margin-top: 8px;
}

label[for="consentboxtoggle"].consent-yes {
	background-image: url("../images/accept.png");
}

label[for="consentboxtoggle"].consent-no,
label[for="consentboxtoggle"].consent-dnt {
	background-image: url("../images/delete.png");
}

#consentboxtoggle { display: none; }

#consentboxtoggle:checked ~ #consentbox {
	width: 32px;
	height: 32px;
	padding: 2px;
	-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}

#consentboxtoggle:checked ~ #consentbox > p { display: none; }

#consentboxtoggle:checked ~ #consentbox > label { margin-top: 0; }

@media (max-width: 800px) {

	#consentbox > p {
		font-size: 14px !important;
	}

	#consentbox > p.consentoptions {
		float: none;
		margin-right: 0;
	}

}

/* MATERIAL ICONS */

a .material-icons,
a.material-icons {
	font-size: 1.2em;
	color: white;
	position: relative;
	border-radius: 50%;
	padding: 5px;
	margin: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s ease;
}

a .material-icons::after,
a.material-icons::after {
	content: "";
	width: 120%;
	height: 120%;
	border: solid 2px;
	transform: scale(0.8);
	position: absolute;
	top: -15%;
	left: -15%;
	border-radius: 50%;
	transition: all 0.3s ease;
}

a:hover .material-icons,
a.material-icons:hover {
	background-color: transparent;
	transform: rotate(90deg);
	cursor: pointer;
	box-shadow: none;
}

a:hover .material-icons::after,
a.material-icons:hover::after {
	transform: scale(1);
	box-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23);
}