/* change navigation */
html {scroll-behavior: smooth;}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary {
    float: right;
}

.sdx-container .nav a.button, .sdx-container .nav button.button {
    padding: 12px 24px;
    color: #fff !important;
    min-width: 0;
    border: none !important;
}

.sdx-container .nav .nav__level1 .nav__mainnav>.nav__primary {
    padding-top: 0 !important;
}

body:not(.is-mobile) .sdx-container .nav .nav__level1 .nav__mainnav>.nav__primary {
    margin-top: 16px;
}

body:not(.is-mobile) .sdx-container .nav ul {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header {
        justify-content: space-around;
    }
}

@media screen and (max-width: 980px) {
    body:not(.is-mobile) .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary {
        display: none;
        position: absolute;
        left: 0;
        top: 80px;
        width: 100%;
        height: 0;
        padding: 0;
        margin: 0;
        background: #fff;
        overflow: hidden;
    }
    body:not(.is-mobile) .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary.is-open {
        display: block;
        height: auto;
    }
    body:not(.is-mobile) .sdx-container .nav__secondary ul.nav-items li.nav-item {
        display:  block !important;
    }
    body:not(.is-mobile) .sdx-container .nav ul {
        flex-direction: column;
    }
    body:not(.is-mobile) .sdx-container .nav ul a.button {
        margin: 24px 0;
    }
}

body.is-mobile .sdx-container .nav ul li.nav-item:last-child {
    text-align: center;
} 

body.is-mobile .sdx-container .nav ul a.button {
    margin: 24px auto;
}


/* content */
@media screen and (max-width: 980px) {
    body {
        overflow-y: visible !important;
    }
}

div.middle {
    width: 100%;
    min-width: 980px;
}

div.middle > .content.contentWide {
    float: none;
    width: 100%;
    padding: 0 20px;
    margin: 0;
    box-sizing: border-box;
}

body.is-mobile div.middle > .content.contentWide {
    padding: 0;
}

body.is-mobile .stageMobile {
    padding-left: 0;
    padding-right: 0;
}

// .emo--section {
//     background: red;
//     border:  10px solid green;
// }

.emo--container__outer {
    max-width: 1356px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.emo--container__sc {
    max-width: 1396px;
    padding: 0 20px;
}

body.is-mobile.emo--container__outer--mobile {
    padding: 0 20px;
}

.emo--container__inner {
    padding-left: 120px;
    padding-right: 120px;
}

.emo--section { margin-bottom: 120px !important; }

.emo--container__inner--top { padding-top: 100px; }
.emo--container__inner--bottom { padding-bottom: 100px; }

.emo--container__inner--left {
    padding-left: 120px;
    padding-right: 80px;
}

.emo--container__inner--right {
    padding-left: 80px;
    padding-right: 120px;
}

body.is-mobile .emo--container__inner--top { padding-top: 48px !important; }
body.is-mobile .emo--container__inner--bottom { padding-bottom: 80px !important; }

body.is-mobile .emo--container__outer--mobile,
body.is-mobile .emo--container__inner,
body.is-mobile .emo--container__inner--left,
body.is-mobile .emo--container__inner--right {
    padding-left: 20px;
    padding-right: 20px;
    // margin-top: 20px;
}

body.is-mobile .emo--container__outer .image { margin-bottom: 40px !important; }

@media screen and (max-width: 1400px) {
    .emo--section { margin-bottom: 100px !important; }
    .emo--container__inner {
        padding-left: 80px;
        padding-right: 80px;
    }
    .emo--container__inner--top { padding-top: 80px; }
    .emo--container__inner--bottom { padding-bottom: 80px; }
    .emo--container__inner--left {
        padding-left: 80px;
        padding-right: 60px;
    }
    .emo--container__inner--right {
        padding-left: 60px;
        padding-right: 80px;
    }
}

@media screen and (max-width: 1200px) {
    .emo--section { margin-bottom: 80px !important; }
    .emo--container__inner {
        padding-left: 40px;
        padding-right: 40px;
    }
    .emo--container__inner--top { padding-top: 40px; }
    .emo--container__inner--bottom { padding-bottom: 40px; }
    .emo--container__inner--left {
        padding-left: 40px;
        padding-right: 20px;
    }
    .emo--container__inner--right {
        padding-left: 20px;
        padding-right: 40px;
    }
}

body.is-mobile .emo--section {
    margin-bottom: 40px !important;
}

body.is-mobile .emo--container__inner--top { padding-top: 24px; }
body.is-mobile .emo--container__inner--bottom { padding-bottom: 24px; }

.emo--container__middle {
    padding-left: 50px;
    padding-right: 50px;
}

body.is-mobile .emo--container__middle {
    padding-left: 0;
    padding-right: 0;
}

@media screen and (max-width: 1200px) {
    .emo--container__middle {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* grid */
body:not(.is-mobile) .emo--container__grid .modGridLayout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

body:not(.is-mobile) .emo--container__grid .modGridLayout > .column {
    float: none;
    flex: 0 0 auto;
}

body.is-mobile .emo--container__grid .image {
    padding: 0 20px;
}

/* carousel */
body:not(.is-mobile) .modSlider.sdx { margin-bottom: 0; }
body:not(.is-mobile) .modSlide .slideContent,
body:not(.is-mobile) .modSlide .slidecontent {
    padding: 0;
}

body:not(.is-mobile) .modSlider.sdx .bx-controls .bx-pager {
    bottom: 21px;
}

body:not(.is-mobile) .modSlider.sdx .bx-controls .bx-pager .bx-pager-item .bx-pager-link {
    background: #fff;
}

body.is-mobile .emo--slider {
    margin-left: 20px !important;
}

/* people in slider */
body:not(.is-mobile) .emo--container__people {
    height: 680px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
    align-content: flex-end;
    padding: 120px;
    box-sizing: border-box;
}

body:not(.is-mobile) .emo--container__people.emo--container__people--left {
    align-items: flex-start;
}

body:not(.is-mobile) .emo--container__people > * {
    width: 320px;
}

/* legal slider */
.emo--legal .modBackgroundContainer {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 20px;
}

body.is-mobile .emo--legal .modBackgroundContainer {
    padding: 20px 20px 14px;
}

/* social tools */
body:not(.is-mobile) .modSocialShare.horizontal ul.social-icons li {
    float: none;
    display: inline-block;
}

/* fonts */
@media screen and (max-width: 1400px) {
    body:not(.is-mobile) h1,
    body:not(.is-mobile) h2 {
        font-size: 72px !important;
        line-height: 64px !important;
    }
}
@media screen and (max-width: 1200px) {
    body:not(.is-mobile) h1,
    body:not(.is-mobile) h2 {
        font-size: 64px !important;
        line-height: 56px !important;
    }
    body:not(.is-mobile) ul li,
    body:not(.is-mobile) p,
    body:not(.is-mobile) p a {
        font-size: 18px !important;
        line-height: 24px !important;
    }
}

/* accordion */
.sdx-container .accordion--border,
.sdx-container .accordion--border .accordion__item {
    border-color: #333;
}

@media screen and (min-width: 1200px) {
    .sdx-container .accordion__header h4.text-h5 {
        font-size: 24px;
        line-height: 28px;
    }
}

/* teaser yt */
.sc--jobs__teaser--teaser .modBackgroundContainer {
    min-height: 0 !important;
    width: 100%;
    padding-bottom: 100%;
    background-size: cover !important;
    position: relative;
}

body.is-mobile .sc--jobs__teaser--teaser .modBackgroundContainer {
    margin: 20px;
    width: calc(100% - 40px);
    padding-bottom: calc(100% - 40px);
}

.sc--jobs__teaser--teaser .modBackgroundContainer .container-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

body.is-mobile .sc--jobs__teaser--teaser .modBackgroundContainer * {
    padding: 0 !important;
    margin: 0 !important;
}

/* teaser */
body:not(.is-mobile) .emo--teasers .modDataProvider {
    display: flex;
    flex-wrap: nowrap;
    width: calc(100% + 20px);
    margin: 0 -10px;
}

.emo--teasers .emo--teaser__headline {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    overflow: hidden;
}

body:not(.is-mobile) .emo--teasers .modInfoTeaserContainer {
    margin: 0;
}

body:not(.is-mobile) .emo--teasers .modDataProvider .data-provider-item {
    flex: 1 1 auto;
    width: 25%;
    float: none;
    margin: 0 10px;
}

body:not(.is-mobile) .emo--teasers .modDataProvider .data-provider-item img {
    width: 100% !important;
    height: auto !important;
}

body.is-mobile .emo--teasers {
    margin: 0 20px !important;
}

body.is-mobile .emo--teasers .modDataProvider .data-provider-item  {
    width: 100%;
    margin: 0 0 20px 0 !important;
}

body.is-mobile .emo--teasers .modDataProvider .data-provider-item  .image {
    margin-bottom: 0 !important;
}


/* deeplink */
body.is-mobile a[id]:target,
body.is-mobile a[name]:target {
    display: block;
    transition: none;
    padding-top: 70px;
    margin-top: -70px;
    position: relative;
    top: -70px;
}

/* lightbox */
.middle.fake {
    width: 100%;
    min-width: auto !important;
}

/* video */
.emo--video {
    position: relative;
}

.emo--video__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emo--video .vjs-poster,
.emo--video .bc-player-B18YONA7Z_default { background-color: transparent !important; }
.emo--video .brightcovevideo.brightcoveplayer.section {
    margin: 0;
    pointer-events: none;
}
.emo--video .video-player-wrapper > * { max-height: 100% !important; }
.emo--video .video-player-wrapper > * > *:not(video) { display: none; }
.emo--video .video-player-wrapper {
    padding-bottom: calc(100%/16*9);
    transition: none;
}

.emo--video .video-playbutton-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
body:not(.is-mobile) .emo--video .emo--video__playbutton {
    display: none;
}

body.is-mobile .emo--video {
    margin: 20px;
}

body.is-mobile .emo--video .image {
    margin: 0 !important;
}

/* recruiting */
.emo---jobsOffering #recruitee-careers .rt-body {
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.emo---jobsOffering #recruitee-careers .rt-list__header-item,
.emo---jobsOffering #recruitee-careers .rt-list__header,
.emo---jobsOffering #recruitee-careers .rt-list__offer-location {
    display: none !important;
}

.emo---jobsOffering #recruitee-careers .rt-list__items > .rt-list__offer-item,
.emo---jobsOffering #recruitee-careers .rt-list__items > .rt-list__offer-item + .rt-list__offer-item {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 0 0 -1px !important;
    
    display: flex;
    align-items: center;
    padding: 25px 0;
    color: #333;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
    flex-direction: row;
    flex-wrap: nowrap;
}

.emo---jobsOffering #recruitee-careers .rt-list__offer-title {
    flex: 1 1 auto;
    padding-right: 40px;
    font-size: 24px;
    line-height: 28px;
    color: #333;
    font-weight: 700;
    font-family: TheSans,sans-serif;
}

.emo---jobsOffering #recruitee-careers .rt-list__items > .rt-list__offer-item:hover {
    
}

.emo---jobsOffering #recruitee-careers .rt-list__items > .rt-list__offer-item:hover .rt-list__offer-title {
    text-decoration: none;
    color: #333;
}

.emo---jobsOffering #recruitee-careers .rt-list__offer-item .rt-icon-arrow-forward {
    flex: 0 0 auto;
    display: block;
    background-image: url('https://www.swisscom.ch/content/dam/assets/about/karrieren/devops-riga/arrow-link-blue-56x56.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    opacity: 1;
    transform: none;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.emo---jobsOffering #recruitee-careers .rt-list__offer-item .rt-icon-arrow-forward:before {
    display: none;
}

.emo---jobsOffering > *:not(#recruitee-careers) {
    display: none;
}