.font-color-5a5a5a{
	color: #5a5a5a
}

h1{
	font-size: 60px
}

.titles{
	font-size: 5em; 
	text-align: center;
}

.featurette {
	padding-left: 100px;
	padding-right: 100px
}

.align-middle {
	margin: auto; 
	display:inline-flex;
	flex-direction: column;
	align-items: center;
	-webkit-box-align: center;
	align-content: center;
	vertical-align: middle
}
/*the setting of wrappers*/
#wrapper1{
	color: #e1e1e1
}

#wrapper2{
	background-color:#f0f0f0;
}

#wrapper3{
	background-color: #841518;
	color: #f0f0f0
}
#wrapper3 h5{
	color: #d1b0b2
}

#wrapper4{
	background-color: #f0f0f0;
	color: #2e2e2e
}

#wrapper5{
	background-color: #d1d1d1;
	color: #2e2e2e
}

#wrapper6{
	background-color: #292929;
	color: #e1e1e1
}
#wrapper6 h1{
	font-size: 50px; 
	text-align: center
}

#wrapper6 a:hover{
	text-decoration: none 
}

/*animation for whole-page arrow*/
.fp-controlArrow.fp-next:hover,
.fp-controlArrow.fp-prev:hover{
    border-bottom: 6px solid;
    border-left: 6px solid;
    top: 48%;
    transition: all 0.5s
}

/*for particle-slider*/
#particle-slider{
	position: relative;
	height: 100%;
	padding: 0px !important;
}

/*for links*/
.github-link,
.github-link:focus,
.github-link:hover{
	color: #e1e1e1;
	font-size: 25px; 
	text-align: center
}

a,
a:focus,
a:hover {
  color: #5a5a5a;
}

.zhxi-link,
.zhxi-link:focus,
.zhxi-link:hover{
	color: #d1b0b2
}

/*for the map*/
#map {
	position: absolute;
	right:0px; 
	height:100px; 
	width:215px; 
	background-color: transparent; 
	z-index: 9; 
	margin:0px;
}

.minimap {
	opacity: 0.3;
	float: left;
	height: 16.8px
}

.minimap:hover {
	opacity: 1;
	transition: opacity 1s
}

/*for the guide*/
.trailers {
	position: absolute;
	background-color: transparent;
	z-index: 9;
	text-align:center;
	color: rgb(83,83,83);
}

#mapTrailer {
	right:250px;
	top:10px; 
	margin:0px;
}

#anchorTrailer {
	text-align:left; 
	left: 10px; 
	top: 20%; 
	width:180px
}

#anchorTrailerh{
	left:20%; 
	bottom:5px; 
	width:300px
}

.trailer{
	font-family: Arial, Helvetica, sans-serif
}
/*for whole page slider*/
html,
body {
  background-color: #292929;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html .pslides,
body .pslides,
html > .dg,
body > .dg {
  display: none;
}
@media (min-width: 1000px) {
  body > .dg {
    display: block;
  }
}

/*for the flickering animation*/
@keyframes flickerAnimation {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
.animate-flicker {
	 -webkit-animation: flickerAnimation 1s infinite;
	 -moz-animation: flickerAnimation 1s infinite;
	 -o-animation: flickerAnimation 1s infinite;
	  animation: flickerAnimation 1s infinite;
}

/*for the overlay*/
#overlay-intro {
	opacity: 0;
    display: flex;
    position: fixed;
    z-index: 33;
    top:0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
	-moz-backdrop-filter: blur(10px);
	transition: all 1s
}
 
#overlay-intro.active {
	opacity: 1;
	display: flex;
	transition: all 1.5s

}

#popup-intro {
	height:400px;
	width:600px;
	opacity: 0;
    position: relative;
    margin: auto;
    background-color: #5a5a5a;
    color: black;
    border-top: solid #292929 2rem;
    border-bottom: solid #292929 0.5rem;
    border-radius: 5px;
	box-shadow: 2px 2px 6px black;
	transition: all 1s
}
 
#overlay-intro.active #popup-intro {
	opacity: 1;
	transition: all 1s

}

#popup-intro > div {
    margin: auto;
    padding: 1rem 1.5rem 0 1.5rem;
	color:#e0e0e0;
}
 
#close-popup {
	display: none;
	color:#e0e0e0;
    position: absolute;
    top: -2rem;
    right: 0px;
    border: none;
    background-color: transparent;
    padding: 0.3rem 0.5rem;
}