* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body {
    background-color:#25252C;
    width:100vw;
}

/* CHARACTERS PAGE */

.cover-art {
    position:relative;
    margin:0;
    padding:0;
    cursor:pointer;
}

.cover-art-1 {
    margin:0;
    padding:0;
    width:100vw;
    position:absolute;
    opacity:1;
    transition:.5s;
}

.cover-art-2 {
    margin:0;
    padding:0;
    width:100vw;
    opacity:1;
}

.cover-art-1.deactive {
    margin:0;
    padding:0;
    width:100vw;
    position:absolute;
    opacity:0;
    transition:.5s;
}

/* subheader */

.subheader {
    margin: 5vw 5vw 5vw 5vw;
    padding: 5vw 10vw 5vw 10vw;
    background-color: #DDD7C6;
    width:auto;
}

.subheader p {
    font-family:"fredoka", sans-serif;
    font-weight:500;
    font-size:2vw;
    color:#25252C;
    background-color: transparent;
    text-align: center;
}

/* contents */

.character-contents {
    padding:0;
    margin:0;
    position:relative;
    width:100vw;
}

.character-splats {
    margin:0;
    padding:5vw 5vw 8vw 5vw;
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    align-items:stretch;
    height:100%;
    width:100vw;
}
[class*="character-splat-"] {
    width:auto;
    max-width:30vw;
}
.character-splat-1 {
    align-self:flex-end
}
.character-splat-2 {
    margin-left:10vw;
}
.character-splat-3 {
    align-self:flex-end;
    margin-right:20vw;
}
.character-splat-4 {
    margin-left:20vw;
    margin-top:-10%;
}
.character-splat-5 {
    align-self:flex-end;
    margin-right:20vw;
}
.character-splat-6 {
    margin-left:-10vw;
    margin-top:-10%;
}

.character-contents-contents {
    padding:0;
    margin: 8vw 10vw 8vw 10vw;
    position:relative;
    z-index:2;
    font-size:4vw;
    display:flex;
    flex-direction:column;
    row-gap:6vw;
}

.character-photo.left {
    width:30vw;
    margin-right:3vw;
    float:left;
}

.character-photo.right {
    width:30vw;
    margin-left:3vw;
    float:right;
}

.character-name {
    font-family:"fredoka", sans-serif;
    font-weight:700;
    font-size:1.2em;
    color:#60A8F2;
    text-transform: uppercase;
}
.character-name.right {
    text-align:right;
}

.character-subheader {
    font-family:"grandstander", sans-serif;
    font-weight:300;
    font-size:.6em;
    color:#60A8F2;
    line-height:1.2em;
}
.character-subheader.right {
    text-align:right;
}

.paragraph-1 {
    font-family:"fredoka", sans-serif;
    font-weight:400;
    font-size:.4em;
    color:#DDD7C6;
    line-height:1.4em;
}

.paragraph-1.right {
    text-align:right;
}

.paragraph-2 {
    font-family:"fredoka", sans-serif;
    font-weight:400;
    font-size:.4em;
    color:#DDD7C6;
    line-height:1.4em;
    clear:both;
}
.paragraph-2.left {
    padding-left:15vw;
}
.paragraph-2.right {
    padding-right:15vw;
    text-align:right;
}

/* MOTIONS PAGE */

#motionContent {
    position:relative;
    height:90vmax;
}

#motionContentBack {
    position:absolute;
    z-index:-1;
    width:100vw;
    height:100%;
    display:block;
    overflow:hidden;
}

#backgroundVideo1 {
    padding-left:0;
    float:left;
    width:100%;
    min-height:100vh;
}
#backgroundVideo2 {
    padding-right:0;
    float:right;
    width:100%;
    min-height:100vh;
}

#motionContentFront {
    position:relative;
    padding-top:10vh;
    padding-left:15vw;
    padding-right:15vw;
    font-size:2vw;
    height:100%;
    display:flex;
    flex-direction:column;
    row-gap:2vw;
    align-items:center;
    justify-content:center;
}

.motion-above-text {
    display:flex;
    flex-direction:row;
    column-gap:1.5vw;
    color:white;
    min-height:0;
}

.motion-title {
    font-family: "grandstander", sans-serif;
    font-weight:500;
    font-size:4em;
    letter-spacing:-.5vw;
    text-transform: uppercase;
    align-self:center;
}

.central-bar {
    background-color: white;
    width:1vw;
}

.motion-description {
    font-family: "fredoka", sans-serif;
    font-weight:400;
    font-size:1em;
    align-self:center;
}
.motion-showreel {
    width:100%;
}
.motion-showreel-video {
    width:100%;
}

.motion-below-text {
    font-family: "fredoka", sans-serif;
    font-weight:400;
    font-size:1em;
    text-align:center;
    color:white;
}

.hide {
    display:none;
}