@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;700;900&display=swap');


/* Start of CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

sup {
	font-size: 0.6em;
	vertical-align: 0.8em;
}
sub {
	font-size: 0.6em;
	vertical-align: -0.8em;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    border-spacing: 0;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    color: #fff;
    background-color: #11282D;
    background-size: cover;
    background-position: center;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul, ol {
	padding: 0 0 3px 30px
}

/* End of CSS Reset */





p { margin-bottom: 9px; font-weight: 300; font-family:'Roboto Slab' }

b { font-weight: bold; }

.topContainer {
    max-width: 1640px;
} 
 
h1 { margin: 20px  0; font-weight: 900; font-family:'Roboto Slab', serif; font-size: 32pt; color:#22c6cf ; margin: 0; padding:40px 0; background-color: #52515c; text-align: center;}
h2 {
    margin: 10px  0 10px 0;
    font-weight: 900;
    padding: 15px 0;
    font-family: 'Roboto Slab', serif;
    font-size: 32pt;
}
h3 { margin: 20px  0 15px 0; font-weight: 700; font-family:'Roboto Slab', serif; font-size: 24pt; color:#FFF ; }
h4 { margin: 20px  0 15px 0; font-family:'Roboto Slab', serif; font-size: 14pt; color:#22c6cf ; }
h5 { margin: 15px 0; font-family:'Roboto Slab', serif; font-size: 12pt; color:#22c6cf ; }

th {font-weight: bold; padding: 5px 15px 5px 3px; }
td {padding: 3px 15px 3px 3px; }


button {
	cursor: pointer;
	background-color: #d6dce8;
	color: #102d69;
	font-family: serif;
	height: 60px;
	width: 250px;
	border-radius: 4px;
	box-shadow: 2px 4px 7px black;
	font-size: 14pt;
	margin: 10px;
	vertical-align: middle;
}

.thisPage { background-color: white; }

button:hover { box-shadow: 2px 4px 7px grey; background-color: #ed9222;}

	a { color: #f19000; }

#banner img {
    height: 100%;
    width: 100%;
    max-width: 1640px;
}


#navbar {
	max-width: 1010px;
	margin: 0 auto;
	height: 48px;
	padding-top: 10px;
	}




.regForm table { padding: 0 10px }
.regForm td { padding-right: 10px; }
.regForm input[type=text] { font-size: 14pt; width: 300px;}

#reg_success p { font-size: 13pt; margin-bottom: 10pt; }

/*.resultsTable td { padding: 5px 15px; }
*/

.footer { background-color: #52515c; padding: 15px }


.inputerror { background-color: #FEE; color: #F00; box-shadow: 0px 0px 12px red }

.mainChild { padding: 0 20px ; }

.innerContainer25 {
    display: inline-block;
    padding: 25px max(25px, 2%);
    background-color: #11282D;
    width: 100%;
}

	.rT tr { height:28px; border-bottom: 1px solid #CCCCDD;}
	.rT td { vertical-align:middle; }
	.rT tr:nth-child(1) { background-color:transparent }
	.rT tr.record:nth-child(2n+1) { background-color:#C1C861; }
	.rT tr.record:nth-child(2n) { background-color:#DFE1BD; }
	.rT tr.record:hover { background-color:#F7FF88; }


* {  box-sizing: border-box; }

.flex_container_stream {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

/* Create 2 columns that sit next to each other for larger screens*/
.flex_column_stream {
    flex: 75%;
    width: 67vw;
    height: auto;
    padding: 0;
}

.flex_column_slido {
  flex: 25%;
  padding: 0;
}

.flex_column_slido iframe {
	width:100%; 
	height: 100%;
	min-height: 600px;
}


.tab_buttons {
	text-align: center;
	justify-content: space-between;
	flex-flow: row wrap;
	display: flex;
	margin: 0 -10px;
	overflow-x: hidden;
}

.btn { 
	width: calc((100%/7) - 2%); 
	min-width: 155px; 
	height: 55px; 
	border: 0; 
	font-variant-caps: small-caps; 
	font-size: 1.1em; 
	white-space: nowrap; 
	margin: 0 10px 15px 10px;
	flex: 1;
}


.btn_active  { background-color:#01A982; }
/*
.btn_inactive { width: 16%; min-width: 155px; height: 55px; border: 5px solid white;  }

.btn_inactive { width: 16%; min-width: 155px; height: 55px; border: 5px solid white;  }
*/

.btnInProgress { background-color:orange; }

.pageTabWrapper { width:100%; overflow:hidden; display:table; }
.pageTabInnerWrapper { width:1000%; transition-duration: 0.5s; animation: 1s ease-in-out; left:0; position:relative; }
.pageTab {
    width: 10%;
    position: relative;
    top: 0px;
    float: left;
    padding: 7px;
    color: #D3BB81;
}

.pageTabBtn { width : 100% }
.pageTabBtn ul { height: 33px; padding-left: 0; }

.pageTabBtn li {
  background: #0094D6 none repeat scroll 0 0;
  border-bottom: 4px solid transparent;
  border-right: 1px dotted white;
  color: white;
  cursor: pointer;
  float: left;
  font-size: 11pt;
  font-weight: bold;
  list-style: outside none none;
  padding: 3px 15px;
}

.pageTabBtn li:hover {
 color: #FCCD03;
 border-bottom: 4px solid #FCCD03; 
}

/* AGENDA */
#tbl_agenda { width:100%; border-collapse: separate; border-spacing: 4px 2px; font-size: 1em; }
#tbl_agenda td:nth-of-type(1) { font-weight: bold; width: 150px;}
#tbl_agenda td { padding: 9px 9px 9px 0; color: #333; }
#tbl_agenda .heading td { font-weight: bold; }
#tbl_agenda .subheading td { font-weight: normal; font-style: italic; }

/* SPEAKERS */
.tbl_speakers  {
    border-collapse:separate;
    border-spacing:0 10px;
}

.tbl_speakers td:first-of-type img { 
	width: 220px;
	/* padding: 10px;
	border: 1px solid #AAA; */
	background-color: #FFF;
	box-shadow: 2px 2px 8px #444444B4;
}
 
.tbl_speakers td {
	vertical-align: top;
	padding: 20px 20px 20px 0;
}

.tbl_speakers td:first-of-type {
	line-height: 1.7em;
}

.tbl_speakers  h3 {
	font-weight: bold;
	margin: 0;
	font-size: 1.4em;
}

.tbl_speakers  h4 {
	margin: 0 0 20px 0;
	font-size: 1.4em;
}

/* SPONSORS */
.tbl_sponsors  {
    border-collapse:separate;
    border-spacing:0;
}
	
.tbl_sponsors td {
	background-color: white;
	vertical-align: top;
	padding: 20px 20px 20px 20px;
}

.tbl_sponsors td:first-of-type {
	text-align: center;
	vertical-align: top;
	padding-top: 50px;
}

.tbl_sponsors td:nth-of-type(2) {
	padding-left: 20px;
}

.tbl_sponsors td:nth-of-type(3) {
	padding-top: 30px;
}


.tbl_sponsors img { 
	width: 160px;
	height:auto;
	/* padding: 10px;
	border: 1px solid #AAA; 
	box-shadow: 2px 2px 8px #444444B4;
	*/
}

.tbl_sponsors  h3 {
	font-weight: bold;
	margin: 0;
	font-size: 1.4em;
}


/* SCHOLARS */
.tbl_scholars td {
	vertical-align: top;
	padding: 15px 25px 15px 0;
}

.tbl_scholars img { 
	/* padding: 10px;
	border: 1px solid #AAA; */
	background-color: #FFF;
	box-shadow: 2px 2px 8px #444444B4;
	width: 165px;
	height:auto;
 }
 
 .tbl_scholars h3 {
	text-transform: uppercase;
	margin-top: 0px;
 }
 

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
}

.contact-card {
	min-width: 350px;
	height: 110px;
	background-color: #F09E004D;
	box-shadow: 2px 2px 8px #4446;
	margin: 15px 0 15px 0;
	padding: 20px;
}


/* Responsive layout for smaller screens - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 1100px) {
  .flex_column_stream {
    flex: 100%;
	width: auto;
	height: 56.25vw;
    max-width: 100%;
	padding: 0;
  }
  
  .flex_column_chat .flex_column_slido {
  flex: 25%;
  width: 25%;
  padding: 0;
}

  .flex_column_slido {
    flex: 100%;
    max-width: 100%;
	padding: 0;
  }
    
  .flex_column_chat iframe {
	min-height: 300px;
	height:90%; 
	width:100%;
	border: 1px solid lightgrey;
}


}



/* Responsive layout for smaller screens - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 900px) {
	body { 
		font-size: 1em;
	}
}

@media (max-width: 600px) {
  .btn { width: 100%; }
}


/* Responsive layout for smaller screens - makes the two columns stack on top of each other instead of next to each other */
/*
@media (max-width: 1100px) {

  .btn { width: calc((100%/7) - 0.3%); min-width: 155px; height: 55px; border: 5px solid white; font-variant-caps: small-caps; font-size: 1.1em; white-space: nowrap}


  .flex_column_stream {
    flex: 100%;
	width: auto;
	height: 56.25vw;
    max-width: 100%;
	padding: 0;
  }
  .flex_column_slido {
    flex: 100%;
    max-width: 100%;
	padding: 0;
  }
}
*/








@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

#rollingFade {
  position:relative;
  height:auto;
  width:100%;
  margin:0 auto;
  display: block;
}
#rollingFade img {
  position:absolute;
  left:0;
  width:100%;
}

#rollingFade img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 30s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 30s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 30s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 30s;
}
#rollingFade img:nth-of-type(1) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}
#rollingFade img:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  animation-delay: 10s;
}
#rollingFade img:nth-of-type(3) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}
#rollingFade img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}





.btnDefault { vertical-align:middle; color:white; background-color: #5b9bd5; 
  -ms-transition: background 0.7s ease 0s;
  -moz-transition: background 0.7s ease 0s;
  -o-transition: background 0.7s ease 0s;
  -webkit-transition: background 0.7s ease 0s;
  transition: background 0.7s ease 0s; 
}
.btnInProgress { background-color: #ffc000; }
.btnSuccess { background-color: #92d050; }
.btnSuccessHold { background-color: #92d050; }
.btnNotSaved { background-color: #cc3399; 
  -ms-transition: background 0.7s ease 0s;
  -moz-transition: background 0.7s ease 0s;
  -o-transition: background 0.7s ease 0s;
  -webkit-transition: background 0.7s ease 0s;
  transition: background 0.7s ease 0s; 
}
.btnError { background-color: #ff0000; }
.btnDisabled { color:999999; background-color: #cccccc; cursor: not-allowed; }
.btnDisabled:hover { box-shadow: none;}
