@charset "UTF-8";
/* CSS Document */


@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300,400italic);

* { margin: 0; padding: 0; }


html,body{ height:100%;

		font-family: 'Roboto Condensed', sans-serif;


}





body {
	font-size:80%;
    content:"";
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-2;
background: rgb(255,255,255); /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background-image: url(data:image/png;base64,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);


}




/* Style of the Content */

.header {
	margin-bottom: 1%;
	background:#000;
	background: rgba(0, 0, 0, .9); 
   left: 0;
    right: 0;
    top: 0;
    z-index: 2;	
	
	
	
	
}
.container_head {
	
	width:960px;
	padding:1%;
	margin: 0 auto;

	position: relative;

	
}

.logo {
	
	    background-repeat: no-repeat;
    display: table-cell;
    margin-bottom: 10px;
    width: 40%;


}

.nav {
	
	    display: table-cell;
    vertical-align: middle;

}




.footer {
	
	    background: none repeat scroll 0 0 red;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    margin-top: 2%;
	margin-bottom:2%;
    padding: 1% 1%;
    text-align: center;
    width: 98%;
 font-size: 1.1em;
}

h1 {

	    color: RED;
    font-size: 1.4em;
    font-weight: bold;
    margin: 7px 0 5px;
	line-height:1.2em;
}

p {
	
 font-size: 1.1em;
    font-weight: 400;
    line-height: 1.6em;
	
}

.list ul {

}

.list li {
	

	
			margin-left:18px;

 font-size: 1.1em;
    font-weight: 400;
    line-height: 1.6em;
	
}

.list li:before {
    content: "\2022";
		font-weight:bolder;

    float: left;
    margin-left: -15px;
}

.nav li {
	text-align:right;
	color:#fff;
    font-size: 1.6em;
    font-weight: bolder;
    margin: 3% 0;
}

img {
	
	width:100%;
	
}
.clear {
	
	clear:both;
	
}



.content, .sidebar .abstand {
	float: none;
	padding: 2%;
	vertical-align: top;
}
.container {
	width:960px;
	margin: 0 auto;
}
.content {
	width: 64%;
	background: #FFF;
	background: rgba(255, 255, 255, .8); 
	display: table-cell;
}
.abstand {
	
		width: 2%;
	display: table-cell;
	
}
.sidebar {
	width: 34%;
	display: table-cell;
	background:#f00;
	background-image:url(../img/bax_bg2.jpg);
	background-size:cover;
	background-position:center;
	cursor:pointer;
	}




.main {
    background: #f8f8f8 url(superhero.png) no-repeat;
    width: 800px;
    height: 450px;
    margin: 50px auto; 
	-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
    -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
    box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.panel {
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 2px solid #07839f;
    color: #fff; background-color: #0483a0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
	background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
	background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
	background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
	background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
	background-image: linear-gradient(top, #31b2c3, #0483a0);
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #31b2c3; background:#31b2c3;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup h2{color:#07839f; line-height:1.8em}
.popup {
    background-color: #fff;
    display: inline-block;
    left: 50%; color:#666;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;
	width:50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.popup video{
	
	width:100%;
	
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(255, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size:2em;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}

a.active {
	
	color:red!important;
	
}

a:link, a:hover, a:visited, a:active {
	
	text-decoration:none;
	color:#fff;
}

strong {
	
	font-weight:bold;
	
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
	.header {
	margin-bottom:2%;
	padding-right:2%;	
	}
	
.container_head {
	width:95%;
	padding: 3%;

}

.container {
	width:95%;

}


.content {
	display:inline-block;
	width: 96%;

}

.sidebar {
	
	width:100%;
	display:block;
	padding:30% 0 ;

}

.popup {
	
	width:60%;
	
}

.popup video{
	
	width:100%;
	height:400px;
	
}

.enter {
	
	content:"\a";
	
}

.footer {
	
	    padding: 3% 1%;


}


}
 
 
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px) {
	body {
		
			font-size:90%;


	}
	
	
	
		.header {
	margin-bottom:2%;
	padding-right:2%;	
	}
	
.container_head {
	width:95%;
	padding: 3%;

}

.container {
	width:95%;

}

.nav li {
    color: #fff;
    display: inline-block;
    font-size: 1em;
    font-weight: bolder;
    margin: 3% 2% 3% 0;
    text-align: right;
}

.content {
	display:inline-block;
	width: 96%;

}
.nav {
    width: 100%;
    text-align: right;
		    display: block;

}

.nav li:nth-child(1):after {
	margin-left:4px;
	content:" |";
	
}
.img-cover {
	
	width:100%;
}
.sidebar {
	
	width:100%;
	display:block;
	padding:30% 0 ;

}

.popup {
    width: 80%;
}

.popup video{
	
	width:100%;
	height:200px;
	
}


.logo {
    float: left;
    margin-bottom: 10px;
    width: 100%;
}
 
.footer {
	
	    padding: 3% 1%;


}


}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width :0px)
and (max-device-width : 319px) {
	
	

}