body {
        background-image: url(../../imgs/fondo/arena.png);
        background-color: rgb(124, 46, 10, .8);
        /*background-size: 100% 100%;*/
        font-family: emoji;
    }

    .d-block {
        background-size: cover;
        background-position: center center;
        height: 80vh;
    }

    .cards-slide {
        text-align: justify;
        margin: 0 35px;
    }

    h3 {
        margin: 50px 0;
    }

    @media (max-width: 600px) {
        /* .cards-slide {
        width: 97% !important;
        margin: 0px 5px;
      }

      .slick-track {
        width: 515px !important;
      } */

        .carousel-inner {
            height: 30% !important;
        }

        .d-block {
            height: 100%;
        }

        .btn-default {
            padding: 0 3em !important;
        }



        .title-btn {
            font-size: 15px;
            margin: 0px -25px !important;
        }

        .title {
            font-size: 23px !important;
            margin-top: -6em !important;
            padding: 16px 20px !important;
            margin-left: -71px;
        }

        .info {
            text-align: justify !important;
            font-size: 22px !important;
            line-height: 35px !important;
            padding: 2em !important;
        }

        .carousel-caption {
            bottom: 8px;
            padding-bottom: 0px;
        }

        .pie-info {
            font-size: 1em !important;
            padding: 4em 0px !important;
        }
    }


    .kl_img {
        width: 15em;
        height: 15em;
        margin-top: -30px;
    }

    .bd-best {
        height: calc(200px + 7rem);
        padding: 0.5rem 0;
        overflow: hidden;
        position: relative;
    }

    .bd-best-list {
        align-items: stretch;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        display: flex;
        left: 0;
        position: absolute;
        top: 1rem;
        -webkit-animation-name: bdBestCarousel;
        animation-name: bdBestCarousel;
    }

    .bd-best-item {
        text-align: center;
        flex-grow: 0;
        flex-shrink: 0;
        margin: 1px;
        transition-duration: 85ms;
        transition-property: box-shadow, transform;
        background-image: url(../../imgs/fondo/body.jpg);

    }

    .bd-best-item:hover {
        box-shadow: 0 1em 1em rgba(0, 0, 0, .1);
        transform: translateY(-.1em);
    }

    .bd-best-list:hover {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

    @keyframes bdBestCarousel {
        100% {
            transform: translateX(calc(-155% + 3120px));
        }
    }


    @media (min-width: 3700px) {

        .bd-best {
            min-height: 400px;
        }

        .bd-best-item {
            width: 200px;
            height: 100px;
        }

        .bd-best-list {
            animation-duration: 80s;
        }

        .kl_img {
            width: 300px;
        }

    }



    * {
        box-sizing: border-box;
    }

    input[type=radio] {
        display: none;
    }

    .photp-img {
        position: absolute;
        width: 50%;
        height: 60vh;
        left: 0;
        right: 0;
        margin: auto;
        transition: transform .4s ease;
        cursor: pointer;
    }

    .cards {
        width: 100%;
        height: 100%;
    }

    .photp-img img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
    }


    #item-1:checked~.cards #song-3,
    #item-2:checked~.cards #song-1,
    #item-3:checked~.cards #song-2 {
        transform: translatex(-40%) scale(.8);
        opacity: .4;
        z-index: 0;
    }

    #item-1:checked~.cards #song-2,
    #item-2:checked~.cards #song-3,
    #item-3:checked~.cards #song-1 {
        transform: translatex(40%) scale(.8);
        opacity: .4;
        z-index: 0;
    }


    #item-1:checked~.cards #song-1,
    #item-2:checked~.cards #song-2,
    #item-3:checked~.cards #song-3 {
        transform: translatex(0) scale(1);
        opacity: 1;
        z-index: 1;

        img {
            box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
        }
    }

    .circular-menu {
        /* position: fixed;
      bottom: 1em;
      z-index: 999; */

        position: fixed;
        top: 1em;
        /* bottom: 1em; */
        /* right: 1em; */
        z-index: 999;
    }

    .circular-menu .floating-btn {
        display: block;
        width: 3.5em;
        height: 3.5em;
        border-radius: 50%;
        background-color: #000;

        color: hsl(0, 0%, 100%);
        text-align: center;
        cursor: pointer;
        outline: 0;


        position: relative;
        z-index: 999;
    }

    .floating-btn i {
        line-height: 53px;
    }

    .circular-menu .floating-btn i {
        font-size: 1.3em;
        transition: transform .2s;
    }

    .circular-menu:after {
        display: block;
        content: ' ';
        width: 3.5em;
        height: 3.5em;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -2;
        background-color: hsla(0, 0%, 0%, .5);
        transition: all .3s ease;
    }

    .circular-menu.active:after {
        transform: scale3d(5.5, 5.5, 1);
        transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
    }

    .circular-menu .menu-item {
        position: absolute;
        top: .2em;
        right: .5em;
        z-index: -1;
        display: block;
        text-decoration: none;
        color: hsl(0, 0%, 100%);
        font-size: 1em;
        width: 3em;
        height: 3em;
        border-radius: 70%;
        text-align: center;
        line-height: 3;
        background-color: #000;
        transition: transform .3s ease, background .2s ease;
    }

    .circular-menu .menu-item:hover {
        background-color: hsla(0, 0%, 0%, .3);
    }

    .circular-menu.circular-menu-left {
        right: 1em;
        left: auto;
    }

    .circular-menu.circular-menu-left.active .floating-btn i {
        transform: rotate(90deg);
    }

    .circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
        transform: translate3d(-6em, 0em, 0);
    }

    .circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
        transform: translate3d(-4.3em, 4.5em, 0);
    }

    .circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
        transform: translate3d(0.5em, 6.5em, 0);
    }



    .btn-default {
        padding: .5em 1em;
        color: #fff;
        background-color: #000;
    }

    .btn-default:active,.btn-default:hover {
        color: #fff;
    }

    .btn-fotos {
        padding: .5em 1em !important;
        width: 100%;
        position: absolute;
        top: 85%;
        left: 0;
    }

    /* 
    .title {
        font-size: 6em;
        position: absolute;
        margin-top: -3em;
        font-family: emoji;
        padding: 20px;
        background-color: rgb(0, 0, 0, .5);
        box-shadow: 0 0 20px #000;
        border-radius: 30px;
    } */

    .carousel-item::before {
        background-color: rgba(48, 48, 51, 1);
    }

    .info {
        text-align: center;
        font-size: 23px;
        line-height: 60px;
        padding-top: 3em;
    }



    .title-btn {
        margin: 50px 50px 5px 50px;
    }

    .btn-default {
        padding: .5em 8em;
        color: #fff;
        background-color: #000;

    }

    .title {
        font-size: 6em;
        position: absolute;
        margin-top: -3em;
        padding: 20px;
        background-color: rgb(0, 0, 0, .5);
        box-shadow: 0 0 20px #000;
        border-radius: 30px;
    }

    .carousel-item::before {
        background-color: rgba(48, 48, 51, 1);
    }

    .pie {
        color: aliceblue;
        background-image: url(../../imgs/fondo/textura1.jpg);
        bottom: 0;
        position: relative;
        width: 100%;
        right: -15px;
        z-index: 999;
    }

    .pie-info {
        padding: 1em 0px;
        position: relative;
        text-align: center;
        font-size: 3em;
    }