/**
* czerwony: C20D20
*/

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


body { font: 14px 'Droid Sans', Arial, Verdana, sans-serif; text-align: center; background: #f2f2f2; color: #525F67; }

a { color: #C20D20; text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { margin: 0 0 25px; }
h1 a, h2 a { color: #000; }
h1 a:hover, h2 a:hover { color: #EC6707; }

h1, h2, h3, h4, #navbar { font-family: 'Oswald';  }


span.black { padding: 3px 6px; background-color: #000; color: #fff; text-transform: uppercase; }

label { color: #333; }

    

.wrapper { max-width: 1020px; padding: 0 20px; /*outline: 1px solid red;*/ margin: 0 auto; text-align: left; }



/* header */
header {  }
#top { height: 100px; }
#top #logo a { display: inline-block; margin-top: 20px; }
#top #logo a img { height: 60px; }
#top .icons a { display: inline-block; margin-right: -10px; background: no-repeat center center; width: 30px; height: 30px; margin-top: 37px; }
#top .icons a:hover { border-color: #000; }


/* nav */
#navbar { background-color: #C20D20; height: 40px; line-height: 40px;       border-radius: 8px 8px 0 0; font-size: 12px; }
#navbar li { float: left; margin-right: 20px; }
#navbar li a { color: #fff; text-transform: uppercase; padding: 0 5px 0 0; display: block; height: 100%; }
#navbar li a:hover { text-decoration: underline; }
#navbar li.act a { text-decoration: underline; }

#navbar .dropdown { position: relative; z-index: 100000; }
#navbar .dropdown:hover ul { display: block; }

#navbar .dropdown ul { display: none;   position: absolute; top: 40px; left: -20px; z-index: 1; background: #f2f2f2; border: 2px solid #C20D20; border-radius: 0 0 10px 10px; border-top-width: 3px; padding: 5px 15px; }
#navbar .dropdown ul li { text-align: left; width: 100%; min-width: 150px; border-bottom: 1px solid #C9C9C9; }
#navbar .dropdown ul li:last-of-type { border-bottom: none; }
#navbar .dropdown ul li a { line-height: 30px; display: list-item; color: #000; padding: 0 5px; text-decoration: none; }
#navbar .dropdown ul li a:hover { color: #C20D20; text-decoration: none; }

/* body */
#body { margin: 30px auto 50px; }
#body p { line-height: 170%; }

/* sidebar */
#sidebar { width: 250px; float: left; }

h1, #sidebar h4 { background-color: #234857; color: #fff; /*text-transform: uppercase;*/ padding: 8px 20px; margin: 0; font-size: 18px; font-weight: 500; }
#sidebar h5 { font-size: 14px; margin: 10px 0; color: #000; }

#sidebar .box { padding: 10px; background: #fff; }

#sidebar ul { list-style: none; margin: 0 10px; padding: 0; }
#sidebar li { padding: 3px 3px 10px; zoom: 1; /*border-bottom: 1px solid #eee;*/ }
#sidebar li a { display: list-item; color: #234857; }
#sidebar li a:hover { color: #C20D20; text-decoration: none; }

#sidebar ul ul { margin: 5px 0 5px 15px; font-size: 14px; }
#sidebar ul ul li { background: none; padding: 0; line-height: 18px; margin: 8px 0; border-bottom: none; }
#sidebar ul ul li a { padding: 0 2px; display: inline; margin-left: -2px; }
#sidebar ul ul li a:hover {  }
#sidebar ul ul li.act a { color: #C20D20; font-weight: bold; }

/*#sidebar_search { width: 208px; height: 58px; background: url('/media/lay/bg_sidebar_search.png') no-repeat -5px 0; position: absolute; top: 1px; left: 13px; }*/


/* content */
#content { width: calc(100% - 280px); float: right; padding: 20px; background: #fff; }
#content h1 { margin: -20px -20px 20px -20px; }
#content ul { margin: 20px 0 20px 20px; }
#content ul li { margin-bottom: 10px; }
#content h4 { font-size: 18px; font-weight: 500; }

.lay_product #content { background: none; padding: 0; }

#content table { font-size: 100%; margin: 20px 0; }
#content table td { min-width: 50px; padding: 10px; }

/*#content*/

/* lay */
body.lay_nosidebar #sidebar { width: 0; display: none; }
body.lay_nosidebar #content { width: 100%; }



/* banner */
#banner { height: 180px; position: relative; z-index: 4; overflow: hidden; background: #eee no-repeat center center; background-size: cover; text-align: left; }

#banner_cover_1, #banner_cover_2 { background-color: #fff; display: block; left: 0; overflow: hidden; padding: 0; position: absolute; width: 100%; z-index: 2; }
#banner_cover_1 { height: 100px; bottom: -87px;  transform: skewY(3deg); }
#banner_cover_2 { height: 150px; bottom: -100px; transform: skewY(-2deg); }

#banner h1 { text-transform: uppercase; margin: 30px 0 13px; font-size: 26px; }
#banner h3 { text-transform: uppercase; margin: 0; }
#banner h1 span, #banner h3 span { background-color: rgba(255,255,255,0.6); padding: 5px 8px; }
    
/* index */
#slider { min-width: 500px; max-width: 1250px; height: 200px; overflow: hidden; background: no-repeat center center; background-size: cover; margin: 0 auto; border: 3px solid #C20D20; border-width: 3px 0; border-radius: 4px 4px 0 0; /*box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.33);*/ }
.lay_index #slider { height: 330px; }



.lay_index #content { float: none; padding: 0; background: transparent; }




/*#slider { width: 730px; height: 330px; float: left; overflow: hidden; }*/

.flexslider ul.slides li.item a { height: 330px; display: block; background: no-repeat center center; background-size: cover; }
.flexslider li.item { position: relative; }

.flex-prev, .flex-next { position: absolute; top: 210px; font-size: 0 !important; width: 50px; height: 50px; cursor: pointer; }
.flex-prev {  left: 10px; background: transparent url('/res/lay/arrow_left.png') no-repeat center center !important; }
.flex-next { right: 10px; background: transparent url('/res/lay/arrow_right.png') no-repeat center center !important; }

.flex-control-paging { position: absolute; top: 20px; z-index: 1000; height: 12px; }



#newsbar { margin: 0 auto; height: 50px; color: #234857; font-size: 22px; line-height: 50px; font-size: 19px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); font-family: 'Oswald'; background-color: #F2F2F2; max-width: 1248px; text-align: left; padding-left: 20px; display: none; }
.lay_index #newsbar { display: block; }



.lay_index .container { max-width: 100%; padding: 3px; }
.lay_product .container { max-width: 100%; padding: 30px 20px; }



/* index */
#index_promo { margin: 50px 0 50px -20px; }
.index_promo { width: 310px; display: block; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); border-radius: 4px; float: left; margin-left: 23px; margin-bottom: 23px; }
.index_promo .img { display: block; height: 120px; background: url('/cdn/intro/promo_1.jpg') no-repeat center center; background-size: cover; }
.index_promo h4 { margin: 0 0 5px; color: #c20d20; }
.index_promo .txt { padding: 10px; color: #234857; font-size: 15px; font-family: 'Oswald'; font-weight: 300; background-color: #F7F7F7; min-height: 126px; }

.index_promo:nth-of-type(4) .txt { min-height: 80px; }
.index_promo:nth-of-type(5) .txt { min-height: 80px; }
.index_promo:nth-of-type(6) .txt { min-height: 80px; }

.index_promo:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); text-decoration: none; }
 
 


/* about */
.grid_about { margin-left: -2%; }
.grid_about > div { width: 23%; height: 0; padding-top: 23%; margin: 0 0 2% 2%; background: no-repeat center center; background-size: 90%; border: 1px solid #eee; float: left; }

#people tr:nth-of-type(odd) { background: #f4f4f4; }
#people tr:nth-of-type(even):hover td { background: #fff; }


/* products */
.grid { text-align: center; }
.grid a { display: block; float: left; position: relative; }
.grid a:hover { text-decoration: none; }

.grid span.th { display: block; height: 0; padding-top: 75%; background: #fff no-repeat center center; background-size: contain; border: 1px solid #ddd; }
.grid a:hover span.th { border-color: #000; }
.grid h3 { margin-top: 12px; }
.grid h3 span { font-size: 15px; padding: 3px 6px; background-color: #234857; color: #fff; font-weight: 300; letter-spacing: 0.5px; }



/* product */
#product { margin-bottom: 30px; }
#product_img { border: 1px solid #eee; }
#product_ths { text-align: left; margin-top: 10px; }
#product_ths a { width: 100px; height: 80px; float: left; margin: 0 10px 10px 0; background: no-repeat center center; background-size: contain; border: 1px solid #eee; }







.ttu { text-transform: uppercase; }






/* contact */
#contact_form { width: 350px; margin-top: 0; }
#contact_form input, #contact_form textarea { width: 450px; display: block; margin-bottom: 8px; padding: 5px; }
#contact_form textarea { min-height: 130px; min-width: 450px; max-width: 450px; }
#contact_form button { border: none; }








/* dotpay */
input.dotpay { background: #fff url('/res/lay/dotpay.png') no-repeat center center; width: 160px; height: 75px; }


/* komunikaty */
.msg { background: none !important; text-align: center; font-size: 14px; }
.msg span { padding: 4px 15px; border-radius: 5px; }
.msg_info span    { background-color: #DFEFF7; }
.msg_ok span      { background-color: #E4F5E7; }
.msg_warning span { background-color: #FFEF00; }
.msg_error span   { background-color: #FF2323; }
.msg_error   { padding: 1px 8px; border-radius: 5px; }

/* formularze - grid form */
.grid_form {  }
.grid_form input { width: 202px; }
.grid_form select { width: 210px; }
.grid_form input[type='checkbox'], .checkbox { width: auto; vertical-align: text-bottom; display: inline-block; }
.g14, .g24, .g34, .g44 { float: left; margin-bottom: 10px; }
.g14, .g34 { width: 130px; margin-right: 10px; font-size: 12px; }
.g24, .g44 { width: 210px; margin-right: 100px; }
.g44 { margin-right: 0; }

input[type=checkbox] { -webkit-appearance:checkbox; }



.info_label { background: url(/res/lay/ico_info.png) no-repeat 85px center; display: inline-block; width: 100px; color: #f00; }
.grid_form .g24 label, .grid_form .g44 label { margin-left: 10px; font-size: 12px; }



/* przeglądarka obrazków via modal */
#browser_ths { margin: 10px 0; }
#browser_ths img { height: 40px; padding: 3px; border: 1px solid #eee; margin-right: 5px; }
#browser_img { height: 535px; line-height: 535px; text-align: center; }
#browser_img img { max-height: 535px; vertical-align: middle; }

/* koszyk */
a.cnt { padding: 0 2px; }
a.cnt:hover { background: #F8F8F8; text-decoration: none; color: #000; }

/* cookies */
#cookies { font: 12px Arial; background: #f4f4f4; border-top: 1px solid #eee; width: 100%; line-height: 20px; position: fixed; bottom: 0; z-index: 5; padding: 10px 0; }
#cookies div.cf { width: 900px; text-align: left; margin: 0 auto; padding-right: 55px; }
#cookies div.fl { float: left; }
#cookies div.fr { float: right; }
#cookies a { text-decoration: underline; color: #71466C; }                             



/* content */
table tr.head:hover { background: #f6f6f6; }
table tr.incart, table tr.incart:hover { background: #FCF3D2; }

/* logowanie, rejestracja, zamówienie bez konta */
#boxes { margin: 40px 0;  }
#boxes h5 { margin-top: 0; border: none; }
#boxes h5:before, #boxes h5:after { display: none !important; }
#boxes div.fl { width: 230px; background: #f3f3f3; border: 1px solid #e9e9e9; padding: 10px; margin-right: 30px; border-radius: 3px; height: 130px; }
#boxes .box_txt { height: 70px; text-align: justify; }
#boxes .btn { width: 100%; }




.iframe_rwd { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.iframe_rwd iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


#msg { margin-bottom: 25px; }
#loading { position: fixed; _position: absolute; top: 20px; right: 20px; width: 16px; height: 16px; display: none; background: url('/res/lay/ico_loading.gif') no-repeat 0 0; }

#msgs { position: fixed; top: 0; left: 50%; margin: -250px auto auto -200px; width: 400px; text-align: center; padding: 25px; background: #fff; color: #000; z-index: 1000; box-shadow: 0 0 10px #555; /*display: none;*/ }
#msgs a { text-decoration: underline; }



/* guziki */
.btn { text-align: center; width: auto; min-width: 200px; font-weight: normal; background: #234857; color: #fff; padding: 8px 12px; text-decoration: none; display: inline-block; border: none; } 
.btn:hover { background: #C20D20; text-decoration: none; border-color: #000; color: #fff; }










footer { padding: 20px 0; background-color: #234857; border-top: 3px solid #C20D20; color: #eee; }
footer a { color: #fff; margin-right: 30px; }




table tr td { padding: 5px 0; }
table tr:hover td { background: #F5F5F5; }





/* MQ */


@media screen and (max-width: 48em)
{
 .md, .lg, .xl { display: none; }
 
 .grid_products_wide a { width: 100%; margin-bottom: 5%; }
 .grid_products_narrow a { width: 100%; margin-bottom: 5%; }
 
 .grid_about > div { float: none; width: 100%; padding-top: 100%; }
 
 
 
 .icons { display: none; }
 #navbar { position: relative; border-radius: 0; }
 #navbar #menu { display: none; position: absolute; width: 100%; top: 40px; left: 0; z-index: 100; }
 #navbar #menu li { display: block; float: none; width: 100%; border-top: 1px solid #fff; background: #9F000F !important; }
 #navbar #menu li a { display: block; padding: 0 20px; width: 100%; }
 
 #navbar .dropdown ul { /*padding: 0 !important;*/ display: none !important; }
 
 #menu_mobile .fl { float: left !important; margin: 0 !important; }
 #menu_mobile .fr { float: right !important; margin: 0 !important; }
 #menu_mobile .fr .mr20 { margin-right: 30px !important; }
 
 #banner { width: 100%; }
 #banner_cover_1, #banner_cover_2 { display: none; }
 
 #slider { border-radius: 0; }
 
 #contact_form { float: none; width: 100%; margin-bottom: 50px; } 
 #contact_form input, #contact_form textarea { width: 100%; } 
 #contact_form textarea { min-width: 200px; max-width: 100%; }
 
 #contact_info { float: none; width: 100%; }
 
 
 #sidebar { width: 100%; margin-bottom: 20px; }
 #content { width: 100%; }
}

@media screen and (min-width: 48em) and (max-width: 64em)  
{
 .sm, .lg, .xl { display: none; }
 
 .grid_products_wide a { width: 32%; margin: 0 2% 2% 0; }
 .grid_products_wide a:nth-of-type(3n) { margin-right: 0; }
 
 .grid_products_narrow a { width: 49%; margin: 0 2% 2% 0; }
 .grid_products_narrow a:nth-of-type(2n) { margin-right: 0; }
 
 #menu_mobile { display: none; }
}

@media screen and (min-width: 64em) and (max-width: 80em) 
{
 .sm, .md, .xl { display: none; }
 
 .grid_products_wide a { width: 23.5%; margin: 0 2% 2% 0; }
 .grid_products_wide a:nth-of-type(4n) { margin-right: 0; }
 
 .grid_products_narrow a { width: 32%; margin: 0 2% 2% 0; }
 .grid_products_narrow a:nth-of-type(3n) { margin-right: 0; }
 
 #menu_mobile { display: none; }
}

@media screen and (min-width: 80em) 
{
 .sm, .md, .lg { display: none; }
 
 .grid_products_wide a { width: 18.4%; margin: 0 2% 2% 0; }
 .grid_products_wide a:nth-of-type(5n) { margin-right: 0; }
 
 /*.grid_products_narrow a { width: 23.5%; margin: 0 2% 2% 0; }
 .grid_products_narrow a:nth-of-type(4n) { margin-right: 0; }*/
 .grid_products_narrow a { width: 32%; margin: 0 2% 2% 0; }
 .grid_products_narrow a:nth-of-type(3n) { margin-right: 0; }
 
 #menu_mobile { display: none; }
}