a{ font-family: Bookman Old Style, Serif; font-weight: bold; font-variant: small-caps; font-size: 11pt; text-decoration:none;}
a:link { color: black; font-weight: bold; text-decoration: none;  font-variant: regular; }
a:visited { color: black; font-weight:bold; text-decoration: none;  font-variant: regular; } 
a:hover { color: black; font-weight: bold; background-color: transparent; text-decoration: none; }
a:active { color: black; font-weight: bold; text-decoration: none; font-variant: regular; cursor: pointer; }
a:name { color: black; font-variant: bold; font-weight:normal; background-color: transparent; text-decoration: none; }
a:dropdown-item disabled {color:#f1f3f4; }

body { font-family: Bookman Old Style, Serif; color: black; font-size: 10.5pt; font-style: regular; text-align: left; background-color: rgb(244,235,215); background-image:url('images/cream.png'); }

h1 { font-family: Arvo, Serif; color: black; font-size: 14pt; font-weight: regular; font-style: regular; font-variant:small-caps; }

h2 { font-family: Bookman Old Style, Serif; color: black; font-size: 12pt; font-weight: regular; font-style: regular; font-variant: small-caps; float:left; display: block; margin-right:20px;}

h3 { font-family: Bookman Old Style, Serif; color: black; font-size: 11pt; font-weight: bold; font-style: regular; font-variant: small-caps; }

h4 { font-family: Bookman Old Style, Serif; color: black; font-size: 12pt; font-weight: bold; font-style: regular; font-variant: small-caps; text-decoration: none; }

h5 { font-family: Bookman Old Style, Serif; color: black; font-size: 12pt; font-weight: bold; font-style: regular; font-variant:small-caps; text-decoration: none; text-align:center; }

h6 { font-family: Bookman Old Style, Serif; color: black; font-size: 12pt; font-weight: bold; font-style: regular; font-variant: small-caps; text-decoration: none; text-align:left;  }

.p { font-family: Bookman Old Style, Serif; color: black; font-size: 10.5pt; font-style: regular; alignment-baseline: left; v-align: left; text-align: text-left; float:left;  }
.p.r {float: right }
.p.a { text-align:left; }
#but {float: right; }

#hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; background-color: rgb(19,47,48); overflow: hidden;}

div#title {color: rgb(19,47,48); font-variant:small-caps; font-weight: normal; background-color: transparent; text-decoration: none; }
#header1 { clear: both; background-color:#b39eb5; vertical-align: middle; text-align: right; font-size: 9pt; padding-left: 5px; padding-bottom: 2px;padding-top:2px; padding-right: 5px; height: 3%; width: 100%; }
#header2 { position:absolute; clear: both; background-color: rgb(51,84,83); color: rgb(255,230,204); vertical-align: middle; text-align: right; font-size: 9pt; margin-left:45%; padding-left: 5px; padding-bottom: 2px; padding-top:2px; padding-right: 5px; height: 32px; width: 14%; }
#header3 { position:absolute; clear: both; background-color: transparent; color: rgb(255,230,204); vertical-align: right; text-align: right; font-size: 9pt; margin-left:48%; margin-right:12%; padding-left: 5px; padding-bottom: 2px; padding-top:2px; padding-right: 5px; height: auto; width: 12.8%; }
#main, #header, #header1 { width: 100%; margin: auto; }
#headerimage {background-image: url('images/splogo23-228x83.png'); background-repeat: no-repeat; width: 228px; height: 93px; float: left;}
#headerimage1 { vertical-align: right; position: static; background-image: url('images/waterlilypeachMini.png' ); background-repeat:no-repeat; width:37px; height:35px; padding-right: 6px; }
#footer {margin:auto; clear: both; background-color: #b39eb5; vertical-align: middle; color:black; text-align: center; font-size: 8.5pt; padding-left: 5px; padding-bottom: 2px;padding-top:2px; padding-right: 5px;  }
#footer a, #footer a:visited { color: oldlace;}

#footer a:hover, .footer a:active { color: black;}

#buttonBack { width: 10%; float:left; background-color: transparent;}
#card a:hover {cursor: pointer; }

#basket {position:fixed; left:80%; top:25%; }
#top {  display: none;  position: fixed;  bottom: 20px;  right: 30px;  z-index: 99;  font-size: 18px;  border: none;  outline: none;  background-image: url('images/buttonTop'); background-color:transparent;  color: white;  cursor: pointer;  padding: 15px;  border-radius: 4px; }
@media only screen and (max-width: 500px){
    #buttons {
        bottom: 0;
    }
}
}
.img-fluid {padding-top: 2px; width: 25%;}

.carousel-inner { }
.carousel-item{ background-image:url(''); background-repeat:no-repeat;}


div#gemfo { vertical-align: middle; font-family: Verdana, Geneva, Sans-Serif; font-size: 8pt; font-weight: regular; font-variant: small-caps; }

#container, #container-fluid { width: 90%; vertical-align: center; }
#header { float: left; padding-left: 5px; }

#hd {font-family: Bookman Old Style, Serif; font-variant: small-caps; font-size: 10.5pt; font-color: black; font-weight:bold; }
#hd a:link {color:black; }
#hd a:visited {color:black; }

<!--- very peri vp 'margin:auto; width:96%; cursor: default; background-color:#6667ab; --->
#containerban { width:98%; display: block; float: center; position: top; padding-left: 12px; padding-right:6px; background-color:#7fcacf; border:double; font-family: Gill Sans MT;font-size:12pt; font-variant:small-caps; text-align:center;}

.containerindex {font-size: 9pt; width: 98%;  margin:auto;  padding: 5px; }

.container.center,.container.center ul {    float: left;  position: relative;}
.container.center { left: 50%; }
.container.center ul { left: -50%; }

.container.right,.container.right ul {    float: right;  position: fixed;}
.container.right { right: 0% }
.container.right ul { right: 5%; }

#container1, #container1-fluid {width: 100%; height: 90%; font-family: Bookman Old Style, Serif; font-size: 9pt; font-variant: regular; vertical-align: center; text-align: right; position: relative; }

.columni {
  float: center;
  width: 98%;
  margin: auto;
  margin-bottom: 16px;
  padding: 0 2px;
}

@media screen and (max-width: 650px) {
  .columni {
    width: 98%;
    display: block;
  }
}


.cardi {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  text-align:left;  padding: 8px 12px 18px 12px; font-size: 9pt; background-color:white;}
.card2 {height:400px; }

.columni {
  float: center;
  width: 98%;
  margin: auto;
  margin-bottom: 16px;
  padding: 0 2px;
}
@media screen and (max-width: 650px) {
  .columni {
    width: 98%;
    display: block;
  }
}

.containeri::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
.containerCart {height:400px; }

.pagination.pagination-sm {background-color: #000000; }
.pagination{ display:-webkit-box; display:-ms-flexbox; display:flex; padding-left:auto; list-style:none; border-radius:.25rem; position:fixed;  bottom: 96%;}
.pagination.center,.pagination.center ul { float: left; position: relative; }
.pagination.center { left: 50%; }
.pagination.center ul { left: -50%; }

.page-link{position:relative;display:block;padding:.5rem.75rem;margin-left:-1px;line-height:1.25;color:red;background-color:rgb(194,204,194);border:1px solid #dee2e6;}
.page-link:hover{color:black;text-decoration:none;background-color:cornsilk;border-color:#dee2e6}
.page-link:focus{z-index:2;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}
.page-link:not(:disabled):not(.disabled){cursor:pointer}
.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
.page-item.active .page-link{z-index:1;color: indigo;background-color:rgb(51,84,83);border-color:#007bff}
.page-item.disabled .page-link{color:#dee2e6;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}
.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}
.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}
.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}
.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}
.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}
.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}
.nav navbar-nav .dropdown-content { display: none; position: absolute; background-color: #decbed; min-width: 60px; box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); z-index: -1; }
.nav-item { float: left; border-right: 1px solid indigo; }
.nav-link .dropdown-content a { color: indigo; padding: 4px 6px; text-decoration: none; display: block; text-align: left; }
.nav-link .dropdown-content a:hover {background-color: cornsilk; }
.nav-link .dropdown-item.active, .dropdown-item:active { color: #fff;  background-color: cornsilk;  }
.nav-link .dropdown:hover .dropdown-content { display: block; }
.nav-link .dropdown-submenu { position: relative; top: 0; right: 100%; margin-top: -1px; }
.nav-link.sub ul { display: none; position: absolute; left: 100%; top:0; }
.nav-link.sub:hover ul{ display: block; background-color: cornsilk; }
.dropdown-submenu {    position: relative;}


.dropdown-submenu .dropdown-menu {    top: 0;    left: 100%;    margin-top: -1px;}

.nav-item {font-color: indigo;  }
.nav-link:last-child {  border-right: none; }
.nav-link a { display: block; color: indigo; text-align: center; padding: 4px 6px; text-decoration: none; }
.nav-link a:hover:not(.active) { background-color: rgb(194,204,194); }
.nav-link active { background-color: red; }
.nav-link a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 4px 6px; text-decoration: none; }
.nav-link a:hover, .dropdown:hover .dropbtn { background-color: rgb(194,204,194); }
.nav-link.dropdown { display: inline-block; }

#sr-only  (current) { background-color: rgb(black); }

.navbase { width: 60%; vertical-align:middle; position:fixed; bottom:80px; background-color: rgb(51,84,83); text-align: center; color: white; z-index: -1; padding: 2,2,2,2; }
.navbase ul {list-style-type: none; overflow:hidden; background-color: rgb(51,84,83); }
.navbase li {float: left; border-right: 1px solid rgb(255,230,204); }
.navbase li a { display: inline-block; color: white; text-align: center; padding: 4px 6px; text-decoration: none; }
.navbase li a:hover:not(.active) { background-color: rgb(194,204,194); }
.navbase a {color: white; }
.navbase .active {  }


.tooltip { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 1.8; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal;}
.tooltip-inner { max-width: 120px; padding: 3px 8px; color: #fff; text-align: center; background-color: #000; border-radius: 4px;}

.content2 {
  height:90px;
  overflow:hidden;
  margin-bottom:10px;

 
}

.content2.visible {
  height:auto;
  overflow:visible;
}





#submit { background-color: rgb(19,47,48); color: #ffffff; font-family: Bookman Old Style; font-variant:small-caps;}

div#basePhoto { float: right; display: block;  text-align: top; }
div#refPhoto { display: block; float: left; clear: left; margin: 9px 9px 0 0; }
div#image2 { display: block; float: center; clear: both; width: 400px; margin: 9px 9px 9px 100px; font-size: 9pt; text-align: center; }
div#image3 { display: block; float: center; clear: both; width: 580px; margin: 9px 9px 0 0; font-size: 9pt; text-align: center; }
div#image4 { display: block; float: right; clear: right; width: 150px; margin: 0 0 9px 9px; font-size: 9pt; text-align: center; }
div#item { height: 80px; margin-top:40px; }
div#image { display: block; float: left; clear: left; width: 176px; margin: 9px 9px 0 0; font-size: 9pt; text-align: center; }
div#imglt { display: block; float: left; clear: left; margin: 9px 9px 0 0; font-size: 9pt; text-align: center; }
div#image1 { display: block; float: right; clear: right; width: 176px; margin: 0 0 9px 9px; font-size: 9pt; text-align: center; }
div#imagec { display: block; float: center; clear: both; margin-left: auto; margin-right: auto; font-size: 9pt; text-align: center; }
div#gal {font-size: 9pt; text-align: center;}
.clearfix { overflow: auto; }

.imagec { display: block; float: center; clear: both; margin: 9px 9px 9px 100px; font-size: 9pt; text-align: center; }

background-image { opacity: 0.2; filter: alpha(opacity=20); }
#footer1 { clear: both; vertical-align: right; text-align: right; font-size: 8.5pt; padding-left: 5px; padding-bottom: 2px;padding-top:2px; padding-right: 5px; height: 18px; }
table#cart { display: block; padding-top: 6px; font-family: Bookman Old Style, Serif; font-variant: regular; vertical-align: center; text-align: right; position: relative; float:right; font-size:9.5pt; }

div#text2 { width: 100%; height: 90%; font-family: Bookman Old Style, Serif; font-size: 9pt; font-variant: regular; vertical-align: center; text-align: center; position: relative;}

div#containerindex { width: 100%; height: 90%; font-family: Bookman Old Style, Serif; font-size: 7pt; font-variant: regular; vertical-align: center; text-align: left; position: relative; }
div#cart1 { width: 100%; height: 90%; font-family: Bookman Old Style, Serif; font-size: 9pt; font-variant: regular; vertical-align: right; text-align: right; position: relative;}
div#cardCart { height:420px; }
.imageToSwap { vertical-align: right; }
div#cartmodal { padding-top: 0; width: 100%; height: 90%; font-family: Bookman Old Style, Serif; font-size: 9pt; font-variant: regular; vertical-align: center; text-align: center; position: relative;}


div#details {height:360px; overflow:auto; }

div#cart2 .submit {width: 52px; }
#intro { text-align: left; width: 98%; overflow: none;margin-top:12px;}
.intro { font-size: 9pt; margin-top:12px; }
#back {float: left; }
#more {float: right; font-size: 9pt; text-align:center; }
#top { position: fixed; bottom: 50px; right: 8%; }
#holding {background-image: url('images/holding.png'); width: 700px; height: 494px; }
#content { height: 700px; overflow-y: scroll; overflow-x: hidden; font-size: 9.5pt;}

#update{ font-size:x-small; clear: both; vertical-align: right; text-align: right; position:relative;}

table#color {border:1px dotted black; }
#c {border:1px dotted black; padding-bottom:2px;padding-left:5px; padding-right: 5px; padding-top: 2px;  width: 50px;}
#gi a:hover {background-color: transparent; }
#gi image {border: 0px; vertical-align: center; }
#gi {text-align: center; border: 1px dotted black; }
#em {text-align: center; font-size:11pt; border: 1px dotted black; vertical-align: center; position: relative; }
p#note { font-size:smaller; font-style:italic; }
.center {margin-left:auto; margin-right:auto;}
#tableHeader {background-color:rgb(51,84,83); font-size:large;font-family: Bookman Old Style, Serif; color:rgb(194,204,194); font-variant: small-caps; padding-left:6px; padding-top:4px; padding-bottom: 4px; }

#shopHome {max-width:100%; font-size:10.5pt; border-top: 1px; border-bottom: 1px; }
#shopHeader {background-color:rgb(51,84,83); font-size:large;font-family: Bookman Old Style, Serif; color:rgb(194,204,194); font-variant: small-caps; padding-left:6px; padding-top:4px; padding-bottom: 4px; }

#chartSWC, #chartSWCPearl, #chartGemPearl, #chartGem {max-width:100%; font-size:9pt; border-top: 1px; border-bottom: 1px; }
#chartHeader {background-color:rgb(51,84,83); font-size:large;font-family: Bookman Old Style, Serif; color:rgb(194,204,194); font-variant: small-caps; padding-left:6px; padding-top:4px; padding-bottom: 4px; }


table#calendar {  margin-left:33%; width:36%; vertical-align:middle; }

#swc { font-size:8pt; font-variant: small-caps;   }
#swc a:hover {background-color: transparent; }
#swc { text-align: center; border: 1px dotted black; padding: 2px 2px 2px 2px;}

#myImg, #myImg2, #myImg3, #myImg4, { display: block; float: left; padding: 4px; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.myImg, myImg2, .myImg3 {cursor: pointer; }

.table-responsive { vertical-align: middle; width: 99%; height:auto; overflow-y: scroll; overflow-x:hidden; }
.tbody {width: 100% }
.table-responsive2 { vertical-align: middle; width: auto; height:240px; overflow: none;  }
.tbody {width: 100% }
.table::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
.table {
  padding: 0 16px;
}


.image-responsive { vertical-align: middle; width: 80%; }
.image-responsive1 {vertical-align: middle; width: auto;}
.image-responsive2 {vertical-align: middle; width: auto;}
.image-responsive3 { vertical-align: middle; width: 50%; }

map {  display: inline; }


.gsc-input-box{width: 200px; height: auto; text-height:8pt; text-align:middle;}

.col-sm-4 {width: 200px;}

#icb {font-style: italic; display:block; text-align:center; font-variant:normal;font-size: 10pt;}
#quote {font-style: italic; display:block; text-align:center; }
#author { margin-left: 60%;  font-size: 8pt;}
#footnote { margin-left: 8%;  font-size: 8pt;}


#scrollbox {width: 100%; height:480px; overflow: auto; }

@media (max-width: 500px){.modal-content3 { width: 56%;}}
@media (max-width: 500px){.modal-content { max-width: 498px;}}

.thumb {width:90px; height:90px; }


.fa {  padding: 5px;  font-size: 30px;  width: 30px;  text-align: center;  text-decoration: none;  margin: 5px 2px;  border-radius: 50%; }


.gallery {  width: 170px;  margin: 0 auto;  padding: 5px;  background-color: oldlace;  box-shadow: 0 1px 2px rgba(0,0,0,.3);}
.gallery1 {  width: 700px;  margin: 0 auto;  padding: 5px;  background: oldlace;  box-shadow: 0 1px 2px rgba(0,0,0,.3);}
.gallery2 {  width: 62%;  margin: 0 auto; position:center;  padding: 5px;  background: #fff;  box-shadow: 0 1px 2px rgba(0,0,0,.3);}
.gallery3 {  width: 100%;  margin: 0 auto;  padding: 5px;  background: oldlace;  box-shadow: 0 1px 2px rgba(0,0,0,.3);}
.galleryhp {  width: 100%;  margin: 0 auto;  padding: 5px;  background: oldlace;  box-shadow: 0 1px 2px rgba(0,0,0,.3);}
.galleryhp1 {  width: 60%;  margin: 0 auto;  padding: 5px;  background: oldlace;  box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.gallery-responsive { overflow:hidden,scroll; }

.containerpdt {  width: 98%;  margin:auto;  padding: 5px;  box-shadow: 0 1px 2px rgba(0,0,0,.3); overflow:hidden;}



.gallery > div {  position: center;  float: left;  padding: 5px;}
.gallery2 > div {  position: center;  float: left;  padding: 5px;}
.gallery3 > div {  position: center;  float: right;  padding: 5px;}
.galleryhp > div {  position: center;  float: center;  padding: 5,5,5,5;}
.galleryhp1 > div {  position: center;  float: center;  padding: 5,5,5,5;}

.gallery > div > img {  display: block;  width: 500px;  transition: .1s transform;  transform: translateZ(0);}
.gallery2 > div > img {  position: center; display: block;  width: auto;  transition: .1s transform;  transform: translateZ(0);}
.gallery3 > div > img {  display: block;  width: auto;  transition: .1s transform;  transform: translateZ(0);}
.galleryhp > div > img {  position: center; display: block;  width: auto;  transition: .1s transform;  transform: translateZ(0);}
.galleryhp1 > div > img {  position: center; display: block;  width: auto;  transition: .1s transform;  transform: translateZ(0);}

.gallery > div:hover {  z-index: 1;}
.gallery2 > div:hover {  z-index: 1;}
.gallery3 > div:hover {  z-index: 1;}

.gallery > div:hover > img { transform: scale(20,20);  transition: .3s transform;}
.gallery2 > div:hover > img { transform: scale(2.5,2.5);  transition: .3s transform;}
.gallery3 > div:hover > img { transform: scale(7.5,7.5);  transition: .3s transform;}

* {  box-sizing: border-box;}
.row > .column2 {  padding: 8px 8px; }
.row:after {  content: "";  display: table;  clear: both;}
.column2 {  float: left;  width: 25%;}
.modal, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 {  display: none;  position: fixed;  z-index: 9999;  margin:auto; justify-content:center;  top: 24px;  width: 100%;  height: 100%;  overflow: auto;  background-color: oldlace; background: rgba(0,0,0,0.0); position:align-items-center; }
.containermdl {padding: 6px; display:flex;justify-content:center; width:80%; }
.modal-content, .modal-content2, .modal-content3, .modal-content4, .modal-content5, .modal-content6, .modal-content7, .modal-content8, .modal-content9 {display:flex; position: justified; z-index: 2;  margin: auto; width:400px; padding-top:24px; }
.pdt {max-height:600px; max-width:600px; width:100% height:100%; padding-top:6px; padding-left:6px; padding-right:6px; }
.close, .close2, .close3, .close4, .close5 {  position:top-right; top:2%; right: 38%; z-index: 1; color: teal; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer;}
.close:hover, .close2:hover, .close3:hover, .close4:hover, close5:hover, .close:focus, .close2:focus, .close3:focus, .close4:focus, .close5:focus {  color: white;  text-decoration: none;  cursor: pointer;}
#caption {  text-align: center; color: white;  }
#captionm {  text-align: center; color: white;}
.mySlides, .mySlides2, .mySlides {display: none; width:460px; height:460px; }
.cursor, .cursor2 {  cursor: pointer;}
.prev,.next {  cursor: pointer;  position: absolute;  top: 50%;  width: auto;  padding: 16px;  margin-top: -50px;  color: white; background-color:teal;  font-weight: bold;  font-size: 20px;  transition: 0.6s ease;  border-radius: 0 3px 3px 0;  user-select: none;  -webkit-user-select: none;}
.prev { left: 0;  border-radius: 3px 0 0 3px;}
.next {  right: 0;  border-radius: 3px 0 0 3px;}
.prev:hover,.next:hover {  background-color: rgba(0, 0, 0, 0.8);}
.numbertext {  color: #f2f2f2;  font-size: 12px;  padding: 8px 12px;  position: absolute;  top: 0;}
.img {  margin-bottom: -4px;}
.caption-container {  text-align: center;  background-color: black;  padding: 2px 16px;  color: white;}
.product {  opacity: 0.6;}
.active,.demo:hover {  opacity: 1;}
img.hover-shadow {  transition: 0.3s;}
.hover-shadow:hover {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

.myModal, .myModal3, .myModal4 {  display: none;  position: fixed;  z-index: 9999;  margin:auto; justify-content:center;  top: 24px;  width: 100%;  height: 100%;  overflow: auto;  background-color: oldlace; background: rgba(0,0,0,0.0)}
.myModal2, .myModal3 {  display: none;  position: fixed;  z-index: 9999;  margin:auto; justify-content:center;  top: 24px;  width: 100%;  height: 100%;  overflow: auto;  background-color: oldlace; background: rgba(0,0,0,0.0)}
.myModal3{  display: none;  position: fixed;  z-index: 9999;  margin:auto; justify-content:center;  top: 24px;  width: 100%;  height: 100%;  overflow: auto;  background-color: oldlace; background: rgba(0,0,0,0.0)}

#inventory, #inventory2 {font-size:larger; font-weight:bold; font-family:Gill Sans MT;font-variant:small-caps; display: block; padding: 8px, 8px, 8px, 8px;}



@media (max-width: 800px) {
.close {position:fixed; top:2%; right:2%; z-index: 5;  } }

@media (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }

  
@media only screen and (max-width: 500px){
    .gallery2 > div:hover > img {
        width: 100%;
    }
}
@media only screen and (max-width: 500px){
    .gallery1 > div:hover > img {
        width: 100%;
    }
}

}
@media only screen and (max-width: 500px){    .galleryhp > div:hover > img { width: auto; }
}

.cf:before, .cf:after {  display: table;  content: "";  line-height: 0;}

.cf:after {  clear: both;}
@media only screen and (max-width: 400px){
    .galleryhp1 > {
        width: 90%;
    }

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    overflow-x:hidden;
    overflow-y:scroll;
    float: left;
    width: 99%;
    height: 200px;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
   .navbase {
        visibility:hidden;
    }
}
}

@media only screen and (max-width: 500px){
    .media-object {
        width: 100%;
    }
}

@media only screen and (max-width: 1000px){
    .media-object {
        position: center; width: 50%:
    }
}
@media only screen and (max-width: 500px){
    .media-object1 {
        width: 100%;
    }
}

@media only screen and (max-width: 1000px){
    .media-object1 {
       position:center; width: 50%: height: 60%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.fa {  padding: 5px;  font-size: 30px;  width: 30px;  text-align: center;  text-decoration: none;  margin: 5px 2px;  border-radius: 50%; }

.fa:hover { opacity: 0.2; }

.fa-facebook {  background: rgb(51,84,83);  color: white; }

.fa-twitter {  background: #55ACEE;  color: white; }


.fa-linkedin {  background: #007bb5;  color: white; }

.fa-youtube {  background: #bb0000;  color: white; }

.fa-instagram {  background: #125688;  color: white; }

.fa-pinterest {  background: #cb2027;  color: white; }


.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}

.dropdown option { margin:0px; padding:0px; }
.dropdown option { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown option a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown option a {background:#e4dfcb url('') no-repeat scroll right center; display:block; padding-right:20px;
                border:1px solid #d4ca9a; width:150px;}
.dropdown option a span {cursor:pointer; display:block; padding:5px;}
.dropdown option { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                  left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown option a { padding:5px; display:block;}
.dropdown option a:hover { background-color:#d0c9af;}

.dropdown img.swc { border:none; vertical-align:middle; margin-left:2px; width:10px; height:10px; }
.swcvisibility { display:none;}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

.media-body { padding-left: 12px; padding-right: 12px; }

@media (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); display: flex; }
#card-img {display:block; vertical-align:middle; width:100%; position: block-center; float: center; }

.cardimage {width:100%; height: 180px; }

.card5 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); height:460px; width:460px; }


.pdt { width: 100%; height: 90%; font-family: Bookman Old Style, Serif; font-size: 9pt; font-variant: regular; vertical-align: center; text-align: center; position: relative;}
#calinfo { width: 100%; height: 90%; font-family: Bookman Old Style, Serif; font-size: 11pt; font-variant: regular; vertical-align: center; text-align: left; position: relative;clear:both;}
#insert {padding: 0px 6px 12px 0px; height:160px; float:left; }

.container {
  padding: 0 2px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: rgb(51,84,83);
}
#imgbanner {width:98%; display: block; float: center; position: top; padding-left: 12px; padding-right:6px; background-color:#7fcacf; color:black; border:double; font-family: Gill Sans MT;font-size:12pt; font-variant:small-caps; text-align:left; cursor:default; }
.banner {width:98%; display: block; float: center; position: top; padding-left: 12px; padding-right:6px; background-color:#b39eb5; color:black; border:double; font-family: Bookman Old Style; font-weight: bold; font-size:12pt; font-variant:small-caps; text-align:left; cursor:default; }
.vp {margin:auto; border: none; outline:0; display:inline-block; padding:8px; color: white; background-color:#6667ab;text-align: center; cursor:default; width:100%;   font-family: Bookman Old Style, Serif;  font-variant: small-caps;  font-size: 10.5pt; }

.buttonCart {
  position: relative;
  margin: auto;
  margin-bottom: 8px;
  border: 1;
  border-radius:8px;
  outline: 0;
  display: inline-block;
  padding: 8px;
  padding-bottom:12px;
  color: black;
  background-color: #b39eb5;
  text-align: center;
  cursor: pointer;
  width: 24%;
  height: auto;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.buttonCartSale {
  position:relative;
  margin: auto;
  margin-bottom: 8px;
  border: 1;
  border-radius:8px;
  outline: 0;
  display: inline-block;
  padding: 8px;
  padding-bottom:12px;
  color: white;
  background-color: #800000;
  text-align: center;
  cursor: pointer;
  width: 82%;
  height: auto;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.buttonOrder {
  position:absolute;
  margin-right:30%;
  margin: auto;
  margin-bottom: 8px;
  border: 1;
  border-radius:8px;
  outline: 0;
  display: inline-block;
  padding: 8px;
  padding-bottom:12px;
  color: teal;
  background-color: cornsilk;
  text-align: center;
  cursor: pointer;
  width: auto;
  height: auto;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.buttonOrder2 {
  position:bottom;
  width: 98%;
  margin: auto;
  margin-bottom:0;
  border: 1;
  outline: 0;
  display: inline-block;
  padding: 8px;
  padding-bottom:0;
  color: teal;
  background-color: cornsilk;
  text-align: center;
  cursor: pointer;
  width: auto;
  height: auto;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.buttonSale {
  margin: auto;
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #800000;
  text-align: center;
  cursor: pointer;
  width: 82%;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.buttonOOS {
  position:relative;
  margin: auto;
  margin-bottom: 8px;
  border: 1;
  border-radius:8px;
  outline: 0;
  display: inline-block;
  padding: 8px;
  padding-bottom:12px;
  color: teal;
  background-color:rgba(255, 220, 18, 0.1);
  text-align: center;
  cursor: pointer;
  width: 18%;
  height: auto;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.button {
  margin: auto;
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: black;
  background-color: #b39eb5;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}


.buttonblank {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: grey;
  background-color: cornsilk;
  text-align: center;
  cursor: default;
  width: 100%;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.buttonsold {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: indigo;
  background-color: cornsilk;
  text-align: center;
  cursor: default;
  width: 100%;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.button24 {
  margin: auto;
  border: 1;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: rgb(19,47,48);
  text-align: center;
  cursor: pointer;
  width: 24%;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}

.button:hover {
  background-color: red;
}

.buttonCart:hover {
  background-color: #b39eb5; opacity: .4;
}

.buttonS:hover {
  background-color: #eddeed;
}

.column1 {
  float: left;
  width: 16.25%;
  margin-bottom: 8px;
  padding: 0 4px;
}

.card1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
#card-img1 {display:block; vertical-align:middle; width:100%; position: block-center; float: center; }

.container1 {
  padding: 0 2px;
}

.container1::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title1 {
  color: grey;
}

.button1 {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 2px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: cornsilk;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 14px;
  padding: 6px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}

.button1 {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 4px;
  color: white;
  background-color: rgb(19,47,48);
  text-align: center;
  text-height:8pt;
  cursor: pointer;
  width: 100%;
}
.button2 {
  border: 1px solid rgb(51,84,83);
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: rgb(19,47,48);
  background-color: rgb(253,253,167);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
.button2blank {
  border:1px solid rgb(51,84,83);
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: rgb(19,47,48);
  background-color: rgb(253,253,167);
  text-align: center;
  cursor: default;
  width: 100%;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 10.5pt;
}
 .buttonP {
  border: none;
  border-radius:4px;
  outline: 0;
  display:run-in;
  padding: 8px;
  color: white;
  background-color: #ffe5b4;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-family: Bookman Old Style, Serif;
  font-variant: small-caps;
  font-size: 12pt;
   }
   .buttonP:hover {
  background-color: #ff8a35;
}





input.error, textarea.error {
border:1px solid red;
box-shadow:0 0 4px red;
}
label.error {
display:none !important;
}
input.error, textarea.error {
-moz-animation:glow ease-in infinite alternate 500ms;
-webkit-animation:glow ease-in infinite alternate 500ms;
-ms-animation:glow ease-in infinite alternate 500ms;
animation:glow ease-in infinite alternate 500ms;
}
@-moz-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@-webkit-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@-ms-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}

.error {color: #FF0000;}

#shop {background-color:oldlace; }

.wrapper, .wrapper1 { margin: 0 auto; width: 60%; }

.drift-trigger, .drift-trigger1 { width: 40%; float: left; }

.detail, .detail1 { position: relative; width: 55%; height:400px; margin-left: 5%; float: left; }


p:last-of-type { margin-bottom: 2em; }

a { color: #00C0FA; }

.ix-link { display: block; 	margin-bottom: 3em;  }

@media (max-width: 900px) {        
.wrapper { text-align: center;	width: auto;	}

.detail,.drift-trigger { float: none; }

.drift-trigger { max-width: 100%; width: auto; margin: 0 auto; }

.detail { margin: 0; width: auto; }

p { margin: 0 auto 1em; }

.drift-bounding-box { display: none; }
		}
  .tiles {
    position: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .tile {
    position: relative;
    float: left;
    width: 33.333%;
    height: 100%;
    overflow: visible;
    }

  .photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 96%;
    height: 96%;
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    transition: transform .5s ease-out;
  }

  .txt {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 10%;
    left: 0;
    font-family: 'Roboto Slab', serif;
    font-size: 9px;
    line-height: 12px;
    text-align: center;
    cursor: default;
  }

  .x {
    font-size: 32px;
    line-height: 32px;
  }
    
@media only screen and (max-width: 500px){
    .tile >  img { width: 200px; height:200px; }
    
@media (max-width: 650px) {
  .column5 {
    width: 25%;
    display: block;
  }