html,
body {
    height: 100%;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
body {
    background: #fff;
    font-family: "Outfit", serif;
}

.flex-container {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100%;
}

.glowing-box {
    width: 100px;
    height: 100px;
    margin: auto;
    position: relative;
    transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
    text-align: center;
    z-index:0; position: absolute; left: 50%; margin-left: -50px; bottom: 50%; margin-bottom: -50px;
}
.glowing-box.active {opacity: 0; bottom: 45%;}

.glowing-box .box-face,
.glowing-box .top-flap {
    width: 100px;
    height: 100px;
    background: #DDD;
    position: absolute;
}

.glowing-box .top-flap {
    width: 50px;
    transform-origin: 100% 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
}

.glowing-box .right-side {
    border: 2px solid #CCC;
    transform: translateX(50px) rotateY(90deg);
    z-index: 9;
}

.glowing-box .front {
    border: 2px solid #CCC;
    transform: rotateY(0deg) translateZ(50px);
    z-index: 9;
}

.glowing-box .left-side {
    background: #888;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF888888', endColorstr='#FF222222');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg4ODg4OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #888888), color-stop(100%, #222222));
    background-image: -moz-linear-gradient(right top, #888888 0%, #222222 100%);
    background-image: -webkit-linear-gradient(right top, #888888 0%, #222222 100%);
    background-image: linear-gradient(to left bottom, #888888 0%, #222222 100%);
    border: 0;
    box-shadow: -15px 10px 60px -15px #fff;
    transform: translateX(-50px) rotateY(90deg);
}

.glowing-box .back {
    background: #d5d5d5;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFD5D5D5', endColorstr='#FF888888');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZDVkNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg4ODg4OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #d5d5d5), color-stop(100%, #888888));
    background-image: -moz-linear-gradient(right top, #d5d5d5 0%, #888888 100%);
    background-image: -webkit-linear-gradient(right top, #d5d5d5 0%, #888888 100%);
    background-image: linear-gradient(to left bottom, #d5d5d5 0%, #888888 100%);
    border: 0;
    box-shadow: 15px 10px 60px -15px #fff;
    transform: translateZ(-50px) rotateY(0deg);
}

.glowing-box .bottom {
    background: #888;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF888888', endColorstr='#FF222222');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg4ODg4OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #888888), color-stop(100%, #222222));
    background-image: -moz-linear-gradient(top, #888888 0%, #222222 100%);
    background-image: -webkit-linear-gradient(top, #888888 0%, #222222 100%);
    background-image: linear-gradient(to bottom, #888888 0%, #222222 100%);
    border: 0;
    box-shadow: 0 0 60px #fff;
    transform: translateY(50px) rotateX(90deg);
}

.top-right {
    animation-name: open-right-flap;
    transform: translateY(-50px) translateX(50px) rotateX(90deg) rotateZ(0deg) rotateY(225deg);
}

@keyframes open-right-flap {
    0% {
        transform: translateY(-50px) translateX(50px) rotateX(90deg) rotateZ(0deg) rotateY(0deg);
    }

    100% {
        transform: translateY(-50px) translateX(50px) rotateX(90deg) rotateZ(0deg) rotateY(225deg);
    }
}

.top-front {
    animation-name: open-front-flap;
    transform: translateY(-50px) translateZ(50px) rotateX(90deg) rotateZ(90deg) rotateY(225deg);
}

@keyframes open-front-flap {
    0% {
        transform: translateY(-50px) translateZ(50px) rotateX(90deg) rotateZ(90deg) rotateY(0deg);
    }

    50% {
        transform: translateY(-50px) translateZ(50px) rotateX(90deg) rotateZ(90deg) rotateY(0deg);
    }

    100% {
        transform: translateY(-50px) translateZ(50px) rotateX(90deg) rotateZ(90deg) rotateY(225deg);
    }
}

.top-left {
    animation-name: open-left-flap;
    transform: translateY(-50px) translateX(-50px) rotateX(90deg) rotateZ(180deg) rotateY(225deg);
}

@keyframes open-left-flap {
    0% {
        transform: translateY(-50px) translateX(-50px) rotateX(90deg) rotateZ(180deg) rotateY(0deg);
    }

    100% {
        transform: translateY(-50px) translateX(-50px) rotateX(90deg) rotateZ(180deg) rotateY(225deg);
    }
}

.top-back {
    animation-name: open-back-flap;
    transform: translateY(-50px) translateZ(-50px) rotateX(90deg) rotateZ(270deg) rotateY(225deg);
}

@keyframes open-back-flap {
    0% {
        transform: translateY(-50px) translateZ(-50px) rotateX(90deg) rotateZ(270deg) rotateY(0deg);
    }

    50% {
        transform: translateY(-50px) translateZ(-50px) rotateX(90deg) rotateZ(270deg) rotateY(0deg);
    }

    100% {
        transform: translateY(-50px) translateZ(-50px) rotateX(90deg) rotateZ(270deg) rotateY(225deg);
    }
}

#tgb {
    display: block;
    color: white;
    font-size: 40px;
    text-align: center;
    text-shadow: 2px 2px 10px #fff;
    transform: rotateY(45deg) rotateX(45.5deg) translateZ(-25px);
}
.logoBx {position: absolute; left: 50%; top: 40%; z-index: 1; width: 50px; height: 50px; margin-left: -25px; opacity: 0;}
.logoBx img, .csImg img {width: 100%; height: auto;}
.logoBx.active {top: 20px; opacity: 1; width: 150px; height: 150px; margin-left: -75px;}
.cText {position: absolute; left: 50%; bottom: -40%; text-align: center; width: 350px; margin-left: -175px; font-size: 18px; font-weight: 300; opacity: 0;}
.cText span {display: block; margin: 5px 0; font-size: 24px; font-weight: 600; color: #0e4d8f;}
.cText.active {bottom: 20px; opacity: 1; opacity: 1;}
.csImg {position: absolute; left: 50%; top: 50%; z-index: 1; width: 600px; height: 300px; margin-left: -300px; margin-top: -150px; opacity: 0;}
.csImg.active {opacity: 1;}

@media only screen and (max-width: 767px) { 
    .csImg {width: 96%; height: auto; margin-left: -48%; margin-top: -30%;}
}