body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
.book-wrap {
    padding: 30px 0;
}

    .book-wrap .learn-promise {
        color: #36b7e6;
        font-size: 28px;
        font-style: italic;
        line-height: 1.3;
        margin-top: 20px;
    }

.book-container {
    width: 200px;
    height: 300px;
    margin: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 400px;
}

.book-wrap .book-title {
    text-transform: uppercase;
}

.book {
    transform: rotateY(-30deg);
    position: relative;
    transform-style: preserve-3d;
    width: 200px;
    height: 300px;
    transition: transform 1s ease;
    animation: 1s ease 0s 1 initAnimation;
}

    .book:hover {
        transform: rotate(0deg);
    }

@keyframes initAnimation {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-30deg);
    }
}

.book > :first-child {
    position: absolute;
    background: #0d47a1aa;
    width: 200px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 5px 5px 20px #666;
}

.book::before {
    content: ' ';
    background: #fff;
    height: calc(300px - 2 * 3px);
    width: 50px;
    top: 3px;
    position: absolute;
    transform: translateX(calc(200px - 50px / 2 - 3px)) rotateY(90deg) translateX(calc(50px / 2))
}

.book::after {
    content: ' ';
    position: absolute;
    left: 0;
    width: 200px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #01060f;
    transform: translateZ(-50px);
    box-shadow: -10px 0 50px 10px #666;
}

.book-wrap-2 {
    padding: 30px 0;
}

    .book-wrap-2 .learn-promise {
        color: #36b7e6;
        font-size: 28px;
        font-style: italic;
        line-height: 1.3;
        margin-top: 20px;
    }

.book-container-2 {
    width: 300px;
    height: 300px;
    margin: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 400px;
}

.book-wrap-2 .book-title-2 {
    text-transform: uppercase;
}

.book-2 {
    transform: rotateY(-30deg);
    position: relative;
    transform-style: preserve-3d;
    width: 300px;
    height: 300px;
    transition: transform 1s ease;
    animation: 1s ease 0s 1 initAnimation;
}

    .book-2:hover {
        transform: rotate(0deg);
    }

@keyframes initAnimation {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-30deg);
    }
}

.book-2 > :first-child {
    position: absolute;
    background: #0d47a1aa;
    width: 300px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 5px 5px 20px #666;
}

.book-2::before {
    content: ' ';
    background: #fff;
    height: calc(300px - 2 * 3px);
    width: 50px;
    top: 3px;
    position: absolute;
    transform: translateX(calc(300px - 50px / 2 - 3px)) rotateY(90deg) translateX(calc(50px / 2))
}

.book-2::after {
    content: ' ';
    position: absolute;
    left: 0;
    width: 300px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #01060f;
    transform: translateZ(-50px);
    box-shadow: -10px 0 50px 10px #666;
}

.book-wrap-3 {
    padding: 30px 0;
}

    .book-wrap-3 .learn-promise {
        color: #36b7e6;
        font-size: 28px;
        font-style: italic;
        line-height: 1.3;
        margin-top: 20px;
    }

.book-container-3 {
    width: 300px;
    height: 300px;
    margin: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 400px;
}

.book-wrap-3 .book-title-3 {
    text-transform: uppercase;
}

.book-3 {
    transform: rotateY(-30deg);
    position: relative;
    transform-style: preserve-3d;
    width: 300px;
    height: 300px;
    transition: transform 1s ease;
    animation: 1s ease 0s 1 initAnimation;
}

    .book-3:hover {
        transform: rotate(0deg);
    }

@keyframes initAnimation {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-30deg);
    }
}

.book-3 > :first-child {
    position: absolute;
    background: #0d47a1aa;
    width: 300px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 5px 5px 20px #666;
}

.book-3::before {
    content: ' ';
    background: #fff;
    height: calc(300px - 2 * 3px);
    width: 50px;
    top: 3px;
    position: absolute;
    transform: translateX(calc(300px - 50px / 2 - 3px)) rotateY(90deg) translateX(calc(50px / 2))
}

.book-3::after {
    content: ' ';
    position: absolute;
    left: 0;
    width: 300px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #01060f;
    transform: translateZ(-50px);
    box-shadow: -10px 0 50px 10px #666;
}