/*https://www.youtube.com/watch?v=5pi6lzpFrLo*/
/*@import url(http://fonts.googleapis.com/css?family=Almendra+Display);*/
@font-face{
font-family:'Amersn';
src:url("/fonts/AMERSN__.ttf") format('truetype');
}
body{
font-family:'Amersn','Almendra Display', Arial;
margin:0;
padding:0;
}
a, a:visited{
color:inherit;
}
.errorOverlay{
display:none;
opacity:1;
z-index:3;
position:fixed;
left:0;
top:0;
padding:0;
margin:0;
width:100vw;
height:100vh;
background:rgba(55,55,55,0.5);
transition:0.3s ease-in-out;
}
.popup{
z-index:3;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-150px;
position:absolute;
width:500px;
height:300px;
background:rgba(55,220,220,0.5);
border:5px solid #088;
border-radius:10px;
}
.popup .popupHeader{
font-family:Arial;
margin-left:10px;
font-size:3em;
}
.popup .close{
top:10px;
right:10px;
position:absolute;
width:40px;
height:40px;
cursor:pointer;
}
.popup .close::before, .popup .close::after{
position:absolute;
top:17px;
border-radius:3px;
content:'';
width:100%;
height:6px;
background:#000;
transition:0.3s ease-in-out;
}
.popup .close::before{
transform:rotate(45deg);
}
.popup .close::after{
transform:rotate(-45deg);
}
.popup .close:hover::before, .popup .close:hover::after{
background:#fff;
}
.popup .divider{
position:relative;
height:5px;
border:0px;
margin:0px;
background:#088;
}
.popup .bread{
display:block;
padding:10px;
}
.header{
text-align:center;
width:100vw;
cursor:default;
position:relative;
display:block;
font-size:2.5em;
}
.header span{
display:inline-block;
color:#000;
transition:0.3s ease-in-out;
cursor:pointer;
animation:test 0s;
}
.testbox{
position:absolute;
transition:0.3s ease-in-out;
-webkit-transition:0.3s ease-in-out;
left:50%;
height:25px;
width:100%;
top:15px;
background:transparent;
text-align:right;
overflow:hidden;
transform:translate(20px, -50px) rotate(20deg);
-webkit-transform:translate(20px, -50px) rotate(20deg);
z-index:2;
opacity:0;
transition-delay:0.15s;
-webkit-transition-delay:0.15s;
visibility:visible;
}
.fix{
left: calc(50% + -0.5px);
}
.testbox span{
font-size:1.5em;
position:absolute;
left:-50%;
z-index:2;
color:#236CCF;
text-decoration:none;
font-family:'Amersn', Arial, sans-serif;
transition:0.3s ease-in-out;
-webkit-transition:0.3s ease-in-out;
}
.content{
box-shadow: 0px 0px 5px rgba(0,0,0,1);
margin-left:-400px;
left:50%;
top:160px;
position:relative;
background:#eef;
width:800px;
}
.svgContainer{
position:relative;
width:400px;
height:400px;
left:50%;
margin-left:-200px;
}
.hikari{
fill:#000;
stroke-width:0px;
stroke:#e22;
stroke-dasharray:2750px;
stroke-dashoffset:0px;
animation:stroke 5s ease-in-out;
transition: fill 0.3s ease-in-out;
}
.hikari:hover{
fill:#e22;
}
@keyframes stroke{
0%{
fill:transparent;
stroke-dashoffset:2750px;
stroke-width:5px;
}
90%{
stroke-dashoffset:0px;
fill:transparent;
stroke-width:5px;
}
100%{
fill:#000;
stroke-dashoffset:0px;
stroke-width:0px;
}
}
@media (max-width:800px){
.content{
margin-left:0px;
left:0px;
width:100%;
}
}
@media (max-width:500px){
.navbar nav{
margin-left:0px;
left:0px;
width:100%;
}
.navbar .item{
margin-left:5px;
margin-right:5px;
}
.navbar .item:hover .linktext{
transition:0.3s ease-in-out;
transition-delay:0s;
color:#236CCF;
opacity:1;
}
.navbar .item .linktext:after, .navbar .item .testbox{
visibility:hidden;
display:none;
transform:translate(0px, 0px) rotate(0deg);
}
.navbar .headerDesc{
left:0px;
margin-left:0px;
width:100%;
}
}
@media (max-width:400px){
.svgContainer{
left:0px;
width:100%;
margin-left:0px;
}
.hikari{
width:100%;
}
}