/*
* @Author: Nathan
* @Date:   2020-06-16 12:53:33
* @Last Modified by:   Nathan
* @Last Modified time: 2020-06-18 16:58:54
*/
@charset "utf-8";

:root
{
	--site-max-width:1200px;
	--site-banner-height:200px;
	--site-navbar-height:30px;
	--site-bg-color:hsl(206, 10%, 3.5%);

	--content-bg-color:#1f2326;
	--content-bg-color:hsl(206, 10%, 8%);

	--content-block-color:hsl(206, 10%, 12%);
	--content-border-color:rgba(100,100,100,.25);

	--font-family: Arial, Helvetica, sans-serif;


    --border-main:0.01em solid gray;

    --bg-color-normal:#404040FF;
    --bg-color-link:;
    --bg-color-active:hsl(0, 0%, 40%);
    --text-color-normal: hsl(0, 0%, 70%);
    --text-color-normal-bold: hsl(0, 0%, 80%);
    --text-color-hover: hsl(0, 0%, 90%);
    --text-color-active: white;
}

body 
{
	background-color: var(--site-bg-color);
	background-attachment:scroll;
	background-clip:border-box;
	background-image:url(../images/bg.noise.png);
	background-origin:padding-box;
	background-position-x:0%;
	background-position-y:0%;
	background-repeat-x:;
	background-repeat-y:;
	background-size:100px;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
}

.content-wrapper
{
	max-width: var(--site-max-width);
	margin-right: auto;
  	margin-left: auto;
}

/*---------------- Banner Start -----------------*/
.content-wrapper .banner-wrapper
{
	font-family: var(--font-family);
	width: var(--site-max-width);
	height: var(--site-banner-height);
	position: relative;
}

.content-wrapper .banner-wrapper .banner-title-wrapper
{
	display: inline;
	float:left;
   	position: absolute;
	top: 100px;
	z-index: 10;
	margin: 10px;
	mix-blend-mode: luminosity;
	text-shadow: 2px 2px 10px rgba(0,0,0,.5);
}

.content-wrapper .banner-wrapper .banner-title-wrapper h1
{
	font-family: var(--font-family);
	font-weight: bolder;
	text-transform: uppercase;
	letter-spacing: 15px;
	color: var(--text-color-normal-bold);
	z-index: 10;
}

.content-wrapper .banner-wrapper .banner-title-wrapper p
{
	font-family: var(--font-family);
	letter-spacing: 4px;
	color: var(--text-color-normal);
	z-index: 10;	
}

.content-wrapper .banner-wrapper .banner-carousel
{
	position: relative;
	width: var(--site-max-width);
	height: var(--site-banner-height);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
	overflow: hidden;
	z-index: 2;
}

.content-wrapper .banner-wrapper .banner-carousel  > img
{
	object-fit: cover;
	object-position: 50% 50%;
	z-index: 0;
}


/*---------------- Banner End -----------------*/






/*---------------- Navbar Start -----------------*/

.content-wrapper .navbar-wrapper
{
	position: relative;
	border: var(--border-main);
	border-bottom: 0px;
	margin: 0px;
}

.content-wrapper .navbar-wrapper .navbar
{
	max-width: var(--site-max-width);
	height: var(--site-navbar-height);
	line-height: var(--site-navbar-height);	
}

.content-wrapper .navbar-wrapper .navbar ul li
{
	display: inline-block;
	margin-left: 20px;
	margin-right: 20px;
}

.content-wrapper .navbar-wrapper .navbar ul li a
{
	font-family: var(--font-family);
	letter-spacing: 4px;
}

.content-wrapper .navbar-wrapper .navbar .social-media li
{
	display: inline-block;
	margin-left: 4px;
	margin-right: 4px;
}

/*---------------- Navbar End -----------------*/







/*---------------- Loaded Content Start -----------------*/
.content-wrapper .content-loader
{
	position: relative;
	width: 100%;
	border: var(--border-main);
	min-height: 100px;
	background-color: var(--content-bg-color);
	color:var(--text-color-normal);
	z-index: 100;
}

.content-wrapper .content-loader h1
{
	font-family: var(--font-family);
	text-transform: uppercase;
	letter-spacing: 10px;
	color: var(--text-color-normal);
	margin: 5px;
	font-size: 1em;
	opacity: .25;
}
.content-wrapper .content-loader p
{
	opacity: 1;
}

.content-wrapper .content-loader .reel-wrapper{}

.content-wrapper .content-loader .reel-wrapper iframe{}

.content-wrapper .content-loader .content-block
{
	margin:10px;
/*	margin-top: 15px;
	margin-bottom:15px;*/
	padding:10px;
	border: var(--border-main);
	border-color: var(--content-border-color);
	background-color: var(--content-block-color);
/*	text-shadow: 2px 2px 10px black;
	box-shadow: 2px 2px 10px black;*/

}

/*---------------- Loaded Content End -----------------*/