* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    *::before, *::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

.indexbtnbody {
    padding: 6% 0 0 0;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.bgImg {
    position: relative;
    top: 4rem;
}

button.learn-more {
    font-weight: 600;
    color: #382b22;
    font-size: 2rem;
    width: 75%;
    text-transform: uppercase;
    padding: 1em;
    background: #fff0f0;
    border: 2px solid #b18597;
    -webkit-border-radius: 0.75em;
    -moz-border-radius: 0.75em;
    border-radius: 0.75em;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
    transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
    -o-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -o-transform 150ms cubic-bezier(0, 0, 0.58, 1);
    -moz-transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -moz-transform 150ms cubic-bezier(0, 0, 0.58, 1);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -moz-transform 150ms cubic-bezier(0, 0, 0.58, 1), -o-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}

    button.learn-more::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f9c4d2;
        -webkit-border-radius: inherit;
        -moz-border-radius: inherit;
        border-radius: inherit;
        -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
        -moz-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
        box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
        -webkit-transform: translate3d(0, 0.75em, -1em);
        -moz-transform: translate3d(0, 0.75em, -1em);
        transform: translate3d(0, 0.75em, -1em);
        -webkit-transition: -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
        transition: -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
        -o-transition: box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -o-transform 150ms cubic-bezier(0, 0, 0.58, 1);
        -moz-transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -moz-transform 150ms cubic-bezier(0, 0, 0.58, 1), -moz-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
        transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
        transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -moz-transform 150ms cubic-bezier(0, 0, 0.58, 1), -o-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -moz-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
    }

    button.learn-more:hover {
        background: #ffe9e9;
        -webkit-transform: translate(0, 0.25em);
        -moz-transform: translate(0, 0.25em);
        -ms-transform: translate(0, 0.25em);
        -o-transform: translate(0, 0.25em);
        transform: translate(0, 0.25em);
    }

        button.learn-more:hover::before {
            -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
            -moz-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
            box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
            -webkit-transform: translate3d(0, 0.5em, -1em);
            -moz-transform: translate3d(0, 0.5em, -1em);
            transform: translate3d(0, 0.5em, -1em);
        }

    button.learn-more:active {
        background: #ffe9e9;
        -webkit-transform: translate(0em, 0.75em);
        -moz-transform: translate(0em, 0.75em);
        -ms-transform: translate(0em, 0.75em);
        -o-transform: translate(0em, 0.75em);
        transform: translate(0em, 0.75em);
    }

        button.learn-more:active::before {
            -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
            -moz-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
            box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
            -webkit-transform: translate3d(0, 0, -1em);
            -moz-transform: translate3d(0, 0, -1em);
            transform: translate3d(0, 0, -1em);
        }


@media(max-width:1300px) {
    button.learn-more {
        font-size: 1.5rem;
    }
}

@media(max-width:1000px) {
    button.learn-more {
        font-size: 1.2rem;
    }
}