/* Z-index Layers */
#header { z-index: 100; }
#container { z-index: 1; }
#modal { z-index: 101; }
#gather { z-index: 110; }
.header-lang { z-index: 10; }

/* Base Element Styles */
html {
    overflow-y: scroll;
}

body {
    color: #232323;
    line-height: 1;
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

a {
    color: #232323;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-weight: normal;
}

img {
    height: auto;
}

/* Layout States */
#wrapper {
    opacity: 1;
}

#header {
    opacity: 1;
    transition: opacity 1s;
}

.spritesvg {
    display: none;
}

/* Loading States */
.-loading {
    height: 100%;
    overflow: hidden;
}

.-loading #wrapper {
    opacity: 0;
}

/* Modal States */
.-showmodal {
    overflow: hidden;
}

.-showmodal body {
    height: 100%;
    overflow: hidden;
}

/* Device Display Controls */
.m-pc {
    display: inline-block;
}

.m-sp {
    display: none;
}

/* Sketch Element Styles */
#sketch {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    opacity: .4;
    z-index: 100000;
    pointer-events: none;
}

#sketch.sp {
    width: 100%;
    height: auto;
    top: -8vw;
}

#sketch.fixed {
    position: fixed;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

#sketch.works {
    width: auto;
    height: 164.8vw;
    position: fixed;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

#sketch.work {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
}