*{
 margin : 0;
 padding: 0;
 box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {

}

div {
	position: absolute;
	width: 100%;
	height: 55px;
}

h1{
	position: fixed;
	margin: 20px;
}

h2 {
	font-size: 13pt;
	font-weight: normal;
}

iframe {
	margin: 0;
	padding: 0;
	left:-1px;
	width: 100%;
	height: 600px;
	border: none;
}

a{
	color: black;
	text-decoration: none;
}

.content {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.panel.active .content {
  opacity: 1;
}

.top {
	position: absolute;
	right: 10px;
}

.about {
	background-color: mintcream;
	bottom: 220px;

}

.smallcollecting{
	background-color: lemonchiffon;
	bottom: 165px;
	
}

.books{
	background-color: lightblue;
	bottom: 110px;
}

.workshop{
	background-color: gray;
	bottom: 55px;
}


.shop{
	background-color: lightpink;
	bottom: 0;
}

.panel {
  padding: 5px;
  overflow: hidden;
  transition:
    top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    bottom 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.35s ease;
}

@media screen and (max-width: 704px) {

}