/*GLOBAL FONT*/
body {
    font-family: 'Roboto Slab', sans-serif !important;
}

a,a:visited {color: #25231f;}


/* -------------
HEADER
---------------*/
#header {background: #fff url(wkk_header.jpg) no-repeat top center; height: 389px;}

.header-mask {
    height: 100%;
    background-image: url(pattern.png);
    background-repeat: repeat;
    background-position: right bottom;
}

/* -------------
TOP BAR
---------------*/
#top-bar {
    background: rgba(255,255,255,.9);
    color: #000;
    text-align: right;
}


@media (max-width: 768px) {
    .top-bar-left {text-align: left;}
    .top-bar-right {text-align: right;}
}

.social-icon {padding: 10px 10px;}    
#top-bar>.container {position: relative;}

.top-bar-container {padding: 7px 15px; font-size: 20px;}
@media (max-width: 768px) {
    .top-bar-container {font-size: 28px;}
}

.menu-mobile-button {background: none; border: 0;
}

.menu-mobile {
    width: 100%;
    height: 100%;
    min-height: 300px;
}
@media (max-width: 768px){
    .menu-mobile {background: #e84827; color: #fff; z-index: 999; width: 100%;}
    .menu-mobile a {color: #fff !important;}
}

.top-img-tekst {
    position: absolute;
    top: 30px;
    right: 15px;
    width: auto;
}

.top-text {position: relative;}

.top-img-tekst h2 {font-size: 30px; font-weight: 700;}
.top-img-tekst h3 {font-size: 24px; font-weight: 300;}

.top-img-tekst>.list-group {
    margin-bottom: 0px;
}

#text-top>.container {
    position: relative;
}
/* -------------
LOGO
---------------*/
.logo  {
    z-index: 999;
}
@media (max-width: 768px) {
    .logo  {
        position: relative;
    }
}
/* -------------
MENU TOP
---------------*/
#menu-top {
    background: #ececec;
    color: #000;
}
.menu-container {text-align: right;}

.menu-container .nav>li>a {
    font-weight: 400;
    font-size: 16px;
    color: #000;
}
.menu-container .nav>li>a:hover {
    background: none;
    color: #d53a1b;
    transition: 0.3s;
}
li.hidden-menu {display: none;}

@media (min-width: 768px) {
    .navbar-nav {
        margin: 0;
    }
}

/* -------------
TOP IMG
---------------*/
#top-img {
    background: #fefefe url(header-bg.jpg) repeat-x bottom center;
}
#top-img>.container {position: relative;}

#top-img {overflow: hidden}

.top-img-tekst {
    padding: 30px;
    background: rgba(0,0,0,.55);
    color: #fff;   
    font-size: 36px;
}
@media (max-width: 768px) {
    .top-img-tekst {
        font-size: 16px;
        padding: 5px !important;
    }
    .top-img-tekst {
        position: absolute;
        bottom: 0px;
        left: 150px;
        width: 80%;
    }
}


.top-img-tekst>.list-group box {margin-bottom: 0;}

.top-img-img img {max-width: 100%; height: auto;}


/* -------------
LEFT
---------------*/
.left-banner img {max-width: 100%}


/* -------------
PRACA BOXY
---------------*/
.praca-img {height: 300px; background: #fff url(praca-banner.jpg) no-repeat bottom left;}

.box-praca {height: 300px; background: rgba(211,57,26,.9); color: #fff; font-size: 14px;}

.box-praca ul>li {padding: 5px 0 5px 5px; list-style-type: none;}

.box-praca ul {padding-left: 10px; margin: 20px 0;}

.box-praca ul>li:before {font-family: 'FontAwesome'; content: "\f0da"; padding-right: 10px;}


/* -------------
SALE BOXY
---------------*/
.sale-img {height: 300px; background: #fff url(sale-banner.jpg) no-repeat bottom left;}

.sale-img-mini {height: auto; background: #e84827; color: #fff; border-radius: 3px; padding: 15px}

.box-sale {height: 300px; background: rgba(0,0,0,.8); color: #fff; font-size: 14px; padding: 15px;}
@media (max-width: 768px) {
    .box-sale {height: auto !important; background: #eee; color: #000; border-radius: 3px; padding: 15px}
}

.box-sale ul>li {padding: 5px 0 5px 5px; list-style-type: none;}

.box-sale ul {padding-left: 10px; margin: 20px 0;}

.box-sale ul>li:before {font-family: 'FontAwesome'; content: "\f0da"; padding-right: 10px;}

.sale-cena {position: absolute; bottom: 15px; right: 30px;}

.price {
    font-size: 60px;
    color: #fff;
    font-weight: 100;
    line-height: 30px;
    text-shadow: 2px 2px 2px #000;
}
.price-text {
    font-size: 18px;
    font-weight: 100;
    text-shadow: 2px 2px 2px #000;
}


/* -------------
WYDARZENIA
---------------*/
.wydarzenia {}
.wydarzenia-kalendarz h2 {background: #efefef; color: #000; border-bottom: 0px !important;} 
h2.title {margin: 0 0 20px 0 !important; background: none; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important;}

/* -------------
AKTUALNOŚCI
---------------*/
.wydarzenia-kalendarz {border: 4px dashed #efefef; float: left; margin: 15px 0;}

h2.title {border-bottom: 0;}

.event-dateinfo {
    display: table-cell;
    line-height: 25px;
}
.boxevent {
    border-color: #ea4f2f;
}
.boxevent {
    text-align: center;
    width: 72px;
    border-radius: 5px;
    border: 3px solid #ea4f2f;
    position: relative;
    padding: 15px 0 5px 0;
    color: #4A4A4A;
}
.boxevent:before, .dt-event .boxevent:after {
    background-color: #ea4f2f;
}

.boxevent:before {
    position: absolute;
    content: '';
    width: 4px;
    height: 14px;
    top: -8px;
    left: 15px;
    display: block;
    background-color: #ea4f2f;
    border-radius: 4px;
}
.event-date {
    font-size: 32px;
    font-weight: 600;
    display: block;
    color: #4A4A4A;
}
.event-month {
    font-size: 13px;
}
.boxevent:before, .dt-event .boxevent:after {
    background-color: #ea4f2f;
}
.boxevent:after {
    position: absolute;
    content: '';
    width: 4px;
    height: 14px;
    top: -8px;
    right: 15px;
    display: block;
    background-color: #ea4f2f;
    border-radius: 4px;
}

a.event-title {font-weight: 500; font-size: 14px;}

.mod_wydarzenia>.col-xs-12 {margin-bottom: 15px;}



/* -------------
OFERTA BOXY
---------------*/

#oferta-boxy {
    font-size: 13px;
    font-weight: 400;
    padding-bottom: 50px;
}
#oferta-boxy h2 {font-size: 20px; font-weight: 400; padding: 10px; border-bottom: 1px solid #ea4f2f; margin: 20px 0;}
#oferta-boxy h3 {font-size: 36px; font-weight: 100;}

#oferta-boxy img {width: 100%; height: auto;}

#oferta-boxy p:nth-child() {
    position: relative;
}

.box-oferta ul>li {padding: 5px 0 5px 5px; list-style-type: none;}
.box-oferta ul>li:before {font-family: 'FontAwesome'; content: "\f0da"; padding-right: 10px;}

.lewa-dol .opis-oferta {position: absolute; bottom: 15px; left: 35px}
.lewa-gora .opis-oferta {position: absolute; top: 15px; left: 35px}
.prawa-dol .opis-oferta {position: absolute; bottom: 10px; right: 35px}
.prawa-gora .opis-oferta {position: absolute; top: 10px; right: 35px}

.bialy .opis-oferta {color: #fff; text-shadow: 0px 0px 20px #000}
.braz .opis-oferta {color: #242424; text-shadow: 0px 0px 10px #fff}

h2.oferta-marki {font-size: 28px !important; padding: 20px 0 40px 0}




.box-oferta:hover img {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity: 0.7;
}
.oferta-img {
    overflow: hidden;     
    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}



/*-------------
NEWSLETTER
--------------*/
#newsletter-img {
    background: #fefefe url(newsletter-bg.jpg) repeat-x bottom center; padding: 50px 0;
}


/*-------------
NEWSLETTER BUTTON
--------------*/
.btn-wkk {
    color: #4A4A4A;
    background-color: #FED026;
    border-color: #FED026;
    padding: 6px 25px;
    border-radius: 3px;
}
.btn-wkk:hover {
    background-color: #F0C00C;
    border-color: #F0C00C;
}

.wkk-form {
    height: 37px;
    border: none;
    border-radius: 4px;
    vertical-align: middle;
    padding: 6px 9px;
    width: 100%;
}

/* -------------
SVG
---------------*/
.svg-text {font-family: 'Pt Sans'; font-size: 10px; font-weight: 300; text-transform: uppercase; padding: 10px 0; text-align: center; }


/* -------------
LEFT
---------------*/

#dv-left .nav>li.active>a:hover, #dv-left .nav>li.active>a {
    text-decoration: none;
    color: #fff;
    padding: 12px 10px 10px 10px;
    display: block;
    border-bottom: 1px dotted #bdbdbd;
    color: #fff;
    background: #25231f;
}


.owl-item {text-align: center;}

/* -------------
MAPA
---------------*/

#mapa {
    background: #000;
}

/* -------------
STOPKA
---------------*/

#footer {
    background: #000;;
    color: #efefef;
    padding: 15px 0;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 400;
}

.footer-padding {padding-top: 30px;}

.stopka-logo img {max-width: 100%}
.footer-padding {padding-top: 40px;}


@media (min-width: 768px){
    #top-bar .navbar-nav>li>a {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        padding-left: 25px;
        padding-right: 25px;
        border-left: 1px solid #ddd;
        border-right: 1px solid #bbb;
    }
    #top-bar .navbar-nav>li:first-child>a{
        border-left: 0;
        border-left: 1px solid #bbb;
        padding-left: 0px;
    }
    #top-bar .navbar-nav>li>a:last-child{
        border-left: 1px solid #bbb;
        border-left: 0;
    }
}

.navbar {min-height: 10px; margin: 0;}