/*
Theme Name: Deichmann Karriere
Description: Child von Blank Slate
Template: blankslate
*/
@import url("../blankslate/style.css");

/*

native width: 1280px
unit size: 20px
scales with font size limit 14 to: 1280 * (14 / 20) = 896px width for full layout

green: rgb(0, 142, 84)

rip fonts from deichmann shop

*/

*,
*::after,
*::before {
    box-sizing: border-box;
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    position: relative;
    border: none;
    border-radius: 0;
    color: inherit;
    text-decoration: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    text-align: inherit;
    outline: none;
    transform-origin: 0 0 0;
}


html,
body {
    height: 100%;
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    background-color: #ffffff;
    line-height: 1.3;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body {
    padding: 0 2%;
}

@media screen and (max-width: 1279px) {
    html, body {
        font-size: 19px;
    }
}

@media screen and (max-width: 1215px) {
    html, body {
        font-size: 18px;
    }
}

@media screen and (max-width: 1151px) {
    html, body {
        font-size: 17px;
    }
}

@media screen and (max-width: 1087px) {
    html, body {
        font-size: 16px;
    }
}

@media screen and (max-width: 1023px) {
    html, body {
        font-size: 15px;
    }
}

@media screen and (max-width: 959px) {
    html, body {
        font-size: 14px;
    }
}

strong,
b,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

h1 {
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 900;
}

i,
em {
    font-style: italic;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

video {
    width: 100%;
    height: auto
}

.content {
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
    width: 100%;
}

.langIcon {
    position: absolute;
    top: 1rem;
    left: 8rem;
    height: 0.7rem;
    width: auto;
}

/* - - - - - Menu - - - - - */
.header-trigger {
    position: absolute;
    top: 5px;
    left: 0;
    cursor: pointer;
    z-index: 5
}

.header-trigger__line {
    display: block;
    width: 42px;
    height: 4px;
    background: #000;
    pointer-events: none;
    border-radius: 2px;
    transition: .2s ease-out
}

.header-trigger__line_top {
    width: 37px;
    transition: all .3s ease-in-out;
}

.header-trigger__line_bottom {
    width: 33px;
    transition: all .3s ease-in-out;
}

.header-trigger__line_middle {
    margin: 6px 0;
    transition: all .3s ease-in-out;
}

.menu-container {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 30px 0 20px;
    flex-direction: row;
}

.page-logo {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 15px;
}

.page-logo .menu > li > a .flag-text {
    display: none;
}

.page-logo a {
    display: inline-block;
}

.page-logo img {
    width: auto;
    height: auto;
    max-height: 75px;
    max-width: 230px;
}


.header-menu {
    display: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #333;
    color: #fff;
    font-family: "Open Sans", HelveticaNeue-Condensed, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.header-menu.hidden-menu {
    display: flex;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    color: #333;
}

.header-menu li {
    width: 100%;
    cursor: pointer; /* activate hover for ios */
    display: inline-block;
}

.header-menu li {
    text-align: center;
}

.header-menu a {
    display: inline-block;
    font-size: 22px;
    text-transform: uppercase;
    border-bottom: none;
    padding: 5px 10px;
    transition: all .3s ease-in-out;
    color: #000;
    font-weight: 400;
}

.header-menu a:hover {
    color: #ffed00;
}

.header-menu a:active {
    color: #ffed00;
}

@media (min-width: 750px) {
    .header-menu li.current-menu-item a {
        color: #ffed00 !important;
    }
}

@media (min-width: 600px) {
    .header-menu a {
        color: #fff;
    }

    .menu-container {
        flex-direction: column;
    }

    .header-trigger {
        display: none;
    }

    .header-menu li {
        width: auto;
    }

    .header-menu {
        display: flex;
    }

    .header-menu a {
        font-size: 18px;
        text-transform: none;
    }

}

@media (min-width: 840px) {
    .page-logo {
        width: auto;
        margin-bottom: 0;
    }

    .header-menu {
        width: auto;
        align-self: flex-end;
    }
}

#navsearch {
    position: absolute;
    right: 0;
    top: 4.9rem;
    z-index: 175;
}

#navsearch ::placeholder {
    color: #ffffff;
    opacity: 1;
}

#navsearch input:focus::placeholder {
    color: transparent;
}

#navsearch ::-webkit-input-placeholder {
    color: #ffffff;
    opacity: 1;
}

#navsearch input:focus::-webkit-input-placeholder {
    color: transparent;
}

#navsearch ::-ms-input-placeholder {
    color: #ffffff;
    opacity: 1;
}

#navsearch input:focus::-ms-input-placeholder {
    color: transparent;
}

#navsearch input {
    background-color: #ffffff;
    line-height: 1;
    padding-right: 2rem;
    padding-left: 1rem;
    width: 16rem;
    font-family: inherit;
    border-bottom: 1px solid #000000;
}

#navsearch i {
    position: absolute;
    top: 0;
    right: 0.5rem;
    z-index: 1;
    font-size: 1.1rem;
    pointer-events: none;
}

.hbar {
    margin-top: 1rem;
    margin-bottom: 1rem;
    height: 3px;
    background-color: #000000;
}

.footer {
    text-align: center;
}

.footlink {
    margin-left: 2em;
    margin-right: 2em;
    font-size: 67%;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sociallink {
    margin: 1rem 1em 1rem 1em;
    border-radius: 50%;
    padding-top: 0.5em;
    line-height: 1em;
    display: inline-block;
    height: 2em;
    width: 2em;
    text-align: center;
    background-color: #000000;
    color: #ffffff;
}

.layout-table {
    border-spacing: 0px;
    border-collapse: collapse;
}

.layout-td {
    vertical-align: top;
    overflow: hidden;
    background-clip: padding-box;
    border: 1rem solid #ffffff;
}

.layout-slider {
    border-right-width: 0 !important;
}

.layout-table .layout-td-trick {
    width: 0;
}

.layout-td:nth-child(2) {
    border-left-width: 0;
}

.layout-td:last-child {
    border-right-width: 0;
}

.layout-td > *,
.layout-td > a > *,
.layout-td .layout-readable > * {
    display: block;
}

.layout-td > table {
    display: table;
}

.layout-td > a {
    width: 100%;
    height: 100%;
}

.layout-bg-transparent,
.layout-bg-gruen .layout-readable {
    background-color: transparent;
}

.layout-bg-weiss {
    background-color: rgb(255, 255, 255);
}

.layout-bg-weiss .layout-readable {
    background-color: rgba(255, 255, 255, 0.5);
}

.layout-bg-gruen,
.layout-bg-gruen .layout-readable {
    background-color: rgb(0, 142, 84);
    color: #ffffff;
}

.layout-bg-transparent-white .layout-readable,
.layout-bg-transparent-white .layout-img + .layout-readable {
    color: #ffffff;
}

.layout-bg-grau {
    background-color: rgb(222, 222, 222);
}

.layout-bg-grau .layout-readable {
    background-color: rgb(222, 222, 222);
    color: #ffffff;
}

.layout-headline {
    padding: 0rem 1rem;
    color: #000;
    font-size: 150%;
}

.layout-breadcrumb a {
    display: inline;
}

.layout-breadcrumb {
    /*padding-left: 1rem;*/
    font-size: 60%;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.5);
}

.layout-img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.layout-img + .layout-readable {
    color: #000000;
}

.layout-bg-weiss .layout-img + .layout-readable {
    color: inherit;
}

.layout-readable {
    position: absolute;
    padding: 1rem 0rem;
    /*	top: -0.5rem; */ /* firefox is stupid, but thanks to overflow: hidden, nobody else is seeing this */
    width: 100%;
    height: auto;
    font-size: 16px;
    color: #000;
}

/* this doesn't work at all, no padding is bad in many cases
.layout-colspan-1 .layout-readable {
	padding: 0;
	top: 0;
}

.layout-colspan-4 .layout-readable{
	padding: 0;
	top: 0;
}
*/

.layout-img + .layout-readable {
    max-width: 16rem;
    bottom: 0;
    right: 0;
    top: 0;
    /*padding: 0;*/
}

.layout-bg-transparent .layout-img + .layout-readable {
    right: auto;
    left: 0;
}

.layout-title {
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.layout-bg-grau .layout-title {
    color: black
}

.layout-colspan-1 .layout-title,
.layout-colspan-2.layout-bg-transparent .layout-title {
    hyphens: auto;
    color: black;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    margin-left: -1.5rem;
    margin-top: -1.5rem;
    box-sizing: content-box;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
}

.layout-colspan-1 .layout-text {
    margin: 0.5rem;
}

.layout-colspan-4 .layout-title {
    text-transform: uppercase;
    color: #000;
}

.layout-img > .layout-title {
    hyphens: auto;
    color: black;
    line-height: 1rem;
    margin-bottom: 0;
    padding: 0.3rem;
    background-color: rgba(255, 255, 255, 0.75);
}

.layout-text {
    margin-bottom: 0.5rem;
}

.layout-link {
    font-size: 80%;
    background-color: rgb(0, 142, 84);
    color: #ffffff;
    padding: 0.2rem 0.3rem;
    display: inline-block !important;
}

.layout-bg-gruen .layout-link {
    color: #000;
    background-color: #ffffff;
}

.layout-colspan-1 {
    width: 21.3333rem;
}

.layout-colspan-2 {
    width: 32rem;
}

.layout-colspan-3 {
    width: 64rem;
}

.layout-colspan-4 {
    width: 64rem;
}

.layout-rowspan-1 {
    height: 21.33333rem;
}

.layout-rowspan-2 {
    height: 24rem;
}

.layout-rowspan-3 {
    height: 36rem;
}

.layout-rowspan-4 {
    height: 48rem;
}

.layout-colspan-1.layout-rowspan-1 {
    background-image: url(/wp-content/uploads/2017/10/cellbg.jpg);
}

.layout-list-item {
    display: block;
    margin: 0.8em 0 0.05rem 1em;
    color: black;
}

.layout-list-item::before {
    content: '•';
    margin-left: -1em;
    display: inline-block;
    width: 1em;
    color: #000;
    font-weight: bold;
}

.layout-list-item + br {
    display: none;
}

br + .layout-list-item {
    margin-top: 1.3em;
}

.layout-list-item + br + .layout-list-item {
    margin-top: 0;
}

.layout-bg-transparent.no-image,
.layout-bg-transparent-white.no-image,
.layout-bg-white.no-image,
.layout-colspan-4.no-image {
    height: auto;
}

.layout-bg-transparent.no-image .layout-readable,
.layout-bg-transparent-white.no-image .layout-readable,
.layout-bg-white.no-image .layout-readable,
.layout-colspan-4.no-image .layout-readable {
    position: relative;
}

.layout-colspan-1.layout-rowspan-1.layout-bg-transparent.no-image,
.layout-colspan-1.layout-rowspan-1.layout-bg-transparent-white.no-image,
.layout-colspan-1.layout-rowspan-1.layout-bg-white.no-image {
    height: 12rem;
}

.layout-colspan-1.layout-rowspan-1.layout-bg-transparent.no-image .layout-readable,
.layout-colspan-1.layout-rowspan-1.layout-bg-transparent-white.no-image .layout-readable,
.layout-colspan-1.layout-rowspan-1.layout-bg-white.no-image .layout-readable {
    position: absolute;
}

.layout-youtube {
    display: block;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.layout-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layout-ie-fix {
    display: block;
    height: 100%;
}

.layout-jobsearch {
    background-color: rgb(220, 220, 220);
    color: #000000;
    padding: 1.5rem 1rem;
    text-align: center;
    background-image: none;
}

.layout-jobsearch input[type="checkbox"] {
    display: inline;
    vertical-align: middle;
}

.layout-jobsearch select,
.layout-jobsearch input[type="text"] {
    background-color: #ffffff;
    width: 60%;
    padding: 0.5em;
    margin: 0.5em auto;
    height: 2.3em;
}

.layout-jobsearch select,
.layout-jobsearch option {
    text-align: center;
    text-align-last: center; /* chrome */
}

.layout-jobsearch input[type="submit"] {
    background-color: #ffed00;
    color: #ffffff;
    padding: 0.5em 2em;
    margin: 1em 20% 0.5em auto;
}

.layout-jobsearch span {
    display: block;
    color: #000;
    font-size: 70%;
}

.layout-td.layout-jobs {
    height: auto;
}

th, td {
    padding: 0;
}

.jobs-table {
    width: 100%;
}

.jobs-table * {
    vertical-align: top;
}

.jobs-table td {
    padding: 0.4rem 1rem;
    text-align: center;
    white-space: nowrap;
}

.jobs-table td:first-child,
.jobs-table td:last-child {
    text-align: left;
    white-space: normal;
}

.jobs-title {
    background-color: #ffed00;
    color: #ffffff;
    font-weight: bold;
}

.jobs-treffer {
}

.jobs-header {
    background-color: #cccccc;
    font-weight: bold;
}

.jobs-bereich {
    color: #000;
    font-weight: bold;
}

.jobs-eintrag td {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.jobs-eintrag:last-child td {
    border-bottom-style: none;
}

.jobs-greenline {
    background-color: rgb(0, 142, 84);
    color: #ffffff;
    font-size: 120%;
    font-weight: bold;
    padding: 0.2em 2em 0.2em 1em;
    min-width: 60%;
    display: inline-block;
    letter-spacing: 1px;
}

.jobs-link {
    background-color: rgb(0, 142, 84);
    color: #ffffff;
    font-weight: bold;
    padding: 1em 0.5em;
    display: inline-block;
    width: auto !important;
    height: auto !important;
}

.jobs-text {
    padding: 0rem 1rem 1rem 1rem;
    font-size: 80%;
}

.slickSlider {
    margin-bottom: 25px;
}

.slickSlider,
.slickSlider img {
    width: 64rem;
}

.slick-prev,
.slick-next {
    width: 2rem;
    height: 2rem;
    border-style: none;
    color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 45%;
    transform-origin: 0 100%;
    transform: scaleY(2);
    font-size: 2rem;
    z-index: 10;
}

.slick-prev {
    left: 0.5rem;
}

.slick-next {
    right: 0rem;
}

.slick-next::before,
.slick-prev::before {
    color: #ffffff;
}

.slick-next::before {
    content: '>';
}

.slick-prev::before {
    content: '<';
}

.wrkrnd {
    text-transform: uppercase;
    color: black;
    transition: color 0.2s ease-in-out;
}

.wrkrnd:hover {
    text-transform: uppercase;
    color: white;
    transition: color 0.2s ease-in-out;
}

.mobile-only {
    display: none;
}

/*ul#primary-menu li {
    width: 25%;
    text-align: center;
}

ul#primary-menu li:first-child {
    text-align: left;
}

ul#primary-menu li:last-child {
    text-align: right;
}*/

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

    html,
    body {
        font-size: 18px;
        overflow-x: hidden;
    }

    .content {
        width: 100%;
    }

    .layout-td {
        border: 0.5rem solid #ffffff;
    }

    .layout-table,
    .layout-table > tbody,
    .layout-table > tbody > tr,
    .layout-table .layout-td {
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-left-width: 0;
        border-right-width: 0;
    }

    .layout-table > tbody > tr {
        display: inline;
    }

    .layout-table .mobile-half-width.layout-td {
        width: 50%;
    }

    .layout-link {
        bottom: 1rem !important;
        left: 1rem !important;
        font-size: 1rem !important;
    }

    .jobs-table {
        font-size: 12px;
    }

    .jobs-link {
        min-height: 0 !important;
    }

    .jobs-table td {
        display: none;
        white-space: normal;
    }

    .jobs-table td:first-child,
    .jobs-table td:last-child {
        display: table-cell;
    }

    .slickSlider,
    .slickSlider img {
        max-width: 100%;
    }

    .layout-rowspan-1,
    .layout-rowspan-2,
    .layout-rowspan-3,
    .layout-rowspan-4,
    .layout-td .layout-readable,
    .layout-td > a {
        min-height: 75vw;
        height: auto;
    }

    .layout-img {
        min-height: 75vw;
    }

    .mobile-half-height.layout-rowspan-1,
    .mobile-half-height.layout-rowspan-2,
    .mobile-half-height.layout-rowspan-3,
    .mobile-half-height.layout-rowspan-4,
    .mobile-half-height.layout-td .layout-readable,
    .mobile-half-height.layout-td > a {
        min-height: 37.5vw;
        height: auto;
    }

    .mobile-half-height .layout-img {
        min-height: 37.5vw;
    }

    .layout-ie-fix,
    .layout-td-trick {
        display: none !important;
    }

    .only-image .layout-ie-fix {
        display: block !important;
        min-height: 75vw;
    }

    .mobile-half-height.only-image .layout-ie-fix {
        min-height: 37.5vw;
    }

    .layout-readable {
        max-width: 100% !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    .layout-readable * {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    .header {
        height: auto;
    }

    .deichmannLogo {
        position: relative;
        text-align: center;
        margin-bottom: 1rem;
        margin-left: 1rem;
    }

    .mobile-only {
        display: block;
    }

}

@media screen and (min-width: 720px) and (max-width: 899px) {

    .layout-table {
        font-size: 200%;
    }

}

/* This fix is to display text in the footer like it was planned in the mockup - Dustin Preick 06.12.2017*/

.azubicontainer {
    display: flex;
    flex-direction: column;
    margin: -1rem -1rem -1rem -1rem;
    border: none !important;
    text-shadow: 0 0 30px #000000;
}

.azubicontainertext {
    margin: 0 2rem auto 0;
    text-align: right;
    border: none !important;
}

.erstereihe {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 auto 0.5rem auto;
    text-align: right;
}

.azubitext {
    color: white;
    margin: 0 auto 0.5rem auto;
    text-align: right;
}

.fs550 {
    font-size: 550%;
    line-height: 100%;
}

.fs400 {
    font-size: 400%;
}

.fs170 {
    font-size: 170%;
}

.lh250 {
    line-height: 120%;
}

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

    .azubicontainer {
        margin: 0;
        border: none !important;
        text-shadow: 0 0 30px #000000;
    }

    .erstereihe {
        margin: 0 auto 0 auto;
    }

    .azubitext {
        margin: 0 auto 0 auto;
    }

    .fs550 {
        font-size: 300%;
    }

    .fs400 {
        font-size: 200%;
    }

    /*
        .fs170{
            font-size:  100%;
        } */
    .lh250 {
        line-height: 250%;
    }
}

/*- - - - - - - - -
Additional Styles 2018-03-29
- - - - - - - - - - */
/* Event Calendar */
#tribe-events {
    margin-top: 20px;
}

#tribe-events .tribe-events-notices {
    background: rgb(0, 142, 84);
    border-radius: 0;
    border: none;
    color: #fff;
    text-shadow: none;
}

#tribe-events-content .tribe-events-calendar td,
#tribe-events-content .tribe-events-tooltip h4,
#tribe_events_filters_wrapper .tribe_events_slider_val,
.single-tribe_events a.tribe-events-gcal,
.single-tribe_events a.tribe-events-ical,
.single-tribe_events a.tribe-events-gcal,
.single-tribe_events a.tribe-events-gcal:hover,
.single-tribe_events a.tribe-events-ical,
.single-tribe_events a.tribe-events-ical:hover {
    color: rgb(0, 142, 84) !important;
}

#tribe-events .tribe-bar-filters,
#tribe-events .tribe-events-ical,
#tribe-events .tribe-events-gcal {
    display: none !important;
}

/* Changes 2017-10-13 */
.layout-link {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    font-size: 75%;
    text-transform: uppercase;
}

.layout-readable {
    min-height: 100%;
}

.layout-bg-hellgrau {
    background-color: rgb(200, 200, 200);
}

.layout-bg-weiss .layout-readable {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Career Days Form 2017-10-20 */

/* Form
*********************************/
#competitionForm ul {
    width: 100%;
    display: block;
    float: left;
    margin: 10px 0;
    list-style: none;
}

#competitionForm ul li {
    display: block;
    float: left;
    margin: 0 0 10px 0;
}

#competitionForm ul.answer-set li {
    position: relative;
    width: 33.3333%;
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
}

#competitionForm ul.answer-set li label img {
    width: 100%;
    height: auto;
    display: block;
}

#competitionForm ul li.l-width100 {
    width: 100%;
}

#competitionForm ul li.l-width70 {
    width: 70%;
}

#competitionForm ul li.l-width50 {
    width: 50%;
}

#competitionForm ul li.l-width54 {
    width: 54%;
}

#competitionForm ul li.l-width30 {
    width: 30%;
}

#competitionForm ul li.l-width20 {
    width: 20%;
}

#competitionForm ul li.l-width22 {
    width: 22%;
}

#competitionForm ul li.l-width6 {
    width: 6%;
}

#competitionForm ul li.i-left {
    padding-right: 10px;
}

#competitionForm ul li.i-right {
    padding-left: 10px;
}

#competitionForm label {
    display: block;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}

#competitionForm input,
#competitionForm select {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 2px 5px;
    font-size: 13px;
    color: #000000;
    border: 1px solid #000000;
    background: #FFFFFF;
}

#competitionForm select {
    /*-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #FFFFFF url("http://www.deichmann-karriere.de/images/select.gif") no-repeat right center;*/
    background: #ffffff;
    background-size: auto 100%;
}

#competitionForm input[type="radio"],
#competitionForm input[type="checkbox"] {
    position: absolute;
    left: -99999px;
    visibility: hidden;
}

#competitionForm input[type="checkbox"] + label {
    line-height: 20px;
    font-size: 13px;
}

#competitionForm input[type="checkbox"] + label span {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 10px 0 0;
    text-align: center;
    color: #FFFFFF;
    background: #000000;
    text-indent: -99999px;
}

#competitionForm input[type="radio"] + label {
    line-height: 30px;
    margin: 0;
}

#competitionForm input[type="radio"] + label span {
    position: absolute;
    width: 36px;
    height: 36px;
    line-height: 34px;
    display: block;
    float: left;
    bottom: 2%;
    left: 5%;
    text-align: center;
    color: #000000;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid #CCCCCC;
    text-indent: -99999px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
}

#competitionForm input[type="radio"]:checked + label span,
#competitionForm input[type="checkbox"]:checked + label span {
    text-indent: 0;
}

#competitionForm ul li.required-fields {
    font-size: 13px;
}

#competitionForm button#competitionSubmit,
.btn-link {
    width: auto;
    height: 40px;
    line-height: 40px;
    float: right;
    padding: 0 30px;
    font-size: 20px;
    white-space: nowrap;
    color: #FFFFFF !important;
    border: none;
    cursor: pointer;
    background: #009661;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-decoration: none;
}

.btn-link {
    float: left;
    margin: 20px 0;
}

#competitionForm .invalid + label,
#competitionForm .invalid + label a {
    color: #F63535;
}

#competitionForm input.invalid,
#competitionForm select.invalid, .invalid {
    border: 1px solid #F63535;
}

#competitionForm input[type="checkbox"].invalid + label span,
#competitionForm input[type="radio"].invalid + label span {
    background: #F63535;
}

#competitionForm input.invalid,
#competitionForm select.invalid {
    background-color: #F4E2E6;
    box-shadow: none;
}

/* Changes 2017-10-23 from N */
.career-days h1 {
    font-size: 2.5em;
    font-size: 48px;
    line-height: 1.1;
    font-weight: normal;
    margin: .67em 0;
}

.competition p.lead {
    color: #009661;
    font-size: 1.5em;
    line-height: 1.2em;
}

.competition p {
    margin: 1em 0;
}

.competition {
    /*padding: 3em 5%;*/
    /*  padding: 20px 0;*/
    padding: 0 0 40px 0;
    height: 100%;
    margin-bottom: 3em;
}

.career-days {
    padding: 20px 0;
}

.z-index {
    z-index: 200
}

.text-decoration {
    text-decoration: underline
}

/*- - - - - - - - -
Additional Styles Snipes 2018-04-04
- - - - - - - - - - */
.page-title-snipes,
.content-title-snipes {
    width: 100%;
    display: inline-block;
    background: #000;
    padding: 5px 20px;
    margin-top: 20px;
}

.content-title-snipes{
    margin-bottom: 20px;
}

.page-title-snipes h1,
.content-title-snipes h1,
.snipes-layout .content-title-snipes h1 {
    color: #ffffff;
    font-weight: normal;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
    transition: .7s ease-out
}

.layout-td-tab {
    padding: 0;
}

.tabs {
    width: 100%;
    max-width: 64rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    list-style: none;
    margin: 0;
}

.snipes-layout {
    line-height: 1.4;
}

.snipes-layout p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
}

.snipes-layout h1 {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

.snipes-layout h2,
.layout-td h2 {
    font-size: 22px;
    text-transform: uppercase;
    margin: 5px 0;
}

.snipes-layout a,
.layout-td a {
    border-bottom: 2px solid #000;
    transition: .2s ease-out
}

.snipes-layout a:hover,
.layout-td h2 a:hover  {
    border-bottom: 2px solid #ffed00;
}

.snipes-layout h2 a,
.layout-td h2 a {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    background: #000;
    font-family: "Open Sans", HelveticaNeue-CondensedBold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 1px;
}

.snipes-layout h2 a:hover,
.layout-td h2 a:hover {
    background: #ffed00;
    color: #000;
    border: none;
}

.snipes-layout ul li {
    margin: 10px 0;
}

.tabs__nav-item {
    position: relative;
    width: 100%;
    /*margin: 9px 9px 0 0;*/
    cursor: pointer;
}

.snipes-layout .tabs__nav-item-title {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 20px;
    font-size: 18px;
    color: #ffffff;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: none;
    z-index: 3;
    transition: .2s ease-out;
}

.snipes-layout .tabs__nav-item-title {
    position: relative;
    background: #fff;
    margin: 0;
    color: #000;
    border-bottom: none;
    padding: 5px 20px 20px 0;
    font-weight: bold;
}

.snipes-layout .tabs__nav-item-title a {
    color: #000;
}

.tabs__nav-item.is-active .tabs__nav-item-title {
    border-bottom: none;
}

.tab__nav-item-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(185, 185, 185, 0.4);
    z-index: 2;
    transition: .2s ease-out;
}


.tabs__nav-item.is-active .tab__nav-item-overlay,
.tabs__nav-item:hover .tab__nav-item-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.tabs__content-item {
    display: none;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
}

.layout-text h2 {
    margin-bottom: 25px;
}

.tabs__content-item.is-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tabs__content-item-text,
.tabs__content-item-sidebar {
    width: 100%;
    margin: 10px 0;
    font-size: 16px;
    color: #000;
}

.tabs__content-item-text p {
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    font-style: normal;
    font-weight: normal;
    color: #000000;
}

.tabs__content-item-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.tabs .tabs__nav-item.tabs__nav-item-parent img,
.is-active img {
    filter: grayscale(0);
    opacity: 1;
    transition: all .3s ease-in-out;
}

.tabs:hover .tabs__nav-item.tabs__nav-item-parent img,
.is-inactive img {
    filter: grayscale(100%);
    opacity: .6;
}

.tabs:hover .tabs__nav-item.tabs__nav-item-parent:hover img,
.is-active img {
    filter: grayscale(0);
    opacity: 1;
}

.tabs.is-active .tabs__nav-item.tabs__nav-item-parent.is-inactive img,
.tabs.is-active .is-inactive img {
    filter: grayscale(100%);
    opacity: .6;
}

.tabs.is-active .tabs__nav-item.tabs__nav-item-parent.is-active img,
.tabs.is-active .is-active img {
    filter: grayscale(0);
    opacity: 1;
}

.gallery__item {
    width: 100%;
    margin-bottom: 1.25%;
}

.video-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.video-play-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    transition: .5s ease-out;
}

.video-play-btn.video-play-btn_active {
    opacity: 0;
}

.video-play-btn img {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    z-index: 2;
}

.footer-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.footer-menu__legal {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.footer-menu__legal a,
.footer-menu__legal span {
    font-size: 18px;
    color: #484b51;
    font-family: "Open Sans", HelveticaNeue-CondensedBold, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.footer-menu__legal span.vertical-line {
    color: #ffed00;
}

.footer-menu__legal .legal-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

.footer-menu__legal span.vertical-line:before {
    content: '';
    width: 3px;
    height: 30px;
    background: #ffed00;
    display: inline-flex;
    margin-left: 10px;
    margin-right: 10px;
    transform: translateY(-3px);
}

.footer-menu__legal span.copyright {
    display: block;
}

.footer-menu__social {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px;
}

.footer-menu__social a,
.footer-menu__social span,
.footer-menu__social img {
    display: inline-block;
}

.footer-menu__social a {
    margin: 0 5px;
}

span.socials span {
    background: transparent !important;
    padding: 0;
    color: #fff;
    margin-right: 10px;
}

span.socials span a {
    background: #333;
    margin-right: 0;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 0;
}

.footer-menu__social span {
}

.footer-menu-icon {
    width: 28px;
    height: 28px;
}

.snipes-footer-logo {
    width: 114px;
    height: 28px;
    margin: 0 0 0 5px;
}

.benefits {
    width: 100%;
    max-width: 64rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.benefits__item {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

.benefits__item {
    color: #fff;
    background-color: transparent;
    width: 33.333%;
    height: 280px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.benefits__image {
    max-width: 180px;
    height: auto;
    display: inline-block;
}

.benefits__title {
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
}

.benefits__item p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
}

.apply__image {
    width: 100%;
    margin-bottom: 20px;
}

.apply__content {
    width: 100%;
}


.snipes-footer {
    position: relative;
    width: 100%;
    max-width: 64rem;
}

.scroll-to-top {
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto 20px;
}

.scroll-to-top img {
    display: inline-block;
    width: 28px;
    height: 28px;
}

.scroll-to-top__text {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.benefits-title {
    display: flex;
    background: #ffed00;
    justify-content: center;
    align-items: center;
    color: #000;
    flex-direction: column;
    text-align: center;
    padding: 50px 15px;
}

.benefits-title h1,
.benefits-title h2 {
    display: flex;
    background: #ffed00;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    position: relative;
    border: 2px solid black;
    font-size: 34px;
    text-align: center!important;
    font-weight: 900;
    width: 90%;
}

.benefits-title h1,
.benefits-title h2 {
    font-size: 75px;
}

@media screen and (max-width: 475px) {
    .benefits-title {
        padding: 50px 5px;
    }

    .benefits-title h1 {
        font-size: 14vw;
    }

    .snipes-layout h2 a, .layout-td h2 a {
        font-size: 16px;
    }
}

.benefits-title h1:after,
.benefits-title h2:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    background: #ffed00;
    content: attr(data-subtitle);
    font-size: 11px;
    text-transform: lowercase;
    transform: translateY(5px) translateX(-50%);
    width: auto;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: normal;
    min-width: 150px;
}

.benefits-title h1:after {
    font-size: 18px;
    transform: translateY(10px) translateX(-50%);
}

.benefits-title p:first-of-type {
    display: flex;
    width: auto;
    min-width: 150px;
    margin: 0;
    height: 10px;
    transform: translateY(-10px);
    background: #ffed00;
}

.benefits__item {
    perspective: 1000px;
    height: 280px;
}

.benefits-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.benefits__item:hover .benefits-inner {
    transform: rotateY(180deg);
}

.benefits-front, .benefits-back {
    position: absolute;
    width: 100%;
    height: 280px;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    padding: 25px 25px 0;
}

/* Style the front side (fallback if image is missing) */
.benefits-front {
    background-color: black;
    color: #fff;
}

/* Style the back side */
.benefits-back {
    background-color: white;
    color: #000;
    transform: rotateY(180deg);
}

@media (min-width: 640px) {
    .tabs {
        width: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .tabs__nav-item {
        width: 32.5%;
        /* margin: 0 0 1.25% 0; */
    }

    .tabs__content-item {
        order: 1;
        margin: 10px 0;
    }

    .tabs__content-item-text {
        width: 66.25%;
    }

    .tabs__content-item-text.full-width {
        width: 100%;
    }

    .tabs__content-item-sidebar {
        width: 32.5%;
    }

    .tabs__content-item-sidebar:empty {
        width: 0;
    }

    .gallery__item_1-3 {
        width: 32.5%;
    }

    .gallery__item_2-3 {
        width: 66.25%;
    }

    .gallery__item_3-3 {
        width: 100%;
    }

    .footer-menu__social,
    .footer-menu__legal {
        width: 50%;
    }

    .footer-menu__legal {
        text-align: left;
    }

    .footer-menu__social {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .benefits__item {
        width: 33.33%;
        margin-bottom: 0;
        text-align: center;
    }

    /*.apply__content {
        width: 66.25%;
    }*/

    .scroll-to-top {
        position: fixed;
        display: none;
        bottom: 20px;
        right: 20px;
        cursor: pointer;
    }

    .scroll-to-top__text {
        display: none;
    }
}

/* Fixes */


#psJobWidget {
    display: none;
}
.error404 #content, .search-results #content{
    margin-top: 1rem;
}

.searchform input[type="text"] {
    margin: 10px 0;
    border: 1px solid #000;
    border-radius: 2px;
}

/*anastasia 2019.05.15*/
.snipes-layout .tabs__nav-item-title a {font-size: 18px;padding: 0;}
.snipes-layout .tabs__nav-item-title a, .snipes-layout .tabs__nav-item-title h2 a:hover, .snipes-layout .tabs__nav-item-title a:hover  {
    text-decoration: none;
    background: none;
}
.snipes-layout .tabs__nav-item-title:hover, .snipes-layout .tabs__nav-item-title:hover {border-bottom: none;}

.snipes-layout a.tab__nav-item-overlay, .snipes-layout a.tab__nav-item-overlay:hover {
    border-bottom: none;
}
a.tab__nav-item-overlay_link{
    position: absolute;
    width: 100%;
    height: 100%;
}

/*Language DropDown*/
ul#menu-language-menu, ul#menu-country-menu, ul#menu-country-menu-de, ul#menu-country-menu-en {
    position: relative;
    display: inline-block !important;
    float: right;
    margin-left: 10px;
    margin-top: 22px;
    padding-right: 20px;
}
ul#menu-language-menu li a span.flag-icon,
ul#menu-country-menu li a span.flag-iconn,
ul#menu-country-menu-de li a span.flag-iconn,
ul#menu-country-menu-en li a span.flag-iconn {
    width: 22px;
    height: 22px;
}
ul#menu-language-menu li ul.sub-menu,
ul#menu-country-menu li ul.sub-menu,
ul#menu-country-menu-de li ul.sub-menu,
ul#menu-country-menu-en li ul.sub-menu  {
    display: none;
    width: auto;
    position: absolute;
    right: -15px;
    background: #ffffff;
    z-index: 25;
    padding: 5px 15px;
    border: 1px solid #494a53;
}
ul#menu-language-menu li ul.sub-menu li,
ul#menu-country-menu li ul.sub-menu li,
ul#menu-country-menu-de li ul.sub-menu li,
ul#menu-country-menu-en li ul.sub-menu li {
    display: block;
    text-align: left;
    padding: 0;
    border: none;
}

ul#menu-country-menu li ul.sub-menu li a,
ul#menu-country-menu-de li ul.sub-menu li a,
ul#menu-country-menu-en li ul.sub-menu li a {
    display: block;
}

ul#menu-country-menu li ul.sub-menu li:hover,
ul#menu-country-menu-de li ul.sub-menu li:hover,
ul#menu-country-menu-en li ul.sub-menu li:hover {
    background-color: rgba(185, 185, 185, 0.4);
}

ul#menu-country-menu li ul.sub-menu li.no-hover:hover,
ul#menu-country-menu-de li ul.sub-menu li.no-hover:hover,
ul#menu-country-menu-en li ul.sub-menu li.no-hover:hover {
    background-color: unset;
}

ul#menu-language-menu li a {font-size: 16px}

.flag-icon,.flag-icon-background{background-size:contain;background-position:50%;background-repeat:no-repeat}
.flag-icon{position:relative;display:inline-block;width:1.33333333em;line-height:1.5em; float: right}
.flag-icon:before{content:"\00a0"}
.flag-icon.flag-icon-squared{width:1em}
.page-logo .menu > li > a .flag-icon.flag-icon-squared {
    width: 30px;
    height: 30px;
    display: inline-flex;
    background-size: cover;
    border-radius: 50%;
    padding-right: 25px;
}
.flag-icon.flag_fr {
    background-image: url("./images/flags/france-flag-xs.png");
}
.flag-icon.flag_de {
    background-image: url("./images/flags/germany-flag-xs.png");
}
.flag-icon.flag_es {
    background-image: url("./images/flags/spain-flag-xs.png");
}
.flag-icon.flag_nl {
    background-image: url("./images/flags/netherlands-flag-xs.png");
}
.flag-icon.flag_it {
    background-image: url("./images/flags/italy-flag-xs.png");
}
.flag-icon.flag_bel {
    background-image: url("./images/flags/flag_of_belgium.png");
}
.flag-icon.flag_at {
    background-image: url("./images/flags/austria-flag-xs.png");
}
.flag-icon.flag_ch {
    background-image: url("./images/flags/switzerland.svg");
}
.flag-icon.flag_uk {
    background-image: url("./images/flags/uk.png");
}

span.flag-text {font-size: 14px;    margin-left: 10px;
    display: none;}
li.sub-menu-border {border-bottom: 1px solid #494a53;}

.sub-lang { padding: 0!important;}
.sub-lang span.flag-text {
    margin-left: 17px;
    font-size: 11px!important;
}

.main-lang span.flag-icon{margin: 0 10px;
    border-radius: 50%;
    background-size: cover;
    width: 30px;}

.fas.fa-angle-down {
    margin-left: 40px;
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
}

.flag-text-de {font-weight: bold}
.sub-menu-padding {padding: 2px 6px!important;}

@media screen and (max-width: 1280px) {
    .header-menu { margin-left: 0; }
}
@media screen and (max-width: 850px) {
    .menu-language-menu-container {margin: 0 auto}
}
@media screen and (max-width: 639px) {
    .tabs__nav-item {
        margin-bottom: 9px;
    }
}
@media screen and (max-width: 599px) {
    .menu-language-menu-container { position: absolute; right:0; }
    ul#menu-language-menu, ul#menu-country-menu, ul#menu-country-menu-de, ul#menu-country-menu-en {
        margin-right: 0;
        margin-left: 0;
        margin-top: 0;
        padding-right: 0;}
    .flag-text-de{display:none;}
    .fas.fa-angle-down {
        margin-left: 35px;
    }
    .flag-icon.flag-icon-squared {width: 1.5em;}
    ul#menu-country-menu li ul.sub-menu,
    ul#menu-country-menu-de li ul.sub-menu,
    ul#menu-country-menu-en li ul.sub-menu {width: 175px; top: 2.5em;}
    span.flag-text { font-size: 17px; }
    .sub-lang span.flag-text {font-size: 14px !important;}
    ul#menu-country-menu li ul.sub-menu li,
    ul#menu-country-menu-de li ul.sub-menu li,
    ul#menu-country-menu-en li ul.sub-menu li {padding: 15px 6px}
    .sub-lang {padding: 8px 0px !important; }
    .page-logo img {    width: 50px !important;
        height: 50px !important;}
    .header-trigger {
        top: 12px;
    }
    .page-logo {
        order: 2;
        width: calc(100% - 50px);
        height: 50px;
        margin: 0;
        padding: 0;
    }

    .page-logo > a {
        width: 100%;
        padding-right: 50px;
        justify-content: center;
        display: flex;
    }

    h1 {
        background: #333;
        color: #fff;
        padding: 5px 5px 5px 10px;
    }

    .benefits-title h1 {
        color: #000;
    }

    nav {
        order: 1;
        width: 50px;
        height: 50px;
    }

    .footer-menu__legal .legal-links {
        justify-content: center;
    }
}




.flip-card,
.flip-card *,
.flip-card:before,
.flip-card:after,
.flip-card *:before,
.flip-card *:after {
    box-sizing: border-box;
    background-color: unset;
    background-size: unset;
    background-repeat: unset;
    margin: unset;
    padding: unset;
    position: unset;
    border: unset;
    border-radius: unset;
    color: unset;
    text-decoration: unset;
    font-style: unset;
    font-weight: unset;
    text-align: unset;
    outline: unset;
    transform-origin: unset;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 300px;
    border: none;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

@media screen and (min-width: 768px) {
    .flip-card {
        width: 50%;
    }
}

@media screen and (min-width: 1024px) {
    .flip-card {
        width: 33.333%;
    }
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #000;
    color: white;
}

.flip-card-front h2 {
    font-weight: 400;
}

.flip-card-front img {
    max-width: 100px;
    margin-bottom: 20px;
}

/* Style the back side */
.flip-card-back {
    background-color: white;
    color: black;
    transform: rotateY(180deg);
    font-size: 14px;
}

.flip-card-back h2 {
    color: black;
}

@media screen and (min-width: 1024px) {
    .hide-desktop {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .hide-mobile {
        display: none;
    }
}

h2.fit {
    font-size: 35px;
}

@media screen and (min-width: 768px) {
    h2.fit {
        font-size: 3.5vw;
    }
}

@media screen and (min-width: 900px) {
    h2.fit {
        font-size: 4vw;
    }
}

@media screen and (min-width: 1379px) {
    h2.fit {
        font-size: 3.5vw;
    }
}

@media screen and (min-width: 1576px) {
    h2.fit {
        font-size: 2.8vw;
    }
}

@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5) {
    h2.fit {
        font-size: 3.5vw;
    }
}

@media screen and (min-width: 900px) and (-webkit-min-device-pixel-ratio: 1.5) {
    h2.fit {
        font-size: 3.4vw;
    }
}

@media screen and (min-width: 1379px) and (-webkit-min-device-pixel-ratio: 1.5) {
    h2.fit {
        font-size: 3.1vw;
    }
}

@media screen and (min-width: 1576px) and (-webkit-min-device-pixel-ratio: 1.5) {
    h2.fit {
        font-size: 2.4vw;
    }
}

@media screen and (max-width: 768px) {
    .snipes-layout h2, .layout-td h2 {
        text-align: left;
    }
}