@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display : block;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot');
  src: local(''),

       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg');
}

html{
}



div{
	-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body{
	overflow-y: overlay;

	display: block;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	box-sizing:border-box;
	margin:0px;

	background-color: #303336;

	color: white;
	font-size: 0.8vw;
	font-weight: 100;
	letter-spacing: 0.006em;
}

section{
	overflow: show;
}

h1{
	font-size:40px;
	font-weight: 200;
}

h1.section-title{
	text-align: center;
	padding:40px;
	margin:auto;
}

h2.main-title{
	font-weight: 400;
}

h2.light{
	text-transform: uppercase;
	text-align: center;
	font-weight: 100;
	padding: 40px;
	padding-top: 0px;
}

button{
  background:none;
  border:none;
  cursor: pointer;
}

form.text-form{
	width:80%;
	padding:0px;
	padding-bottom:40px;

	display: flex;
	flex-direction: column;

	margin:auto;
}

input, textarea, select{

	border-radius: 0px;
	border: solid #585858 0.5px;
	background-color: #262626;

	width: 100%;
	color: white;

	background-color: #1d1d1e;
}

textarea{
	width: 100%;
	margin-top: 0.6em;
	height:10em;
	resize:none;
	font-size: 0.87em;
}

input{
	margin-top: 0.6em;
	color: white;
}

input[type="submit"]{
	margin-top: 10px;
	width: 150px;
	padding:6px;
	border: none;
	background: linear-gradient(#404040, #1a1a1a);

	cursor: pointer;
}

input[type="file"]{
	border: none;
	background: none;
}

input[type="submit"]:hover{
	background: linear-gradient(#808080, #4d4d4d);
}

label{
	font-weight: 100;
	letter-spacing: 0.1em;
	font-size: 0.72em;
	text-transform: uppercase;
}

.login-section{
	position:fixed;
	width: 100vw;
	height:100vh;

	z-index:100;
}

.login-form{
	top:50%;
	left:50%;

	position:absolute;

	transform:translate(-50%, -50%);

	background-color: #1a1a1a;

	padding:3.6em;

	display: flex;
	flex-direction: column;
	justify-content: center;

	filter: drop-shadow(0 0 24px rgba(0,0,0,0.4));

	width: 26em;
}

.form-container{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	width: 100%;
}

.form-column{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	width: 100%;
}

.form-item{
	padding-bottom:0.8em;
	height: 1.5em;
	margin-bottom: 0.5em
}

.form-item input{
	margin: 0px;
	width :calc(100% - 0.5em);
	height: inherit;
}

.centered{
	text-align: center;
}

.login-form-parent{
		display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.login-button{
cursor:pointer;

	text-transform: uppercase;
width: 12em;

	text-align: center;
	margin:2.4em;

	padding:0.5em;

		color: white;

		font-weight: 500;
		letter-spacing: 0.1em;

		background: linear-gradient(#404040, #1a1a1a);
}

.login-button:hover{
	background: linear-gradient(#808080, #4d4d4d);
	color: white;
}

.unselectable{
	-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}

.uppercase{
	text-transform: uppercase;
}

a.white {
  color: silver;
  text-decoration: none;
}

a.white:hover {
	color:white;
}

a.thin{
	font-weight: 400;
}

.light{
	margin-bottom: 3em;
}

a.bold{
	font-weight: 550;
}

.error{
	text-align: center;
	color: red;
	font-weight: 500;
	font-size: 0.87em;
}

h1.header-title{
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.6em;
	font-size: 1.2em;
	text-align: center;
}

header{
	position:fixed;
	top:0px;
	z-index: 61;
	background: linear-gradient(#303030, #1a1a1a);
	width: 100%;

	color: white;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;

	height: 4em;
}

.header-button{
	cursor: pointer;
	color:white;
	text-transform: uppercase;
	font-weight: 400;

	padding-top: 1.4em;
	padding-bottom: 1.4em;
	padding-left:1.7em;
	padding-right: 1.7em;
	
	letter-spacing: 0.1em;
	font-size: 0.87em;

	height:100%;

	margin:0px;

	display: flex;
	align-items: center;
}

.header-button:hover{
	background: linear-gradient(#808080, #4d4d4d);
}

.header-button:hover img.header-button-icon{
	transform: scale(1.3);
}

img.header-button-icon{
	width: 1.7em;
	height: 1.7em;
	object-fit: cover;
	margin-right: 0.85em;

	transition-property: transform;
	transition-duration: 0.2s;

	transform: scale(1.0);
}

.header-element{
	margin-left:1.7em;
	margin-right: 1.7em;
	letter-spacing: 0.1em;
	font-size: 0.87em;

	display: flex;
	align-items: center;
}

.green{
	color: rgb(0,255,0);
}

.anchor-right{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.header-spacer{
	height:4em;
}

.form-parent-container{

	padding-top: 4em;

	border-top: solid #494f50 0.1em;

	position: relative;

	margin-top: 1.5em;
}

.form-parent-expand{
	cursor: pointer;
	position: absolute;
	color: #e2e9e7;
	background-color: #303336;
	font-size: 24px;
		top:0px;
		left:0px;

		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;

		transform: translate(-50%, -50%);

		border: 1px solid #666666;

		box-shadow: 0px 0px 5px rgba(1,1,1,0.2);
}

ul{
	padding-inline-start: 0em;
}

li{
	margin-top:2em;
	text-align: justify;
	list-style-type: square;
}

p{
	text-align: justify;
}

.form-parent-title{
	position: absolute;
	color: #e2e9e7;
	font-size: 24px;
	text-transform: uppercase;
	background-color: #303336;
	padding-left:30px;
	padding-right: 30px;

	top:0px;
	left:50%;

	transform: translate(-50%, -50%);

	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 8px;
	font-size: 18px;
}

.form-section-container{
	width: 55%;

	margin:auto;

	padding-top: 2%;
	padding-bottom: 4%;
}

.form-flex-down{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

b{
	font-weight: unset;
	opacity:100%;
	color: #b9cafd;
}

.welcome{
	font-size: 2.5em;
	text-align: left;
	font-weight: 100;
	letter-spacing: 0.04em;
	margin-bottom: 1.5em;
}

.welcome.bold{
	font-weight: 600;
}

.big-blue{
	color : #b9cafd;
}

.error2{
	color: red;
	margin-bottom: 20px;
}

.success{
	color: rgb(0,255,0);
	margin-bottom: 20px;
}

.image-container{
	width:400px;
	overflow: hidden;

	margin:auto;
	margin-top: 30px;
}

.image-thumbnail{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.video-container{
	pointer-events: none;
	overflow: hidden;

	margin:auto;
	margin-top: 30px;

	width: 100%;
	height: 11em;
}

.help{
	text-align: justify;
 	font-size:clamp(0px, 1.2em, 14px);
}

b.red{
	color:#f13c3c;
	font-weight: 600;
}

form.publication-form{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.checkbox-row{
	display: flex;
	flex-direction: row;
	align-items: center;
}

input[type="checkbox"]{

	width: unset;

	margin-right:1em;
	margin-top: 0px;
	cursor: pointer;

	transform: scale(1);

}

input.big{
	width: 21em;
	margin-top: 2em;
	margin-bottom: 2em;
	padding: 0.9em;
	padding-left: 0px;
	padding-right: 0px;

	font-size: 0.87em;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	transition-property: all;
	transition-duration: 0.2s;

	background: #435c92;
}

input.big:hover{
	background: #6b7fca;
}

footer{
  background-color: #0d0d0d;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  color: white;

  justify-content: center;
  align-items: center;

  padding-top: 2em;
  padding-bottom: 2em;

  width: 100%;

  height: 12em;

  margin:0px;
}

.footer-row{

  margin-top: 0.3em;
  margin-bottom: 0.3em;

  display: flex;
  flex-direction: row;

  align-items: center;

  flex-wrap: wrap;
}

.footer-element{
  text-align: center;

  padding-left:0.5em;
  padding-right:0.5em;
}

.footer-separator{
  position:relative;

  margin-left:0.8em;
  margin-right: 0.8em;
  width: 0px;
  height:3em;
  border:0.01em solid white;
}

a.light-green{
	color:#87e467;
}

a.underlined{
	text-decoration: underline;
}

.anchor-parent{
	height: 0px;
	position: relative;
	width: 0px;
}

.anchor{
	height: 0px;
	width: 0px;
	position: absolute;
	top:-160px;
}

.placeholder-text{
	opacity:50%;
	font-style: italic;
}

.placeholder-title{
	opacity:50%;
	font-style: italic;
}

.form-hint{
	width: 100%;
	text-align: justify;
	margin-bottom: 2em;
	font-size: 0.87em;
	align-self: center;
}

.header-logo{
	display: flex;
	flex-direction: row;
	margin-left: 2em;
	align-items: center;
}

.main-logo-image{
	width: 2em;
	height: 2em;
	object-fit: cover;
}

.login-form-icon{
	position: relative;
	width: 2.5em;
	left:50%;
	transform: translate(-50%, 0);
	margin-bottom: 1.5em;
}

.fade-cover{
	background-color: rgba(0,0,0,0.6);
	position: fixed;
	width: 100%;
	height:100%;
	top:0px;
	left:0px;
	bottom: 0px;
	right: 0px;
	z-index: 60;

	display: block;
}

.alert-popup{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background-color:#1a1a1a;
	-webkit-filter: drop-shadow(0px 0px 8px #00000030);

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	padding: 3em;

	align-items: center;
	justify-content: center;

	border-top: 0.1em solid #333333;
	border-bottom: 0.1em solid #333333;
}

.alert-popup-title{
	text-transform: uppercase;
	font-size: 0.87em;
	margin-bottom: 2em;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.alert-popup-text{
	text-align: center;
	margin-bottom: 2em;
	width: 18em;
	font-size: 1.1em;

	display: none;
}

.alert-popup-buttons{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	width: 70%;

	display: none;
}

.alert-popup-button{
	margin-top: 0px !important;
	padding: 0.3em !important;
	font-size: 0.87em !important;
	width: 6.7em !important;
}

.svg-animated-loader{
  height: 3em;
  width: 3em;
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg path,
svg rect{
  fill: white;
}

.tab-container{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4em;

	flex-direction: column;

}

.tab-parent{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	width: 100%;

	position: relative;

	align-self: flex-end;

		overflow: hidden;
}

.tab{

	background: rgb(45,50,65);
	background: #4c505a;

	width: 20%;

	position: relative;

	text-align: center;

	padding:0.7em;
	text-transform: uppercase;

	opacity: 90%;
	font-weight: 400;
	letter-spacing: 0.35em;
	font-size: 0.7em;
	color: #e2e9e7;

	cursor: pointer;

	bottom: -0.7em;

	transition-property: all;
	transition-duration: 0.1s;

}

.tab:hover{
	bottom: 0px;
	background:#515665;

	z-index: 5;
	filter: drop-shadow(0px 1em 0.4em #00000080);
}

.tab.selected{
	bottom: 0px;
	background:#787b84;

	z-index: 5;
	filter: drop-shadow(0px 1em 0.4em #00000080);
}

.progress-bar-parent{
	width: 100%;
	height: 0.15em;


	background: rgb(0,255,4);
	background: linear-gradient(267deg, rgb(133 185 239) 0%, rgb(84 162 185 / 47%) 50%, rgb(43 43 43 / 65%) 100%);

	margin-top: 0.35em;

	position: relative;
}

.progress-bar-child{
	position: absolute;
	right: 0;
	background-color: #303336;

	transition-property: width;
	transition-duration: 0.2s;

	width: 100%;
	height: 100%;
}

.form-title{
	margin-bottom: 1em;
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: 0.15em;
	color: #e2e2e2;
}

.form-title.nomargin{
	margin-bottom: 0em;
	margin-left: 1em;
}

.form-page-container{
	display: flex;
	flex-direction: column;
	margin-left: 4em;
	padding: 1em;
}

.form-page-sep{
	background-color: #4a4f56;
	width: 54%;
	height: 0.01em;
	margin-left: 1em;
	margin-bottom: 1em;
	margin-top: 2em;

	position: relative;
}

.form-page-sep-square{
	position: absolute;
	width: 0.5em;
	height: 0.5em;
	background-color: #101010;
	top:0em;
	left: 0em;
	transform: translate(-50%, -50%);
}

option{
	height:2em;
	cursor: pointer;
}

select{
	height:2em;
	font-size: 0.8em;
	width: 14em;
	cursor: pointer;
}

.color-picker{
	width: 4em;
	height: 3em;
	border:none;
	background: none;
	margin-top: 0em;
	padding: 0em;
	cursor: pointer;
}

.form-page-container.flex{
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.form-page-container.nomargin{
	padding-bottom: 0;
}

.form-page-container.nomargintop{
	padding-top: 0;
}

.page-form-parent{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.form-down{
	flex-direction: column;
}

.color-preview{
	width: 10em;
	height: 10em;
	position:relative;

	margin-right: 8em;
}

.secondary-color-preview{
	width: 70%;
	height: 70%;
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: black;
	z-index: -1;

	filter: drop-shadow(0px 0em 0.7em #00000040);

	transition-property: background-color;
	transition-duration: 0.2s;
}

.main-color-preview{
	width: 70%;
	height: 70%;
	position: absolute;
	background-color: white;

	filter: drop-shadow(0px 0em 0.7em #00000040);

	transition-property: background-color;
	transition-duration: 0.2s;
}

.page-form-image-preview{
	width: 100%;
	height: 100%;

	object-fit: cover;
}

.page-form-opacity-preview{
	width: 100%;
	height: 100%;

	object-fit: cover;
	background:white;
}

.page-form-image-container-background{
	position: relative;
	width: calc(10em * (16/9));
	height: 10em;

	margin-right: 8em;

	filter: drop-shadow(0px 0em 1em #00000020);

	background:white;
}

.page-form-image-container-logo{
	position: relative;
	width: 10em;
	height: 10em;

	margin-right: 8em;

	filter: drop-shadow(0px 0em 1em #00000020);
}

input.text-option.page-resize-width{
	width: 20em !important;
	height: 1.6em !important;
	padding: 0.5em !important;
}

textarea.text-option.page-resize-width{
	width: 46% !important;
	height: 6em !important;
}

.link-container{
	display: flex;
	flex-direction: row;
	background: linear-gradient(136deg, rgb(23 23 23) 0%, rgb(16 16 16) 30%, rgba(28,28,28,1) 83%, rgba(10,10,10,1) 100%);
	justify-content: space-between;
	align-items: center;

	padding: 0.6em;
	margin-top: 0.4em;
}

.link-container > div{
	margin:0 !important;
}

.links-end{
	position: relative;
	height: 0;
	width: 100%;
}

.add-link{
	width: 1.6em;
	height: 1.6em;

	position: absolute;
	right: 0;
	top: 0;
	transform: translate(150%, -150%);

	cursor: pointer;
}

.add-link:hover > img{
	transform: scale(1.2);
}

.remove-link:hover > img{
	transform: scale(1.2);
}

.remove-link{
	width: 1.4em;
	height: 1.4em;

	cursor: pointer;
}

.link-add-icon{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.link-delete-icon{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-container{
	display: flex;
	flex-direction: row;
	background: linear-gradient(136deg, rgb(23 23 23) 0%, rgb(16 16 16) 30%, rgba(28,28,28,1) 83%, rgba(10,10,10,1) 100%);
	justify-content: space-between;
	align-items: center;

	padding: 0.6em;
	margin-top: 0.4em;
}

.page-container.locked{
	background: rgb(34 41 53);
}

.page-container > div{
	margin:0 !important;
}

.pages-end{
	position: relative;
	height: 0;
	width: 100%;
}

.add-page{
	width: 1.6em;
	height: 1.6em;

	position: absolute;
	right: 0;
	top: 0;
	transform: translate(150%, -150%);

	cursor: pointer;
}

.add-page:hover > img{
	transform: scale(1.2);
}

.remove-page:hover > img{
	transform: scale(1.2);
}

.remove-page{
	width: 1.4em;
	height: 1.4em;

	cursor: pointer;
}

.remove-locked-page{
	width: 1.4em;
	height: 1.4em;
}

.page-add-icon{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-delete-icon{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

input.no-margin{
	margin:0 !important;
}

.link-label-container{
	width: 30%;
}

.link-url-container{
	width: 64%;
}

.link-label-input{
	height: unset !important;
	width: 100% !important;
	padding: 0.3em !important;
	border:0.1em solid #404040;
}

.link-url-input{
	height: unset !important;
	width: 100% !important;
	padding: 0.3em !important;
	border:0.1em solid #404040;
}

.page-label-container{
	width: 30%;
}

.page-url-container{
	width: 64%;
}

.page-label-input{
	height: unset !important;
	width: 100% !important;
	padding: 0.3em !important;
	border:0.1em solid #404040;
}

.page-url-input{
	height: unset !important;
	width: 100% !important;
	padding: 0.3em !important;
	border:none;
	pointer-events: none;
	background:none;
}

/* width */
::-webkit-scrollbar {
  width: 1em;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(30,30,30,0.5); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  cursor: pointer;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.switch-page-label{
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.7em;
	margin-left: 3em;
	margin-right: 0.5em;
}

.folder-weight{
	background-color: white;
	width: 8em;
	height: 0.75em;
	margin:1em;
	position: relative;
	border-radius: 1em;
	overflow: hidden;
}

.folder-weight-bar{
	background-color: #0095ff;
	height: 100%;
	position: absolute;
	border-radius: 1em;
}

.bg-opacity-input{
	width: 14em;
    height: 2em;
    font-size: 0.8em;
}

.text-editor-title{
	
}