body {
	background: #ffffff;
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	color: #000000;
	font-size: 13px;
	font-weight: 100;
	-webkit-text-size-adjust: none;
	margin: 0;
	line-height: 1.3;
	/*text-shadow: 1px 1px 1px #dddddd;*/
}

#header {
	padding: 6px 0 0 0;
	margin: auto;
	height: 230px;
	width: 905px;
}

#page {
	margin: auto;
	width: 905px;
}

#page-one-pager {
	margin: 50px auto 10px auto;
	width: 600px;
	text-align: justify;
	line-height: 1.5;
	font-family: helvetica, sans-serif;
	font-size: 12px;
	/*background: #ff0000;*/
	
}

form {
	float: left;
	margin: 0 0 4px 0;
}

input {
	border: none;
	padding: 6px;
	border-radius: 8px;
	font-size: 9px;
}

input.email {
	width: 105px;
	margin-right: 2px;
}

input.button {
	background: #666666;
	color: #ffffff;
	margin-right: 2px;
}

#menu {
	width: 600px;
	text-align: center;
	margin: auto;
	height: 20px;
	width: 400px;
	padding: 10px 0 10px 0;
	font-size: 14px;
	font-weight: 400;
}

#menu a {
	font-size: 14px;
	color: #000000;
}

#social {
	position: fixed;
	top: 5px;
	right: 6px;
	text-align: right;
}

.fotorama {
	position: fixed;
}

.slider  {
	position: fixed;
	height: 100%;
	width: 100%;
	background-size: cover; 
	background-position: center right;
	z-index: -100;
}

.slide img {
	width: 100%;
	min-width: 1000px;
}

#posts {
	
	width: 778px;
	min-height: 2000px;
	height: 100%;
	padding: 80px 0 0 0;
	margin: 20px auto 0px auto;
	background: url(../img/bar-vertical.png) repeat-y center center;
}

.post {
	width: 100%;
	margin: auto auto 25px auto;
}

.bubble {
	float: left;
	border-radius: 28px;
	background: #ffffff  url(../img/bg-white.png);
	width: 200px;
	padding: 20px;
}

.bubble-single {
	border-radius: 28px;
	background: #ffffff url(../img/bg-white.png);
	width: 300px;
	padding: 20px;
	margin: auto;
}


.bubble-video {
	float: left;
	border-radius: 28px;
	background: #ffffff url(../img/bg-white.png);
	width: 200px;
	padding: 20px;
	text-align: center;
}

.bubble-video .title {
	font-size: 22px;
	color: #000000;
	font-weight: 100;
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0 0 0px 0;
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}

.title a {
	color: #000000;
}

.box-video {
	float: left;
	width: 250px;
	margin: auto;
	margin: 0 0 0 22px;
}

.box-video embed, .box-video iframe {
	width: 250px;
	border: solid 3px #000000;
	height: 130px;
}

.photo {
	float: left;
	width: 250px;
	background: #000000;
	height: 249px;
	margin: 0 0 0 22px;
	position: relative;
	border: solid 3px #111111;
}

.photo img {
	
}

.date {
	float: left;
	font-size: 26px;
	width: 220px;
	padding: 90px 0 0 0;
	text-align: center;
	line-height: 1;
	color: #faf4db;
	font-weight: 400;
	text-shadow: 1px 0px 2px #444444;
	-webkit-font-smoothing: antialiased;
	
}

.date-video {
	float: left;
	font-size: 26px;
	width: 220px;
	padding: 30px 0 0 0;
	text-align: center;
	line-height: 1;
	color: #faf4db;
	font-weight: 400;
	text-shadow: 1px 0px 2px #444444;
	-webkit-font-smoothing: antialiased;
}

.category {
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: #faf4db;
	-webkit-font-smoothing: antialiased;
}

.icon-series {
	pointer-events: none;
}

.icon-series img {
	border: none;
	position: absolute;
	z-index: 100;
	bottom: 14px;
	right: 8px;
}

.bubble .title, .bubble-single .title {
	font-size: 22px;
	color: #000000;
	font-weight: 100;
	line-height: 1.4;
	text-transform: uppercase;
	margin: 0 0 6px 0;
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}

.more {
	text-align: left;
	
}

a.more {
	cursor: pointer;
	font-weight: 100;
	color: #000000;
}


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeOut { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeOut { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
 	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	animation-delay: 0.2s;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-out {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeOut ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeOut ease-in 1;
    animation:fadeOut ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
 	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	animation-delay: 0.2s;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

#menu {
	text-transform: uppercase;
}

#logo {
	width: 400px;
	margin: auto;
}

#mailinglist {
	font-size: 12px;
	letter-spacing: 0px;
	background: url(../img/bg-panel.png);
	text-align: left;
}

#mailinglist form {
	display: inline;
}

#mailinglist form input {
	background: #dddddd;
	color: #000000;
	padding: 5px 6px 5px 6px;
	width: 100px;
	font-weight: 100;
	border: solid #aaaaaa 0px;
}

#mailinglist form input.button {
	background: #2f6088;
	color: #ffffff;
	border: none;
	width: 84px;
	padding: 5px 10px 5px 10px;
}

a {
	color: #df2020;
	text-decoration: none;
}

a.sel {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: underline;
}

.concerts a {
	text-decoration: underline;
}

#footer {
	font-size: 10px;
	margin: auto;
	text-align: center;
	position: fixed;
	bottom: 4px; 
	right: 10px;
	color: #faf4db;
	font-weight: 400;
	text-shadow: 1px 0px 2px #444444;
	-webkit-font-smoothing: antialiased;
}

#footer a {
	font-size: 10px;
	color: #faf4db;
	text-shadow: 1px 0px 2px #444444;
}




/* RESPONSIVE
----------------------------------------------- */

@media only screen and (max-width: 800px) {
	
	.slider  {
	position: fixed;
	height: 100%;
	width: 100%;
	background-size: cover; 
	background-position: top right;
	z-index: -100;
	}
}

@media only screen and (max-width: 620px) {
	


}