@import url(bootstrap.min.css);
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #0b2e13;
}
.container{
    width: 1170px;
    margin: 0 auto;
}


.modal input{
    padding-top: 13px;
    width: 60px;
    height: 60px;
}
.modal .activations  div span{
    padding-right: 20px;
    color: #2d8ac7;
}
.modal .activations  div p{
    margin: 0;
}


header > div{
    height: 500px;
    position: relative;
}
header > div img{
    position: absolute;
}

header > div button{
    position: absolute;
    border: none;

}

.btn{
   border: none;
   font-size: .9rem;
  border-radius: 20px;
}

.img-fluid{
    width: 100%;
    height: auto;
}
/*--------------btn-1--------------*/
#btn-1{
    background-color: rgba(48, 17, 110, 0.87);
    top: 5.8rem;
    left: 7.5rem;
    font-size: 0.9rem;
    color: white;
    transform: rotate(-8deg);
    transform-origin: 30% 45%;
}
#btn-1:hover{
    background-color: #abba01;
    transition: background-color 1ms;
}

/*--------------btn-2--------------*/
#btn-2{
    background-color: rgba(186, 43, 37, 0.72);
    top: 7.8rem;
    left: 15.8rem;
    font-size: .9rem;
    color: white;
    transform: rotate(-6deg);
    transform-origin: 30% 45%;
}

#btn-2:hover{
    background-color: #ba0500;
    transition: background-color 1ms;
}


/*--------------btn-3--------------*/
#btn-3{
    background-color: rgba(91, 22, 77, 0.72);
    top: 16.8rem;
    left: 21.8rem;
    font-size: .9rem;
    color: white;
    transform: rotate(-0deg);
    transform-origin: 30% 45%;
}

#btn-3:hover{
    background-color: #ba0500;
    transition: background-color 1ms;
}

/*--------------btn-4--------------*/
#btn-4{
    background-color: rgba(91, 22, 77, 0.72);
    top: 10.8rem;
    left: 31.8rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-4:hover{
    background-color: #ba5a08;
    transition: background-color 1ms;
}

/*--------------btn-5--------------*/
#btn-5{
    background-color: rgba(186, 12, 13, 0.72);
    top: 4.8rem;
    left: 45.2rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-5:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}

/*--------------btn-6--------------*/
#btn-6{
    background-color: rgba(186, 128, 11, 0.92);
    top: 10.9rem;
    left: 52.9rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-6:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}

/*--------------btn-7--------------*/
#btn-7{
    background-color: rgba(186, 71, 0, 0.62);
    top: 0.9rem;
    right: 3rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-7:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}


/*--------------btn-8--------------*/
#btn-8{
    background-color: rgba(90, 28, 37, 0.83);
    top: 16.9rem;
    right: 11rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-8:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}

/*--------------btn-9--------------*/
#btn-9{
    background-color: rgba(143, 75, 122, 0.83);
    top: 26rem;
    right: 7rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-9:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}


/*--------------btn-10--------------*/
#btn-10{
    background-color: rgba(103, 143, 16, 0.83);
    top: 38rem;
    right: 18rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-10:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}

/*--------------btn-11--------------*/
#btn-11{
    background-color: rgba(143, 26, 21, 0.83);
    top: 39rem;
    right: 41rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-11:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}


/*--------------btn-12--------------*/
#btn-12{
    background-color: rgba(129, 24, 19, 0.61);
    top: 34rem;
    left: 21rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-12:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}



/*--------------btn-13--------------*/
#btn-13{
    background-color: rgba(117, 3, 92, 0.67);
    top: 25rem;
    left: 9rem;
    font-size: 1rem;
    color: white;
    transform: rotate(0deg);
    transform-origin: 30% 45%;
}

#btn-13:hover{
    background-color: #ba0871;
    transition: background-color 1ms;
}







 /*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {


}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    #btn-1{
        background-color: rgba(186, 24, 117, 0.72);
        top: 4rem;
        left: 1.8rem;
        font-size: 1rem;
        color: white;
    }
    #btn-2{
        background-color: rgba(111, 55, 186, 0.72);
        top: 5.5rem;
        left: 7.5rem;
        font-size: .8rem;
        color: white;
    }



}

 /*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {

    #btn-1{
    background-color: rgba(186, 24, 117, 0.72);
    top: 4rem;
    left: 6rem;
    font-size: .6rem;
    color: white;
    }
    #btn-2{
        background-color: rgba(111, 55, 186, 0.72);
        font-size: .8rem;
        color: white;
        top: 4.8rem;
        left: 13rem;
    }

    #btn-3{
        background-color: rgba(186, 2, 0, 0.72);
        top: 11.8rem;
        left: 14.8rem;
        font-size: .8rem;
        color: white;

    }

    #btn-4{

        background-color: rgba(91, 22, 77, 0.72);
        top: 7.8rem;
        left: 22.8rem;
        font-size: .9rem;
        color: white;
    }
#btn-5{

    background-color: rgba(186, 0, 72, 0.72);
    top: 3.8rem;
    left: 31.6rem;
    font-size: .9rem;
    }
#btn-6{

        background-color: rgba(186, 65, 70, 0.92);
        top: 8.9rem;
        left: 38.9rem;
        font-size: .9rem;


    }
#btn-7{

        background-color: rgba(186, 0, 94, 0.52);
        top: 0.9rem;
        right: 2.9rem;
        font-size: .8rem;


    }
#btn-8{

        background-color: rgba(186, 0, 94, 0.52);
        top: 14.9rem;
        right: 10rem;
        font-size: .9rem;

    }

    #btn-9{
        background-color: rgba(143, 75, 122, 0.83);
        top: 21.5rem;
        right: 7rem;
        font-size: 1rem;
    }

    #btn-10 {
        background-color: rgba(103, 143, 16, 0.83);
        top: 28rem;
        right: 11rem;
        font-size: .9rem;
    }
    #btn-11 {
        background-color: rgba(143, 26, 21, 0.83);
        top: 30rem;
        right: 29rem;
        font-size: .9rem;
    }
    #btn-12 {
        background-color: rgba(143, 26, 21, 0.83);
        top: 24rem;
        left: 15rem;
        font-size: .9rem;
    }
#btn-13 {
        background-color: rgba(143, 26, 21, 0.83);
    top: 20rem;
    left: 6rem;
        font-size: .9rem;
    }



}
@media (min-width: 1000px) and (max-width: 1200px) {
    #btn-10 {
        background-color: rgb(143, 120, 104);
        top: 36rem;
        right: 18rem;
        font-size: .9rem;
    }
    #btn-10 {
        background-color: rgb(143, 120, 104);
        top: 30rem;
        right: 31rem;
        font-size: .9rem;
    }
 #btn-13 {
     background-color: rgba(143, 26, 21, 0.83);
        top: 21rem;
        right: 31rem;
        font-size: .9rem;
    }

}

 /*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1300px) {

    #btn-1 {
        background-color: rgba(150, 134, 186, 0.72);
        top: 4.2rem;
        left: 5rem;
        font-size: 0.8rem;
        color: white;

    }

    #btn-2 {
        background-color: rgba(186, 2, 0, 0.72);
        top: 4.8rem;
        left: 13.6rem;
        font-size: .8rem;
        color: white;

    }

    #btn-3 {
        background-color: rgba(186, 2, 0, 0.72);
        top: 13.5rem;
        left: 17.8rem;
        font-size: .8rem;

    }

    #btn-4 {

        background-color: rgba(91, 22, 77, 0.72);
        top: 9.8rem;
        left: 26.8rem;
        font-size: .9rem;

    }

    #btn-5 {

        background-color: rgba(186, 0, 72, 0.72);
        top: 4rem;
        left: 36.6rem;
        font-size: .9rem;

    }

    #btn-6 {

        background-color: rgba(186, 128, 11, 0.92);
        top: 10.9rem;
        left: 44.9rem;
        font-size: .9rem;
    }

    #btn-7 {
        background-color: rgba(186, 71, 0, 0.52);
        top: 0.9rem;
        right: 2.7rem;
        font-size: .8rem;
    }

    #btn-9 {
        background-color: rgb(143, 120, 104);
        top: 23.5rem;
        right: 7rem;
        font-size: .9rem;
    }

    #btn-10 {
        background-color: rgba(103, 143, 16, 0.83);
        top: 35rem;
        right: 18rem;
        font-size: .9rem;
    }
 #btn-11 {
     background-color: rgba(143, 26, 21, 0.83);
         top: 35rem;
         right: 36rem;
        font-size: .9rem;
    }
    #btn-12 {
     background-color: rgba(143, 26, 21, 0.83);
        top: 28rem;
        left: 17rem;
        font-size: .9rem;
    }
}

@media (min-width: 996px) and (max-width: 1110px) {
    #btn-10 {
        background-color: rgba(103, 143, 16, 0.83);
        top: 29rem;
        right: 14rem;
        font-size: .9rem;
    }
}

    /*Extra large devices (large desktops, 1200px and up)*/
    @media (min-width: 1200px) {

    }