.header-folio{
background: #2a4ddd;
color: #ffffff;
padding: 50px 10%;
text-align: center;
}

#slide-out-widget-area{
box-shadow: 0 3px 45px rgb(0 0 0 / 15%);	
}

.post-area{
	margin: 0px;
	padding: 0px;
}

.header-folio h1,
.header-folio h2,
.header-folio h3,
.header-folio h4,
.header-folio h5{
	color: #ffffff;
}

.header-folio h1 small{
	color: rgba(255,255,255,0.5) !important;
}

.header-folio h1 strong{
	position: absolute;
		right: 0;
		top: 200px;
		font-size: 300px;
		color: rgba(255,255,255,0.1);
		letter-spacing: -20px;
	}


.progress {
  width: 100%;
  position: fixed;
  top: calc(100vh - 10px);
  left: 0;
  z-index: 9999;
  height: 10px;
  background-color: #ffffff;
box-shadow: 0 3px 45px rgb(0 0 0 / 15%);
}
.progress > .progress-bar {
  height: 10px;
  width: 0px;
  background-color: #3452ff;
  transition: width 0.5s;
}

.progress > .progress-bar.finished{
	background-color: #44b344 !important;
}


#buttons{
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 9999;
cursor: pointer;
}

#buttons #previous, #buttons #next{
	background: #3452ff;
	width: 50px;
	height: 50px;
	line-height: 50px;
	padding: 10px;
	border-radius: 50px;
	margin-bottom: 10px;
	cursor: pointer;
box-shadow: 0 3px 45px rgb(0 0 0 / 15%);
}}

#buttons #previous:hover, #buttons #next:hover{
background: #3452ff;
transition: background 0.5s;
cursor: pointer;
}

#buttons svg{
	width: 30px;
	height: 30px;
	fill: #ffffff;
cursor: pointer;
}

#buttons svg:hover{
	cursor: pointer;
}

#buttons .active{
background: #44b344 !important;
cursor: pointer;
}

#buttons .active:hover{
background: #44b344 !important;
cursor: pointer;
}