@charset "utf-8";

/*main*******************************/

.fullpage {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}



.tilt {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.tilt__back,
.tilt__front {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.tilt__back {
  position: relative;
}

.tilt__front {
  position: absolute;
  top: 0;
  left: 0;
}

.tilt__back,
.tilt__front {
  background-size: cover;
}

#menu li {
display:inline-block;
margin: 10px -5px 10px 9px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.3);
}

#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}

#menu li a{
text-decoration:none;
color: #000;
}

#menu li.active a:hover{
color: #000;
}

#menu li:hover{
background: rgba(255,255,255, 0.8);
}

#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}

#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}

#menu li.actop {
display:inline-block;
margin: 10px -5px 10px 9px;
color: #000;
background:#FFC;

-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.3);
}


h1.top2 {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 4rem;
color: #fff;
text-transform: uppercase;
text-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.3);
}

h2.top2 {
margin-top:100px;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%) translateY(-50%);  
font-size: 2rem;
color: #fff;
text-transform: uppercase;
text-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.3);
}

div.tbox {
position: absolute;
top: 32%;
left: 20%;
width: 60%;
height: 60%;
background: rgba(255,255,255, 0.8);
overflow: scroll;
overflow-x: hidden;
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding:25px;
}

div.tbox::-webkit-scrollbar{
  width: 12px;

}
div.tbox::-webkit-scrollbar-track{
  background: rgba(255,255,255, 0.2);
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
div.tbox::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;

}

p.just {
text-align: justify;
text-justify: inter-ideograph;
}




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

h1.top2{
font-size: 1.2rem;
}

h2.top2{
font-size: 0.8rem;
line-height: 1.5rem;
width:180px;
top: 10%;
}

div.tbox {
position: absolute;
top: 200px;

}

p.just {
	font-size:0.8rem;
	line-height: 1.5rem;
}

div.tbox {

left: 6%;
width: 80%
}





}