/* ============================ Foundation Original Styles Layout Override ==========================*/

html,
body {
	background: #fff;
}

h1,
h2,
h3,
h4 {
	line-height: 150%;
	padding-top: 1rem;
	text-transform: uppercase;
	font-family: arial;
	margin: 0;
}

h1 {
	font-size: 1.5rem;
	padding: 50px 0;
}

h2 {
	font-size: 1.2rem;
}

h3 {
	font-size: 1rem;
}

iframe {
	width: auto;
}

.clearfix {
	height: 1px !important;
}

h1 {
	color: #ffffff;
	padding: 1rem;
	width: 100%;
	margin-top: 0;
	height: 100%;
	font-size: 1.625rem;
}

.row {
	margin: 0 auto;
	width: 100%;
}

#topics-section,
#content-section,
#references-section,
#about-section {
	background: #fff none repeat scroll 0 0;
}

#topics-section h1 {
	background: #fab233;
}

#content-section h1 {
	background: #99af2b;
}

#references-section h1 {
	background: #8a2d6a;
}

#about-section h1 {
	background: #008ab7;
}

#anchor-team,
#anchor-content,
#anchor-references,
#anchor-about {
	position: absolute;
	top: -290px;
}

.columns {
	padding: 10px;
}


/* 2 DO */

#menu-section {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 100;
}

.top-bar {
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
}

.title-area {
	height: 70px;
}

.top-bar {
	background: #ffffff;
	border: 1px solid black;
}

.top-bar .toggle-topbar.menu-icon a span::after {
	box-shadow: 0 0 0 2px #264684, 0 9px 0 2px #264684, 0 18px 0 2px #264684;
}

.title-area .logo {
	width: 155px;
	height: 50px;
	background: #ffffff;
	padding: 10px 0 0 20px !important;
	border-radius: 0px 0px 0px 0px !important;
}

#menu-section .logo {
	width: 155px;
	height: 50px;
	background: #ffffff;
	padding: 10px 0 0 20px !important;
	border-radius: 0px 0px 0px 0px !important;
}

.title-area .menu-icon {
	background: #ffffff;
}

.expanded.top-bar .title-area {
	background: #ffffff;
}

.phone-menu {
	padding-top: 20px;
	background: #6e7a84 !important;
}

.phone-menu h2 {
	color: #ffffff;
	text-transform: uppercase;
	margin: 0;
	padding: 0 0 0 20px;
}

.phone-menu-panel {
	/*background: #A8A8A8 !important;*/
	height: 50px;
	border-radius: 3px;
}

.phone-menu .menu-arrow {
	width: 55px;
	height: 55px;
	background: url(../img/arrow_down.svg) no-repeat !important;
	background-position: 10px 10px !important;
	position: relative;
	top: -10px !important;
	left: -5px !important;
}

.phone-menu .phone-menu-panel[href^="#anchor-team"] .panel-bg {
	background: #fab233 !important;
}

.phone-menu .phone-menu-panel[href^="#anchor-content"] .panel-bg {
	background: #99af2b !important;
}

.phone-menu .phone-menu-panel[href^="#anchor-references"] .panel-bg {
	background: #8a2d6a !important;
}

.phone-menu .phone-menu-panel[href^="#anchor-about"] .panel-bg {
	background: #008ab7 !important;
}

.phone-menu .phone-menu-panel[href^="#contact-section"] .panel-bg {
	background: #153d8a !important;
}

.phone-menu .phone-menu-panel[href^="#impressum"] .panel-bg {
	background: #153d8a !important;
}


/* =====================  Landing Page Classes ===================== */


/*.bg-new-blue {background: #ffffff;}*/

.landing-top-left,
.landing-bottom-left,
.landing-top-right,
.landing-bottom-right {
	border: none;
	background: #ffffff;
}

.landing-top-left-bg {
	background: #ffffff;
}

.landing-top-right-bg {
	background: #ffffff;
}

.landing-top-right-bg {
	background: #ffffff;
}

.landing-bottom-left-bg {
	background: #ffffff;
}

.landing-bottom-right-bg {
	background: #ffffff;
}

.button-topics,
.button-content,
.button-references,
.button-about {
	height: 135px;
	width: 135px;
	font-size: 1.375rem;
	padding-top: 20px;
}

#landing-section .logo img {
	padding: 60px;
}

.button-topics {
	bottom: 90px;
	right: 5px;
}

.button-content {
	bottom: 90px;
	left: 5px;
	padding: 20px 15px 30px 5px;
}

.button-references {
	top: 0px;
	right: 5px;
}

.button-about {
	top: 0px;
	left: 5px;
	padding-left: 30px;
}

.arrow-down {
	z-index: 10;
}

.button-bewerbung-box {
	width: 112px;
	height: 90px;
	display: block;
	overflow: hidden;
	position: absolute;
	z-index: 50;
	bottom: 0;
	right: 0;
}

.button-bewerbung {
	background-color: #153D8A;
	width: 112px;
	height: 112px;
	display: block;
	border-radius: 50%;
	padding: 3px;
	-moz-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);

	transform: rotate(-10deg);
}

.button-bewerbung-inner {
	border: 2px solid #ffffff;
	border-radius: 50%;
	width: 106px;
	height: 106px;
	text-align: center;
	font-size: 12px;
	color: #ffffff;
	padding: 24px 15px 0 15px;
	line-height: 1;
}

.button-bewerbung-inner span {
	font-size: 15px;
	margin-top: 5px;
	display: block;
}


/* ----- Accordions ----- */

.accordion {
	padding: 0;
	width: 95%;
	position: relative;
	left: -20px;
}

.accordion-navigation {
	padding: 3px 0;
}

.phone-panel {
	background: #efefef !important;
	height: 50px;
	border-radius: 3px;
}

.panel-bg {
	background: #fab233 !important;
	width: 60px;
	height: 50px;
	float: left;
	position: relative;
	top: -16px;
	left: -16px;
	border-radius: 3px;
}

.panel-arrow {
	width: 55px;
	height: 55px;
	background: url(../img/arrow_right.svg) no-repeat;
	background-position: 16px 16px;
	background-size: 36px 36px;
	position: relative;
	top: -10px !important;
	left: -5px !important;
}

.panel-text {
	color: #55555;
	padding-left: 60px;
	margin-top: -6px;
	font-size: 1.1rem;
}

.accordion-navigation.active .phone-panel {
	background: #fab233 !important;
}

.accordion-navigation.active .panel-bg {
	background: none;
}

.accordion-navigation.active .panel-arrow {
	background: url(../img/arrow_down.svg) no-repeat 16px 18px;
	background-size: 36px 36px;
	top: 0;
	left: 0;
	padding: 0;
}

.accordion-navigation.active .panel-text {
	color: #ffffff;
}

#topics-section .accordion-navigation.active .panel-bg,
#content-section .accordion-navigation.active .panel-bg,
#references-section .accordion-navigation.active .panel-bg,
#about-section .accordion-navigation.active .panel-bg {
	background: none;
}


/* -------------------------- */


/* ============================ Common Classes ====================*/

#topics-section .large-9,
#content-section .large-9,
#references-section .large-9,
#about-section .large-9 {
	padding-top: 30px;
	margin-top: -8px;
	top: 0px;
	left: 0px;
	height: 100%;
	background: #ffffff;
}

.sections-move {
	height: 100%;
	position: relative;
	overflow: visible;
}

.bg-img-tablet {
	height: 190px;
	width: 100%;
}

#topics-section .bg-img-tablet {
	background: url("../img/tablet_was_wir_tun.png") no-repeat scroll center -25px;
	height: 190px;
	position: relative;
	z-index: 5;
	background-size: 279px 246px;
	background-position: center -20px;
}

#content-section .bg-img-tablet {
	background: url("../img/tablet_mit_was_arbeiten.png") no-repeat scroll center -95px;
	height: 190px;
	position: relative;
	z-index: 5;
	background-size: 435px 321px;
	background-position: center -55px;
}

#references-section .bg-img-tablet {
	background: url("../img/tablet_was_man-sieht.png") no-repeat scroll center -250px;
	height: 190px;
	position: relative;
	z-index: 5;
	background-size: 430px 430px;
	background-position: center -150px;
}

#about-section .bg-img-tablet {
	background: url("../img/tablet_wer_wir_sind.png") no-repeat scroll center -130px;
	height: 190px;
	position: relative;
	z-index: 5;
	background-size: 247px 299px;
	background-position: center -48px;
}

.bg {
	z-index: 3;
	position: relative;
	width: 100%;
	background-size: auto 190px;
	background: #6F97B2;
	background-image: -ms-radial-gradient(center, ellipse closest-side, #FFFFFF 0%, #6F97B2 100%);
	background-image: -moz-radial-gradient(center, ellipse closest-side, #FFFFFF 0%, #6F97B2 100%);
	background-image: -o-radial-gradient(center, ellipse closest-side, #FFFFFF 0%, #6F97B2 100%);
	background-image: -webkit-gradient(radial, center center, 0, center center, 125, color-stop(0, #FFFFFF), color-stop(100, #6F97B2));
	background-image: -webkit-radial-gradient(center, ellipse closest-side, #FFFFFF 0%, #6F97B2 100%);
	background-image: radial-gradient(ellipse closest-side at center, #FFFFFF 0%, #6F97B2 100%);
}


/* ============================ CIS-Topics Classes ====================*/

#topics-section .panel-bg {
	background: #fab233 !important;
}

#topics-section .accordion-navigation.active .phone-panel {
	background: #fab233 !important;
}


/* ============================ CIS-Content Classes ====================*/

#content-section .panel-bg {
	background: #99af2b !important;
}

#content-section .accordion-navigation.active .phone-panel {
	background: #99af2b !important;
}


/* ============================ CIS-References & Orbit Slider Classes ====================*/

#references-section .panel-bg {
	background: #8a2d6a !important;
}

#references-section .accordion-navigation.active .phone-panel {
	background: #8a2d6a !important;
}

#references-section .button.small {
	width: 115px;
}

#references-section .orbit-bullets-container {
	position: relative;
	top: 0px;
}


/* =========================== About us Classes ================ */

#about-section .panel-bg {
	background: #008ab7 !important;
}

#about-section .accordion-navigation.active .phone-panel {
	background: #008ab7 !important;
}

.about-box.active {
	border: none;
	width: 350px;
	height: 350px;
	margin-left: 3%;
	color: #ffffff;
	background: #008ab7;
	margin-top: 0;
}

.about-box.active p,
.about-box.active .list li,
.about-box.active h3 {
	color: #ffffff !important;
	padding: 2rem 2rem 0rem 2rem;
	font-size: 0.7rem;
	line-height: 150%;
	margin-top: 0;
	top: 0%;
}

.about-box.active h3 {
	font-size: 1.125rem;
}

.about-box.active p {
	padding: 1rem 1.5rem 0rem 1.5rem;
}


/* =========================== CIS Footer & Impressum Classes ================ */

.cis-contact {
	width: 320px;
}

#footer-section {
	position: relative;
}

#footer-section a {
	display: block;
	margin-right: 0;
}

footer {
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
	position: relative;
	/* Footer Chrome 2 DO
top: 3520px;
*/
}

footer,
footer a {
	color: #ffffff;
}

footer .row {
	text-align: right;
}

#footer-section .row {
	padding-top: 0;
	padding-bottom: 0;
}

footer a {
	margin-left: 0px;
}

#impressum #modal-impressum {
	padding-left: 20px;
}

#impressum .close {
	right: 10px!important;
}

/*#menu-section-phone {
	height: auto;
}*/

.menu-wrap {
	height: auto;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3) !important;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.3) !important;
	display: none;
}

.menu-wrap.blue {
	background-color: #ffffff;
}

.menu-wrap-inner {
	height: 50px;
}

.menu-positioner {
	height: auto;
	width: 100%;
}

.logo-box {
	height: 50px;
	position: static;
	-webkit-box-shadow: none;
	box-shadow: none;
	width: 100px;
	border-radius: 0;
	padding-top: 12px;
	padding-left: 10px;
	padding-right: 10px;
	display: block;
}

.logo-top {
	width: 80px !important;
	height: auto;
}

.burger-button {
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	background: url(../img/menue.svg) center center no-repeat;
	background-size: 50% auto;
	cursor: pointer;
}

.navigation-list:before {
	content: "Menu";
	position: absolute;
	left: 10px;
	top: 11px;
	color: #ffffff;
	font-size: 1.2rem;
	text-transform: uppercase;
}

.navigation-list {
	padding: 50px 10px 10px 10px;
	background-color: #6E7A84;
	position: relative;
	display: none;
}

.navigation-list li {
	display: block;
	margin: 0;
	text-align: left;
	margin-bottom: 6px;
}

.navigation-list li.hidden {
	display: block;
}

.navigation-list li a {
	position: relative;
	background-color: #A8A8A8;
	width: 100%;
	display: block;
	color: #222222;
	font-size: 1.1rem;
	text-transform: none;
	padding: 11px 12px 12px 75px;
	height: 50px;
	border-radius: 3px;
}

.navigation-list li a:before {
	content: "";
	display: block;
	width: 58px;
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../img/arrow_down.svg) center center no-repeat;
	background-color: #777777;
	border-radius: 3px;
}

.navigation-list li a[href^="#anchor-team"]:before {
	background-color: #fab233;
}

.navigation-list li a[href^="#anchor-content"]:before {
	background-color: #99af2b;
}

.navigation-list li a[href^="#anchor-references"]:before {
	background-color: #8a2d6a;
}

.navigation-list li a[href^="#anchor-about"]:before {
	background-color: #008ab7;
}

.navigation-list li a[href^="#contact-section"]:before {
	background-color: #153d8a;
}

.navigation-list li a[href^="#impressum"]:before {
	background-color: #153d8a;
}


.contact {
	margin-top: 30px;
	text-align: center;
	background: #fff;
}

.contact .form-button {
	width: 125px;
	height: 40px;
	color: #ffffff;
	padding: 0.5rem;
	z-index: 2;
	text-align: center;
	border-radius: 5px;
	font-size: 20px;
	text-transform: uppercase;
}