/*
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}

nav ul, nav li { margin: 0; }
nav ul, ul { list-style:none; }
*/
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span13, .span14, .span15, .span16, .span17, .span18, .span19, .span20{
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.col{
  margin-left: 1.4%;
}

.col:first-child {
  margin-left:0;
}

.span1{
  width: 3.67%;

}
.span2{
  width: 8.74%;

}
.span3{
  width: 13.81%;

}
.span4{
  width: 18.88%;

}
.span5{
  width: 23.95%;

}
.span6{
  width: 29.02%;

}
.span7{
  width: 34.09%;

}
.span8{
  width: 39.16%;

}
.span9{
  width: 44.23%;

}
.span10{
  width: 49.3%;

}
.span11{
  width: 54.37%;

}
.span12{
  width: 59.44%;

}
.span13{
  width: 64.51%;

}
.span14{
  width: 69.58%;

}
.span15{
  width: 74.65%;

}
.span16{
  width: 79.72%;

}
.span17{
  width: 84.79%;

}
.span18{
  width: 89.86%;

}
.span19{
  width: 94.93%;

}
.span20{
  width: 100%;
  margin-left: 0;
}
.prod.span5 {
  width: 22.95%;
  margin: 1%;
  margin-bottom: 30px;
}

.t3-mainbody body{
  font-size: 87.5%;
  color: #252e35;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5em;
  background: #f6f6f6;
}

.t3-mainbody h1{
    font-size: 1.714285714em; /* 24 / 14 */
    line-height: 1.5em; /* 21 / 14 */
}

.t3-mainbody h2{
  font-size: 1.5em; /* 21 / 14 */
  line-height: 1.5em; /* 21 / 14 */
}

.t3-mainbody p{
    font-size: 1em; /* 14 / 14 */
    line-height: 1.5em; /* 21 / 14 */
    margin-bottom: 1.5em; /* 21 / 14 */
}

#container, .inner{
  margin: 0 auto;
}

header{

}

.t3-mainbody header h1{
  margin: 7px 0 0 0;
}

.t3-mainbody #container{
  clear: both;
  padding-top: 20px;
}

.t3-mainbody .alt{
  color: #fff;
  color: rgba(255,255,255, 0.9);
  letter-spacing: 0.05em;
}

/* NAVIGATION */
/*
nav{
  margin: 7px 0 7px 0;
}

nav ul{
  text-align: right;
  overflow: auto;
  width: 100%;
}

nav ul li{
  margin: 0 0 0 0;
  text-align: center;
  overflow: auto;
  float: left;
  width: 33%;
}

nav a{
  text-decoration: none;
  margin: 0;
  display: block;
  padding: 7px 0 7px 5%;
  margin: 0 0 0 4%;
  background-color: rgba(255,255,255,0.1);
}
*/

/* MEDIA QUERIES */

/* Responsif */
@media screen and (min-width: 768px){
  #container, .inner{
    width: 90%;
      max-width: 800px;
      margin: auto;
    padding: 0 5% 0 5%;
  }
}
@media screen and (max-width: 768px){
  nav .span7{
    width: 100%;
  }

  .span13, article{
    width: 100%;
  }

  .span7, aside{
    width: 100%;
    margin-left: 0;
  }

  #container, .inner{
    width: 90%;
    padding: 0 5% 0 5%;
  }

    .span2{
    width: 100%;
  }
  #nav ul li {
  display: block !important;
}
#nav-top{
  display: block !important;
}
#nav{
  padding: 0 !important;
  height: 0;
  overflow: hidden;
}
}

@media screen and (max-width: 480px){
  nav ul li{
    width: 100%;
    margin: 0 0 5px 0;
  }

  nav a{
    margin: 0;
    padding: 14px 0 14px 0;
  }

}

/* Custom Breakpoints */

@media screen and (max-width: 414px) {
     .span2{
    width: 100%;
  }

}

@media screen and (max-width: 736px) {
  .prod.span5{
    width:47%;
      margin: 1.5%;
    }
    /***************/
    header#mTopBar{
      background: #FFF !important;
    }
    #main-img {
      margin-top: 50px !important;
      padding: 0 20px;
  }
  form#shopcart{
    background: #FFF;
  }
    #shop-cart{
      position: relative !important;
      top:0 !important;
      left: 0 !important;
      margin: auto;
      width: auto;
      padding: 0 20px;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
    }
    #content {
      z-index: 0;
      margin-top: 0 !important;
  }

}

/* Micro Clearfix */

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}
