@media only screen and (min-width: 980px) {
    .col {
        position: relative;
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
        float: left;
    }
    .slot-cntainer {
        width: 66.66667%;
    }
    .large-12 {
        width: 100%;
    }
    .large-10 {
        width: 80%;
    }
    .large-8 {
        width: 66.66667%;
    }
    .large-push-1 {
        position: relative;
        left: 12%;
        right: auto;
    }
    .large-push-2 {
        position: relative;
        left: 16.66667%;
        right: auto;
    }
    
}

@media (max-width: 740px) {
    .slot-machine {
        padding: 5px 5px 0px 5px;
    }
   
}

@media (min-width: 740px) {
    .slot-container {
        width: 95%;
    }
    .slot {
        width: 20%;
    }
    .slot1 {
        left: calc((100% / 5) * (1 - 1));
    }
    .slot2 {
        left: calc((100% / 5) * (2 - 1));
    }
    .slot3 {
        left: calc((100% / 5) * (3 - 1));
    }
    .slot4 {
        left: calc((100% / 5) * (4 - 1));
    }
    .slot5 {
        display: block;
    }
    .slot5 {
        left: calc((100% / 5) * (5 - 1));
    }
}

@media (max-width: 660px) {
     .modal-content img{
        display: none;
    }
    .formControl{
        width: 100%;
    }
    .offer{
        width: 100%;
    }
    #btnArea{
        margin-left: 2%;
            margin-right: 2%;
    }
    .modal{
      padding: 15px 9px 15px 9px;
    }
    
    .footer img{
        width:100%;
        height: auto;
    }
    .spinLogo{
        display: none;
    }
    #spin-btn{
        width: 90%;
    }
    .slot-container {
        width: 100%;
    }
    .logo {
        padding: 0px 0 20px 0;
        margin:auto;
    }
    .top {
        margin-top: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .slot-machine {
        width: 100%;
        background: none;
    }
    .slot-wrap {
        width: 98%;
    }
    .slot {
        width: 25%;
    }
    .slot1 {
        left: calc((100% / 4) * (1 - 1));
    }
    .slot2 {
        left: calc((100% / 4) * (2 - 1));
    }
    .slot3 {
        left: calc((100% / 4) * (3 - 1));
    }
    .slot4 {
        left: calc((100% / 4) * (4 - 1));
    }
    .slot5 {
        left: calc((100% / 4) * (5 - 1));
    }
    #congratulations img {
        width: 100%;
        margin-top: 20px;
    }
    .mainOffer {
        padding-top: 0px;
    }
    @keyframes pulse {
        0%,
        100% {
            -webkit-transform: scale(0.8);
        }
        50% {
            -webkit-transform: scale(1);
        }
    }
}

@media (max-width: 500px) {
    input {
        width: 100%;
    }
    button {
        width: 100%;
    }
    .slot {
        width: 33%;
    }
    .slot1 {}
    .slot2 {
        left: 33%
    }
    .slot3 {
        left: 67%;
    }
    .slot4 {
        left: 0;
        background-image: none;
    }
    .slot5 {
        background-image: none;
    }
}