@charset "utf-8";
body#printOut aside{display: none!important;}
body#printOut article{width: 100%!important;}
body#printOut article div.card div.col-12{ width: 50%!important;}
#video{width: 100%; max-width: 500px; height: 320px; min-height: 320px;}

h1{font-family: 'hp_B', Helvetica, Arial, sans-serif;}
h2.subTitle{margin: 0.25em 0 ; padding: 0 0 0 20px; position: relative; color: var(--color-base); text-align: left;}
h2.subTitle:after{background-color: var(--color-base); position: absolute; content: ""; left: 0; bottom: 0; top:0; width: 5px; border-radius: 2px;}
h2.subTitle small{font-size: 1.25rem; display: block; color: var(--color-base); text-transform: uppercase; letter-spacing: 0.7rem; padding: 0 0 0.2rem;}
h3{padding-bottom: 0.5em; margin-bottom: 1em; border-bottom: solid 1px gray;}

nav ul li{font-size: 1.25em; padding:0; line-height: 1.25em;}
.navbar-toggler{padding:0.25rem;}
nav + header, main.indexList{position: relative; padding-top: 100px;}
nav + header{ height: 100vh;}
header + .main{padding:0;}

section .pdt_title h1{font-family: 'hp_B', sans-serif; color: black; font-size: 2.5em; display: block; line-height: 1.25em;}
section .pdt_title span{color: #2ea7e0; font-size: 1.5em; display:block; line-height: 1em;}
section .pdt_img img {max-width: 100%; display: block; max-height: 700px; margin: 0 auto; padding: 50px 0 0;}

.marketing h2{font-size: 1.5em;}
.marketing ul {display: block; list-style-type: disc; margin: 1em 0; padding-left: 30px;}
.marketing ul li {padding-top: 10px;}
.marketing ul li:first-child {padding-top: 0;}

.spec ul li a{font-size: 1.25em;}


.itembox {position: relative; margin-bottom:30px;}
.itembox img {width: 100%;}
.itembox h3{font-size: 2em;}
.itembox p{font-size: 1.25em;}

#searchInput.form-control {
  background-position: 10px 8px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}


/*card style*/
img.card-img-top {max-width: 100%; padding: 7% 5%;}
.card {margin-bottom: 1em; margin: 0 6px 20px}
.card-inner h5{text-align: center;}
.card-inner p{text-align: center; font-size: 1.25em;}
p.price {font-family: 'hp_B'; color: crimson;}
p.model {color: dimgray;}
.btn-primary{width: 100%; background: deepskyblue; border: deepskyblue; align-items: flex-end;}

.icon-shopping_bag {display: none;}

/* user */
.modal-body li {padding-bottom: 1em}
.modal-body h3{font-size: 2em; padding: 0.75em 0 0 0;}
.modal-body p {font-size: 18px;}

@media only screen and (max-width: 767px){
	nav ul li{font-size: 1em;}

	aside {margin-top:10px;}
	aside ul li{font-size: 1em;}

}
@media only screen and (max-width: 480px){
	.navbar-brand {font-size: 1.25em;}
	.card {display: inline-block!important;}

	section .pdt_title h1{font-size: 1.5em; line-height: 1em;}
	section .pdt_title span{font-size: 1em;}
	section h3{font-size: 1.25em;}

	.marketing img {margin-top: 50px;}
	.marketing h2{line-height: 1em; font-size: 1.25em;}
	.marketing ul {display: block; list-style-type:none; margin:0; padding-left: 0; text-align: center;}
	.marketing ul li:first-child {margin-top:0; padding-top: 0;}

	.spec ul li a{font-size: 1em;}

	p.price, p.model {font-size: 1em; margin: 0 auto; padding:0;}

	.itembox p {font-size: 1em;}

	.col-6-inner .col-6 {max-width: 100%;flex:100%;border: unset;}
}