@font-face {
    font-family: 'bebas_neueregular';
    src: url('../fonts/bebasneue-webfont.eot');
    src: url('../fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebasneue-webfont.woff') format('woff'),
         url('../fonts/bebasneue-webfont.ttf') format('truetype'),
         url('../fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body {
	background-color: #ffffff;
	height: 100%;
	margin: 0px;
	padding: 0;
	font-family: bebas_neueregular, 'Oswald', Arial, sans-serif;
}
a {outline : none;}
a img {outline : none;}
img {border : 0;}

a:link { text-decoration: none; color: #4c4c4c; border:0px;}
a:visited { text-decoration: none; color: #4c4c4c; border:0px;}
a:active { text-decoration: none; color: #4c4c4c; border:0px;}

#start {
	font-family: bebas_neueregular, 'Oswald', Arial, sans-serif;
}

#info, #imprint {
	font-size: 2em;
	color:#4c4c4c;
	background-color:#ededed;
	position:relative;
}

#start {
	font-size: 1.2em;
	color:#4c4c4c;
	background-color:#ededed;
}

#main {
	height: 540px;
	width: 1337px;
	margin: 100px auto;
	position: relative;
}

 #start, #middle, #info, #imprint {
	width:1280px;
	height:540px;
	float:left;
}

#left {
	width: 40%;
	height: 100%;
	float:left;
	border: 5px solid #ffffff;
	border-right: 0px solid #ffffff;
}

#right {
	background-color: #ededed;
	width: 52px;
	height: 540px;
	float:left;
	margin-left:3px;
	background-image: url(../images/info-options-bg.png);
	background-repeat: no-repeat;
	position:relative;
	z-index:1000;
}

#video {
	width:1280px;
	height:540px;
	border-bottom: 5px solid #ffffff;
    position: relative;
}

.marginContainer {
	margin:60px;
}

#languageSelectorBox {
	font-family: bebas_neueregular, 'Oswald', Arial, sans-serif;
	color:#4c4c4c;
	position: absolute;
	top: 30px;
	left: 1200px;
	z-index: 999;
	width: 200px;
}

#selectInfo {
	width:52px;
	height:55px;
	margin-top:0px;
	display:block;
}

#changeStats {
	width:52px;
	height:55px;
	margin-top:0px; 
	display:block;
}

#linkToJH {
	position:absolute;
	width:52px;
	height:55px;
	top:431px;
	display:block;
}

#shareButton {
	position:absolute;
	width:52px;
	height:55px; 
	top:486px;
	display:block;
}

#facebookLoginButton, #startFilmButton {
	width:430px;
	height:50px;
}

.optionsLeft, .optionsRight {
	width: 201px;
}

.startFacebook {
	min-height:100px;
	margin-bottom:2em;
}

#imprintBox {
	font-family: bebas_neueregular, 'Oswald', Arial, sans-serif;
	color:#4c4c4c;
	position: absolute;
	bottom: 60px;
	left: 60px;
	z-index: 999;
	font-size: 16px;
}

.startLeft, .startRight {
	float:left !important;
	width:50%;
	margin:0 !important;
}

.halfLeft, .halfRight {
	float:left !important;
	width:50%;
	margin-top:3em;
}

#share-facebook {
	margin-left:3px;
	background-image: url(../images/share-facebook.png);
	background-repeat: no-repeat;
	z-index:1000;
	position:absolute;
	width:52px;
	height:55px;
	top:430px;
	right:-56px;
	display:block;
	
}

#share-twitter {
	margin-left:3px;
	background-image: url(../images/share-twitter.png);
	background-repeat: no-repeat;
	z-index:1000;
	position:absolute;
	width:52px;
	height:55px;
	top:486px;
	right:-56px;
	display:block;
}

#options {
	width: 100%;
	height: 100px;
}

.selectTitle {
	float:left;
}

.table div{
	padding:0.4em;
}

#imgContainer {
    position: absolute;
    top: 0;
    z-index: 10;
}

.container-inside {
    position: relative;
    z-index: 100;
}

.hide-avatar {
    display: none !important;
}

.text {
    -moz-user-select: none;
    color: #a3a39f;
    font-family: 'Source Sans Pro',sans-serif;
    font-size:20px !important;
    height: 30px;
    width:100px;
    line-height: 25px;
    margin-bottom: 15px;
    outline: medium none;
    text-align: center;
/*     text-transform: uppercase; */
    width: auto;
    z-index: 1000;
}

.textGrey {
	color: #a6a6a6;
}

.img-container {
    height: 125px;
    width: 100px;
    z-index: 100;
}

img {
    left: 0;
}

.grey {
    background-color: rgba(78, 78, 76, 0);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10000;
}

.resizecrop {
	left:0px !important;
}


/*
 * @CSS3 Metro Dropdown
 * @author Martin Ivanov
 * @website http://wemakesitesnet
 * @blog http://acidmartin.wordpress.com
 * @twitter https://twitter.com/#!/wemakesitesnet
 **/
 
:root .css3-metro-dropdown option,
:root .css3-metro-dropdown:after,
:root .css3-metro-dropdown::after,
:root .css3-metro-dropdown select
{
    color: #fff;
}
 
:root .css3-metro-dropdown select,
:root .css3-metro-dropdown:after,
:root .css3-metro-dropdown::after
{
    display: block;
    background: #4c4c4c;
    width:200px;
    border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
}
 
:root .css3-metro-dropdown select,
:root .css3-metro-dropdown option
{
    padding: 4px;
}
 
:root .css3-metro-dropdown
{
    position: relative;
    display: inline-block;
    border: 0;
}
 
:root .css3-metro-dropdown::after
{
    content: "\25bc";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 32px;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
     
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}
 
:root .css3-metro-dropdown select
{
   height: 28px;
   border: 0;
   vertical-align: middle;
   font: normal 12px/14px "Segoe UI", Arial, Helvetica, Sans-serif;
   outline: 0 none;
}
 
:root .css3-metro-dropdown option
{
    background: #fff;
    color: #333;
}
 
/* more colors */
:root .css3-metro-dropdown-color-ff1d77 select,
:root .css3-metro-dropdown-color-ff1d77:after,
:root .css3-metro-dropdown-color-ff1d77::after
{
    background: #ff1d77;
}
 
:root .css3-metro-dropdown-color-2673ec select,
:root .css3-metro-dropdown-color-2673ec:after,
:root .css3-metro-dropdown-color-2673ec::after
{
    background: #2673ec;
}
 
:root .css3-metro-dropdown-color-ff2e12 select,
:root .css3-metro-dropdown-color-ff2e12:after,
:root .css3-metro-dropdown-color-ff2e12::after
{
    background: #ff2e12;
}

/* Medium Resolution */
@media (min-width:950px) and (max-width:1399px) {
	html, body {
		font-size: 0.9em;
	}
	
	#main {
		height: 324px;
		width: 802px;
	}
	
	#start, #middle, #info, #imprint {
		width:768px;
		height:324px;
	}
	
	#info {
		font-size:22px;
	}
	
	#info h1 {
		font-size:30px;
	}
	
	#imprint {
		font-size:22px;
	}
	
	#left {
		border: 3px solid #ffffff;
		border-right: 0px solid #ffffff;
	}
	
	#right {
		width: 32px;
		height: 324px;
		margin-left:2px;
		background-image: url(../images/info-options-bg-324.png);
	}
	
	#video {
		width:768px;
		height:324px;
		border-bottom: 5px solid #ffffff;
	}
	
	.marginContainer {
		margin:30px;
	}
	
	#languageSelectorBox {
		top: 10px;
		left: 700px;
		width: 100px;
	}
	
	#selectInfo {
		width:32px;
		height:33px;
	}

	#changeStats {
		width:32px;
		height:33px;
	}

	#linkToJH {
		width:32px;
		height:33px;
		top:257px;
	}

	#shareButton {
		width:32px;
		height:33px; 
		top:290px;
	}
	
	#facebookLoginButton, #startFilmButton {
		width:340px;
		height:40px;
	}
	
	.optionsLeft, .optionsRight {
		width: 190px;
	}
	
	.startFacebook {
		min-height:60px;
	}
	
	#imprintBox {
		bottom: 30px;
		left: 30px;
		font-size: 12px;
	}
	
	.startLeft, .startRight, .halfLeft, .halfRight {
		width:340px;
	}
	
	.startLeft, .halfLeft {
		padding-right:28px;
	}
	
	#share-facebook {
		margin-left:3px;
		background-image: url(../images/share-facebook-32.png);
		width:32px;
		height:33px;
		top:257px;
		right:-35px;
	}

	#share-twitter {
		margin-left:3px;
		background-image: url(../images/share-twitter-32.png);
		width:32px;
		height:33px;
		top:292px;
		right:-35px;
	}
	
	:root .css3-metro-dropdown select,
	:root .css3-metro-dropdown:after,
	:root .css3-metro-dropdown::after
	{
	    width:150px;
	}
	
	:root .css3-metro-dropdown select
	{
	   height: 26px;
	}
}

/* Small Resolution */
@media (max-width:949px) {
	html, body {
		font-size: 0.8em;
	}
	
	#main {
		height: 270px;
		width: 802px;
	}
	
	#start, #middle, #info, #imprint {
		width:640px;
		height:270px;
	}
	
	#info {
		font-size:22px;
	}
	
	#info h1 {
		font-size:30px;
	}
	
	#imprint {
		font-size:22px;
	}
	
	#left {
		border: 2px solid #ffffff;
		border-right: 0px solid #ffffff;
	}
	
	#right {
		width: 27px;
		height: 270px;
		margin-left:2px;
		background-image: url(../images/info-options-bg-270.png);
	}
	
	#video {
		width:640px;
		height:270px;
		border-bottom: 5px solid #ffffff;
	}
	
	.marginContainer {
		margin:20px;
	}
	
	#languageSelectorBox {
		top: 3px;
		left: 590px;
		width: 100px;
	}
	
	#selectInfo {
		width:27px;
		height:27px;
	}

	#changeStats {
		width:27px;
		height:27px;
	}

	#linkToJH {
		width:27px;
		height:27px;
		top:214px;
	}

	#shareButton {
		width:27px;
		height:27px; 
		top:241px;
	}
	
	#facebookLoginButton, #startFilmButton {
		width:290px;
		height:34px;
	}
	
	.optionsLeft, .optionsRight {
		width: 190px;
	}
	
	.startFacebook {
		min-height:40px;
	}
	
	#imprintBox {
		bottom: 20px;
		left: 20px;
		font-size: 12px;
	}
	
	.startLeft, .startRight, .halfLeft, .halfRight {
		width:290px;
	}
	
	.startLeft, .halfLeft {
		padding-right:20px;
	}
	
	#share-facebook {
		margin-left:3px;
		background-image: url(../images/share-facebook-27.png);
		width:27px;
		height:27px;
		top:214px;
		right:-29px;
	}

	#share-twitter {
		margin-left:3px;
		background-image: url(../images/share-twitter-27.png);
		width:27px;
		height:27px;
		top:243px;
		right:-29px;
	}
	
	:root .css3-metro-dropdown select,
	:root .css3-metro-dropdown:after,
	:root .css3-metro-dropdown::after
	{
	    width:150px;
	}
	
	:root .css3-metro-dropdown select
	{
	   height: 22px;
	}
}