/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> COLORS and SIZES (import)  - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


@import 'sass-variables';


/* END _sass-variables import */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> RESET (import) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


@import 'reset';


/* END _reset import */



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> FONTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,200i,400,400i,600,600i,800,800i');

body 							{ font-weight: 200; font-style: normal; font-family: 'Nunito Sans', 'Arial', sans-serif; color: white; font-size: 20px; line-height: 1.5; }
b,.b,strong,.strong				{ font-weight: 800; 
	
	span { position: relative; }	

}

/*
 * Primary Content and Structure CSS
 */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> GLOBAL ELEMENTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

p								{ margin-bottom: .65rem; }
#content p:not([class])			{ text-shadow: 0 0 4px rgba($COLOR2DK,.99); }

a								{ color: inherit; border-bottom: 1px dotted $COLORMAIN2; text-decoration: none; transition: color .3s ease-out, border .6s ease-out; }
a:hover							{ color: $COLORMAIN2; border-color: white; }
a:active						{ color: $COLOR2DK; }

.nowrap							{ white-space: nowrap; }

.attn							{ color: #f69; }
.centered						{ text-align: center; }
.gotele							{ white-space: nowrap; }


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> COMMON CONTAINERS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

html							{ background: rgba($COLORBG, 1); }
body							{ }

#wrap							{ width: 70%; border: 1px solid rgba(white,.25); border-top: 0;  margin: 0 auto; min-height: 90vh; position: relative; }

header							{ position: relative;    min-height: 8rem; background: rgba(black,.25); padding: 2rem; }
footer							{ position: absolute;    min-height: 8rem; background: rgba(black,.25); bottom: 0; width: 100%; }
main							{ position: relative; margin-bottom: 8rem; padding: 3rem; }

#content						{ background: darkgreen; }




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> NAV & BRANDING - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#logo							{ width: 200px; border: 0; // top: 0; left: 0; position: absolute;

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

nav a							{ text-decoration: none; color: white;  border-bottom: 1px dotted transparent;  font-weight: 600; }
nav a:hover						{ text-decoration: none; color: orange; border-bottom: 1px dotted yellow; }
nav a:active					{ text-decoration: none; color: yellow; border-bottom: 1px dotted orange; }
nav li							{ padding: 0 .5em; }
nav li:last-child 				{ padding-right: 0; }

nav.navmain						{ position: absolute; right: 0; top: 0; }
nav.navmain ul					{ display: flex; flex-direction: row; }
nav.navmain ul li a				{ display: block; font-size: 90%; text-transform: uppercase; }


//
//
//
// Make Nav Function Controls for RWD
//
//
//

// Style 'show menu' label button and hide it by default
header .show-menu 				{ display: none; text-decoration: none; }

// Hide checkbox
header input[type=checkbox]		{ display: none; -webkit-appearance: none; }

// Show menu when invisible checkbox is checked ... (~) is sibling but not adjacent (+)
header input[type=checkbox]:checked ~ nav
								{ display: block; }
// Fix "Hide Menu" display visuals
header input[type=checkbox] + label span
								{ display: none; }
header input[type=checkbox]:checked + label span
								{ display: inline; }


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> CONTENT COMMONS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

h1,.h1							{ font-size: 3.5rem; margin: 1em 0 .25rem 0; line-height: .95; }
h2,.h2							{ font-size: 2.0rem; margin: 1em 0 .25rem 0; line-height: 1.0; color: $COLORMAIN1; }
h3,.h3							{ font-size: 1.5rem; margin: 1em 0 .25rem 0; line-height: 1.0; color: $COLOR2DK; 		font-weight: 600; }
h4,.h4							{ font-size: 1.4rem; margin: 1em 0 .25rem 0; line-height: 1.0; color: $COLOR2DK; 		font-weight: 600; }
h5,.h5							{ font-size: 1.3rem; margin: 1em 0 .25rem 0; line-height: 1.0; color: $COLOR2DK; 		font-weight: 800; }
h6,.h6							{ font-size: 1.2rem; margin: 1em 0 .25rem 0; line-height: 1.0; color: $COLOR2DK; 		font-weight: 800; }
.inset .hx						{ font-size: 115%;   margin: 0em 0 .25rem 0; line-height: 1.0; color: $COLOR2DK; 		font-weight: 600; }
.callout .hx					{ 															   color: $COLORMAIN1; 		font-weight: 200; }

h1:first-child,.h1:first-child,
h2:first-child,.h2:first-child,
h3:first-child,.h3:first-child,
h4:first-child,.h4:first-child,
h5:first-child,.h5:first-child,
h6:first-child,.h6:first-child,
.hx:first-child					{ margin-top: 0; }

.inset							{ margin: 1em 0; border-radius: 1.5rem; padding: 1rem;  }



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> FOOTER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

footer							{ 

	.fdescriptor					{ text-align: center; padding: 2rem; color: rgba(white,.35); font-size: 65%; }
	.copyright						{ text-align: center; color: rgba($COLOR2LT,.85); font-size: 0%; }

	}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> HOMEPAGE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */











@media only screen and (max-width: $RWDbreak1) {



}



@media only screen and (max-width: $RWDbreak2) {



}



@media only screen and (max-width: $RWDbreak3) {

	header .show-menu 				{ position: absolute; top: 3vw; right: 2vw; display: block; z-index: 101; font-size: 18px; background: none; color: white; text-align: center; padding: 10px 0; }


}