html {color: #222;font-size: 1em;line-height: 1.4;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
audio,canvas,iframe,img,svg,video {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}

body {font: 16px/26px Helvetica, Helvetica Neue, Arial;}
a{ color: #1A687B;}
/*nav{ position: relative;}*/
nav ul {margin: 0;padding: 0;list-style-type: none;}

.header-container{ background: url(../images/banner-bg-loop.png) center top repeat-x;}
.header-container header{ max-width: 980px; width: 100%; margin: auto; position: relative;}
.header-container header .header-data #headerflash{ position: absolute; right: 0; left: 0; margin: auto; width: 480px; padding-left: 40px; }
.header-container header .logo{ display: block; float: left; max-width: 158px; width: 20.5%; }
.header-container header .logo img{ width: 100%; height: auto;}
.header-container header .site-name{float: left; background: url(../images/site-name.png) center top no-repeat; background-size: 100%; display: block; max-width: 484px; width:63%; height: 64px; margin-top: 60px; font-size: 30px; color: #fff; margin-top: 87px;margin-left: 5%;text-indent: -9999px}
.header-container header nav{ display: block; /*width: 100%;*/ position: absolute;  min-height: 36px;top: 167px;margin-left: 191px;}

.header-container header #menu{ display: none; width: 100%;  background: url(../images/menu.png) right center no-repeat #0A4659; text-align: center; line-height: 37px; border-bottom: 1px solid #fff;text-shadow: 1px 1px 1px #373737; color: #fff;}
.header-container header ul{ margin: 0; padding: 0; list-style: none;}
.header-container header ul li{ display: inline-block; }
.header-container header ul li a{ border: 2px solid #024A51; border-radius: 9px; background: #0088B2; font-family: 'Yanone Kaffeesatz', sans-serif; text-shadow: 1px 1px 1px #000; display: block; font-size: 19px;  text-decoration: none; color: #fff;padding: 2px 10px;}
.header-container header ul li a:hover{ color: #BFE533;background: #00A8DB;}
.header-container header .header-data{ background: url(../images/banner.jpg) center top no-repeat; position: relative; }



.main.wrapper{ max-width: 980px; width: 100%;  margin: auto; background: #fff;}





/* Content */
.main.wrapper article{ float: left; width: 73.50%;} 
article h2{  font-size: 24px; font-family: 'Yanone Kaffeesatz', sans-serif;}

h1.title, h2.subtitle, h3.subtitle{ font-family: 'Yanone Kaffeesatz', sans-serif; text-shadow: 1px 1px 1px #000; color: #BFE533; padding: 7px 10px; font-size: 26px;
    background: #0187b0; font-weight: normal;
background: -moz-linear-gradient(top,  #0187b0 0%, #024a51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0187b0), color-stop(100%,#024a51));
background: -webkit-linear-gradient(top,  #0187b0 0%,#024a51 100%);
background: -o-linear-gradient(top,  #0187b0 0%,#024a51 100%);
background: -ms-linear-gradient(top,  #0187b0 0%,#024a51 100%);
background: linear-gradient(to bottom,  #0187b0 0%,#024a51 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0187b0', endColorstr='#024a51',GradientType=0 );
}
h2.subtitle{ font-size: 23px; color: #fff;}

article .prod-item, .box-item{ padding: 5px; -webkit-box-shadow: 1px 1px 5px 3px #948F8F;box-shadow: 1px 1px 5px 3px #948F8F; margin-bottom: 20px;}
article .prod-item h2{ font-size: 25px; margin: 0;color: #840E13;}
article .prod-img, .box-img{ display: block; float: left; max-width: 150px; width: 20%; margin-right: 1.5%; }
article .prod-img img, .box-img img{ width: 100%; height: auto;}
article .prod-desc{ float: left; width: 42%;}
article .price-prod{ font-family: 'Yanone Kaffeesatz', sans-serif;  font-size: 18px;}
article .prod-price span{color: #A93C3C; font-weight: bold; }
.shippay{ width: 32%; float: right;}
.shipping{ float: left; margin-right: 2px; }
.shipping img{ max-width: 90px; height: auto;}
.payment{ float: right; text-align: center; font-size: 12px;}
article p img.responsive{ margin-right: 10px; }

article p.q{ color: #00774F;margin-bottom: 0;}
article p.a{ margin-top: 0;}
.box-item h3{ font-size: 20px;font-family: 'Yanone Kaffeesatz', sans-serif; margin: 0; }
form input.error, form textarea.error{ border: 1px solid #F00;}

/* Sidebar */
aside{float: right; width: 25.52%; border: 1px solid #01718D;max-width: 248px;margin: 17px auto 10px;}
.sidebar-content{ padding: 10px; }
aside h2{margin-top: 0;}
aside img.thumb{ /*max-width: 100px;*/}

footer.wrapper{ position: relative; max-width: 980px; width: 100%; margin: auto;border-top: 1px solid #ccc; padding-top: 10px;background: #CFF0F7;}
footer nav.footer{}
footer nav.footer ul{ margin: 0; padding: 0; list-style: none; display: block; text-align: center;}
footer nav.footer ul li{ display: inline-block;  text-align: center;}
footer #footer .copyright{ text-align: center; }
.mobile-footer{ display: none; background: #0A4659; position: fixed; bottom: 0; width: 100%;min-height: 20px; padding: 5px 0; font-family: 'Yanone Kaffeesatz', sans-serif; text-shadow: 1px 1px 1px #000;}
.mobile-footer a{ color: #fff; text-decoration: none; display: block; text-align: center; }
.mobile-footer .left{ float: left;}
.mobile-footer .right{ float: right;}
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 890px) {
  article .prod-desc{ width: 50%;}
  .shippay { width: 20%; }
  .shipping{ float: none; text-align: center;}
  .payment{ float: none; }

}

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

.header-container header .header-data #headerflash{ display: none; }
.header-container header nav{ position: absolute; top:0; display: block; width: 100%; margin: 0;}
.header-container header .header-data{ margin-top: 37px; }
.header-container header #menu{ display: block; }
.header-container header ul{ display: none; }
.header-container header ul li{ display: block;}
.header-container header ul li a{  
    color: #fff;
    padding: 9px 20px;
    text-align: left;
    text-decoration: none;
    font-weight: bold;
    background: #147290;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #098EB8;
    }
.header-container header ul li a:hover{ background: #1D83A3; }
.header-container header a{ text-decoration: none; color: #fff; text-shadow: 1px 1px 1px #373737;}
.main.wrapper article{ width: auto;} 
.main.wrapper article, aside{ padding: 10px; float: none;} 

article .prod-desc{width: 56%;}

aside{border: 1px solid #01718D;padding: 20px;width: 91%;max-width: 500px;margin: 0 auto 10px;}
aside img.thumb{ max-width: 100px;}
}

@media only screen and (max-width: 480px) {
    body {font: 14px/23px Helvetica Neue, Helvetica, Arial;}
    .header-container header .header-data{background: url(../images/banner-v2.jpg) center top no-repeat; }
    .header-container header .site-name{ width: 75%;margin-top: 22px; margin-left: 0; float: right;}
    
    article ul{ padding-left: 25px; }
    article table.responsive{ width: 90%; margin: auto;}
    article table.responsive td{ width: 100% !important; display: block; margin: auto;}
    h1.title{ font-size: 23px }
    article p img.responsive{ display: block; float: none; margin-right: 0; margin: auto; max-width: 460px;} 
    article blockquote{margin: auto 10px;}
    article p img{max-width:450px }
    article form input[type="text"], article form input[type="email"], article form textarea{ max-width: 480px; width: 100%;}

    article .prod-desc{width: 76%;}
    .shippay{ width: 100%;text-align: center;}
    .shipping{ float: none; text-align: center;display: inline-block;vertical-align: top; }
    .payment{ float: none; display: inline-block; text-align: center;}

    footer.wrapper{padding-bottom: 20px; }
    footer nav.footer ul{  }
    .mobile-footer{display: block;}
}

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

  h1.title, h2.subtitle, article .prod-item h2{ font-size: 20px }
  article h2{ font-size: 18px }
  article .prod-img{ float: none; margin: auto; width: auto;}
  article .prod-desc{ float: none; width: 95%;}
  article p img{max-width:300px }
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}