body, html{
  width: 100%;
  /*height: 100%;*/
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
  color: white;
}
.container {
  position: relative;
  width: 100%;
}
.container .content {
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
  width: 95%;
  max-width: 1280px;
  min-height: 360px;
  /*max-height: 720px;*/
  display: flex;
  flex-flow: column;
  /*max-width: 1280px;
  height: 90%;
  max-height: 720px;*/
}

.container .main {
	position: relative;
	width: 100%;
	/*display: table-row;*/
}

.container .main .buttons {
	/*position: absolute;*/
}

.container .main .slides {
	/*width: calc(100% - 80px);*/
	height: 100%;
	margin: auto;
	display:flex;
}

.container .main .side-panel {
	/*position: relative;*/
	position: absolute;
	width: 25%;
	height: 100%;
	left: 45px;
	overflow: hidden;
	/*display: table-cell;*/
}

.container .main .side-panel .side-panel-content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.container .main .side-panel .background {
	position: absolute; 
	width: 100%;
	height: 100%;
    background-color: #eee;
    margin: 0;       
    top: 0;
    opacity: .9;
}

.container .main .side-panel .info {
	position: relative;
	margin: 10px 10px;
    height: calc(100% - 20px);
	overflow-x: hidden;
    overflow-y: auto;
}

.container .main .side-panel .info .description {
	position: absolute;
	color: #333;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

.container .main .slide {
	/*position: relative;*/
	position: absolute;
	width: calc(100% - 90px);
	height: 100%;
	margin: auto;
    left: 0;
    right: 0;
	/*min-height: 460px;
    max-height: 720px;*/
	/*display: table-cell;*/
}

.container .main .slide div {
	position: absolute;
	margin: auto;
	height: 100%;
	width: 100%;
	text-align: center;
	display: flex;
	/*left: 0;
	right: 0;*/
	user-select: none;
	/*width: 85%;*/
}

.container .main .slide div:nth-child(1) {
	/*position: relative;*/
}

.container .main .slide img {
	/*position: absolute;
    top: 50%;
    transform: translateY(-50%);*/
	left: 0;
	margin: auto;
    right: 0;
	/*height: 100%;*/
}

.container .right-buttons {
	width: 40px;
	display: table-cell;
}

/*TYTUŁY*/
.titles {
  height: 30px;
  position: relative;
  z-index: 20;
  overflow-y: hidden;
}

.title {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #444;
}

/*MINIATURY*/
.thumbs {
	position: relative;
	width: 100%;
	margin: 10px 0;
	overflow: hidden;
}

.thumbs .thumbs-content div {
	cursor: pointer;
	float: left;
	user-select: none;
}

.thumbs .thumbs-content div img {
  height: 50px;
  vertical-align: middle;
}

.button {
  position: absolute;
  z-index: 100;
  top: 50%;
  cursor: pointer;
  /*opacity: 0.75;*/
  width: 40px;
  height: 40px;
  stroke-width: 8px;
  stroke: #3494AB;
  fill: transparent;
}

#leftArrow {
  left: 0;
  transform: translateY(-50%);
}

#rightArrow {
  right: 0;
  transform: translateY(-50%);
}

#infoButton {
  top: 10px;
  left: 0;
}

#audioControlButton {
  top: 60px;
  left: 0;
}

.black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  visibility: hidden;
}

#audioButton {
	position: absolute;
    width: 220px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    stroke-width: 5px;
    stroke: #252525;/*#3494AB;*/
	/*fill: #fff;*/
	fill: transparent;
	cursor: pointer;
	z-index: 100;
}

#audioButton polyline {
	fill: #252525;/*#3494AB;*/
}

.scroll {
  position: relative;
  height: 30px;
}

#scrollRange
{
  width: 100%;
}

audio {
  position: relative;
  display: block;
  width: calc(100% - 86px);
  margin: auto;
  height: 25px;
}

@media (max-width: 1024px) {
  .container .main #infoButton {
	display: none;
  }
  .container .main #audioControlButton {
    top: 10px;
  }
  .container .main .slides {
    display: block;
  }
  .container .main .slide {
	position: relative;
  }
  .container .main .slide img {
	transform: translate(0, 0) matrix(1, 0, 0, 1, 0, 0) !important;
  }
  .container .main .side-panel {
	position: relative;
    width: calc(100% - 90px);
	height: 110px;
  }  
  .container .main .side-panel .side-panel-content {
	/*position: relative;*/
	transform: translate(0, 0) matrix(1, 0, 0, 1, 0, 0) !important;
  } 
  .container .titles {
    order: 1;
  }
  .container .main {
    order: 2;
  }
  .container audio {
    order: 3;
  }
  .container .thumbs {
    order: 4;
  }
  .container .scroll {
    order: 5;
  }
}

input[type="range"] { 
  margin: auto;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  height: 30px;
  cursor: pointer;
  border-radius: 0; 
  background: rgba(0, 0, 0, 0);
}
input[type=range]:focus {
  outline: none;
}

::-webkit-slider-runnable-track  {
  background: #ddd;
  height: 6px;
}

::-webkit-slider-thumb{
  -webkit-appearance: none;
  background: #fff;
  height: 30px;
  width: 30px;
  border: 3px solid #3494AB;
  border-radius: 50% !important;
  margin-top: -12px;
}

::-moz-range-track{
  height: 6px;
  background: #ddd;
}

::-moz-range-thumb  {
  background: #fff;
  height: 30px;
  width: 30px;
  border: 3px solid #444;
  border-radius: 50% !important;
  box-sizing: border-box;
}

::-ms-thumb { 
  background: #fff;
  height: 30px;
  width: 30px;
  border: 3px solid #444;
  border-radius: 50% !important;
  box-sizing: border-box;
}
::-ms-track { 
  background: #ddd;
  color: transparent;
  height: 6px;
  border: none;
}

::-ms-ticks-after { 
  display: none; 
}

::-ms-ticks-before { 
  display: none; 
}
::-ms-fill-lower {
  background: rgba(0, 0, 0, 0);
}
input[type=range]::-ms-tooltip {
  display: none;
}

body ::-webkit-scrollbar{-webkit-appearance:none;width:10px;height:10px}body ::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}body ::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:rgba(0,0,0,.25);-webkit-transition:color .2s ease;transition:color .2s ease}body ::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.15)}body ::-webkit-scrollbar-thumb:hover{background:rgba(128,135,139,.8)}body .ui.inverted::-webkit-scrollbar-track{background:hsla(0,0%,100%,.1)}body .ui.inverted::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.25)}body .ui.inverted::-webkit-scrollbar-thumb:window-inactive{background:hsla(0,0%,100%,.15)}body .ui.inverted::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.35)}