body {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color:#EEE;
}
body.embed {
	margin:0;
	padding:0;
	width: 100vw;
	height: 100vh;
	overflow: hidden; /* disable scrollbars */
	display: flex;
	flex-direction: column;
}
/*.embed .fullscreen {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100hv;
}
*/
.embed .top-bar {
	flex-grow: 0;
}
.embed header {
	display: none;
}
.embed article {
	flex: auto;
	overflow: hidden;
}
.top-bar {
	background-color:#333;
	color:#FFF;
	width: 100%;
	margin:0;
	padding: 3px 10px;
	border-bottom: solid thin red;
	box-sizing: border-box;
}
header {
	max-width: 1024px;
}
header .info_box, header .description_box {
	width: 500px;
	margin: 0;
	padding: 0;
	float: left;
}
header .info_box {
	margin-right:20px;
}
header .strapline {
	font-style:italic;
	font-size: 1.4em;
}
header .subtitle {
	font-size: 1.4em;
	font-weight:bold;
}
header .author {
	font-size: 1.2em;
	font-weight:bold;
}
header .affiliation {
	font-style:italic;
	margin-top: 0;
	padding-top: 0;
}
header .end {
	clear: both;
}
#video {
	float: left;
	margin-right:40px;
}
#slides {
	float: left;
}
.clear {
	clear: both;
}

.version_dev .top-bar {
	background-color:#F00;
	border-bottom: solid thin black;
}

.carousel {	width:100%;
	background-color:green;
	/*overflow: auto;*/
	white-space: nowrap;
	overflow-x: scroll;
    scrollbar-width: thin;
}
.carousel-inner {
	width: auto;
}
.carousel-top, .carousel-bottom {
	/*
	width:100%;
	height: 16px;
	background-repeat:repeat-x;
	background-color:#FFF;
	*/
	height:0;
}
/*
.carousel-top {
	background-image: url(https://alandix.com/player/assets/v0/images/movie-top_128x16.png);
}
.carousel-bottom {
	background-image: url(https://alandix.com/player/assets/v0/images/movie-bottom_128x16.png);
}
*/

.filmreel .carousel-container{
	background-image: url(https://alandix.com/player/assets/v0/images/movie-top_128x16-white.png), url(https://alandix.com/player/assets/v0/images/movie-bottom_128x16-white.png);
	background-position: left top, left bottom;
	background-repeat: repeat-x, repeat-x;
	background-color:#575757;
}

.filmreel .slide {
	/*height: 150px; */
	background-color:#575757;
}

.carousel-container {
	background-color:#575757;
	/*width: auto;*/
	display: flex;
	flex-direction: row;
	padding-top: 16px;
	padding-bottom: 16px;
	/*padding-left: 10px;
	padding-right: 10px;*/
	padding-left: 5px;
	padding-right: 5px;
}


.carousel .slide {
	/*height: 150px; */
	width: auto;
	margin:0;
	padding:0;
	/*padding-right: 10px;*/
	padding-right: 5px;
	padding-left: 5px;
	display:block;
	position:relative;
}


.carousel .slide-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.carousel .slide.selected  {
}

.carousel .selected .slide-content {
  box-shadow: 0px 0px 5px 5px red;
}