@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;0,800;1,300;1,400;1,600;1,800&display=swap');

/* Table of Content
==================================================
	#Colors
	#Site Styles
	#UIKit Styles
	#Page Styles
	#Media Queries
	#Font-Face */


/* Colors 
================================================== */
:root {
  --blue: #869aa9;
  --tan: #eae4d5; 
  --gray: #414142;
}

/* #Site Styles
================================================== */
html, body		{ color:var(--gray); font-size:16px; font-weight:300; font-family:'Raleway', 'Helvetica Nueu', 'Helvetica', Arial, sans-serif; line-height:1.5rem; }

.aligncenter 	{ text-align:center; }
.alignleft		{ text-align:left; }
.alignright		{ text-align:right; }
	img.aligncenter { float:none; display:block; margin:0 auto 15px; }
	img.alignleft	{ float:left; margin-right:15px; }
	img.alignright	{ float:right; margin-left:15px; }

.w900 			{ font-weight:900; }
.w800			{ font-weight:800; }
.w700			{ font-weight:700; }
.w600			{ font-weight:600; }
.w500			{ font-weight:500; }
.w400			{ font-weight:400; }
.w300			{ font-weight:300; }
.w200			{ font-weight:200; }
.w100			{ font-weight:100; }

.font12			{ font-size:12px; }
.font14			{ font-size:14px; }
.font16			{ font-size:16px; }
.font18			{ font-size:18px; }
.font20			{ font-size:20px; }
.font24			{ font-size:24px; }
.font28			{ font-size:28px; }
.font30			{ font-size:30px; }
.font32			{ font-size:32px; }
.font36			{ font-size:36px; }
.font40			{ font-size:40px; }
.font50			{ font-size:50px; }
.font60			{ font-size:60px; }
.font70			{ font-size:70px; }

.s1				{ letter-spacing:1px; }
.s2				{ letter-spacing:2px; }
.s3				{ letter-spacing:3px; }
.s4				{ letter-spacing:4px; }
.s5				{ letter-spacing:5px; }
.s6				{ letter-spacing:6px; }
.s7				{ letter-spacing:7px; }
.s8				{ letter-spacing:8px; }

.lh1			{ line-height:1em; }
.lh2			{ line-height:1.2em; }

h1, h2, h3, h4	{ font-family:'Raleway', 'Helvetica Nueu', 'Helvetica', Arial, sans-serif; color:inherit; line-height:1.2em; }

h1				{ font-size:60px; font-weight:300; }
h2				{ font-size:32px; font-weight:300; text-transform:uppercase; }
h3				{ font-size:14px; font-weight:800; text-transform:uppercase; }

em				{ color:inherit; font-weight:600; }

/* #UIKit Styles
================================================== */
.uk-button { font-size:14px; font-weight:800; font-family:'Raleway', 'Helvetica Nueu', 'Helvetica', Arial, sans-serif; border:2px solid var(--gray); color:var(--gray); }
	.uk-button:hover { background:var(--gray); color:#fff; }
	
	.uk-button-blue { border-color:var(--blue); color:var(--blue); }
	.uk-button-blue:hover { background:var(--blue); color:#fff; }

	.uk-button-contrast { border-color:#fff; color:#fff; }
	.uk-button-contrast:hover { background:#fff; color:var(--blue); }

.uk-container-alt { padding:0 2%; }

.uk-section-blue, .uk-background-blue { background:var(--blue); color:#fff; }
.uk-section-tan, .uk-background-tan { background:var(--tan); color:var(--gray); }
.uk-section-gary, .uk-background-gray { background:var(--gray); color:#fff; }
.uk-section-white, .uk-background-white { background:#fff; color:var(--gray); }

.uk-text-blue { color:var(--blue) !important; }
.uk-text-tan { color:var(--tan) !important; }
.uk-text-gray { color:var(--gray) !important; }


/* #Page Styles
================================================== */
.banner { background:var(--gray); color:#fff; border-bottom:4px solid var(--blue); padding:5px 35px 10px; max-width:100%; width:600px; }

.date { position:absolute; bottom:0; right:0; background:var(--blue); color:#fff; font-size:18px; font-weight:800; padding:5px 10px; line-height:.8em; text-align:center; }
	.date span { display:block; font-size:11px; font-weight:600; text-transform:uppercase;  }

.header { position:absolute; z-index:10; width:100%; padding:10px 0; }
	
	.header .logo { float:left; width:205px; }
	.header nav { float:right; margin-top:50px; }
		.header .uk-navbar-nav>li>a { color:#fff; font-size:18px; font-weight:400; font-family:'Raleway', 'Helvetica Nueu', 'Helvetica', Arial, sans-serif; text-transform:inherit; }
		.header .uk-button { margin-top:10px; margin-left:50px; height:60px; width:60px; line-height:60px; border-radius:30px; padding:0; background:rgba(255,255,255,0.4); border-color:#fff; color:#fff; font-size:20px; }

.hero { padding-bottom:50px; position:relative; }
	.hero:before { content:''; position:absolute; top:0; left:0; width:100%; background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.835171568627451) 0%, rgba(0,0,0,0) 100%); min-height:40%; z-index:2; }

.title { margin-bottom:15px; padding-bottom:25px; position:relative; }
	.title:after { content:''; position:absolute; bottom:0; left:0; right:0; margin:0 auto; height:3px; width:150px; background:var(--gray); }
	.title h3 { background:var(--gray); color:#fff; padding:5px 10px; margin-bottom:5px; line-height:1em; display:inline-block; }
	.title h2 { margin:0; padding:0; line-height:1em; }

	.title.blue:after { background:var(--blue); }
	.title.blue h3 { background:var(--blue); }


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		h1 { font-size:32px; }
		h2 { font-size:26px; }
		h3 { font-size:12px; }

		.banner { width:350px; box-sizing:border-box; padding-left:10px; padding-right:10px; }
		.banner h3 { font-size:10px; }

		.header .logo { float:left; width:130px; }
		.header nav { float:right; margin-top:10px; }
		.header .uk-button { height:40px; width:40px; line-height:40px; border-radius:20px; font-size:16px; }

		.title { margin-bottom:15px; padding-bottom:15px; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/