@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: FontWebu;
    src: url("../fonts/Asap-Regular.ttf");
}

body {font-family: FontWebu, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 120%; margin: 0; padding: 0;}
@media only screen and (max-width: 800px) { body { font-size: 100%; } }
a {text-decoration: none; color: #3C5F7F;}
a:hover {color: #8F2526;}


.logo {text-align: center; padding: 30px; background-color: #292929;}
.logo img {max-width: 250px;}
.wrapper {text-align: center; margin: 40px auto;}
.banner {background-color: #E9E9E9; max-height: 600px; height: 50vw; width: 100%; background-image: url('../images/banner.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;}
@media only screen and (max-width: 800px) { .banner { height: 75vw; } }
@media only screen and (max-width: 600px) { .banner { height: 100vw; } }

.text-content {	max-width: 1200px; margin: auto; padding: 10px 20px; }
.button {width: 100%; max-width: 250px; font-size: 25px; padding: 20px 10px; background-color: #3C5F7F; color: #fff; margin: 30px auto 60px auto; transition: 0.3s;}
.button:hover {background-color: #8F2526; cursor: pointer;}

.color-menu { margin: 20px auto; width: 100%; max-width: 350px; }
.color-menu div { margin-top: 5px; transition: 0.3s; }
.color-menu div a { transition: 0.3s; display: block; width: calc(100% - 40px); text-align: center; padding: 10px 20px;}

.footer {background-color: #292929; text-align: center; color: #777; padding: 40px;}
.products {text-align: center; margin: 30px auto; max-width: 1200px;}
.product {width: 100%; max-width: 235px; display: inline-table; margin: 10px; padding: 10px; border: solid 1px #EDEDED; background-color: #fff; transition: 0.3s; }
@media only screen and (max-width: 800px) { 
.product {column-count: 3; max-width: 150px; margin: 5px; padding: 10px; }
}
.product:hover {cursor: pointer; filter: brightness(95%); -webkit-filter: brightness(95%);}
.product-image img {width: 100%; height: auto;}
.product-name {margin-top: 15px;}
.product-price {margin-top: 10px;}

.products h2 { padding: 15px; font-size: 30px; margin-top: 30px; font-weight: normal;}
.products h3 { padding: 15px; font-size: 25px; margin-top: 40px; font-weight: normal;}

.pozink { background-color: #C7C7C7;}
.pozink a { color: #000; }
.pozink a:hover { color: #333; }
.ral3009 { background-color: #77342c; color: #fff;}
.ral3009 a { color: #fff;}
.ral3009 a:hover { color: #ccc;}
.ral3011 { background-color: #881f1d; color: #fff;}
.ral3011 a { color: #fff;}
.ral3011 a:hover { color: #ccc;}
.ral6005 { background-color: #164221; color: #fff;}
.ral6005 a { color: #fff;}
.ral6005 a:hover {color: #ccc;}
.ral7016 { background-color: #373F43; color: #fff;}
.ral7016 a { color: #fff;}
.ral7016 a:hover { color: #ccc;}
.ral8004 { background-color: #8F4E35; color: #fff;}
.ral8004 a { color: #fff;}
.ral8004 a:hover { color: #ccc;}
.ral8017 { background-color: #4d322e; color: #fff;}
.ral8017 a { color: #fff;}
.ral8017 a:hover { color: #ccc;}
.ral8019 { background-color: #392921; color: #fff;}
.ral8019 a { color: #fff;}
.ral8019 a:hover { color: #ccc;}
.ral9002 { background-color: #f0edda; color: #000;}
.ral9002 a { color: #000; }
.ral9002 a:hover { color: #333; }
.ral9005 { background-color: #0A0A0A; color: #fff;}
.ral9005 a { color: #ccc;}
.ral9005 a:hover { color: #fff;}
.ral9006 { background-color: #bfbfbf;}
.ral9006 a { color: #000; }
.ral9006 a:hover { color: #333;}

.divider {
  height: 20px;
  background: linear-gradient(to right, transparent, #ccc, transparent);
  margin: 40px 0;
}

.faq {max-width: 1200px; margin: auto; padding: 20px 20px 60px 20px; }
.faq b { font-weight: 400; color: #333; }
.faq p { font-weight: 200; color: #999; }
.question {font-weight: 600; margin-top: 40px; color: #444;}