@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,800;0,900;1,600&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap'); */


body{
    font-family: 'Poppins', sans-serif !important;
    /* font-family: 'Mochiy Pop One', sans-serif !important; */
}

.btn-neon
{
    position: relative;
    display: inline-block;
    padding: 5px 20px;
    /* text-transform: uppercase; */
    color: #fff;
    letter-spacing: 2px;
    /* text-decoration: none !important; */
    font-size: 20px;
    overflow: hidden;
    transition: 0.01ms;
    /* font-weight: 600; */
    /* margin-left: 5%;
    margin-right: 1%; */
    /* border-radius: 50px; */
    /* box-shadow: 0 0 5px #92C052, 0 0 10px #92C052, 0 0 10px #92C052; */

}
.btn-neon:hover
{
    color: rgba(28, 61, 117);
    background: #92C052;
    box-shadow: 0 0 10px #92C052, 0 0 20px #92C052, 0 0 40px #92C052;
    transition-delay: .5s;
}
.btn-neon span
{
    position: absolute;
    display: block;
    /* border-radius: 25px; */
}
#span1
{
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent,#92C052);
}
.btn-neon:hover #span1
{
    left: 100%;
    transition: .5s;
}
#span3
{
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent,#92C052);
}
.btn-neon:hover #span3
{
    right: 100%;
    transition: 1s;
    transition-delay: 0.1s;
}
#span2
{
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#92C052);
}
.btn-neon:hover #span2
{
    top: 100%;
    transition: 1s;
    transition-delay: 0.1s;
}
#span4
{
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#92C052);
}
.btn-neon:hover #span4
{
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.4s;
}
.rotated
{
    animation-name: rotation;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotation
{
    0%
    {
        transform:rotate(0deg);
    }

    100%
    {
        transform:rotate(360deg);
    }
}



/******************************** star responsive style ********************************/

/* Escritorio extra grande */
@media only screen and (min-width: 1200px){

}

/* Escritorio grande */
@media only screen and (min-width: 992px) and (max-width: 1199px){

}

/* Escritorio pequeño / tablet */
@media only screen and (min-width: 768px) and (max-width: 991px){
    .btn-neon
    {
        font-size: 14px;
    }
}

/* Tablets y phablets */
@media only screen and (min-width: 576px) and (max-width: 767px){
    .btn-neon
    {
        font-size: 14px;
    }
}

/* Teléfonos */
@media only screen and (max-width: 575px){
    .btn-neon
    {
        font-size: 14px;
    }
}
/* ipad */
@media only screen
and (height : 1024px)
and (width : 768px)
{
    .btn-neon
    {
        font-size: 20px;
    }
}
/* ipad Pro*/
@media only screen
and (width: 1024px)
and (height: 1366px)
{
    .btn-neon
    {
        font-size: 30px;
    }
}
