body { font-size:15px; margin:0 }

header {
	background: black;
	position: sticky;
	top: 0;
}

#container, header .content {
	margin:auto;
	max-width:1000px;
	width:auto;
	min-height:100%;
}
header .content {
	padding: 0 1em;
	display: flex;
	justify-content: space-between;
}

#container {
	font-family:Roboto, Helvetica, 'Sans Serif';
	margin: 1em auto;
	padding: 1em;
	background:#FFF;
}
.logo	{
	display: block;
	padding:1.5em 0;
	max-height:60px;
}
img {
	max-width:100%;
}

button, .button {
	background: #EEE;
	padding:7px 15px;
	text-decoration: none;
	color: #000000;
	display: inline-block;
	vertical-align: middle;
}

button:hover, .button:hover {
	background: #CCC;
}

button + button, .button + .button, button + .button, .button + button {
	margin-right:.5em;
}

form.login {
	text-align:center;
	padding:2em;
	/* border:1px solid #DDD; */
	/* background:#EEE; */
	line-height:1.6em;
	font-weight:normal;
}
form.login input {
	font-size:.8em;
	padding:.5em .8em;
}

h1{
	color:#999;
	text-transform: uppercase;
	font-size:2.3em;
	margin:0;
}

h2{
	color:#000;
	font-size:1.6em;
	margin-top: .2em;
	margin-bottom:1.8em;
}

/* h2.dates span {
	white-space: nowrap;
} */
h2.dates > span {
	display: block;
}

.button-register {
	font-size: 1.4em;
	font-weight: 400;
	letter-spacing: 1px;
	padding: .4em 4em;
	margin-bottom: 2em;
	border-radius: 1em;
	color: #FFF;
	background-color: #0891b3;

}

.dates span.from, .dates span.to {
	font-size: .8em;
}

#bloc_container {
	background:url(img/bg.jpg) top center #FFF;
	margin:auto;
}

#bloc_container > div, #bloc_container > table {
	max-width:710px;
	padding:3%;
	margin:auto;
	background:#FFF;
}

.bloc_inverse {
	color:#FFF;
}
.bloc_inverse a {
	color:#F00;
}

.bloc .img {
	width:30%;
	margin-right:4%;
}
.bloc .img img {
	max-width:100%;
	display:block;
}
.bloc div {
	display:inline-block;
	vertical-align:middle;
	width:66%;
}


.playlist {
	text-align:center;
	padding:5px;
	background:#000;
}
.playlist_item {
	border:4px solid #666;
	display:inline-block;
	width:220px;
	height:122px;
	margin:5px;
	background-size:cover;
	background-position:center;
	opacity:.7;
	position:relative;
}
.playlist_item > div {
	position:absolute;
	left:0;
	right:0;
	top:0;
	padding:5px;
	background:rgba(0,0,0,0.7);
	color:#FFF;
}
.playlist_item:hover, .playlist_item.active {
	border-color:#B00;
	opacity:1;
}

.playlist_item img {
	max-width:100%;
}



.auths:after {
	content:' ';
	display:block;
	clear:both;
}
.auths > div {
	float:left;
	width:49%;
	font-size:.7em;
	line-height:1.3em;
}
.auths > div img {
	float:left;
	margin-bottom:.5em;
	margin-right:1.5em;
}
.auths > div p {
	font-size:1.3em;
	margin:0;
	margin-bottom:5px;
}
.auths > div:first-child {
	margin-right:2%;
}
.auths > div:last-child {
	float:right;
}





@media (max-width:700px) {
	h1 {
		font-size: 1.2em;
	}
	h2.dates {
		font-size: 1.3em;
	}
	.auths > div {
		clear:both;
		float:none !important;
		width:100%;
		margin-bottom:1.5em;
	}
	#bloc_container > table td {
		display:block;
	}
	#bloc_container > table td img {
		max-width:100%;
	}


	.bloc div {
		display:block;
		width:100%;
	}
	.bloc .img {
		width:100%;
		margin-bottom:.5em;
	}
	.bloc .img img {
		margin:auto;
	}


}

#livesList h1 {
	margin-top: 2em;
	font-size: 2em;
	margin-bottom: 1em;
}

.livePreview {
	padding: 20px;
	border: 1px solid #DDD;
	margin-bottom: 20px;
	display: flex;
	text-decoration: none;
	background: #FAFAFA;
}
.livePreview:hover {
	background: #EEE;
}
.livePreview .img {
	width: 38%;
	margin-right: 4%;
	flex: none;
}
.livePreview .img img {
	margin: auto;
	max-height: 400px;
	max-width: 100%;
	display: block;
}

.livePreview .content {
	flex: 1 1 auto;
	color: #444;
}
.livePreview .content .title {
	flex: 1 1 auto;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: .5em;
}
.livePreview .content .dates {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: .5em;
	color: #A00;
}
.livePreview .content .dates > span {
	display: block;
}

.livePreview.banner {
	display: block;
	text-align: center;
}


.livePreview.banner .img {
	width: 100%;
	margin-right: 0;
	margin-bottom: 10px;
}


@media (max-width:600px) {

	.livePreview {
		display: block;
		text-align: center;
	}
	.livePreview .img {
		width: 100%;
		margin-bottom: 1em;
	}
	

}