/**
 * Fonts.
 */
@font-face {
    font-family: 'Futura Std Light';
    src: url('../fonts/futurastd-light.otf'),
         url('../fonts/futurastd-light.woff');
}

@font-face {
    font-family: 'Futura Std Book';
    src: url('../fonts/futurastd-book.otf'),
    url('../fonts/futurastd-book.woff');
}

@font-face {
    font-family: 'Futura Std Bold';
    src: url('../fonts/futurastd-bold.otf'),
    url('../fonts/futurastd-bold.woff');
}

body {
    font-family: 'Futura Std Book', Helvetica, Arial, sans-serif;
    font-weight:normal;
    color: #484848;
    font-size: 14px;
    line-height: 17px;
    margin:0;
    padding:0;
    width: 1px;
    width: 100%;
}
/**
 * Typography.
 */
h1 {
    font-family: 'Futura Std Bold', Helvetica, Arial, sans-serif;
    font-size: 25px;
    line-height: 32px;
    color: #000000;
    margin-bottom:0px;
}

h2 {
    font-family: 'Futura Std Book', Helvetica, Arial, sans-serif;
    font-size:25px;
    color: #000000;
    margin-top:0px;
    margin-bottom: 40px;
}

h3 {
    font-family: 'Futura Std Bold', Helvetica, Arial, sans-serif;
    font-size:18px;
    color: #000000;
    margin-bottom: 10px;
}

h4 {
    margin-bottom: 0px;
}

a {
    color: #46a9b4;
    text-decoration: none;
    transition: color .3s;
}

a:hover {
    color: #006d73;
}

ul {
    padding-left:20px;
    margin:0;
}
li {
    list-style-type:none;
    margin-bottom:15px;
}

b, strong {
    font-family: 'Futura Std Bold', Helvetica, Arial, sans-serif;
    margin-bottom:10px;
}

strong {
    display: block;
}

p {
    margin:10px 0px 0px;
}


/**
 * Layout
 */

#wrapper {
    width: 100%;
    max-width:900px;
    margin:0 auto;
    box-shadow: 0 0px 40px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1);
    padding:65px 0px;
}

header {
    position: fixed;
    top: 0;
    background: white;
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    z-index: 1000;
}
header article {
    margin:20px 50px 5px;
    overflow: hidden;
}
.logo {
    float:right;
    display: block;
    transition: all 0.3s ease;
}
.logo img {
    width: 300px;
    height: 40px;
}
header.sticky article .logo {
    opacity:0;
}
.sticky-title {
    position:fixed;
    opacity:0;
    transition: opacity 0.2s ease 0s;
    background-color: #ffffff;
    width:100%;
    max-width:900px;
    box-sizing: border-box;
    display:table;
}
.sticky-title .title {
    display:table-cell;
    vertical-align: middle;
    width:66.66%;
    padding: 10px 50px;
    background: #46A9B4;
}
.sticky-title h1, .sticky-title h2 {
    color:#ffffff;
    font-size: 25px;
    letter-spacing: 0.5px;
    margin:0;
}
.sticky-logo {
    display:table-cell;
    vertical-align: middle;
    width:33.33%;
    padding-right: 50px;
}
.sticky-logo img {
    width:100%;
    height:auto;
}
header.sticky .sticky-title {
    opacity:1;
}
.header-image img {
    display: block;
    width:100%;
    height:auto;
}
.header-image .mobile {
    display:none;
}
.content {
    margin:0px 50px;
}

section {
    margin:30px 0px;
    clear:both;
}

.multicolumn {
    display:table;
    width:100%;
    table-layout: fixed;
    margin:10px 0px;
}

.multicolumn > * {
    display:table-cell;
    vertical-align: top;
    width:100%;
}

.width-85 {
    width: 85%;
}

.width-80 {
    width:80%;
}

.width-75 {
    width:75%;
}

.width-50 {
    width:50%;
}

.width-66 {
    width:66.666%;
}

.width-33 {
    width:33.333%;
}

.width-25 {
    width:25%;
}

.width-20 {
    width:20%;
}

.width-15 {
    width:15%;
}

.separator {
    width:50px;
}


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

    .multicolumn > * {
        display:block;
        width:100%;
        clear:both;
    }
    .width-80, .width-50 {
        margin-top:20px;
    }
    .separator {
        display: none;
    }
}

/**
 * Navigation
 */
#navigation {
    transition: all 0.3s ease;
    margin-top: 7px;
}

#navigation ul {
    margin:0px;
    padding:0px;
}

#navigation li {
    display:inline;
    padding-right:5px;
}

#navigation li:after {
    padding-left: 5px;
    content:"\007c";
    font-size: 16px;
    line-height: 16px;
}
#navigation li:last-child:after {
    content:"";
}

#navigation li a {
    font-family:"Futura Std Book", Helvetica, Arial, sans-serif;
    color: #000000;
    font-size: 14px;
    line-height: 14px;
    text-decoration: none;
}

#navigation li a:hover {
    color: #46a9b4;
}


/**
 * Content general
 */
.content ul {
    margin:15px 0px 0px;
    padding:0;
}
.content ul li {
    padding-left:15px;
    margin-bottom: 0;
    position: relative;
}
.content ul li:last-child {
    margin-bottom: 0px;
}
.content ul li:before {
    content: "\2022";
    font-size:14px;
    line-height: 14px;
    position: absolute;
    left: 0px;
    top:0px;
}
.image img {
    width:100%;
    height:auto;
}
a.more{
    font-family: 'Futura Std Bold', Helvetica, Arial, sans-serif;
    color: #000000;
    transition: color .3s ease;
    position: relative;
    display:block;
    margin:15px 0px;
}
a.more:hover {
    color:#46A9B4;
}

/**
 * Stats.
 */
.stats {
    background-color: #46A9B4;
    padding:0px 30px;
    margin:20px 0px 40px;
    overflow: auto;
}
.stats .icon {
    vertical-align: top;
}
.stats .icon svg {
    width:100%;
    height:100px;
}
.stats .icon svg > * {
   fill: #fff;
}
.stats .data {
    padding-left:30px;
    padding-top:10px;
}
.stats .data .multicolumn {
    margin-bottom: 20px;
}
.stats .data .multicolumn .separator {
    width:20px;
}
.stats label {
    display: block;
    font-family: "Futura Std Bold", Helvetica, Arial, sans-serif;
    margin-right:20px;
    color:#fff;
    letter-spacing: 0.5px;
}
.stats span {
    color:#fff;
}
@media screen and (max-width: 770px) {
    .stats.multicolumn  .width-50 {
        width:100%;
        display:block;
        margin-top:0px;
    }
    .stats.multicolumn  .width-15 {
        width:10%;
        display:table-cell
    }
    .stats.multicolumn .separator {
        display:none;
    }
    .stats .data {
        padding-left:40px;
    }
    .stats.multicolumn .multicolumn .width-50:first-child {
        width:33%;
        display: table-cell;
    }
    .stats.multicolumn .multicolumn .width-50:last-child {
        width:66%;
        display: table-cell;
    }
    .stats.multicolumn .multicolumn .separator {
        display: table-cell;
    }
}


/**
 * Benefits.
 */
.benefits {
    margin:10px 0px;
    float:left;
}
.benefit {
    float:left;
    margin-right:50px;
    position: relative;
    overflow: hidden;
}
.benefit:hover {
    overflow: visible;
}
.benefit svg {
    width:75px;
    height: 75px;
    cursor: pointer;
}
.benefit svg * {
    fill: #46A9B4;
    transition: all .3s ease;
}
.benefit svg:hover * {
    fill: #C31622;

}
.benefit-data {
    background: #c31622;
    color: #fff !important;
    padding:30px;
    width:auto;
    position: absolute;
    top:50%;
    left:115px;
    opacity:0;
    z-index: 10000;
    transition: all .2s ease;
}
.benefit-data:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    border-width: 40px 40px 0 0;
    border-style: solid;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    top: 0;
    left: -39px;
    -webkit-transform: rotate(180deg) scaleY(-1);
    -ms-transform: rotate(180deg) scaleY(-1);
    transform: rotate(180deg) scaleY(-1);
    border-top-color: #c31622;
}
.benefit-data li {
    margin-bottom:0px;
}
.benefit-data h3 {
    color: #fff;
}
.benefit:hover .benefit-data {
    opacity:1;
    z-index: 2;
}

/**
 * Kontakt.
 */
#kontakt {
    margin-top:160px;
}
#kontakt p {
    margin-bottom:0px;
}
.contact-linkedin, .contact-xing {
    width:20px;
    height:20px;
    display:block;
    float: left;
    margin-right: 10px;
    margin-bottom:40px;
}
.contact-linkedin svg, .contact-xing svg {
    width:100%;
    height:100%;
}
.contact-linkedin svg *, .contact-xing svg * {
    fill: #46A9B4;
    transition: all .3s ease
}
.contact-linkedin:hover svg *, .contact-xing:hover svg * {
    fill: #C31622;
}

/**
 * Video and Map
 */
#video iframe {
    border: 0;
    width: 100%;
    height: auto;
    min-height: 210px;
}
#map iframe {
    width:100%;
}

/**
 * Awards
 */
#awards .multicolumn {
    margin: 20px 0px;
}
#awards .separator {
    width:80px;
}
#awards img {
    margin-right:40px;
    margin-bottom: 15px;
}
.award-icon {
    display:table-cell;
    vertical-align: top;
    width:27%;
}
.award-data {
    display:table-cell;
    vertical-align: top;
    width:70%;
    padding-left:5%;
}
.award-data h4 {
    margin-bottom: 5px;
    font-family: 'Futura Std Light', Helvetica, Arial, sans-serif;
}
.award-data p {
    margin-top:0px;
    font-size:10px;
    line-height:14px;
}
.kununu {
    border:solid 1px #46A9B4;
}

/**
 * More Jobs
*/
#morejobs {
    padding:20px 0px;
    border-top:solid 1px #C8C8C8;
    border-bottom:solid 1px #C8C8C8;
}
#morejobs .multicolumn {
    margin:0px;
}
#morejobs .width-33 {
    padding:40px 0px;
}
#morejobs .separator {
    padding:0px 50px;
    background: url("../images/bg.png");
    background-position: center top;
    background-repeat: repeat-y;
}
#morejobs .separator:last-child {
    display:none;
}
#morejobs a {
    color: #484848;
    display: block;
    cursor: pointer;
}
#morejobs a:hover {
    color: #46a9b4;
}

/**
 * Footer
 */
footer {
    background-color:rgba(255,255,255,0.9);
    float: left;
    margin-left: 0;
    padding: 20px 50px;
    position: fixed;
    bottom: 0;
    max-width: 900px;
    width: 100%;
    z-index: 999;
}
.social-icons {
    float:left;
    margin-top:10px;
}
.social-icons a {
    margin-right: 20px;
    width: 42px;
    height: 42px;
    float:left;
    background-size: cover;
}
.social-icons .ui.popup a {
    width: 36px;
    height: 36px;
}
.social-icons .ui.popup a.xing {
    margin-right:0px;
}
.whatsapp {
    display:none;
}
.social-icons a svg {
    width:100%;
    height:100%;
}
.social-icons a svg * {
    fill: #46A9B4;
    transition: all .3s ease;
}
.social-icons .ui.popup a svg * {
    fill: #ffffff;
}
.social-icons .ui.popup a:hover svg * {
    fill: #ffffff!important;
}
.social-icons a:hover svg * {
    fill: #c31622!important;
}
.social-icons a.internal.link.social svg * {
    fill: #8861A9;
}
.social-icons a.internal.link.social:hover svg * {
    fill: #8861A9!important;
}
.ui.popup {
    box-shadow: none;
    background: #8861A9;
    border-radius: 0px;
    border:none;
    padding:20px;
    left: 190px!important;
    bottom: 90px!important;
}
.ui.top.popup:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    border-width: 40px 40px 0 0;
    border-style: solid;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    left: 0!important;
    bottom: -39px!important;
    border-top-color: #8a5ca5;
    transform: rotate(0deg);
    background: transparent;
    box-shadow:none;
}
.button.apply {
    font-family: 'Futura Std Book', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 35px;
    cursor: pointer;
    float:right;
    border-width: 0 0 5px 0;
    border-style: solid;
    padding: 10px 30px;
    display: inline-block;
    color: white;
    text-decoration: none;
    position: relative;
    will-change: opacity;
    -webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    -webkit-transition-delay: .05s;
    transition-delay: .05s;
    border-color: #761622;
    background-color: #C31622;
    z-index: 10;
}
.button.apply:hover {
    background: #761622;
}

/**
 * Modul Send2Friend
 */
.ui.modal {
    top:30%;
    border-radius: 0px;
    background: transparent;
}
.modal .modal-content {
    width: 100%;
    max-width: 930px;
    margin:0 auto;
    padding:0px;
    position:relative
}
.modal .modal-content:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    border-width: 40px 40px 0 0;
    border-style: solid;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-top-color: #8861a9;
    margin-left: -40px;
    margin-top: 40px;
    bottom: -39px;
    left: 40px;
}
#modal iframe {
    width:100%;
    display:block;
    min-height: 600px;
    overflow: hidden;
}

.modal .modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    width: auto;
    height: auto;
    margin-right: 0;
}
.modal .modal-close i {
    color:#fff;
    transition: all 0.3s ease;
    font-size:28px;
}
.modal .modal-close:hover i {
    color:#573a66;
}
@media screen and (max-width: 670px) {
    .modal.bottom-sheet {
        max-height: 100%;
        z-index: 2;
    }
    .modal .modal-content, #modal iframe {
        height:100%;
    }
}

/**
 * Slicknav menu
 */
.slicknav_menu {
    display: none;
    position: fixed;
    top: 60px;
    right: 0;
    font-size: 16px;
    background: white;
    width: 100%;
    z-index: 100000;
    margin:0;
}
.slicknav_btn {
    position: fixed;
    top: 20px;
    left: 20px;
    display: block;
    cursor: pointer;
}
.slicknav_icon-bar {
    position:absolute;
    display: block;
    width:30px;
    height:2px;
    background:#46A9B4;
    transition: all 0.3s ease;
}
.slicknav_icon-bar:nth-child(1) {
    top:0px;
}
.slicknav_icon-bar:nth-child(2) {
    top:10px;
}
.slicknav_icon-bar:nth-child(3) {
    top:20px;
}
.slicknav_open .slicknav_icon-bar:nth-child(2) {
    display:none;
}
.slicknav_open .slicknav_icon-bar:nth-child(1) {
    top:10px;
    transform: rotate(45grad);
}
.slicknav_open .slicknav_icon-bar:nth-child(3) {
    top:10px;
    transform: rotate(-45grad);
}
.slicknav_nav {
    list-style: none;
    margin:0px;
    padding:0px;
    border-bottom: 1px solid #cccccc;
}
.slicknav_nav li {
    display: block;
    margin:0px;
}
.slicknav_nav li.active {
     background: #46A9B4;
 }
.slicknav_nav li.active a {
    color:#ffffff;
}
.slicknav_nav a {
    padding: 12px 10px 13px 20px;
    margin: 0;
    text-decoration: none;
    color: #46A9B4;
    border-top: 1px solid #cccccc;
    font-size: 14px;
    text-transform: uppercase;
    display: inherit;
}
/**
 * Media Queries
 */
@media screen and (max-width: 668px) {
    header article {
        margin:14px 20px;
    }
    .logo {
        float:right;
    }
    #navigation {
        display: none;
    }
    header {
        height: 60px;
        background: white;
    }
    .slicknav_menu {
        display: block;
    }

    .sticky-title {
        margin-top: 81px;
        font-size: 18px;
        width: 100%;
    }
    header.sticky .sticky-title {
        margin-top: 0px;
        position: fixed;
        top: 65px;
    }
    header.sticky article .logo {
        opacity:1;
    }
    .sticky-logo {
        display: none;
    }
    .content {
        margin:0 20px;
    }
    .benefits {
        float:none;
        margin-top:20px;
    }
    .benefit {
        padding-right: 0px;
        margin-right: 0px;
        float: none;
        display: table;
        margin-bottom: 20px;
    }
    .benefit-data:before {
        display:none;
    }
    .benefit svg {
        float:left;
        width: 50px;
        height: 50px;
    }
    .benefit-data {
        position: relative;
        opacity: 1;
        top: auto;
        background: none;
        left: auto;
        padding: 0 0 0 20px;
        z-index: 1;
        height: 50px;
        display: table-cell;
        vertical-align: middle;
    }
    .benefit-data h3, .benefit-data p {
        color:#484848;
        font-size: 16px;
    }
    #kontakt {
        margin-top:30px;
    }
    #morejobs .width-33 {
        padding:20px 0px;
    }
    footer {
        padding:10px 20px;
    }
    .button.apply {
        width:100%;
        text-align: center;
    }
    .header-image .desktop {
        display:none;
    }
    .header-image .mobile {
        display:block;
    }
    .social-icons a {
        width: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 420px) {
    body {
        font-size: 14px;
    }
    #wrapper {
        padding-top: 60px;
        padding-bottom: 130px;
    }
    h1 {
        font-size: 22px;
    }
    h2 {
        font-size: 16px;
    }
    .logo img {
        width:250px;
        height:auto;
    }
    #video {
        margin-bottom:10px;
    }
    .slick-slider {
        margin-bottom:20px;
    }
    #map iframe {
        height: 240px;
    }
    .stats .data {
        padding-top:0;
    }
    .stats.multicolumn .width-20 {
        width:20%;
    }
    .stats.multicolumn .multicolumn .separator {
        display:none;
    }
    .stats.multicolumn .multicolumn .width-50 {
        width:100%!important;
        display:block!important;
    }
}

.print-only, .no-show {
    display:none;
}