.vmiddle {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.pgCenterP { /* centering the page parent */
  display: block;
  width: 980px; /* 1280px;*/
  margin: 0 auto;
}
.pgCenterC { /* centering the page child */
  display: block;
  width: 980px;
  text-align: left;
}

#spxDxHeader { 
  /* Here is header with logospace and navi. 
     But this is just the container for headerfix, 
     only the content has to be moved down 
     with this backgroundcolor 
   */
  background-color: #0b1124;
  font: normal 15px 'Saira', Arial ,sans-serif;
}
#spxDxHeader .edi,
#spxDxHeader .nav .lvl1 .itm1 > .ct {
  font-family: 'Open Sans', Arial, sans-serif;
}

#spxDxHeader img {
  border: 0;
  display: block;
}
#spxDxHeader .nav ul, #spxDxHeader .nav ol, #spxDxHeader .nav li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

#spxDxHeader #headerfix { 
  /* The header has the background color, is all 
     position fixed and stretches over the complete
     browser width 
   */
  background-color: #0b1124;
  position: fixed;
  width:100%;
  top:0;
  left:0;
  z-index: 10000;
  transition:all 0.3s linear;
}



/*LOGO SPACE*/

#spxDxHeader .logoSpace { 
  /* The upper line of the header contains the logo,
     social buttons, search and editions links.
     Since the content is centered on half left, 
     the space to center the logo and put the social 
     buttons and edition links to left and right is 
     put also half left over the content.  
   */
  min-width: 980px;
  /*xmargin-right: 310px; the difference between 1280px and 970px */
  height: 80px;
  position: relative;
  overflow: hidden;
  transition:all 0.3s linear;
}
/* @media (max-width: 1010px) {  if the width of the browswer is reduced below 970px + 2x20px = 1010px the right and left distance from right and left elements of the first line are dropped 
  #spxDxHeader .l {
    margin-left: 0px;
  }
  #spxDxHeader .r {
    margin-right: 0px;
  }
}
*/

#spxDxHeader.small .logoSpace { 
  /* If the header is collapsed from scrolling down 
     the height of the upper logo space is reduced
   */
  height: 0;
}
#spxDxHeader.small.nl2 #headerfix { 
  /* If the header is collapsed from scrolling down 
     and the second navi line is showing, move the 
     header up to show only this second navi line.
     Override this, if there is more space used, 
     for example the global navi from nba.
   */
  top: -44px;
}

#spxDxHeader .logoBig { 
  /* Center the logo horizontal and vertical without knowing its size.
   */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform:    translate(-50%, -50%);
  -ms-transform:     translate(-50%, -50%);
  -o-transform:      translate(-50%, -50%);
  transform:         translate(-50%, -50%);
  
}
#spxDxHeader .logoBig a { 
  /* Most commonly the logo is linked to the homepage.
     If there are more than one logo and they are 
     separately linked, these links are vertically aligned to the middle.
   */
  vertical-align: middle;
}
#spxDxHeader .logoSpace .l { 
  /* The left element from logoSpace contains the search and edition links */
  position: absolute;
  left: 0;
  margin-left: 20px;
  /* transition:all 0.5s ease; */
}
#spxDxHeader .logoSpace .r { 
  /* The right element from logoSpace contains the social buttons */
  position: absolute;
  right: 0;
  margin-right: 20px;
  /* transition:all 0.5s ease; */
}


/* NAVIGATION */

#spxDxHeader .nav {
  /* The multilined navigation under the logoSpace */
  position: relative;
  color: #fff;
}
#spxDxHeader .nav .pgCenterC { 
  /* The navi is set to be the same width as 
     the content and positioned over the content as well.
     This definition overrides the global page centering 
     definitions handling the white space left and right from content.
   */
  margin: 0 5px;
  width: 970px;
}


/* NAVIGATION SMALL LOGO */

#spxDxHeader .nav .logoSmallP {
  /* A parent element for absolute positioning left from navi
     Using a page centering construct under the navi, places 
     an anchor at navi bottom and content left only if the 
     inner tag is defined as position relative.
   */
  position: relative;
}
#spxDxHeader .nav .logoSmall { 
  /* If the header is collapsed by scrolling down, 
     the smaller logo is shown left from the navi. 
     If the browser-width is larger than content 
     width you can see it.
     This is the definition for the smaller logo 
     but it is unvisible. The next style shows the 
     logo if the small class is added to the header 
     root element.
   */
  display: block;
  position: absolute;
  right: 1000%;
  opacity: 0.3;
  transition:right 0s linear 0.3s,opacity 0.3s linear; /* right starts after some time, but works instantly on activating .small */  
  bottom: 10px; /* override this if the image is changed i.e. for another destination */
}

#spxDxHeader.small .nav .logoSmall { 
  /* Activating the small logo left from navi 
     if the header is collapsed from scrolling down. */
  opacity: 1;
  right: 102%;
  transition:opacity 0.3s linear; /* definition for fade in:
   the right value changes instantly because this transition works on small and overrides the transition from non small */ 
}


/* NAVIGATION ITEMS */
#spxDxHeader.small .nav {
  font-size: 15px;  
} 

#spxDxHeader .nav .itm { 
  /* Common definitions for any navi item */
  font-weight: normal;
  display: inline-block;
}
#spxDxHeader .nav .itm .ct { 
   /* The content of the navi item is to be stretched to the click and hover space */
  color: inherit;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 44px; /* height definition and vertically centering*/
}
#spxDxHeader .nav .lvl1over .itm .ct { 
  /* The second overlay navi must stretch over the border. */
  line-height: 46px; /* height definition and vertically centering*/
}

#spxDxHeader .nav .sep { 
  /* the separator for any navi line */
  display: inline-block;
  background-color: #fff;
  padding: 0;
  width: 1px;
  height: 25px;
  margin-top: -5px;
  vertical-align: middle;
  opacity: .5;
}

#spxDxHeader .nav .lvl1 { 
  /* The first navigation line has borders on top and bottom */
  border: 4px solid #fb3500;
  border-width: 4px 0 0 0;  
  display: block;
}
#spxDxHeader .nav .lvl1 .itm1.sel{ 
  /* lvl1 selection */
  background: #fb3500;
}
#spxDxHeader .nav .lvl1 .itm1.ov:hover {
  /* lvl1 hover if overlay is enabled */
  background-color: #fff;
}
#spxDxHeader .nav .lvl1 .itm1.ov:hover > .ct {
  color: #0b1124;
}

#spxDxHeader .nav .lvl1over .itm2:hover,
#spxDxHeader .nav .lvl2 .itm2:hover > .ct 
{
  background: rgba(0,0,0,0.15);
}

#spxDxHeader.small .nav .lvl2 .itm2:hover > .ct {
  background-color: #3d3d3d;  
} 

#spxDxHeader .nav .lvl2 .itm2.sel {
  /* selection on mouse over or selected */
  background: rgba(0,0,0,0.15);
}
#spxDxHeader .nav .lvl3 .itm3:hover .ct {
  /* selection on mouse over or selected */
  font-weight: bold;
}
#spxDxHeader .nav .lvl2 .itm2.imp .ct,
#spxDxHeader .nav .lvl1over .itm2.imp .ct {
  font-weight: bold;
}
#spxDxHeader .nav .lvl1 .itm1 .ct {
  /* the navi items of the first level are with fixed width */
  width: 150px;
  text-align: center;
}
#spxDxHeader .nav .lvl1 .itm1 > .ct {
  font-weight: bold;
}
#spxDxHeader .nav .lvl1 .itm1 .itm2 .ct {
  /* since level 1 navi items are with fixed width, the .lvl1over- items of level 2 have to reset the width*/
  width: initial;
}
#spxDxHeader .nav .lvl1over { 
  /* This is a level 2 navi line that appears only on 
     mouseover from a top-level navi item
   */
  position: absolute;
  display: block;
  overflow: hidden;
  top: 48px;
  height: 0;
  left:0;
  width: 100%;
  background-color: #fff;
  text-align: left;
  opacity: 0;
  z-index:1;
  transition:all 0.3s linear 0.3s;
}
#spxDxHeader .nav .lvl1over .itm2 > .ct {
  color: #0b1124;
}

/* transition target */
#spxDxHeader .nav .lvl1 .itm1:hover .lvl1over { 
  /* On mouseover on a top-level navi item the level 2 navi line appears */
  height: 46px;
  opacity: 1;
  transition:all 0.3s linear;
}

#spxDxHeader .nav .itm2,
#spxDxHeader .nav .lvl2 .sep
{ /* The level 2 navi items are aligned left so they define a margin to the right */
  margin-right: 0px;
}
#spxDxHeader .nav .itm2 .ct {
  /* The padding of level 2 navi items have an impact on the count of items that 
     can be shown */   
  padding: 0 12px;
}
#spxDxHeader .nav .lvl2 { 
  /* This is the permanent level 2 navi line */
  display: block;
  background-color: #fb3500;
  transition:background-color 0.5s linear;
}
#spxDxHeader.small .nav .lvl2 { 
  /* If the header is collapsed from scrolling down, the navi background is changed */
  background-color: #0b1124;
}
#spxDxHeader.small .nav .lvl1 {
  border-width: 0 0 4px 0;  
}
#spxDxHeader .nav .lvl2 .pgCenterC,
#spxDxHeader .nav .lvl1 .pgCenterC {
  white-space: nowrap;
}
#spxDxHeader .nav .lvl2 .pgCenterC {
  position: relative;
}
#spxDxHeader .nav .lvl3 { 
  /* The level 3 navi is a dropdown that appears only on mouseover 
     from a level 2 navi item 
   */
  position: absolute;
  display: block;
  padding: 10px 0;
  background-color: #fff;
  color: #3d3d3d;
  margin: 0px 0 0 0px;  /*margin: 0px 0 0 -40px;*/
  width: 250px;
  text-align: left;
  transition:all 0.1s linear;
  -webkit-transition-delay: 0.3s; /* Safari */
  transition-delay: 0.3s;
  transform: rotateY(-90deg);
  /*box-shadow: 3px 3px 15px #888888;*/  
}
#spxDxHeader .nav .dots .lvl3 {
  margin: 0px 0 0 -195px;  
} 

#spxDxHeader .nav .lvl2 .itm2:hover .lvl3  { 
  /* On mouseover on a level 2 navi item the dropdown navi appears */
  transform: rotateY(0deg);
}
#spxDxHeader .nav .lvl3 .itm3 { 
  /* Level 3 navi items are blocks */
  display: block;
  margin: 0 10px;
}
#spxDxHeader .nav .lvl3 .itm3 .ct { 
  /* The navi items are left aligned and stretch to 100% width */
  line-height: 30px;
  padding: 0 0 0 10px;
  width: 100%;
  color: #000000;
  white-space: nowrap;
}
#spxDxHeader .lvl3::before {
  /* the arrow is on top of the dropdown */
  content: '';
  position: absolute;
  display: block;
  top: -10px;
  left: 8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
}
#spxDxHeader .dots .lvl3::before {
  left: 205px;
}
#spxDxHeader .nav span.ct {
  cursor: default;
}

#spxDxHeader .logoSpace .edi span,
#spxDxHeader .logoSpace .edi a,
#spxDxHeader .logoSpace .edi s {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
#spxDxHeader .logoSpace .edi .lbl {
  font-size: 12px;
  color: #fff;
  opacity: .9375;
}
#spxDxHeader .logoSpace .edi .itm {
  width: 30px;
  height: 30px;
  opacity: 0.5;
}
#spxDxHeader .logoSpace .edi .itm.sel,
#spxDxHeader .logoSpace .edi .itm:hover {
  opacity: 1;
}
#spxDxHeader .logoSpace .edi .sep {
  width: 1px;
  background-color: #fff;
  height: 10px;
  opacity: .5;
}
#spxDxHeader .logoSpace .edi .de {
  background: url(https://www.spox.com/pub/pic/header16/edi-de.svg) no-repeat center center;
}
#spxDxHeader .logoSpace .edi .at {
  background: url(https://www.spox.com/pub/pic/header16/edi-at.svg) no-repeat center center;
}
#spxDxHeader .logoSpace .edi .ch {
  background: url(https://www.spox.com/pub/pic/header16/edi-ch.svg) no-repeat center center;
}


#spxDxHeader .logoSpace .searchbg {
  width: 150px;
  height: 30px;
  background: url(https://www.spox.com/pub/pic/header16/search-bg.svg) no-repeat center center;
  position: relative;
}
#spxDxHeader .logoSpace .searchbg.sel {
  opacity: 1;
}
#spxDxHeader .logoSpace .searchbg .plh {
  margin:4px 0 0 34px;
  position: absolute;
  top:0;
  left:0;
  color: #fff;
  font-size: 15px;
  opacity: .9375;
}
#spxDxHeader .logoSpace .searchbg .fld {
  position: absolute;
  top:0;
  left:0;
  text-align: left;
  margin:4px 0 0 34px;
  width: 102px;
  color:#fff;
  font-size: 15px;
  height: auto;
  min-height:16px;
  white-space: nowrap;
  overflow: hidden;  
  outline:0;
}

#spxDxHeader .logoSpace .soc a,
#spxDxHeader .logoSpace .soc s {
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
}

#spxDxHeader .logoSpace .soc .sep {
  width: 1px;
  background-color: #fff;
  height: 10px;
}
#spxDxHeader .logoSpace .soc .itm {
  width: 30px;
  height: 30px;
  opacity: .9375;
  padding:0;
}
#spxDxHeader .logoSpace .soc .instagram {
  background: url(https://www.spox.com/pub/pic/header16/soc-instagram.svg) no-repeat center center;
}
#spxDxHeader .logoSpace .soc .facebook {
  background: url(https://www.spox.com/pub/pic/header16/soc-facebook.svg) no-repeat center center;
}
#spxDxHeader .logoSpace .soc .twitter {
  background: url(https://www.spox.com/pub/pic/header16/soc-twitter.svg) no-repeat center center;
}
#spxDxHeader .logoSpace .soc .tiktok {
  background: url(https://www.spox.com/pub/pic/header16/soc-tiktok.svg) no-repeat center center;
}
#spxDxHeader .logoSpace .soc #mikslink {
  background: url(https://www.spox.com/pub/pic/header16/soc-mobil.svg) no-repeat center center;
}

.nl1 { 
  /* The content has to move down below the position
     fixed header. nl1 defines navi level 0 height 
   */
  padding-top:132px;
}
.nl2 { 
  /* The content has to move down below the position
     fixed header. nl2 defines navi level 1 height
   */
  padding-top:177px;
}

/* manual separator definition 
.sni2053474 .ct {
  padding: 0 10px;
}
.sni2053474::before {
  content:"";
  display: inline-block;
  background-color: #fff;
  padding: 0;
  width: 1px;
  height: 25px;
  margin-top: -5px;
  vertical-align: middle;
}*/

/* here we define special navi items to be outside the navi
.sni239762 {
  display: block;
  position: absolute;
  right: 102%;
}

#spxDxHeader .nav .sni2128838 {
  display: block;
  top: 3px;
  position: absolute;
  left: 102%;
  color: transparent;
  background: url(https://www.spox.com/pub/pic/header16/search-bg.svg) no-repeat center center;
}
#spxDxHeader .nav .sni2128838 a.ct {
  width: 150px;
  height: 30px;
  padding: 0;
}
#spxDxHeader .nav .lvl2 .itm2.sni2128838:hover > .ct {
  background: transparent;
}
*/
/* These Navipoints are graphics outside the navi so they are hidden within the overlay navi */
#spxDxHeader .nav .lvl1over .sni2382228, /*NBA-Store*/
#spxDxHeader .nav .lvl1over .sni2382227, /*NBA-LeaguePass*/
#spxDxHeader .nav .lvl1over .sni2382221, /*NFL-GamePass*/
#spxDxHeader .nav .lvl1over .sni2382222, /*NFL-Shop*/
#spxDxHeader .nav .lvl1over .sni3401661, /*MLB-GamePass*/
#spxDxHeader .nav .lvl1over .sni3401662  /*MLB-Shop*/
{
  display: none;
}

@media (max-width: 1110px){ 
  #spxDxHeader.small .nav .logoSmall {
    right: 1000%;
    opacity: 0.3;
  }
}

#spxDxFooter {
  overflow: hidden;
  background-color: #0b1124;
  font: normal 15px 'Saira', Arial ,sans-serif;
  padding: 0 0 20px 0;
  margin: 20px 0 0 0;
  color: #fff;
}
#spxDxFooter .lnks {
  border: 1px solid #fb3500;
  border-width: 1px 0;
  height: 44px;
}
#spxDxFooter .lnks .items .tbl {
  display: table;
  width:100%;
  margin: 0;
  padding:0;
}
#spxDxFooter .lnks .items .tr {
  display: table-row;
}

#spxDxFooter .lnks .items a {
  display: table-cell;
  line-height: 44px;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

#spxDxFooter .lnks .items a:hover {
  background-color: #3d3d3d;
  text-decoration: none; 
}

#spxDxFooter .mid {
  text-align: center;
}
#spxDxFooter p {
  margin: 20px 0;
}
#spxDxFooter img {
  border:0;
}