/* SYSTEM RESET */



@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display: block;}
audio,canvas,video { display: inline-block;}
audio:not([controls]) { display: none; height: 0;}
[hidden] { display: none;}
html, body { width: 100%; height: 100%; }
html { font-family: 'Roboto', sans-serif;  font-style: normal; font-stretch: normal;  line-height: 22px; font-size: 15px; font-weight: 400;  letter-spacing: normal;  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-style: normal; font-stretch: normal;  }
body { margin: 0; top center no-repeat fixed; background-size: contain;  }

body.comp-msg {background: #fff;}
body.dialog {background: #fff;}
a:focus,a:active,a:hover { outline: none;}
abbr[title] { border-bottom: 1px dotted;}
b,strong { font-weight: bold;}
dfn { font-style: italic;}
* { box-sizing: border-box; outline: none;  }
mark { background: #ff0; color: #000;}
code,kbd,pre,samp { font-family: monospace, serif; font-size: 15px;}
pre { white-space: pre-wrap;}
small { font-size: 90%;}
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup { top: -0.5em;}
sub { bottom: -0.25em;}
img { border: 0;}
svg:not(:root) { overflow: hidden;}
figure { margin: 0;}
fieldset { border: 1px solid #888; width: 500px; margin-bottom: 20px;}
legend { color: #888; background: #f1f1f1; border: 1px solid #888; padding: 2px 6px; }
button,input,select,textarea { font-family: inherit; margin: 0; border-radius: 3px; color: #000; font-size: 15px; }
textarea{resize: none;}
button,input { line-height: normal;}
button,select { text-transform: none;}
button,html input[type="button"], input[type="reset"],input[type="submit"] { -webkit-appearance: none; cursor: pointer; }
button[disabled],html input[disabled] { cursor: default;}
input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}
button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0; border-radius: 3px; border: 0;}
input[type="text"], input[type="email"], input[type="password"], input[type="search"]{ -webkit-appearance: none; -moz-appearance: none;  appearance: none; border-radius: 3px; border: 0; height: 36px; border: 1px solid #888; padding: 5px 10px 4px; font-size: 15px;}
select { appearance: none; -webkit-appearance:none; max-width: 640px; background-color: #fff; border: 1px solid #808080; border-radius: 3px; height: 36px; padding: 7px 38px 5px 5px; width: 100%; font-size: 15px;}
select::-ms-expand { display: none;}
select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 18px) calc(1em - 2px), calc(100% - 10px) calc(1em - 2px), calc(100% - 2.5em) 0.5em; background-size: 8px 8px, 8px 8px, 1px 22px; background-repeat: no-repeat;}
select:focus { background-image: linear-gradient(45deg, #034e81 50%, transparent 50%), linear-gradient(135deg, transparent 50%,  #034e81 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 10px) calc(1em - 2px), calc(100% - 18px) calc(1em - 2px), calc(100% - 2.5em) 0.5em; background-size: 8px 8px, 8px 8px, 1px 22px; background-repeat: no-repeat; border-color:  #034e81; outline: 0;}
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000;}
::-webkit-input-placeholder {color: #999999;}
:-moz-placeholder { color: #999999; opacity:  1;}
::-moz-placeholder { color: #999999;  opacity:  1;}
:-ms-input-placeholder { color: #999999;}
::-ms-input-placeholder { color: #999999;}
::placeholder { color: #999999;}


body {width: 100%; margin: 0; padding: 0;  font-family: "Outfit", sans-serif; color: #444; font-size: 14px; line-height: 24px;} 		  
body.dark {background: #000;} 		 

header {height: 100px;}

header.dark {width: 100%; overflow: hidden; position: relative;}
header.dark video {width: 100%; height: 100%; }



.wrapp {max-width: 1400px; margin: 0 auto; width: 100%; position: relative; padding: 0 10px; }
.wrapp.top { top: 0; }
 		  


section {width: 100vw;height: 100vh;position: relative;	overflow: hidden;}

#bgfxwrapp video {	width: 110%;	height: 110%;	position: absolute;	object-fit: cover;	z-index: 0;	filter: blur(10px);	left: -5%;	top: -5%;}
#bgfxwrapp canvas {display: block; position: fixed;}


.homepage {background: #000; color: #fff;}
.homepage video.subpage1 {display: none;}
.subpage video.homepage {display: none;}
.subpage .header-ovgr {display: none;}



.rezist-logo { display: block; width: 280px; height: 90px; top: 10px; left: 0; position: absolute;  z-index: 10; }
.rezist-logo .logo-wrap { width: 80px; height: 80px;   z-index: 10; position: absolute;  }
.rezist-logo .logo-wrap:hover {transform: scale(1.2,1,2)}
.rezist-logo .part-g {  width: 100%; height: 100%; position: absolute; z-index: -10;}
.part-g.part-rc1 {background: url(/images/rc1.png) no-repeat; background-size: 100% 100%;}
.part-g.part-rc2 {background: url(/images/rc2.png) no-repeat; background-size: 100% 100%;}
.part-g.part-rc3 {background: url(/images/rc3.png) no-repeat; background-size: 100% 100%;}
.rezist-logo .name-wrap {	width: 200px;	font-size: 42px;	color: #fff;	margin: 25px 0 0 90px;}
.rezist-logo .name-wrap span {display: inline-block; font-weight: 500;}
.rezist-logo .name-wrap span.flip {transform: scaleX(-1);}
.rotate1 { animation:rotate1 60s infinite linear; }
.rotate2 { animation:rotate2 40s linear infinite; }
.rotate3 { animation:rotate3 20s linear infinite;}
@keyframes rotate1 { 0%{transform:rotate(1deg);}  50% {transform:rotate(181deg);} 100%{transform:rotate(360deg);}  }
@keyframes rotate2 { 0%{transform:rotate(-1deg);} 50%{transform:rotate(-180deg);} 100%{transform:rotate(-359deg);} }
@keyframes rotate3 { 0%{transform:rotate(2deg);}  50%{transform:rotate(181deg);}  100%{transform:rotate(359deg);}  }

header nav {
	text-align: right;
	padding: 42px 0 0 0;
}
header nav a {color: #fff; font-weight: normal; font-size: 18px; text-decoration: none; padding: 10px 10px 10px 20px; }

.prebody {height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); margin: 0 0 20px;}

article {
	border-radius: 4px;
	background: #fff;
	color: #000;
	margin: 0 400px 50px 90px;
	padding: 0 20px 20px;
	min-height: 600px;
	height: calc(100vh - 180px);
}

article h1 {margin: 0 0 20px 0; padding: 10px 0 0 0;}

.dark article {background: none; color: #fff;} 




#rplayer-wrapper {margin: auto;	max-width: 480px;	position: absolute;	right: 10px;	top: 75px;	width: 390px; z-index: 10;}

.wavesurfer-panel.panel-centered { height: 120px;  margin: 20px 0 0; position: relative; width: calc(100% - 2px); max-width: 480px; border-radius: 4px; background: rgb(255,255,255);  background: linear-gradient(180deg, rgb(242, 242, 242) 0%, rgb(210, 210, 210) 47%, rgb(164, 163, 163) 48%, rgb(236, 236, 236) 100%); border: 1px #fff solid;}
.wavesurfer-panel.panel-centered.has-playlist {border-radius: 4px 4px 0 0; margin: 0 0 -1px 0;}
.wavesurfer-panel.panel-centered button#playButton {position: absolute; z-index: 2; border-radius: 50%; padding: 5px; width: 80px; height: 80px; border: 0; color: #000; margin: 10px 15px; text-transform: uppercase; font-weight: bold; background: rgb(0,0,0); background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(43,43,43,1) 96%, rgba(55,55,55,1) 96%, rgba(0,0,0,1) 100%);	border: 1px #000 solid;}
.wavesurfer-panel.panel-centered button#playButton span {font-size: 58px;background: rgb(0,0,0);background: radial-gradient(circle, rgba(62,61,61,1) 9%, rgba(0,0,0,1) 100%);border-radius: 50%;	color: #fc3200;	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.52), -1px -2px 0 rgba(255, 255, 255, 0.2);	border: 1px #313131 solid;}
.wavesurfer-panel #waveform {width: calc(100% - 115px); height: 110px; margin: 5px 0 5px 110px; overflow: hidden; border-radius: 14px; background: #000; border: 1px #313131 solid;}
#muteButton, #unmuteButton, #halfmuteButton { position: absolute;	bottom: 9px;	left: 118px;padding: 2px 7px;	font-size: 11px;	color: #fff;background: rgba(31, 59, 68, 0.8);border-radius: 8px;	display: inline-block;z-index: 8;	cursor: pointer;	border: 0; }
#muteButton span, #unmuteButton span, #halfmuteButton span {font-size: 20px; vertical-align: middle;}
#muteButton { color: #eee;	 }
#unmuteButton, #halfmuteButton  {display: none; color: #eee; }
#unmuteButton {color: #fc3200}
#playerTimer {position: absolute;	bottom: 9px;	right: 16px;	padding: 2px 7px 2px 2px;	font-size: 11px;	color: #fff;	background: rgba(31, 59, 68, 0.8);	border-radius: 8px;	display: inline-block;	z-index: 8;	cursor: pointer;}
.sml-icon {display: inline-block; color: #fff;padding: 3px;	height: 24px;	width: 24px;}
#playerTimer .sml-icon, #playerTimer time { display: none; vertical-align: middle; }
#playerTimer .sml-icon span {font-size: 20px; }
#playerTimer .sml-icon {vertical-align: middle;	display: inline-block;	margin: -3px 0 0 0;}
#songSel {position: fixed; top: 180px; right: 0; width: 100%; max-width: 480px; text-align: center; margin: auto;}
#songSel a {border-radius: 2px; margin: 10px; background: #eee; color: #000; border: 1px #888 solid; display: inline-block; padding: 5px 10px;}
#my-audio {display: none;}
.button-panel.panel-centered {text-align: center;	height: 56px;	top: 50%;	margin: -28px 0 0 0;	position: absolute;	width: 100%;	max-width: unset;}

.panel-centered #coverart {	position: absolute;	width: 90px;height: 90px;	left: 10px;	top: 14px;	border: 1px #404040 solid;	border-radius: 4px; }
.panel-centered #coverart img {width: 100%; }
#playlist {position: relative; width: calc(100% - 2px); max-width: 480px; border-radius: 0 0 4px 4px; background: rgb(255,255,255);  background: linear-gradient(180deg, rgb(242, 242, 242) 0%, rgb(210, 210, 210) 47%, rgb(164, 163, 163) 48%, rgb(236, 236, 236) 100%); border: 1px #fff solid;}
#playlistWrapper {width: calc(100% - 10px); min-height: 120px; margin: 5px; overflow: hidden; border-radius: 4px; background: #eee; border: 1px #ccc solid; }
#playlistWrapper .track:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#playlistWrapper .track {cursor: pointer; position: relative; display: block; border-top: 1px #ddd solid; height: 43px; padding: 5px 10px; }

#playlistWrapper .track:first-child {border: 0;}
#playlistWrapper .track.active {background: rgba(255,255,255,0.85);}
#playlistWrapper .track span {display: inline-block; vertical-align: middle; line-height: 32px; color: #111;}
#playlistWrapper .track img {width: 22px; height: 22px;  display: inline-block; margin: 0 10px 0 0; }
#playlistWrapper .track button {position: absolute; right: 0; top: 5px; margin: 0 5px;  }
#playlistWrapper span.indexNo {width: 20px; }
#playlistWrapper span.trackTitle {width: calc(100% - 170px); font-weight: 700; }
#playlistWrapper span.trackYear {width: 50px; text-align: right; color: #666;}
#playlistWrapper span.trackPlaytime {width: 50px; text-align: right; }

#playlistWrapper .track button.play, #playlistWrapper button.pause {background: none; border: 0; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.52), -1px -2px 0 rgba(255, 255, 255, 0.2); }
#playlistWrapper .track button.play span {color: #fc3200 !important;}
#playlistWrapper .track button.pause span {color: #999 !important; }

button[id^="play-pause-"] { pointer-events: none;}







.dark .wavesurfer-panel.panel-centered {background: rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(55,55,55,1) 47%, rgba(43,43,43,1) 48%, rgba(0,0,0,1) 100%); border: 1px #404040  solid;}
.dark .wavesurfer-panel.panel-centered button#playButton {color: #000; background: rgb(0,0,0); background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(43,43,43,1) 96%, rgba(55,55,55,1) 96%, rgba(0,0,0,1) 100%);	border: 1px #000 solid;}
.dark .wavesurfer-panel.panel-centered button#playButton span {background: rgb(0,0,0);background: radial-gradient(circle, rgba(62,61,61,1) 9%, rgba(0,0,0,1) 100%);	color: #fc3200;	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.52), -1px -2px 0 rgba(255, 255, 255, 0.2);	border: 1px #313131 solid;}
.dark .wavesurfer-panel #waveform {border-radius: 14px; background: #000; border: 1px #313131 solid;}
.dark #muteButton, #unmuteButton, #halfmuteButton { color: #fff;background: rgba(31, 59, 68, 0.8); }
.dark #muteButton { color: #eee;	 }
.dark #unmuteButton, #halfmuteButton  {display: none; color: #eee; }
.dark #unmuteButton {color: #fc3200}
.dark #playerTimer {color: #fff;	background: rgba(31, 59, 68, 0.8);}
.dark .sml-icon {color: #fff;}
.dark #songSel a {background: #eee; color: #000; border: 1px #888 solid;}
.dark #my-audio {display: none;}
.dark #playlist {background: rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(55,55,55,1) 47%, rgba(43,43,43,1) 48%, rgba(0,0,0,1) 100%); border: 1px #404040  solid; }
.dark .panel-centered #coverart {	border: 1px #404040 solid; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(55,55,55,1) 47%, rgba(43,43,43,1) 48%, rgba(0,0,0,1) 100%); border: 1px #404040  solid;}
.dark #playlistWrapper {background: #011722; border: 1px #313131 solid; }
.dark #playlistWrapper .track {border-top: 1px #25454d solid;}
.dark #playlistWrapper .track.active {background: rgba(255,255,255,0.05);}
.dark #playlistWrapper .track span {color: #fff;}
.dark #playlistWrapper span.trackYear {color: #4e747d;}
.dark #playlistWrapper .track button.play, #playlistWrapper button.pause {text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.52), -1px -2px 0 rgba(255, 255, 255, 0.2); }
.dark #playlistWrapper .track button.play span {color: #fc3200 !important;}
.dark #playlistWrapper .track button.pause span {color: #eee !important; }












.footer {	font-weight: 900;	border-radius: 4px 0 0 0;	position: fixed;right: 0;	bottom: 0;	font-size: 11px;letter-spacing: 1px;text-align: center;	background: #2f2f2f;color: #c8c8c8;	width: 140px;	padding: 1px 2px 1px;}
    
   



footer { position: fixed;	bottom: 0;left: 0;right: 0;	width: 100%;height: 300px;background: transparent url(warsaw.jpg) bottom center repeat-x;	 animation: animateBackground 90s linear infinite;}
@keyframes animateBackground{   0% {	background-position: 0px 0px;  }  100% { background-position: -2814px 0px; }}

.btn {display: inline-block; text-align: center; text-decoration: none; padding: 15px 0 10px; font-size: 24px; background: none; color: #fff; border-bottom: 3px rgba(255,255,255,0.5) solid; line-height: 24px;}
.btn.enter {width: 120px; height: 28px; position: relative; opacity: 0.5}
.btn.enter:hover { opacity: 1; animation-name: triangleMove; animation-duration: 1s; animation-iteration-count: infinite; transition-timing-function: linear; border-bottom: #ff0c00 solid 3px;}



#minimized-player {display: none; background: #ff0; position: fixed; left: 0; bottom: 0; width: 400px;}
#minimized-player div {border: 1px #000 solid;}
#minimized-player { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: #f3f3f3; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);}
.now-playing { color: green; font-weight: bold;}
button { margin-right: 10px;}








#logDisplay {z-index: 1000; width: 100%; max-width: 360px; position: fixed;  right: 0; bottom: 0; height: 30vh; padding: 5px; font-size: 12px;}

    
   
     .footer {font-weight: 700; position: absolute; right: 0; bottom: 0; font-size: 11px; letter-spacing: 2px;  text-align: center; background: #ff0c00; color: #fff; width: 160px; padding: 5px 10px; }












@keyframes triangleMove{
  10%{   transform: translateX(-1px);   filter: blur(3px);  }
  20%{   transform: translateX(2px);    filter: blur(0);  }
  30%{    transform: translateX(-1px) skew(0deg);   filter: blur(55px);  }
  40%{    transform: translateX(1px);    filter: blur(0);  }
  50%{    transform: translateX(-1px);  }
  60%{    transform: translateX(2px);    filter: blur(5px);  }
  70%{    transform: translateX(-2px);    filter: blur(0);  }
  80%{    transform: translateX(1px);    filter: blur(2px);  }
  90%{    transform: translateX(-1px);        filter: blur(12px);  }
  100%{    transform: translateX(2px);  }
}



@media only screen and (max-width: 960px) {
.header-block {height: 15vh;}
.header-ovgr {height: 5vh;}    

footer {	height:250px; background-size: cover; animation: animateBackground 120s linear infinite;}
@keyframes animateBackground{   0% {	background-position: 0px 0px;  }  100% { background-position: -2814px 0px; }}
 
}


.header-block, footer {display: none;
}