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

input:focus {
  outline: none;
}

body {
	padding: 0;
	margin: 0;
	background-color: #eeeeee;
}

.center {
	height: 0;
	width: 980px;
	margin: 0 auto;
	position: relative;
}

header, section, footer {
	width: 100%;
	float: left;
}

.top_bar {
	width: 100%;
	height: 21px;
	background-image: url('../images/bg_top_bar.png');
	background-position: top;
	background-repeat: repeat-x;
}

.header_image {
	width: 100%;
	height: 520px;
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
}

.header_flag{
	float: right;
	position: relative;
	background-repeat: no-repeat;
	width: 147px;
	z-index: 25;
	height: 147px;
	top: -7px;
	left: -955px;
	background-image: url('../pictures/header_flag_video.png');
}

.header_content {
	float: left;
	width: 100%;
	height: 520px;
	position: relative;
}

.picture_iphone {
	float: left;
	position: relative;
	left: 0;
	bottom: -20px;
	z-index: 1;
}

.infobox {
	float: left;
	width: 480px;
	height: 200px;
	position: absolute;
	right: 0;
	bottom: 40px;
	background: url('../images/bg_info.png') transparent left top no-repeat;
}


/* content */

section {
	background-image: url('../images/bg_table.png');
	background-position: center bottom;
	background-repeat: repeat-x;
	background-color: #f6f7fa;
	position: relative;
	z-index: 10;
	border-top: 1px solid #CCCCCC;
}

.table {
	float: left;
	width: 100%;
	background-image: url('../images/bg_row_vertical.png');
	background-position: center top;
	background-repeat: repeat-y;
	position: relative;
	z-index: 10;
}

.row {
	float: left;
	width: 100%;
	background-image: url('../images/bg_col_bottom.png');
	background-position: left bottom;
	background-repeat: repeat-x;
}

.row:last-child {
	background-image: none;
}

.col {
	float: left;
	width: 44%;
	padding: 20px 3%;
}

.col .teaser {
	/*float: left;*/
	height: 100px;
	background-position: left center;
	background-repeat: no-repeat;
}

a.logo {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
}

h1 {
	float: left;
	color: #8d2d33;
	font-size: 50px;
	margin: 20px 20px 10px 22px;
    padding: 0;
    width: 350px;
}

h2 {
	float: left;
	color: #727272;
	font-size: 24px;
	padding: 0;
	margin: 10px 0 10px 30%;
	width: 70%;
}

.infobox h2 {
	font-size: 20px;
	margin: 0 20px 0 25px;
	width: 430px;
}

.buttons {
	float: left;
	width: 100%;
}

.buttons a {
	background-position: left top;
	background-repeat: no-repeat;
	float: left;
	width: 212px;
	height: 64px;
	position: absolute;
}

.buttons .apple {
	background-image: url('../images/button_apple.png');
	bottom: 15px;
	left: 20px;
}

.buttons .google {
	background-image: url('../images/button_google.png');
	bottom: 15px;
	right: 20px;
}

h3 {
	float: left;
	color: #727272;
	font-size: 24px;
	padding: 0;
	margin: 10px 0 10px 30%;
	width: 70%;
}

p {
	float: left;
	color: #727272;
	font-size: 15px;
	line-height: 23px;
	padding: 0;
	margin: 0 0 15px 30%;
	width: 70%;
}

.margin-top {
	margin-top: 30px;
}

.text-center {
	text-align: center;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}


/* footer */

footer {
	background-image: url('../images/bg_footer.png');
	background-position: left top;
	background-repeat: repeat-x;
	position: relative;
	top: -15px;
	z-index: 5;
}

.links {
	float: left;
	width: 100%;
}

.link_wrapper {
	float: left;
	width: 20%;
	background-image: url('../images/bg_footer_right.png');
	background-position: right 24px;
	background-repeat: no-repeat;
}

.link_wrapper:last-child {
	background-image: none;
}

.link_wrapper .center {
	width: 70%;
}

.link {
	float: left;
	width: 100%;
	background-position: left 29px;
	background-repeat: no-repeat;
}

.link div{
	padding: 40px 0 25px 0;
	float: left;
	margin-left: 50px;
	color: #727272;
	font-size: 16px;
}

.link div img {
	margin-top: 2px;
}

.link.feedback {
	background-image: url('../images/icon_feedback.png');
}

.link.facebook {
	background-image: url('../images/icon_facebook.png');
}

.link.twitter {
	background-image: url('../images/icon_twitter.png');
}

.link.impressum {
	background-image: url('../images/icon_impressum.png');
}

.link.cybob {
	background-image: url('../images/icon_cybob.png');
}

/* apps */

.apps {
	float: left;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 15px;
}

.app_wrapper {
	float: left;
	width: 20%;
}

.app_wrapper:last-child {
	background-image: none;
}

.app_wrapper .center {
	width: 70%;
}

.app {
	float: left;
	width: 100%;
	background-position: left 29px;
	background-repeat: no-repeat;
	height: 120px;
	position: relative;
}

.app img {
	padding: 0;
	float: left;
	margin-left: -40px;
	position: absolute;
	left: 50%;
}

.app span {
	padding: 0;
	float: left;
	position: absolute;
	top: 90px;
	left: 0;
	width: 100%;
	color: #727272;
	font-size: 14px;
	text-align: center;
}

video {
	left: 30px;
    position: absolute;
    top: 110px;
}


/* < 1222 */

@media (max-width: 1222px) {
	
	.header_flag {
		left: -95.2%;
	}
	
	.center {
		width: 81%;
	}
	
	.infobox{
		left: 50%;		
	}
}


/* < 980 */

@media (max-width: 979px) {
	
	.center {
		width: 100%;
	}
	
	.header_flag {
		left: -86%;
	}
	
}

@media (max-width: 839px) {
	
	header {
		/*margin-bottom: 200px;*/
	}
	
	/*.picture_iphone {
		left: 50%;
		margin-left: -182px;
	}*/
	
	.table {
		background: none;
	}
	
	.infobox {
		position: relative;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		background-image: url('../images/bg_info_repeat.png');
		background-repeat: repeat-x;
	}
	
	.infobox h1 {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}
	
	.infobox h2 {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}
	
	.buttons a {
		float: left;
		top: 0;
		left: auto;
		right: auto;
	}
	
	.buttons {
		margin-top: 15px;
		position: relative;
	}
	
	.buttons .apple {
		right: 50%;
		left: auto;
		margin-right: 10px;
	}
	
	.buttons .google {
		left: 50%;
		right: auto;
		margin-left: 10px;
	}
	
	.row {
		background: none;
	}
	
	.col {
		width: 94%;
		background-image: url('../images/bg_col_bottom.png');
		background-position: left bottom;
		background-repeat: repeat-x;
	}
	
	footer {
		top: 0;
	}
	
	.link_wrapper {
		width: 100%;
		border-bottom: 1px solid #f0f0f0;
		background-color: #e1e1e2;
		background-image: none;
	}
	
	.link_wrapper .center {
		margin: 0;
		margin-left: 5%;
		width: 95%;
	}
	
	.header_flag {
		left: -78.2%;
	}
	
}

@media (max-width: 420px) {
	
	h1 {
		font-size: 40px;
	}
	
	.infobox {
		height: 320px;
		background-image: url('../images/bg_col_bottom.png');
		background-position: left bottom;
		background-repeat: repeat-x;
	}
	
	.buttons .apple {
		right: 50%;
		left: auto;
		margin-right: -106px;
	}
	
	.buttons .google {
		left: 50%;
		right: auto;
		margin-left: -106px;
		top: 75px;
	}
	
	.picture_iphone {
		display: none;
	}
	
	.header_image {
		height: 250px;
	}
	
	.header_content {
		height: 250px;
	}
	
	.app_wrapper {
		width: 100%;
	}
	
	.app {
		margin-bottom: 20px;
	}

	a.logo {
		left: 47.5%;
	z-index: 20;
	}
	
	.header_flag {
		left: -59.2%;
	}
	
}


/* iphone animation */

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../images/bg_overlay.png');
	z-index: 20;
	display: none;
}

.picture_iphone {
	z-index: 0;
	transition: left ease 1s, margin-left ease 1s, z-index 2s;
	-webkit-transition: left ease 1s, margin-left ease 1s, z-index 2s;
	cursor:pointer;
}

.picture_iphone.show {
	animation:movev 2s;
	-webkit-animation:movev 2s;
	left: 50%;
	z-index: 30;
	margin-left:-176px;
	cursor:pointer;
}

.picture_iphone.hide {
	animation:movevb 2s;
	-webkit-animation:movevb 2s;
	left: 0;
	z-index: 0;
	margin-left: 0;
	cursor:pointer;
}

@keyframes movev
{
	0%		{bottom:-20px;}
	30%		{bottom:250px;}
	100%	{bottom:-20px;}
}

@keyframes movevb
{
	0%		{bottom:-20px;}
	30%		{bottom:250px;}
	100%	{bottom:-20px;}
}

@-webkit-keyframes movev
{
	0%		{bottom:-20px;}
	30%		{bottom:250px;}
	100%	{bottom:-20px;}
}

@-webkit-keyframes movevb
{
	0%		{bottom:-20px;}
	30%		{bottom:250px;}
	100%	{bottom:-20px;}
}