@charset "utf-8";
/* CSS Document */

	html, body {font-family: "Lato", sans-serif;}
  a {font-size: inherit; letter-spacing: inherit; font-family: "Lato", sans-serif;}
  a:hover {font-size: inherit; letter-spacing: inherit; text-decoration: none; font-family: "Lato", sans-serif;}

	.cat-page-top {width: 100%; margin: 1em 0; padding: 1.2em 0; background-color: #fff; border-radius: 5px;}
	.cat-page-top hr {margin: 30px 0 20px; padding: 1px; background: #8FA8BF; width: 95%;}
	.cat-page-top input {font-size: .9em; margin: 0 0 0 .5rem;}
	#searchResultsCount {font-size: .8em; font-weight: bold; color: #7f0000;}
			
	.cat-page-top-l {display: block; width: 95%; margin: 0;}
	.cat-page-top-l h1 {font-size: 1.2em; font-weight: bold; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; color: #555; padding: 0 4rem; margin: 0; text-shadow: 2px 2px 4px #BFBFBF;}
	.cat-page-top-l h2 {font-size: .9em; letter-spacing: 2px; color: #666; margin: .5em 0;}
	.cat-page-top-l h3 {font-size: .9em; letter-spacing: 2px; font-weight: bold; line-height: 1.6; color: #777; margin: 0 2rem;}
	.cat-page-top-l p {font-size: 90%; text-align: center;}
	.cat-page-top-l li {font-size: 90%; text-align: left;}
	.cat-page-top-r {display: block; width: 95%; margin: 1.5em 0;}
	.cat-page-top-r img {width: 80%;}
	.cat-page-top-r p {font-size: 1.2em; font-weight: bold; letter-spacing: 1px; line-height: 1.8; text-align: center;}
	.cat-page-top-r a {margin: 0;}

	.sm-msg {display: block;}
	.sm-msg h4 {font-size: .9em; letter-spacing: 2px; font-weight: bold; line-height: 1.6; color: #555; text-shadow: 2px 2px 4px #BFBFBF; margin: 0 0 .5em;}
	.sm-msg h5 {font-size: .8em; letter-spacing: 2px; font-weight: bold; color: #777; margin: 0 3rem 3em;}
	.lg-msg {display: none;}
	
	.nav-bar {display: none;}
	.cart-icon {display: none;}

	.mobile-shop-menu {display: inline-block; position: relative; margin-right: 3em;}
  .shop-toggle {background-color: #0080d6; border: none; padding: .5em 1.5rem; font-size: .85em; color: #fff; font-weight: bold; cursor: pointer;}
  .shop-menu-list {position: absolute; left: 0; top: 100%; background: #fff; list-style: none; border: 1px solid #ccc; padding: .5em 0; margin: 0; display: none; width: 165px; z-index: 1000;}
  .shop-menu-list li a {display: block; padding: .7em; text-decoration: none; text-align: left; color: #555;}
  .shop-menu-list li a:hover {background: #53d65e; color: #fff;}
  .mobile-shop-menu.active .shop-menu-list {display: block;}
	
	.cart-icon-m {position: relative; display: inline-block; vertical-align: middle; margin-left: .5em;}
	.cart-icon-m img {height: 28px; width: auto;}
	.cart-count-m {position: absolute; right: -10px; background: #53d65e; color: white; font-size: .9em; padding: 2px 6px; border-radius: 50%; font-weight: bold;}
	
  .list {display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: flex-start; height: auto; border: none;}
	.bk-list-cont {width: 100%; background-color: #fff; margin: .5em 0; padding: 1em 0;}
	.bk-list-l {display: inline-block; vertical-align: top; width: 18%; margin: 0; padding: 0;}
	.bk-list-r {display: inline-block; width: 78%; margin: .3em 0 0; padding: 0;}
	.bk-list-l img {width: 100%;}
  .bk-list-r h2 {font-size: .75em; font-weight: bold; letter-spacing: 0px; color: #293F6F; margin: 0;}
	.bk-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 0px; color: darkgreen; margin: .5em 0 .7em;}
	
	.cd-list-cont {width: 100%; background-color: #fff; margin: .5em 0; padding: 1em 0;}
	.cd-list-l {display: inline-block; vertical-align: top; width: 28%; margin: 0; padding: 0;}
	.cd-list-r {display: inline-block; vertical-align: top; width: 68%; margin: 0; padding: 0;}
	.cd-list-l img {width: 100%;}
  .cd-list-r h2 {font-size: .75em; font-weight: bold; letter-spacing: 0px; color: #293F6F; margin: 0;}
	.cd-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 0px; color: darkgreen; margin: .5em 0 .7em;}
	
  .prd-button {width: fit-content; background-color: #0080d6; padding: .3em 1.5rem; margin: 0;}
  .prd-button:hover {background-color: #53d65e;}
  .prd-button a {font-size: .7em; color: #fff;}
  .prd-button a:hover {text-decoration: none;} 
	

	@media only screen and (min-width: 700px) {
		.cat-page-top-l h2 {font-size: 1.25em; letter-spacing: 2px; margin: 0 0 1em;}
		.cat-page-top-l h3 {font-size: 1.1em; letter-spacing: 2px; margin: 0 0 1em;}
		.cat-page-top-r img {width: 50%;}

		.sm-msg h4 {font-size: 1.1em; letter-spacing: 2px; font-weight: bold; line-height: 1.6; margin: 0 2rem 1em;}
		.sm-msg h5 {font-size: .9em; letter-spacing: 2px; font-weight: bold; margin: 0;}

		.mobile-shop-menu {display: none;}
		.cart-icon-m {display: none;}
		
		.nav-bar {display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; row-gap: 1.5em; height: auto; margin-top: 2em;}
		.nav-bar > div {width: 13%;}
		.nav-bar button {background-color: #676767; padding: 4px 0 5px;	width: 100%; border: none;}
		.nav-bar button:hover {background-color: #53d65e;}
		.nav-bar button.selected {background-color: #0080d6;}
		.nav-bar button a {font-size: .9em; letter-spacing: 3px; color: #fff; font-weight: bold; text-align: center;}
		.nav-bar button a:hover {text-decoration: none; color: #fff;}
		.nav-bar img {height: 30px; width: auto;}
		
		.cart-icon {display: block; position: relative; margin: 0; width: 20%;}
		.cart-count {position: absolute; top: -8px; right: -10px; background: #53d65e; color: white; font-size: 12px; padding: 2px 6px; border-radius: 50%; font-weight: bold;}
		
		.bk-list-cont {width: 48%; padding: 1em 0; margin: .5em 0;}
    .bk-list-l {display: inline-block; vertical-align: top; width: 18%; margin: 0; padding: 0;}
		.bk-list-r {display: inline-block; width: 78%; margin: 0; padding: 0;}
		.bk-list-l img {width: 100%;}
		.bk-list-r h2 {font-size: .75em;}
		.bk-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 1px; margin: .5em 0 1em;}
		
		.cd-list-cont {width: 45%; padding: 1.5em 0 1em; margin: .5em 0;}
		.cd-list-l {display: block; width: 90%; margin: 0; padding: 0;}
		.cd-list-r {display: block; width: 90%; margin: 0; padding: 0;}
		.cd-list-l img {width: 95%;}
		.cd-list-r h2 {font-size: .75em; letter-spacing: 1px; margin: 1em 0 0;}
		.cd-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 1px; margin: .7em 0 1em;}
		
    .prd-button {padding: 4px 10px 6px; border: none; cursor: pointer;}
    .prd-button a {font-size: .9em;}
  }
	
	@media only screen and (min-width: 800px) {
		.cd-list-cont {width: 33%; padding: 1.5em 0 1em; margin: .5em 0;}
	}

	@media only screen and (min-width: 1000px) {
		.cat-page-top {padding: 2em 0; margin: 2em 0;}
		.cat-page-top hr {margin: 40px 0 40px; padding: 1px; background: #8FA8BF; width: 95%;}
		.cat-page-top-l {display: inline-block; vertical-align: top; width: 60%;}
		.cat-page-top-l h2 {font-size: 1.3em; letter-spacing: 2px; margin: 0 0 .8em;}
		.cat-page-top-l h3 {font-size: 1.2em; letter-spacing: 2px; margin: 0 0 .8em;}
		.cat-page-top-l p {font-size: 1.1em}
		.cat-page-top-r {display: inline-block; vertical-align: top; width: 35%; margin: 0;}
		.cat-page-top-r img {width: 80%; border: solid 1px #293F6F;}
		
		.sm-msg {display: none;}
		.lg-msg {display: block;}
		.lg-msg h4 {font-size: .9em; letter-spacing: 2px; font-weight: bold; line-height: 1.6; color: #555; text-shadow: 2px 2px 4px #BFBFBF; margin: 0 0 .5em;}
		.lg-msg h5 {font-size: .8em; letter-spacing: 2px; font-weight: bold; color: #777; margin: 0 3rem 3em;}
		
		.nav-bar {display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; row-gap: 1.5em; height: auto; margin-top: 2em;}
		.nav-bar > div {width: 13%;}
		.nav-bar button {background-color: #676767; padding: 4px 0 5px;	width: 80%; border: none;}
		.nav-bar button:hover {background-color: #53d65e;}
		.nav-bar button.selected {background-color: #0080d6;}
		.nav-bar button a {font-size: .9em; letter-spacing: 3px; color: #fff; font-weight: bold; text-align: center;}
		.nav-bar button a:hover {text-decoration: none; color: #fff;}
		.nav-bar img {height: 30px; width: auto;}
		
		.bk-list-cont {width: 30%; padding: 1em 0; margin: .5em 0;}
    .bk-list-l {display: inline-block; vertical-align: top; width: 18%; margin: 0; padding: 0;}
		.bk-list-r {display: inline-block; width: 78%; margin: 0; padding: 0;}
		.bk-list-l img {width: 90%;}
		.bk-list-r h2 {font-size: .75em;}
		.bk-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 1px; margin: .5em 0 1em;}
		
		.cd-list-cont {width: 30%; padding: 1.2em 0; margin: .5em 0;}
		.cd-list-l {display: block; width: 90%; margin: 0; padding: 0;}
		.cd-list-r {display: block; width: 90%; margin: 0; padding: 0;}
		.cd-list-l img {width: 95%;}
		.cd-list-r h2 {font-size: .75em; letter-spacing: 1px; margin: 1em 0 0;}
		.cd-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 1px; margin: .7em 0 1em;}
	}

	@media only screen and (min-width: 1200px) {
		.cat-page-top-l {display: inline-block; vertical-align: top; width: 65%; margin: 20px 0 0;}
		.lg-msg h4 {font-size: 1em; margin: 0 6rem 1em;}
		.cat-page-top-r {display: inline-block; vertical-align: top; width: 30%; margin: 1.5em 1rem 4em;}
			
		.nav-bar button {padding: 5px 0 6px; margin: 20px 0 0; width: 80%;}
		.nav-bar button a {font-size: 80%; letter-spacing: 2px;}

		.cd-list-cont {width: 23%; padding: 1.2em 0; margin: .5em 0;}
		.cd-list-l {display: block; width: 90%; margin: 0; padding: 0;}
		.cd-list-r {display: block; width: 90%; margin: 0; padding: 0;}
		.cd-list-l img {width: 95%;}
		.cd-list-r h2 {font-size: .75em; margin: 1em 0 0;}
		.cd-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 1px; margin: .7em 0 1em;}

		.prd-button {padding: 2px 20px 4px;}
	}

	@media only screen and (min-width: 1500px) {
		.cat-page-top {margin: 3em 0;}
		.cat-page-top-l {width: 70%;}
		.lg-msg h4 {font-size: 1.1em; letter-spacing: 2px; margin: 0 0 1em;}
		.cat-page-top-r {width: 25%; margin: 1.5em 0 4em;}
		
		.nav-bar {display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; row-gap: 0; height: auto; margin-top: 3em;}
		.nav-bar > div {width: 10%;}
		.nav-bar button {padding: 5px 0 6px; margin: 20px 0 0; width: 90%;}
		.nav-bar button a {font-size: 80%; letter-spacing: 2px;}
		
		.bk-list-cont {width: 22%; margin: 1em 0; padding: 1.5em 1rem;}
    .bk-list-l {display: inline-block; vertical-align: top; width: 20%; margin: 0; padding: 0;}
		.bk-list-r {display: inline-block; width: 78%; margin: .5em 0 0; padding: 0;}
		.bk-list-l img {width: 100%;}
		.bk-list-r h2 {font-size: .75em;}
		.bk-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 1px; margin: .5em 0 1em;}
		
		.cd-list-cont {width: 18%; padding: 1.2em 0; margin: .5em 0;}
		.cd-list-l {display: block; width: 90%; margin: 0; padding: 0;}
		.cd-list-r {display: block; width: 90%; margin: 0; padding: 0;}
		.cd-list-l img {width: 95%;}
		.cd-list-r h2 {font-size: .75em; letter-spacing: 0px; margin: 1em 0 0;}
		.cd-list-r h3 {font-size: .8em; font-weight: bold; letter-spacing: 1px; margin: .7em 0 1em;}
	}

	@media only screen and (min-width: 1792px) {
    .cat-page-top {margin: 4em 0; padding: 1em 0 3em; background-color: #fff; border-radius: 5px;}
		.cat-page-top input {font-size: 1.1em; margin: 0 0 0 .5rem;}
		#searchResultsCount {font-size: 1em; font-weight: bold; color: #7f0000;}

		.cat-page-top hr {margin: 40px 0; padding: 1px; background: #8FA8BF; width: 95%;}
		.cat-page-top-l {width: 60%; margin-top: 30px;}
		.cat-page-top-l h1 {font-size: 1.8em; letter-spacing: 6px;}
		.cat-page-top-l h2 {font-size: 1.5em; letter-spacing: 2px; margin: .3em 0 0;}
    .cat-page-top-l h3 {font-size: 1.5em; letter-spacing: 2px; margin: .5em 0;}
		.cat-page-top-l p {font-size: 1.3em; letter-spacing: 4px; margin: 0 6rem 1em;}
		.cat-page-top-l li {font-size: 120%; letter-spacing: 4px; line-height: 1.6; margin-right: 20px; margin-left: 20px;}
		.cat-page-top-r {width: 30%; margin: 30px 0 0 30px;}
		.cat-page-top-r img {width: 80%; border: solid 1px #293F6F;}
		
		.lg-msg h4 {font-size: 1.3em; letter-spacing: 4px; margin: 1.5em 0 .5em;}
		.lg-msg h5 {font-size: 1.15em; letter-spacing: 2px; margin: 0;}

		.nav-bar {display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; row-gap: 1em; height: auto; margin-top: 4em; width: 80%;}
		.nav-bar > div {width: 10%;}
		.nav-bar button {padding: 7px 0; width: 80%;}
		.nav-bar button a {font-size: .9em; letter-spacing: 3px; line-height: 1.4; color: #fff; font-weight: bold; text-align: center;}

    .bk-list-cont {width: 22%; margin: 1em 0; padding: 1.5em 1rem;}
    .bk-list-l {display: inline-block; vertical-align: top; width: 18%; margin: 0; padding: 0;}
		.bk-list-r {display: inline-block; width: 78%; margin: .5em 0 0; padding: 0;}

    .prd-button {padding: 7px 25px; border: none; cursor: pointer;}
    .prd-button a {font-size: .8em;}
	}