/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {		
		
		section.hh-club input.field {width: 65% !important;}
		
		section.hero div.cover.layout div.content-block.one {
			width: 100% !important;
			float:left;
		}
		
		section.hero div.cover.layout.four div.content-block.one, section.hero div.cover.layout div.content-block.two, section.hero div.cover.layout.four div.content-block.three {
			display: none !important;
		}
		section.hero div.cover.layout.four div.content-block.two  {
			width: 100% !important;
			display: block !important;
			float: left;
			margin: 0 !important;
		}
		
		div.popup-video {width: 639px !important;}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
		header section.upper  div.six.columns {
		   display: none !important;
		}
		
		header section.upper  div.five.columns {
		   width: 47% !important;
		}
		
		header section.lower nav.main-menu.desktop ul li {
		    padding-left: 12px !important;
		    padding-right: 12px !important;
		}
		
		header section.lower nav.main-menu.desktop.fixed {
			display: none !important;
		}
		
		header section.lower nav.main-menu ul li div.subcategory {
		    left: -12px !important;
		}
		
		section.hero a.cover img {
		    left: 50% !important;
		    margin-left: -900px !important;
		    width: 1800px !important;
		}
		
		section.hero div.featured {
			bottom: -50px !important;
		}
		
		section.hero div.featured div.box {
			width: 768px !important;
		}
		
		section.hero div.featured div.box div.upper div.feature {
		    width: 215px !important;
		}
		
		section.hero div.featured div.box div.upper div.feature.three {
			 width: 216px !important;
		}
		
		section.hero div.featured div.box a.feature {
		    width: 215px !important;
		    min-height: 80px !important;
		}
		
		section.hero div.featured div.box a.feature img {
			width: 60px; !important;
		}
		
		section.hero div.featured div.box a.feature h2 {
			font-size: 14px !important;
			line-height: 16px !important;
		}
		
		body.index section.intro {
			margin-top: 100px !important;
		}
		
		nav.collection-nav div.filter:hover ul{
			padding: 10px !important;
			left: -10px !important;
			width: 100% !important;
		}
		
		section.product-options div.monogram label span {
			display: none;
		}
		
		section.cart-total input.checkout.button {
			width: 200px !important;
		}
		
		section.cart-total p.shipping {
			font-size: 11px !important;
			line-height: 16px !important;
		}
		
		div.addthis_toolbox.addthis_default_style {
			padding: 20px 0 0 0 !important;
		}
		
		div.popup-video {width: 639px !important;}
	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
		section.hh-club {
			display: none !important;
		}
		
		header {
			padding: 10px 0;
			margin-bottom: 0 !important;
			height: auto !important;
		}		
		
		header section.lower, header section.upper {
			display: none !important;
		}	
		
		header h1 {
			position: relative !important;
			top: 5px !important;
			margin-bottom: 10px !important;
		}
		
		header h1.logo a {
			width: 240px !important;
			height: 51px !important;
			background-size: 220px 47px !important;
		}
		
		header section.mobile {
			display: block !important;
		}
		
		section.hero {
		    margin-top: -30px !important;
		}
		
		section.hero {
			min-height: 290px !important;
			height: 290px !important;
		}
		section.hero .cover img {
		    left: 50% !important;
		    margin-left: -475px !important;
		    width: 950px !important;
		}
		
		body.collection section.hero, body.product section.hero {
			margin-bottom: 30px;
		}
		
		body.collection section.intro div.container {
			border-top: none !important;
		}
		
		section.hero div.featured {
			display: none; !important;
		}
		
		body.index section.intro {
			margin-top: 40px !important;
		}
	
		body.collection section.intro div.container {
		    padding-top: 0 !important;
		}
		
		section.product-grid a.button {
			width: 220px !important;
			font-size: 14px !important;
			padding: 10px 0px !important;
		}
		
		nav.collection-nav {
			display: none;
		}
		
		nav.collection-nav div.filter {
			display: none !important;
		}
		
		section.product-images {
			margin: 0 0 15px 0 !important;
		}
		
		section.product-options div.selector-wrapper {
			width:  99% !important;
		}
		
		section.product-options div.selector-wrapper select {
			width:  98% !important;
			margin-bottom: 15px !important;
		}
		
		section.product-options div.selector-wrapper span.pointer {
		    right: 11px !important;
		}
		
		div.addthis_toolbox.addthis_default_style {
			padding: 20px 0 0 0 !important;
		}
		
		section.product-features div.feature {
			margin: 15px 0;
		}
		
		section.cart-contents header {
			display: none;
		}
				
		section.cart-contents div.columns {
			float: left !important;
			width: 50% !important;
		}
		
		section.cart-contents div.columns.info, section.cart-contents div.columns.subtotal, section.cart-contents div.one.column, section.cart-contents div.columns.remove, section.cart-contents div.columns.total {
			padding-left: 20px !important;
			width: 40% !important;
			float: right !important;
			text-align: left !important;
			margin-bottom: 10px;
			clear: right;
		}

		section.cart-contents div.columns.subtotal {
			display: none !important;
		}
		
		section.cart-total div.columns {
			clear: both !important;
			width: 100% !important;
		}
		
		section.cart-contents div.row.items div.total h3.price {
		    font-weight: 400 !important;
		    margin-bottom: 10px 0 0 0 !important;
		}
		
		section.cart-total div.order-summary {
			text-align: left !important;
			padding-top: 10px;
		}
		
		section.cart-contents div.row.items div.remove{
			padding-bottom: 20px !important;
		}
		
		section.article-grid a {
			margin-bottom: 30px !important;
		}
		
		article.main h2.subtitle {
			font-size: 10px !important;
		}
		
		body.page article.main h1 {
		    padding-top: 0 !important;
		}
		
		body.page article.main input.field, body.page article.main textarea.field {
		    width: 95% !important;
		}
		
		body.page article.main table {
			width: 98% !important;
		}
		
		body.page article.main table th,body.page article.main table td  {
			padding: 5px !important;
		}
		
		footer section.upper nav.shop-menu ul li {
			width: 100% !important;
		}
		
		footer section.upper {
			padding-top: 30px !important;
		}
		
		footer section.upper ul {
			margin-bottom: 30px !important;
		}
		
		section.customer-accounts {
			padding-top: 0 !important;
		}
		
		section.customer-accounts h1 span a {
			float: left !important; 
			display: block;
		}
		
		section.customer-accounts .customer_address_table td.label {
		    width: auto !important
		}
		
		section.customer-accounts .customer_address_table input[type="text"], #customer input[type="text"], #customer input[type="password"], #customer input[type="email"], #create-account input[type="text"], section.customer-accounts .customer_address_table select {
			width: 90% !important;
		}
		
		section.customer-accounts .actions span {
			display: block; 
			padding-bottom:10px;
		}
		
		section.product-options div.selector-wrapper{
			max-width: 280px !important;
		    width: 280px !important;
		}
		
		section.product-options div.selector-wrapper select {
			max-width: 300px !important;
		    width: 300px !important;
		  	background: #ffffff url(pointer-down.png) no-repeat 92% 5px !important;
		}
		
		section.product-options input.monogram {
			width: 271px !important;
		}
      
      #our-story .half {
       	float: none !important;;
        width: 100% !important;
      }
      #our-story .the-boxer { height: 295px !important; } 
	  .our-hero .content-area, .other-prods .content-area, .ambassador .content-area {
      	margin-top: 0 !important;
        padding: 30px 0;
      }
      #our-story .other-products {
      	background-position: left center !important;
      }
      #our-story .hero.image-strip {
       	height: 192px !important;
        min-height: 100px !important;
        margin-top: 30px !important;
      }
      #our-story .hero.cad {
       	height: 132px !important;
        min-height: 100px !important;
      }
		#our-story .cad p {
			margin: 0 10% !important;
			width: 80% !important;
			font-size: 14px !important;
			line-height: 24px !important;
			top: 25% !important;
		}
		
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		footer span.hares {
			margin: 0 41% !important;
		}
		
		div.popup-video {width: 337px !important;}
		#our-story .cad p { top: 35% !important; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		
		body.collection section.hero div.cover img.hares, body.product section.hero div.cover img.hares  {
			display: none;
		}
		
		section.cart-contents div.row div.info h2 {
			margin-bottom: 0 !important;
		}
		
		section.cart-contents div.row div.info p {
			display: none;
		}
		
		footer span.hares {
			margin: 0 30% !important;
		}
		
		div.popup-video {width: 265px !important;}
	
	}
	
	/* Additional - Large Screens beyond 1280px */
	@media only screen and (min-width: 1281px) {
		
		header section.lower nav.main-menu.desktop.fixed ul li {
		  	padding: 0 39px !important;
		}
	
		header section.lower nav.main-menu.fixed ul li:hover div.subcategory {
			left: 25px !important;
		}
		
		section.hh-club input.field {width: 80% !important;}
		
		section.product-options h2.price {
			padding: 30px 0 !important;
		}

		div.popup-video {width: 835px !important;}
	
		footer span.hares {margin: 0 47% !important;}
		
	}
	
	/* Additional - iPad Portrait */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : landscape) {
		
		header section.upper div.six.columns {
			display:none;
		}
		
		header section.upper  div.five.columns {
			 width: 47% !important;
		}
	}