.logo-holder {
    position: fixed;
    z-index: 5;
    top: 50%;
    left: 50%;
    color: #fff;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    opacity: 1;
    -webkit-transition: opacity .5s 0s, z-index 0s 0s;
    -o-transition: opacity .5s 0s, z-index 0s 0s;
    transition: opacity .5s 0s, z-index 0s 0s;

    /* Using font size here to dictate size of letters.
     * This is so the shaped (which are made of borders) can be responsive,
     * meaning, we'll use relative units instead of pixels for border size.
     * (going to use ems for border sizes, since you can't do percentages).
     * Use media queries and update the font size here for larger/smaller shapes.
     */
    font-size: 25.6px;
    width: 673px;
    height: 465px;
}

@media (min-width: 2048px) {
    .logo-holder {
        font-size: 37.6px;
        width: 989px;
        height: 678px;
    }
}

@media (max-width: 1130px) {
    .logo-holder {
        font-size: 16.6px;
        width: 437px;
        height: 300px;
    }
}

@media (max-width: 580px) {
    .logo-holder {
        font-size: 10.6px;
        width: 278px;
        height: 191px;
    }
}

@media (max-width: 360px) {
    .logo-holder {
        font-size: 8.6px;
        width: 226px;
        height: 155px;
    }
}


.hide-intro .logo-holder {
    opacity: 0;
    z-index: -99;
    -webkit-transition: opacity .5s 0s, z-index 0s .5s;
    -o-transition: opacity .5s 0s, z-index 0s .5s;
    transition: opacity .5s 0s, z-index 0s .5s;
}

.logo-name {
    position: absolute;
    top: 52.7%;
    left: 45%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 35%;
    height: auto;
    opacity: 0;
    fill: #fff;
}

.unfold .logo-name {
    opacity: 1;
    -webkit-transition: opacity 1s 1s;
    -o-transition: opacity 1s 1s;
    transition: opacity 1s 1s;
}

.letter {
    font-size: 1em;
    position: absolute;
    top: 0;
    bottom: 0;
}

.letter.logo-c {
    left: 0;
    right: 54.2%;
}

.letter.logo-s {
    right: 0;
    left: 54.9%;
}

.shape {
    position: absolute;
    border-left: 5.85em solid rgba(0,0,0,.5);
    border-top: 5.85em solid transparent;
    -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
            transform-origin: left center;
}

.unfold .shape {
    -webkit-transition: -webkit-transform .3s ease-in;
    transition: -webkit-transform .3s ease-in;
    -o-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
    transition: transform .3s ease-in, -webkit-transform .3s ease-in;
}

.shape:nth-child(1) {
    top: 0;
    right: 0;
    -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
            transform-origin: left center;
    border-left: 5.85em solid currentColor;
    border-top: 5.85em solid transparent;
    -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
    -webkit-animation: colorshift01 4s linear 0s infinite alternate both;
            animation: colorshift01 4s linear 0s infinite alternate both;
}

.logo-s .shape:nth-child(1) {
    -webkit-animation: colorshift03 4s linear 0s infinite alternate both;
            animation: colorshift03 4s linear 0s infinite alternate both;
}

.unfold .shape:nth-child(1) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transition-delay: .3s;
         -o-transition-delay: .3s;
            transition-delay: .3s;
}

.unfold .logo-s .shape:nth-child(1) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transition-delay: .7s;
         -o-transition-delay: .7s;
            transition-delay: .7s;
}

.shape:nth-child(2) {
    top: 0;
    right: 0.2em;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    border-left: 5.85em solid currentColor;
    border-top: 5.85em solid transparent;
    -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(-90deg);
            transform: rotateX(-90deg) rotateY(0deg) rotateZ(-90deg);
    -webkit-animation: colorshift02 4s linear 0s infinite alternate both;
            animation: colorshift02 4s linear 0s infinite alternate both;
}

.logo-s .shape:nth-child(2) {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
    -webkit-animation: colorshift01 4s linear 0s infinite alternate both;
            animation: colorshift01 4s linear 0s infinite alternate both;
}

.unfold .shape:nth-child(2) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}

.unfold .logo-s .shape:nth-child(2) {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
}

.shape:nth-child(3) {
    top: 0.2em;
    right: 0.2em;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    border-left: 5.85em solid currentColor;
    border-top: 5.85em solid transparent;
    -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(-180deg);
            transform: rotateX(-90deg) rotateY(0deg) rotateZ(-180deg);
    -webkit-animation: colorshift03 4s linear 0s infinite alternate both;
            animation: colorshift03 4s linear 0s infinite alternate both;
}

.unfold .shape:nth-child(3) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
}

.logo-s .shape:nth-child(3) {
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(-180deg);
            transform: rotateX(0deg) rotateY(-90deg) rotateZ(-180deg);
    -webkit-animation: colorshift02 4s linear 0s infinite alternate both;
            animation: colorshift02 4s linear 0s infinite alternate both;
}

.unfold .logo-s .shape:nth-child(3) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}

.shape:nth-child(4) {
    top: 6.15em;
    left: 0;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    border-left: 5.85em solid currentColor;
    border-top: 5.85em solid transparent;
    -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    -webkit-animation: colorshift02 4s linear 0s infinite alternate both;
            animation: colorshift02 4s linear 0s infinite alternate both;
}

.unfold .shape:nth-child(4) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
}

.logo-s .shape:nth-child(4) {
    top: 6.15em;
    left: 6em;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
    -webkit-animation: colorshift03 4s linear 0s infinite alternate both;
            animation: colorshift03 4s linear 0s infinite alternate both;
}

.unfold .shape:nth-child(4) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transition-delay: .3s;
         -o-transition-delay: .3s;
            transition-delay: .3s;
}

.shape:nth-child(5) {
    top: 6.33em;
    left: 6em;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    border-left: 5.85em solid currentColor;
    border-top: 5.85em solid transparent;
    -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg);
            transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg);
    -webkit-animation: colorshift01 4s linear 0s infinite alternate both;
            animation: colorshift01 4s linear 0s infinite alternate both;
}

.unfold .shape:nth-child(5) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
    -webkit-transition-delay: .5s;
         -o-transition-delay: .5s;
            transition-delay: .5s;
}

.logo-s .shape:nth-child(5) {
    top: 9.25em;
    left: 8.93em;
    -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
            transform-origin: left center;
    -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
            transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
    -webkit-animation: colorshift01 4s linear 0s infinite alternate both;
            animation: colorshift01 4s linear 0s infinite alternate both;
}

.unfold .logo-s .shape:nth-child(5) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
}

.shape:nth-child(6) {
    top: 9.25em;
    right: -2.92em;
    -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
            transform-origin: left center;
    border-left: 5.85em solid currentColor;
    border-top: 5.85em solid transparent;
    -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
            transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
    -webkit-animation: colorshift03 4s linear 0s infinite alternate both;
            animation: colorshift03 4s linear 0s infinite alternate both;
}

.unfold .shape:nth-child(6) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
}

.logo-s .shape:nth-child(6) {
    top: 6.33em;
    left: 5.83em;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg);
            transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg);
    -webkit-animation: colorshift03 4s linear 0s infinite alternate both;
            animation: colorshift03 4s linear 0s infinite alternate both;
}

.unfold .logo-s .shape:nth-child(6) {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
    -webkit-transition-delay: .7s;
         -o-transition-delay: .7s;
            transition-delay: .7s;
}


@-webkit-keyframes colorshift01 {
    0%   { opacity: .2; }
    100% { opacity: .8; }
}


@keyframes colorshift01 {
    0%   { opacity: .2; }
    100% { opacity: .8; }
}

@-webkit-keyframes colorshift02 {
    0%   { opacity: .6; }
    100% { opacity: .1; }
}

@keyframes colorshift02 {
    0%   { opacity: .6; }
    100% { opacity: .1; }
}

@-webkit-keyframes colorshift03 {
    0%   { opacity: .8; }
    100% { opacity: .4; }
}

@keyframes colorshift03 {
    0%   { opacity: .8; }
    100% { opacity: .4; }
}