.simregengine> ::placeholder {
    color: red;
    opacity: 1;
    /* Firefox */
}

.csstransforms3d .books {
    -moz-perspective: 100px;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.csstransforms3d .book {
    position: relative;
    -moz-perspective: 100px;
    -moz-transform: rotateY(-3deg);
    -webkit-transform: perspective(100) rotateY(-3deg);
    outline: 1px solid transparent;
    /* Helps smooth jagged edges in Firefox */
    box-shadow: none;
    margin: 0;
}

.csstransforms3d .book img {
    position: relative;
    max-width: 90%;
}

.csstransforms3d .book:before,
.csstransforms3d .book:after {
    position: absolute;
    top: 2%;
    height: 96%;
    content: ' ';
    z-index: -1;
}

.csstransforms3d .book:before {
    width: 90%;
    left: 7.5%;
    background-color: #18225a;
    box-shadow: 1px 1px 10px #333;
}

.csstransforms3d .book:hover {
    left: -7.5%;
}

.csstransforms3d .book:after {
    width: 5%;
    left: 90%;
    background-color: #EFEFEF;
    box-shadow: inset 0px 0px 5px #aaa;
    -moz-transform: rotateY(20deg);
    -webkit-transform: perspective(100) rotateY(20deg);
}

.logodaerahc {
    position: relative;
    margin-top: -70px;
}

.spinner {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
    text-align: center;

    -webkit-animation: sk-rotate 2.0s infinite linear;
    animation: sk-rotate 2.0s infinite linear;
}

/**
 * Icon
 */

.icon-simreg {
    position: relative;
    overflow: hidden;

    display: inline-block;

    margin: 25px 0 25px 25px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    font-size: 12px;
    font-family: sans-serif;
}

.icon-simreg:nth-child(1) {
    background: cornflowerblue;
}

.icon-simreg:nth-child(2) {}

.icon-simreg:nth-child(3) {
    background: gray;
}

/**
   * The "shine" element
   */

.icon-simreg:after {
    animation: shine 5s ease-in-out infinite;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    top: -110%;
    left: -210%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);

    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.13) 77%,
            rgba(255, 255, 255, 0.5) 92%,
            rgba(255, 255, 255, 0.0) 100%);
}

/* Hover state - trigger effect */

.icon-simreg:hover:after {
    opacity: 1;
    top: -180%;
    left: -5%;
    transition-property: left, top, opacity;
    transition-duration: 1s, 0.7s, 0.15s;
    transition-timing-function: ease;
}

/* Active state */

.icon-simreg:active:after {
    opacity: 0;
}

@keyframes shine {
    10% {
        opacity: 1;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }

    100% {
        opacity: 0;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
    }
}