@charset "utf-8";
/* Webdesign by Benjamin Hemer
 * post@benjaminhemer.com
 */

#slideshow {
	display:table-cell;
	height:100%;
	width:100%;
    position:absolute; 
	overflow:hidden;
	background:black;
}

#slideshow img { 
	position:absolute;
	min-height:100%;
	min-width:100%;
}

#pattern {
    position:absolute; 
    width:100%; 
    height:100%;
	background-image: url(../images/slider/muster.png);
	background-repeat:repeat;
}
 
#willkommen #caption {
	margin:0;
	padding:1.80722891566265%;
	background:none;
}

#willkommen #caption h1,
#willkommen #caption h2,
#willkommen #caption p {
	position:relative;
	z-index:10;
}

#willkommen #caption div {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:0;
	background:#fff;
	background:
		linear-gradient(135deg, transparent 8px, #fff 0) top left,
		linear-gradient(225deg, transparent 8px, #fff 0) top right,
		linear-gradient(315deg, transparent 8px, #fff 0) bottom right,
		linear-gradient(45deg,  transparent 8px, #fff 0) bottom left;
	background-size: 51% 51%;
	background-repeat: no-repeat;
	opacity:0.75;
}

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

#willkommen #caption {
	margin:1.80722891566265%;
	padding:1.80722891566265%;
	background:none;
}
}

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

#slideshow {
	position:relative;
	display:block;
	height:300px;
	margin-top:3em;
	
}

#pattern {
	position:absolute;
	top:3em;
	height:300px;
}

#willkommen .chart-out {
}

#willkommen .chart-in {
	position:relative;
	height:auto;
	
}

#willkommen .chart-center {
	padding-top:20px;
}

#willkommen #caption {
	display:block;
	width:auto;
	padding:0;
	margin:1.80722891566265%;
}

#willkommen #caption div {
	background:none;
}
	
}

#portfolio .box-third {
	padding-bottom:8px;
	background:#ffd580;
	background:
		linear-gradient(135deg, transparent 6px, #ffd580 0) top left,
		linear-gradient(225deg, transparent 6px, #ffd580 0) top right,
		linear-gradient(315deg, transparent 6px, #ffd580 0) bottom right,
		linear-gradient(45deg,  transparent 6px, #ffd580 0) bottom left;
	background-size: 51% 51%;
	background-repeat: no-repeat;
}

#portfolio .box-third h3 {
	padding:16px 16px 8px 16px;
}

#portfolio .box-third ul {
	padding-left:16px;
	padding-right:16px;
}

#portfolio .img {
	margin-bottom:16px;
	position:relative;
	width:72%;
	margin-left:auto;
	margin-right:auto;
}

#portfolio #print-medien .img {
}

#portfolio #bildwelten .img,
#portfolio #bewegtbild .img {
	overflow:hidden;
}

#portfolio #bewegtbild .img {
	background:#000;
}

#portfolio .img:before {
	content:"";
	display:block;
	padding-top:66%;
}

#portfolio .img img {
	position:absolute;
    left:-100%;
    right:-100%;
    top:-100%;
    bottom:-100%;
    margin:auto; 
    width:100%;
}

#portfolio #corporate-design .img img {
	width:106%;
}

#portfolio #webdesign .img img {
	width:106%;
}

#portfolio #online-marketing .img img {
	width:88%;
}

#portfolio #print-medien .img img {
	padding-top:5%;
}

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

#portfolio .box-third {
	width:46.3855421686747%;
}

#clr {
	clear:none;
}

#online-marketing,
#bildwelten {
	clear:both;
}

}

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

#portfolio .box-third {
	width:96.3855421686747%;
	margin-bottom:2em;
	clear:both;
}

#clr {
	display:none;
}


}


#totale {
	width:75%;
}

#passfoto {
	width:33%;
	position:absolute;
	right:0;
	top:30%;
}

/* Dialog */

#twitter-timeline p {
	text-indent:0;
}

#twitter-timeline div a:hover {
	color:#000;
	border-bottom:1px solid #ba114c;
	/* background:#F7A600; */
}

#twitter-timeline iframe {
	width:100% !important;
}

#facebook-timeline {
	background:#fff;
}

#fb-root {
	display: none;
}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
	width:100% !important;
}
.fb_border {
	width:100%;
	padding:0px;
	background:none;
	overflow: hidden;
}

/* AKTUELLES */

#flex4energy1 {
	width:76%;
	margin-right:12%;
	margin-left:12%;
}

@media only screen and (min-width: 700px) and (max-width: 1020px) {

#flex4energy1 {
	width:100%;
	margin-right:0;
	margin-left:0;
}
	
}

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

#flex4energy1 {
	width:100%;
	margin-right:0;
	margin-left:0;
}
	
}



#amazonas1,
#amazonas2 {
	position:relative;
}

#amazonas1 {
	position:relative;
	width:80%;
	z-index:10;
}

#amazonas2 {
	width:80%;
	margin:-13% 0 0 20%;
}

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

#amazonas1,
#amazonas2 {
	width:100%;
	margin:0 0 20px 0;
}
	
}


@media only screen and (max-width: 900px) {
#stroke-head {
	float:none;
}
}

@media only screen and (min-width: 600px) {
#stroke-web {
	float:right;
}
}

@media only screen and (max-width: 700px) {
#stroke-web {
	width:60%;
	float:none;
	margin:3.75% auto;
}
}

@media only screen and (max-width: 400px) {
#stroke-web {
	width:100%;
	float:none;
	margin:3.75% auto;
}
}

@media only screen and (min-width: 700px) {
#stroke-print {
	margin-top:-1.80722891566265%;
}
}

@media only screen and (min-width: 700px) {
#stroke-web {
	
}
}

#scte-responsiv img {
	display:block;
	margin:-2% auto 0 auto;
	width:75%;
}

@media only screen and (max-width: 900px) {
#scte-responsiv img {
	margin:0 auto 0 auto;
	width:100%;
}
}

@media only screen and (min-width: 900px) {
#hgos2 {
	width:29.71887550200803%;
	width:36%;
}
}


@media only screen and (min-width: 500px) and (max-width: 700px) {

#hgos2,
#RS {
	width:63.05220883534137%;
}

}