@import url('css/normalize.min.css');
@import url('css/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;400;700&display=swap');

/*   
Theme Name: New American Syndicate
Theme URI: https://maroon-pony-531620.hostingersite.com
Description: The Sound of Liberation
Author: David Stagg for NAS
Author URI: https://davidstagg.com
Version: 3.0
*/

:root {
	--black: #000000;
	--grey-100: #151617;
	--grey-60: #58595B;
	--grey-40: #A6A7AA;
	--grey-10: #e5e5e5;
	--white: #ffffff;
	--primary: #ff0000;
	--primary-var: #A50000;
}

*, *:before, *:after { -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 16px; line-height: 1.8; color: var(--grey-100); scroll-behavior: smooth; }
button,input,select,textarea{color: var(--grey-100);}
::-moz-selection{background:var(--primary);color:var(--white);text-shadow:none}
::selection{background:var(--primary);color:var(--white);text-shadow:none}
.screenreader { clip: rect(1px, 1px, 1px, 1px); color: transparent; height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; }

hr{display:block;height:1px;border:0;border-top:1px solid var(--primary);margin:80px 0;padding:0}
hr.school-split { border-top: 4px solid var(--secondary); }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
img{height: auto;width:100%;}
cite { display: block; font-style: normal; }

fieldset{border:0;margin:0;padding:0}
textarea{resize:vertical}
.chromeframe{margin:.2em 0;background:var(--grey-100);color:var(--grey-100);padding:.2em 0}

figure { margin: 0; padding: 0; position: relative; }
figure a { display: block; }
figure img { display: block; }
figure figcaption a { display: inline; }

body { margin: 0; padding: 0; font-family: 'IBM Plex Mono',monospace; font-style: normal; font-weight: 400; }
em { font-style: italic; }
strong { font-style: normal; font-weight: 700; }
strong em { font-style: italic; font-weight: 700; }
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a h1, a h2, a h3, a h4, a h5, a h6 { font-family: 'TradeGothicBold',sans-serif; color: var(--black); text-decoration: none; text-transform: capitalize; }
h1, h2, h3, h4, h5, h6 { line-height: 1; margin: 48px 0 24px; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--primary-var); }
h1 { font-size: 3em; margin-top: 0; margin-bottom: 56px; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.3em; }

blockquote { margin: 40px 0; padding: 0; color: var(--grey-100); position: relative; z-index: 2; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote:before { content: "\201C"; font-size: 104px; line-height: 104px; color: var(--primary-var); position: absolute; left: 0; top: -56px; z-index: 1; }
blockquote cite { display: block; }

p, ul, ol, dl, dd { margin: 20px 0; }
ul, ol, dl, dd { padding: 0 0 0 20px; }
ul ul, ul ol, ol ol, ol ul { margin: 16px 0 16px 20px; }
li { margin: 8px 0; padding-left: 8px; }
small { position: relative; font-family: 'IBM Plex Mono',monospace; display: block; margin: 32px 0; font-size: 100%; font-size: 14px; }

a { color: var(--primary-var); outline: 0; text-decoration: none; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease; transition-timing-function: ease; }
a:hover, a:active { background-color: var(--primary); color: var(--white); outline: 0; }
a:focus { background-color: transparent; color: var(--primary-var); }


/* BUTTONS */
.btn, input[type="submit"], input[type="button"], .wp-block-buttons a.wp-block-button__link { margin: 0; padding: 0; background-color: var(--primary); color: var(--white); border-radius: 0; display: inline-block; position: relative; font-weight: bold; overflow: hidden; padding: 13px 16px 12px; text-decoration: none; text-align: center; border: 0; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .6s; transition-duration: .6s; -webkit-transition-timing-function: ease; transition-timing-function: ease; cursor: pointer; }
.btn:hover, input[type="submit"]:hover, input[type="button"]:hover, .wp-block-buttons a.wp-block-button__link:hover { background-color: var(--primary-var); }

/* GENERAL STYLES */
.shadow-b4 { box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 3px 6px 0 rgba(0,0,0,0.15); }
.shadow-b10 { box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15), 0 10px 20px 0 rgba(0,0,0,0.10); }
.centercenter { display: flex; align-items: center; justify-content: center; }
.vertcenter { display: flex; align-items: center; }
.animate { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: ease; transition-timing-function: ease; }
.container, .top-middle, section { position: relative; }

.grid-row { margin: 0; padding: 0; }
.grid-item-wrap { position: relative; padding: 16px 0; }
.grid-item-wrap .grid-item { text-align: center; background-color: var(--grey-10); display: block; border: 0; }
.grid-item-wrap .grid-item:hover { color: var(--grey-100); }
.grid-item-wrap .grid-item a { display: inline; }

.limiter { max-width: 960px; }
.home .limiter { background-color: var(--white); }

/*
HEADER
*/
header.proper { position: sticky; position: -webkit-sticky; top: 0; display: grid; grid: 1fr / auto auto; align-items: center; background-color: var(--black); z-index: 199; }
header.proper a.logo { display: block; padding: 10px; border: 0; }
header.proper a.logo:hover { background-color: var(--primary); }
header.proper a.logo img { display: block; height: 32px; width: auto; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
header.proper a.logo img.full-logo { display: none; }

/* top hat */
.hero { height: 100vh; overflow: hidden; background-color: var(--black); }
.not-front .hero { height: auto; }

.marquee { position: relative; width: 100vw; max-width: 100%; overflow-x: hidden; font-size: 48px; line-height: 1; text-transform: uppercase; white-space: nowrap; z-index: 1; height: 48px; color: var(--grey-40); }
.marquee .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.hero .color-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
.hero .bg-banner { background-size: 100%; background-position: center center; background-repeat: repeat; background-color: var(--black); display: block; z-index: -2; position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; -ms-transform: translateX( -50% ) translateY( -50% ); -moz-transform: translateX( -50% ) translateY( -50% ); -webkit-transform: translateX( -50% ) translateY( -50% ); transform: translateX( -50% )  translateY( -50% ); }
.hero video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100vh; pointer-events: none; -ms-transform: translateX( -50% ) translateY( -50% ); -moz-transform: translateX( -50% ) translateY( -50% ); -webkit-transform: translateX( -50% ) translateY( -50% ); transform: translateX( -50% )  translateY( -50% ); }
.hero .icon.icon-down-arrow { position: absolute; bottom: 24px; left: 50%; margin-left: -22px; color: var(--grey-60); z-index: 99; }
.hero .icon.icon-down-arrow:before { display: block; width: 44px; height: 44px; font-size: 44px; line-height: 1; text-align: center; content: '\21DF'; }


.menu-holder { display: flex; align-items: center; justify-content: end; padding-right: 8px; }
.menu-holder .header-btn { cursor: pointer; border: 0; color: var(--white); background-color: transparent; padding: 14px; }
.menu-holder .header-btn:active { outline: none; }
.menu-holder .header-btn a:hover { background-color: transparent; }
.menu-holder .header-btn.profile-menu { margin-right: 0; }

.menu-holder .header-btn .menu-icon { display: block; speak: none; width: 24px; height: 24px; overflow: hidden; position: relative; }
.menu-holder .header-btn .menu-icon:before { display: inline-block; font-size: 28px; line-height: 1; font-weight: bold; color: var(--white); }
.menu-holder .header-btn.main-menu .menu-icon:before { content: "\2630"; position: absolute; top: -5px; left: 0; }
.menu-holder .header-btn.profile-menu .menu-icon:before { content: "\2620"; margin-top: -3px; }
.menu-holder .header-btn.close-menu .menu-icon:before { content: "\2715"; margin-top: -1px; }

.menu-holder .header-btn.profile-menu ul { display: none; position: absolute; list-style: none; margin: 0; padding: 0; top: 52px; right: 0; }
.menu-holder .header-btn.profile-menu:hover ul { display: block; }
.menu-holder .header-btn.profile-menu ul li { margin: 0; padding: 0; }
.menu-holder .header-btn.profile-menu ul li a { display: block; color: var(--grey-10); background-color: var(--black); padding: 12px 16px; text-align: right; }
.menu-holder .header-btn.profile-menu ul li a:hover { color: var(--white); background-color: var(--primary); }

.nav-background { background-color: var(--black); height: 100vh; width: 100vw; position: fixed; right: 0; top: 0; opacity: 0; z-index: 200; pointer-events: none; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; }
.nav-open .nav-background { opacity: .1; pointer-events: all; }
.nav { background-color: var(--primary); color: var(--white); position: fixed; top: 0; width: 100vw; height: 100vh; z-index: 666; overflow-y: scroll; pointer-events: none; overflow-x: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.19,1,.22,1) 150ms; transition: -webkit-transform .3s cubic-bezier(.19,1,.22,1) 150ms; transition: transform .3s cubic-bezier(.19,1,.22,1) 150ms; transition: transform .3s cubic-bezier(.19,1,.22,1) 150ms,-webkit-transform .3s cubic-bezier(.19,1,.22,1) 150ms; }
.nav-open .nav { pointer-events: all; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: -webkit-transform .3s cubic-bezier(.19,1,.22,1); transition: -webkit-transform .3s cubic-bezier(.19,1,.22,1); transition: transform .3s cubic-bezier(.19,1,.22,1); transition: transform .3s cubic-bezier(.19,1,.22,1),-webkit-transform .3s cubic-bezier(.19,1,.22,1); }
.nav-wrapper { position: relative; opacity: 0; -webkit-transition: opacity 100ms ease-in; transition: opacity 100ms ease-in; }
.nav-header { padding: 8px; text-align: right; }
.nav-open .nav-wrapper { opacity: 1; z-index: 2; -webkit-transition: opacity .3s ease-in 200ms; transition: opacity .3s ease-in 200ms; }
.nav-wrapper ul { display: none; text-align: left; margin: 0; padding: 0; list-style: none; background-color: var(--primary); }
.nav-open .nav-wrapper ul { display: block; margin-bottom: 24px; }
.nav-wrapper ul li { margin: 0; padding: 0; }
.nav-wrapper ul li a { display: block; border: none; padding: 8px 12px; color: var(--white); font-family: 'IBM Plex Mono', monospace; }
nav .search {  }
nav form input[type="search"] { font-family: 'IBM Plex Mono', monospace; display: block; width: 100%; padding: 16px 12px; line-height: 1; border: 0; background-color: var(--primary); color: var(--white); }
nav ::placeholder { color: var(--white); }
nav form input[type="search"]:focus,
nav form input[type="search"]:active { outline: none; background-color: var(--light-grey); color: var(--black); }
nav form input[type="search"]:focus::placeholder { color: var(--black); }





/* MAIN */
.main-content { position: relative; margin-bottom: 64px; padding: 56px 8px 8px; }
.main-content .feat-img { margin-left: -8px; width: calc(100% + 16px); }


/* FOOTER */

footer { position: relative; margin: 0 8px; border-top: 4px solid var(--grey-10); padding: 40px 0; color: var(--grey-60); font-size: 14px; }
footer section { margin: 32px 0; }

footer ul.menu { list-style: none; margin: 0; padding: 0; }
footer ul.menu li { margin: 0; padding: 0; }
footer ul.menu li a { display: inline-block; }
footer img.logo { display: block; max-width: 196px; margin: 0 auto 40px; }

footer .colophon small { margin: 0; }



@media only screen and (min-width: 768px) {
	
	h1 { font-size: 4em; }
	.full-panel { height: 100vh; }
	
	header.proper a.logo img.wordmark { display: none; }
	header.proper a.logo img.full-logo { display: block; height: 48px; }
	
	nav.main-navigation ul { text-align: right; left: auto; }
	
	.header-btn .menu-icon { width: 32px; height: 32px; }
	.header-btn .menu-icon:before { font-size: 36px; }
	.header-btn.profile-menu .menu-icon:before { margin-top: -4px; }
	.header-btn.main-menu .menu-icon:before { top: -6px; }
	.header-btn.profile-menu { position: relative; }
	.header-btn.profile-menu ul { top: 40px; left: auto; }
	.header-btn.profile-menu ul li a { width: 240px; }

	/* HERO */
	.not-front .hero { height: auto; max-width: 708px; margin: 0 auto; padding: 0; }
	.hero .bg-banner { background-position: center center; }
	.hero .action-items a { color: var(--white); display: inline-block; margin-bottom: 0; padding: 8px 24px 7px; font-size: 16px; line-height: 24px; }
	.hero .action-items .secondary-btn { padding: 9px 24px 8px;  }
	.hero .action-items .secondary-btn:hover { color: var(--grey-100); background-color: var(--white); border-color: var(--white); }
	.hero .icon { position: absolute; bottom: 64px; left: calc(50% - 12px); }
	.hero p.hyphen { font-size: 22px; line-height: 22px; margin-top: 32px; }
	
	
	.grid-row { display: flex; flex-flow: row wrap; justify-content: center; align-content: space-between; }
	.grid-item-wrap { flex-basis: 50%; -ms-flex: auto; }
	
	
	/* FOOTER */
	footer small.colophon { margin: 0; }

}

@media only screen and (min-width: 1024px) {
	
	nav.main-navigation ul { left: 0; top: 64px; }
	

}


/* PRINT STYLES */
@media print {
	blockquote,img,pre,tr{page-break-inside:avoid}
	*,:after,:before{ background:0 0!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
	a,a:visited{text-decoration:underline}
	a[href]:after{content:" (" attr(href) ")"}
	abbr[title]:after{content:" (" attr(title) ")"}
	a[href^="#"]:after,
	a[href^="javascript:"]:after{content:""}
	pre{white-space:pre-wrap!important}
	blockquote,pre{border:1px solid #999}
	thead{display:table-header-group}
	h2,h3,p{orphans:3;widows:3}
	h2,h3{page-break-after:avoid}
}


.center { text-align: center; }
img.desaturate { -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); filter: gray; filter: grayscale(100%); }
.screenreaders { position: absolute; top: -9999vh; left: 0; width: 1px; height: 1px; overflow: hidden; }
.animate.animated { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }