/* Basic links & types
 * * * * * * * * * * * */
body {
	font-family: "proxima-nova";
	font-size: 100%;
	background: #fff;
	color: #555556;
	font-weight: 300;
}
html, body{height: 100%;}



a {color:#AFCA01; text-decoration: none;}
a:hover {color:#777777; text-decoration: underline;}

#kontakt a {color:#fff; text-decoration: none;}
#kontakt a:hover {color:#fff;text-decoration: underline;}

.leistungen-list a {color:#9e9e9e; text-decoration: none;}
.leistungen-list a:hover {color:#9e9e9e;text-decoration: underline;}

h1, h2, h3, h4{color:#fff; }
h1, h2, h3, h4, h5, h6 {font-family: "proxima-nova"; font-weight: 800; line-height: 1em;}

h1 {
   font-size: 5em;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 3em;
	line-height: 1em;
}

h3 {
	font-size: 2em;
	color: #fff;
}
h4 {font-size: 1.5em;margin:0;}
h5 {font-size: 1em;margin: 0;}
h6 {font-size: 0.9em;margin:0;}

hr {color: #CCC; background-color: #999; height: 1px;}


/* Layout
 * * * * * * * * * */
.mainbody {
	width: calc(100% - 2 * 70px);
	margin: 180px auto;
}

#header{
	position: relative;
	width: 100%;
	height: 90%;
	margin: 0 auto;
}

#telefon{
	position: absolute;
	right: 45px;
	top: 50px;
	text-align: right;
	font-size: 1.15em;
	width: 220px;
	height: 50px;
	z-index: 5;
}

#telefon a {color:#fff; text-decoration: none;}
#telefon a:hover {color:#fff;text-decoration: underline;}

#topwrapper{
	height: 80px;
}

.top {
	position: relative;
	background: #fff;
	z-index: 500;
	height: 80px;
	display: block;
}

.site-logo{
	position: absolute;
	left: 70px;
	top: 30px;
	width: 182px;
	height: 43px;
}

.site-logo img{
	max-width: 80%;
}




#projekte {
	background-color: #ffffff;
	width: 100%;
	height: auto;
	margin: 0 0 10px 0;
}

#leistungen {
	background-color: #afca00;
	width: 100%;
	margin: 0 auto;
	height: auto;
	text-align: center;
}

#zitate {
	background-color: #fff;
	width: 100%;
	height: 630px;
	background: url(../img/zitate_hintergrund.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#philosophie {
	background-color: #afca00;
	width: 100%;
	height: auto;
	overflow: hidden;
}


#kunden {
	background-color: #fff;
	width: 96%;
	margin: 0 2% 100px 2%;
}

#kontakt {
	background-color: #afca00;
	width: 100%;
	overflow: hidden;
	height: auto;
}

#social {
	background-color: #fff;
	width: 100%;
	height: auto;
	overflow: hidden;
}

#footermenu {
	position: relative;
	width: 250px;
	margin: 100px auto;
}

/* menu */
ul.menu,
ul.menu ul{
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

#mainmenu ul.menu a{
	display: block;
	position: relative;
	padding: 6px 12px;
	font-size: 15px;
	text-decoration: none;
}
#mainmenu ul.menu>li>a>.bg{
	display: block;
	width: 100%;
	height: 0px;
	background: #AFCA01;
	margin-top: 6px;

	transition: height 0.3s;
}
#mainmenu ul.menu>li:hover>a>.bg{
	height: 6px;
}


#mainmenu{z-index: 10;}
#mainmenu ul.menu{
	float: right;
	margin-right: 20px;
}
#mainmenu ul.menu>li{
	position: relative;
	float: left;
}
#mainmenu ul.menu>li>a{
	padding: 20px 12px;
}

/* resp menu */
#mainmenu>.resp {overflow: auto;}
#mainmenu>.resp label,
#mainmenu>.resp input{display: none;}

#mainmenu>.resp label{
	position: relative;
	width: 36px;
	height: 28px;
	margin: 30px 25px 25px;
	cursor: pointer;
	background: url(../img/nav-icon-small.png) no-repeat center;
	float: right;
	z-index: 130;
}
#mainmenu>.resp label:before{
	position: absolute;
	display: block;
	content: 'Menü';
	right: 120%;
	color: #AFCA01;
	font-size: 1.4em;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.4;
}
#mainmenu>.resp label.checked{
	background-image: url(../img/nav-icon-big.png);
	float: none;
	width: 78px;
	height: 60px;
	position: fixed;
	top: 0;
}

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

/* menu */
	#mainmenu{
		border:none;
		float: none;
	}
	#mainmenu>.resp>label{
		display: block;

	}
	#mainmenu ul.menu{
		position: fixed;
		box-sizing: border-box;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 40px 0 0;
		margin: 0;
		background: #AFCA01;
		max-height: 0;
		opacity: 0;
		overflow: auto;
		float: none;
		clear: both;
		z-index: 100;

		-webkit-transition: opacity 0.3s, padding-top 0.6s;
          		transition: opacity 0.3s, padding-top 0.6s;
	}
	#mainmenu ul.menu>li{
		float: none;
		border-left: none;
		text-align: center;
		width: 100%;
	}
	#mainmenu ul.menu>li>a{
		color: #fff;
		font-size: 2.6em;
		padding: 20px 0;
		text-transform: uppercase;
	}
	#mainmenu ul.menu>li>a>.bg{display: none;}

	#mainmenu .resp input:checked + ul.menu{
		max-height: 1000px;
		opacity: 0.98;
		padding-top: 60px;
	}

}
@media only screen and (max-width: 400px) {
	#mainmenu>.resp label.checked{
		width: 49px;
		height:38px;
		background-size: cover;
	}
	#mainmenu ul.menu>li>a{
		font-size: 1.6em;
		padding: 10px 0;
	}
	#mainmenu .resp input:checked + ul.menu{
		padding-top: 26%;
	}
}


.moduletable{
	color:#fff;
	font-family: "proxima-nova";
	font-weight: 300;
	font-size: 1.08em;
	width: 100%;
	margin: 0 auto;
}

.moduletable.greenbg{
	background: #AFCA01;
}

#leistungen .moduletable, #philosophie .moduletable, #kontakt .moduletable{
	padding: 0 0 50px 0;
}

.moduletable h3{
	color:#fff;
	font-family: "proxima-nova";
	font-weight: 800;
	font-size: 2.7em;
	text-align: center;
	border-bottom: 2px solid #fff;
	padding-top: 75px;
	width: 95%;
	margin: 0 auto;
}

.mainbody .moduletable h3,
.moduletable.whitebg h3.title{
	color:#AFCA01;
	font-family: "proxima-nova";
	font-weight: 800;
	font-size: 2.7em;
	text-align: center;
	border-bottom: 2px solid #AFCA01;
	padding-top: 75px;
	width: 95%;
	margin: 0 auto;
}

.mainbody .moduletable .untertitel,
.moduletable.whitebg .untertitel{
	color:#AFCA00;
	background-color: #fff;
}

#projekte .moduletable h3,
#kunden .moduletable h3,
#newsblock h3.title,
#social .moduletable h3,
#team .moduletable h3{
	border-bottom: 2px solid #AFCA01;
}

#leistungen .moduletable h3, #philosophie .moduletable h3, #kontakt .moduletable h3{
	border-bottom: 2px solid #fff;
}

#projekte .moduletable h3.title,
#kunden .moduletable h3.title,
#newsblock h3.title,
#team .moduletable h3.title,
#social .moduletable h3.title,
.content-modules h3{
	color:#AFCA01;
}

#leistungen .moduletable h3.title,
#newsblock .moduletable.greenbg h3.title,
#philosophie .moduletable h3.title,
#kontakt .moduletable h3.title {
	color:#ffffff;
}


.moduletable .untertitel{
	display: table;
	color:#fff;
	font-family: "proxima-nova";
	font-weight: 300;
	font-size: 1.08em;
	text-align: center;
	margin: -2px auto;
	padding: 0 25px 50px 25px;
	background-color: #AFCA00;
}


#social .moduletable .untertitel,
#team .moduletable .untertitel
{
	color:#AFCA00;
	background-color: #fff;
}

#leistungen-wrapper{
	max-width: 1024px;
	margin: 0 auto;
}

.leistung{
	width: 50%;
	padding: 0 35px 0 35px;
	min-height: 200px;
	text-align: left;
	float: left;
}

.leistungen_bild{
	float: left;
	margin: 0 20px 80px 0;
}

.leistungen_bild img{
	max-width: 50px;
}

.leistungen_hintergrundbild{
	position: absolute;
	margin: 15px 0 0 15px;
}

.leistungen_hintergrundbild img{
	max-width: 120px;
	opacity: 0.09;
}

.leistungen_headline{
	font-family: "proxima-nova";
	font-weight: 800;
	font-size: 1.7em;
}

.leistungen_subline{
	font-family: "proxima-nova";
	font-weight: 100;
	font-size: 1.1em;
	margin-bottom: 15px;
}

.leistungen_beschreibung{
	font-family: "proxima-nova";
	font-weight: 300;
	font-size: 0.88em;
	text-align: justify;
}

#philosophie_titel{
	color:#fff;
	font-family: "proxima-nova";
	font-weight: 800;
	font-size: 4.5em;
	line-height: 1em;
	text-align: left;
	padding-left: 5%;
	padding-right: 5%;
}

#philosophie_text{
	color:#fff;
	font-size: 1.2em;
	text-align: left;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 25px;
}

/* social icons */

.social-icons{
	position: relative;
	max-width: 834px;
	margin: 0 auto;
	text-align: center;
}
.social-icons .icon{
	position: relative;
	/*float: left;*/
	display: inline-block;
	height: 100px;
	width: 100px;
	overflow: hidden;
	vertical-align: top;
}
/*.social-icons .icon.fb{width: 386px; margin-right: 12px;}*/

.social-icons .icon.fb, .social-icons .icon.vimeo, .social-icons .icon.x, .social-icons .icon.cu {margin: 0 12px 12px 0;}


.social-icons .icon a.link{
	position: relative;
	display: block;
	height: 100px;
	width: 100px;
	background: url(../img/social-ico.png) no-repeat 0 0;
	text-decoration: none;
	z-index: 10;
}
.social-icons .icon.fb a.link{}
.social-icons .icon.vimeo a.link{background-position: -100px 0;}
.social-icons .icon.x a.link{background-position: -200px 0;}
.social-icons .icon.cu a.link{background-position: -300px 0;}
.social-icons .icon.inst a.link{background-position: -400px 0;}

.social-icons .icon span.txt{
	display: block;
	position: absolute;
	top:0;
	right:0;
	bottom: 0;
	width: 280px;
	padding: 16px 12px 12px 16px;
	color: #AFCA00;
	background: #f9f9f9;
	font-size: 23px;
}

/* login */
.login,
.login+div{
	width: 400px;
	margin: 0 auto;
}
.login{margin-top: 10%;}
.login .login-fields{
	padding: 6px 0;
}
.login .login-fields label{
	display: inline-block;
	width: 155px;
}
#user-registration fieldset,
.login fieldset,
.profile-edit fieldset{border: none;}

#user-registration button,
.login button{margin: 26px 0 0 0;}

/* login module */
#login-form{}
#login-form p{
	display: block;
	float: right;
	width: 100%;
	padding: 3px 0;
}

#form-login-username input,
#form-login-password input{
	display: block;
	float: right;
}
#form-login-username label,
#form-login-password label{
	display: block;
	float: left;
	margin: 8px 0;
	font-weight: bold;
	color: #335473;
}
#form-login-remember input,
#form-login-remember label{
	display: block;
	float: right;
}
#form-login-remember label{
	margin: 3px 0 0 3px;
}
#login-form .important{
	color: red;
	padding: 0 0 0 3px;
}

/* System Messages */
#system-message-container{
	position: relative;
}
#system-message{
	padding: 8px 0;
}
#system-message>dt{display:none;}
#system-message>dd,
#system-message ul{margin:0;padding: 0;list-style: none;}
#system-message>.message{
	padding: 3px 8px 6px 8px;
	border-top: 2px solid #d6e9c6;
	background-color: #dff0d8;
	color: #468847;
	box-shadow: 0 6px 8px #d6e9c6 inset;
}
#system-message>.message:hover{
	cursor: pointer;
}
#system-message h4{
	margin: 0;
	padding: 6px 0;
	color: #468847;
}
#system-message>.message>span{
	display: block;
	padding: 3px 0;
}

#system-message>.message.warning,
#system-message>.message.error{
	background-color: #f2dede;
	border-color: #eed3d7;
	color: #b94a48;
	box-shadow: 0 6px 8px #eed3d7 inset;
}
#system-message>.message.warning h4,
#system-message>.message.error h4{color: #b94a48;}

/*
#system-message-container {
	display: none;
}*/
/*  tooltip  */
.tip{
	font-size:0.9em;
    text-align:left;
    padding:3px 6px;
    max-width:400px;
	background:#e8e8e8;
}
.tip-title{font-weight:bold;}



/* Clear Floated Elements */
/* http://sonspring.com/journal/clearing-floats */
.clear {clear: both; display: block;	overflow: hidden;visibility: hidden;width: 0;height: 0;}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
.clearfix {	display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {	display: block;}

ul.actions{position: absolute;display: none;}

.center-element { height: 100%;}
.center-element:before {content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.center-element>.centered { display: inline-block; vertical-align: middle; width: 99%;}

/* General button style (reset) */
.btn {
	font-family: "proxima-nova";
	font-size: 1.8em;
	border: 3px solid #FFFFFF;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	padding: 8px 20px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	z-index: 50;
}

.btn:hover {
	color: #AFCA00;
	background: #fff;
	text-decoration: none;
}

.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.btn-green {
	font-family: "proxima-nova";
	font-size: 1.8em;
	border: 3px solid #AFCA00;
	font-weight: 800;
	color: #AFCA00;
	background-color: #fff;
	cursor: pointer;
	padding: 8px 20px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	z-index: 50;
}

.btn-green:hover, .btn-green a:hover {
	color: #fff;
	background: #AFCA00;
	text-decoration: none;
}


.btn-green:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}


fieldset {
     border: none;
     padding: 0;
     margin: 0;
}




/* RS Forms */
.formResponsive {
    padding: 0 2% 0 2%;
}
/* success message*/
.rsform .result-message,
.rsform .result-message + .formResponsive{text-align: center;}

.formResponsive .formHorizontal .formControlLabel{float: none;}
.formResponsive fieldset {
	  max-width: 1140px;
	  padding: 0 2% 0 2%;
	  margin: 0 auto;
}

.formResponsive textarea,
.formResponsive input[type="text"],
.formResponsive input[type="password"] {
    background-color: #FFFFFF;
    border: none;
    font-size: 1em;
	color: #868786;
	font-family: "proxima-nova";
	font-weight: 300;
	width: 100%;
	min-height: 70px;
	border-radius: 0;
	box-sizing: border-box;
}

.rsform-block-namen,
.rsform-block-email-adresse,
.rsform-block-name,
.rsform-block-email {
	width: 46%;
	margin-right: 4%;
	float: left;
}

.rsform-block-telefonnummer,
.rsform-block-budget,
.rsform-block-phone,
.rsform-block-salarywishes {
	width: 50%;
	float: left;
}

.rsform-block-birthday,
.rsform-block-residence,
.rsform-block-bestwebsite{
	width: 31%;
	float: left;
}
.rsform-block-residence{
	margin-right: 3.5%;
	margin-left: 3.5%;
}

.rsform-block-nachricht {
	width: 100%;
	position: relative;
	clear: both;
}

.formResponsive textarea {
	min-height: 205px;
}

.formResponsive select, .formResponsive input[type="text"], .formResponsive input[type="password"] {
    padding: 0 2% 0 2%;
}

.rsform-block-cvupload{
	position: relative;
	clear: both;
	background: #fff url(../img/icon-select.png) no-repeat 2% center;
}
.rsform-block-cvupload input[type="file"]{
	opacity: 0;
	width: 100%;
	padding: 15px 0;
}
.rsform-block-cvupload .label{
	position: absolute;
	top: 33%;
	left: 8%;
	color:  #afcb00;
}
.rsform-block-cvupload .formControlLabel{
	position: absolute;;
	right: 2%;
	bottom: 6px;
	top: auto;
	left: auto;
}

.rsform-block-tech{
	float: left;
	width: 52%;
}
.rsform-block-tech input[type="checkbox"]{display: none;}
.rsform-block-tech label{
	position: relative;
	float: left;
	width: 14%;
	box-sizing: border-box;
	margin-top: 2.6%;
	margin-right: 2%;
	background: #fff url(../img/icon-check-inactive.png) no-repeat center 23%;
	color: #868786;
	padding: 7.7% 1% 4% 1%;
	text-align: center;
	font-size: 0.7em;
	cursor: pointer;
}
.rsform-block-tech input[type="checkbox"]:checked+label{
	background-image: url(../img/icon-check-active.png);
}

.rsform-block-condate{
	float: left;
	width: 48%;
}

.rsform-block-nachricht,
.rsform-block-message{
	clear: both;
	position: relative;
}

.formResponsive input[type="button"], .formResponsive input[type="submit"], .formResponsive input[type="reset"] {
	font-family: "proxima-nova";
	font-size: 1.8em;
	border: 3px solid #FFFFFF;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	padding: 20px 20px;
	display: inline-block;
	margin: 15px 0px;
	text-transform: uppercase;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	z-index: 50;
	background-image: none;
	background-color: #AFCA00;
	background-repeat: no-repeat;
	border-radius: 0;
	text-shadow: none;
}



.formResponsive input[type="button"]:hover, .formResponsive input[type="submit"]:hover, .formResponsive input[type="reset"]:hover {
	color: #AFCA00;
	background: #fff;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
}

.formResponsive input[type="button"]:after, .formResponsive input[type="submit"]:after, .formResponsive input[type="reset"]:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.formControlLabel {
    color: #868786;
	font-size: 0.7em;
    position: relative;
    top: 65px;
	left: 2%;
    z-index: 2000;
}

.rsform-block-nachricht .formControlLabel,
.rsform-block-message .formControlLabel{
    top: 77%;
    position: absolute;
}

.kontaktwrapper{
	float: left;
	width: 40%;
	text-align: center;
	font-size: 1em;
	margin: 0 5% 100px 5%;
}

.kontaktmoeglichkeiten{
	float: left;
	width: 100%;
	text-align: center;
	font-size: 1em;
	margin: 0 2% 20px 2%;
	border-bottom: 1px dotted #fff;
}

.kontaktheader{
	float: none;
	width: 100%;
	text-align: center;
	font-size: 1.4em;
	margin: 0 0 20px 0;
}

.projektanfragen{
	font-size: 2.5em;
}

.formRed {
	display:none;
}


/* leistungen-list */
.leistungen-list{
	position: relative;
	margin: 0 auto;
	width: 95%;
}

.leistungen-list .category{
	margin: 0 auto 160px auto;
	padding: 0 0 15px 0;
	max-width: 1000px;
	border-bottom: 1px dotted #9e9e9e;
}

.leistungen-list .category .left{
	float: left;
	width: 280px;
	margin-top: -70px;
}

.leistungen-list .category .right{
	float: left;
	max-width: 720px;
}

.leistungen-list h2{
	color:#AFCA01;
	font-family: "proxima-nova";
	font-weight: 800;
	font-size: 2.7em;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 2px solid #AFCA01;
	padding-top: 75px;
    margin: 0 0 140px;
}

.leistungen-list .right h2{
	font-size: 2.7em;
	text-transform: uppercase;
	text-align: left;
	border-bottom: none;
	padding: 0;
    margin: 0 0 20px 0;
}

.leistungen-list .cat-items h3{
	font-family: "proxima-nova";
	font-weight: 300;
	text-transform: none;
	font-size: 1em;
	color: #9C9C9C;
	margin: 0 0 6px 0;
	line-height: 1.3em;
	white-space: nowrap;
}

.leistungen-list .cat-items{
	-webkit-column-count: 3;
	-webkit-column-gap: 30px;
	-moz-column-count: 3;
	-moz-column-gap: 30px;
	column-count: 3;
	column-gap: 30px;

}

.item-page .cck-leistungen h2{
	color:#AFCA01;
	font-family: "proxima-nova";
	font-weight: 800;
	font-size: 2.7em;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 2px solid #AFCA01;
    margin: 0 0 50px;
	}

.item-page .cck-leistungen{
	text-align: center;
}

ul.pagenav li.pagenav-prev a {
  background-image:url(http://zwetschke.de/ALT_BIS_2014/templates/zwetschkehappyohneend/img/letztes.png);
  background-position:50% 50%;
  background-repeat:no-repeat no-repeat;
}

ul.pagenav li a {
  -webkit-transition:background-color 0.4s ease 0s;
  background-color:#AFCA01;
  color:#FFFFFF;
  display:inline-block;
  font-size:20px;
  font-weight:900;
  left:50%;
  margin-left:-75px;
  padding:8px 0;
  position:relative;
  text-align:center;
  text-transform:uppercase;
  transition:background-color 0.4s ease 0s;
  width:150px;
}

.acymailing_module{
	color: #9e9e9e;
	height: 350px;
	text-align: center;
}

div.acymailing_module, .acymailing_module div {
    margin: 150px 10% 0 10% !important;
}

.acymailing_module input[type="text"] {
	height: 50px;
}

#unsubpage {
	width: 80%;
	margin: 50px auto;
	}

#otherreasons {
	margin: 40px 0 0 0;
	}

/* static heading */
.static-header-image{position: relative;overflow: hidden;}
.static-header-image>img{position: relative;min-width: 100%;display:block;}
.static-header-image>.header-text{
	position: absolute;
	font-size:5em;
	text-transform: none;
	top: 10%;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 3;
}
.static-header-image .small{font-size: 60%;}

/* jobs */
.moduletable.jobs-title{
	width: 86%;
	margin: 0 auto;
}
.item-page.jobs-page{
	width: 75%;
	margin: 10px auto 30px;
}

/* news */
.news-intro-list{
	position: relative;
	max-width: 1455px;
	margin: 0 auto;
    padding: 50px 0;
}
.news-intro-item{
	position: relative;
	float: left;
	width: 50%;
	color: #777777;
}
.news-intro-item>.side{
	float: left;
	width: 50%;
}
.news-intro-item:nth-child(4n)>.side,
.news-intro-item:nth-child(4n-1)>.side {
    float: right;
}
/*.news-intro-item::nth-child(4n-2), .news-intro-item::nth-child(4n-3) {}*/

.news-intro-item>.side1{position: relative; line-height: 0;}
.news-intro-item>.side1:after{
	position: absolute;
	display: block;
	content: '';
	border-right: 36px solid #fff;
	border-top: 36px solid transparent;
	border-bottom: 36px solid transparent;
	top: 50%;
	margin-top: -36px;
	right: 0;
}
.news-intro-item:nth-child(4n)>.side1:after,
.news-intro-item:nth-child(4n-1)>.side1:after {
    border-right: none;
    border-left: 36px solid #fff;
    left: 0;
}
.news-intro-item:hover>.side:after{border: none;}
.news-intro-item:hover>.side2{color: #fff;}
.news-intro-item:hover>.side2:before{
	content: '';
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #afca00;
	opacity: 0.8;
}
.news-intro-item>.side2:after,
.news-more-item>.side1:after{
	content: '';
	position: absolute;
	display: block;
	top: 0;
	right: 50%;
	bottom: 0;
	left: 0;
	background: url(../img/icon-plus-news.png) no-repeat center;
	opacity: 0;
	transform: scale(0.8);
	transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.325, 1.575);
}
.news-intro-item:nth-child(4n)>.side2:after,
.news-intro-item:nth-child(4n-1)>.side2:after{
	left: 50%;
	right: 0;
}
.news-intro-item:hover>.side2:after,
.news-more-item:hover>.side1:after{
	opacity: 1;
	transform: scale(1);
}

.news-intro-item h4{
	position: relative;
	font-size: 1.05em;
	font-weight: 300;
	margin: 18% 10% 16px;
	padding-bottom: 8px;
	color: inherit;
}
.news-intro-item h4:after{
	position: absolute;
	content: '';
	border: 1px solid;
	width: 66px;
	bottom: 0;
	left: 0;
}
.news-intro-item .date{margin-left: 10%;position: relative;}
.news-intro-item>.link-more,
.news-more-item>.link-more{
	display: block;
	position: absolute;
	top:0;
	right:0;
	bottom: 0;
	left:0;
	z-index: 10;
	text-decoration: none;
}
.news-intro-item img{width: 100%;}

.cck-article.news{
	position: relative;
}
.cck-article.news h2,
.cck-article.news h3{color: inherit;}

.cck-article.news .top-line{
	position: relative;
	max-width: 1800px;
	margin: 0 auto;
	color: #fff;
	text-shadow: 0 0 2px #9C9C9F;
}

.cck-article.news .cck_news_image{
	line-height: 0;
	background: #000;
	text-align: center;
	overflow: hidden;
}
.cck-article.news .top-line img{
	opacity: 0.8;
	margin: 0 -300% 0 -300%;
	max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
}

.cck-article.news .top-line .top-b{
	position: absolute;
	top: 40%;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
}
.cck-article.news .top-line h2{
	display: inline-block;
	font-size: 2em;
	padding: 0.2em 0.6em 0.1em;
	margin: 15px 0;
	background: #afca01;
}
.cck-article.news .cck_news_subtitle{font-size: 1.5em;}

.cck-article.news .mainbody {
	/*max-width: 1310px;*/
	max-width: 680px;
    margin: 100px auto 200px;
    line-height: 1.5;
}
.cck-article.news .mainbody:first-letter {
	float:left;
	font-size: 3em;
	font-weight:bold;
	line-height: 1;
	padding: 0 10px 0 0;
	color: #afca01;
}

.news-more-list{
	position: relative;
	text-align: center;
	padding: 40px 0 60px;
}
.news-more-item{
	position: relative;
	display: inline-block;
	width: 23%;
	margin: 0 3%;
	vertical-align: top;
}
#newsblock .moduletable.greenbg h3.title{
	padding-top: 38px;
	font-size: 1.7em;
}
.news-more-item>h4{
	position: relative;
	font-weight: normal;
	font-size: 1.1em;
	padding: 18px 0 10px;
	margin-bottom: 16px;
}
.news-more-item>h4:after{
	content: '';
	position: absolute;
	display: block;
	border: 2px solid;
	width: 66px;
	bottom: 0;
	left: 50%;
	margin-left: -33px;
}
.news-more-item img{max-width: 100%;}

.news-more-item>.side1{position: relative;}
.news-more-item>.side1:after{right: 0;}
.news-more-item:hover img{opacity: 0.3;}


/* media query */
@media (min-width: 768px) and (max-width: 979px) {
	#header_content {
		top: 400px;
	}

	#header_content h1 {
		font-size: 3em;
	}

	.leistungen_bild{
		width: 50%;
	}

	#telefon{
		display: none;
	}

	#philosophie_titel{
		font-size: 3em;
	}

	#philosophie_text{
		font-size: 1.1em;
	}

	#zitate {
		height: 450px;
	}



	/* leistungen-list */

	.leistungen-list .category .left{
		float: none;
		width: 100%;
		margin: 0 auto 0 auto;
		text-align: center;
	}

	.leistungen-list .category .right{
		float: none;
		width: 100%;
		margin: 0 auto 0 auto;
		text-align: center;
	}

	.leistungen-list .right h2{
		font-size: 2.7em;
		text-align: center;
	    margin: 0 0 40px 0;
	}


	.leistungen-list .cat-items{
		-webkit-column-count: 2;
		-webkit-column-gap: 30px;
		-moz-column-count: 2;
		-moz-column-gap: 30px;
		column-count: 2;
		column-gap: 30px;
	}


	#leistungen-wrapper{
		max-width: 1024px;
		margin: 0 auto;
	}

	.leistung{
		width: 100%;
		min-height: 200px;
		text-align: center;
		margin: 0 0 80px 0;
	}

	.leistungen_bild{
		float: none;
		margin: 0 auto;
	}

	.leistungen_bild img{
		max-width: 100px;
		margin-bottom: 20px;
	}

	.leistungen_hintergrundbild{
		display: none;
	}

	.leistungen_headline{
		font-family: "proxima-nova";
		font-weight: 800;
		font-size: 1.5em;
		text-transform: uppercase;
	}

	.leistungen_subline{
		font-family: "proxima-nova";
		font-weight: 100;
		font-size: 1.3em;
		margin-bottom: 15px;
	}

	.leistungen_beschreibung{
		font-family: "proxima-nova";
		font-weight: 300;
		font-size: 0.88em;
		text-align: center;
	}

	.kontaktwrapper{
		width: 100%;
		margin: 0 0 60px 0;
	}

	.kontaktmoeglichkeiten{
		float: left;
		width: 100%;
		text-align: center;
		font-size: 1em;
		margin: 0 0 15px 0;
		border-bottom: 1px dotted #fff;
	}

	.kontaktheader{
		float: none;
		width: 100%;
		text-align: center;
		font-size: 1.4em;
		margin: 0 0 20px 0;
	}

	.static-header-image{
		font-size: 12px;
  		max-height: 380px;
	}
	.item-page.jobs-page>img{
		max-width: 30%;
	}

}

@media (max-width: 980px) {
	/* news  */
	.news-intro-item{
		float:none;
		width:auto;
		font-size: 14px;
	}

	.news-intro-item>.side,
	.news-intro-item:nth-child(4n)>.side,
	.news-intro-item:nth-child(4n-1)>.side {
	    float: left;
	}
	.news-intro-item:nth-child(2n)>.side{float:right;}

	.news-intro-item:nth-child(4n)>.side1:after,
	.news-intro-item:nth-child(4n-1)>.side1:after {
	    border-right: 36px solid #fff;
	    border-left: none;
	    left: auto;
	}
	.news-intro-item:nth-child(2n)>.side1:after{
		border-right: none;
	    border-left: 36px solid #fff;
	    left: 0;
	}
	.news-intro-item:nth-child(4n)>.side2:after,
	.news-intro-item:nth-child(4n-1)>.side2:after{
		right: 50%;
		left: 0;
	}
	.news-intro-item:nth-child(2n)>.side2:after{
		left: 50%;
		right: 0;
	}


	.social-icons {
		padding: 0 5% 0 5%;
	}
}



@media (max-width: 767px) {
	#header_content {
		top: 180px;
		height: 400px;
		width: 90%;
		padding-left: 20px;
	}

	#header_content h1 {
		font-size: 1.5em;
	}

	#header_content h1 span {
		font-size: 2.5em;
		display: inline-block;
		line-height: 1em;
	}

	#header_content span {
		color: #fff;
		font-weight: 300;
		display: block;
		position: relative;
		margin-top: 20px;
	}


	#hintergrund_top {
		position: relative;
		width: 100%;
		height: 580px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		z-index: 4;
	}

	.mainbody{
		width: 96%;
	}


	#leistungen-wrapper{
		max-width: 1024px;
		margin: 0 auto;
	}

	.leistung{
		width: 100%;
		padding: 0 5px 0 5px;
		min-height: 200px;
		text-align: center;
		margin: 0 0 100px 0;
	}

	.leistungen_bild{
		float: none;
		margin: 0 auto;
	}

	.leistungen_bild img{
		max-width: 100px;
		margin-bottom: 20px;
	}

	.leistungen_hintergrundbild{
		display: none;
	}

	.leistungen_headline{
		font-family: "proxima-nova";
		font-weight: 800;
		font-size: 1.5em;
	}

	.leistungen_subline{
		font-family: "proxima-nova";
		font-weight: 100;
		font-size: 1.3em;
		margin-bottom: 15px;
	}

	.leistungen_beschreibung{
		font-family: "proxima-nova";
		font-weight: 300;
		font-size: 0.88em;
		text-align: center;
	}

	h1, h2, h3, h4, h5, h6 {
		font-size: 1.6em;
	}

	h3.title{
		font-size: 2em;
	}

	#telefon{
		position: absolute;
		left: 20px;
		top: 490px;
		text-align: left;
		font-size: 1.15em;
		width: 220px;
		height: 50px;
		z-index: 5;
	}

	.rsform-block-namen,
	.rsform-block-telefonnummer,
	.rsform-block-email-adresse,
	.rsform-block-budget,
	.rsform-block-nachricht,
	.rsform-block-name,
	.rsform-block-phone,
	.rsform-block-email,
	.rsform-block-salarywishes,
	.rsform-block-birthday,
	.rsform-block-residence,
	.rsform-block-bestwebsite,
	.rsform-block-cvupload,
	.rsform-block-tech,
	.rsform-block-condate,
	.rsform-block-message {
		width: 96%;
		margin-right: 0;
		margin-left: 0;
		float: left;
		overflow: hidden;
	}
	.rsform-block-tech{margin-left: 3%;}
	.rsform-block-tech label{padding: 8% 1% 4% 1%;}

	.rsform-block-cvupload .label{left:18%;}
	#philosophie_titel{
		font-size: 1.5em;
	}

	#philosophie_text{
		font-size: 0.9em;
	}

	#zitate {
		height: 350px;
	}



	/* leistungen-list */

	.leistungen-list .category .left{
		float: none;
		width: 100%;
		margin: 0 auto 0 auto;
		text-align: center;
	}

	.leistungen-list .category .right{
		float: none;
		width: 100%;
		margin: 0 auto 0 auto;
		text-align: center;
	}

	.leistungen-list .right h2{
		font-size: 1.5em;
		text-align: center;
	    margin: 0 0 20px 0;
	}


	.leistungen-list .cat-items{
		-webkit-column-count: 1;
		-webkit-column-gap: 0px;
		-moz-column-count: 1;
		-moz-column-gap: 0px;
		column-count: 1;
		column-gap: 0px;
	}
	.cck-article.news .top-line .top-b{top:35%;}
	.cck-article.news .top-line h2{font-size: 1.5em;}
	.cck-article.news .mainbody{
		width: auto;
		margin: 30px 5%;
	}
	.cck-article.news .top-line img{
		width: auto;
		max-width: none;
		height: 320px;
	}
	.news-more-item{
		width: 40%;
		margin-bottom: 8%;
		font-size: 12px;
	}

	.site-logo{
		position: absolute;
		left: 20px;
		top: 37px;
		width: 182px;
		height: 43px;
	}

	.site-logo img{
		max-width: 60%;
	}

	.btn {
		font-size: 1.4em;
	}

	.formResponsive input[type="button"], .formResponsive input[type="submit"], .formResponsive input[type="reset"] {
		font-size: 1.4em;
	}

	.moduletable h3{
		font-size: 2em;
		text-align: center;
		border-bottom: 2px solid #fff;
		padding-top: 75px;
	}

	.moduletable .untertitel{
		font-size: 0.85em;
	}

	.social-icons .icon span.txt{
		display: none;
	}

	.social-icons .icon.fb {
	    margin-right: 12px;
	    width: 100px;
	}

	.social-icons {
		width: 336px;
		text-align: center;
	}

	.projektanfragen{
		font-size: 1.5em;
	}

	.kontaktwrapper{
		width: 100%;
		margin: 0 0 60px 0;
	}

	.kontaktmoeglichkeiten{
		float: left;
		width: 100%;
		text-align: center;
		font-size: 1em;
		margin: 0 0 15px 0;
		border-bottom: 1px dotted #fff;
	}

	.kontaktheader{
		float: none;
		width: 100%;
		text-align: center;
		font-size: 1.4em;
		margin: 0 0 20px 0;
	}
	.static-header-image{
		font-size: 10px;
		max-height: 300px;
	}
	.item-page.jobs-page{width: 90%;}
	.item-page.jobs-page>img{
		max-width: 30%;
	}
}

@media (max-width: 401px) {
	.rsform-block-tech{
		font-size: 12px;
	}
	.rsform-block-tech label{padding: 12% 1% 4% 1%;}

	.static-header-image{
		font-size: 6px;
		max-height: 210px;
	}
	.item-page.jobs-page>img{
		display: none;
	}

	/* news */
	.news-intro-item>.side{
		float:none !important;
		clear: both;
		width: auto;
	}
	.news-intro-item>.side{margin-bottom: 5%;}
	.news-intro-item h4{margin: 10% 10% 16px;}

	.news-intro-item>.side1:after{
		border-top: none !important;
		border-right: 26px solid transparent !important;
		border-left: 26px solid transparent !important;
		border-bottom: 26px solid #fff !important;
		bottom: 0;
		left: 50% !important;
		margin-left: -26px;
		right: auto;
	}
	.news-intro-item:nth-child(2n)>.side1:after{
		margin-left: -26px;
		left: 50% !important;
	}
	.news-intro-item>.side2:after{
		left: 0  !important;
		right: 0  !important;
		bottom: auto;
    	height: 60%;
	}
	.cck-article.news .top-line h2{font-size:1em;}
	.cck-article.news .top-line img{
		height: 260px;
	}
	.news-more-item{
		width: auto;
	}
}