/*------------------------------------------
  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;
    }
    a.logo, a.logo img {
        height: 72px;
        width: 250px;
        max-width: initial;
        margin: 0 auto;
        display: block;
    }
    nav {
        display: block;
        float: none;
        margin: 20px auto 0;
    }
    nav ul {
        position: relative;
        top: 0;
    }
    .promotion {
        padding: 40px 0 50px;
    }
    .main {
        overflow: hidden;
        min-height: 776px;
    }
    .casino-characters {
        
    }
    .joaca-acum {
        margin-bottom: 50px;
    }
    .steps {
        margin: 0 auto;
    }
}

@media all and (max-width: 767px) {
    .casino-characters {
        left: -50px;
    }
    .casino-characters img {
        max-width: 150%;
    }
    
}
@media all and (max-width: 480px) {
    .main {
        min-height: 600px;
    }
    .steps {
        margin: -116px auto 0;
        padding: 120px 20px 20px;
    }
    .blue-line {
        top: 48px;
    }
}

@media all and (max-width: 400px) {
    .options {
        margin: -50px 0 0;
    }
    .casino-characters {
        bottom: 10px;
    }
    .joaca-acum {
        position: absolute; 
    }
    .steps {
        margin: -20px auto 0;
    }
    .blue-line {
        top: 40px;
    }
}

@media all and (max-width: 360px) {
    .blue-line {
        top: 33px;
    }
}

@media all and (max-width: 320px) {
    .main {
        padding-top: 0px;
        min-height: 400px;
        z-index: 1;
        overflow: hidden;
    }
    .promotion {
        margin: 0 auto;
        padding: 20px 0;
    }
    
    .steps-outro span {
        line-height: 1.2;
        font-size: 50px;
    }
    .blue-line {
        top: 29px;
    }
    
}