@import url(https://fonts.googleapis.com/css?family=Muli:400,700);

/* -- Demo -- */
body {
	margin: 0;
	padding: 0;	
	overflow: hidden;
  font-family: "Muli", sans-serif;
  background: #ffe4e4;
}
.content {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: scroll;
}

.content {
  padding: 5%;
}
.content h1 {
  text-align: center;
  color: #428bca;
  margin-bottom: 40px;
}

.content h2 {
  text-align: center;
  color: #dc42f4;
  margin-bottom: 40px;
}

.content .modal-btns { text-align: center; }

/* -- Modal Styles -- */
.base_page {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
	opacity: 0;
	overflow: scroll;
}
.base_page:target {
	display: block;
	z-index: 2;
	opacity: 1;
}
.popup:target ~ .content {
	overflow: hidden;
}

.page-exit {
	position: fixed;
	top: 10px;
	right: 50px;
	width: 1em;
	height: 1em;
	z-index: 10;
	padding: 0.3em;
	font-size: 3em;
	line-height: 1em;
	text-decoration: none;
	color: #ffffff;
}
.page-exit:hover {
	color: #dcdcdc;
}

.page01 { background-color: #428bca; }
.page02 { background-color: #5bc0de; }
.page03 { background-color: #5cb85c; }
.page04 { background-color: #f0ad4e; }
.page05 { background-color: #d9534f; }

/* -- Additional Demo Styles -- */
.base_page h1 {
  font-size: 3em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: #ffffff;
}
.base_page h2 {
  font-weight: 400;
  color: #ffffff;
}

.base_page p {
  font-size: 18px;
  color: #ffffff;
}

.page-btns {
  text-align: center;
}

.page-btns .btn {
  display: inline-block;
  padding: 6px 12px;
  margin: 5px;
  /*background: #428bca;*/
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: 0.3s;
}

.page-btns .btn:hover {
  background: #307100;
}

.font01{
    text-align: center;
  color: #dc42f4;
  margin-bottom: 40px;
}