html {background: #fff; height: 100%; scroll-behavior: smooth;}
body {color: #60348f; font-family: Verdana, Arial, sans-serif; font-size: 16px; margin: 0; min-height: 100%; padding: 0; position: relative;}
a, #contact {border-bottom: solid 1px #60348f; padding-bottom: 2px;}
a, a:hover, a:visited {color: inherit; text-decoration: none;}
.section {margin-bottom: 15px;}
#info {background: rgba(0,0,0,.4); display: block; height: 100%; left: 0; position: fixed; text-align: center; top: 0; -ms-transition: opacity .5s; -webkit-transition: opacity .5s; transition: opacity .5s; width: 100%; z-index: 1000}
#info_box {background: white; border: 1px solid gray; border-radius: 6px; box-shadow: 4px 4px 8px 0 black; display: inline-block; margin: 0 auto; max-width: 500px; position: relative; top: -100%; -ms-transition: top 1s; -webkit-transition: top 1s; transition: top 1s; width: 90%; z-index: 1001;}
#info_box.show {top: 10%;}
#info_head {border-radius: 6px 6px 0 0; font-size: 18px; letter-spacing: 1px;}
#info_body, #info_close {padding: 20px 10px;} 
#info_body div {font-size: 1.2em; margin-bottom: 10px;} 
#info_body span {display: block; margin-bottom: 10px;}
#info_close {text-align: center;}
#info_ok {background: #fff; border: 1px solid gray; border-radius: 4px; font-family: "Trebuchet MS",Arial,sans-serif; font-size: 18px; letter-spacing: 2px; margin: 0 10px; padding: 3px 6px;}
#contact:hover, #info_ok:hover {cursor: pointer;}
#splash {background: url("../images/store.jpg") center no-repeat; height: 400px; position: relative;}
#splash .cover {background-color: rgba(0,0,0,.1); height: 100%; position: absolute; width: 100%;}
#header {background: #fff; box-sizing: border-box; height: 135px; padding: 10px; position: fixed; width: 100%; z-index: 10;}
#header-right div:nth-child(2) { margin: 8px 0;}
#header, #logo, #logo img, #main {transition: all .5s;}
body.header-collapse #header {border-bottom: solid 1px #ccc;}
#logo img {height: 120px;}
.content {max-width: 1200px; margin: 0 auto;}
#main {position: absolute; top: 100px; width: 100%;}
#banner {color: #fff; font-size: 3em; margin-top: 90px; text-align: right; text-shadow: 2px 2px #000;}
#banner span {display: block; letter-spacing: 1px;}
h1.intro {margin:30px 0;}
p.intro {font-size: 1.1em;}
hr {border-color: #60348f; margin-top: 30px;}
.listing {box-sizing: border-box; margin-bottom: 30px; padding: 10px; width: 18%;}
.listing h2 {margin: 1em 0;}
#footer {background-color: #60348f; color: #fff;}
#footer p {font-size: .8em; padding: 2px 0;}
.hide {display: none !important;}
.c {text-align: center;}
.l {text-align: left;}
.r {text-align: right;}
.red {color: red !important;}
.purple {color: #990099 !important;}
.freeze {overflow: hidden;}
@media screen and (min-width: 1200px) {
 body.header-collapse #header {height: 90px;}
 body.header-collapse #logo img {height: 80px;}
 body.header-collapse #main {top: 90px;}
}
@media screen and (max-width: 1199px) {
 p.intro {font-size: 1em; padding: 0 10px;}
}
@media screen and (max-width: 1199px)  and (min-width: 800px) {
 #header {height: 85px;}
 #header-right div:nth-child(2) { margin: 4px 0;}
 #main {top: 85px;}
 #banner {font-size: 2.4em;}
 #logo img {height: 70px;}
.listing {width: 24%;}
}
@media screen and (max-width: 799px) {
 #header-right {display: none;}
 .listing {width: 48%;}
 .listing h2 {font-size: 1.4em;}
 #header {height: 65px;}
 #main {top: 60px;}
 #logo img {height: 50px;}
 #banner {font-size: 1.8em;}
 h1.intro {font-size: 1.4em;}
 #contact {border-bottom: solid 1px #60348f; display: inline-block; padding-bottom: 2px;}
}