@import url(http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext);

html { margin:0; padding:0px; width: 100%; height: 100%; }
body { margin:0; padding:0px; font-family: arial, helvetica; font-weight: normal; font-size: 13px; background-color: #F2F2F2; color: #383833; width: 100%; min-height: 100%; }

* { outline: none; }

h1, .h1, h2, .h2, h3, .h3 { margin: 20px 0; font-weight: normal; font-family: Oswald, Tahoma; text-transform: uppercase; }
h2, .h2 { font-size: 19px; }

a { text-decoration: none; color: #00c0ff; }
a:hover { text-decoration: underline; }
a img { border: 0; }

p { font-size: 13px; margin: 0 0 20px 0; line-height: 23px; }


ul, ol { padding: 0; }
li { margin: 6px 0 0 0; padding: 0 0 0 20px; list-style: none; background: url(../images/indicator2.png) 2px 5px no-repeat; }

address { font-style: normal; line-height: 23px; }

table th { padding: 2px; }
table td { padding: 2px; }

.page { width: 100%; max-width: 960px; margin: 0 auto; }
.page img { max-width: 100%; height: auto; }

.column { margin: 0 15px 0 15px; float: left; }
.column.alpha { margin-left: 0; }
.column.omega { margin-right: 0; }

.column.width-560 { width: 560px; }
.column.width-310 { width: 310px; }
.column.width-380 { width: 380px; }
.column.width-490 { width: 490px; }

.big-orange-button { display: inline-block; width: 210px; text-align: center; font-family: Oswald, Tahoma; font-size: 18px; font-weight: normal; text-transform: uppercase; background-color: #559cb4; color: white; padding: 10px 0; }
.med-black-button { display: inline-block; text-align: center; font-family: Oswald, Tahoma; font-size: 15px; font-weight: normal; text-transform: uppercase; background-color: #1a1a1a; color: white; padding: 5px 15px; }

/*.column .h2, .column .h3 { font-size: 26px; font-weight: medium; font-weight: 500; line-height: 27px; padding-left: 26px; background: url(../images/red-left-line.png) left top no-repeat; margin-bottom: 9px; }
.column .h3 { font-size: 15px;  font-weight: bold; padding-top: 1px; padding-bottom: 1px; }
.column .contents { padding: 8px 0 0 26px; background: url(../images/gray-left-dashes.png) left top no-repeat; }
.column .contents .gallery { float: left; margin-right: 26px; width: 96px; }
/*.column .contents .description { float: left;  }*/
/*.column.width-560 .contents .description { width: 400px; }
.column.width-310 .contents .description { width: 150px; }*/

body { padding-top: 78px; }
#top { width: 100%; height: 78px; background: #ffffff url(../images/top-bg.png) left bottom repeat-x; position: fixed; top: 0; z-index: 9999; }
#top .left { /*float: left; width: 275px;*/ display: inline-block; height: 75px; }
#top .right { /*float: right; width: 685px;*/ display: inline-block; height: 75px; }
#top a { display: inline-block; margin-left: 50px; }

#menu { }

#menu ul { display: block; margin: 0; padding: 0; height: 75px; float: right; }
#menu li { display: block; margin: 0; float: left; padding: 0; list-style: none; background: none; background-color: #ffffff; transition: background-color ease-out .3s; }
#menu li a { display: block; font-family: Oswald, Tahoma; color: #383833; margin: 0 8px 0 12px; height: 25px; padding: 33px 15px 17px 16px; font-size: 15px; font-weight: normal; line-height: 14px; text-decoration: none; text-transform: uppercase; }

#menu li.sel { } 
#menu li.sel a { border-bottom-color: #00c0ff; background: url(../images/indicator.png) left 36px no-repeat; }
#menu li:hover { background-color: #18191A; transition: border-bottom-color ease-out .3s; }
#menu li:hover a { text-decoration: none; border-bottom-color: #18191A; color: white; transition: color ease-out .2s; }
#menu li.sel:hover a { border-bottom-color: #00c0ff; text-decoration: none; }



#slider { height: 427px; position: relative; min-width: 960px; }
#slider .inner { height: 425px; background: #C9DFF7 url(../../uploaded_files/slaskie-sklady-wegla.jpg) center top no-repeat; position: relative; }
#slider .mask { height: 3px; position: absolute; left:-1px; bottom: 0; right: 0; background: transparent url(../images/slider-orange-mask.png) left top repeat-x; }
#slider .page { padding-top: 1px; }
#slider .contents2 { margin: 30px 0 18px 70px; padding: 0 0 1px 0; }
#slider .contents2 .h-container { float: left; position: relative; padding: 5px 0; margin: 0 0 20px 0; }
#slider .contents2 .h-container-lb { position: absolute; left: -10px; bottom: -8px; width: 35px; height: 33px; background: transparent url(../images/slider-h-lb.png) left top no-repeat; }
#slider .contents2 .h-container-rt { position: absolute; right: -13px; top: -14px; width: 45px; height: 24px; background: transparent url(../images/slider-h-rt.png) left top no-repeat; }
#slider .contents2 .h-container p { display: inline; margin: 0; font-family: Oswald, Tahoma; padding: 5px 0px; margin: 0; color: white; font-size: 35px; background-color: #18191A; line-height: 49px;  text-transform: uppercase; }
#slider .contents2 .h-container p span { padding: 0 20px; white-space: nowrap; }
#slider .contents2 .p-container { clear: both; }
#slider .contents2 .p-container p { display: inline; font-size: 15px; padding: 5px 20px; color: white; background-color: #18191A; }


#slider-area { height: 427px; position: relative; }
#slider { min-width: 960px; height: 425px; }
#slider .nivo-prevNav { background: transparent url(../images/slider-b-p.png) left top no-repeat; top: 42%; width: 70px; height: 80px; left: 30px; }
#slider .nivo-nextNav { background: transparent url(../images/slider-b-n.png) left top no-repeat; top: 42%; width: 70px; height: 80px; right: 30px; }
#slider .nivo-caption { background: none; }
/*#slider-area .nivo-controlNav { padding-top: 25px; }*/
#slider-area .theme-default .nivoSlider { border-radius: 0; font-weight: normal; }
#slider-area .nivo-controlNav-container { width: auto; margin: auto; position: relative; }
#slider-area .nivo-controlNav { position: absolute; padding-top: 0; bottom: 0; right: 40px; z-index: 99; }
#slider-mask { height: 3px; position: absolute; left:-1px; bottom: 0; right: 0; /*background: transparent url(../images/slider-orange-mask.png) left top repeat-x;*/ }


#products { margin: 70px auto 0 auto; width: 100%; text-align: center; }
#products .product { margin-bottom: 50px; width: 285px; padding: 0 15px 0 15px; /*float: left;*/ display: inline-block; position: relative; text-align: center; background: transparent url(../images/product-line.png) right top repeat-y; }
#products .product .image { position: relative; width: 245px; height: 251px; margin: auto; }
#products .product .image .mask { position: absolute; left: 0px; top: -1px; right: 0; bottom: 0; background: transparent url(../images/product-mask.png) center top no-repeat; }
#products .product h2 { text-align: center; }
#products .product .contents { width: 210px; min-height: 140px; margin: auto; text-align: left; }
#products .product p { }
#products .product .more { position: absolute; left: 55px; top:0; right: 55px; bottom: 48px; }
#products .product .more span { display: none; }
#products .product .big-orange-button.more { position: static; }
#products .product .price { color: #00c0ff; font-size: 36px; text-align: center; line-height: 1.1em; }
#products .product .price .c { font-size: 26px; }


#product { margin-top: 50px; }
#product.page { margin-bottom: 50px; }
#product .left { float: left; margin-left: 0; width: 320px; text-align: center; background: transparent url(../images/product-line.png) right top repeat-y; }
#product .left .image { position: relative; margin: 0 auto 30px  auto; width: 245px; }
#product .left .image .mask {  position: absolute; left: -1px; top: -1px; right: 0; bottom: 0; background: transparent url(../images/product-mask.png) center top no-repeat; }
#product .left p { margin: 10px 0; }
#product .right { float: right;  margin-left: 50px; width: 580px; }
#product .shortcontent { font-weight: bold; margin-bottom: 40px; }
#product h1 { margin-top: 0; }
#product .left .price { color: #00c0ff; font-size: 36px; text-align: center; line-height: 1em; }
#product .left .price .l { font-size: 26px; }
#product .left .price .c { font-size: 26px; }
#product .left .price.second { color: #00c0ff; font-size: 25px; text-align: center; line-height: 1.2em; }
#product .left .price.second .l { font-size: 20px; }
#product .left .price.second .c { font-size: 20px; }
#product .left .order { margin-top: 15px; } 


#document { margin-top: 50px; }
#document.page { margin-bottom: 50px; }
#document .left { float: left; margin-left: 60px; width: 300px;  }
#document .right { float: right;  margin-left: 50px; width: 550px; }
#document .shortcontent { font-weight: bold; margin-bottom: 40px; }
#document h2 { margin: 29px 0 22px 0; padding-left: 20px; background: url(../images/indicator.png) left center no-repeat; }
#document h3 { margin: 33px 0 22px 0; }
#document p { margin: 20px 0; }
#document .left p { font-weight: bold; }
#document p strong { color: #559cb4; font-weight: bold; }


#document.contact .left { margin-left: 60px; width: 255px; padding-left: 45px; padding-bottom: 40px; background-color: #1A1A1A; color: white; }
#document.contact .left h1 { padding-left: 0; margin: 30px 0; background: none; font-size: 23px; }
#document.contact .left .image {}
#document.contact .right { padding-top: 12px; }

#document.contact .field { }
.contact .field .phone { font-size: 23px; font-weight: bold; padding: 5px 5px 5px 40px; background: transparent url(../images/phone.png) left top no-repeat; }
.contact .field .email { }


#contact-box { padding-bottom: 1px; }
#contact-box .page { width: 840px; color: #ffffff; background-color: #1a1a1a; margin-bottom: 40px; padding: 30px; }
#contact-box .left .h1 { font-size: 25px; }


#footer { color: #a0a0a0; background-color: #1A1A1A; padding-top: 25px; padding-bottom: 22px; border-top: 1px #9C9C9C solid; }
#footer .left { float: left; margin-left: 50px; }
#footer .left img { vertical-align: middle; margin-top: -5px; }
#footer .middle { float: left; width: 490px; text-align: center; padding: 5px 0 0 0; }
#footer .right { float: right; margin-right: 20px; padding: 2px 0 0 0; }

#copy { float: left; }
#copy img { vertical-align: sub; margin-right: 4px; }
#copy a { display: inline; }

#vsi { float: right; }
#vsi a { color: #707070; display: block; text-align: center; }
#vsi img { vertical-align: middle; }
#vsi a:hover{ text-decoration: none; opacity: 0.7; }



#contactForm { text-align: left; margin-top: 40px; }
#contactForm p { margin: 10px 0; }
#contactForm h4 { font-size: 1.25em; margin-left: 0; }
#contactForm form { padding: 0; margin: 0; }
#contactForm fieldset { border: none; padding: 0; margin: 0; display: block; }
#contactForm fieldset div { margin: 4px 0 8px 0; }
#contactForm fieldset label { display: inline-block; vertical-align: top; padding: 7px 2px 0 0; width: 109px; text-align: right; }
#contactForm fieldset label:after { content: ':'; }
#contactForm legend { font-weight: bold; margin: 30px 0 10px 0; font-size: 16px; }
#contactForm p { margin-left: 0; margin: 10px 0 15px 0 0; }
#contactForm input,
#contactForm select,
#contactForm textarea ,
#contactForm .textarea { display: inline-block; width: 405px; border: 1px #ffffff solid; font-family: Arial; padding: 5px 4px; color: #000000; font-size: 13px; margin-top: 2px; }
#contactForm select { width: 435px; padding: 3px 4px 4px 4px; font-weight: bold; }
#contactForm option { padding: 1px 0 1px 0; }
#contactForm .textarea { display: inline-block; border: none; padding: 5px 0 5px 5px; font-weight: bold; }
#contactForm .error { color: #00c0ff; }
#contactForm .msg { padding: 0 0 10px 0; font-size: 12px; }
#contactForm .nav { text-align: right; padding: 10px 20px 0 0; }
#contactForm .inputText.message textarea { height: 100px; }
#contactForm input.send { display: none; }

/*#contactForm .inputText input,
#contactForm .inputText select,
#contactForm .inputText textarea { -moz-box-shadow: inset 0 0 5px 0 #e7e7e7; -webkit-box-shadow: inset 0 0 5px 0 #e7e7e7; box-shadow: inset 0 0 5px 0 #e7e7e7; }*/


#formularz-zamowienia { margin-top: -70px; padding-top: 100px; }
#zamowienie { background-color: #CECEC8; margin-left: -30px; padding: 1px 10px 30px 30px; }
#zamowienie #contactForm { margin-top: 40px; }
#zamowienie #contactForm input,
#zamowienie #contactForm select,
#zamowienie #contactForm textarea,
#zamowienie #contactForm .textarea { width: 425px; border: 1px #f7f7f7 solid; }
#zamowienie #contactForm .h2 { font-size: 30px; margin: 0px 0 25px 0; }
#zamowienie #contactForm .amount label { padding-top: 13px; }
#zamowienie #contactForm .amount div { font-size: 20px; /*color: #00c0ff;*/ }
#zamowienie #contactForm .zip { float: left; }
#zamowienie #contactForm .zip input { width: 100px; }
#zamowienie #contactForm .city { float: left; }
#zamowienie #contactForm .city label { width: auto; margin-left: 10px; }
#zamowienie #contactForm .city input { width: 246px; }
#zamowienie #contactForm .message textarea { height: 48px; }
#zamowienie #contactForm .nav { padding: 20px 20px 0 0; }


#langs .lang, #products .product .big-orange-button.more, #zamowienie .big-orange-button, #contactForm .med-black-button, #product .big-orange-button  { border-radius: 2px; }
#contactForm .inputText *, #contactForm a.btnsend, td, #zamowienie { border-radius: 3px; }

/*#langs .lang.sel, #menu li:hover { -moz-box-shadow: inset 0 0 1px 0 #ffffff; -webkit-box-shadow: inset 0 0 1px 0 #ffffff; box-shadow: inset 0 0 1px 0 #ffffff; }*/
#document.contact .left, .med-black-button, #contact-box .page { -moz-box-shadow: inset 0 0 1px 1px #909090; -webkit-box-shadow: inset 0 0 1px 1px #909090; box-shadow: inset 0 0 1px 1px #909090; }
#zamowienie { -moz-box-shadow: inset 0 0 1px 1px #d0d0d0; -webkit-box-shadow: inset 0 0 1px 1px #d0d0d0; box-shadow: inset 0 0 1px 1px #d0d0d0; }

#breadcrumb { }
#breadcrumb ol { display: block; width: 905px; padding: 0 0 0 55px;  margin: 30px auto; }
#breadcrumb li { display: inline-block; padding: 0; background: none; color: #909090; }
#breadcrumb li a { color: #181818; padding: 0 5px; }
#breadcrumb li span { padding: 0 5px; }

/*
#foot-menu { float: right; padding-top: 10px; margin-right: 10px; }
#foot-menu li { display: block; float: left; padding-left: 20px; background: url(../images/menu-sep.png) 10px 3px no-repeat; line-height: 16px; list-style: none; }
#foot-menu li:first-child { background: none; padding: 0; }
#foot-menu li a { padding: 0 2px; font-family: helvetica, arial, sans-serif; color: #767676; font-weight: bold; display: block; font-size: 10px; line-height: 16px; }
#foot-menu li.copy a { padding: 0; display: inline; color: white; font-weight: bold; font-family: Verdana, Arial; }
*/


#scroll { background-color: #559cb4; padding-top: 1px; padding-bottom: 1px; overflow: hidden; }
#scroll p { font-size: 30px; font-family: Oswald; padding: 0; margin: 30px 0; color: white; }
#scroll a { color: white; text-decoration: none; transition: color ease-out .5s; transition: background-color ease-out .5s; }
#scroll a:hover { color: #559cb4; background-color: white; transition: color ease-out .1s; transition: background-color ease-out .2s; }

.g-recaptcha {}
.g-recaptcha > div { float: right; margin-bottom: 15px; }



.clear { clear: both; height: 0; width: 0; padding: 0; margin: 0; font-size: 0; line-height: 0; border: 0; }
.debug { border: 1px #A05050 dotted; margin: 10px; padding: 4px 6px; font-family: verdana; font-size: 10px; color: gray; }
.debug a { margin-right: 6px; color: #A05050; text-decoration: none; font-weight: bold; }
.debug a:hover { text-decoration: underline; }

.rodo { font-size: 12px; color: #666; text-align: justify; } 

/*@include breakpoint(max-width: 900px){*/
@media only screen and (max-width: 965px) {

#slider-area { height: 280px; position: relative; }

#slider { height: 280px; position: relative; min-width: unset; }
#slider .inner { height: 278px; }

#products .product { width: 40%; }
#breadcrumb  ol { width: auto; }

#product .left { float: none; margin-left: 0; width: 100%; }
#product .right { float: none; margin: 20px 0; width: 100%; }
#product .right .content { padding: 20px; }
#zamowienie #contactForm { padding: 20px; }

#zamowienie #contactForm input, 
#zamowienie #contactForm select, 
#zamowienie #contactForm textarea, 
#zamowienie #contactForm .textarea { width: 100%; }

#contactForm fieldset label { text-align: left; }

#document .left { float: none; width: 100%; margin: 20px 0 20px 0; text-align: center; }
#document .right { float: none; width: 100%; margin: 20px 0 20px 0; }
#document .right .content { padding: 20px; }

#document.contact .left { width: auto; float: none; text-align: center; margin: 20px; width: auto; padding: 20px 0; }
#document.contact .right { width: auto; float: none; margin-left: 20px; }

#document .shortcontent { padding: 20px; }
	
#footer .middle { width: auto; }	
	
}

@media only screen and (max-width: 700px) {
#menu { background: #fff; width: 100%; text-align: center; }
#menu ul { display: inline-block; float: none; }

#slider  img { object-fit: cover; width: auto !important; }


#document { margin-top: 100px; }



}

@media only screen and (max-width: 600px) {

#products .product { width: 100%; padding: 0;}
#products .product .contents { width: 100%; text-align: center; }

#menu li a { margin: 0; padding: 33px 10px 17px 10px}	

#slider .contents2 { margin: 0px; }
#slider .contents2 .h-container-rt { top: -3px; }
#slider .contents2 .p-container { max-width: 300px; }
#slider .contents2 .h-container p { font-size: 20px; }
#slider .contents2 .h-container p span { padding: 0 5px; }
#slider .contents2 .p-container p { font-size: 10px; }



.nivo-directionNav { display: none; }

}