/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet 
   480-less    - phone landscape & smaller
--------------------------------------------*/
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

@media all and (max-width: 1280px) {
    .pariuri a img {
            max-width: 422px;
            height: auto;
            width: 100%;
        }
        .cazinou a img {
            max-width: 440px;
            height: auto;
            width: 100%;
        }
        .ruleta-bj a img {
            max-width: 450px;
            height: auto;
            width: 100%;
        }
    
}

@media all and (max-width: 1023px) {
    .step-one, .step-two, .step-three {
        max-width: 100%;
        margin: 20px 0;
        width: 100%;
    }
    .step-two {
        margin: 20px 0;
    }
    .pariuri, .cazinou, .ruleta-bj {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .cazinou, .ruleta-bj {
        margin: -70px 0 0;
    }
    
    .promotion {
        padding: 120px 0 200px;
    }

}

@media all and (max-width: 900px) {
    header {
        padding: 20px 10px;
    }
    nav {
        display: block;
        float: none;
        margin: 20px auto 0;
    }
    nav ul {
        position: relative;
        top: 0;
    }
    .promotion {
        padding: 120px 0 50px;
    }
    .main {
        overflow: hidden;
        min-height: auto;
    }
    .joaca-acum {
        margin-bottom: 50px;
    }
    .steps {
        margin: 0 auto;
    }
}

@media all and (max-width: 400px) {
    .options {
        margin: -50px 0 0;
    }
    
}

@media all and (max-width: 320px) {
    .main {
        padding-top: 0px;
        min-height: auto;
        z-index: 1;
        overflow: hidden;
    }
    .messi {
        top: 20px;
        opacity: 0.3;
    }
    .harry-kane {
        right: -100px;
        opacity: 0.3;
            top: 20px;
    }
    .promotion {
        margin: 0 auto;
        padding: 20px 0;
    }
    
    .steps-outro span {
        line-height: 1.2;
        font-size: 50px;
    }
    .steps {
        
        padding: 30px 20px 0;
    }
    
}