:root {
--gold: #a98055;
}

@font-face {
font-family: roach;
src: url(fonts/Roach.eot);
src: url(fonts/Roach.eot?#iefix) format("embedded-opentype"), 
url(fonts/Roach.woff2) format("woff2"), 
url(fonts/Roach.woff) format("woff"), 
url(fonts/Roach.ttf) format("truetype");
}

* {
margin:0;
padding:0;
}

.clear {
clear:both;
}

ul {
list-style:none;
margin:0;
padding:0;
}


a, a:hover {
-webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
				 -o-transition: color 0.3s linear;
								transition: color 0.3s linear;
text-decoration:none;
cursor:pointer !important;
}

img, img a {
border:0 none;
max-width:100%;
height:auto;
display:block;
}

body {
font-family:'roach', Arial;
color: var(--gold);
background:url(images/bg.jpg) top center no-repeat #000;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: none;
-webkit-font-smoothing: antialiased !important;
}

#website {
position:absolute;
top:10px;
right:15px;
font-size:24px;
text-transform:uppercase;
}

#website a {
color: var(--gold);
}

#website a:hover {
text-decoration:underline;
}

#container {
width:1200px;
margin:57vh auto 150px auto;
}

#btn {
margin:0 auto 30px auto;
text-align:center;
}

#btn a {
padding:8px 100px 5px 100px;
font-size:30px;
background-color: var(--gold);
color:#000;
font-weight:600;
text-transform:uppercase;
border-radius:5px;
-webkit-transition: background-color .2s linear;
			-moz-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
     -o-transition: background-color .2s linear;
    				transition: background-color .2s linear;
}

#btn a:hover {
background-color:rgb(169,128,85,.8);
}


#merch {
margin:0 0 70px 0;
}

#merch ul {
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:30px;
}

#merch #copy {
font-size:50px;
text-align:center;
text-transform:uppercase;
margin:0 0 20px 0;
text-shadow: 0px 0px 11px #000;
display:block;
}

#merch li {
border:5px solid;
border-color: var(--gold);
border-radius:5px;
padding:12px;
}

#merch .img {
margin:0 0 20px 0;
}

#merch li:hover img {
opacity:0.7;
-webkit-transition: opacity .2s ease-out;
			-moz-transition: opacity .2s ease-out;
    	-o-transition: opacity .2s ease-out;
								transition: opacity .2s ease-out;

}

#merch .title {
text-align:center;
font-size:24px;
text-transform:uppercase;
font-weight:600;
}

#merch a,
#merch a:hover {
color: var(--gold);
}


#stages ul {
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap:30px;
}

#stages #copy {
font-size:50px;
text-align:center;
text-transform:uppercase;
margin:0 0 20px 0;
text-shadow: 0px 0px 11px #000;
display:block;
}

#stages li img {
border:5px solid;
border-color: var(--gold);
border-radius:5px;
}

@media all and (min-width:1200px) {
#website.mobile {
display:none;
}
}

@media all and (max-width:1200px) {
body {
background:url(images/bg-mobile.jpg) no-repeat #000;
background-size: 100% auto;
}

#container {
width:80%;
margin:55vh 10% 100px 10%;
}

#btn a {
padding:8px 0 5px 0;
display:block;
}

#merch ul {
grid-template-columns:1fr 1fr;
}

#website.desktop {
display:none;
}

#website.mobile {
display:inherit;
text-align:center;
position:relative;
}
}

@media all and (max-width:900px) {
#container {
margin:25vh 10% 0 10%;
}

#merch ul {
grid-template-columns: 1fr;
}

#merch #copy {
font-size:30px;
}
}