.circle {
    position: relative;
    border: 1px solid black;
    padding: 0;
    margin: 1em auto;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
    transform: rotate(0deg);
    /*box-shadow: 0px 0px 100px -40px #fffd;*/
}

.circle li {
    overflow: hidden;
    position: absolute;
    top: -20%;
    right: -20%;
    width: 70%;
    height: 70%;
    transform-origin: 0% 100%;
}

.cuadro {
    position: absolute;
    left: -100%;
    width: 200%;
    height: 200%;
    text-align: center;
    padding-top: 20px;
}

.circle li:first-child {
    transform: rotate(0deg) skewY(-18deg);
}

.circle li:nth-child(2) {
    transform: rotate(72deg) skewY(-18deg);
}

.circle li:nth-child(3) {
    transform: rotate(144deg) skewY(-18deg);
}

.circle li:nth-child(4) {
    transform: rotate(216deg) skewY(-18deg);
}

.circle li:nth-child(5) {
    transform: rotate(288deg) skewY(-18deg);
}

.circle li:nth-child(1) .cuadro {
    background: linear-gradient(60deg, #1791a0 60%, #000000 90%);
}

.circle li:nth-child(2) .cuadro {
    background: linear-gradient(60deg, #ebdd1a 60%, #000000 90%);
}

.circle li:nth-child(3) .cuadro {
    background: linear-gradient(60deg, #ed3326 60%, #000000 90%);
}

.circle li:nth-child(4) .cuadro {
    background: linear-gradient(60deg, #ed5b2a 60%, #000000 90%);
}

.circle li:nth-child(5) .cuadro {
    background: linear-gradient(60deg, #8dc540 60%, #000000 90%);
}

.circle li:nth-child(1) .cuadro:hover {
    background: #1791a0;
}

.circle li:nth-child(2) .cuadro:hover {
    background: #ebdd1a;
}

.circle li:nth-child(3) .cuadro:hover {
    background: #ed3326;
}

.circle li:nth-child(4) .cuadro:hover {
    background: #ed5b2a;
}

.circle li:nth-child(5) .cuadro:hover {
    background: #8dc540;
}


/*
.circle li .cuadro:hover {
    cursor: pointer;
    background: #393939f7;
}
*/

.circle .centro {
    width: 150px;
    height: 150px;
    background: black;
    top: 141px;
    position: absolute;
    left: 141px;
    font-family: arial;
    font-weight: bolder;
    border-radius: 50%;
    box-shadow: 0px 0px 20px black;
    cursor: pointer;
}

.circle .centro .texto {
    color: white;
    width: 100%;
    text-align: center;
    margin-top: 63px;
    font-size: 23px;
}

.circle .textos {
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    font-family: arial;
    pointer-events: none;
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
}

.circle .text1 {
    position: absolute;
    top: 21%;
    left: 16%;
}

.circle .text2 {
    position: absolute;
    top: 18%;
    left: 61%;
    width: 76px;
    text-align: center;
}

.circle .text3 {
    position: absolute;
    top: 55%;
    left: 71%;
}

.circle .text4 {
    position: absolute;
    top: 76%;
    left: 42%;
    width: 76px;
    text-align: center;
}

.circle .text5 {
    position: absolute;
    top: 54%;
    left: 11%;
    width: 76px;
    text-align: center;
}

.selector-circle {
    position: absolute;
    top: 17%;
    right: 22%;
    transition: 0.5s right, 0.5s top;
    z-index: 999;
}

.hero-info .buttons2 {
    max-width: 400px!important;
}

.btn-oportunidades {
    background: white;
    color: black;
    font-weight: 700;
    padding: 20px 50px;
    margin: 0 auto;
}

@media (max-width: 1550.98px) {
    .selector-circle {
        position: absolute;
        top: 10%;
        right: 18%;
    }
}

@media (max-width: 1399.98px) {
    .selector-circle {
        transform: scale(0.85);
        right: 8%;
    }
}

@media (max-width: 1199.98px) {
    .selector-circle {
        position: relative;
        transform: scale(1);
        left: 0;
        width: 100%;
        /* height: 312px; */
        margin-top: 10%;
    }
}

@media (max-width: 991.98px) {}

@media (max-width: 767.98px) {
    .circle {
        position: relative;
        transform: scale(0.75);
    }
    .hero-info .buttons2 {
        max-width: 300px!important;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .circle {
        position: relative;
        zoom: 0.89;
        margin: 0 auto;
    }
}