body {
	background: url(../img/bg.jpg) repeat;
	padding-top: 70px;
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Microsoft Yahei", "SimHei", "Hiragino Sans GB","Hiragino Sans GB W3",sans-serif;
	-webkit-font-smoothing:antialiased;
}
section {
	border-top: 4px solid #f9f9f9;
}
h4 {
	font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei", "SimHei", "Hiragino Sans GB","Hiragino Sans GB W3",sans-serif;
	font-weight: bold;
	font-size: 24px;
}

/* ==========================================================================
   Streaming Page
   ========================================================================== */
#streaming {
	padding-top: 0px;
}
#streaming .container {
	width: 800px;
}

/* ==========================================================================
   Home Styles
   ========================================================================== */

#home {
	padding: 100px 0;
}
#home .intro,
#home .explore {
	text-align: center;
}
#home img {
	display: inline-block;
}
#home .explore {
	margin-top: 4em;
}

/* ==========================================================================
   Speaker Styles
   ========================================================================== */

#speaker {
	background-color: white;
	text-align: center;
	padding-bottom: 0;
	position: relative;
}
#speaker .row {
	max-width: none;
	margin: 0;
}
#speaker ul {
	padding: 0;
}
#speaker ul li.active i {
	text-decoration: none;
	color: black;
}
#speaker ul li:not(.active) i {
	text-decoration:none;
	color:black; opacity:0.5;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
#speaker ul li:hover i {
	text-decoration:none;
	opacity: 1;
}
#speaker li {
	list-style: none;
}
#speaker .col-xs-3,
#speaker .col-sm-2 {
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) {
	#speaker .col-sm-2 {
		width: 12.5%;
	}
}

#speaker .img-grid img {
	position:relative;
	display:block;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	width: 100%;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	-webkit-filter: grayscale(100%);
	filter: url("data:image/svg+xml;filter: gray;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
#speaker .img-grid img:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-webkit-filter: grayscale(0%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

#speaker-bio {
	display:none;
	position: absolute;
	background: url(../img/bg.jpg) white repeat;
	top: 0;
	padding: 10px;
	border: 20px solid #f7f7f7;
	text-align: left;
	overflow-y: auto;
}
#speaker-bio .close {
	opacity: .8;
}
#speaker-bio .speaker-bio-photo {
	margin: 5px 5px;
}

/* ==========================================================================
   Topic Styles
   ========================================================================== */

#topic {
	padding: 30px 0;
}
#topic .ac,
#topic .title {
	margin-top: 30px;
	text-align: right;
}
#topic .title {
	font-weight: bold;
	font-size: 1.4em;
}
@media (max-width: 767px) {
	#topic .youtube {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px; 
		height: 0;
	}
	#topic .youtube iframe,
	#topic .youtube object,
	#topic .youtube embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
@media (min-width: 768px) {
	#topic {
		height: 1000px;
		font-size: 1.1em;
		position: relative;
	}
/*	#topic .title,
	#topic .ac,
	#topic .date,
	#topic .youtube,
	#topic .content {
		position: absolute;
	}
	#topic .title {

	}*/
	#topic .youtube {
		margin-top: 100px;
	}
	#topic .title {
		margin-top: 90px;
		padding-left: 150px;
		font-weight: bold;
		font-size: 1.4em;
	}
	#topic .ac {
		text-align: right;
	}
	#topic .date {
		text-align: right;
		margin-top: 290px;
		right: -80px;
	}
	#topic .logo {
		margin-top: 50px;
		text-align: right;
	}
	#topic .content {
		margin-top: 100px;
	}
}

#topic .vertical-text span {
	width: 1.5em;
	float: left;
}
#topic .vertical-text-en {
	transform:rotate(90deg);
	-ms-transform:rotate(90deg); /* IE 9 */
	-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
#topic .text-important {
	color: #ed1c24;
	font-weight: bold;
}

/* ==========================================================================
   Ticket Styles
   ========================================================================== */

#ticket {
	background: white;
	padding: 60px 0;
}
#ticket .title,
#ticket .ticket-type {
	display: inline-block;
}
#ticket .title {
	color: #ed1c24;
	font-weight: bold;
	font-size: 1.2em;
}
@media (min-width: 768px) {
	#ticket .title {
		padding-top: 60px;
	}
}
#ticket a {
	color: inherit;
}
#ticket li {
	text-align: center;
	list-style: none;
	height: 165px;
	padding-top: 40px;
}
#ticket li:hover {
	color: #ed1c24;
	background: url(../img/ticket_reddot.png) center no-repeat;
}
#ticket .ticket-type-title {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 1.1em;
}

/* ==========================================================================
   Sponsor Styles
   ========================================================================== */

#sponsor {
	background-color: #f9f9f9;
}
#sponsor .title {
	text-align: center;
	height: 80px;
	line-height: 80px;
	font-size: 1.4em;
	font-weight: bold;
	background: url(../img/sponsor_title_bg.png) center no-repeat;
}
#sponsor li {
	list-style: none;
}
@media (min-width: 768px) {
	#sponsor .sponsor-type-title {
		display: inline;
		margin-right: 40px;
	}
}
#sponsor .sponsor-type > li {
	margin: 10px auto;
}
#sponsor .sponsor-list {
	display: inline;
	padding-left: 0;
}
#sponsor .sponsor-list li {
	display: inline-block;
	width: 150px;
	margin: 10px auto;
}
#sponsor img {
	max-width: 120px;
	max-height: 72px;
}
/* ==========================================================================
   Footer Styles
   ========================================================================== */

footer {
	border-top: 30px solid #ed1c24;
	margin: 0 auto;
}
footer .container {
	text-align: center;
	padding: 20px 15px;
}
footer a {
	color: #555;
}
footer .logos,
footer .copyright {
	display: inline-block;
	margin-top: 10px;
}
footer .logos img {
	margin: 0 10px;
}