* {
        box-sizing: border-box
    }


    body,
    html {
        padding: 0;
        margin: 0
    }


    body {
        background: #23232391;
        color: #fff;

    }

    button {
        padding: 0.9em 1.8em;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 4px;
        color: transparent;
        border: 3px solid crimson;
        font-size: 14px;
        position: fixed;
        font-family: inherit;
        background: transparent;
        cursor: pointer;
    }

    button::before {
        content: "Inicio";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #363636;
        color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;
    }

    button:hover::before {
        left: 100%;
        transform: scale(0) rotateY(360deg);
        opacity: 0;
    }

    button::after {
        content: "INICIO";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: #363636;
        color: rgb(207, 220, 20);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;
        transform: scale(0) rotateY(0deg);
        opacity: 0;
    }

    button:hover::after {
        left: 0;
        transform: scale(1) rotateY(360deg);
        opacity: 1;
    }



    p {
        padding: 10PX;
        background-color: #2323238a;
        border-radius: 10px;
        font-size: 18pt;
    }

    h2 {
        color: crimson;
        font-size: 28pt;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        -webkit-text-stroke: 1px black;
        /* text-shadow: 1px 1px 12px antiquewhite; */


    }

    .opaque {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        background: #d2d6f1;
    }

    .lt-ie9 .opaque {
        display: none;
    }

    header {
        position: relative;
        z-index: 10;
        padding: 20px;
    }

    .feature {
        position: fixed;
        top: 0;
        z-index: 0;
        width: 100%;
        padding-top: 50%;
        background: url(https://pedro.desarrollowebalcala.es/img/puppet/portada2.webp) center center no-repeat;
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;
        -webkit-box-shadow: 0 -50px 20px -20px #232323 inset;
        -moz-box-shadow: 0 -50px 20px -20px #232323 inset;
        box-shadow: 0 -50px 20px -20px #232323 inset;
    }

    .content {
        position: relative;
        z-index: 1;
        padding-top: 45%;
        width: 90%;
        margin: 0 auto;
    }

    @media only screen and (min-width:36.250em) {
        .content {
            width: 60%;
            padding-top: 35%
        }
    }