@charset "UTF-8";

html , body {
width: 100%;
height: 100%;
}
body {
-js-display: flex;
display: -webkit-box; /*Android4.3*/
display: -moz-box;    /*Firefox21*/
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*PC-Safari,iOS8.4*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: rgba(215,215,215,1);
}

.spectrumHeader {
background-color:rgb(252,115,49);
transition:4.5s ease;
}


.box {
width: 100%;
height: 100%;
position:absolute;
top: 0;
left: 0;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.box .wave {
position: absolute;
top: 50%;
left: 50%;
background-color: rgba(255,255,255,.05);
width: 400px;
height: 400px;
margin-left: -200px;
margin-top: -200px;
-webkit-transform-origin: 50% 48%;
transform-origin: 50% 48%;
border-radius: 43%;
-webkit-animation: drift 10000ms infinite linear;
animation: drift 10000ms infinite linear;
}

.box .wave.-three {
-webkit-animation: drift 16000ms infinite linear;
animation: drift 16000ms infinite linear;
}

.box .wave.-two {
-webkit-animation: drift 18000ms infinite linear;
animation: drift 18000ms infinite linear;
}

@-webkit-keyframes drift {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes drift {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

main {
width: 100%;
max-width: 600px;
text-align: center;
margin-top: -2%;
}
main h1 {
font-family: 'Ropa Sans', sans-serif;
font-size: 6rem;
letter-spacing: .05rem;
color: #fff;
line-height: 1;
opacity:0.5;
transition: all 300ms 0s ease;
}

.fadein span.fi {
}
.fadein span.fi span {
opacity:0;
}

.fadein span.fi span:nth-child(5) {
font-size: 2px;
}
.fadein span.fi span:nth-child(5)::before {
white-space: pre;
content:"\A";
}

.fadein span.fi span:nth-child(n + 6) {
letter-spacing: .35rem;
}


main h1 + p {
margin-top: 2em;
font-family: 'Ropa Sans', sans-serif;
font-size: 1.1rem;
letter-spacing: .2rem;
color: #fff;
line-height: 1.2;
opacity:0.2;
transition: all 300ms 0s ease;
}
main h1 + p a {
color: #fff;
cursor: pointer;
}

.remodal {
text-align: left;
}
.remodal h3 {
color: #666;
font-weight: 700;
font-size: 1.5rem;
}
.remodal p ,
.remodal dl,
.remodal dt,
.remodal dd,
.remodal li {
color: #666;
font-size: 1.1rem;
}

.remodal dt {
margin: 1.5em 0 .5em;
font-weight: 700;
font-size: 1.3rem;
}
.remodal ul {
margin-top: 1em;
 padding-left:1.5em;
 list-style-position:outside;
 list-style-type: disc;
}
.remodal ul li {
color: #666;
font-size: 1.1rem;
}
.remodal dl + p {
margin-top: 2em;
text-align: right;
}
.remodal dl + p img {
width: 20%;
max-width: 100px;
height: auto;
}



@media screen and ( min-width: 768px ){

.box .wave {
width: 650px;
height: 650px;
margin-left: -325px;
margin-top: -325px;
}

main h1 {
padding-left: 1em;
}
main h1 ,
.fadein span.fi span {
font-size: 4.0rem;
letter-spacing: 2rem !important;
line-height: 1;
transition: all 300ms 0s ease;
}

main h1 span.space {
display: inline-block;
}

.fadein span.fi span:nth-child(5) {
font-size: 4.0rem;
}
.fadein span.fi span:nth-child(5)::before {
content: none;
}

}