/*
	colors:

	Tyler's new:
	007b64
	00975f
	435f68

	edcec6
	b2c6b8
	758970



	Tactica old:
	wine: #930053 
	charcoal: #212529;

*/

:root {
  --gutter: 15px;
}

html, body {
    margin: 0;
    padding: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*
	consistent font-sizing
*/

h1, h2, h3, h4, h5, h6 {
	/*font-family: mrs-eaves, serif;
	font-weight: 700;*/
font-family: adobe-caslon-pro, serif;
font-weight: 400;
	font-style: normal;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
	/*font-family: mrs-eaves, serif;
	font-weight: 700;*/
	font-family: adobe-caslon-pro, serif;
	font-weight: 400;
	font-style: italic;
}

.ttu {text-transform: uppercase;}

.content {padding: 15px 20px;}

/* Basic anchor formatting */
a {color: #930053;}
a:link, a:visited, a:active {text-decoration: none; color: #930053;}
a:hover {text-decoration: underline; color: #930053;}



/* images */
img {width: 100%; height: auto;}



/* Generic global nav items */
ul.nav {
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.nav li {
	display: inline-block;
	margin-right: 15px;
}
ul.nav li:last-child {
	margin-right: 0;
}
ul.nav li a {color: #212529;}
ul.nav li a:hover {color: #212529; text-decoration: none;}


/*
	message banner at top
*/
.header-banner {
	background-color: #383C3E;
	color: #fff;
    height: 32px;
    overflow: hidden;
    position: relative;
    z-index: 1000;
}
.header-banner div {
	text-align: center;
	height: 32px;
	line-height: 30px;
    overflow: hidden;
    font-size: 12px;
    letter-spacing: .65px;
}
.header-banner a {color: #fff;}
@media only screen and (max-width: 640px) {
  .header-banner, .header-banner div {
    height: auto;
  }
  .header-banner div {
  	padding: 8px 12px;
  	line-height: 18px;
  }
}

/*
	Nav & branding
*/

.top-nav {
	display: flex; flex-direction: row; justify-content: space-between; align-items: center;
	box-shadow: 0 1px 5px rgb(0 0 0 / 15%);
	z-index: 1000;
	position: relative;
	background: #fff;
}
.mobile-nav-icons {order: -1;}
.top-nav img {width: 100%; max-width: 120px; vertical-align: text-bottom;}

.btn-search {
	display: inline-block;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
    border: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    vertical-align: bottom;
}
.btn-search:focus {outline: none;}
svg.icon-search {
	fill: currentColor;
	color: #212529;
}

.btn-hamburger {
	display: inline-block;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
    border: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    vertical-align: bottom;
}
.btn-hamburger:focus {outline: none;}
svg.icon-hamburger {
	fill: currentColor;
	color: #212529;
}

.btn-close-nav {
	display: inline-block;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    vertical-align: bottom;
}
.btn-close-nav:focus {outline: none;}
svg.icon-close {
	width: 36px;
	height: auto;
	fill: currentColor;
	color: #fff;
}






/* mobile nav menu */
.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    z-index: 1000000;
}
.nav-container.visible {
	visibility: visible;
}
svg {vertical-align: bottom;}
.close-menu {
	position: absolute;
    will-change: opacity;
    height: 100%;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
	background-color: rgba(0,0,0,.8);
	-webkit-transition: opacity 250ms ease-in-out;
    -moz-transition: opacity 250ms ease-in-out;
    -ms-transition: opacity 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    opacity: 0;
}
.close-menu.opaque {
	opacity: 1;
}
.close-menu button {
	position: absolute;
	width: 36px;
	height: 36px;
    right: calc(10vw - 18px);
    top: 20px;
}

.nav-menu {
	
    min-width: 265px;
    max-width: calc(100vw - 50px);
    width: 80vw;
    height: 100%;

    background: #fff;

    position: fixed;
    display: flex;
    flex-direction: column;
    
    box-shadow: 4px 0 10px 0 rgb(0 0 0 / 40%);
    will-change: transform;

    webkit-transition: transform 250ms ease-in-out;
    -moz-transition: transform 250ms ease-in-out;
    -ms-transition: transform 250ms ease-in-out;
    -o-transition: transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out;

    transform: translateX(-100%);
}
.nav-menu.translateX {
	transform: translateX(0);
}


@media (min-width: 768px) {
	.nav-menu {
		max-width: 365px;
	}
	.close-menu button {
		left: 380px;
    }
}




.nav-menu-wrap {
	padding: 0 15px;
	height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
	font-weight: 400;
}

/* Add media query for tablets and up */
.nav-menu-wrap::-webkit-scrollbar { width: 3px; }
.nav-menu-wrap::-webkit-scrollbar-track { background: #f1f1f1; }
.nav-menu-wrap::-webkit-scrollbar-thumb { background: #888; }
.nav-menu-wrap::-webkit-scrollbar-thumb:hover { background: #555; }


.acct-nav-intro {font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #ddd; margin: 20px 15px 0px 15px;}


.nav-menu ul {
	list-style: none;
	margin: 0;
	padding: 20px 0 0 0;
	font-weight: 500;
}
.nav-menu ul li {
	margin: 0;
	padding: 0;
}
.nav-menu ul.main-nav {
}

.nav-menu ul.main-nav > li {
	padding: 0 0 10px 0;
	/*border-bottom: 1px solid #ddd;*/
	margin: 0 0 10px 0;
	font-size: 0.9rem;
}
.nav-menu ul.main-nav > li:last-child {
	border-bottom: 0;
}

.nav-menu ul ul {
	padding: 0 0 0 15px;
	border-left: 1px solid #ddd;
	margin: 10px 0 0 10px;
}
.nav-menu ul ul li {
	padding: 0 0 5px 0;
	margin: 0 0 5px 0;
	font-size: 0.8rem;
}

.main-nav a {
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #212529;
}

.menu-scroll {
	position: relative;
    overflow-x: hidden;
    height: 100%;
    display: flex;
    flex-shrink: 10;
    overflow-y: scroll;
}








/* SEARCH */
.search-container {
	transform: translateY(-100%);
    position: absolute;
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 5px rgb(0 0 0 / 15%);

    will-change: transform;

    webkit-transition: transform 250ms ease-in-out;
    -moz-transition: transform 250ms ease-in-out;
    -ms-transition: transform 250ms ease-in-out;
    -o-transition: transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out;
}
.search-container.show {
	transform: translateY(0);
}
.search-wrap {width: 100%; max-width: 1200px; margin: 0 auto;}
.search-inner {padding: 15px;}
.searchbox {border: 1px solid #ddd; border-radius: 1rem; line-height: 1rem; font-size: .85rem; padding: 5px 1rem; margin: 0 30px 0 0; display: block;}
.searchbox input {width: 100%; border: 0;}
.searchbox input:focus, .searchbox input:focus-within {outline: none;}


.search-inner .btn-close {

}
.search-inner .btn-close {
	display: inline-block;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    vertical-align: bottom;
    position: absolute;
    right: 10px;
    top: 18px;

}
.btn-close:focus {outline: none;}
.search-inner svg.icon-close {
	width: 24px;
	height: auto;
	fill: currentColor;
	color: #212529;
}




/*
	Page specific
*/
.home-main-cta {
	z-index: 1;
	background: #D3EAD0;
	text-align: center;
	padding-bottom: 60px;
	margin-bottom: 20px;
}
.home-main-cta h1 {
	font-size: 2.75rem;
    line-height: 1.25;
    letter-spacing: -1px;
    display: inline-block;
    margin: 5rem 0 3rem 0;
}
.home-main-cta img {
	max-width: 720px;
    display: block;
    margin: 0 auto;
}
.home-main-cta .byline {
	text-transform: uppercase;
	margin: 40px 0;
	font-weight: 500;
	font-size: 0.85rem;
}

@media (min-width: 768px) {
	.home-main-cta h1 {
		font-size: 4.5rem;
	    line-height: 1.25;
	    letter-spacing: -1px;
	    display: inline-block;
	    margin: 5rem 0 3rem 0;
	}	
}



.cta-cats {
	display: flex;
	flex-wrap: wrap;
	padding: calc(var(--gutter) / 2);
}
.cta-cats .col {
	width: 50%;
	text-align: center;
	font-size: 0.85rem;
}
.cta-cats .inner {
	padding: calc(var(--gutter) / 2);
}
@media (min-width: 768px) {
	.cta-cats .col { width: 25%; }
}





.btn-cta {
	max-width: 60%;
	display: block;
	padding: 10px 40px;
	text-align: center;
	margin: 0 auto;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 0.9rem;

	transition: color 250ms ease-in-out;
	transition: background 250ms ease-in-out;
}
.btn-cta, .btn-cta:link, .btn-cta:active, .btn-cta:visited {
	background: #fff;
	color: #212529;
}
.btn-cta:hover {
	background: #212529;
	color: #fff;
	text-decoration: none;
}
@media (min-width: 768px) {
	.btn-cta {
		max-width: 300px;
	}
}

.btn-cta-inv, .btn-cta-inv:link, .btn-cta-inv:active, .btn-cta-inv:visited {
	background: #212529;
	color: #fff;
}
.btn-cta-inv:hover {
	background: #fff;
	color: #212529;
	text-decoration: none;
}





/* best sellers */
.best-sellers {
	max-width: 1200px;
	 margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.best-sellers .col {
	width: 23%;
	vertical-align: middle;
	align-content: center;
	align-items: center;
	display: flex;
}
.best-sellers img {max-width: 100%; height: auto; vertical-align: middle;}










/* product grid */
.product-grid {display: flex; justify-content: space-between; flex-wrap: wrap;}
.product-grid .product-grid-item {width: 50%;}
.product-grid .product-grid-item .inner {
	padding: 15px;
}






/* olark fixes */
.olark-launch-button:focus, .olark-launch-button:focus-within {outline: none !important;}
#olark-wrapper .olark-launch-button-wrapper .olark-button-focus-wrapper:focus-within {
	background: transparent !important;
	padding: 0 !important;
}
body .olark-launch-button-wrapper {
    z-index: 999999 !important;
}







.footer {
	background: #212529;
	color: #f0f0f0;
	font-size: 0.8rem;
	padding: 20px 20px 80px 20px;
}

.footer .col {
	padding-bottom: 10px;
    border-bottom: 1px solid #c0c0c0;
    margin-bottom: 10px;
}
.footer .col:last-child {
	padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
}

@media (min-width: 768px) {
	.footer .col {
		padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
	}
	.footer-inner{
		max-width: 1200px; margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.footer .col {
		width: 23%;
	}
}

.footer ul {
	list-style: none;
	margin: 0 0 10px 0;
	padding: 0;
}
.footer a, .footer a:active, .footer a:visited, .footer a:hover, .footer a:link {
	color: #f0f0f0;
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}

.social-icons {text-align: center;}
.social {display: inline-block; margin: 25px 25px 15px 0px;}
.social:last-child {margin-right: 0;}
.social svg {width: 22px; height: auto; max-height: 22px; vertical-align: top;}

.footer .legal {font-size: 0.7rem;max-width: 1200px; text-align: center; margin: 30px auto;}


.footer input, .footer button {
	border: 0;
    padding: 5px;
    font-size: 0.75rem;
    border-radius: 2px;
    background: #f0f0f0;
}
.footer button {
	padding: 5px 15px;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
}




.separator-double {
	width: 100%;
	margin: 10px 0;
	border-top: 1px solid #b2c6b8;
	border-bottom: 1px solid #b2c6b8;
	padding: 1px 0;
}

.separator-single {
	width: 100%;
	margin: 10px 0;
	border-top: 1px solid #b2c6b8;
}

/*

007b64
	00975f
	435f68

	edcec6
	b2c6b8
	758970

*/

.product-name {
	color: #303339;
	letter-spacing: 0.5px;
	font-weight: bold;
	font-size: 14px;

}
.price {
	color: #74767A;
	font-size: 12px;
}



.category {
	position: relative;
	margin-bottom: 35px;
}
.cat-title {
	position: absolute;
	background: #fff;
	bottom: 25px;
	padding: 12px 15px 5px 15px;
	
	font-family: adobe-caslon-pro, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.5rem;
    min-width: 35%;
    text-align: center;
}


.blog-listing {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}

.blog-listing li {
	margin-bottom: 20px;
}
.blog-listing li .date {
	font-size: 0.75rem;
	font-style: italic;
	color: #74767A;
}