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

*{
	font-family: 'Open Sans', sans-serif;
	margin:0px;
	padding:0px;
}

.delay{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.nontrans{
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

html{
  height: 100%;
}

body{
  min-height: 100%;
  background-color:#DDD;
}

a{
	text-decoration:none;
}

p{
	margin-top: 6px;
	margin-bottom: 6px;
}

h2, h3{
	margin-top: 24px;
	margin-bottom: 12px;
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 {float: left;}
.col-12 {width: 100%;}
.col-11 {width: 91.66666667%;}
.col-10 {width: 83.33333333%;}
.col-9 {width: 75%;}
.col-8 {width: 66.66666667%;}
.col-7 {width: 58.33333333%;}
.col-6 {width: 50%;}
.col-5 {width: 41.66666667%;}
.col-4 {width: 33.33333333%;}
.col-3 {width: 25%;}
.col-2 {width: 16.66666667%;}
.col-1 {width: 8.33333333%;}

.wrapper{
	float: left;
	height: 100%;
	width:100%;
}

#main{
	width:100%;
	z-index:1;
	float:left;
}

#contend{
	width:60%;
	margin: 0px 20%;
	background-color: #EEE;
	float: left;
}

footer{
	float: left;
	clear: both;
	bottom: 0px;
	height: 20px;
	width: 60%;
	font-size:12px;
	color:#333;
	padding:25px 20%;
	text-align:center;
}

footer a{
	color:#333;
}

footer a:hover{
	color:#BB0510;
}

#blur{
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
	filter: blur(20px);
	z-index:1;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}

#menu{
	position:fixed;
	top:0px;
	width:60%;
	overflow:hidden;
	z-index:10;
	background-color: rgba(255,255,255,0.4);
	padding:0px 20%;
	color:#333;
}

#menuBlur{
	position:fixed;
	top:0px;
	width:100%;
	overflow:hidden;
	z-index:6;
	height:95px;
	background: #FFF;
}

#menuContend{
	z-index:10;
}

.menubutton{
	color:#333;
	text-decoration:none;
	padding:45px 20px 25px;
	font-size:18px;
	float:left;
}

.menubutton:hover{
	background-color: rgba(255,255,255,0.9);
	cursor:pointer;
	color:#D44;
}

#funk_design_logo{
	float:left;
	padding-top:25px;
}

#menuicon{
	display:none;
}

#menuclose{
	display:none;
}

.posted{
	width:calc(33.33% - 25px);
	margin:12.5px;
	float:left;
	overflow:hidden;
}

.posted:hover .postedheader{
	margin-top:0px !important;
}

.postedbild{
	position:relative;
	background-position:center;
	overflow:hidden;
	background-size:cover;
	float:left;
	width:100%;
	height:100%;
}

.postedheader{
	position:relative;
	margin-top:-70px;
	width:calc(100% - 20px);
	background-color:rgb(70,70,70);
	letter-spacing: -0.4px;
	color:#FFF;
	font-size:18px;
	padding:9px 10px;
	float:left;
	text-shadow:1px 1px #323232, 2px 2px #323232, 3px 3px #323232, 4px 4px #323232, 5px 5px #323232, 6px 6px #323232, 7px 7px #323232, 8px 8px #323232, 9px 9px #323232, 10px 10px #323232, 11px 11px #323232, 12px 12px #323232, 13px 13px #323232, 14px 14px #323232, 15px 15px #323232, 16px 16px #323232, 17px 17px #323232, 18px 18px #323232, 19px 19px #323232, 20px 20px #323232, 21px 21px #323232, 22px 22px #323232, 23px 23px #323232, 24px 24px #323232, 25px 25px #323232, 26px 26px #323232, 27px 27px #323232, 28px 28px #323232, 29px 29px #323232, 30px 30px #323232, 31px 31px #323232, 32px 32px #323232, 33px 33px #323232, 34px 34px #323232, 35px 35px #323232, 36px 36px #323232, 37px 37px #323232, 38px 38px #323232, 39px 39px #323232, 40px 40px #323232, 41px 41px #323232, 42px 42px #323232, 43px 43px #323232, 44px 44px #323232, 45px 45px #323232, 46px 46px #323232, 47px 47px #323232, 48px 48px #323232, 49px 49px #323232;
}

.post-bild{
	width:100%;
	height:400px;
	overflow:hidden;
	position: relative;
}

.post-bild-img{
	min-width:120%;
	min-height:800px;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
	z-index:1;
}

.post-header{
	position:relative;
	top:0px;
	left:0px;
	width:60%;
	height:100%;
	padding:0 20%;
	color:#FFF;
	z-index:5;
}

.post-header-text{
	position:absolute;
	bottom:0px;
	width:60%;
	padding:100% 25px 25px;
	background-color:rgba(0,0,0,0.3);
	margin-left:-25px;
}

.post-contend{
	width: 60%;
	color: #444;
	margin: 0px calc(20% - 25px);
	padding: 25px;
	background-color:#FFF;
	float:left;
	position:relative;
	z-index: 5;
}

.post-contend a{
	color:rgb(0,0,0);
	text-decoration:underline;
}

.post-contend a:hover{
	color:#E34444;
}

.post-contend ul{
	margin:10px 25px;
}

.post-bilder{
	width: calc(60% + 72px);
	float:left;
	clear:both;
	text-align:center;
	margin: 12.5px calc(20% - 36px);
	z-index: 5;
}

.posted-bild{
	width:calc(33.33% - 27px);
	text-align:center;
	float:left;
	height:350px;
	overflow:hidden;
	margin:12.5px;
	border:1px solid #DDD;
	position:relative;
	z-index: 5;
}

.posted-bild-img{
	position:absolute;
	height:150%;
	width:300%;
	top:-25%;
	left:-100%;
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}

.posted-bild-img:hover{
	width:100%;
	height:100%;
	top:0%;
	left:0%;
	margin:0 0;
}

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

.download_button{
	text-decoration:none;
	text-align:center;
	font-weight:bold;
	width:400px;
	margin-left:calc(50% - 202px);
	position:relative;
	overflow:hidden;
	height:48px;
	border:2px solid #F00;
}

.download_button:hover{
	border:2px solid #F00;
}

.download_button_background{
	padding:10px 0px;
	font-size:18px;
	position:absolute;
	overflow:hidden;
	height:38px;
	width:400px;
}

.download_button .black{
	background-color:none;
	color:#F00;
	width:400px;
	top:0px;
	z-index:3;
}

.download_button:hover .black{
	top:-25px;
}

.download_button .red{
	background-color:#F00;
	color:#FFF;
	width:400px;
	left:0px;
	top:58px;
	z-index:5;
}

.download_button:hover .red{
	top:0px;
}

.blog{
	background-image:url(../img/blog-hintergrund.jpg);
	background-size:cover;
	background-position:left;
	padding:3px;
	width:100%;
	margin:12.5px 0px;
	float:left;
	clear:both;
}

.blog_header{
	color:#fff;
}

.blog_header h4{
	font-size:16px;
}

.blod_title{
	width:calc(70% - 25px);
	padding:10px 12.5px;
	float:left;
}

.blog_time{
	width:calc(30% - 25px);
	padding: 10px 12.5px;
	float: left;
	font-size: 12px;
	text-align: right;
	line-height: 20px;
}

.blog_contend{
	float:left;
	width:calc(100% - 25px);
	padding:25px 12.5px;
	background-color:#FFF;
	color:#333;
	margin-bottom:3px;
}

.blog_tags{
	float:left;
	width:calc(100% - 25px);
	padding:3px 12.5px;
	color:#FFF;
	font-size:9px;
}

.postvote{
	position: fixed;
	top: 30%;
	width: 100%;
	font-size: 36px;
	z-index: 0;
}

.postupvote{
	width: auto;
	padding: 15px;
	position: fixed;
	right: calc(15% - 50px);
	text-align: center;
	cursor: pointer;
	margin-right: 0px;
}

.postupvote:hover .votetip{
	opacity: 1;
}

@-ms-keyframes wiggle{0%{-ms-transform:rotate(3deg);}50%{-ms-transform:rotate(-3deg);}100%{-ms-transform:rotate(3deg);}}
@-moz-keyframes wiggle{0%{-moz-transform:rotate(3deg);}50%{-moz-transform:rotate(-3deg);}100%{-moz-transform:rotate(3deg);}}
@-webkit-keyframes wiggle{0%{-webkit-transform:rotate(3deg);}50%{-webkit-transform:rotate(-3deg);}100%{-webkit-transform:rotate(3deg);}}
@keyframes wiggle{0%{transform:rotate(3deg);}50%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}
.postupvote:hover{-ms-animation:wiggle .3s 2;-moz-animation:wiggle .3s 2;-webkit-animation:wiggle .3s 2;animation:wiggle .3s 2;}

.postupvote .votetip{
	margin-right: 20px;
}

.postdownvote{
	width: calc(20% - 55px);
	padding: 15px;
	position: relative;
	float: left;
	text-align: right;
	cursor: pointer;
	margin-left: calc(20% - 100px);
}

.postdownvote:hover{
	margin-left: 0px;
}

.postdownvote:hover .votetip{
	opacity: 1;
}

.postdownvote .votetip{
	margin-left: 20px;
}

.votetip{
	font-size: 12px;
	color: #FFF;
	padding: 5px;
	background-color: rgba(50,50,50,0.8);
	border: 1px solid #000;
	position: relative;
	float: left;
	width: calc(100% - 68px);
	opacity: 0;
}

.voteicon{
	float: left;
	width: 36px;
	padding: 4px 0px;
	color: #666;
	text-align: center;
}

.voted{
	font-size: 18px;
}