@media screen and (max-width: 46.24em) {
   .ss .wrapper {
      margin: 0;
      overflow: hidden;
   }

   .ss .pageFooter {
      height: auto;
      background-image: none;
      padding-right: 0 !important;
   }

   .ss .pageFooter ul {
      padding: 2px 10px;
      float: none !important;
      margin: 0 !important;
   }

   .ss .pageFooter li {
      margin: 8px 0 !important;
      display: block !important;
   }

   .ss.news .wrapper .header,
   .ss.sport .wrapper .header {
      height: 63px;
   }

   .ss #newsLogo {
      position: absolute;
      top: 11px;
      left: 22px;
   }

   .ss.sport #sportLogo {
      position: absolute;
      top: 11px;
      left: 22px;
   }

   .ss #orfonTarget {
      position: absolute;
      top: 12px;
      left: 83px;
   }

   .ss #ss-networkNavigation {
      display: none;
   }

   /*
    * subgrid
    */

   .ss .top-subgrid {
      display: none;
   }

   .ss .bottom-subgrid {
      display: block;
   }

   .ss .storyText.teaser {
      padding-bottom: 0;
   }

   .ss .storyWrapper.combo .storyText {
      padding-left: 0;
      padding-bottom: 0;
      width: 100%;
   }

   .ss .storyText.teaser .readMore {
      margin-bottom: 20px;
   }

   .ss .storyWrapper.teaser .subgrid {
      position: static;
      height: auto;
      margin: 0;
      padding: 6px 0;
      background: url('../sportlive/images/bckg_pattern_stripes.png');
   }

   .ss .storyWrapper.teaser .subgrid .griditem {
      position: static;
      display: block;
      width: auto !important;
      height: auto !important;
      text-align: left;
      padding: 0 10px;
   }

   .ss .storyWrapper.combo .subgrid {
      float: none;
      position: static;
      height: auto;
      margin: 0;
      padding: 6px 0;
      background: url('../sportlive/images/bckg_pattern_stripes.png');
   }

   .ss .storyWrapper.combo .subgrid .griditem {
      position: static;
      display: block;
      width: auto !important;
      height: auto !important;
      text-align: left;
      padding: 0 10px;
   }

   /* but show larger ones */
   .ss .storyWrapper.teaser .subgrid .griditem.version2q,
   .ss .storyWrapper.teaser .subgrid .griditem.version2q2x {
      padding: 0;
   }

   .ss .storyWrapper.teaser .subgrid .griditem.version2q a > img,
   .ss .storyWrapper.teaser .subgrid .griditem.version2q2x a > img {
      display: block;
      width: 100%;
      height: auto;
   }

   .ss .storyWrapper.teaser .subgrid .griditem.version2q a > h2,
   .ss .storyWrapper.teaser .subgrid .griditem.version2q2x a > h2 {
      display: none
   }

   /* hide too small sub grid items */
   .ss .storyWrapper.teaser .subgrid .griditem a > img {
      display: none;
   }

   .ss .storyWrapper.teaser .subgrid .griditem a > h2 {
      display: block;
      position: static;
      font-weight: 500;
      line-height: 1.4em;
   }

   .ss .storyWrapper.teaser .subgrid .griditem.version2q,
   .ss .storyWrapper.teaser .subgrid .griditem.version2q2x {
      margin-bottom: 10px;
   }

   .ss .storyWrapper.teaser .subgrid .griditem.active a > h2 {
      color: #000;
   }

   /* combos */
   .ss .storyWrapper.combo .subgrid .griditem a > img {
      display: none;
   }

   .ss .storyWrapper.combo .subgrid .griditem a > h2 {
      display: block;
      position: static;
      font-weight: 500;
      line-height: 1.4em;
   }

   .ss .storyWrapper.combo .subgrid .griditem.version2q,
   .ss .storyWrapper.combo .subgrid .griditem.version2q2x {
      margin-bottom: 10px;
   }

   .ss .storyWrapper.combo .subgrid .griditem.active a > h2 {
      color: #000;
   }

   .ss .storyWrapper.teaser .subgrid .griditem:not(.active) a > h2::before {
      font-family: "ORF ON Condensed SC", Arial, Helvetica, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      content: "Story";
      background: #f0f1f4;
      padding: 1px 4px;
      margin-right: 5px;
      color: #466199;
   }

   .ss .storyWrapper.teaser .subgrid .griditem a > h2 {
      margin: 10px 0;
   }

   .ss .storyWrapper.teaser .subgrid .griditem a:focus,
   .ss .storyWrapper.teaser .subgrid .griditem a:active,
   .ss .storyWrapper.teaser .subgrid .griditem h2:focus,
   .ss .storyWrapper.teaser .subgrid .griditem h2:active,
   .ss .storyWrapper.combo .subgrid .griditem a:focus,
   .ss .storyWrapper.combo .subgrid .griditem a:active,
   .ss .storyWrapper.combo .subgrid .griditem h2:focus,
   .ss .storyWrapper.combo .subgrid .griditem h2:active {
      top: auto;
      left: auto;
      bottom: auto;
      font-size: inherit;
      font-weight: 500;
      padding: 0;
      background: inherit;
      color: #466199;
      border: none;
      z-index: 10;
      text-decoration: none !important;
      overflow: visible;
      outline: none;
      width: auto;
   }

   /* hide outdated links */
   .ss .storyWrapper.teaser .subgrid .griditem a[href*="//iptv.orf.at"],
   .ss .storyWrapper.teaser .subgrid .griditem a[href*="//tvthek.orf.at"],
   .ss .storyWrapper.teaser .subgrid .griditem a[href*="//debatte.orf.at"] {
      display: none !important;
   }

   /*
    * text and contents
    */

   .ss .storyWrapper {
      max-width: 472px;
      margin: 0 auto;
   }

   .ss .socialShareWrapper {
      display: none !important;
   }

   .ss .storyWrapper .socialButtons {
      display: none !important;
   }

   .ss .storyText {
      box-sizing: border-box;
      padding: 2px 10px 20px 10px;
      min-height: 320px;
      width: 100%;
   }

   .ss .storyText .image.bigpicture,
   .ss .storyText .image.bodywide {
      width: 100%;
      margin: 10px 0;
   }

   .ss .storyText .image.bigpicture .credit,
   .ss .storyText .image.bodywide .credit {
      width: 100%;
      margin: 0;
      position: static;
   }

   .ss .storyText .image.bigpicture .caption,
   .ss .storyText .image.bodywide .caption {
      width: 100%;
      margin: 0;
      position: static;
   }

   .ss .storyText .image.bigpicture img,
   .ss .storyText .image.bodywide img {
      width: 100% !important;
      height: auto !important;
   }

   /**
    * Video Controls
    */
   .remote {
      position: relative;
   }
   .remote .error {
      border: 1px solid #b55050;
      background-color: #f5cfcf;
      margin: 10px 4px;
      padding: 4px;
   }
   .remote .controls {
      position: absolute;
      top: 0px;
      left: 0px;
   }
   .remote .controls a {
      position: absolute;
      top: -3000px;
      left: -3000px;
   }
   .remote .controls a:focus {
      position: relative;
      top: 402px;
      left: 0px;
      padding: 6px 10px;
      font-size: 1.2em;
      font-weight: bold;
      outline: none;
      color: #002C5A;
      border: 3px solid #EDEEF0;
      background: #EDEEF0;
      z-index: 200;
   }

   /* video */
   .remote .video.tvthek + .caption a,
   .caption.tvthek a {
      font-weight: normal;
   }

   .ss :not(.stripe) > .remote .video.tvthek {
      margin-top: 20px;
   }

   .ss .remote .caption.tvthek .meta {
      position: absolute;
      top: -19px;
      right: 0;
      font-size: 12px;
      line-height: 1.4167;
      color: #A6A6A6;
      margin: 0.125rem 10px 2px 10px;
      line-height: 1.3333;
   }

   .ss .remote .caption.tvthek .meta .brace {
      display: none;
   }

   /* stripebox */
   .ss .storyText .stripe {
      background-color: #F0F1F4;
      overflow: hidden; /* trigger bfc */
      margin-bottom: 10px;
   }
   .ss .storyText .stripe h2 {
      font-size: 1em;
   }
   .ss .storyText .stripe p,
   .ss .storyText .stripe ul {
      font-size: 0.875em;
   }
   .ss .storyText .stripe .remote .caption {
      display: none;
   }
   .ss .storyText .stripe .remote + p {
      margin-top: 1rem;
   }
   .ss .storyText .stripe-credits {
      font-size: 0.75em;
      text-align: right;
      margin-bottom: 2px;
      color: #A6A6A6;
   }

   /* breaker */
   .ss .storyText .breaker {
      background-color: #F0F1F4;
      overflow: hidden;
      margin-bottom: 10px;
   }
   .ss .storyText .breaker h2 {
      font-size: 1em;
   }
   .ss .storyText .breaker-content p,
   .ss .storyText .breaker ul,
   .ss .storyText .breaker ol,
   .ss .storyText .breaker blockquote {
      font-size: 0.875em;
   }
   .ss .storyText .breaker-credits {
      font-size: 0.75em;
      text-align: right;
      margin-bottom: 2px;
      color: #A6A6A6;
   }
   .ss .storyText .breaker-content > .image {
      margin: 0;
   }

   /**
    * HTML5 Audio
    */
   .remote audio {
      width: 100%;
      height: 39px; /* ios fix */
      display: block;
   }

   /**
    * Slideshow
    */

   .ss .remote.slideshow .navigation {
      position: relative;
      padding: 2px 0 3px 0;
      margin: 0 10px;
   }

   .ss .remote.slideshow .photo {
      cursor: pointer;
   }

   .ss .remote.slideshow p {
      margin: 0;
   }

   .ss .remote.slideshow .showMetadata p {
      margin: 6px 0 4px 0;
   }

   .ss .remote.slideshow button {
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      font-size: inherit;
      font-family: inherit;
      position: absolute;
      top: 0;
      overflow: visible;
      outline: none;
      cursor: pointer;
      color: #556DA6;
   }

   .ss .remote.slideshow button .arrow-button {
      display: inline-block;
      background: url('../../news.mobile.v2/common/images/arrows_sprite.png') -122px -141px no-repeat;
      width: 10px;
      height: 13px;
   }

   .ss .remote.slideshow .prev .arrow-button {
      background-position: -122px -141px;
      margin-right: 3px;
   }

   .ss .remote.slideshow .next .arrow-button {
      background-position: -93px -141px;
      margin-left: 3px;
   }

   .ss .remote.slideshow button.prev {
      left: 0;
   }

   .ss .remote.slideshow button.next {
      right: 1px;
   }

   .ss .remote.slideshow button span {
      margin: 0;
      padding: 0;
      position: relative;
      left: 0;
      top: 0;
   }

   .ss .remote.slideshow .location {
      display: block;
      text-align: center;
      color: #858c9e;
      font-size: 0.733em; /* 11px */
   }

   .ss .remote.slideshow .frame {
      clear: both;
      position: relative;
   }

   .ss .remote.slideshow .frame img {
      width: 100%;
   }

   .ss .remote.slideshow .photoMetadata {
      margin: 0 10px 0.5rem;
   }

   .ss .remote.slideshow .photoMetadata h3 {
      font-weight: bold;
   }

   .ss .remote.slideshow .photoMetadata p {
      line-height: 1.2;
      font-size: 1rem;
      font-style: italic;
   }

   .ss .remote.slideshow .frame .credits {
      margin: 5px 10px 3px;
      color: #A5A5A5;
      font-size: 0.667em;
      line-height: 1.2;
   }

   .storyWrapper .topStoryImage {
      position: relative;
   }

   .storyWrapper .topStoryImage img {
      width: 100%;
   }

   .storyWrapper .topStoryImage .credit {
      display: block;
      position: absolute;
      right: 5px;
      bottom: -8px;
      text-align: right;
      font-size: 0.625rem;
      color: #A5A5A5;
      height: 10px;
   }

   .storyWrapper h1.topic {
      font-size: 1em;
      margin: 0;
   }

   .ss .storyText h1 {
      font-weight: bold;
      font-size: 1.375rem;
      line-height: 1.750rem;
      margin: 1.313rem 10px 1rem 10px;
   }
   .ss .storyText h1,
   .ss .storyText h2 {
      /* some very long words overflow body, so hyphenate them */
      -webkit-hyphens: auto;
      -webkit-hyphenate-limit-before: 15; /* characters before hyphen may be inserted */
      -webkit-hyphenate-limit-after: 5; /* characters after hyphen may be inserted */
   }

   .ss .storyText .teaser {
      margin: 1rem 10px 1rem 10px;
   }

   .ss .storyText .teaser strong {
      font-weight: 500;
   }

   .ss .storyText .refreshButton {
      -webkit-border-radius: 3px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border: 1px solid #333;
      background: #2B567E;
      display: inline;
      float: right;
      margin: 8px 18px 8px 14px;
      padding: 7px 6px;
      -webkit-box-shadow: 0px 0px 1px 1px rgba(185, 185, 185, 1);
      -moz-box-shadow: 0px 0px 1px 1px rgba(185, 185, 185, 1);
      box-shadow: 0px 0px 1px 1px rgba(185, 185, 185, 1);
   }

   .ss .storyText .refreshButton a {
      color: #fff;
      text-decoration: none;
   }

   .ss .storyText .refreshButton a:hover,
   .ss .storyText .refreshButton a:focus {
      color: #FFD86B;
   }

   .ss .storyText h2 {
      font-weight: bold;
      font-size: 1.125rem;
      line-height: 1.500rem;
      margin: 1.125rem 10px 0.375rem 10px;
   }

   .ss .storyText p,
   .ss .storyText ul,
   .ss .storyText ol,
   .ss .storyText blockquote {
      margin: 0.125rem 10px 1rem 10px;
      font-size: 1.125rem;
      line-height: 1.3333;
   }

   .ss .storyText strong em,
   .ss .storyText em strong {
      font-style: normal;
   }

   .ss .storyText blockquote {
      margin-top: -10px;
   }

   .ss .storyText blockquote p {
      margin-left: 0;
      margin-right: 0;
   }

   .ss .storyText h2+blockquote,
   .ss .storyText ul+blockquote,
   .ss .storyText ol+blockquote,
   .ss .storyText blockquote+blockquote {
      margin-top: 0px;
   }

   .ss .storyText .fact {
      box-sizing: border-box;
      float: none;
      width: 100%;
      display: block;

      margin: 0 0 1rem 0;
      padding: 1rem 10px 0px 10px;
      background: #F0F1F4;
      overflow: hidden;
   }

   .ss .storyText .fact h2 {
      margin: 0.125rem 0;
      font-size: 0.938rem;
      line-height: 1.25rem;
   }

   .ss .storyText .fact p,
   .ss .storyText .fact .remote {
      margin: 0.125rem 0 1rem;
      font-size: 0.938rem;
      line-height: 1.25rem;
   }

   .ss .storyText .fact ul {
      font-size: 0.938rem;
      line-height: 1.25rem;
      margin: 0.125rem 0 1rem;
   }

   .ss .storyText .fact li {
      background: url('../../news/common/images/bullet.dot.svg') 0px 8px no-repeat;
   }

   .ss .storyText .fact .image {
      margin: 0.875rem 0 1rem;
   }

   .ss .storyText .fact img {
      width: 50% !important;
   }

   .ss .storyText .fact .image .credit {
      position: absolute;
      top: -1rem;
      left: 0;
      text-align: left;
      font-size: 0.625rem;
      margin: 0;
      line-height: 1;
   }

   .ss .storyText .fact .image .caption {
      margin: 6px 0 1rem;
   }

   .ss .storyText img {
      display: block;
   }

   .ss .storyText .image {
      margin: 1.75rem 0 1.125rem 0;
   }

   .ss .storyText .image img {
      width: 100%;
      height: auto;
   }

   .ss .storyText .image .caption {
      margin: 6px 10px 0 10px;
      font-size: 0.938rem;
      line-height: 1.188rem;
   }

   .ss .storyText .image .credit {
      color: #A5A5A5;
      text-align: right;
      margin-right: 5px;
      font-size: 0.625rem;
   }

   .image {
      position: relative;
   }

   .image .credit {
      font-size: 0.625rem;
      position: absolute;
      top: -1.500em;
      right: 0;
   }

   .image {
      margin-top: 1em;
   }

   .image + .image {
      margin-top: 1.750rem;
   }

   .ss .storyText iframe.fullWidth {
      border: 0 none;
      /* workaround for ios safari: iframe always gets size from content;
       * for this to work, iframe needes scrolling=no
       */
      width: 1px;
      min-width: 100%;
   }

   /* for linked vollformat images, don't show caption, would be doubled */
   .ss .storyText .image.body a[href*="orf.at/vstories"] ~ .credit,
   .ss .storyText .image.body a[href*="orf.at/vstories"] ~ .caption {
      display: none;
   }


   .ss .storyText a {
      font-weight: bold;
   }

   .ss .storyText li {
      margin: 2px 0px 2px 6px;
      padding-left: 10px;
      background: url('../../news/common/images/bullet.dot.svg') 0px 0.5em no-repeat;
   }

   .ss .storyText hr {
      margin: 18px 0px 8px 0px;
   }

   .ss .storyText .code iframe, .storyText p iframe {
      max-width: 100%;
   }

   /** Tables **/

   .comboSelect {
      padding: 0.5rem 10px;
   }

   .comboSelect select {
      width: 100%;
      font-size: 1.125rem;
   }

   h3.tableTitle {
      font-weight: bold;
      font-size: 1.125rem;
      line-height: 1.5rem;
      margin: 1.125rem 10px 0.375rem;
   }

   .remote table {
      width: 100% !important;
      background: none !important;
      font-size: 0.938rem !important;
      margin: 0.125rem 0 1rem 0 !important;
   }

   .remote table.sport {
      font-feature-settings: "tnum";
   }

   .remote th,
   .remote td {
      padding: 4px;
   }

   .remote tr th:first-child,
   .remote tr td:first-child {
      padding-left: 10px;
   }

   .remote tr th:last-child,
   .remote tr td:last-child {
      padding-right: 10px;
   }

   .remote table tr.odd {
      background: #F3F4F6;
   }

   .remote tr.subHead,
   .remote tr.highlight,
   .remote table .highlight a  {
      font-weight: bold;
   }

   .remote tr.subHead td {
      padding-left: 10px;
      padding-top: 10px;
      border-top: 0;
   }

   .storyWrapper .remote .tableFooter {
      margin: -0.500rem 10px 1rem 10px;
      font-size: 0.938rem;
      line-height: 1.125rem;
   }

   /* Override existing margin on <p> */
   .storyWrapper .remote .tableFooter p {
      margin: 0 0 0.375rem 0;
      font-size: 0.938rem;
      line-height: 1.125rem;
   }

   /** Mobility Layer / Fussball **/
   .ss .remote .mobilitylayer {
      position: relative; /* for the [livetabelle] indicator */
   }

   .ss .remote .team-name img {
      display: none;
   }

   .ss .remote .mobilitylayer abbr,
   .ss .remote .mobilitylayer acronym {
      text-decoration: none;
      border: none;
   }

   .ss .remote .mobilitylayer h2 {
      margin-bottom: 0;
   }

   .ss .remote .mobilitylayer table {
      margin-top: 0;
      font-feature-settings: "tnum";
   }

   .ss .remote .mobilitylayer a {
      font-weight: 500;
   }

   .ss .remote .mobilitylayer thead th {
      padding-top: 0;
   }

   .ss .remote .mobilitylayer thead th {
      padding-top: 0;
   }

   .ss .remote .mobilitylayer .position,
   .ss .remote .mobilitylayer .drawn,
   .ss .remote .mobilitylayer .lost,
   .ss .remote .mobilitylayer .played,
   .ss .remote .mobilitylayer .points,
   .ss .remote .mobilitylayer .won {
      text-align: right;
   }

   .ss .remote .mobilitylayer .points {
      padding-right: 10px;
      font-weight: 700;
   }

   .ss .remote .mobilitylayer .goal-difference {
      text-align: center;
   }

   .ss .remote .mobilitylayer .live-table {
      position: absolute;
      top: 2px;
      left: 10px;
      display: inline-block;
      padding: 2px 5px 2px 5px;
      background-color: #e01f25;
      font-family: "ORF ON Condensed SC", Arial, Helvetica, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      font-size: 12px;
      line-height: 12px;
      font-weight: 400;
      text-align: center;
      letter-spacing: 0.5px;
      color: white;
      vertical-align: baseline;
   }

   .ss .storyText .image.opener {
      padding: 0;
      margin-left: 0;
      width: 100%;
   }

   .ss .storyText .stripe {
      margin: 0;
      width: 100%;
      height: auto;
      padding: 10px;
   }

   .ss .storyText .stripe * {
      display: none !important;
   }

   .ss .storyText .stripe:after {
      position: static;
      display: block;
      height: auto;
      left: 0;
      background: #F0F1F4;
      content: "Dieser Inhalt ist nicht mehr abrufbar.";
   }

   .ss .storyText .image.opener .credit,
   .ss .storyText .image.opener .caption {
      width: 100% !important;
      padding-left: 0 !important;
   }

   /** Hides OEWA pixel from footer **/
   .oewaWrapper {
      position: absolute;
      left: -1000px;
      top: 0px;
      clip: rect(1px, 1px, 1px, 1px);
   }

   .remote .globus {
      margin: 14px 0 !important;
      width: 100% !important;
      height: 450px !important;
      overflow: hidden !important;
   }
}

/*
 * Ticker
 */
.oon-ds-banner {
   box-sizing: border-box;
   position: fixed;
   bottom: 0;
   width: 875px;
   background-color: rgba(6, 64, 110, 0.95);
   color: white;
   font-size: 15px;
   line-height: 1.4em;
   padding: 40px 25px;
   /** on some sites like news parallax puts the banner below content **/
   /** parallax already does z-index 2 for navlinks on bottom of news/sport so bump even higher **/
   /** and topgridposition already has z-index 100 .. ugh **/
   z-index: 1001;
}
@media (max-width: 61.24em) {
   .oon-ds-banner {
      width: 100%;
      left: 0;
      padding: 10px;
      font-size: 14px;
   }
   .oon-ds-banner .buttons {
      margin-top: 5px;
   }
}
.oon-ds-banner .buttons {
   text-align: right;
   margin-top: 10px;
}
.oon-ds-banner h3 {
   margin-bottom: 20px;
   font-weight: 500;
}
.oon-ds-banner a {
   color: white !important;
   text-decoration: underline !important;
}
.oon-ds-banner a:hover, .oon-ds-banner a:focus {
   color: #ccc !important;
}
.oon-ds-banner button#ds-more {
   color: white !important;
   text-decoration: underline !important;
   cursor: pointer;
   background-color: transparent;
   border: none;
   float: left;
   font-size: 15px;
   line-height: 21px;
   padding: 0;
   font-family: "ORF ON", Arial, Helvetica, Lucida Sans Unicode, Lucida Grande, sans-serif;
}
.oon-ds-banner button#ds-more:hover, .oon-ds-banner button#ds-more:focus {
   color: #ccc !important;
}
.oon-ds-banner .buttons button#ds-accept {
   padding: 5px 25px;
   margin-left: 15px;
}
.oon-ds-banner button#ds-accept {
   display: inline-block;
   background-color: #06a318;
   letter-spacing: 2px;
   color: white;
   padding: 1px 6px;
   font-weight: 700;
   line-height: 20px;
   font-size: 15px;
   border: none;
}
.oon-ds-banner button#ds-accept:hover, .oon-ds-banner button#ds-accept:focus {
   background-color: #466199;
   color: white;
   text-decoration: none;
   cursor: pointer;
}
.oon-ds-banner .oon-ds-options {
   margin-top: 15px;
   padding: 10px;
   background-color: #5286c1;
   display: none;
   flex-direction: row;
}
.oon-ds-banner .oon-ds-options span {
   font-weight: 500;
}
.oon-ds-banner .oon-ds-options p {
   margin: 0px 0px 5px 19px;
   font-size: 14px;
}
.oon-ds-banner .oon-ds-options.oon-ds-visible {
   display: flex;
}

@media only screen and (max-width: 600px) {
   .oon-ds-options {
      flex-direction: column;
   }
}