/*
    =========
    WYJŚCIOWE
    =========
*/

#oferta-menu {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    background-image:url(../images/bg-main-400.jpg);
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-attachment:scroll;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    float:left;
    position:relative;
    z-index:2;
}

#oferta-menu li {
    width:100%;
    float:left;
    height:50px;
    line-height:50px;
    border-bottom:1px solid rgba(255,255,255,0.3);
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    position:relative;
}

#oferta-menu li div.bg {
    display:none;
}

#oferta-menu li a {
    color:#000;
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
    display:inline-block;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    opacity:0.9;
    position:relative;
    transition:opacity 0.4s linear 0s;
    -moz-transition:opacity 0.4s linear 0s;
    -webkit-transition:opacity 0.4s linear 0s;
    -o-transition:opacity 0.4s linear 0s;
    -ms-transition:opacity 0.4s linear 0s;
}

#oferta-menu li a:hover {
    opacity:1;
    background-color:rgba(0,0,0,0.1);
}

#oferta-menu li a span:nth-child(2) {
    display:none;
}

#oferta-menu li a table {
    border:0;
    margin:0;
    padding:0;
    border-spacing:0;
    border-collapse:collapse;
    width:100%;
    height:100%;
}

#oferta-menu li a table {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
}










/*
    ================================
    LANDSPACE I PORTRAIT / MIN 768px
    ================================
*/

@media all and (min-width:768px)
{
    #sub-page h1 {
        display:none;
    }

    #sub-page .text {
        display:none;
    }

    #oferta-menu {
        height:100%;
        width:100%;
        background-image:url(../../../images/big-foto-oferta-portrait.jpg);
    }

    #oferta-menu li {
        width:50%;
        height:33%;
        border-bottom:1px solid rgba(255,255,255,0.8);
        border-right:1px solid rgba(255,255,255,0.8);
        background-color:rgba(255,255,255,0.5);
    }

    #oferta-menu li:nth-child(3) {
        height:34%;
    }

    #oferta-menu li:nth-child(4) {
        height:34%;
    }

    #oferta-menu li:nth-child(2n+2) {
        border-right:0;
    }

    #oferta-menu li:nth-child(5) {
        border-bottom:0;
    }

    #oferta-menu li:nth-child(6) {
        border-bottom:0;
    }

    #oferta-menu li a {
        color:rgba(0,0,0,0.8);
        font-size:15pt;
        float:left;
        height:100%;
        /*padding:0 0 0 20px;*/
    }

    #oferta-menu li a:hover {
        background:none;
    }

    #oferta-menu li a span {
        position:relative;
        display:inline-block;
        height:50px;
        line-height:50px;
        padding:0 15px;
        transition:background-color 0.2s linear 0s;
        -moz-transition:background-color 0.2s linear 0s;
        -webkit-transition:background-color 0.2s linear 0s;
        -o-transition:background-color 0.2s linear 0s;
        -ms-transition:background-color 0.2s linear 0s;
        background-color:#fff;
    }

    #oferta-menu li a span:first-letter {

    }

    #oferta-menu li a span:nth-child(1) {

    }

    #oferta-menu li a span:nth-child(2) {
        float:left;
        clear:left;
        font-size:12pt;
        font-family:open_sanscondensed_light;
        line-height:130%;
        color:rgba(0,0,0,1);
        display:block;
    }





    #oferta-menu li div.bg {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        overflow:hidden;
        display:block;
    }

    #oferta-menu li div.bg div {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-position:50% 50%;
        background-repeat:no-repeat;
        background-attachment:scroll;
        -moz-background-size:cover;
        -webkit-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
        opacity:0.1;
        filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        filter:gray;
        -webkit-filter:grayscale(100%);
        transition:all 0.2s linear 0s;
        -moz-transition:all 0.2s linear 0s;
        -webkit-transition:all 0.2s linear 0s;
        -o-transition:all 0.2s linear 0s;
        -ms-transition:all 0.2s linear 0s;
    }

    #oferta-menu li:hover span {
        background-color:#fff;
    }

    #oferta-menu li:hover div.bg div {
        opacity:1;
        filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter:grayscale(0%);
        width:110%;
        height:110%;
        left:-5%;
        top:-5%;
    }

}










/*
    =================================
    LANDSPACE I PORTRAIT / MIN 1024px
    =================================
*/

@media all and (min-width:1024px)
{
    #oferta-menu {
        background-image:url(../../../images/big-foto-oferta.jpg);
    }

    #oferta-menu li {
        width:33%;
        height:50%;
    }

    #oferta-menu li:nth-child(3) {
        height:50%;
        width:33%;
    }

    #oferta-menu li:nth-child(4) {
        border-bottom:0;
        height:50%;
    }

    #oferta-menu li:nth-child(2n+2) {
        border-right:1px solid rgba(255,255,255,0.8);
    }

    #oferta-menu li:nth-child(5) {
        border-bottom:0;
    }

    #oferta-menu li:nth-child(6) {
        border-bottom:0;
    }

    #oferta-menu li:nth-child(3n+2) {
        width:34%;
    }

    #oferta-menu li:nth-child(3n+3) {
        border-right:0;
    }
}