/* CSS Document*/
@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Light.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Light Italic'), local('/ar/font/encode/EncodeSansSemiExpanded-Light'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Light.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Light.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Light.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-ExtraLight.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Extra Light'), local('/ar/font/encode/EncodeSansSemiExpanded-ExtraLight'),
        url('/ar/font/encode/EncodeSansSemiExpanded-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-ExtraLight.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-ExtraLight.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/encode/EncodeSansSemiExpanded-ExtraLight.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Extra Light Italic'), local('/ar/font/encode/encode/EncodeSansSemiExpanded-ExtraLight'),
        url('/ar/font/encode/encode/EncodeSansSemiExpanded-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/encode/EncodeSansSemiExpanded-ExtraLight.woff2') format('woff2'),
        url('/ar/font/encode/encode/EncodeSansSemiExpanded-ExtraLight.woff') format('woff'),
        url('/ar/font/encode/encode/EncodeSansSemiExpanded-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Regular.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Regular'), local('/ar/font/encode/EncodeSansSemiExpanded-Regular'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Regular.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Regular.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Regular.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Light.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Light'), local('/ar/font/encode/EncodeSansSemiExpanded-Light'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Light.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Light.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Light.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Black.eot');
    src: local('/ar/font/EncodeSansSemiExpanded ExtraBlack Italic'), local('/ar/font/encode/EncodeSansSemiExpanded-Black'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Regular.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Italic'), local('/ar/font/encode/EncodeSansSemiExpanded-Regular'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Regular.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Regular.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Regular.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Medium.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Medium Italic'), local('/ar/font/encode/EncodeSansSemiExpanded-Medium'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Medium.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Medium.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Medium.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Bold.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Bold'), local('/ar/font/encode/EncodeSansSemiExpanded-Bold'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Bold.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Bold.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Bold.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Medium.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Medium'), local('/ar/font/encode/EncodeSansSemiExpanded-Medium'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Medium.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Medium.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Medium.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Black.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Black'), local('/ar/font/encode/EncodeSansSemiExpanded-Black'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-Black.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Extra Black'), local('/ar/font/encode/EncodeSansSemiExpanded-Black'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-BoldItalic.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Bold Italic'), local('/ar/font/encode/EncodeSansSemiExpanded-BoldItalic'),
        url('/ar/font/encode/EncodeSansSemiExpanded-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-BoldItalic.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-BoldItalic.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'EncodeSansSemiExpanded';
    src: url('/ar/font/encode/EncodeSansSemiExpanded-BlackItalic.eot');
    src: local('/ar/font/EncodeSansSemiExpanded Black Italic'), local('/ar/font/encode/EncodeSansSemiExpanded-BlackItalic'),
        url('/ar/font/encode/EncodeSansSemiExpanded-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('/ar/font/encode/EncodeSansSemiExpanded-BlackItalic.woff2') format('woff2'),
        url('/ar/font/encode/EncodeSansSemiExpanded-BlackItalic.woff') format('woff'),
        url('/ar/font/encode/EncodeSansSemiExpanded-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* ==========================================================================
 * Container
 * ==========================================================================
 */

.site, .section, #page, #header, #navigation, .navigation, .navigation li, .navigation a, #slider {
	margin: 0 auto;
}
body {
	overflow-y: scroll;
}
#page, #header {
	width: 100%;
}

#page {
	z-index: 1;
}
ul {
	margin-bottom: 15px;
}
ul, li {
	list-style-type: none;
	line-height: 1.25em;
}
/* Header u. Navigation  */
/* TBD Navigation in eigene Datei auslagern */
#header {
	position: fixed;
	z-index: 900;
	left: 0px;
	top: 0px;
	right: 0px;
}

/* ==========================================================================
 * Abstaende
 * ==========================================================================
 */

/* Setzt die maximale Seitenbreite alle Sektionen (Header, Slider, Page) */
.section {
	max-width: 1600px;
}

/* Horizontaler Abstaend */
.margin-a {
	margin: 0 17.5%;
}

/* ==========================================================================
 * Grid
 * ==========================================================================
 */
.col-a, .col-b, .col-solo {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.grid-a, .grid-b, .col-solo {

	float: none;
	clear: both;
}

.grid-a .col-solo {
	width: 100%;
}

.grid-a .col-a, .grid-a .col-b {
	width: 50%;
}
.grid-b .col-a {

	width: 66%
}
.grid-b .col-b {

	width: 34%
}

.grid-a .col-a {
	float: left;
	clear: left;
}

.grid-a .col-b {
	float: left;
	clear: right;
}

/* Spaltenfolge umkehren, so das die erste Spallte bei zwei Spallten links, und bei nur einer unten ist.
 *
 *  */

.grid-a .col-a.invert, .grid-a .col-a .resonsive .invert {
	float: right !important;
	clear: right !important;
}
.grid-a .col-b.invert, .grid-a .col-b .resonsive .invert {
	float: left !important;
	clear: left !important;
}

/* Abstaende fuer Form elemente */

form .grid-a {
	margin-bottom: 0.5em !important;
}

form .grid-a .col-b, form .grid-a .col-solo {
	padding-left: 0.25em !important;
}

form .grid-a .col-a, form .grid-a .col-solo {
	padding-right: 0.25em !important;
}

/* Overflow:visible um das Logo ueberlappend in den Slider zu ziehen */
.overflow {
	overflow: visible !important;
}

/* ==========================================================================
 */
hr {
	position: relative;
	margin: 0;
	padding: 0;
	left: -6000px;
}

#underSlider {
	height: 2em;
}

/* Abstand Seite unten */
.space-a hr {
	height: 4em;
}

/* ==========================================================================
 * Schift
 * ==========================================================================
 */

/* Basis Schriftgroessen, alle anderen Schriftgroesen relativ in EM */
body, .tk-ff-encode-web-pro {/* TBD Sytemschriftart als Fallback?*/
	font-family: 'EncodeSansSemiExpanded', verdana, sans-serif !important;
	font-size: 15px;
	font-weight: 400;
	text-transform: lowercase;
}
/* Schriftgroessen in em relativ zur obrigen Basis */
p, a, li, .kForm, .button {
	font-size: 1em;
	font-weight: 400;
}

p, h3 {
	line-height: 1.25em;
	clear: both;
	float: none;
	margin-bottom: 1em;
}
h2 {
	font-size: 1.5em;
	font-weight: 400;
	padding-bottom: 0.5em;
	margin: 0;
}

h3 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
h4 {
	font-weight: 400;
	margin-bottom: 0.5em;
}
/* kein Zeilenumbruch, z.B. beim "-" in E-Mail */
.noBr {
	white-space: nowrap;
}

/* ==========================================================================
 * Farben
 * ==========================================================================
 */

/*  Hintergrundfarben	*/

body, html, #navigation, .navigation, .navigation li ul, .navigation ul li, .navigationOpen, .kForm, .button, #nav-mobile {

	background-color: #FBB900;
	/* border:1px dashed green; */
}

/* Schatten, damit der Headre beim scrollen sauber aussieht*/
#navigation {
	-webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.24);
	-moz-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.24);
	box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.24);
}

/* Schriftfarben*/

body, a, li, .kForm, .button, .icon-next, .icon-prev {
	color: white;
	text-decoration: none !important;
}
/* Link, onHover Farben u. CSS Efekte */

a:hover, .swipe a.nav:hover, .icon-next:hover, .icon-prev:hover, .current-page {

	color: white !important;
	font-weight: 800;
}
li.hover:hover, a.current-page, li.hover a:hover, li a:hover, .navigationOpen a:hover {

	font-weight: 800 !important;
}

/* ==========================================================================
 * Efekte
 * ==========================================================================

 a, a:hover, li, li:hover {

 -moz-transition: all 0.4s linear;
 -o-transition: all 0.4s linear;
 -webkit-transition: all 0.4s linear;
 transition: all 0.4s linear;
 }
 #header ul {

 -moz-transition: all 1s linear;
 -o-transition: all 1s linear;
 -webkit-transition: 1s linear;
 transition: all 1s linear;
 }*/

/* ==========================================================================
 * Header u. Navigationsleiste
 * ==========================================================================
 */
#header, #navigation, .navigation, .navigation li, .navigation li a, #nav-mobile, #nav-mobile2 {
	text-align: center;
	vertical-align: baseline;
	height: 40px;
	line-height: 40px;
	cursor: pointer !important;
}

.navigation > ul {
	width: 100%;
	cursor: pointer;
	list-style-type: none;
}
.navigation  li ul {
	display: none;
}

.navigation li {
	list-style-type: none;
	display: inline-block;
	width: 19%;
	/* float: left;*/

	text-align: center;
}
/*#nav-philosophie {
	width: 21.0%;
}
#nav-lounge {
	width: 13.5%;
}
#nav-jobs {
	width: 10.5%;
}
#nav-kontakt {
	width: 15.5%;
}
#nav-impressum {
	width: 19.5%;
}*/
#nav-philosophie {
	width: 20.0%;
}
#nav-lounge {
	width: 12.5%;
}
#nav-jobs {
	width: 9.5%;
}
#nav-kontakt {
	width: 14.5%;
}
#nav-impressum {
	width: 18.5%;
}

/*.navigation li a, .navigation li {border: 1px dashed white;} */
.navigation li a {
	display: inline-block;
	width: 100%;
	text-align: center;
}

/* SubMenu */
.navigation li ul {
	display: none;
	font-size: 0.75em;
}

.navigation li li {
	clear: both;
	width: 100%;
}

li.active ul {
	display: block;
}
/* ==========================================================================
 * Logo
 * ==========================================================================
 */
.logo {
	display: inline;
	z-index: 70;
	width: 100%;
	height: 70px;
	line-height: 70px;
	margin: 0;
	text-align: left;
	clear: both;
	float: none;
}

#logo-link {
	position: relative;
	z-index: 701;
	margin-top: -131px;
	width: 250px;
	margin-left: -6.80%;
	height: 200px;
	line-height: 200px;
	display: block;
	clear: both;
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100%;
}

/* logo SWG  */
#logo-link, .logo-mobile {

	background-image: url('/ar/img/icon/logo_ar.svg');
	background-attachment: scroll;
}
/* PNG fallback */
.png #logo-link, .png .logo-mobile {
	background-image: url('/ar/img/icon/logo_ar.png');
}
#logo-link, #logo-link:hover, .logo-mobile, .logo-mobile:hover {
	text-shadow: none !important;
	color: transparent !important;
}
/* ==========================================================================
 * MobileMenu / Navigation
 * ==========================================================================
 */
/* Hohere Links, damit nicht immer die Adressleiste aufspringt*/
.navigation a {
	padding-bottom: 30px;
}
/* Link zum mobilMenu, wird noch aufgeraeumt TBD naming */
#nav-mobile, #nav-mobile2 {
	/* Icon drei striche zum öffnen / schließen des mobilMenus*/
	display: none;
	/* background: url(http://agentur-roeder.appspot.com/img/icon/menu.png) no-repeat center center;*/
	width: 10%;
	clear: both;
	right: 0px;
}

/* Vektor icon */
#nav-mobile div, #nav-mobile2 div {
	position: relative;
	display: block;
	border-bottom: 0.25em solid rgba(244,244,244,0.95);
	height: 13%;
	width: 70%;
	margin: 0 15%;
}

/* Klon des Link zum mobilMenu, unten */
#nav-mobile2 {
	background-position: left;
	float: none;
}

.navigationOpen div {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	clear: both;
	float: none;
}
.navigationOpen #nav-mobile, .navigationOpen #nav-mobile2 {
	position: fixed;
	display: block !important;
}

.navigationOpen #nav-mobile {
	right: 5px;
	top: 5px;
}

.navigationOpen #nav-mobile2 {
	left: 5px;
	bottom: 5px;
}

.navigationOpen {
	position: fixed !important;
	height: 100% !important;
	width: 100%;
	margin: 0;
	padding: 0;
}

.navigationOpen .navigation {
	padding: 0;
	clear: both;
	float: none;
	display: inline-block !important;
	clear: both;
	height: 550px !important;
	background-position: left top !important;
	background-repeat: no-repeat;
	z-index: auto !important;
	margin: 0 auto;
}

.navigationOpen li, .navigationOpen li a {
	display: block;
	clear: both;
	float: none;
	margin: 0;
	line-height: 2em;
	text-align: left !important;
	line-height: 30px !important;
	height: 30px !important;
	width: 90px !important;
	padding-bottom: 0 !important;
}

.navigationOpen li {
	margin-left: 116px;
}

/* Logo fuer mobileNav */
#logoHeader, #logoHeader img {
	display: block;
	clear: both;
	width: 125px;
	margin: 0 auto;
	text-align: center;
}

.logo-mobile {
	background-position: left top !important;
	display: inline-block;
	background-repeat: no-repeat;
	z-index: auto !important;
	background-size: 150px;
	height: 120px;
	margin: 30px 0 auto !important;
	clear: both;
	z-index: auto !important;
	width: 150px !important;
}
#header h1 {
	display: none;
}
.navigationOpen h1 {
	display: block !important;
}
#logoHeader img {
	margin-left: -6px
}

/* ==========================================================================
 * Slider Vor-u. zurueck u. Quadrate
 * ==========================================================================
 */

/* sliderQuadrate  */
#slider-1-sq ul {
	clear: both;
	margin-top: 7%;
}
#slider-1-sq li {
	list-style: none;
	display: inline;
	margin: 0;
	padding: 0;
	padding-right: 0.25em;
}
.swiper-pagination a {
	display: inline-block;
	background-color: rgba(244,244,244,0.75);
	height: 0.75em;
	width: 0.75em;
	margin: 0;
}

#slider-1-sq  a:hover, a.sQ.currentSlide {
	background-color: rgba(244,244,244,0.95) !important;
}

.swiper-active:hover, .swiper-active-switch {
	background-color: rgba(244,244,244,0.95) !important;
	cursor: pointer;
}

/* Slider vor- u. zurueck */
.swipe .nav {

	position: absolute;
	z-index: 200;
	top: 42%;
	font-size: 4em;
	height: 1em;
	color: rgba(244,244,244,0.85);
	cursor: pointer;
}

.swipe .nav:hover {
	color: rgba(244,244,244,0.95);
	font-weight: 800;
}

.swipe .icon-prev {
	left: 2.5%;
}
.swipe .icon-next {
	right: 2.5%;
}

/* Slider Vo u. Zurueck bei Hover ein- u. ausblenden. */
.swipe .icon-prev, .swipe .icon-next {
	display: none;
}
.swipe:hover .icon-prev, .swipe:hover .icon-next {
	display: block;
}

/* ==========================================================================
 * Dreiecke
 * ==========================================================================
 */

span.triangle:before, .icon-prev span:before, .icon-next span:before, .inline-tab h1 span:before, .inline-tab h2 span:before, .inline-tab h3 span:before, .inline-tab h4 span:before, .inline-tab h5 span:before, .inline-tab h6 span:before {
	content: "\25C0";
	display: inline-block;
	/* Spiegeln und Breite halbieren */
	-moz-transform: scale(-0.5, 1);
	-webkit-transform: scale(-0.5, 1);
	-o-transform: scale(-0.5, 1);
	-ms-transform: scale(-0.5, 1);
	transform: scale(-0.5, 1);
}

/* Pfeile tauschen wie auf der alten Seite */
.current-page span.triangle:before, .icon-prev span:before, .inline-tab-open h1 span:before, .inline-tab-open h2 span:before, .inline-tab-open h3 span:before, .inline-tab-open h4 span:before, .inline-tab-open h5 span:before, .inline-tab-open h6 span:before {

	/* Breite halbieren*/
	-moz-transform: scale(0.5, 1);
	-webkit-transform: scale(0.5, 1);
	-o-transform: scale(0.5, 1);
	-ms-transform: scale(0.5, 1);
	transform: scale(0.5, 1);
}

/* ==========================================================================
 * Formulare
 * ==========================================================================
 */

/* FormElemente*/
form {
	padding-top: 0.5em;
}
.kForm, .button {
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	left: 0px;
	top: 0px;
	display: block;
	float: none;
	clear: both;
	height: 2.5em;
	width: 100%;
	margin: 0;
	padding-left: 0.5em;
	border: 0.1em solid white;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 1em;
	text-transform: lowercase;
}
form textarea {
	clear: both;
	height: 8em !important;
	line-height: 2.5em;
}

input, input[placeholder] {
	color: white;
	opacity: 1;
	/* Texteingaben des Benutzers nicht in Kleinbuchstaben*/
	text-transform: none !important;
}
::-webkit-input-placeholder {
	color: white;
	opacity: 1;
}

:-moz-placeholder {/* Firefox 18- */
	color: white;
	opacity: 1;
}

::-moz-placeholder {/* Firefox 19+ */
	color: white;
	opacity: 1;
}

:-ms-input-placeholder {
	color: white;
	opacity: 1;
}

input.validate:required:invalid {
	background: url(/img/icon/invalid.png);
	background-position: 99% 2px;
	background-repeat: no-repeat;
	background-size: 10px
}
input:required:valid {
	background: url(/img/icon/valid.png);
	background-position: 99% 2px;
	background-repeat: no-repeat;
	background-size: 20px
}

/* ==========================================================================
 * Tabs
 * ==========================================================================
 */

/* Tablist */
.tablist-left {
	display: block !important;
	width: 66%;
	margin: 0;
	padding: 0;
	margin-top: 2em;
	list-style: none;
	vertical-align: baseline;
}

.tablist-left li {

	width: 100%;
	clear: both;
	float: none;
}
.tablist-left li, .tablist-left li a {
	padding: 0;
	margin: 0;
	line-height: 2.5em;
}
.tablist-left li a {
	display: block;
	margin: 0;
}

.active-tab {
	display: block !important;
}

/* Inline Tabs basieren auf Ueberschriften */
.inline-tab p {
	display: none;
}
.inline-tab h1, .inline-tab h2, .inline-tab h3, .inline-tab h4, .inline-tab h5, .inline-tab h6 {
	cursor: pointer;
}
.inline-tab-open p {
	display: block !important;
}

/* Lounge Tabs */
#lounge-tabs, #job-tabs {
	margin-bottom: 2em;
}
#lounge-tabs li {
	clear: both;
	float: none;
}

/* ==========================================================================
 * Slider
 * ==========================================================================
 */

/* Slider füllt die gesammte Seitenbreite */
#slider {
	width: 100%;
	max-width: 100% !important;
	margin: 0;
}

.swipe {
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.swipe-wrap img {
	width: 100%;
	max-width: 100%;
	text-align: right;
	/*height: 52.734375% !important; 56.25%;16:9 TBD in der Vorlage siehts eher nach 4K aus?*/
}

.swipe-wrap, .ra-wrap-outer {
	overflow: hidden;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.ra-wrap-outer, .swipe {
	overflow: hidden;
}
.swipe-wrap {
	float: left;
}
.swipe-wrap, .swipe-wrap > div {
	float: left;
	clear: none;
	position: relative;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: auto !important;
}
.swipe-wrap > div {
	width: 100%;
}

/* ==========================================================================
 * Performance & Small Fixes
 * ==========================================================================
 */

#col-logo *, .slider, .slider * {
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

body, html {
	width: 100%;
	min-height: 100%;
}
.site {
	min-height: 100%;
}

span.consent {
	display: inline-block;
	margin-left: 20px;
	margin-top: -11px;
}

#company {
	position: absolute;
	left: 0;
	top: -1000px;
}

/* ===========================================================================
 * Cookie Notice Container
 * ===========================================================================
 */
 
div#cookie_notice {
	position:fixed;
	bottom:0px;
	background-color:rgba(0, 0, 0, 0.75);
	display:none;
	width:100%;
	min-height:40px;
	color:rgba(255, 255, 255, 1.0);
	padding-left:20px;
	line-height:25px;
	z-index:3000;
}

div#cookie_notice p#content {
	color:rgba(255, 255, 255, 1.0);
	margin-bottom: 5px;
	margin-top: 15px;
	padding-bottom: 0;
	padding-right:20px;
	text-align: left;
}

div#cookie_notice a#more_information,
div#cookie_notice a#notice_btn {
	display:inline-block;
}

div#cookie_notice a#more_information {
	color:rgba(251, 185, 0, 1.0);
	text-decoration:none;
	margin-left:5px;
}

div#cookie_notice a#notice_btn {
	background-color:rgba(251, 185, 0, 1.0);
	color: rgba(255, 255, 255, 1.0);
	float:right;
	width:135px;
	height:30px;
	border-radius:5px;
	text-align:center;
	text-decoration: none;
	line-height:34px;
	margin-top:-8px;
	margin-left:15px;
	margin-right:25px;
}

div#cookie_notice a#more_information:hover,
div#cookie_notice a#notice_btn:hover {
	cursor:pointer;
}


div#cookie_notice a#more_information:hover{
	color:rgba(255, 255, 255, 1.0);
}

div#cookie_notice a#notice_btn:hover {
	background-color:rgba(255, 255, 255, 1.0);
	color:rgba(251, 185, 0, 1.0);
}


@media screen and(min-width:760px) and (max-width:1000px) {
	div#cookie_notice a#notice_btn,
	div #cookie_notice a#more_information {
		margin-right: 0;
	}
}

/*@media screen and (min-width:0px) and (max-width:380px) {
	div#cookie_notice a#notice_btn {
		margin-top:5px;
}*/

@media screen and (min-width:0px) and (max-width:368px) {
	div#cookie_notice a#notice_btn {
		margin-bottom:10px;
	}
}

/* =========================================================
 * reCAPTCHA
 * =========================================================
 */

div.grecaptcha-badge {
	background-color: #fbb900;
	z-index: 1;
}