/* Web Page for Illumination
* Daniel Golawski */

html.js, .js body {
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	background: #DCDCDC;
	margin: 0; 
}

/* DO ZMIANY ORIENTACJI */
/* body:fullscreen{
	width: 100%;
	height: 100%;
	margin: 0; 
	overflow: hidden;
} */

/*         					SCROLLBAR					 */
/* width */
::-webkit-scrollbar {
	width: 7px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px white; 
	border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background:black; 
	border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: black; 
  }








/* Menu */

.menu{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	/* padding: 20px; */
	text-align: center;
	background: #DCDCDC; 
}

.js .menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 50vh;
	padding: 30px;
	pointer-events: none;
	opacity: 0; 
	background: transparent;
	-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
	transition: transform 1.2s, opacity 1.2s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-transform: translate3d(0, 150px, 0);
	transform: translate3d(0, 150px, 0);
}

.js .menu--open {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.menuItem {
	width: 33%;
	/* padding: 1em; */
	/* font-family: 'Scada', sans-serif; */
	/* font-family: 'Muli', sans-serif; */
	font-family: 'PT Sans', sans-serif;
}

.link {
	font-size: 0.85em;
	font-weight: bold;
	position: relative;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}



.link--page{
	display: block;
	color: black;
}

.link--page:not(.link--faded)::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	width: 30px;
	height: 2px;
	margin: 5px 0 0 -15px;
	background: #fff;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale3d(0, 1, 1);
	transform: scale3d(0, 1, 1);
}

.link--page:hover:before {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

#logo_container{
	position: absolute;
	width: 100%;
	height: 60vh;
	margin-top: 19vh;
	z-index: 400;
}

#logo{
	height: 62vh;
	width: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
	transition: opacity 4s;
	-webkit-transition: opacity 4s;
	-moz-transition: opacity 4s;
	-o-transition: opacity 4s;
}

/* PageContainer */
.pagesContainer{
	z-index: 100;
	pointer-events: none;
	-webkit-perspective: 1200px;
	perspective: 1200px; 
	-webkit-perspective-origin: 50% -50%;
	perspective-origin: 50% -50%; 
}

.js .pagesContainer--open .page {
	cursor: pointer;
	-webkit-transition: -webkit-transform 0.45s, opacity 0.45s;
	transition: transform 0.45s, opacity 0.45s;
	-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}



/* Page */

.page{
	position: relative;
	display: flex;
	/* padding-top: 65px;  */
	z-index: 5;
	overflow: auto;
	width: 100%;
	height: 100vh;
	background: white;
	pointer-events: auto;

	/* box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); */
}

.js .page--inactive {
	position: absolute;
	z-index: 0;
	top: 0;
	opacity: 0;
}


/* menuButton */
/* usunąć i jeszcze raz napisać atybuty dla tego przycisku */
.menuButton {
	position: absolute;
	z-index: 1000;
	top: 30px;
	left: 30px;
	width: 30px;
	height: 24px;
	padding: 0;
	cursor: pointer;
	border: none;
	outline: none;
	background: transparent;
	opacity: 0;
	transition: opacity 4s;
	-webkit-transition: opacity 4s;
	-moz-transition: opacity 4s;
	-o-transition: opacity 4s;
}
.no-js .menuButton {
	display: none;
}

.menuButton::before,
.menuButton::after,
.menuButton span {
	background: white;
}

.menuButton::before,
.menuButton::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	pointer-events: none;
	-webkit-transition: -webkit-transform 0.25s;
	transition: transform 0.25s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.menuButton span {
	position: absolute;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 2px;
	text-indent: 200%;
	-webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;      
    -o-transition: opacity 0.25s;    
    transition: opacity 0.25s;
}

.menuButton::before {
	-webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
	transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
}

.menuButton::after {
	-webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
	transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
}

.menu-button--open span {
	opacity: 0;
}

.menuButton--open::before {
	-webkit-transform: rotate3d(0, 0, 1, 45deg);
	transform: rotate3d(0, 0, 1, 45deg);
}

.menuButton--open::after {
	-webkit-transform: rotate3d(0, 0, 1, -45deg);
	transform: rotate3d(0, 0, 1, -45deg);
}

/* ------------------------------------------------------------------- */
.menuButton2 {
	position: absolute;
	z-index: 1000;
	top: 30px;
	left: 30px;
	width: 30px;
	height: 24px;
	padding: 0;
	cursor: pointer;
	border: none;
	outline: none;
	background: transparent;
	opacity: 100;
	transition: opacity 5000ms;
}
.no-js .menuButton2 {
	display: none;
}

.menuButton2::before,
.menuButton2::after,
.menuButton2 span {
	background: black;
}

.menuButton2::before,
.menuButton2::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	pointer-events: none;
	-webkit-transition: -webkit-transform 0.25s;
	transition: transform 0.25s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.menuButton2 span {
	position: absolute;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 2px;
	text-indent: 200%;
	-webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;      
    -o-transition: opacity 0.25s;    
    transition: opacity 0.25s;
}

.menuButton2::before {
	-webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
	transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
}

.menuButton2::after {
	-webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
	transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
}

.menu-button--open span {
	opacity: 0;
}

.menuButton2--open::before {
	-webkit-transform: rotate3d(0, 0, 1, 45deg);
	transform: rotate3d(0, 0, 1, 45deg);
}

.menuButton2--open::after {
	-webkit-transform: rotate3d(0, 0, 1, -45deg);
	transform: rotate3d(0, 0, 1, -45deg);
}

/* ---------------------------------------------------------------------------- */

#adminPanel-buttonsPanel a:hover, .dropDownButton:hover {
	color: white;
}

.dropDownList {
  display: none;
  /* background-color: #262626; */
  background-color: #5c5edc;
  padding-left: 8px;
}

.dropDownItem{
	width: 100%;
	text-align: center;
}

.active {
	background-color: #5c5edc;
	color: white;
	font-size: 15px;
}

.fa-caret-down {
	float: right;
	padding-right: 8px;
}

#dgsoftLogo{
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 10px;
	right: 10px;
	bottom: 10px;
	/* src: url(imagesVideos/dgsoftlogo.jpg); */
	/* z-index: 2000; */
	opacity: 0;
	transition: opacity 3s;
	-webkit-transition: opacity 3s;
	-moz-transition: opacity 3s;
	-o-transition: opacity 3s;
}

#flashingLight{
	width: auto;
	height: 100%;
	position: absolute;
	z-index: 300;
}