/*************************************************************************************************************************
Screen smaller than 680px
*************************************************************************************************************************/
@media screen and (max-width: 680px) {

  /* Overall */
  .container {margin: 20px auto; width: 90%; max-width: 90%; background: #fff;}
  .header {position: relative; padding-top: 20px; max-width: 100%; width: 100%; height: 160px; background: #fff url('images/header_bg.gif') repeat-y top center;}
  .section,
  .section-wide,
  .aside {clear: both; width: 92%; margin: 40px 4% 20px 4%;}
  .footer {clear: both; overflow: hidden; max-width: 100%; background: #ecfbfa url('images/footer_bg.gif') no-repeat top center; padding: 15px 0;}

  /* .header */
  .header h1,
  .header h5 {font-size: 30px; font-weight: 600; padding: 40px 0 0 0; text-align: center;}
  .header .header-title {color: #fff;}

  /* .nav */
  .mobile-nav {display: block; clear: both; width: 90%; margin: 0 auto; font-size: 1em; padding: 5px;}
  .nav ul {display: none;}

  /* .flexslider */
  .flexslider {width: 96%; margin: 20px auto; padding: 0; clear: both;}
  .flexslider .flexslides > li {list-style: none; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
  .flexslider .flexslides img {display: block; width: 100%; height: auto;}
  .flex-pauseplay span {text-transform: capitalize;}

  /* Clearfix for the .slides element */
  .flexslides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
  html[xmlns] .flexslides {display: block;}
  * html .flexslides {height: 1%;}

  /* No JavaScript Fallback */
  /* If you are not using another script, such as Modernizr, make sure you
  * include js that eliminates this class on page load */
  .no-js .flexslides > li:first-child {display: block;}

  /* .flexslider theme */
  .flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
  .flexslider .flexslides {zoom: 1;}
  .flexslider .flexslides > li {position: relative;}
  .flexslider .flexslides li img {width: 100%; height: auto;}
  .flex-container {zoom: 1; position: relative;}

  .flex-caption {background: #000; zoom: 1;}
  .flex-caption h4 {margin: 0;}
  .flex-caption {position: absolute; bottom: 0; width: 96%; z-index: 8; padding: 2%; opacity: .8; text-align: left !important;}

  .flex-direction-nav {display: block; list-style: none;}
  .flex-direction-nav li a.flex-next {position: absolute; right: 0; top: 30%; display: block; z-index: 100; width: 40px; height: 80px; background: url('images/slider_nav.png') no-repeat -40px 0; text-indent: -9999px; cursor: pointer;}
  .flex-direction-nav li a.flex-prev {position: absolute; left: 0; top: 30%; display: block; z-index: 100; width: 40px; height: 80px; background: url('images/slider_nav.png') no-repeat 0 0; text-indent: -9999px; cursor: pointer;}

  /* .footer */
  .footer-inner {overflow: hidden; padding: 10px 0; clear: both; border-top: 2px dotted #90dcdc; margin: 0 5%; font-family: 'Josefin Slab', serif; font-weight: 400;}
  .footer-inner ul {list-style: none; font-size: 1.6em; color: #777;}
  .footer-inner ul li {padding: 5px 0;}
  .footer-inner .footer-twitter {background: url('images/footer_icons.gif') no-repeat 0 0; padding: 2px 0 2px 32px; margin-right: 40px;}
  .footer-inner .footer-facebook {background: url('images/footer_icons.gif') no-repeat 0 -44px; padding: 2px 0 2px 32px; margin-right: 40px;}
  .footer-inner .footer-email {background: url('images/footer_icons.gif') no-repeat 0 -88px; padding: 2px 0 2px 32px; margin-right: 40px;}
  .footer-inner .footer-phone {background: url('images/footer_icons.gif') no-repeat 0 -132px; padding: 2px 0 2px 32px;}
  .footer-inner .footer-twitter:hover {background-position: 0 -176px;}
  .footer-inner .footer-facebook:hover {background-position: 0 -220px;}
  .footer-inner .footer-email:hover {background-position: 0 -264px;}
  .footer-inner .footer-phone:hover {background-position: 0 -308px;}
  .footer-inner a {color: #777;}
  p.footer-copy {clear: both; text-align: center; font-size: 0.9em; color: #9a9a9a; overflow: hidden; padding: 15px 0; margin: 0;}
  p.footer-copy a {color: #9a9a9a;}
  p.footer-copy a:hover {color: #71d0d0;}

  /* Shortcodes */
  .left,
  .right,
  .col1,
  .col2,
  .col3 {clear: both; line-height: 1.8em;}

  /* Jigoshop */
  .images,
  .summary {clear: both; float: none !important;}

  /* Jigoshop */
  ul.products li {overflow: hidden; margin-bottom: 30px;}
  ul.products li .price {float: none; text-align: left;}
  ul.products li .onsale {margin: 0;}

  /* WooCommerce */
  ul.products li.product a,
  .cart .button, .cart input.button {text-shadow: none !important; border: none;}
  .col2-set {}
  .col2-set .col-1 {clear: both; width: 100% !important;}
  .col2-set .col-2 {clear: both; width: 100% !important;}
  .product .images,
  .product .summary {clear: both; width: 100% !important;}
  div.product .woocommerce_tabs ul.tabs li a,
  #content div.product .woocommerce_tabs ul.tabs li a,
  div.product .woocommerce_tabs ul.tabs li.active a,
  #content div.product .woocommerce_tabs ul.tabs li.active a {font-size: 0.8em;}
  
  .woocommerce ul.products li,
  .woocommerce-page ul.products li {clear: both !important; width: 100% !important;}

  .woocommerce table.cart .product-thumbnail,
  .woocommerce-page table.cart .product-thumbnail,
  .woocommerce #content table.cart .product-thumbnai