/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v25-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v25-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    z-index: -1;
    padding: 0px;
    margin: 0px;
    background-color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
}
#wrap {
position: relative;
    width: 1920px;
    height: 1080px;
}
#outer {
position: relative;
    width: 1920px;
    height: 1080px;
    transform-origin: top left;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
}
	
.panel1 {
 position:absolute;
 box-sizing: border-box;
 top: 0;
 left: 0;
 background: rgba(255, 0, 0, 0.15);
 background: white;
 width: 435px;
 height: 1080px;
}
.panel2 {
 position:absolute;
 box-sizing: border-box;
 top: 0;
 left: 435px;
 background: rgba(0, 255, 0, 0.15);
 background-image: url("../images/header.jpg");
 width: 1485px;
 height: 120px;
}
.panel3 {
 position:absolute;
 box-sizing: border-box;
 top: 120px;
 left: 435px;
 background: #064072;
 width: 1485px;
 height: 45px;
 background: linear-gradient(to bottom, rgb(4, 37, 65) 0%, rgb(6, 61, 109) 22%, rgb(3, 34, 61) 97%, rgb(1, 16, 28) 100%);
}
.panel4 {
 position:absolute;
 box-sizing: border-box;
 top: 165px;
 left: 435px;
 background: rgba(255, 0, 255, 0.15);
 background-image: url("../images/content-back.jpg");
 width: 1485px;
 height: 835px;
}
.panel5 {
 position:absolute;
 box-sizing: border-box;
 top: 1000px;
 left: 435px;
 background: #064072;
 width: 1485px;
 height: 80px;
 
 background: -webkit-linear-gradient(top, rgb(4, 37, 65) 0%, rgb(6, 61, 109) 22%, rgb(3, 34, 61) 97%, rgb(1, 16, 28) 100%);
background: -o-linear-gradient(top, rgb(4, 37, 65) 0%, rgb(6, 61, 109) 22%, rgb(3, 34, 61) 97%, rgb(1, 16, 28) 100%);
background: -ms-linear-gradient(top, rgb(4, 37, 65) 0%, rgb(6, 61, 109) 22%, rgb(3, 34, 61) 97%, rgb(1, 16, 28) 100%);
background: -moz-linear-gradient(top, rgb(4, 37, 65) 0%, rgb(6, 61, 109) 22%, rgb(3, 34, 61) 97%, rgb(1, 16, 28) 100%);
background: linear-gradient(to bottom, rgb(4, 37, 65) 0%, rgb(6, 61, 109) 22%, rgb(3, 34, 61) 97%, rgb(1, 16, 28) 100%);
}

.sidenav {
    margin-bottom: 0;
    margin-top: 16px;
    list-style-type: none;
    padding-left: 0;
    font-size: 1.2rem;
    line-height: 1.3;

	font-family: Arial;
}

.sidenav__sublist {
    list-style-type: none;
    padding-left: 16px;
    margin: 0;
    font-size: 1rem;
}

.sidenav>li, .sidenav__sublist>li {
    margin-bottom: 0;
    max-width: unset;
}



.sidenav__item {
  
}

.sidenav  button {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
	 color: #000000;
	 background: none;
border: none;
cursor: pointer;
outline: none;
font-size: 1.2rem;
width: 100%;
text-align: left;
}

.sidenav  button:disabled {
 color: grey;
}

.sidenav button:focus {
  border-bottom: 1px solid #064072;
}

.sidenav .current {
    position: relative;
    color: #000000;
	background: #BFE2F5;

 
 
 
}





.topbarButton {
 background: #ffffff;

 height: 42px;
 width: 172px;
 color: #000000;
 padding-top: 2px;
 margin-right: 4px;
 position: absolute;
 bottom: 0px;
 right: 0px;
 border: none;
 cursor: pointer;
 font-size: 1.4rem;
 font-weight: bold;
 border-radius: 20px 20px 0px 0px; 

background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,241,239,1) 100%);
    border: 1px solid #C6C6C6;
	border-bottom: none;


box-shadow: #ffffff 0px 0px 0px 2px, #dcdcdc 0px 0px 0px 2px;



}

.xtopbarButton:before {
    content: "";
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
	border-radius: 17px 17px 0px 0px; 
   border: 1px solid #dcdcdc;
   border-bottom: none;
    position: absolute;
}



.playerNext {
 width: 109px;
 height: 53px;
 border-radius: 0px 40px 40px 0px; 
 border: 2px solid #dcdcdc;
 border-left: none;
 color: #000000;
 background: white;
 background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,241,239,1) 100%);
 font-size: 1.4em;
 font-weight: bold;
     border: 1px solid #C6C6C6;
 box-shadow: #ffffff 0px 0px 0px 2px, #dcdcdc 0px 0px 0px 3px;
}

.playerBack {
 width: 109px;
 height: 53px;
 border-radius: 40px 0px 0px 40px; 
 border-right: none;
 color: #000000;
 background: white;
 background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,241,239,1) 100%);
 font-size: 1.4em;
 font-weight: bold;
     border: 1px solid #C6C6C6;
 box-shadow: #ffffff 0px 0px 0px 2px, #dcdcdc 0px 0px 0px 3px;
}

#playerPreviousButton:hover, #playerNextButton:hover, .topbarButton:hover {
 background: #dddddd;
}

#carouselPreviousButton:hover, #carouselNextButton:hover {
	background: #222222;
}
#cdot0:hover, #cdot1:hover, #cdot2:hover, #cdot3:hover, #cdot4:hover, #cdot5:hover, #cdot6:hover, #cdot7:hover, #cdot8:hover, #cdot9:hover {
	background: #222222;
}

#playerContentButton:focus {
    opacity: 1;
    background: red;
}
#playerContentButton {
    opacity: 0;
}

#playerSkipContent {
    cursor: pointer;
    background: none;
    border: none;
}


.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}


.playerProgress {
width: 225px;
 height: 53px;
 border-radius: 40px 40px 40px 40px; 

 color: #000000;
 background: white;
 background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,241,239,1) 100%);
 font-size: 1.4em;
 font-weight: bold;
 text-align: center; 
 line-height: 53px; 
     border: 1px solid #C6C6C6;
 box-shadow: #ffffff 0px 0px 0px 2px, #dcdcdc 0px 0px 0px 3px;
}

:focus-visible {
    outline: 2px dotted blue;
    outline: 3px solid red;
   }

.nslider-dot:focus-visible {
 outline: 4px solid yellow;
}

#playerPageTitle:focus {
    outline: 2px dotted yellow;
}