/*///////////////////////////////////////////////////////
// CSS Startseite & Ausbildungsfinder
//////////////////////////////////////////////////////*/

/* pt-sans-regular - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/pt-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/pt-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/pt-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/pt-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/pt-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/pt-sans-v17-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-italic - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/pt-sans-v17-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/pt-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/pt-sans-v17-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/pt-sans-v17-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/pt-sans-v17-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/pt-sans-v17-latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-700 - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/pt-sans-v17-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/pt-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/pt-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/pt-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/pt-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/pt-sans-v17-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-700italic - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/pt-sans-v17-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/pt-sans-v17-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/pt-sans-v17-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/pt-sans-v17-latin-700italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/pt-sans-v17-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/pt-sans-v17-latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
}


@font-face {
    font-family: 'DINWeb-CondBold';
    src: url("/ausbildungsfinder/assets/fonts/DINWeb-CondBold.woff") format("woff")
}
[ng-controller="IndexCtrl"] h1,
[ng-controller="IndexCtrl"] h3,
[ng-controller="IndexCtrl"] .search input::-webkit-input-placeholder,
[ng-controller="IndexCtrl"] .benefits .columns .caption,
[ng-controller="BfQuestionCtrl"] .navigator .previous,
[ng-controller="BfQuestionCtrl"] .navigator .current,
[ng-controller="BfQuestionCtrl"] .navigator .next,
[ng-controller="BfResultCtrl"] .top .top-result h1,
[ng-controller="BfResultCtrl"] .bottom .more h2,
el-fill-screen .down {
    text-transform: uppercase
}
[ng-controller="IndexCtrl"] h1,
[ng-controller="IndexCtrl"] h3,
[ng-controller="IndexCtrl"] .search input::-moz-placeholder,
[ng-controller="IndexCtrl"] .benefits .columns .caption,
[ng-controller="BfQuestionCtrl"] .navigator .previous,
[ng-controller="BfQuestionCtrl"] .navigator .current,
[ng-controller="BfQuestionCtrl"] .navigator .next,
[ng-controller="BfResultCtrl"] .top .top-result h1,
[ng-controller="BfResultCtrl"] .bottom .more h2,
el-fill-screen .down {
    text-transform: uppercase
}
[ng-controller="IndexCtrl"] h1,
[ng-controller="IndexCtrl"] h3,
[ng-controller="IndexCtrl"] .search input:-ms-input-placeholder,
[ng-controller="IndexCtrl"] .benefits .columns .caption,
[ng-controller="BfQuestionCtrl"] .navigator .previous,
[ng-controller="BfQuestionCtrl"] .navigator .current,
[ng-controller="BfQuestionCtrl"] .navigator .next,
[ng-controller="BfResultCtrl"] .top .top-result h1,
[ng-controller="BfResultCtrl"] .bottom .more h2,
el-fill-screen .down {
    text-transform: uppercase
}
[ng-controller="IndexCtrl"] h1,
[ng-controller="IndexCtrl"] h3,
[ng-controller="IndexCtrl"] .search input::placeholder,
[ng-controller="IndexCtrl"] .benefits .columns .caption,
[ng-controller="BfQuestionCtrl"] .navigator .previous,
[ng-controller="BfQuestionCtrl"] .navigator .current,
[ng-controller="BfQuestionCtrl"] .navigator .next,
[ng-controller="BfResultCtrl"] .top .top-result h1,
[ng-controller="BfResultCtrl"] .bottom .more h2,
el-fill-screen .down {
    text-transform: uppercase
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name div,
[ng-controller="IndexCtrl"] .benefits .columns {
    text-align: center
}
.x-center {
    position: relative
}
.x-center,
.xy-center,
[ng-controller="IndexCtrl"] .jobs .tiles li .image .icon,
.BfIndexCtrl .circles .circle .icon,
.bf-answer-button svg,
.bf-badge span,
.bf-job-result .panel .head .bar .bf-job-icon svg,
bf-categories-chart .tooltip div,
[ng-controller="IndexCtrl"] .slide .header,
[ng-controller="IndexCtrl"] .slide img.bg {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
[ng-controller="IndexCtrl"] .slide.slide-360 .video-btn .button,
.BfIndexCtrl .buttons .btns .bf-answer-btn,
.BfIndexCtrl .header h1 {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
.BfIndexCtrl .header button.start {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
[ng-controller="BfQuestionCtrl"] .reveal .down,
[ng-controller="BfResultCtrl"] .top img.head {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
.el-ausbildungsfinder-teaser .play,
.el-ausbildungsfinder-teaser video,
.el-ausbildungsfinder-teaser .go-btn {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
.y-center,
.xy-center {
    position: relative
}
.y-center,
.xy-center,
[ng-controller="IndexCtrl"] .jobs .tiles li .image .icon {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
.BfIndexCtrl .circles .circle .icon,
.bf-answer-button svg,
.bf-badge span,
.bf-job-result .panel .head .bar .bf-job-icon svg {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
bf-categories-chart .tooltip div {
    position: relative;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
[ng-controller="IndexCtrl"] .search input+img {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name div,
[ng-controller="BfQuestionCtrl"] .item .question>div .text div,
[ng-controller="BfQuestionCtrl"] .item .question>div .bf-answer-button,
.bf-job-result .panel .head .bar h3 {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
.xy-center,
[ng-controller="IndexCtrl"] .jobs .tiles li .image .icon,
.BfIndexCtrl .circles .circle .icon,
.bf-answer-button svg,
.bf-badge span,
.bf-job-result .panel .head .bar .bf-job-icon svg,
bf-categories-chart .tooltip div {
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}
.gapless-footer,
[ng-controller="BfQuestionCtrl"] .result .progress,
[ng-controller="BfResultCtrl"] {
    margin-bottom: -.57143rem!important
}
.spacing-top-tiny {
    margin-top: .35714rem!important
}
.spacing-top-small {
    margin-top: .71429rem!important
}
.spacing-top-medium {
    margin-top: 1.42857rem!important
}
.spacing-top-large,
.panel {
    margin-top: 2.14286rem!important
}
.spacing-top-huge {
    margin-top: 2.85714rem!important
}
.spacing-bottom-tiny {
    margin-bottom: .35714rem!important
}
.spacing-bottom-small {
    margin-bottom: .71429rem!important
}
.spacing-bottom-medium {
    margin-bottom: 1.42857rem!important
}
.spacing-bottom-large {
    margin-bottom: 2.14286rem!important
}
.spacing-bottom-huge {
    margin-bottom: 2.85714rem!important
}
meta.foundation-version {
    font-family: "/5.5.2/"
}
meta.foundation-mq-small {
    font-family: "/only screen/";
    width: 0
}
meta.foundation-mq-small-only {
    font-family: "/only screen and (max-width: 45.71429em)/";
    width: 0
}
meta.foundation-mq-medium {
    font-family: "/only screen and (min-width:45.78571em)/";
    width: 45.78571em
}
meta.foundation-mq-medium-only {
    font-family: "/only screen and (min-width:45.78571em) and (max-width:73.14286em)/";
    width: 45.78571em
}
meta.foundation-mq-large {
    font-family: "/only screen and (min-width:73.21429em)/";
    width: 73.21429em
}
meta.foundation-mq-large-only {
    font-family: "/only screen and (min-width:73.21429em) and (max-width:102.85714em)/";
    width: 73.21429em
}
meta.foundation-mq-xlarge {
    font-family: "/only screen and (min-width:102.92857em)/";
    width: 102.92857em
}
meta.foundation-mq-xlarge-only {
    font-family: "/only screen and (min-width:102.92857em) and (max-width:137.14286em)/";
    width: 102.92857em
}
meta.foundation-mq-xxlarge {
    font-family: "/only screen and (min-width:137.21429em)/";
    width: 137.21429em
}
meta.foundation-data-attribute-namespace {
    font-family: false
}
body>.row {
    background: url("/ausbildungsfinder/assets/images/bg.jpg")
}
.sticky>* {
    max-width: 85.71429rem;
    margin: auto
}
h1,
h2,
h3,
h4,
h5 {
    line-height: 1
}
h1.subheader,
h2.subheader,
h3.subheader,
h4.subheader,
h5.subheader {
    margin-top: -.71429rem
}
.title-area h1 {
    line-height: 180%!important
}
.cookies {
    position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 200;
    color: #fff  !important;
    font-size: 13px;
    font-weight: 400;
    background-color: #717372 !important;
    padding: 10px 48px 10px 10px;
    display: none;
    margin: 0 !important;
}
.cookie_message {
	float: left;
	padding-right: 15px;
	padding-top: 3px;
}
.cookies a {
    color: #fff !important;
    font-weight: 400;
    text-decoration: underline
}
.cookies .close {
    width: 25px;
	height: 25px;
	right: auto;
	border-radius: 50%;
	color: #fff;
	text-decoration: none !important;
	text-indent: -999em;
	background: url('/ausbildungsfinder/assets/images/check.svg') no-repeat center center / 70% auto #a6a6a6 !important;
	float: left !important;
	display: inline-block !important;
	-webkit-transition: background-color 0.15s;
	-moz-transition: background-color 0.15s;
	-ms-transition: background-color 0.15s;
	-o-transition: background-color 0.15s;
	transition: background-color 0.15s;
}

.cookies .close:hover {
	background: url('/ausbildungsfinder/assets/images/check.svg') no-repeat center center / 70% auto #43CC7C !important;
}

@media (max-width: 1200px) {
	.cookies .close {
		position: absolute;
		right: 15px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

nav a {
    text-decoration: none
}
.panel.dark {
    padding-top: .71429rem;
    padding-bottom: .71429rem;
    background: #6c6c6c;
    border-top: .35714rem solid #5d5d5d;
    color: #FFF
}
.panel.dark a {
    color: #FFF
}
.panel.light {
    background: #FFF;
    border: .07143rem solid #e5e5e5;
    box-shadow: 0 0 .35714rem rgba(0, 0, 0, .13)
}
.panel.light .text,
.panel.light>h3,
.panel.light .head h3 {
    margin: 1.42857rem
}
.panel.light>h3 {
    margin-bottom: 1.07143rem
}
.Impressum h1,
.Datenschutz h1 {
    text-transform: uppercase;
    font-size: 5.35714rem;
    color: #7150e9!important
}
@media only screen and (max-width: 45.71429em) {
    .Impressum h1,
    .Datenschutz h1 {
        font-size: 4.28571rem
    }
}
.Impressum h3,
.Impressum h4,
.Impressum h5,
.Impressum h6,
.Datenschutz h3,
.Datenschutz h4,
.Datenschutz h5,
.Datenschutz h6 {
    font-size: 1.35714rem;
    margin-top: 2.14286rem;
    color: #000
}
@media only screen and (min-width: 45.78571em) and (max-width: 73.14286em) {
    [ng-controller="BfQuestionCtrl"] .result,
    [ng-controller="BfResultCtrl"] .bottom {
        margin: 0 3.57143rem
    }
}
@media only screen and (min-width: 73.21429em) {
    [ng-controller="BfQuestionCtrl"] .result,
    [ng-controller="BfResultCtrl"] .bottom {
        margin: 0 7.14286rem
    }
}
.berufefinder {
    color: #3c3c3c
}
.berufefinder h1,
.berufefinder h2,
.berufefinder h3,
.berufefinder h4,
.berufefinder h5 {
    color: inherit
}
@media only screen and (max-width: 45.71429em) {
    .berufefinder .row {
        padding-left: .57143rem;
        padding-right: .57143rem
    }
}
.berufefinder button.animated,
.berufefinder .button.animated,
.berufefinder .button-animated,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .previous,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .next {
    overflow: hidden;
    opacity: .9999
}
.berufefinder button.animated,
.berufefinder button.animated svg *,
.berufefinder button.animated h3,
.berufefinder .button.animated,
.berufefinder .button.animated svg *,
.berufefinder .button.animated h3,
.berufefinder .button-animated,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .previous,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .next,
.berufefinder .button-animated svg *,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous svg *,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .previous svg *,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next svg *,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .next svg *,
.berufefinder .button-animated h3,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous h3,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .previous h3,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next h3,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .next h3 {
    -webkit-transition: all .3s;
    transition: all .3s
}
.berufefinder button.animated:after,
.berufefinder .button.animated:after,
.berufefinder .button-animated:after,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous:after,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .previous:after,
.berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next:after,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .berufefinder .next:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 0;
    height: 101%;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff
}
.no-touch .berufefinder button.animated:not(.disabled):hover:after,
.no-touch .berufefinder button.animated:not(.disabled):active:after,
.no-touch .berufefinder .button.animated:not(.disabled):hover:after,
.no-touch .berufefinder .button.animated:not(.disabled):active:after,
.no-touch .berufefinder .button-animated:not(.disabled):hover:after,
.no-touch .berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous:not(.disabled):hover:after,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .no-touch .berufefinder .previous:not(.disabled):hover:after,
.no-touch .berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next:not(.disabled):hover:after,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .no-touch .berufefinder .next:not(.disabled):hover:after,
.no-touch .berufefinder .button-animated:not(.disabled):active:after,
.no-touch .berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous:not(.disabled):active:after,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .no-touch .berufefinder .previous:not(.disabled):active:after,
.no-touch .berufefinder [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next:not(.disabled):active:after,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .no-touch .berufefinder .next:not(.disabled):active:after {
    opacity: 1
}
.Datenschutz table {
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: .71429rem
}
.Datenschutz table tr:first-child {
    font-weight: 700
}
.Datenschutz table tr td {
    border: 1px solid #e5e5e5;
    padding: .42857rem
}
.Datenschutz table tr td:first-child {
    width: 15%
}
.Datenschutz table tr td:last-child {
    width: 30%
}
[ng-controller="IndexCtrl"] .slide {
    position: relative;
    height: 100%
}
[ng-controller="IndexCtrl"] .slide .header {
    position: absolute;
    top: 1.42857rem;
    text-align: center;
    width: 80%
}
[ng-controller="IndexCtrl"] .slide img.bg {
    position: absolute;
    bottom: 0;
    max-width: none
}
[ng-controller="IndexCtrl"] .slide.slide-360 {
    background: -webkit-radial-gradient(center, ellipse, #fff 0%, #c2b2fb 100%);
    background: radial-gradient(ellipse at center, #fff 0%, #c2b2fb 100%)
}
[ng-controller="IndexCtrl"] .slide.slide-360 .header {
    margin-top: .71429rem
}
[ng-controller="IndexCtrl"] .slide.slide-360 .header .subheader {
    text-transform: none
}
[ng-controller="IndexCtrl"] .slide.slide-360 .video-btn {
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center
}
[ng-controller="IndexCtrl"] .slide.slide-360 .video-btn h3 {
    color: #fff;
    text-transform: none;
    text-shadow: 0 0 5px #000
}
[ng-controller="IndexCtrl"] .slide.slide-360 .video-btn .button {
    display: block;
    width: 50%;
    margin-top: 1.42857rem;
    text-transform: uppercase
}
[ng-controller="IndexCtrl"] .slide.slide-360 .video-btn .button .arrow {
    display: none
}
[ng-controller="IndexCtrl"] .slide.slide-360 .bg,
[ng-controller="IndexCtrl"] .slide.slide-elvi .bg {
    width: 100%
}
[ng-controller="IndexCtrl"] .search {
    margin-top: 0!important
}
[ng-controller="IndexCtrl"] .search .field {
    position: relative
}
[ng-controller="IndexCtrl"] .search input {
    font-family: "DINWeb-CondBold";
    font-size: 1.28571rem;
    padding: 1.78571rem 1.42857rem
}
[ng-controller="IndexCtrl"] .search input::-webkit-input-placeholder {
    line-height: 1.3
}
[ng-controller="IndexCtrl"] .search input::-moz-placeholder {
    line-height: 1.3
}
[ng-controller="IndexCtrl"] .search input:-ms-input-placeholder {
    line-height: 1.3
}
[ng-controller="IndexCtrl"] .search input::placeholder {
    line-height: 1.3
}
[ng-controller="IndexCtrl"] .search input+img {
    position: absolute;
    right: .71429rem
}
[ng-controller="IndexCtrl"] .search input:valid+img {
    display: none
}
[ng-controller="IndexCtrl"] .search .examples {
    padding-left: 1.42857rem;
    font-size: .85714rem;
    font-weight: 700
}
[ng-controller="IndexCtrl"] .jobs .tiles {
    display: block;
    padding: 0;
    margin: 0
}
[ng-controller="IndexCtrl"] .jobs .tiles:before {
    content: " ";
    display: table
}
[ng-controller="IndexCtrl"] .jobs .tiles:after {
    content: " ";
    display: table;
    clear: both
}
[ng-controller="IndexCtrl"] .jobs .tiles>li {
    display: block;
    float: left;
    height: auto;
    list-style: none;
    padding: 0;
    width: 50%
}
[ng-controller="IndexCtrl"] .jobs .tiles>li:nth-of-type(1n) {
    clear: none
}
[ng-controller="IndexCtrl"] .jobs .tiles>li:nth-of-type(2n+1) {
    clear: both
}
[ng-controller="IndexCtrl"] .jobs .tiles li a {
    text-decoration: none
}
[ng-controller="IndexCtrl"] .jobs .tiles li .image {
    position: relative;
    background: #000
}
[ng-controller="IndexCtrl"] .jobs .tiles li .image img {
    width: 100%
}
[ng-controller="IndexCtrl"] .jobs .tiles li .image img:first-child {
    opacity: .4
}
[ng-controller="IndexCtrl"] .jobs .tiles li .image .icon {
    position: absolute;
    width: 50%;
    max-height: 54%;
    -webkit-transition-property: width height;
    transition-property: width height;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}
[ng-controller="IndexCtrl"] .jobs .tiles li:hover .image .icon {
    width: 50%;
    max-height: 50%
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name {
    height: 3.21429rem;
    line-height: 1
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name div {
    font-family: "DINWeb-CondBold";
    color: #fff
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name.all {
    background: #383838
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name.nat {
    background: #43cc7c
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name.tech {
    background: #2981ca
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name.kauf {
    background: #7150e9
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name.it {
    background: #24c2c4
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name.study {
    background: #565656
}
[ng-controller="IndexCtrl"] .jobs .tiles li .name.gastro {
    background: #e84494
}
[ng-controller="IndexCtrl"] .kmu .map {
    width: 100%
}
[ng-controller="IndexCtrl"] .benefits>div:first-of-type .columns {
    border-top: .07143rem solid #ebf
}
[ng-controller="IndexCtrl"] .benefits>div:not(:last-of-type) .columns {
    border-bottom: .07143rem solid #ebf
}
[ng-controller="IndexCtrl"] .benefits>div>div:first-of-type {
    border-right: .07143rem solid #ebf
}
[ng-controller="IndexCtrl"] .benefits .columns {
    height: 15.71429rem;
    padding: .71429rem
}
[ng-controller="IndexCtrl"] .benefits .columns .caption,
[ng-controller="IndexCtrl"] .benefits .columns small {
    color: #7150e9
}
[ng-controller="IndexCtrl"] .benefits .columns .caption {
    font-family: "DINWeb-CondBold";
    font-size: 1.28571rem;
    padding-top: 1.42857rem
}
[ng-controller="IndexCtrl"] .benefits .columns .caption strong {
    font-weight: 400;
    font-size: 2.85714rem;
    opacity: 0;
    -webkit-transition: opacity 3s;
    transition: opacity 3s
}
[ng-controller="IndexCtrl"] .benefits .columns .caption strong.visible {
    opacity: 1
}
[ng-controller="IndexCtrl"] .benefits .columns .caption strong,
[ng-controller="IndexCtrl"] .benefits .columns .caption strong span {
    display: inline-block
}
[ng-controller="IndexCtrl"] .benefits .columns small {
    display: inline-block;
    line-height: 150%
}
.peer .BfIndexCtrl .buttons h5:first-child {
    margin-top: 1.42857rem;
    padding-top: 2.85714rem;
    border-top: .07143rem solid #e4e4e4
}
.BfIndexCtrl .buttons h5:after {
    background: rgba(60, 60, 60, .1)!important
}
.BfIndexCtrl .buttons .btns {
    padding-top: 1.42857rem;
    margin-bottom: 2.85714rem;
    border-top: .07143rem solid #e4e4e4;
    border-bottom: .07143rem solid #e4e4e4
}
.BfIndexCtrl .buttons .btns .btn {
    height: 4.71429rem;
    margin-bottom: 1.42857rem
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .circles .job-profile,
    .BfIndexCtrl .circles .kmu,
    .BfIndexCtrl .circles .search,
    .BfIndexCtrl .circles .ranking,
    .BfIndexCtrl .circles .top-job,
    .BfIndexCtrl .circles .social {
        margin-bottom: 2.85714rem
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .circles>.row {
        margin-bottom: 2.85714rem
    }
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .circles .kmu .icon,
    .BfIndexCtrl .circles .top-job .icon {
        height: 2.85714rem
    }
    .BfIndexCtrl .circles .kmu .arrow,
    .BfIndexCtrl .circles .top-job .arrow {
        -webkit-transform: scale(-1, 1) rotate(-70deg);
        transform: scale(-1, 1) rotate(-70deg);
        left: 0
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .circles .kmu .icon,
    .BfIndexCtrl .circles .top-job .icon {
        height: 3.92857rem
    }
    .BfIndexCtrl .circles .kmu .arrow,
    .BfIndexCtrl .circles .top-job .arrow {
        -webkit-transform: rotate(-50deg) scale(-1, 1);
        transform: rotate(-50deg) scale(-1, 1);
        left: 25%;
        bottom: -.71429rem
    }
    .BfIndexCtrl .circles .kmu .text,
    .BfIndexCtrl .circles .top-job .text {
        margin-top: 2.14286rem
    }
}
.BfIndexCtrl .circles .job-profile .rank,
.BfIndexCtrl .circles .ranking .rank {
    position: absolute;
    top: 25%;
    width: 100%;
    font-family: "DINWeb-CondBold";
    text-align: center;
    color: #7150e9
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .circles .job-profile .icon,
    .BfIndexCtrl .circles .ranking .icon {
        height: 2.14286rem
    }
    .BfIndexCtrl .circles .job-profile .rank,
    .BfIndexCtrl .circles .ranking .rank {
        font-size: 4.28571rem
    }
    .BfIndexCtrl .circles .job-profile .arrow,
    .BfIndexCtrl .circles .ranking .arrow {
        -webkit-transform: rotate(-70deg);
        transform: rotate(-70deg);
        right: 0
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .circles .job-profile .icon,
    .BfIndexCtrl .circles .ranking .icon {
        height: 2.85714rem
    }
    .BfIndexCtrl .circles .job-profile .rank,
    .BfIndexCtrl .circles .ranking .rank {
        font-size: 6.42857rem
    }
    .BfIndexCtrl .circles .job-profile .arrow,
    .BfIndexCtrl .circles .ranking .arrow {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        left: -3.57143rem;
        top: -.71429rem
    }
    .BfIndexCtrl .circles .job-profile .text,
    .BfIndexCtrl .circles .ranking .text {
        margin-bottom: 2.14286rem
    }
}
.BfIndexCtrl .circles .search .arrow.a2 {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg)
}
.BfIndexCtrl .circles .search .bf-badge span {
    font-size: 1.28571rem
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .circles .search .icon {
        height: 2.5rem
    }
    .BfIndexCtrl .circles .search .arrow.a1 {
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg);
        left: 20%;
        top: -3.57143rem
    }
    .BfIndexCtrl .circles .search .arrow.a2 {
        right: -.71429rem;
        top: -2rem
    }
    .BfIndexCtrl .circles .search .text:last-child {
        margin-top: 1.42857rem
    }
    .BfIndexCtrl .circles .search .bf-badge {
        top: -.35714rem
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .circles .search .icon {
        height: 3.92857rem
    }
    .BfIndexCtrl .circles .search .arrow.a1 {
        -webkit-transform: rotate(70deg) scale(-1, 1);
        transform: rotate(70deg) scale(-1, 1);
        right: -5rem;
        top: -1.28571rem
    }
    .BfIndexCtrl .circles .search .arrow.a2 {
        right: -2.14286rem;
        top: -1.28571rem
    }
    .BfIndexCtrl .circles .search .bf-badge {
        top: .35714rem;
        width: 1.78571rem;
        height: 1.78571rem
    }
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .circles .top-job .icon {
        height: 3.57143rem
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .circles .top-job .icon {
        height: 5.35714rem
    }
}
.BfIndexCtrl .circles .social .arrow {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg)
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .circles .social .icon {
        height: 3.21429rem
    }
    .BfIndexCtrl .circles .social .arrow {
        right: 0
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .circles .social .icon {
        height: 4.28571rem
    }
    .BfIndexCtrl .circles .social .arrow {
        right: -3.57143rem;
        top: -.71429rem
    }
}
.BfIndexCtrl .circles .circle {
    width: 7.85714rem;
    height: 7.85714rem;
    background: #fff;
    border-radius: 50%
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .circles .circle {
        width: 12.64286rem;
        height: 12.64286rem
    }
}
.BfIndexCtrl .circles .arrow {
    position: absolute;
    width: 2.14286rem
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .circles .arrow {
        width: 2.85714rem
    }
}
.BfIndexCtrl .circles .text span {
    display: block;
    margin-bottom: .71429rem;
    font-size: 1.5rem;
    font-family: "DINWeb-CondBold";
    line-height: 110%
}
.BfIndexCtrl .go-btn {
    position: relative;
    margin-top: 2.14286rem
}
/* .BfIndexCtrl .go-btn button.start {
    width: 100%
} */
.BfIndexCtrl .header {
    min-height: 34.28571rem;
    background: -webkit-linear-gradient(bottom, #7150e9 0%, #8d72ee 100%);
    background: linear-gradient(to top, #7150e9 0%, #8d72ee 100%)
}
.BfIndexCtrl .header .glow {
    background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, .6)0%, rgba(255, 255, 255, 0)80%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .6)0%, rgba(255, 255, 255, 0)80%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.BfIndexCtrl .header>img,
.BfIndexCtrl .header ng-transclude>img {
    position: absolute;
    display: block
}
.BfIndexCtrl .header .props {
    width: 100%;
    left: -.71429rem;
    bottom: 2.85714rem
}
.BfIndexCtrl .header .circle-hero {
    position: relative;
    margin: auto;
    background: url('/ausbildungsfinder/assets/images/berufefinder/index/header2017_font.png') no-repeat top center / contain;
    /*
    background: url(/ausbildungsfinder/assets/images/berufefinder/index/header2017.png) no-repeat;
    background-size: contain;
    background-position: top center;
    */
    height: 90%
}
.BfIndexCtrl .header .circle-hero.peer {
    background-image: url(/ausbildungsfinder/assets/images/berufefinder/index/circle_hero_peer.png)
}
.BfIndexCtrl .header h1 {
    color: #fff;
    font-size: 2.35714rem;
    text-align: center
}
.BfIndexCtrl .header button.start {
    position: absolute;
    bottom: 0
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .header .props,
    .BfIndexCtrl .header .tutorial {
        display: none
    }
    .BfIndexCtrl .header .glow {
        height: 50%
    }
    .BfIndexCtrl .header .circle-hero {
        height: 55vh;
        margin-top: 5%
    }
    .BfIndexCtrl .header .bubble {
        display: none
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .header {
        height: 51.85714rem
    }
    .BfIndexCtrl .header .circle-hero {
        margin-top: 1.42857rem
    }
    .BfIndexCtrl .header .bubble {
        width: 25.71429rem;
        right: 4%;
        top: 5%;
        font-size: 1.28571rem;
        padding: 1.21429rem;
        background: #fff;
        font-family: "DINWeb-CondBold";
        line-height: 120%;
        border-radius: .42857rem;
        letter-spacing: .02143rem;
        box-shadow: -.64286rem 1rem .14286rem rgba(0, 0, 0, .2);
        position: absolute
    }
    .BfIndexCtrl .header .bubble .spike {
        position: absolute;
        bottom: -1.42857rem;
        left: 3.57143rem
    }
    .BfIndexCtrl .header .bubble h4 {
        margin-bottom: 1rem;
        font-size: 1.57143rem
    }
    .BfIndexCtrl .header .bubble a {
        color: #7150e9;
        text-decoration: none
    }
    .BfIndexCtrl .header h1 {
        display: none
    }
    .BfIndexCtrl .header button.start {
        font-size: 22px;
/*         padding-left: 7.85714rem;
        padding-right: 7.85714rem */
    }
}
.BfIndexCtrl .peer-rating h1,
.BfIndexCtrl .buttons h1 {
    margin-bottom: 1.42857rem
}
.BfIndexCtrl .peer-rating h3,
.BfIndexCtrl .buttons h3 {
    font-weight: 700;
    font-size: 1.28571rem;
    font-family: "PT Sans", sans-serif;
    line-height: 1.2
}
.BfIndexCtrl .peer-rating h1,
.BfIndexCtrl .peer-rating h3,
.BfIndexCtrl .buttons h1,
.BfIndexCtrl .buttons h3 {
    text-align: center
}
.BfIndexCtrl .peer-rating h5,
.BfIndexCtrl .buttons h5 {
    text-align: center;
    text-transform: uppercase;
    margin-top: 4.07143rem
}
.BfIndexCtrl .peer-rating h5:after,
.BfIndexCtrl .buttons h5:after {
    display: block;
    width: 7.14286rem;
    height: .07143rem;
    margin: auto;
    background: rgba(255, 255, 255, .2);
    content: "";
    margin-top: 1.5rem
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .peer-rating h1,
    .BfIndexCtrl .buttons h1 {
        font-size: 2.57143rem;
        margin-top: 2.85714rem
    }
    .BfIndexCtrl .peer-rating h3,
    .BfIndexCtrl .buttons h3 {
        margin-top: 0;
        margin-bottom: 2.85714rem;
        line-height: 140%
    }
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .peer-rating h1,
    .BfIndexCtrl .buttons h1 {
        margin-top: 2.14286rem;
        font-size: 2.14286rem
    }
    .BfIndexCtrl .peer-rating h3,
    .BfIndexCtrl .buttons h3 {
        margin-bottom: 1.42857rem
    }
    .BfIndexCtrl .peer-rating h5,
    .BfIndexCtrl .buttons h5 {
        display: none
    }
}
.BfIndexCtrl .footer-text .columns {
    margin-top: 2.85714rem
}
.BfIndexCtrl .footer-text .columns h2 {
    padding-top: 1.42857rem;
    padding-bottom: .71429rem;
    font-size: 2.14286rem;
    text-align: center;
    border-top: .07143rem solid #e4e4e4
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl el-fill-screen .reveal {
        display: none
    }
}
.BfIndexCtrl button.start {
	min-width: 250px;
	padding: 1.14286rem 1.42857rem;
	font-size: 22px;
	border-radius: .14286rem;
	background: -webkit-linear-gradient(top, #8d72ee 0%, #896ded 40%, #7b5ceb 60%, #7150e9 100%);
	background: linear-gradient(to bottom, #8d72ee 0%, #896ded 40%, #7b5ceb 60%, #7150e9 100%);
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl button.start {
        border-radius: .14286rem;
        margin-bottom: 4.28571rem
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl button.start {
        margin-bottom: 2.14286rem;
    }
}
.BfIndexCtrl button.start .arrow {
    display: none
}
.no-touch .BfIndexCtrl button.start:hover,
.no-touch .BfIndexCtrl button.start:active {
    color: #7b5ceb
}
.BfIndexCtrl button.start span {
    white-space: nowrap
}
.BfIndexCtrl .header button.start,
.BfIndexCtrl .peer-rating button.start {
    background: -webkit-linear-gradient(top, #ffe471 0%, #ffbd22 100%);
    background: linear-gradient(to bottom, #ffe471 0%, #ffbd22 100%);
    color: #3c3c3c
}
.no-touch .BfIndexCtrl .header button.start:hover,
.no-touch .BfIndexCtrl .peer-rating button.start:hover,
.no-touch .BfIndexCtrl .header button.start:active,
.no-touch .BfIndexCtrl .peer-rating button.start:active {
    color: #3c3c3c
}
.BfIndexCtrl .btns,
.BfIndexCtrl .circles {
    font-size: 1.28571rem;
    line-height: 1.2
}
.BfIndexCtrl .peer-rating {
    color: #fff;
    background: -webkit-linear-gradient(bottom, #7150e9 0%, #8d72ee 100%);
    background: linear-gradient(to top, #7150e9 0%, #8d72ee 100%)
}
.BfIndexCtrl .peer-rating .intro h1 {
    font-size: 2.42857rem
}
.BfIndexCtrl .peer-rating .steps {
    margin-bottom: 4.28571rem!important
}
.BfIndexCtrl .peer-rating .steps li {
    position: relative;
    text-align: center;
    margin-top: 2.14286rem
}
.BfIndexCtrl .peer-rating .steps li h6 {
    background: #fff;
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.28571rem;
    padding: .35714rem 1.42857rem .14286rem 1.42857rem;
    border-radius: 1.07143rem;
    color: #3c3c3c
}
.BfIndexCtrl .peer-rating .steps li .image {
    margin: 1.42857rem auto 2.85714rem auto;
    height: 15.35714rem;
    overflow: visible
}
.BfIndexCtrl .peer-rating .steps li div {
    margin: auto;
    width: 90%;
    font-size: 1.14286rem;
    line-height: 1.2
}
.BfIndexCtrl .peer-rating .steps li .arrow {
    position: absolute
}
.BfIndexCtrl .peer-rating button.start {
    height: auto;
    margin-bottom: 3.5rem
}
@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .peer-rating .intro h1 {
        margin-top: 3.21429rem;
        font-size: 2.14286rem
    }
    .BfIndexCtrl .peer-rating .intro h3 br {
        display: none
    }
    .BfIndexCtrl .peer-rating .steps {
        display: block;
        padding: 0;
        margin: 0 -.71429rem
    }
    .BfIndexCtrl .peer-rating .steps:before {
        content: " ";
        display: table
    }
    .BfIndexCtrl .peer-rating .steps:after {
        content: " ";
        display: table;
        clear: both
    }
    .BfIndexCtrl .peer-rating .steps>li {
        display: block;
        float: left;
        height: auto;
        list-style: none;
        padding: 0 .71429rem 1.42857rem;
        width: 100%
    }
    .BfIndexCtrl .peer-rating .steps>li:nth-of-type(1n) {
        clear: none
    }
    .BfIndexCtrl .peer-rating .steps>li:nth-of-type(1n+1) {
        clear: both
    }
    .BfIndexCtrl .peer-rating .steps li .image {
        margin-bottom: .71429rem
    }
    .BfIndexCtrl .peer-rating .arrow {
        left: 3%;
        -webkit-transform: rotate(-150deg);
        transform: rotate(-150deg);
        width: 4.28571rem
    }
}
@media only screen and (min-width: 45.78571em) and (max-width: 73.14286em) {
    .BfIndexCtrl .peer-rating .steps {
        display: block;
        padding: 0;
        margin: 0 -.71429rem
    }
    .BfIndexCtrl .peer-rating .steps:before {
        content: " ";
        display: table
    }
    .BfIndexCtrl .peer-rating .steps:after {
        content: " ";
        display: table;
        clear: both
    }
    .BfIndexCtrl .peer-rating .steps>li {
        display: block;
        float: left;
        height: auto;
        list-style: none;
        padding: 0 .71429rem 1.42857rem;
        width: 50%
    }
    .BfIndexCtrl .peer-rating .steps>li:nth-of-type(1n) {
        clear: none
    }
    .BfIndexCtrl .peer-rating .steps>li:nth-of-type(2n+1) {
        clear: both
    }
    .BfIndexCtrl .peer-rating .arrow {
        display: none!important
    }
}
@media only screen and (min-width: 73.21429em) {
    .BfIndexCtrl .peer-rating .steps {
        display: block;
        padding: 0;
        margin: 0
    }
    .BfIndexCtrl .peer-rating .steps:before {
        content: " ";
        display: table
    }
    .BfIndexCtrl .peer-rating .steps:after {
        content: " ";
        display: table;
        clear: both
    }
    .BfIndexCtrl .peer-rating .steps>li {
        display: block;
        float: left;
        height: auto;
        list-style: none;
        padding: 0;
        width: 25%
    }
    .BfIndexCtrl .peer-rating .steps>li:nth-of-type(1n) {
        clear: none
    }
    .BfIndexCtrl .peer-rating .steps>li:nth-of-type(4n+1) {
        clear: both
    }
    .BfIndexCtrl .peer-rating .arrow {
        top: 56%;
        right: -10%;
        width: 3.57143rem;
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg)
    }
}
.BfIndexCtrl .tutorial,
.BfIndexCtrl .tutorial .video,
.BfIndexCtrl .tutorial .text,
.BfIndexCtrl .tutorial button.start {
    margin-top: 1.42857rem
}
.BfIndexCtrl .tutorial h3 {
    font-size: 2.57143rem;
    margin-top: .71429rem
}
.BfIndexCtrl .tutorial .text {
    font-size: 1.28571rem;
    font-weight: 700;
    line-height: 1.4
}
.BfIndexCtrl .tutorial .video el-vimeo-player {
    box-shadow: -.14286rem 0 .57143rem rgba(0, 0, 0, .1)
}
.BfIndexCtrl .tutorial .video el-vimeo-player iframe {
    border-radius: .21429rem;
    overflow: hidden
}
.BfIndexCtrl .tutorial button.start {
    display: block
}

.ytWrap {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
}
.ytVideo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ytPreview {
	background: url('/ausbildungsfinder/assets/images/berufefinder/mai_preview.jpg') no-repeat center center / cover;
	z-index: 10;
	cursor: pointer;
}
.videoPreview {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
}
.videoPreview > a {
    position: absolute;
    z-index: 15;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videoPreview > a:before {
    content: "";
    position: absolute;
    z-index: 25;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/ausbildungsfinder/assets/images/icons/icon_play.svg') no-repeat center center / 120px 120px;
}
.videoPreview > a:after {
    content: "";
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}
.videoPreview img {
    object-fit: cover;
}
@media (max-width: 1279px) {
    .videoPreview > a:before {
        background: url('/ausbildungsfinder/assets/images/icons/icon_play.svg') no-repeat center center / 90px 90px;
    }
}






@media only screen and (max-width: 45.71429em) {
    .BfIndexCtrl .tutorial h3,
    .BfIndexCtrl .tutorial .text {
        text-align: center
    }
    .BfIndexCtrl .tutorial h3 {
        font-size: 2.14286rem;
        line-height: 1.3
    }
    .BfIndexCtrl .tutorial button.start {
        margin-top: 2.14286rem;
/*         width: 100% */
    }
}
@media only screen and (min-width: 45.78571em) {
    .BfIndexCtrl .tutorial {
        padding-top: 4.28571rem;
        padding-bottom: 4.28571rem
    }
    .BfIndexCtrl .tutorial h3 {
        margin-bottom: 2.14286rem;
        line-height: 1.3em;
    }
    .BfIndexCtrl .tutorial button.start {
/*         height: 3.21429rem;
        width: 65%; */
        margin-top: 2.85714rem
    }
}
[ng-controller="BfQuestionCtrl"] el-fill-screen {
    min-height: 28.57143rem;
    background: -webkit-radial-gradient(center, ellipse, #e0d8fd 0%, #c2b2fb 100%);
    background: radial-gradient(ellipse at center, #e0d8fd 0%, #c2b2fb 100%)
}
@media only screen and (min-width: 45.78571em) {
    [ng-controller="BfQuestionCtrl"] el-fill-screen {
        height: 40.71429rem;
        overflow: visible
    }
}
[ng-controller="BfQuestionCtrl"] .navigator {
    font-family: "DINWeb-CondBold";
    font-size: 1.14286rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
[ng-controller="BfQuestionCtrl"] .navigator .previous,
[ng-controller="BfQuestionCtrl"] .navigator .current,
[ng-controller="BfQuestionCtrl"] .navigator .next {
    float: left
}
[ng-controller="BfQuestionCtrl"] .navigator .previous,
[ng-controller="BfQuestionCtrl"] .navigator .next {
    position: relative;
    color: #7f7f7f
}
[ng-controller="BfQuestionCtrl"] .navigator .previous:not(.disabled),
[ng-controller="BfQuestionCtrl"] .navigator .next:not(.disabled) {
    cursor: pointer
}
[ng-controller="BfQuestionCtrl"] .navigator .previous.disabled,
[ng-controller="BfQuestionCtrl"] .navigator .next.disabled {
    opacity: .4!important
}
[ng-controller="BfQuestionCtrl"] .navigator .current {
    color: #fff;
    text-align: center;
    background: -webkit-linear-gradient(top, #525151 0%, #525151 50%, #3e3e3e 50%);
    background: linear-gradient(to bottom, #525151 0%, #525151 50%, #3e3e3e 50%)
}
[ng-controller="BfQuestionCtrl"] .top {
    position: absolute;
    top: 0;
    width: 100%
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfQuestionCtrl"] .top {
        z-index: 1
    }
}
[ng-controller="BfQuestionCtrl"] .top .peerInfo {
    background: rgba(255, 255, 255, .5);
    font-family: "DINWeb-CondBold";
    font-size: 1.71429rem;
    padding: .85714rem;
    text-align: center;
    display: none
}
.peer [ng-controller="BfQuestionCtrl"] .top .peerInfo {
    display: block
}
[ng-controller="BfQuestionCtrl"] .top .navigator {
    margin: .92857rem auto;
    width: 18.85714rem;
    z-index: 2
}
@media only screen and (min-width: 45.78571em) {
    [ng-controller="BfQuestionCtrl"] .top .navigator {
        display: none
    }
}
[ng-controller="BfQuestionCtrl"] .top .navigator .previous,
[ng-controller="BfQuestionCtrl"] .top .navigator .current,
[ng-controller="BfQuestionCtrl"] .top .navigator .next {
    height: 2rem;
    padding-top: .42857rem
}
[ng-controller="BfQuestionCtrl"] .top .navigator .previous,
[ng-controller="BfQuestionCtrl"] .top .navigator .next {
    width: 5.5rem;
    z-index: 1
}
[ng-controller="BfQuestionCtrl"] .top .navigator .previous:before,
[ng-controller="BfQuestionCtrl"] .top .navigator .next:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("/ausbildungsfinder/assets/images/berufefinder/question/navigator.svg") no-repeat;
    z-index: -1
}
[ng-controller="BfQuestionCtrl"] .top .navigator .previous {
    padding-right: .57143rem;
    text-align: right
}
[ng-controller="BfQuestionCtrl"] .top .navigator .current {
    width: 7.85714rem
}
[ng-controller="BfQuestionCtrl"] .top .navigator .next {
    padding-left: .57143rem
}
[ng-controller="BfQuestionCtrl"] .top .navigator .next:before {
    -webkit-transform: rotate(180deg) scale(1, -1);
    transform: rotate(180deg) scale(1, -1)
}
[ng-controller="BfQuestionCtrl"] .item {
    height: 100%;
    margin: 0;
    max-width: none;
    width: auto
}
[ng-controller="BfQuestionCtrl"] .item:before {
    content: " ";
    display: table
}
[ng-controller="BfQuestionCtrl"] .item:after {
    content: " ";
    display: table;
    clear: both
}
[ng-controller="BfQuestionCtrl"] .item .columns {
    padding-left: 0;
    padding-right: 0
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfQuestionCtrl"] .item .image {
        height: 80%
    }
    [ng-controller="BfQuestionCtrl"] .item .image img {
        width: auto;
        height: 100%;
        max-width: none;
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}
@media only screen and (min-width: 45.78571em) {
    [ng-controller="BfQuestionCtrl"] .item .image {
        height: 100%
    }
    [ng-controller="BfQuestionCtrl"] .item .image img {
        width: 100%
    }
}
[ng-controller="BfQuestionCtrl"] .item .question>div {
    position: relative;
    margin: auto
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfQuestionCtrl"] .item .question>div {
        width: 65%;
        margin-top: -5.71429rem
    }
    [ng-controller="BfQuestionCtrl"] .item .question>div .navigator {
        display: none
    }
    [ng-controller="BfQuestionCtrl"] .item .question>div .text {
        height: 7.5rem;
        border-radius: .35714rem;
        font-size: 1.71429rem
    }
    [ng-controller="BfQuestionCtrl"] .item .question>div .bf-answer-button {
        position: absolute;
        width: 4.28571rem
    }
    [ng-controller="BfQuestionCtrl"] .item .question>div .bf-answer-button.no {
        left: -3.57143rem
    }
    [ng-controller="BfQuestionCtrl"] .item .question>div .bf-answer-button.yes {
        right: -3.57143rem
    }
}
@media only screen and (min-width: 45.78571em) {
    [ng-controller="BfQuestionCtrl"] .item .question>div {
        margin-top: 20%;
        width: 100%;
        overflow: hidden;
        border-radius: .35714rem
    }
    [ng-controller="BfQuestionCtrl"] .item .question>div .text {
        height: 16.42857rem;
        font-size: 2.5rem
    }
    [ng-controller="BfQuestionCtrl"] .item .question>div .btns>div {
        width: 50%;
        float: left;
        border-radius: 0;
        height: 2.5rem
    }
    [ng-controller="BfQuestionCtrl"] .item .question>div .btns>div .bf-answer-button {
        width: 100%
    }
}
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator {
    height: 2.5rem
}
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .current,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next {
    width: 33.33333%;
    height: 100%;
    text-align: center;
    padding-top: .71429rem
}
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next {
    background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #edebeb 50%);
    background: linear-gradient(to bottom, #fff 0%, #fff 50%, #edebeb 50%)
}
.no-touch [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous:hover:not(.disabled),
.no-touch [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous:active:not(.disabled),
.no-touch [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next:hover:not(.disabled),
.no-touch [ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next:active:not(.disabled) {
    color: #fff
}
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .previous:after,
[ng-controller="BfQuestionCtrl"] .item .question>div .navigator .next:after {
    background: #7f7f7f!important
}
[ng-controller="BfQuestionCtrl"] .item .question>div .text {
    position: relative;
    padding: .71429rem;
    background: #fff;
    font-family: "DINWeb-CondBold";
    line-height: 1.2;
    z-index: 2;
    color: #3e3e3e;
    background: -webkit-linear-gradient(top, #fff 0%, #f1eefc 100%);
    background: linear-gradient(to bottom, #fff 0%, #f1eefc 100%)
}
[ng-controller="BfQuestionCtrl"] .item .question>div .text div {
    text-align: center
}
[ng-controller="BfQuestionCtrl"] .item .question>div .bf-answer-button {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
[ng-controller="BfQuestionCtrl"] .circle {
    position: absolute;
    bottom: -1.78571rem;
    right: 2.85714rem;
    z-index: 2;
    width: 11.07143rem;
    height: 11.07143rem;
    border-radius: 50%;
    padding: 2.71429rem 1.07143rem;
    font-family: "DINWeb-CondBold";
    text-align: center;
    color: #fff;
    background: -webkit-linear-gradient(top, #8d72ee 0%, #7150e9 100%);
    background: linear-gradient(to bottom, #8d72ee 0%, #7150e9 100%)
}
[ng-controller="BfQuestionCtrl"] .circle h2 {
    font-size: 1.28571rem;
    color: #fff
}
[ng-controller="BfQuestionCtrl"] .reveal .down {
    width: auto;
    border-top-left-radius: .64286rem;
    border-top-right-radius: .64286rem;
    padding-left: 2.42857rem
}
[ng-controller="BfQuestionCtrl"] .result {
    margin-top: 3.42857rem
}
[ng-controller="BfQuestionCtrl"] .result .arrow {
    position: absolute;
    right: 1.42857rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
[ng-controller="BfQuestionCtrl"] .result .arrow img {
    height: 1.42857rem
}
[ng-controller="BfQuestionCtrl"] .result .progress {
    margin-top: 1.42857rem;
    cursor: pointer;
    background: -webkit-linear-gradient(top, #8d72ee 0%, #7150e9 100%);
    background: linear-gradient(to bottom, #8d72ee 0%, #7150e9 100%)
}
[ng-controller="BfQuestionCtrl"] .result .progress>.columns {
    padding-top: 1.42857rem;
    padding-bottom: 1.42857rem
}
[ng-controller="BfQuestionCtrl"] .result .progress * {
    color: #fff!important
}
[ng-controller="BfQuestionCtrl"] .result .progress .columns {
    font-family: "DINWeb-CondBold";
    font-size: 1.28571rem
}
[ng-controller="BfQuestionCtrl"] .result .progress .columns h2 {
    text-transform: uppercase
}
[ng-controller="BfQuestionCtrl"] .result .progress .columns .all {
    text-decoration: underline
}
@media only screen and (min-width: 73.21429em) {
    [ng-controller="BfResultCtrl"] .top .top-result {
        margin-left: 90px;
        margin-right: 90px
    }
}
[ng-controller="BfResultCtrl"] .top {
    position: relative;
    overflow: hidden
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .top {
        margin-left: -.71429rem;
        margin-right: -.71429rem
    }
}
[ng-controller="BfResultCtrl"] .top .yellow-gradient {
    position: absolute;
    top: 0;
    left: 0;
    height: 32.85714rem;
    width: 100%;
    background: -webkit-linear-gradient(top, #ffe471 5%, #ffbd22);
    background: linear-gradient(to bottom, #ffe471 5%, #ffbd22)
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .top .yellow-gradient {
        height: 40%
    }
}
[ng-controller="BfResultCtrl"] .top img.head {
    display: block;
    margin-top: -2.85714rem;
    margin-bottom: -3.57143rem
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .top img.head {
        margin-top: 0;
        margin-bottom: -2.14286rem;
        height: 10.71429rem
    }
}
[ng-controller="BfResultCtrl"] .top .back {
    position: absolute;
    top: 1.42857rem;
    left: 2.14286rem;
    cursor: pointer;
    z-index: 2
}
[ng-controller="BfResultCtrl"] .top .top-result {
    position: relative;
    background-size: cover;
    padding-bottom: 1.78571rem;
    text-align: center
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .top .top-result {
        background-image: url(/ausbildungsfinder/assets/images/berufefinder/result/header_bg_mobile.png);
        background: rgb(255,255,255);
        background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(214,206,255,1) 100%);
        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(214,206,255,1) 100%);
        background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(214,206,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6ceff',GradientType=0 );
        margin-top: -3.92857rem;
        padding-top: 4.28571rem
    }
}
@media only screen and (min-width: 45.78571em) {
    [ng-controller="BfResultCtrl"] .top .top-result {
        background-image: url(/ausbildungsfinder/assets/images/berufefinder/result/header_bg_desktop.png);
        background: rgb(255,255,255);
        background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(214,206,255,1) 100%);
        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(214,206,255,1) 100%);
        background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(214,206,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6ceff',GradientType=0 );
        margin-top: -4.64286rem;
        padding-top: 5rem;
        padding-left: 2.85714rem;
        padding-right: 2.85714rem;
        padding-bottom: 4.64286rem
    }
}
@media only screen and (min-width: 45.78571em) and (max-width: 73.14286em) {
    [ng-controller="BfResultCtrl"] .top .top-result {
        margin-left: 40px;
        margin-right: 40px
    }
}
@media (max-width: 460px) {
	[ng-controller="BfResultCtrl"] .top .top-result .column, [ng-controller="BfResultCtrl"] .top .top-result .columns, 
	[ng-controller="BfResultCtrl"] .top .top-result .tutorial {
	    padding-left: 5px;
	    padding-right: 5px;
	}
}
[ng-controller="BfResultCtrl"] .top .top-result .hand {
    position: absolute
}
[ng-controller="BfResultCtrl"] .top .top-result .hand.left {
    top: -6.07143rem;
    left: -3.57143rem
}
[ng-controller="BfResultCtrl"] .top .top-result .hand.right {
    top: -1.42857rem;
    right: -1.78571rem
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .top .top-result .hand.left {
        top: -3.57143rem;
        left: 0
    }
    [ng-controller="BfResultCtrl"] .top .top-result .hand.right {
        top: -1rem;
        right: -1.42857rem;
        height: 5.71429rem
    }
}
.top-result > .row {
    max-width: 740px;
    margin: 0 auto;
}
[ng-controller="BfResultCtrl"] .top .top-result h1 {
    font-size: 3.42857rem;
    line-height: 1.2;
    letter-spacing: -1px;
    padding-left: 3.57143rem;
    padding-right: 3.57143rem
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .top .top-result h1 {
        font-size: 2.71429rem;
        line-height: 1.1
    }
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result {
    text-align: left;
    margin: 1.07143rem 0 0 0;
/*     border: solid rgba(62, 62, 62, .1);
    border-width: .07143rem 0 .07143rem 0; */
    padding: 1.42857rem 0;
    background: 0 0;
    -webkit-transition: background .5s;
    transition: background .5s
}
.resultInnerWrap {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result.disclosed .bar.nat h3 {
    color: #43cc7c
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result.disclosed .bar.tech h3 {
    color: #2981ca
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result.disclosed .bar.kauf h3 {
    color: #7150e9
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result.disclosed .bar.it h3 {
    color: #24c2c4
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result.disclosed .bar.study h3 {
    color: #565656
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result.disclosed .bar.gastro h3 {
    color: #e84494
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result.disclosed .bar h3 {
    padding-bottom: .71429rem
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result:hover h3 {
    color: #000
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result .head h3 {
    font-size: 2.14286rem;
    text-align: center;
    padding-top: .21429rem;
    padding-left: 16%;
    -webkit-transform: none;
    transform: none;
    top: auto;
    float: none;
    display: inline-block;
    padding: 20px 0 0 0 !important;
    margin: 0;
    color: #4f4f4f !important;
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result .head .bf-job-icon {
    background: 0 0!important;
    display: inline-block;
    float: none !important;
    width: 50px;
    height: 50px;
    margin: 0;
    bottom: -10px;
    position: relative;
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result .head .bf-job-icon svg {
    -webkit-transform: none;
    transform: none;
    top: 0
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result .head .bar {
    height: auto;
    padding: 0px 0px 50px 0px;
    text-align: center;
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result .head .bar:after,
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result .head .image:first-child {
    background: 0 0!important;
    display: none
}
[ng-controller="BfResultCtrl"] .top .top-result .bf-job-result .panel {
    box-shadow: none;
    background: 0 0
}
[ng-controller="BfResultCtrl"] .top .top-result .jump-to-list {
    display: block;
    margin-bottom: 1.07143rem;
    text-align: center;
    padding: 5px 0px 30px 0px;
    text-decoration: none;
    font-weight: 400;
    font-size: 15px;
    border-bottom: 1px solid rgba(62, 62, 62, .1);
}
.sectionHeader h5 {
    font-size: 26px;
    max-width: 500px;
    line-height: 1.25em;
    margin: 0 auto;
    padding: 20px 0px 0px 0px;
}
.bf-social-invites {
    margin-top: 30px;
}
.btnRow .fb {
    padding: 0px 5px 0px 0px !important;
}
.btnRow .wa, .btnRow .email {
    padding: 0px 0px 0px 5px !important;
}
[ng-controller="BfResultCtrl"] .top .top-result .tutorial {
    margin-top: 2rem;
    padding: 0
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .top .top-result .tutorial {
        margin-top: 2.14286rem;
        padding-left: 1.85714rem;
        padding-right: 1.85714rem
    }
}
[ng-controller="BfResultCtrl"] .top .top-result .tutorial .video {
    margin-top: 4.28571rem;
    box-shadow: .14286rem .14286rem .57143rem rgba(0, 0, 0, .1)
}
[ng-controller="BfResultCtrl"] .top .top-result .tutorial .video el-vimeo-player iframe {
    border-radius: .21429rem;
    overflow: hidden
}
[ng-controller="BfResultCtrl"] .top .top-result .tutorial .bubble {
    position: absolute;
    top: -65px;
    right: 0;
    z-index: 20;
	right: 20px;
}
[ng-controller="BfResultCtrl"] .top .top-result .privacy {
    margin-top: 3.21429rem;
    color: #7656ea;
    font-size: 1rem;
    line-height: 1.4;
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .top .top-result .privacy {
        margin-top: 2.5rem
    }
}
[ng-controller="BfResultCtrl"] .bottom .explanation {
    background: #fff
}
@media only screen and (min-width: 45.78571em) {
    [ng-controller="BfResultCtrl"] .bottom .explanation {
        padding-left: 40px;
        padding-right: 40px
    }
}
[ng-controller="BfResultCtrl"] .bottom .more h3 {
    font-size: 1.28571rem;
    color: #7f7f7f;
    padding-bottom: .5rem;
    border-bottom: .07143rem solid #e4e4e4
}
[ng-controller="BfResultCtrl"] .bottom .more h2 {
    font-size: 1.5rem
}
@media only screen and (min-width: 45.78571em) {
    [ng-controller="BfResultCtrl"] .bottom .more .categories .chart {
        margin-bottom: 1.42857rem
    }
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .chart canvas {
    width: 100%!important;
    height: 10.71429rem!important
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul {
    list-style-type: none;
    position: relative
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul li {
    font-family: "DINWeb-CondBold";
    font-size: 1.28571rem;
    cursor: pointer
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul li:before {
    content: '\2022';
    position: absolute;
    margin-left: -1.42857rem;
    margin-top: -.35714rem;
    font-size: 1.78571rem
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul li.nat:before {
    color: #43cc7c
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul li.tech:before {
    color: #2981ca
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul li.kauf:before {
    color: #7150e9
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul li.it:before {
    color: #24c2c4
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul li.study:before {
    color: #565656
}
[ng-controller="BfResultCtrl"] .bottom .more .categories .key ul li.gastro:before {
    color: #e84494
}
[ng-controller="BfResultCtrl"] .bottom .more .selectedCategory {
    max-height: 0;
    overflow: hidden
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .bottom .more .selectedCategory {
        -webkit-transition: max-height .3s;
        transition: max-height .3s
    }
}
[ng-controller="BfResultCtrl"] .bottom .more .selectedCategory.revealed {
    max-height: 10.71429rem
}
[ng-controller="BfResultCtrl"] .bottom .more .profile {
    padding: 0 .71429rem 1.42857rem 0
}
[ng-controller="BfResultCtrl"] .peer-start {
    background: #6f7274;
    background: -webkit-linear-gradient(top, #8d72ee 0%, #7150e9 100%);
    background: linear-gradient(to bottom, #8d72ee 0%, #7150e9 100%)
}
[ng-controller="BfResultCtrl"] .peer-start>.columns {
    padding-top: 1.42857rem;
    padding-bottom: 1.42857rem
}
[ng-controller="BfResultCtrl"] .peer-start * {
    color: #fff!important
}
@media only screen and (max-width: 45.71429em) {
    [ng-controller="BfResultCtrl"] .peer-start h5 {
        margin-top: 1.42857rem
    }
    [ng-controller="BfResultCtrl"] .peer-start>div:first-child .small-12 {
        padding-left: 0;
        padding-right: 0;
        margin-top: .71429rem
    }
    [ng-controller="BfResultCtrl"] .peer-start>div:first-child .small-6 {
        margin-bottom: .71429rem
    }
    [ng-controller="BfResultCtrl"] .peer-start h5 {
        padding-bottom: .35714rem;
        border-color: rgba(228, 228, 228, .2)!important;
        border-bottom: .07143rem solid #e4e4e4
    }
    [ng-controller="BfResultCtrl"] .peer-start .small div {
        display: inline
    }
}
@media only screen and (min-width: 45.78571em) {
    [ng-controller="BfResultCtrl"] .peer-start h5 {
        margin: 0
    }
    [ng-controller="BfResultCtrl"] .peer-start h5,
    [ng-controller="BfResultCtrl"] .peer-start .small div {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}
[ng-controller="BfResultCtrl"] .peer-start .button {
    border-radius: .14286rem;
    font-size: 1.28571rem;
    padding: 1.14286rem
}
[ng-controller="BfResultCtrl"] .peer-start .button.white {
    background: #fff
}
[ng-controller="BfResultCtrl"] .peer-start .button.white:not(:hover):not(:active) {
    color: #6f7274!important
}
[ng-controller="BfResultCtrl"] .peer-start .button.white:after {
    background: #95989a!important
}
[ng-controller="BfResultCtrl"] .peer-start .button span {
    color: inherit!important
}
[ng-controller="BfResultCtrl"] .peer-start .button .arrow {
    display: none
}
[ng-controller="BfResultCtrl"] .peer-start .small {
    font-size: .85714rem
}
[ng-controller="BfResultCtrl"] .job-list {
    margin-top: 5rem
}
button,
.button {
    padding: .78571rem 1rem;
    background: -webkit-linear-gradient(top, #7f7f7f 50%, #707070 50%);
    background: linear-gradient(to bottom, #7f7f7f 50%, #707070 50%)
}
button .arrow,
.button .arrow {
    height: 1.07143rem;
    padding-left: 1.42857rem
}
button.up .arrow,
.button.up .arrow {
    height: 1.78571rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding: 0 .35714rem
}
button.down .arrow,
.button.down .arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    padding: 0 .71429rem
}
el-fill-screen {
    position: relative;
    display: block;
    /*max-height: 55rem;*/
    overflow: hidden;
    margin: 0 -.71429rem;
    max-width: none;
    width: auto
}
el-fill-screen:before,
el-fill-screen:after {
    content: " ";
    display: table
}
el-fill-screen:after {
    clear: both
}
el-fill-screen .reveal {
    position: absolute;
    bottom: 0;
    width: 100%
}
el-fill-screen .down {
    width: 100%;
    padding: .71429rem 0 .35714rem 0;
    font-size: 1.28571rem
}
el-fill-screen .down .arrow {
    padding: 0 1.07143rem;
    height: .85714rem
}
el-vimeo-player {
    display: block
}
el-vimeo-player iframe {
    border: 0
}
.el-ausbildungsfinder-teaser .bg {
    height: 75%
}
.el-ausbildungsfinder-teaser .play {
    height: 10%;
    bottom: 34%;
    cursor: pointer;
    -webkit-transition: height .3s, bottom .3s;
    transition: height .3s, bottom .3s
}
.no-touch .el-ausbildungsfinder-teaser .play:hover:not(.disabled),
.no-touch .el-ausbildungsfinder-teaser .play:active:not(.disabled) {
    height: 13%;
    bottom: 32%
}
.el-ausbildungsfinder-teaser .award {
    position: absolute;
    height: 24%;
    top: 56%;
    right: 5%
}
.el-ausbildungsfinder-teaser video {
    height: 0;
    width: 0;
    z-index: -1;
    bottom: 34%
}
.el-ausbildungsfinder-teaser .go-btn {
    bottom: 10%
}
.el-ausbildungsfinder-teaser .go-btn span {
    font-size: 1.42857rem
}
.el-ausbildungsfinder-teaser .go-btn .arrow {
    padding-left: 3.57143rem
}
.el-ausbildungsfinder-teaser .play,
.el-ausbildungsfinder-teaser video,
.el-ausbildungsfinder-teaser .go-btn {
    position: absolute
}
#jobsAutocomplete {
    display: none;
    left: -9999px;
    list-style: none;
    margin-left: 0;
    position: absolute;
    background: #FFF;
    border: solid 1px #ccc;
    font-size: 1rem;
    height: auto;
    max-height: none;
    width: 100%;
    z-index: 89;
    max-width: 100%
}
#jobsAutocomplete.open {
    display: block
}
#jobsAutocomplete>*:first-child {
    margin-top: 0
}
#jobsAutocomplete>*:last-child {
    margin-bottom: 0
}
#jobsAutocomplete li {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.28571rem;
    margin: 0
}
#jobsAutocomplete li * {
    color: #000;
    text-decoration: none;
    font-family: "DINWeb-CondBold"
}
#jobsAutocomplete li em {
    display: block;
    cursor: auto;
    padding: .5rem
}
#jobsAutocomplete li:hover,
#jobsAutocomplete li:focus {
    background: #EEE
}
#jobsAutocomplete li.radius {
    border-radius: 8px
}
#jobsAutocomplete li a {
    display: block;
    padding: .5rem;
    color: #555
}
.bf-answer-button {
    width: 5.14286rem;
    height: 4.71429rem;
    border-radius: .64286rem
}
.bf-answer-button.no {
    background: -webkit-linear-gradient(top, #fc6969 0%, #fc4e4e 100%);
    background: linear-gradient(to bottom, #fc6969 0%, #fc4e4e 100%)
}
.no-touch .bf-answer-button.no:hover:not(.disabled) polygon,
.no-touch .bf-answer-button.no:active:not(.disabled) polygon {
    fill: #fc4e4e
}
.bf-answer-button.yes {
    background: -webkit-linear-gradient(top, #05e564 0%, #00d259 100%);
    background: linear-gradient(to bottom, #05e564 0%, #00d259 100%)
}
.no-touch .bf-answer-button.yes:hover:not(.disabled) path,
.no-touch .bf-answer-button.yes:active:not(.disabled) path {
    fill: #00d259
}
.bf-answer-button.unchecked {
    background: #ccc
}
.bf-badge {
    position: absolute;
    right: 1.78571rem;
    width: 1.64286rem;
    height: 1.64286rem;
    background: #fe7575;
    border-radius: 50%;
    color: #fff
}
.bf-badge span {
    display: inline-block;
    font-size: 1.28571rem;
    font-family: "DINWeb-CondBold";
    line-height: 1
}
.bf-job-result {
    color: #525151;
    margin-top: .71429rem
}
@media only screen and (min-width: 45.78571em) {
    .bf-job-result {
        margin-bottom: .71429rem
    }
}
.bf-job-result.disclosed .panel .head .image:last-child,
.bf-job-result .panel .image,
.bf-job-result .panel .video {
    padding-bottom: 56.25%
}
.bf-job-result.disclosed .panel .head .bar:after,
.no-touch .bf-job-result:hover .panel .head .bar:after,
.no-touch .bf-job-result:active .panel .head .bar:after {
    opacity: 1
}
.bf-job-result.disclosed h3,
.no-touch .bf-job-result:hover h3,
.no-touch .bf-job-result:active h3 {
    color: #fff
}
.bf-job-result.disclosed .panel .head .image:first-child {
    padding-bottom: 0
}
.bf-job-result.disclosed .panel .info {
    max-height: 42.85714rem;
    background: #fff;
}
.bf-job-result:not(.disclosed) .panel .head .image:last-child {
    background-image: none!important
}
.bf-job-result .panel {
    margin-top: 0!important;
    border: none;
    box-shadow: 0 0 .35714rem 0 rgba(3, 3, 3, .1)
}
.bf-job-result .panel:hover .head .bf-job-icon svg {
    width: 60%;
    max-height: 70%
}
.bf-job-result.disclosed .panel .info .text {
    font-size: 16px;
    line-height: 1.4em;
}
@media only screen and (max-width: 45.71429em) {
    .bf-job-result .panel .head .image:first-child {
        display: none;
        background-image: none!important
    }
}
.bf-job-result .panel .image,
.bf-job-result .panel .video {
    height: 0
}
.bf-job-result .panel .image {
    background-position: center top;
    background-size: cover
}
.bf-job-result .panel .image:last-child {
    padding-bottom: 0
}
.bf-job-result .panel .head {
    position: relative;
    cursor: pointer
}
.bf-job-result .panel .head .image {
    -webkit-transition: padding-bottom .3s;
    transition: padding-bottom .3s
}
.bf-job-result .panel .head .bar {
    height: 4.28571rem;
    position: relative;
    overflow: hidden
}
.bf-job-result .panel .head .bar.nat:after {
    left: -1px;
    background: -webkit-linear-gradient(top, #43cc7c 0%, #43cc7c 50%, #34c16f 50%);
    background: linear-gradient(to bottom, #43cc7c 0%, #43cc7c 50%, #34c16f 50%)
}
.bf-job-result .panel .head .bar.nat .bf-job-icon {
    background: -webkit-linear-gradient(top, #e1ffed 0%, #e1ffed 50%, #cffce1 50%);
    background: linear-gradient(to bottom, #e1ffed 0%, #e1ffed 50%, #cffce1 50%)
}
.bf-job-result .panel .head .bar.nat .bf-job-icon svg path {
    fill: #43cc7c
}
.bf-job-result .panel .head .bar.tech:after {
    left: -1px;
    background: -webkit-linear-gradient(top, #2981ca 0%, #2981ca 50%, #2573b5 50%);
    background: linear-gradient(to bottom, #2981ca 0%, #2981ca 50%, #2573b5 50%)
}
.bf-job-result .panel .head .bar.tech .bf-job-icon {
    background: -webkit-linear-gradient(top, #e9f2fa 0%, #e9f2fa 50%, #d5e6f5 50%);
    background: linear-gradient(to bottom, #e9f2fa 0%, #e9f2fa 50%, #d5e6f5 50%);
}
/*.bf-job-result .panel .head .bar.tech .bf-job-icon:empty {
    display: none;
}*/
.bf-job-result .panel .head .bar.tech .bf-job-icon svg path {
    fill: #2981ca
}
.bf-job-result .panel .head .bar.kauf:after {
    left: -1px;
    background: -webkit-linear-gradient(top, #7150e9 0%, #7150e9 50%, #5f39e6 50%);
    background: linear-gradient(to bottom, #7150e9 0%, #7150e9 50%, #5f39e6 50%)
}
.bf-job-result .panel .head .bar.kauf .bf-job-icon {
    background: -webkit-linear-gradient(top, #f1edfd 0%, #f1edfd 50%, #e7e1f9 50%);
    background: linear-gradient(to bottom, #f1edfd 0%, #f1edfd 50%, #e7e1f9 50%)
}
.bf-job-result .panel .head .bar.kauf .bf-job-icon svg path {
    fill: #7150e9
}
.bf-job-result .panel .head .bar.it:after {
    left: -1px;
    background: -webkit-linear-gradient(top, #24c2c4 0%, #24c2c4 50%, #20adae 50%);
    background: linear-gradient(to bottom, #24c2c4 0%, #24c2c4 50%, #20adae 50%)
}
.bf-job-result .panel .head .bar.it .bf-job-icon {
    background: -webkit-linear-gradient(top, #e9f9f9 0%, #e9f9f9 50%, #d5f3f4 50%);
    background: linear-gradient(to bottom, #e9f9f9 0%, #e9f9f9 50%, #d5f3f4 50%)
}
.bf-job-result .panel .head .bar.it .bf-job-icon svg path {
    fill: #24c2c4
}
.bf-job-result .panel .head .bar.study:after {
    left: -1px;
    background: -webkit-linear-gradient(top, #565656 0%, #565656 50%, #494949 50%);
    background: linear-gradient(to bottom, #565656 0%, #565656 50%, #494949 50%)
}
.bf-job-result .panel .head .bar.study .bf-job-icon {
    background: -webkit-linear-gradient(top, #565656 0%, #565656 50%, #565656 50%);
    background: linear-gradient(to bottom, #565656 0%, #565656 50%, #565656 50%)
}
.bf-job-result .panel .head .bar.study .bf-job-icon svg path {
    fill: #565656
}
.bf-job-result .panel .head .bar.gastro:after {
    left: -1px;
    background: -webkit-linear-gradient(top, #e84494 0%, #e84494 50%, #e52d87 50%);
    background: linear-gradient(to bottom, #e84494 0%, #e84494 50%, #e52d87 50%)
}
.bf-job-result .panel .head .bar.gastro .bf-job-icon {
    background: -webkit-linear-gradient(top, #feecf4 0%, #feecf4 50%, #fadbea 50%);
    background: linear-gradient(to bottom, #feecf4 0%, #feecf4 50%, #fadbea 50%)
}
.bf-job-result .panel .head .bar.gastro .bf-job-icon svg path {
    fill: #e84494
}
.bf-job-result .panel .head .bar h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5rem
}
.bf-job-result .panel .head .bar .bf-job-icon {
    width: 4.28571rem;
    height: 4.28571rem;
    margin-left: .71429rem;
    background: -webkit-linear-gradient(top, #525151 0%, #525151 50%, #3e3e3e 50%);
    background: linear-gradient(to bottom, #525151 0%, #525151 50%, #3e3e3e 50%)
}
.bf-job-result-list .bf-job-result .panel .head .bar .bf-job-icon svg {
    width: 50%;
    max-height: 60%;
    margin: 0;
    left: 50%;
    -webkit-transition-property: width height;
    transition-property: width height;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}
.bf-job-result .panel .head .bar .bf-job-icon svg {
    width: 60%;
    max-height: 80%;
    margin: 10% 0 0 0;
    left: auto;
    -webkit-transition-property: width height;
    transition-property: width height;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}
.bf-job-result .panel .head .bar .rank {
    position: absolute;
    right: 5.35714rem;
    top: -2.28571rem;
    font-family: "DINWeb-CondBold";
    color: rgba(0, 0, 0, .05);
    font-size: 8.21429rem;
    letter-spacing: -.35714rem;
    line-height: 1.6;
    display: none
}
.rank .bf-job-result .panel .head .bar .rank {
    display: block
}
.bf-job-result .panel .info {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .5s;
    transition: max-height .5s
}
.bf-job-result .panel .info .text {
    min-height: 0;
    -webkit-transition: min-height .5s;
    transition: min-height .5s
}
@media only screen and (max-width: 45.71429em) {
    .bf-job-result .panel .info .text {
        min-height: 0!important
    }
}
.bf-job-result .panel .info .video {
    position: relative
}
.bf-job-result .panel .info .actions .columns,
.bf-job-result .panel .info .actions a {
    padding: .71429rem 0;
    text-decoration: none
}
.bf-job-result .panel .info .actions .columns:not(:first-child),
.bf-job-result .panel .info .actions a:not(:first-child) {
    border-left: .07143rem solid #e5e5e5
}
.bf-job-result .panel .info .actions .columns img,
.bf-job-result .panel .info .actions a img {
    height: 1.28571rem;
    display: block;
    margin: auto;
    margin-bottom: .92857rem
}
.bf-job-result .panel .info .actions .columns .bf-badge,
.bf-job-result .panel .info .actions a .bf-badge {
    position: absolute;
    top: 0;
    right: 20%
}
.bf-job-result .panel .info .actions .columns div:not(.bf-badge),
.bf-job-result .panel .info .actions a div:not(.bf-badge) {
    font-family: "DINWeb-CondBold";
    text-align: center;
    text-decoration: none;
    color: #525151
}
@media only screen and (max-width: 45.71429em) {
    .bf-job-result-list {
        margin-bottom: 2.5rem!important;
        margin: 0 auto;
        max-width: 85.71429rem;
        width: 100%
    }
    .bf-job-result-list:before {
        content: " ";
        display: table
    }
    .bf-job-result-list:after {
        content: " ";
        display: table;
        clear: both
    }
    .bf-job-result-list ul {
        display: block;
        padding: 0;
        margin: 0 -.71429rem
    }
    .bf-job-result-list ul:before {
        content: " ";
        display: table
    }
    .bf-job-result-list ul:after {
        content: " ";
        display: table;
        clear: both
    }
    .bf-job-result-list ul>li {
        display: block;
        float: left;
        height: auto;
        list-style: none;
        padding: 0 .71429rem 1.42857rem;
        width: 100%
    }
    .bf-job-result-list ul>li:nth-of-type(1n) {
        clear: none
    }
    .bf-job-result-list ul>li:nth-of-type(1n+1) {
        clear: both
    }
}
@media only screen and (min-width: 45.78571em) {
    .bf-job-result-list {
        margin-bottom: 7.14286rem!important;
        margin: 0 -.71429rem;
        max-width: none;
        width: auto
    }
    .bf-job-result-list:before {
        content: " ";
        display: table
    }
    .bf-job-result-list:after {
        content: " ";
        display: table;
        clear: both
    }
}
.bf-job-result-list ul {
    margin: 0!important
}
@media only screen and (min-width: 45.78571em) and (max-width: 73.14286em) {
    .bf-job-result-list ul {
        display: block;
        padding: 0;
        margin: 0 -.71429rem
    }
    .bf-job-result-list ul:before {
        content: " ";
        display: table
    }
    .bf-job-result-list ul:after {
        content: " ";
        display: table;
        clear: both
    }
    .bf-job-result-list ul>li {
        display: block;
        float: left;
        height: auto;
        list-style: none;
        padding: 0 .71429rem 1.42857rem;
        width: 50%
    }
    .bf-job-result-list ul>li:nth-of-type(1n) {
        clear: none
    }
    .bf-job-result-list ul>li:nth-of-type(2n+1) {
        clear: both
    }
}
@media only screen and (min-width: 73.21429em) {
    .bf-job-result-list ul {
        display: block;
        padding: 0;
        margin: 0 -.71429rem
    }
    .bf-job-result-list ul:before {
        content: " ";
        display: table
    }
    .bf-job-result-list ul:after {
        content: " ";
        display: table;
        clear: both
    }
    .bf-job-result-list ul>li {
        display: block;
        float: left;
        height: auto;
        list-style: none;
        padding: 0 .71429rem 1.42857rem;
        width: 33.33333%
    }
    .bf-job-result-list ul>li:nth-of-type(1n) {
        clear: none
    }
    .bf-job-result-list ul>li:nth-of-type(3n+1) {
        clear: both
    }
}
.bf-job-result-list ul li {
    padding-bottom: 0
}
.bf-job-result-list .end {
    margin-top: .71429rem;
    cursor: pointer
}
.bf-job-result-list .end .small-12 {
    height: 100%;
    padding: 1.92857rem;
    background: -webkit-linear-gradient(top, #8d72ee 0%, #7150e9 30%);
    background: linear-gradient(to bottom, #8d72ee 0%, #7150e9 30%)
}
.bf-job-result-list .end .small-12 h2 {
    font-size: 2rem;
    color: #fff
}
.bf-job-result-list .end .small-12 div {
    margin-top: 2.28571rem;
    font-family: "DINWeb-CondBold";
    font-size: 1.57143rem;
    color: #fff
}
.bf-job-result-list .end .small-12 .arrow {
    position: absolute;
    right: 1.42857rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: -1.57143rem
}
.bf-job-result-list .end .small-12 .arrow img {
    height: 1.07143rem
}
bf-item-image {
    opacity: 1;
    -webkit-transition: opacity .1s;
    transition: opacity .1s
}
bf-item-image.loading {
    opacity: 0
}
@media only screen and (max-width: 45.71429em) {
    bf-item-image img[bf-item-id='1'],
    bf-item-image img[bf-item-id='13'] {
        width: 100%!important;
        height: auto!important
    }
    bf-item-image img[bf-item-id='15'] {
        margin-left: -3.21429rem
    }
    bf-item-image img[bf-item-id='18'] {
        max-width: 70%!important;
        height: auto!important;
        position: absolute!important;
        bottom: 5rem
    }
}
@media only screen and (min-width: 45.78571em) {
    bf-item-image img[bf-item-id='1'] {
        position: absolute!important;
        top: -13%
    }
    bf-item-image img[bf-item-id='3'],
    bf-item-image img[bf-item-id='17'] {
        top: -6%
    }
    bf-item-image img[bf-item-id='5'],
    bf-item-image img[bf-item-id='6'],
    bf-item-image img[bf-item-id='20'] {
        top: -5%
    }
    bf-item-image img[bf-item-id='8'] {
        position: absolute!important;
        bottom: 6%
    }
    bf-item-image img[bf-item-id='10'],
    bf-item-image img[bf-item-id='22'],
    bf-item-image img[bf-item-id='23'] {
        top: -3%
    }
    bf-item-image img[bf-item-id='14'],
    bf-item-image img[bf-item-id='19'] {
        top: -4%
    }
    bf-item-image img[bf-item-id='11'],
    bf-item-image img[bf-item-id='15'],
    bf-item-image img[bf-item-id='18'] {
        position: absolute!important;
        bottom: 0
    }
    bf-item-image img[bf-item-id='18'] {
        width: 80%!important
    }
}
.bf-progress {
    position: relative;
    background: -webkit-linear-gradient(top, #525151 0%, #525151 50%, #3e3e3e 50%);
    background: linear-gradient(to bottom, #525151 0%, #525151 50%, #3e3e3e 50%)
}
.bf-progress .meter {
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(top, #8d72ee 0%, #7150e9 100%);
    background: linear-gradient(to bottom, #8d72ee 0%, #7150e9 100%);
    -webkit-transition: width .3s;
    transition: width .3s
}
.bf-progress .text {
    position: relative;
    width: 100%;
    color: #fff;
    font-size: .71429rem;
    line-height: 1;
    text-align: center;
    padding: .10714rem 0
}
bf-categories-chart .tooltip {
    position: absolute;
    background: #fff;
    box-shadow: -.07143rem .07143rem .35714rem rgba(0, 0, 0, .5);
    font-family: "DINWeb-CondBold";
    font-size: 1.28571rem;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    -webkit-transition-timing-function: cubic-bezier(.64, .57, .67, 1.53);
    transition-timing-function: cubic-bezier(.64, .57, .67, 1.53);
    -webkit-transform: scale(0);
    transform: scale(0);
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%
}
bf-categories-chart .tooltip:hover {
    -webkit-transform: scale(1)!important;
    transform: scale(1)!important;
    -webkit-transition-duration: .2s;
    transition-duration: .2s
}
bf-categories-chart .tooltip.revealed {
    -webkit-transform: scale(.7);
    transform: scale(.7)
}
bf-categories-chart .tooltip.max {
    font-size: 2.07143rem;
    width: 3.92857rem;
    height: 3.92857rem;
    border-radius: 50%
}
bf-categories-chart .tooltip.max:hover {
    -webkit-transform: scale(1)!important;
    transform: scale(1)!important;
    -webkit-transition-duration: .2s;
    transition-duration: .2s
}
bf-categories-chart .tooltip.nat {
    color: #43cc7c
}
bf-categories-chart .tooltip.tech {
    color: #2981ca
}
bf-categories-chart .tooltip.kauf {
    color: #7150e9
}
bf-categories-chart .tooltip.it {
    color: #24c2c4
}
bf-categories-chart .tooltip.study {
    color: #565656
}
bf-categories-chart .tooltip.gastro {
    color: #e84494
}
bf-categories-chart .tooltip div {
    top: 53%;
    display: inline-block
}
.bf-social-invites h5 {
    font-size: 1.71429rem;
    line-height: 1.3
}
.bf-social-invites .button {
    background: #fff;
    padding: 1.35714rem 0 1.35714rem 0;
    border-radius: .14286rem;
    box-shadow: .71429rem 1rem .07143rem rgba(0, 0, 0, .06);
    font-size: 1.28571rem
}
.no-touch .bf-social-invites .button:hover:not(.disabled),
.no-touch .bf-social-invites .button:active:not(.disabled) {
    color: #000!important
}
.bf-social-invites .fb .button {
    color: #566ff6
}
.bf-social-invites .wa .button {
    color: #4bc75a
}
.bf-social-invites .email .button {
    color: #3c3c3c
}
.touch .bf-social-invites .email {
    display: none
}
@media only screen and (max-width: 45.71429em) {
    .bf-social-invites h5 {
        margin-bottom: 1.28571rem
    }
    .bf-social-invites .fb {
        padding-left: 0
    }
    .bf-social-invites .wa,
    .bf-social-invites .email {
        padding-right: 0
    }
}
@media only screen and (min-width: 45.78571em) {
    .bf-social-invites h5 {
        margin-top: 2.14286rem;
        margin-bottom: 2rem
    }
    .bf-social-invites .fb {
        padding-right: 1.42857rem
    }
    .bf-social-invites .wa,
    .bf-social-invites .email {
        padding-left: 1.42857rem
    }
}
.bf-social-invites .arrow {
    display: none
}