/* reset */
header, section, footer, aside, nav, main, article, figure {display: block;}
pre {font-size: 18px;}

/* pseudo atrybuty */
.oh {overflow: hidden;}

/* struktura */
html {height: 100%;}

body {margin: 0; padding:  0; height: 100%; color: #fff; font-size: 1.0em; background: #42413b url(images/body_bg.png) fixed repeat-x; font-family: Raleway, sans-serif; font-weight: 500;}

#holder {margin: 0 auto;	max-width: 1200px; box-shadow: 0 0 12px #000; }

#top {position: fixed; width: 100%; min-height: 200px; top: 0; left: 0; padding: 0; z-index: 10;}
#content {z-index: 4; background: #363530;}

#header {max-width: 1200px; margin: 0 auto; overflow: hidden; background: #21211e url(images/body_bg.png) 0 0 repeat-x; box-shadow: 0 0 12px #000;}

nav {width: 100%; background: #ffe500;}
nav ul {max-width: 1200px; margin: 0 auto; list-style-type: none; padding: 5px 0; }
nav ul li {display: inline; padding: 0 0 0 20px;}
nav ul li a {color: #000; text-decoration: none;}
nav ul li a:hover {border-bottom: solid 1px #000;}
nav ul li span {color: #000; font-weight: 400;}

#extraMenu {margin: 0 auto; list-style-type: none; padding: 5px 0; text-align: right; }
#extraMenu li {display: inline; padding: 0 20px 0 0;}
#extraMenu li a {color: #ffe500; text-decoration: none;}
#extraMenu li a:hover {border-bottom: solid 1px #000;}
#extraMenu li span {color: #000; font-weight: 400;}

.article {overflow: hidden; text-shadow: 0 2px 6px #000; }

.article h1 {font-weight: 500; font-size: 1.6em; padding: 20px 0 10px 0; margin: 0; color: #ffe500;}
.article h2 {font-weight: 400; font-size: 1.1em; padding: 15px 0 0 0; margin: 0;}
.article h3 {font-weight: 500; font-style: italic; font-size: 0.8em;  padding: 0; margin: 0;}
.article ul {margin: 0 0 10px 0;}
.article li {margin: 0;}
.article table {color: #fff; font-size: 0.8em; text-shadow: none; border-collapse: separate; border-spacing: 2px; width: 100%;}
.article table td {background: #40a637; padding: 4px 8px;}

.foto {width: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
.oferta {background: url(images/beskid-taxi-zywiec_oferta-bg.jpg) 50% 20% no-repeat; background-size: cover;}
.cennik {background: url(images/beskid-taxi-zywiec_cennik-bg.jpg) 50% 50% no-repeat; background-size: cover;}
.dojazd {color: #000; text-shadow: none; padding: 5px 10px; background: #ffe500; font-weight: 500; margin: 10px 2px;}
#extras {display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between;}
.obszar li {font-size: 0.85em;}

.cennik .elast {background: url(images/beskid-taxi-zywiec_elast.jpg) 75% 0 no-repeat; background-size: cover;}
.cennik .rabaty {background: url(images/beskid-taxi-zywiec_rabaty.jpg) 100% 20% no-repeat; background-size: cover;}
.cennik .cards {background: url(images/beskid-taxi-zywiec_cards.jpg) 30% 80% no-repeat; background-size: cover;}
.cennik .faktury {background: url(images/beskid-taxi-zywiec_faktury.jpg) 50% 50% no-repeat; background-size: cover;}

@media (min-width: 980px) {
nav ul {text-align: left; font-size: 1.6em;}
#logo {min-width: 500px; padding: 20px 0 0 0; text-align: center; float: left;}
#telephone {min-width: 460px; padding: 26px 0 0 0; float: right; text-align: center;}
.article {font-size: 1.6em;}
.oferta, .obszar {padding: 20px 0 60px 40px;}
.cennik, .kontakt {padding: 20px 40px 60px 40px;}
.article ul {float: left;}
.obszar li {float: left; width: 33%;}
.oferta li {float: left; width: 47%; padding: 0 25px 0 0;}
.extra {padding: 0 4px; margin: 10px 5px 0 5px; flex: 1 1 15%; min-height: 250px; }
.extra h2 {color: #fff; padding: 5px 0 0 0;}
.extra h3 {color: #fff;}
.foto {height: 380px;}
#mapa {padding: 20px 40px 0 0;}
}

@media (max-width: 979px) and (min-width: 540px)  {
nav ul {text-align: center; font-size: 1.2em;}
#logo {width: 50%; float: left; padding: 10px 0 0 0; text-align: center;}
#logo img {width: 90%; max-width: 451px;}
#telephone {width: 50%; float: right; padding: 10px 0 0 0; text-align: center;}
#telephone img {width: 90%; max-width: 446px;}
.article {font-size: 1.5em;}
.oferta, .obszar {padding: 10px 10px 40px 20px;}
.cennik, .kontakt {padding: 10px 20px 40px 20px;}
.article ul {margin: 0;}
.obszar li {float: left; width: 45%; padding: 0 15px 0 0;}
.extra {padding: 0 4px; margin: 10px 20px 30px 20px; flex: 1 1 30%; min-height: 250px;} 
.extra h2 {color: #fff; padding: 5px 0 0 0; font-size: 1.6em}
.extra h3 {color: #fff; font-size: 1.2em}
.foto {height: 300px;}
#mapa {padding: 40px 10px 0 0;}
	
}


@media (max-width: 539px) {
nav ul {text-align: center; font-size: 1.2em;}
#logo {width: 100%; padding: 15px 0 0 0; text-align: center;}
#logo img {width: 75%; max-width: 451px;}
#telephone {width: 100%; padding: 0 0 10px 0; text-align: center;}
#telephone img {width: 85%; max-width: 446px;}
.article {font-size: 1.0em;}
.oferta, .obszar {padding: 10px 10px 40px 20px;}
.cennik, .kontakt {padding: 10px 20px 40px 20px;}
.article ul {margin: 0; padding: 0 0 0 20px;}
.obszar li {float: left; width: 45%; padding: 0 10px 0 0;}
.foto {height: 200px;}
.extra {padding: 0 4px; margin: 10px 5px 0 5px; flex: 1 1 90%; min-height: 150px;} 
.extra h2 {color: #fff; padding: 5px 0 0 0; font-size: 2.0em}
.extra h3 {color: #fff; font-size: 1.6em}
#mapa {padding: 20px 10px 0 0;}
}