*,
*:after,
*:before {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body{margin: 0; padding: 0; border: 0;}
header, nav, article, section, footer{display: block;}

body {line-height: 1;}
ol,
ul {list-style: none;}
*, *:after, *:before {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row {
margin: 0 auto;
}
.row:after {
content: "";
clear: both;
display: table;
}
.row .row {
width: 100%;
padding: 0;
margin: 0;
max-width: 100%;
}
.row .col {
float: left;
min-height: 1px;
}
.row .col:last-child {
float: right;
}
.row .col:first-child {
float: left;
}
.row .col.c-1 {
width: 8.333336%;
}
.row .col.c-2 {
width: 16.666667%;
}
.row .col.c-3 {
width: 25.000008%;
}
.row .col.c-4 {
width: 33.333344%;
}
.row .col.c-5 {
width: 41.66668%;
}
.row .col.c-6 {
width: 50.000016%;
}
.row .col.c-7 {
width: 58.333352%;
}
.row .col.c-8 {
width: 66.666667%;
}
.row .col.c-9 {
width: 75.000024%;
}
.row .col.c-10 {
width: 83.33336%;
}
.row .col.c-11 {
width: 91.666696%;
}
.row .col.c-12 {
width: 100%;
}
.hide-wide {
position: absolute;
left: -10000px;
}
@media only screen and (max-width: 768px) {
.row .col.c-12 {width: 100%;}
}
::-moz-selection {color: #fff; background: #000;}
::selection {color: #fff; background: #000;}
html, body {height: 100%;}
html {
overflow-y: scroll;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
body {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
color: #444;
margin: 0;
font-size: 100%;
padding: 0;
line-height: 140%;
background-color: #fff;
}
@media only screen and (max-width: 768px) {
body {
font-size: 95%;
}
}
@media only screen and (max-width: 480px) {
body {font-size: 90% !important;}
header {height: 350px !important;}
.btn {font-size: 0.8rem !important;}
.intro {font-size: 1.0em !important;}
.row {padding: 0 !important;}
.Karriere-Coaching{margin-left: 0px !important;}
.title {top: 10%;}
iframe{max-width: 100%;}
nav .brand span {
display: none;
}
article.headline p {font-size: 1.2em !important; line-height: 1.5em;}
.address {width: 100% !important;}
header .landscape-left {
display: none;
}
header h1 {
font-size: 120%;
}
section h1 {
font-size: 1.70em !important;
}
section h2 {
margin: 0 auto 1em;
color: #323a45;
font-size: 2em;
}
section h3 {
font-size: 1.25em;
}
section p {font-size: 100% !important;}
article.headline p {font-size: 100% !important;}
section h1 {font-size: 1.20em !important;}
article {
padding: 3em 0;
}
}
@media only screen and (max-width: 320px) {
body {
font-size: 85%;
}
}
h1,h2,h3{font-size: 2.375em;}
h3{font-size: 1.625em;}
p {
font-size: 1.000em;
line-height: 1.500em;
font-weight: 400;
font-style: normal;
color: #515151;
margin-bottom: 1.875em;
}
p.highlight {
color: #515151;
background: #f0f0f0;
padding: 0.625em;
border: 1px solid #e0e0e0;
}
p.lead {
color: #515151;
font-size: 1.125em;
line-height: 1.500em;
font-weight: 700;
font-style: normal;
}
strong,b {font-weight: 700; font-style: normal;}
ul{
margin: 0 0 35px 0px;
padding: 0;
}
ul li {
margin-bottom: 0px;
margin-left: 2.500em;
}
.clearfix:after {
content: ".";
clear: both;
visibility: hidden;
display: block;
height: 0;

}
@font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v=4.1.0');
src: url('fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('fontawesome-webfont.woff?v=4.1.0') format('woff'), url('fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
html,
body {
height: 100%;
background: #323a45;
}
.row {
max-width: 1180px;
padding: 0 3em;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
.title {
position: absolute;
left: 50%;
width: 100%;
max-width: 900px;
padding: 0 2em;
text-align: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.arrow-down {
display: block;
width: 40px;
height: 40px;
margin: 3em auto 0;
}
.toparrow-down.as-circle-full svg circle {
-webkit-animation: circle-full 1s ease-in-out alternate forwards;
-moz-animation: circle-full 1s ease-in-out alternate forwards;
-ms-animation: circle-full 1s ease-in-out alternate forwards;
-o-animation: circle-full 1s ease-in-out alternate forwards;
animation: circle-full 1s ease-in-out alternate forwards;
}
.toparrow-down.as-circle-none svg circle {
-webkit-animation: circle-none 1s ease-in-out forwards;
-moz-animation: circle-none 1s ease-in-out forwards;
-ms-animation: circle-none 1s ease-in-out forwards;
-o-animation: circle-none 1s ease-in-out forwards;
animation: circle-none 1s ease-in-out forwards;
}

.arrow-down.as-circle-full svg circle {
-webkit-animation: circle-full 1s ease-in-out alternate forwards;
-moz-animation: circle-full 1s ease-in-out alternate forwards;
-ms-animation: circle-full 1s ease-in-out alternate forwards;
-o-animation: circle-full 1s ease-in-out alternate forwards;
animation: circle-full 1s ease-in-out alternate forwards;
}
.arrow-down.as-circle-none svg circle {
-webkit-animation: circle-none 1s ease-in-out forwards;
-moz-animation: circle-none 1s ease-in-out forwards;
-ms-animation: circle-none 1s ease-in-out forwards;
-o-animation: circle-none 1s ease-in-out forwards;
animation: circle-none 1s ease-in-out forwards;
}
.toparrow-down svg line {
stroke: #fff;
stroke-width: 2px;
}
.toparrow-down svg circle {
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 500;
stroke-dashoffset: 500;
fill: none;
}
.arrow-down svg line {stroke: #11838d;stroke-width: 2px;}
.arrow-down svg circle {
stroke: #11838d;
stroke-width: 2px;
stroke-dasharray: 500;
stroke-dashoffset: 500;
fill: none;
}
nav {
width: 100%;
position: fixed;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
padding: 1em 2em;
/*background: #3cafb9;*/
background: #323a45;
z-index: 99;
/*border-bottom: 6px solid #f9c423;*/
border-bottom: 6px solid #23f9ee;
}
@media only screen and (max-width:1024px) {
nav {padding: 1em;}
}
nav.as-fixed {
/*background: #11838d;*/
opacity: 0.95;
padding: 1em 2em;
}
nav ul {
float: right;
margin: 0;
list-style: none;
text-align: right;
}
@media only screen and (max-width:1024px) {
nav ul {
position: fixed;
float: none;
right: -380px;
top: 0;
height: 100%;
padding: 8em 3em;
background: #323a45;
background: rgba(50,58,69,0.95);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
nav ul.as-slide-in {
right: 0;
}
}
nav ul li {
display: inline-block;
margin: 0 0 0 1em;
}
@media only screen and (max-width:1024px) {
nav ul li {
display: block;
margin: 0 0 1.5em 0;
text-align: left;
}
}
nav ul li.as-active a {
color: #f0d416;
}
nav ul a {
color: #fff;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
text-decoration: none;
font-size: 0.85em;
letter-spacing: 0.1em;
}
@media only screen and (max-width:1024px) {
nav ul a {
font-size: 1.25em;
}
}
nav ul a:hover {
color: #f0d416;
}
nav .brand {
position: relative;
display: block;
float: left;
z-index: 2;
-webkit-transition: all 350ms ease;
-moz-transition: all 350ms ease;
-o-transition: all 350ms ease;
transition: all 350ms ease;
color: #fff;
}
nav .brand a {
color: #f7ca18;
font-weight: 400;
font-style: normal;
font-size: 1.5em;
text-transform: none;
letter-spacing: 0;
text-decoration: none;
}
nav .brand a:hover {
color: rgba(247,202,24,0.75);
}
nav .brand em {
font-size: 0.75em;
font-weight: 300;
font-style: normal;
font-style: italic;
}
nav .brand b {
font-size: 0.75em;

font-weight: 600;
font-style: normal;
}
nav .mobile-nav {
display: none;
position: absolute;
right: 1.5em;
top: 1.45em;
width: 32px;
height: 32px;
padding: 4px 3px;
z-index: 100;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
nav .mobile-nav:hover svg line {
stroke: #f7ca18;
}
@media only screen and (max-width:1024px) {
nav .mobile-nav {
display: block;
}
}
nav .mobile-nav svg line {
stroke: #fff;
stroke-width: 2px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.page-nav {
position: fixed;
left: 2.5%;
top: 50%;
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity=0);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
z-index: 99;
}
@media only screen and (max-width:1024px) {
.page-nav {
display: none;
}
}
.page-nav.as-active {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
}
.page-nav ul {
margin: 0;
list-style: none;
}
.page-nav ul li {
display: block;
height: 22px;
margin: 0;
}
.page-nav ul a {
text-decoration: none;
}
.page-nav ul a:hover .dot-title {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
}
.page-nav ul a:hover .dot {
background: #f0d416;
}
.page-nav ul a .dot-title {
margin-left: 0.25em;
color: #323a45;
font-size: 0.875em;
font-weight: 700;
font-style: normal;
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity=0);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.page-nav ul a .dot {
display: inline-block;
width: 10px;
height: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px solid #11838d;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.page-nav ul a .dot.as-active {
background: #11838d;
}
header {
position: relative;
height: 100%;
min-height: 420px;
background: url("frankfurt_by_night.jpg");
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
@media only screen and (max-width:1024px) {
header {
background-attachment: scroll;
}
}
header .title {
position: fixed;
top: 50%;
padding: 0;
-webkit-transform: translateY(-30%) translateX(-50%);
-moz-transform: translateY(-30%) translateX(-50%);
-o-transform: translateY(-30%) translateX(-50%);
-ms-transform: translateY(-30%) translateX(-50%);
transform: translateY(-30%) translateX(-50%);
}
@media only screen and (max-width:1024px) {
header .title {
position: absolute;
}
}
@media only screen and (max-width:768px) {
header .title {
top: 30%;
-webkit-transform: translateY(0%) translateX(-50%);
-moz-transform: translateY(0%) translateX(-50%);
-o-transform: translateY(0%) translateX(-50%);
-ms-transform: translateY(0%) translateX(-50%);
transform: translateY(0%) translateX(-50%);
}
}
header .landscape-left {
background-image: url("landscape-left.png");
height: 100%;
width: 100%;
bottom: -15%;
position: fixed;
min-height: 700px;
background-position: left bottom;
background-repeat: no-repeat;
-moz-opacity: 0.65;
-khtml-opacity: 0.65;
-webkit-opacity: 0.65;
opacity: 0.65;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=65);
filter: alpha(opacity=65);
}
@media only screen and (max-width:1024px) {
header .landscape-left {
position: absolute;
bottom: -25%;
left: -5%;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
-webkit-opacity: 0.3;
opacity: 0.3;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
filter: alpha(opacity=30);
}
}
@media only screen and (max-width:768px) {
header .landscape-left {
bottom: -50%;
background-position: left top;
}
}
@media only screen and (max-width:1024px) {
header .landscape-right {
position: absolute;
bottom: -25%;
right: -15%;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
-webkit-opacity: 0.3;
opacity: 0.3;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
filter: alpha(opacity=30);
}
}
@media only screen and (max-width:768px) {
header .landscape-right {
display: none;
}
}
header h1 {
display: block;
width: 100%;
margin: 1.5em auto 3em;
font-size: 2.25em;
text-transform: none;

font-weight: 300;
font-style: normal;
line-height: 140%;
}
@media only screen and (max-width:768px) {
header h1 {
font-size: 1.75em;
}
}
header .arrow-down {
width: 80px;
height: 80px;
margin: 3em auto 0;
}
@media only screen and (max-width:768px) {
header .arrow-down {
display: none;
}
}
section {
position: relative;
background: #fff;
overflow: hidden;
}
section h1,section h2, section h3{width: 100%; max-width: 768px; line-height: 110%;}
section h1 {margin: 0 auto 1.25em; font-weight: 400; font-size: 2.75em; text-transform: uppercase;}
@media only screen and (max-width:1024px) {
section h3 {
text-align: center;
}
}
section h2 {
font-size: 1.5em;
}
}
section h3 {
margin-bottom: 1em;
color: #323a45;
font-weight: 300;
font-style: normal;
font-size: 1.5em;
line-height: 1.5em;
}
section p {
width: 100%;
max-width: 800px;
margin-bottom: 1.25em;

font-weight: 300;
font-style: normal;
font-size: 1.25em;
line-height: 1.55em;
color: #323a45;
}
section p.small {
font-size: 1.125em;
}
section ul {
list-style: none;
margin-bottom: 3em;
}
section ul li {
font-weight: 600;
margin: 0 0 15px 0;
}
section ul li i {
margin-right: 0.25em;
color: #F3BD00;
}
article {
position: relative;
padding: 5em 3em;
}
@media only screen and (max-width:768px) {
article {
padding: 3em 0;
}
}
article.teaser {
text-align: center;
}
article.teaser h1,
article.teaser h2,
article.teaser h3,
article.teaser p {
margin: 0 auto 1.25em;
}
article.headline {
text-align: center;
min-height: 620px;
background-color: #fff;
}
article.headline h1, article.headline h2, article.headline h3, article.headline p {margin: 0 auto 1.30em;}
article.headline p {font-size: 1.4em; line-height: 1.5em;}
article.item h1 {
margin-bottom: 0.75em;
text-align: left;
}
article.item img {
position: relative;
max-width: 500px;
padding: 0 2em;
}
@media only screen and (max-width:768px) {
article.item img {
max-width: 380px;
padding: 0 0 1em 0;
}
}
article.item img.as-sticky {
position: fixed;
top: 3em;
}
@media only screen and (max-width:768px) {
article.item .btn {
display: block;
margin: 0 auto;
width: 180px;
}
}
article.item-bg {
background: #bff3ff;
}
article.switch-right .col {
float: right !important;
}
article .box {
position: relative;
display: block;
margin: 0 2em 2em;
padding: 1.5em 1em;
background: #323a45;
border: 2px solid #323a45;
text-decoration: none;
}
@media only screen and (max-width:768px) {
article .box {
margin: 0 1em 2em;
}
}
@media only screen and (max-width:768px) {
article .image {
text-align: center;
}
}
article .inner {
padding: 1em;
}
@media only screen and (max-width:1024px) {
.onepager h2 {text-align: center;}
}
.about h2 {
text-align: center;
margin-bottom: 2em;
}
.about .btn {
padding: 1.5em 3em;
font-size: 1.15em;
font-weight: 700;
font-style: normal;
}
@media only screen and (max-width:1024px) {
.fail {
padding: 15% 0 3em;
}
}
@media only screen and (max-width:768px) {
.fail {
padding-top: 20%;
}
}
footer {
position: relative;
padding: 2em 0;
background: #323a45;
font-weight: 400;
font-style: normal;
font-size: 0.9em;
color: #fff;
}
@media only screen and (max-width:768px) {
footer {
text-align: center;
}
}
footer ul {
margin: 0;
list-style: none;
text-align: right;
}
@media only screen and (max-width:768px) {
footer ul {
margin-top: 1em;
text-align: center;
}
}
footer ul li {
display: inline-block;
margin: 0 0.2em;
}
footer ul a {
font-size: 1em;
font-weight: 400;
font-style: normal;
text-transform: none;
letter-spacing: 0px;
text-decoration: none;
color: #fff;
}
footer ul a:hover {
color: #f7ca18;
}
footer b {

font-weight: 600;
font-style: normal;
}
footer em {

font-weight: 300;
font-style: normal;
}

@keyframes circle-full {
from {
stroke-dashoffset: 500;
}
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes circle-full {
from {
stroke-dashoffset: 500;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes circle-none {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 500;
}
}
@-webkit-keyframes circle-none {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 500;
}
}
@keyframes loader {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@-webkit-keyframes loader {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.ie8 {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #323A45;
z-index: 99999999;
padding: 15%;
color: #fff;
text-align: center;
font-size: 24px;
line-height: 36px;
}