/*************************************************************************************************************************
Screen smaller than 680px
*************************************************************************************************************************/
@media screen and (max-width: 680px) {

  /* Overall */
  .container {margin: 0 auto; padding: 30px 0; width: 90%; overflow: hidden; background: #fff;}
  .header {clear: both; padding-bottom: 20px;}
  .section,
  .section-wide {clear: both; width: 100%; margin: 0 0 30px 0;}
  .aside {clear: both; font: 400 italic 1.1em 'Old Standard TT', cursive; margin: 0;}
  .aside-right {display: none; clear: both; width: 100%; font: 400 italic 1.1em 'Old Standard TT', cursive; margin: 0 0 30px 1%;}
  .footer {clear: both; overflow: hidden; margin-top: 30px; float: right; width: 100%; color: #777;}

  /* .header */
  .header h1,
  .header h5 {font-size: 2em; font-style: normal; text-transform: uppercase; text-align: center; margin: 20px 0 0 0;}
  .header-title {display: block; margin: 0 auto 20px auto;}
  .header-desc {text-align: center; color: #ccc; margin-bottom: 40px; font-size: .9em;}

  /* .nav */
  .tinynav {display: block; width: 100% !important; background: #fff;}
  .nav {display: block; clear: both; margin-bottom: 20px;}
  .nav ul {display: none;}

  /* .nivoSlider */
  .nivoSlider-wrapper {width: 100%; margin-bottom: 40px; float: right;}

  /* .article */
  .article .post-meta {clear: both; color: #868686; border-bottom: 1px dotted #868686; padding-bottom: 10px;}

  .post-footer {clear: both; padding: 0; margin: 0;}
  .post-footer h5 {margin-top: 20px; font-size: 2em;}
  .post-footer ul {margin: 0; list-style: none;}
  .post-footer ul li {margin: 5px 0;}

  .post-related-title {color: #868686; font-weight: 400; font-size: 1em !important; text-transform: uppercase;}
  ul.post-related {list-style: none !important; margin: 0 !important; border-bottom: 1px dotted #868686; overflow: hidden; padding-bottom: 10px;}
  ul.post-related li {float: left; width: 30%; margin-right: 10px; font-size: .9em;}

  ul.post-info-meta {color: #888; clear: both; margin: 0 !important;}
  ul.post-info-meta li {list-style: none; float: left;}

  .footer-navi {clear: both; overflow: hidden; margin: 0 0 20px 0 !important; list-style: none !important;}
  .footer-navi li.previous {float: left;}
  .footer-navi li.next {float: right;}

  /* .side-widget */
  .left-widget {display: none;}

  /* .footer */
  p.footer-copy {clear: both; font-size: .9em; overflow: hidden; padding: 20px 0; margin: 0 auto; border-top: 1px solid #eee;}
  .footer-credit {display: block; width: 55px; height: 11px; background: url('images/footer_credit.png') no-repeat center; text-indent: -9999em; float: right;}

  /* Shortcodes */
  .left,
  .right,
  .col1,
  .col2,
  .col3,
  .col3-2,
  .col3-1,
  .col4-1,
  .col4-2,
  .col4-3,
  .col4-4,
  .col5-1,
  .col5-2,
  .col5-3,
  .col5-4,
  .col5-5 {clear: both; margin-bottom: 10px; line-height: 1.8em;}

  .sc-slide {position: relative; overflow: hidden; width: 100%; margin: 0 0 20px 0; padding: 0;}

  /* 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 */
  .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: 95% !important; float: none !important; margin: 0 auto 30px auto !important;}

  .woocommerce table.cart .product-thumbnail,
  .woocommerce-page table.cart .product-thumbnail,
  .woocommerce #content table.cart .product-thumbnail,
  .woocommerce-page #content table.cart .product-thumbnail {display: none;}
  
  .woocommerce table.cart .product-remove,
  .woocommerce-page table.cart .product-remove,
  .woocommerce #content table.cart .product-remove,
  .woocommerce-page #content table.cart .product-remove {display: none;}

  .woocommerce table.cart td.actions .button.alt,
  .woocommerce-page table.cart td.actions .button.alt,
  .woocommerce #content table.cart td.actions .button.alt,
  .woocommerce-page #content table.cart td.actions .button.alt {margin-top: 10px;}

}

/*************************************************************************************************************************
Screen between 681px and 1060px
*************************************************************************************************************************/
@media screen and (min-width: 681px) and (max-width: 1060px) {

  /* Overall */
  .container {margin: 0 auto; padding: 30px 0; width: 90%; overflow: hidden; background: #fff;}
  .header {clear: both;}
  .section {float: right; width: 50%; margin: 0 1%;}
  .section-wide {float: right; clear: both; width: 73%; margin: 0;}
  .aside {width: 22%; font: 400 italic 1.1em 'Old Standard TT', cursive; margin: 0 1% 30px 0; position: fixed;}
  .aside-right {float: right; clear: right; width: 20%; font: 400 italic 1.1em 'Old Standard TT', cursive; margin: 0 0 30px 1%;}
  .footer {clear: both; overflow: hidden; margin-top: 30px; float: right; width: 73%; color: #777;}

  /* .header */
  .header h1,
  .header h5 {font-size: 2.4em; font-style: normal; text-transform: uppercase; text-align: center; margin: 20px 0 0 0;}
  .header-title {display: block; margin: 0 auto 20px auto;}
  .header-desc {text-align: center; color: #ccc; margin-bottom: 40px; font-size: .9em;}

  /* .nav */
  .tinynav {display: block;}
  .nav {position: relative;}
  .nav ul {display: none; list-style: none;}
  .nav a {display: block; padding: 2px 15px;}
  .nav a:hover {}

  .nav .current_page_item a,
  .nav .current-menu-item a {background: #eee;}
  .nav .current_page_item li a,
  .nav .current-menu-item li a {background: #fff; color: #525252;}