html * {border: 0; color: #666666; font-family: Arial; font-size: 12px; margin: 0; padding: 0; line-height: 18px;}
body {background: #f0efeb;}

.mobileOnly {display: none;}
.desktopOnly {display: block;}

div.container {width: 940px; margin: 0 auto;}
.bottomLine {background: url(../images/lineHorizontal.png) repeat-x bottom;}
.fw {overflow: hidden;}
.button {display: block; height: 40px;}
.button.learnMore {width: 217px; background: url(../images/buttonLearnMore.png) no-repeat;}
.button.seeOnMap {width: 180px; background: url(../images/buttonSeeOnMap.png) no-repeat;}
.button.sendMessage {width: 190px; background: url(../images/buttonSendMessage.png) no-repeat;}
.blue, .blue * {color: #00b3df !important;}
.lastInRow {margin: 0 !important;}
h1, h2 {font-family: 'Open Sans'; font-weight: 400; text-transform: uppercase;}
div#content h1 {height: 41px; margin: 32px 0 26px 0; color: #00b2df; font-size: 36px;}
div#content h1 span {color: #00b1df; font-family: 'Open Sans'; font-size: 38px;  line-height: 41px;}
h2 {height: 17px; margin-bottom: 18px;}
h2 span {color: #795e3d; font-size: 19px; line-height: 17px;}
a {text-decoration: none;}
a:HOVER {text-decoration: underline;}
a img {vertical-align: middle;}

div#top {margin-bottom: 18px;}
div#top.index {margin-bottom: 6px;}
a#logo {width: 154px; height: 91px; display: block; background: url(../images/logo.png) no-repeat; float: left; margin: 23px 0 0 1px;}

ul#menu {list-style-type: none; width: 737px; height: 39px; float: right; margin-top: 34px; background: url(../images/menuBg.png) no-repeat; text-align: center; }
ul#menu li {display: inline-block; height: 39px; line-height: 39px;}
ul#menu li a {display: block; height: 39px; background: url(../images/menu.png) no-repeat; background: none; text-transform: uppercase; font-weight: 600; text-decoration: none;}
ul#menu li a span {display: none; display: block; color: #00b2df; font-family: 'Open Sans'; height: 25px; line-height: 25px; font-size: 14px; letter-spacing: -0.02em; margin-top: 7px; padding: 0 6px;}
ul#menu li a:hover span, ul#menu li a.active span {color: #ffffff; background: #7a5f3e;}
/**
ul#menu li.company a {width: 83px; background-position: 0 0;}
ul#menu li.company a:HOVER, ul#menu li.company a.active {background-position: 0 -39px;}
ul#menu li.pomps a {width: 81px; background-position: -83px 0;}
ul#menu li.pomps a:HOVER, ul#menu li.pomps a.active {background-position: -83px -39px;}
ul#menu li.parts a {width: 145px; background-position: -164px 0;}
ul#menu li.parts a:HOVER, ul#menu li.parts a.active {background-position: -164px -39px;}
ul#menu li.sinks a {width: 93px; background-position: -309px 0;}
ul#menu li.sinks a:HOVER, ul#menu li.sinks a.active {background-position: -309px -39px;}
ul#menu li.well a {width: 164px; background-position: -403px 0;}
ul#menu li.well a:HOVER, ul#menu li.well a.active {background-position: -403px -39px;}
ul#menu li.gallery a {width: 81px; background-position: -567px 0;}
ul#menu li.gallery a:HOVER, ul#menu li.gallery a.active {background-position: -567px -39px;}
ul#menu li.contact a {width: 89px; background-position: -648px 0;}
ul#menu li.contact a:HOVER, ul#menu li.contact a.active {background-position: -648px -39px;}
*/
div#content {background: url(../images/lineHorizontal.png) repeat-x top left;}
div#columnLeft {float: left; width: 217px;}
div#columnLeft.news p,
div#columnLeft.contact p {width: 180px;}
div#columnLeft.contact p a {padding-right: 18px; background: url(../images/arrowRight.png) no-repeat right center;}
div#columnMain {float: left; width: 723px; margin-bottom: 80px; background: url(../images/lineVertical.png) repeat-y top left;}
div#breadcrumbs {height: 38px;  padding-left: 23px; background: url(../images/lineHorizontal.png) repeat-x bottom left;}
div#breadcrumbs a,
    div#breadcrumbs span {float: left; line-height: 38px; color: #7a5f3e;}
div#breadcrumbs span {font-weight: bold; margin-right: 5px;}
div#breadcrumbs a {padding-right: 10px; background: url(../images/arrowSmallBrown.png) no-repeat right 17px; margin-right: 8px;}
div#breadcrumbs a.blue {background: url(../images/arrowSmallBlue.png) no-repeat right 17px;}

div#columnLeft h2 {margin: 37px 0 24px 1px;}
div#columnLeft div#pompSelector {width: 180px; height: 202px; background: url(../images/lampSelectorMedium.png) no-repeat;}

div#columnLeft div#pompSelector {width: 180px; height: 202px; background: url(../images/lampSelectorMedium.png) no-repeat; position: relative}
div#columnLeft div#pompSelectorNavigation {position: absolute; width: 180px; height: 115px; top: 45px;}
div#columnLeft div#pompSelectorNavigation a {display: block; width: 16px; height: 115px;}
div#columnLeft div#pompSelectorNavigation a#prev {float: left;}
div#columnLeft div#pompSelectorNavigation a#next {float: right;}
div#columnLeft div#pompsWrapper {width: 144px; height: 186px; overflow: hidden; position: absolute; top: 8px; left: 18px;}
div#columnLeft div#pomps {position: relative; }
div#columnLeft div#pomps a {display: block; width: 100%; text-align: center; margin-top: 10px; font-size: 14px;}
div#columnLeft div#pomps a img {margin-bottom: 5px;}

div#visual {margin-bottom: 23px;}
div#visual img#circle {float: left;}
div#visual div#center {float: left; margin-left: 33px;}
div#visual img#indexLead {margin-top: 34px;}
div#visual .learnMore {margin-top: 12px;}

div#visual div#pompSelector {float: right; width: 249px; height: 287px; background: url(../images/lampSelectorLarge.png) no-repeat; position: relative}
div#visual div#pompSelectorNavigation {position: absolute; width: 249px; height: 115px; top: 86px;}
div#visual div#pompSelectorNavigation a {display: block; width: 16px; height: 115px;}
div#visual div#pompSelectorNavigation a#prev {float: left;}
div#visual div#pompSelectorNavigation a#next {float: right;}
div#visual div#pompsWrapper {width: 210px; height: 271px; overflow: hidden; position: absolute; top: 8px; left: 19px;}
div#visual div#pomps {position: relative; }
div#visual div#pomps a {display: block; width: 100%; text-align: center; margin-top: 20px; font-size: 14px;}

div#indexBoxes {height: 210px;}
div#indexBoxes .col {float: left; width: 239px;}
div#indexBoxes p {width: 200px; line-height: 16px;}

div.lampsBanner {background: url(../images/lineHorizontal.png) repeat-x top left; margin-top: 32px; position: relative; width: 217px; height: 215px;}
div.lampsBanner a {display: block; width: 186px; height: 135px; background: url(../images/lampyMedium.png) no-repeat; position: absolute; z-index: 100; top: 30px;}

div#text {margin-left: 21px;}
div#text p,
div#text p * {color: #333333; text-align: justify; margin-bottom: 20px; }
div#text a {text-decoration: underline;}
div#text h3 { font-size: 1.5em; margin-bottom: 5px; color: #00B1DF; }
div#text.company div.img,
div#text.company div.col1,
div#text.company div.col2 {float: left;}
div#text.company div.img {margin-right: 19px;}
div#text.company div.col1, 
div#text.company div.col2 {width: 240px;}
div#text.company div.col1 {margin-right: 40px}

div#pompsList img,
div#pompsList a {float: left; margin: 0 20px 20px 0;}
div#pompsList img.header {width: 160px;}
div#pompsList a {display: block; width: 160px; height: 202px; background: url(../images/pompsListBg.png) no-repeat; text-align: center; text-decoration: none; font-size: 14px;}
div#pompsList a:HOVER {text-decoration: underline; background: url(../images/pompsListBg.png) no-repeat -160px 0;}
div#pompsList a img {float: none; margin: 18px auto 0 auto;}

div#pompView div.imgWrapper {width: 342px; float: left; height: 505px; margin-right: 19px;}
div#pompThumbs {clear: left; padding-top: 8px;}
div#pompThumbs a {display: block; float: left; width: 55px; height: 55px; background: #ffffff; text-align: center; padding: 8px; margin-right: 8px; border: 1px solid #e2e0dd;}
div#pompView div.img {width: 342px; height: 422px; background: url(../images/pompViewBg.png) no-repeat; text-align: center; float: left;}
div#pompView div.img img {margin-top: 43px;}
div#pompView div#pompDescription {float: left; width: 341px;}
div#pompView div#pompDescription * {color: #333333;}
div#pompView div#pompDescription div.h1 {border-bottom: 1px dotted #aaa9a7; width: 100%; height: 24px; margin-bottom: 25px;}
div#pompView div#pompDescription h1 {margin: 0; font-size: 18px; font-weight: bold;}
div#pompView div#pompDescription p,
div#pompView div#pompDescription li {height: 24px;}
div#pompView div#pompDescription ul {list-style-type: none; margin-left: 8px;}
div#pompView div#pompDescription ul li {background: url(../images/arrowSmallBlack.png) no-repeat 0 6px; padding-left: 7px}
div#pompView div#pompDescription div#questions {height: 53px; padding-top: 9px; margin-top: 20px; border-top: 1px dotted #a8a8a5; border-bottom: 1px dotted #a8a8a5;}
div#pompView div#pompDescription div#questions a {background: url(../images/arrowRight.png) no-repeat right; padding-right: 20px;}
div#pompView a.back {display: block; margin-top: 15px; background: url(../images/arrowSmallBlue.png) no-repeat right 7px; text-decoration: none; width: 135px;}
div#pompView a.back:HOVER {text-decoration: underline;}

div.tableRight,
div.tableLeft {width: 341px;}
div.tableLeft {float: left;}
div.tableRight {float: right;}
div.table p.title {height: 38px; line-height: 30px; text-indent: 14px; background: url(../images/tableTitle.png) no-repeat; color: #ffffff !important; text-transform: uppercase; font-weight: bold; border-bottom: 0;}
div.table p.space {height: 18px; border: 0;}
div.table p {height: 30px; line-height: 30px; border-bottom: 1px dotted #aaaaa8;}
div.table p.noBorder {border: 0; height: auto;}
div.table p.noBorder a {display: inline; background: none;}
div.table p a {height: 30px; line-height: 30px; display: block; text-decoration: none !important; background: url(../images/sheet.png) no-repeat 301px 3px;}
div.table p a:HOVER {text-decoration: underline !important;}

div#flash {float: left; width: 342px; height: 502px; background: url(../images/wellBg.png) no-repeat; margin-right: 19px;}
div#wellSwf {width: 325px; height: 486px; margin: 8px 0 0 8px;}
div#wellDescription {float: left; width: 341px;}

div#gallery img,
div#gallery a {float: left; margin: 0 20px 20px 0;}
div#gallery img.header {width: 160px; float: left;}
div#gallery a {display: block; width: 160px; height: 160px; background: url(../images/galleryImgBg.png) no-repeat; text-align: center;}
div#gallery a:HOVER {background: url(../images/galleryImgBg.png) no-repeat -160px 0;}
div#gallery a img {float: none; margin: 8px auto 0 auto; display: block;}

div.primaryData {float: left; width: 240px;}
div.mapWrapper {float: left; width: 220px; height: 315px; background: #b2e571;}
div#googleMap {width: 206px; height: 301px; margin: 7px 0 0 7px;}

div.contactForm {float: right; width: 220px; height: 315px; background: url(../images/contactFormBg.png) no-repeat;}
div.contactForm fieldset {margin: 70px 0 0 15px;}
div.contactForm input {border: 1px solid #ffffff; width: 176px; padding-left: 12px; height: 28px; line-height: 30px; margin-bottom: 1px;}
div.contactForm textarea {border: 1px solid #ffffff; width: 176px; padding: 5px 0 5px 12px; height: 115px;}
div.contactForm .button {font-size: 0; height: 40px; border: 0;}
div.contactForm .error {border: 1px solid #ff0000; background: #fde7e7;}

div#footer {height: 260px; width: 100%; background: #00b2df;}
div#footer * {color: #ffffff;}
div#footer div.container {background: url(../images/footer.png) no-repeat; height: 260px; position: relative;}
div#footer div#footerWave {position: absolute; width: 230px; height: 165px; background: url(../images/footerWave.png) no-repeat; top: -165px; left: -100px}
div#footer ul {float: left; width: 180px; height: 145px; list-style-type: none; margin-top: 22px;}
div#footer ul * {line-height: 24px;}
div#footer table {float: left; margin-top: 22px; width: 355px;}
div#footer table h1 {font-weight: normal;}
div#footer table thead td {padding-bottom: 10px;}
div#footer table tbody td {vertical-align: top; width: 33%;}
div#footer table tbody td.col1 {width: 18%;}
div#footer table tbody td.col2 {width: 37%;}
div#footer table tbody td.col3 {width: 18%;}
div#footer table tbody td.col4 {width: 27%;}
div#footer table tbody a {line-height: 24px; display: block;}
div#footer table tbody a span {padding-right: 18px; background: url(../images/arrowRight.png) no-repeat right center;}
div#footer div#footerContact {float: right; width: 310px; height: 143px; margin-top: 30px;}
div#footer div#footerContact a {display: block; width: 255px; height: 25px; margin: 24px 0 0 32px;}
div#footer div#footerCopyright {clear: left; padding-top: 15px;}
div#footer div#footerCopyright em {text-decoration: underline; font-style: normal;}

.gallery.h1 {
	color: #00b1df !important;
	font-family: 'Open Sans' !important;
	font-size: 38px !important;
	line-height: 41px !important;
}

.pdf {
    float: right;
}

@media screen and (max-width: 600px) {
    
    /* Common */
    .mobileOnly {
        display: block;
    }
    .desktopOnly {
        display: none;
    }
    div#footer table, div#footer ul, div#columnLeft, div#breadcrumbs {
        display: none;
    }
    div.container {
        width: 100%;
    }
    h1 {
        position: relative;
    }
    /* End: Common */
    
    /* Top */
    a#logo {
        width: 70px;
        height: auto;
        background: none;
        margin: 12px;
    }
    a#logo img {
        width: 100%;
    }
    div#top, div#top.index {
        margin: 0;
    }
    div#top {
        background: url(../images/lineHorizontal.png) repeat-x bottom left;
        padding-bottom: 2px;
    }
    div#top h1 {
        float: left;
        margin: 26px 0 0 0;
        font-size: 11px;
    }
    div#top * {
        line-height: 13px;
    }
    #mobileMenuSwitch {
        display: block;
        width: 35px;
        height: 30px;
        background: url(../images/mobileMenuSwitch.png) no-repeat;
        position: absolute;
        z-index: 9999;
        right: 7px;
        top: 24px;
    }
    #menuWrapper {
        clear: both;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s;
    }
    #menuWrapper.expanded {
        max-height: 1000px;
    }
    #mobileMenu li.level2 a {
        padding-left: 32px;
        background-position: 12px center;
    }
    #mobileMenu li a {
        color: #00b2df;
        font-family: 'Open Sans';
        display: block;
        margin: 0 12px;
        line-height: 24px;
        font-size: 14px;
        border-top: 1px solid #e4ddd5;
        background: url(../images/arrowRight.png) no-repeat 0 center;
        padding-left: 20px;
    }
    #mobileMenu li:last-of-type {
        display: none;
    }
    /* End: Top */
    
    /* Content */
    div#content {
        background: none;
    }
    div#columnMain {
        float: none;
        background: none;
        width: 100%;
        margin-bottom: 0;
    }
    div#text {
        margin: 0;
        padding: 12px;
    }
    div#text img {
        max-width: 100%;
    }
    div#content h1 {
        margin: 0 0 10px 0;
        height: auto;
        line-height: 30px;
    }
    div#content h1 span {
        font-size: 30px;
        line-height: 30px;
    }
    /* End: Content */
    
    /* Gallery */
    div#gallery {
        margin-top: 10px;
    }
    div#gallery a {
        box-sizing: border-box;
        width: 143px;
        background-size: auto 143px;
        height: 143px;
        margin: 0 10px 10px 0;
    }
    div#gallery a:nth-of-type(2n+2) {
        margin-right: 0;
    }
    div#gallery a img {
        width: 127px;
    }
    /* End: Gallery */
    
    /* Footer */
    div#footer {
        height: auto;
        margin-top: 130px;
    }
    div#footer div.container {
        background: #00b2df;
        height: auto;
    }
    div#footer div#footerContact {
        float: none;
        width: 100%;
        height: auto;
        margin-top: 0;
        padding: 12px;
        box-sizing: border-box;
    }
    div#footer div#footerContact a {
        width: 100%;
        height: auto;
        margin: 0;
    }
    div#footer div#footerWave {
        left: 0;
        top: -121px;
        width: 170px;
        height: 122px;
        background-size: 170px auto;
    }
    div#footer div#footerCopyright {
        padding: 12px;
    }
    div#footer hr {
        border-top: 1px solid rgba(255, 255, 255, 0.7);
    }
    /* End: Footer */
    
    /* Index */
    div#indexBoxes .col:nth-of-type(1), div#indexBoxes .col:nth-of-type(3), div#visual img#circle {
        display: none;
    }
    div#visual {
        height: auto;
        padding-bottom: 24px;
    }
    div#visual div#center {
        float: none;
        margin: 0;
    }
    div#visual .learnMore {
        margin: 0 auto;
    }
    div#visual img#indexLead {
        display: block;
        margin: 24px auto;
    }
    div#visual div#pompSelector {
        float: none;
        margin: 12px auto 0 auto;
    }
    div#indexBoxes {
        height: auto;
        padding: 0 12px;
    }
    div#indexBoxes .col {
        float: none;
        width: auto;
    }
    div#indexBoxes p {
        width: 100%;
    }
    div#indexBoxes .lamps, div#indexBoxes .lamps a img {
        display: block;
        margin: 0 auto;
    }
    div#indexBoxes .lamps a img {
        margin-top: 20px;
    }
    /* End: Index */
    
    /* Company */
    div#text.company div.img {
        margin: 12px auto;
        float: none;
    }
    div#text.company div.img img {
        margin: 0 auto;
        display: block;
    }
    div#text.company div.col1, div#text.company div.col2 {
        width: 100%;
    }
    div#text.company div.col2 {
        margin-bottom: 12px;
    }
    /* End: Company */
    
    /* Contact */
    div.primaryData, div.mapWrapper, div.contactForm, div#googleMap {
        float: none;
        width: 100%;
    }
    div.primaryData {
        margin: 12px auto;
    }
    div.mapWrapper, div#googleMap {
        box-sizing: border-box;
    }
    div.mapWrapper {
        padding: 7px;
        margin: 0 0 7px 0;
    }
    div#googleMap {
        margin: 0;
        height: 100%;
    }
    div.contactForm {
        background-color: #00b2df;
    }
    div.contactForm fieldset {
        margin: 0;
        padding: 70px 12px 0 12px;
    }
    div.contactForm input, div.contactForm textarea {
        width: 100%;
        box-sizing: border-box;
    }
    /* End: Contact */
    
    /* Well */
    div#flash {
        width: 278px;
        float: none;
        margin: 0 auto;
        overflow: hidden;
    }
    /* End: Well */
    
    /* Category */
    .pdf {
        top: 0;
        right: 0;
        position: absolute;
    }
    div#pompsList img.header {
        display: none;
    }
    div#pompsList a {
        width: 143px;
        height: 181px;
        margin-right: 10px;
        margin-bottom: 10px;
        background-size: auto 181px;
    }
    div#pompsList a:nth-of-type(2n+2) {
        margin-right: 0;
    }
    div#pompsList a.lastInRow {
        margin-right: 10px !important;
    }
    div#pompsList a img {
        max-height: 130px;
    }
    /* End: Category */
    
    /* Item view */
    div#pompView div.img {
        width: 296px;
        height: 365px;
        background-size: 296px auto;
        overflow: hidden;
    }
    div#pompView div.img img {
        max-height: 320px;
        margin-top: 20px !important;
    }
    div#pompView div.imgWrapper {
        width: 100%;
        float: none;
    }
    div#pompThumbs a {
        width: 50px;
        height: 50px;
    }
    div#pompThumbs a:nth-of-type(2n+4) {
        margin-right: 0;
    }
    /* End: Item view */
}

 h1 { line-height: initial; }
 .categories {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 15px 0px 25px;
}
 .category { width: 24%; }
 .category.wider {
	width: 48%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
 .category h4 a {
	color: #00B2DF;
	display: block;
	font-size: 1.8em;
	font-family: "Open Sans";
	font-weight: 400;
	text-transform: uppercase;
	margin-bottom: 20px;
	text-align: center;
}
@media screen and (max-width: 600px) {
	 .category { 
		margin: 0 auto 15px;
		width: 90%; 
	}
	 .category.wider {
		width: 90%;
	}
}

a.img-cover img {
	margin: 18px auto 0px;
}
a.img-cover {
	display: block;
	margin: 0 auto 15px;
	width: 160px;
	height: 202px;
	background: transparent url("https://www.hydro-pomp.com.pl/pl/images/pompsListBg.png") no-repeat scroll 0% 0%;
	text-align: center;
	text-decoration: none;
	font-size: 14px;					
}
a.img-cover:hover {
	text-decoration: underline;
	background: transparent url("https://www.hydro-pomp.com.pl/pl/images/pompsListBg.png") no-repeat scroll -160px 0px;
}

.parts-sneakpeaks li {
	list-style-type:none;
}

.parts-sneakpeaks .headline {
	background-color:#00b2df;
	color:#fff !important;
	font-weight: bold;
	font-size: 16px;
	padding:3px;
	padding-left:10px;
	padding-right:10px;
	margin-bottom: 7px !important;
	display: inline-block;
}

.clearfix {
	clear: both;
}