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

html {
  overflow: scroll;
}

.leftcontainer {
	position: absolute;
	top: 0px;
	width: 92px;
    height: 63px;
	overflow: hidden;
}

.topleft {
	display: inline-block;
	margin-left: 12px;
	overflow: hidden;
	}

@charset "utf-8";

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: darkgrey;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: black;
  font-weight: 400;
  background-color: transparent;
  text-decoration: underline;
}



.menudrop {
  display: none;
  width: 100px;
  height: 100px;
  animation-name: menushow;
  animation-duration: 2s;
  cursor: pointer;
  text-align: right; 
  right: 12px;
  position: absolute;
  top: 50px;
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 15px;
}

@keyframes menushow {
  from {opacity: 0;}
  to {opacity: 1;}
}

.menubutton {
  display: inline-block;
  cursor: pointer;
  text-align: right; 
  right: 12px;
  top:0px;
  position: absolute;
}

.bar1, .bar2, .bar3 {
  width: 34px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 5px);
  transform: rotate(-45deg) translate(-6px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-7px, -5px);
  transform: rotate(45deg) translate(-7px, -5px);
	}

.change .menudrop {
	display: inline-block;
}


#container{
 margin-left: auto;
 margin-right: auto;
 height: 100%;
 width: 100%;
 overflow-y: scroll;
 z-index: 0;
 overflow: hidden;
}

#wrap01{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -145px;
}

#wrap02{
  position: absolute;
  top: 50%;
  left: 50%;
  padding-top: 450px;
  margin-top: -145px;
  transform: translate(-50%, -50%);
}


.centerclass{
  text-align: center;
}

.centerclass_insta{
  align-content: center;
  text-align: center;
}

.button1{
text-align: center;
align-content: center;
background: none;
border: none;
padding: 0;
outline:none;
}

.button1:hover{
text-align: center;
align-content: center;
background-color: #white;
border:none;
transform: scale(98%);

}

.p1{

  font-family: 'Roboto';

  font-weight: 700;

}



.p2{

  font-family: 'Roboto';

  font-weight: 300;

}

.p3{
  text-align: center;
  font-family: 'Roboto';

  font-weight: 300;
	font-size: 11px;

}


.fadein img {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;

align-content: center;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 10s;
}

.fadein-left img {
  position: absolute;
  top: 0px;
  left: 12px;
  transform: translate(-50%, -50%);
  z-index: 10;

align-content: center;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 10s;
}


@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 1;}
    60% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 1;}
    60% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
   -webkit-animation-delay: -2s;
    background-color: transparent;
}
#f2 {
    -webkit-animation-delay: -6s;
    background-color: transparent;
}
#f3 {
    -webkit-animation-delay: -10s;
    background-color: transparent;
}