@-webkit-keyframes fade_in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fade_in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.scene {
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-box-shadow: 0 50px 30px -50px #0000008f inset;
    box-shadow: 0 50px 30px -50px #0000008f inset
}

.scene:focus {
    outline: none
}

.scene .blirb {
    position: absolute;
    left: 530px;
    background: #0008;
    top: 20px;
    bottom: 20px;
    right: 20px;
    padding: 20px;
    font-size: 18px;
    color: white;
    border: 3px double #00000029;
    -webkit-box-shadow: 0 0 20px #00000087;
    box-shadow: 0 0 20px #00000087
}

.scene .blirb .blirb-title {
    color: white;
    font-size: 30px;
    display: inline-block;
    text-decoration: none;
    margin-bottom: 0.75em
}

.scene .blirb .blirb-title:hover {
    text-decoration: underline
}

.scene .cube {
    position: absolute;
    width: 300px;
    height: 300px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    top: 50%;
    -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg);
    transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg);
    -webkit-transition: 1s -webkit-transform ease;
    transition: 1s -webkit-transform ease;
    transition: 1s transform ease;
    transition: 1s transform ease, 1s -webkit-transform ease
}

.scene .cube.animated, #cursorsvg {
    -webkit-animation-name: rotato;
    animation-name: rotato;
    -webkit-animation-duration: 120s;
    animation-duration: 120s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.scene .cube .side {
    position: absolute;
    width: 300px;
    height: 300px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #7b7b7b;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background-size: cover;
    background-position: center;
    opacity: 0.9
}

.scene .cube .side span {
    position: relative;
    display: block
}

.scene .cube .front {
    -webkit-transform: translateZ(150px);
    transform: translateZ(150px)
}

.scene .cube .top {
    -webkit-transform: translateY(-150px) rotateX(90deg) rotateZ(-90deg);
    transform: translateY(-150px) rotateX(90deg) rotateZ(-90deg)
}

.scene .cube .right {
    -webkit-transform: rotateX(0deg) translateX(150px) rotateY(90deg);
    transform: rotateX(0deg) translateX(150px) rotateY(90deg)
}

.scene .cube .left {
    -webkit-transform: rotateX(0deg) translateX(-150px) rotateY(-90deg);
    transform: rotateX(0deg) translateX(-150px) rotateY(-90deg)
}

.scene .cube .bottom {
    -webkit-transform: translateY(150px) rotateX(90deg) rotateZ(-90deg);
    transform: translateY(150px) rotateX(90deg) rotateZ(-90deg)
}

.scene .cube .back {
    -webkit-transform: rotateX(180deg) translateZ(150px) rotateZ(180deg);
    transform: rotateX(180deg) translateZ(150px) rotateZ(180deg)
}

@media (max-width: 1000px) {
    .scene .blirb {
        left:300px
    }

    .scene .cube {
        width: 150px;
        height: 150px;
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg);
        transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg)
    }

    .scene.scene-noblirb .cube {
        left: 33%;
    }

    .scene .cube .side {
        width: 150px;
        height: 150px
    }

    .scene .cube .front {
        -webkit-transform: translateZ(75px);
        transform: translateZ(75px)
    }

    .scene .cube .top {
        -webkit-transform: translateY(-75px) rotateX(90deg) rotateZ(-90deg);
        transform: translateY(-75px) rotateX(90deg) rotateZ(-90deg)
    }

    .scene .cube .right {
        -webkit-transform: rotateX(0deg) translateX(75px) rotateY(90deg);
        transform: rotateX(0deg) translateX(75px) rotateY(90deg)
    }

    .scene .cube .left {
        -webkit-transform: rotateX(0deg) translateX(-75px) rotateY(-90deg);
        transform: rotateX(0deg) translateX(-75px) rotateY(-90deg)
    }

    .scene .cube .bottom {
        -webkit-transform: translateY(75px) rotateX(90deg) rotateZ(-90deg);
        transform: translateY(75px) rotateX(90deg) rotateZ(-90deg)
    }

    .scene .cube .back {
        -webkit-transform: rotateX(180deg) translateZ(75px) rotateZ(180deg);
        transform: rotateX(180deg) translateZ(75px) rotateZ(180deg)
    }
}

#cubes {
    overflow: hidden;
}

#cubes .scene .wrapper {
    min-height: 420px;
    background: #5555;
}

@media (max-width: 600px) {
    #cubes .scene .wrapper {
        min-height:0
    }

    .scene {
        height: auto;
        min-height: 0
    }

    .scene .blirb {
        position: initial
    }

    .scene .cube {
        display: none
    }
}

.cube:hover .side {
    opacity: 0.4;
    -webkit-box-shadow: 0 0 50px white;
    box-shadow: 0 0 50px white
}

@-webkit-keyframes rotato {
    0% {
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0);
        transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0)
    }

    33% {
        -webkit-transform: translateY(-55%) translateZ(-150px) rotateX(-360deg) rotateY(840deg) rotateZ(240deg);
        transform: translateY(-55%) translateZ(-150px) rotateX(-360deg) rotateY(840deg) rotateZ(240deg)
    }

    66% {
        -webkit-transform: translateY(-45%) translateZ(-150px) rotateX(-720deg) rotateY(1680deg) rotateZ(480deg);
        transform: translateY(-45%) translateZ(-150px) rotateX(-720deg) rotateY(1680deg) rotateZ(480deg)
    }

    100% {
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(-1080deg) rotateY(2520deg) rotateZ(720deg);
        transform: translateY(-50%) translateZ(-150px) rotateX(-1080deg) rotateY(2520deg) rotateZ(720deg)
    }
}

@keyframes rotato {
    0% {
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0);
        transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0)
    }

    33% {
        -webkit-transform: translateY(-55%) translateZ(-150px) rotateX(-360deg) rotateY(840deg) rotateZ(240deg);
        transform: translateY(-55%) translateZ(-150px) rotateX(-360deg) rotateY(840deg) rotateZ(240deg)
    }

    66% {
        -webkit-transform: translateY(-45%) translateZ(-150px) rotateX(-720deg) rotateY(1680deg) rotateZ(480deg);
        transform: translateY(-45%) translateZ(-150px) rotateX(-720deg) rotateY(1680deg) rotateZ(480deg)
    }

    100% {
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(-1080deg) rotateY(2520deg) rotateZ(720deg);
        transform: translateY(-50%) translateZ(-150px) rotateX(-1080deg) rotateY(2520deg) rotateZ(720deg)
    }
}

@-webkit-keyframes rotato_pulse {
    0% {
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0) scale3d(1, 1, 1);
        transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0) scale3d(1, 1, 1)
    }

    33% {
        -webkit-transform: translateY(-55%) translateZ(-150px) rotateX(-360deg) rotateY(840deg) rotateZ(240deg) scale3d(0.9, 0.9, 0.9);
        transform: translateY(-55%) translateZ(-150px) rotateX(-360deg) rotateY(840deg) rotateZ(240deg) scale3d(0.9, 0.9, 0.9)
    }

    66% {
        -webkit-transform: translateY(-45%) translateZ(-150px) rotateX(-720deg) rotateY(1680deg) rotateZ(480deg) scale3d(1.11, 1.11, 1.11);
        transform: translateY(-45%) translateZ(-150px) rotateX(-720deg) rotateY(1680deg) rotateZ(480deg) scale3d(1.11, 1.11, 1.11)
    }

    100% {
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(-1080deg) rotateY(2520deg) rotateZ(720deg) scale3d(1, 1, 1);
        transform: translateY(-50%) translateZ(-150px) rotateX(-1080deg) rotateY(2520deg) rotateZ(720deg) scale3d(1, 1, 1)
    }
}

@keyframes rotato_pulse {
    0% {
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0) scale3d(1, 1, 1);
        transform: translateY(-50%) translateZ(-150px) rotateX(0deg) rotateY(0deg) rotateZ(0) scale3d(1, 1, 1)
    }

    33% {
        -webkit-transform: translateY(-55%) translateZ(-150px) rotateX(-360deg) rotateY(840deg) rotateZ(240deg) scale3d(0.9, 0.9, 0.9);
        transform: translateY(-55%) translateZ(-150px) rotateX(-360deg) rotateY(840deg) rotateZ(240deg) scale3d(0.9, 0.9, 0.9)
    }

    66% {
        -webkit-transform: translateY(-45%) translateZ(-150px) rotateX(-720deg) rotateY(1680deg) rotateZ(480deg) scale3d(1.11, 1.11, 1.11);
        transform: translateY(-45%) translateZ(-150px) rotateX(-720deg) rotateY(1680deg) rotateZ(480deg) scale3d(1.11, 1.11, 1.11)
    }

    100% {
        -webkit-transform: translateY(-50%) translateZ(-150px) rotateX(-1080deg) rotateY(2520deg) rotateZ(720deg) scale3d(1, 1, 1);
        transform: translateY(-50%) translateZ(-150px) rotateX(-1080deg) rotateY(2520deg) rotateZ(720deg) scale3d(1, 1, 1)
    }
}




@media (max-width: 767px) {
    .hide-mobile {display: none;}
}

.nav-slider {
    display: flex;
    flex-wrap: wrap;
}
.scene {
    flex: 1 1 100%;
}
.scene-noblirb {
    flex: 1 1 320px;
}


.trippy-titlebar {
    text-align: center;
    flex: 1 1 100%;
    background: black;
    margin: 0;
    padding: 20px 44px 20px 20px;
    color: black;
    text-shadow: 2px 0 #000, 4px 0 #fff, 6px 0 #000, 8px 0 #fff, 10px 0 #000, 12px 0 #fff, 14px 0 #000, 16px 0 #fff, 18px 0 #000, 20px 0 #fff, 22px 0 #000, 24px 0 #FFF;
    text-transform: uppercase;
    font-size: 4em;
}



.btn {
    display: inline-block;
    text-decoration: none;
    line-height: 1;
}

.btn.btn-huge-flat {
    margin: 50px 40px 10px;
    font-size: 24px;
    font-weight: 200;
    color: white;
    padding: 15px 20px;
    border-radius: 40px;
    border: 1px solid white
}

.btn.btn-huge-flat:active,.btn.btn-huge-flat:focus,.btn.btn-huge-flat:visited {
    color: white
}

.btn.btn-huge-flat:hover {
    color: black;
    background: white;
    opacity: 0.8
}

.btn.btn-client-portal {
    background: #2e9c60;
    color: white;
    font-size: 1.2em;
    padding: 10px 15px;
    margin-left: 5px;
    border-radius: 50px;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1)
}