/* RESET
======================================================== */

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active, a:hover { outline-width: 0; }
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button,
html [type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"],
[type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }


/* FRAMEWORK
======================================================== */

.container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.column, .columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}
/* For devices larger than 320px */
@media (min-width: 320px) { .container { width: 84%; padding: 0; } }
/* For devices larger than 400px */
@media (min-width: 480px) { .container { width: 85%; padding: 0; } }
/* For devices larger than 550px */
@media (min-width: 660px) {
    .container { width: 80%; }
    .column, .columns { margin-left: 4%; }
    .column:first-child, .columns:first-child { margin-left: 0; }

    .one.column,
    .one.columns                    { width: 4.66666666667%; }
    .two.columns                    { width: 13.3333333333%; }
    .three.columns                  { width: 22%;            }
    .four.columns                   { width: 30.6666666667%; }
    .five.columns                   { width: 39.3333333333%; }
    .six.columns                    { width: 48%;            }
    .seven.columns                  { width: 56.6666666667%; }
    .eight.columns                  { width: 65.3333333333%; }
    .nine.columns                   { width: 74.0%;          }
    .ten.columns                    { width: 82.6666666667%; }
    .eleven.columns                 { width: 91.3333333333%; }
    .twelve.columns                 { width: 100%; margin-left: 0; }

    .one-third.column               { width: 30.6666666667%; }
    .two-thirds.column              { width: 65.3333333333%; }

    .one-half.column                { width: 48%; }
}

/* For essentially any non-mobile device (ie desktop upwards), larger than 1025px */
@media (min-width: 1025px) { .container { width: 88%; } }


/* LISTS
======================================================== */

ul { list-style: circle inside; }
ol { list-style: decimal inside; }
ol, ul { padding-left: 0; margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li { list-style-type: disc; font-size: 1.6rem; margin-bottom: 1rem; }
ul ul li { list-style-type: circle; }


/* SPACING
======================================================== */
button, .button { margin-bottom: 1rem; }
input, textarea, select, fieldset { margin-bottom: 1.5rem; }
pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.4rem; }


/* UTILITIES
======================================================== */

.u-full-width {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right { float: right; }
.u-pull-left { float: left; }


/* MISC
======================================================== */

hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid #E1E1E1;
}
.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both;
}


/* FONTS
======================================================== */

/*-- Whiskey Town Sober type-face for headings --*/
@font-face {
	font-family: 'Regulators';
	src: url('../fonts/regulators/Regulators.woff2') format('woff2'),
		 url('../fonts/regulators/Regulators.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*-- Prestige Elite type-face for body --*/
@font-face {
	font-family: 'Prestige_Elite';
	src: url('../fonts/prestige_elite/Prestige_Elite_Bld.woff2') format('woff2'),
		 url('../fonts/prestige_elite/Prestige_Elite_Bld.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}


/* TYPOGRAPHY
======================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Regulators';
    font-weight: normal;
    color: #3e3026;
    margin-top: 0;
    margin-bottom: 2rem;
}
h1 { font-size: 3.9rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.3rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.8rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.0rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.5rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.1rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
    h1 { font-size: 4.8rem; }
    h2 { font-size: 4.0rem; }
    h3 { font-size: 3.3rem; }
    h4 { font-size: 2.8rem; }
    h5 { font-size: 2.0rem; }
    h6 { font-size: 1.2rem; }
}

p {
    font-size: 1.8rem;
    line-height: 2.8rem;
    margin-top: 0;
}
i, em { font-style: italic; }
b, strong { font-weight: bold; font-weight: 700; }
a { color: #d87512; text-decoration: none; }
a:active, a:focus, a:hover { color: #c36100; text-decoration: underline; }


/* GLOBAL
======================================================== */

html { height: 100%; font-size: 62.5%; overflow-x: hidden; }
body {
    display: table;
/*    background-color: #f9f4b7;*/
	background: linear-gradient(
        rgba(255, 224, 0, 0.24), 
        rgba(243, 191, 44, 0.75)
    ),
    url(../img/bkgrd_pat.png) repeat;
	background-attachment: fixed;
    font-family: 'Prestige_Elite';
    color: #554437;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: greyscale;
}
/* -- Main Wrapper & Sticky Footer Properties --*/
#wrap {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
}
header, footer, main { display: table-row; }
header, footer { height: 1px; }
main { position: relative; height: 100%; }

.left { float: left; }
.right { float: right; }
.center { display: block; margin: 0 auto; clear: both; text-align: center; }
.clear { clear: both; }
.hide, .displaynone, .none { display: none; }
.disabled { pointer-events: none; opacity: 0.4; }

/*-- Addition of global Box-Sizing rule to all elements, including ones not covered by framework --*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* MAIN AREA
======================================================== */

/*-- Sun glare effect in top-right corner --*/
#wrap::after {
	content: "";
	position: absolute;
	background: -webkit-radial-gradient(
        top right,
		rgba(244, 236, 217, 0.82),
		rgba(237, 201, 101, 0.7),
		rgba(245, 214, 128, 0.48),
        rgba(255, 224, 0, 0)
    );
	background: radial-gradient(
        at top right,
		rgba(244, 236, 217, 0.82),
		rgba(237, 201, 101, 0.7),
		rgba(245, 214, 128, 0.48),
        rgba(255, 224, 0, 0)
    );
	top: 0;
	right: 0;
	width: 100%;
	height: 39%;
	opacity: 0.4;
}

/*-- Logo and shadow heat haze settings --*/
.logo { margin: 39px auto -12px; }
.logo img { display: block; margin: 0 auto; }
.logo .logo_main { width: 57%; max-width: 246px; }
.logo .logo_shadow { 
	width: 20%;
	max-width: 112px;
	height: 66px;
	opacity: 0.6;
	overflow: visible;
	-webkit-animation: logo_shadow_haze 9.3s infinite forwards cubic-bezier(0.125, 0.055, 0.830, 0.570);
			animation: logo_shadow_haze 9.3s infinite forwards cubic-bezier(0.125, 0.055, 0.830, 0.570);
	-webkit-transform-origin: top right;
			transform-origin: top right;
}

/*-- Main text and social media links --*/
.notes { margin-bottom: 39px; }
.notes h2 { text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 24px; }
.notes p { margin: 0 auto; }
.sm_links ul {
	display: block;
	list-style: none;
	text-align: center;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}
.sm_links li {
	display: inline-block;
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
.sm_links li a {
	display: block;
	position: relative;
	width: 93px;
	height: 93px;
	margin: 0 auto;
}
.sm_links li a::after {
	content: "";
    position: absolute;
    background-color: blue;
    background: url(../img/sm_link_bkgrd.svg) no-repeat center center;
    top: -25px;
    left: -35px;
    width: 133px;
    height: 133px;
    margin: 0 auto;
    z-index: 9;
}
.sm_links li:nth-child(2n) a::after {
	top: -13px;
    left: -4px;
	-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
			transform: rotate(180deg);
}
.sm_links li a img {
	position: relative;
	width: 50%;
	margin: 22px auto 0;
	z-index: 10;
}
.sm_links li:first-child a img { margin-top: 29px; }
.sm_links li:nth-child(2n) a img { margin-top: 25px; }
.sm_links li:last-child a img { margin-top: 24px; }

/*-- Minor footer/copyright settings --*/
footer { position: relative; }
.footer_inner { position: relative; padding-bottom: 12px; }
.footer_inner p { font-size: 1em; text-align: center; margin-bottom: 6px; }

/*-- Keyframes for shadow heat haze effect --*/
@-webkit-keyframes logo_shadow_haze {
    0%, 100% {
		-webkit-transform: translate(78%, -186%) scale(4) skewX(0deg);
			-ms-transform: translate(78%, -186%) scale(4) skewX(0deg);
				transform: translate(78%, -186%) scale(4) skewX(0deg);
	}
	48% {
		-webkit-transform: translate(78%, -186%) scale(4) skewX(-3deg);
			-ms-transform: translate(78%, -186%) scale(4) skewX(-3deg);
				transform: translate(78%, -186%) scale(4) skewX(-3deg);
	}
	75% {
		-webkit-transform: translate(78%, -186%) scale(4) skewX(2deg);
			-ms-transform: translate(78%, -186%) scale(4) skewX(2deg);
				transform: translate(78%, -186%) scale(4) skewX(2deg);
	}
}
@keyframes logo_shadow_haze {
    0%, 100% {
		-webkit-transform: translate(78%, -186%) scale(4) skewX(0deg);
			-ms-transform: translate(78%, -186%) scale(4) skewX(0deg);
				transform: translate(78%, -186%) scale(4) skewX(0deg);
	}
	48% {
		-webkit-transform: translate(78%, -186%) scale(4) skewX(-3deg);
			-ms-transform: translate(78%, -186%) scale(4) skewX(-3deg);
				transform: translate(78%, -186%) scale(4) skewX(-3deg);
	}
	75% {
		-webkit-transform: translate(78%, -186%) scale(4) skewX(2deg);
			-ms-transform: translate(78%, -186%) scale(4) skewX(2deg);
				transform: translate(78%, -186%) scale(4) skewX(2deg);
	}
}


/* MEDIA QUERIES
======================================================== */

@media screen and (min-width: 480px) {
 
	.logo { margin-bottom: 6px; }
	.notes h2 { margin-bottom: 33px; }
	.sm_links { margin-bottom: 12px; }
	.sm_links li { width: 24%; margin-right: 48px; vertical-align: middle; }
	.sm_links li:last-child { margin-right: 0; }
    
}

@media screen and (min-width: 660px) {
	
	#wrap::after { opacity: 0.4; }
	
	.logo { margin-bottom: 15px; }
	
	@-webkit-keyframes logo_shadow_haze {
		0%, 100% {
			-webkit-transform: translate(78%, -175%) scale(4) skewX(0deg);
				-ms-transform: translate(78%, -175%) scale(4) skewX(0deg);
					transform: translate(78%, -175%) scale(4) skewX(0deg);
		}
		48% {
			-webkit-transform: translate(78%, -175%) scale(4) skewX(-3deg);
				-ms-transform: translate(78%, -175%) scale(4) skewX(-3deg);
					transform: translate(78%, -175%) scale(4) skewX(-3deg);
		}
		75% {
			-webkit-transform: translate(78%, -175%) scale(4) skewX(2deg);
				-ms-transform: translate(78%, -175%) scale(4) skewX(2deg);
					transform: translate(78%, -175%) scale(4) skewX(2deg);
		}
	}
	@keyframes logo_shadow_haze {
		0%, 100% {
			-webkit-transform: translate(78%, -175%) scale(4) skewX(0deg);
				-ms-transform: translate(78%, -175%) scale(4) skewX(0deg);
					transform: translate(78%, -175%) scale(4) skewX(0deg);
		}
		48% {
			-webkit-transform: translate(78%, -175%) scale(4) skewX(-3deg);
				-ms-transform: translate(78%, -175%) scale(4) skewX(-3deg);
					transform: translate(78%, -175%) scale(4) skewX(-3deg);
		}
		75% {
			-webkit-transform: translate(78%, -175%) scale(4) skewX(2deg);
				-ms-transform: translate(78%, -175%) scale(4) skewX(2deg);
					transform: translate(78%, -175%) scale(4) skewX(2deg);
		}
	}

}

@media screen and (min-width: 1025px) {
	
	#wrap::after {
		background: -webkit-radial-gradient(
			66% -20%,
			rgba(244, 236, 217, 0.82),
			rgba(237, 201, 101, 0.7),
			rgba(245, 214, 128, 0.48),
			rgba(255, 224, 0, 0)
		);
		background: radial-gradient(
			at 66% -20%,
			rgba(244, 236, 217, 0.82),
			rgba(237, 201, 101, 0.7),
			rgba(245, 214, 128, 0.48),
			rgba(255, 224, 0, 0)
		);
		width: 60%;
		height: 66%;
		opacity: 0.3;
	}
	
	.logo { margin: 48px auto 39px; }
	.notes { margin-bottom: 48px; }

}