/* fonts */

@font-face {
font-family:"Fira Sans";
font-style:normal;
font-weight:300;
src:url(font/FiraSans-Light.woff2) format("woff2");
}

@font-face {
font-family:"Fira Sans";
font-style:italic;
font-weight:300;
src:url(font/FiraSans-LightItalic.woff2) format("woff2");
}

@font-face {
font-family:"Fira Sans";
font-style:normal;
font-weight:400;
src:url(font/FiraSans-Regular.woff2) format("woff2");
}

@font-face {
font-family:"Cormorant Garamond";
font-style:italic;
font-weight:300;
src:url(font/cormorant-garamond-latin-300-italic.woff2) format("woff2");
}


/* reset */

* {
box-sizing:border-box;
}

html,body {
margin:0;
padding:0;
}

/* body */

body {
animation:breathe 10s infinite alternate ease-in-out;
}

/* layout */

.text {
position:fixed;
top:0;
z-index:1;
margin:10% 0 0 16%;
font-size:22.8px;
line-height:22px;
color:rgba(0,15,30,.8);
}

h1,h2,p {
margin-top:0;
}

h1 {
margin-bottom:26px;
font-family:"Fira Sans",sans-serif;
font-size:1.1em;
font-weight:400;
line-height:22px;
letter-spacing:3.5px;
font-variant:small-caps;
}

h2 {
margin-bottom:26px;
font-family:"Fira Sans",sans-serif;
font-size:1.1em;
font-weight:300;
line-height:28px;
}

h2 em {
font-family:"Fira Sans",sans-serif;
font-style:italic;
font-weight:300;
letter-spacing:.2px;
}

.amp {
font-family:"Cormorant Garamond",serif;
font-size:1.3em;
font-style:italic;
font-weight:300;
letter-spacing:-2px;
}

.location {
margin-top:12px;
font-size:.9em;
}

.foot {
position:absolute;
top:149%;
left:0;
font-family:"Fira Sans",sans-serif;
font-size:.7em;
font-weight:300;
line-height:14px;
letter-spacing:.9px;
font-variant:small-caps;
font-variant-numeric:oldstyle-nums proportional-nums;
}

/* links */

a {
color:inherit;
text-decoration:none;
transition:color .3s linear;
}

a:hover {
color:rgba(128,190,211,.8);
}

/* pictures */

.histrix,
.coralium {
position:fixed;
z-index:-1;
}

.histrix img,
.coralium img {
display:block;
max-width:100%;
}

.coralium img {
width:85%;
margin:-20% 0 0 35%;
animation:float_coralium 150s infinite;
}

.histrix img {
	width:14%; 
	margin:-10% 5% 0 0; 
	display:block; 
	opacity:0; 
}

.histrix img.animate { 
	opacity:1; 
	animation:float_histrix 230s linear infinite; 
}

/* media type */

@media (max-width:600px) {
.contact.active {color:rgba(128,190,211,.8)!important;}
.contact:not(.active) {color:rgba(0,15,30,.8)!important;}
}

@media (max-width:600px) and (orientation:portrait) {
.coralium {top:55vh;}
}

/* flash */

#flash {
position:fixed;
inset:0;
z-index:9999;
pointer-events:none;
background:rgba(255,255,255,.08);
opacity:0;
}

#flash.active {
animation:flash .22s ease-out;
}

/* animations */

@keyframes flash {
0% {opacity:0;}
40% {opacity:1;}
100% {opacity:0;}
}

@keyframes breathe {
0% {background-color:rgb(0,110,120);}
30% {background-color:rgb(0,128,128);}
100% {background-color:rgb(0,134,153);}
}

@keyframes float_coralium {
0% {transform:perspective(800px) translate(0,0) scale(1) rotate(0) rotateX(0);animation-timing-function:cubic-bezier(.42,.15,.65,1);}
6% {transform:perspective(800px) translate(5vw,-3vh) scale(.92) rotate(-7deg) rotateX(2deg);animation-timing-function:cubic-bezier(.3,.45,.55,1);}
12.5% {transform:perspective(800px) translate(-3vw,4vh) scale(.78) rotate(-3deg) rotateX(-3deg);animation-timing-function:cubic-bezier(.45,.2,.7,1);}
19% {transform:perspective(800px) translate(-8vw,-2vh) scale(.88) rotate(5deg) rotateX(2deg);animation-timing-function:cubic-bezier(.25,.5,.6,1);}
25% {transform:perspective(800px) translate(4vw,-8vh) scale(.68) rotate(-8deg) rotateX(-4deg);animation-timing-function:cubic-bezier(.4,.25,.65,1);}
31.5% {transform:perspective(800px) translate(9vw,-55vh) scale(.82) rotate(6deg) rotateX(3deg);animation-timing-function:cubic-bezier(.3,.5,.6,1);}
37.5% {transform:perspective(800px) translate(-16vw,2vh) scale(.96) rotate(-5deg) rotateX(-2deg);animation-timing-function:cubic-bezier(.45,.2,.7,1);}
44% {transform:perspective(800px) translate(3vw,-5vh) scale(.74) rotate(8deg) rotateX(3deg);animation-timing-function:cubic-bezier(.3,.45,.6,1);}
50% {transform:perspective(800px) translate(0,0) scale(1) rotate(0) rotateX(0);animation-timing-function:cubic-bezier(.42,.15,.65,1);}
56% {transform:perspective(800px) translate(-6vw,5vh) scale(.86) rotate(6deg) rotateX(-2deg);animation-timing-function:cubic-bezier(.3,.5,.6,1);}
62.5% {transform:perspective(800px) translate(11vw,-4vh) scale(.72) rotate(-7deg) rotateX(3deg);animation-timing-function:cubic-bezier(.45,.2,.7,1);}
69% {transform:perspective(800px) translate(14vw,8vh) scale(.91) rotate(4deg) rotateX(-3deg);animation-timing-function:cubic-bezier(.25,.5,.6,1);}
75% {transform:perspective(800px) translate(-10vw,-15vh) scale(.65) rotate(-8deg) rotateX(4deg);animation-timing-function:cubic-bezier(.4,.25,.65,1);}
81.5% {transform:perspective(800px) translate(-18vw,-48vh) scale(.79) rotate(7deg) rotateX(-3deg);animation-timing-function:cubic-bezier(.3,.5,.6,1);}
87.5% {transform:perspective(800px) translate(6vw,3vh) scale(.94) rotate(-5deg) rotateX(2deg);animation-timing-function:cubic-bezier(.45,.2,.7,1);}
94% {transform:perspective(800px) translate(-4vw,-7vh) scale(.76) rotate(8deg) rotateX(-2deg);animation-timing-function:cubic-bezier(.3,.45,.6,1);}
100% {transform:perspective(800px) translate(0,0) scale(1) rotate(0) rotateX(0);}
}

@keyframes float_histrix {
0% {transform:translate(125%,-100%) scale(.1) rotate(0);}
17.39% {transform:translate(125%,-100%) scale(.1) rotate(0);}
32.61% {transform:translate(25%,-45vh) scale(.7) rotate(-3deg);}
34.78% {transform:translate(-40%,-30vh) scale(1) rotate(8deg);}
36.96% {transform:translate(-280%,600%) scale(1.7) rotate(25deg);}
63.04% {transform:translate(-280%,600%) scale(1.7) rotate(25deg);}
63.05% {transform:translate(-280%,600%) scale(1.7) rotate(205deg);}
80% {transform:translate(-40%,-30vh) scale(1) rotate(188deg);}
82.61% {transform:translate(25%,-45vh) scale(.7) rotate(177deg);}
82.62% {transform:translate(125%,-100%) scale(.1) rotate(180deg);}
100% {transform:translate(125%,-100%) scale(.1) rotate(180deg);}
}

/* hidden content */

.about {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
}

/* contact */

.contact-box {
position:absolute;
top:0;
left:0;
z-index:2;
width:260px;
padding:0;
margin-top:6px;
background:transparent;
opacity:0;
visibility:hidden;
transform:translateX(8px);
transition:opacity .3s ease,transform .3s ease;
}

.contact-box.active {
opacity:1;
visibility:visible;
transform:translateX(0);
}

.contact-box p {
margin:0 0 22px;
font-family:"Fira Sans",sans-serif;
font-size:.7em;
font-weight:400;
line-height:22px;
letter-spacing:2px;
font-variant:small-caps;
}