/*Begin Stylesheet*/


/* Normal */
@font-face {
    font-family: 'Nexa Rust';
    src: url('fonts/nexarustsans-black-webfont.eot');
    src: url('fonts/nexarustsans-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/nexarustsans-black-webfont.woff') format('woff'),
         url('fonts/nexarustsans-black-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


html, body{
	min-width: 1440px;
	overflow-x: hidden;
}
.sticky-nav{
	opacity: 0;
	position: fixed;
	top: -300px;
	left: 0;
	transition: 1s ease-in-out;
	z-index: 100;
}
.sticky-on{
	top: 0;
	opacity: 1;
}
.dropdown {
    position: fixed;
    top: -300px;
    opacity: 0;
    z-index: 80;
    box-shadow: 0px 10px 50px rgba(0,0,0,.8);
    transition: 1s ease-in-out;
}
.dropdown-on{
	top: 129px;
	opacity: 1;
}
.pick{
	display: block;
	position: fixed;
	top: 30%;
	right: -350px;
	opacity: 0;
	transition: 1s ease-in-out;
}
.pick-on{
	opacity: 1;
	right: 0px;
}
.faceplate{
    position: absolute;
    top: 771px;
    margin-left: 21vw;
}
.faceplate p{
	font-weight: bolder;
	text-transform: uppercase;
	color: #231f20;
	text-align: center;
	font-family: 'Nexa Rust';
	font-size: 22px;
	letter-spacing: 1px;
	transition: 2s ease-in-out;
	margin-top: -10px;
	margin-bottom: 0;
}
.knob-container{
	display: inline-block;
    width: 146px;
    background-image: url(images/knob-numbers.png);
    background-repeat: no-repeat;
}
.knob-container img{
	-webkit-transition: all 2000ms cubic-bezier(0.68, -0.25, 0.265, 1.15);
  	transition: all 2000ms cubic-bezier(0.68, -0.25, 0.265, 1.15);
}
.knob-container:hover{
	cursor: pointer;
}
.knob-container:hover img{
	transform: rotate(289deg);
}
.knob-container:hover p{
	color: #ad0b14;
}
.knob-container::before {
    background-image: url(images/knob-glow.png);
    opacity: 0;
    transition: 2s ease-in-out;
    content: ' ';
    display: block;
    width: 146px;
    height: 146px;
    background-repeat: no-repeat;
    position: absolute;
}
.knob-container:hover::before {
    opacity: 1;
}
.knob-container.drinks {
    margin: 0px 4.5vw 0px 8.5vw;
}
.knob-container.story {
    margin: 0 8.5vw 0 4.5vw;
}


@media screen and (max-width: 1441px){
	.faceplate{
		top: 565px;
		margin-left: 20vw;
	}
	.knob-container.drinks {
    	margin: 0px 3.5vw 0px 5.5vw;
	}
	.knob-container.story {
    	margin: 0 5.5vw 0 3.5vw;
	}
	.dropdown-on {
    	top: 95px;
	}
}