body {font-family: FrizQuadrataStd-Regular, 'Josefin Sans', sans-serif; font-size:18px; line-height:24px; font-weight:300; background-color:#ffffff; margin:0; padding:0;}
p strong {font-weight:400;}
h1 {width:400px; margin-left:auto; margin-right:auto;}
h1 img {width:100%; height:auto;}
#headerwrap {width:100%; height:auto; overflow:hidden; background: rgb(164,134,86); background: linear-gradient(90deg, rgba(164,134,86,1) 0%, rgba(219,190,143,1) 25%, rgba(164,134,86,1) 50%, rgba(219,190,143,1) 75%, rgba(164,134,86,1) 100%);}
#headermain {}
#headerborder {width:100%; height:5px; background: rgb(219,190,143); background: linear-gradient(90deg, rgba(219,190,143,1) 0%, rgba(164,134,86,1) 25%, rgba(219,190,143,1) 50%, rgba(164,134,86,1) 75%, rgba(219,190,143,1) 100%);}

#herocontainer {width:100%; height:auto; background-image: url("images/marble.jpg"); background-repeat:no-repeat;  background-size:cover;}
#herocontent {width:900px; margin-left:auto; margin-right:auto; overflow:hidden; padding-top:10px; padding-bottom:30px}
#heroleft {width:55%; float:left; display:block; color:#ffffff; }
.txtshadow {text-shadow: 1px 1px 2px #ffffff; margin-right:2%; color:#000000;}
#heroright {width:43%; float:right; display:block;} 
#heroright img {width:100%; height:auto; padding-top:20px;}
#buttoncontainer {width:100%; text-align:center;}
#preorder {width:300px;  margin-left:auto; margin-right:auto;}
button {width:300px; margin-left:auto; margin-right:auto; font-size:20px; padding:0px; margin-top:10px; margin-bottom:0px; display: inline-block; border: none; text-decoration: none; cursor: pointer; text-align: center; -webkit-appearance: none; -moz-appearance: none; background:none;}
button img {width:100%; height:auto;}
/*button:hover {background: #000000; color:#ffffff !important;     outline: 1px solid #d4af37;}
button:focus {background: #ffffff !Important; color:#000000 !important;     outline: 1px solid #d4af37;}
button:active {background-color:#ffffff;}
button:hover {background-color:#000000; color:#ffffff;}*/
.js .buylinks{opacity:0;}
#buycenter {clear:both; width:100%; text-align: center; padding-top:0; margin-top:0;}
.buylinks{min-width:50%;flex-basis:100%;font-size:1.3em; text-transform:uppercase; letter-spacing: 0px;}
 .buylinks h1, .buylinks h2{display:inline-block;font-size:1em;margin:0;padding:0;}
.buylinks h2:before{content:'\2022';margin:10em .5em;}
.buylinks ul{flex-flow:wrap;text-align:center;margin-bottom:0;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;list-style:none;padding-left:0;display:flex;justify-content:space-between;align-content:center;align-items:center;}
.buylinks ul li{margin:1%;width:31%; float:left; display: block; background-color:#ffffff}
.buylinks ul li a{display:block;text-align:center;padding:.5em .25em .5em;text-decoration:none;border:2px solid #d4af37; color:#000000;overflow:hidden;font-size:.75em;}
.buylinks li a:before{font-size:.75em;margin:auto;vertical-align:baseline;}
.buylinks li a:hover, .buylinks li a:active, .buylinks li a:focus{color:#ffffff; background-color:#000000; border:2px solid #d4af37;}
/*ul {width:300px; margin-left:auto; margin-right:auto; position:absolute; z-index:500; margin-top:-15px;}
ul li {list-style-type:none; font-size:20px; background-color:#cccccc; padding:20px;}
ul li a {text-decoration:none;}*/
#maincontent {width:700px; margin-left:auto; margin-right:auto; padding-top:20px;}
#maincontent p {font-size:18px; line-height:24px;}
.mobileonly {display:none; visibility:hidden;}
.center {text-align:center;}
#signature {float:right; width:230px;}
#sig1 {float:left; text-align:left; width:230px; padding:0; margin:0;}
#sig2 {float:left; text-align:left; width:230px; padding:0; margin:0;}
#sig2 img {width:180px; height:auto; padding:0; margin:0;}
#sig1 p, #sig2 p {align:left; padding:0; margin:0;}
#note {margin-left:auto; margin-right:auto; width:750px;}
#note img {width:100%; height:auto; padding-top:30px;}
#footer {width:100%; background-color:#000000; margin:0; padding:0; overflow:hidden;}
#footerleft {float:left; display:block; padding-left:100px; padding-top:36px;}
#footerright {float:right; display:block; padding-right:100px; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0;}
#footerright img {margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0;}
#sociallinks {width:300px; text-align: center}
#mclink {width:300px; text-align: center; padding-top:5px;}
#mclink img {width:92%; height:auto; margin-left:4%; margin-right:4%;}
.socialicon {width:34px; height:auto; margin-left:2px; margin-right:2px;}

#termsprivacy {clear:both; padding-top:20px;}
#termsprivacy p {font-size:12px; color:#ffffff;}
#termsprivacy p a {font-size:12px; text-decoration:none; color:#ffffff;}
#termsprivacy p a:hover {font-size:12px; text-decoration:underline;}

/*
button {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}
*/
@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media screen and (min-width: 800px) and (max-width: 999px) {
#herocontainer {width:100%; height:auto; }
#herocontent {width:80%; height:auto; margin-left:10%; margin-right:10%;}
#heroleft {width:58%; float:left; display:block; color:#ffffff; }
#heroright {width:40%; float:right; display:block;}
#note {margin-left:auto; margin-right:auto; width:650px;}
#note img {width:100%; height:auto; padding-top:30px;}
#maincontent {width:80%; margin-left:auto; margin-right:auto;}
}

@media screen and (max-width: 799px) {
.mobileonly {display:inline; visibility:visible;}
.desktoponly {display:none; visibility:hidden;}
h1 {width:100%; margin-left:auto; margin-right:auto;}
h1 img {width:80%; height:auto; margin-left:10%; margin-right:10%; padding-top:10px; padding-bottom:10px;}
#heroleft {width:96%; float:right; display:block; margin-left:2%; margin-right:2%; }
#heroright {width:90%; float:left; display:block; margin-left:5%; margin-right:5%; padding-top:10px; padding-bottom:15px;}
#heroright img {padding-top:0;}
.toppara {margin-top:20px;}
/*.buylinks{min-width:250px;flex-basis:100%; margin-left:auto; margin-right:auto; font-size:1.25em; text-transform:uppercase; letter-spacing: 0px; text-align:center;}*/
#herocontainer {width:100%; height:auto;}
#herocontent {width:90%; height:auto; margin-left:5%; margin-right:5%;}
#note {margin-left:auto; margin-right:auto; width:100%;}
#note img {width:100%; height:auto; padding-top:30px;}
#maincontent {width:90%; margin-left:auto; margin-right:auto;}
button {margin-bottom:0;}
#footerleft {width:90%; float:none; display:block; padding-left:0px; padding-top:36px; margin-left:5%; margin-right:5%;}
#footerright {float:none; display:block; padding-right:0px; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:50px;}
#sociallinks {width:100%; text-align: center}
#mclink {width:100%; text-align: center; padding-top:15px; padding-bottom:30px;}
}


@media screen and (min-width: 551px) and (max-width: 999px) {
.buylinks{flex-basis:100%; margin-left:auto; margin-right:auto; font-size:1.25em; text-transform:uppercase; letter-spacing: 0px; text-align:center;}
.buylinks ul li{margin:5px auto; width:44%; margin-left:3%; margin-right:3%; float:left; display: block; background-color:#ffffff}

 }

@media screen and (max-width: 550px) {
buylinks{min-width:280px;flex-basis:100%; margin-left:auto; margin-right:auto; font-size:1.25em; text-transform:uppercase; letter-spacing: 0px; text-align:center;}
.buylinks ul li{margin:5px auto; width:280px; float:left; display: block; background-color:#ffffff}

}