@font-face {
  font-family: 'Lexend';
  src:  url('lexend.ttf');
}

html {
  overflow-y: scroll;
}

body {
	/*
	green 1f2c1e
	purple 261e2c
	*/

	background-color:#000000;
	
	background-image:url("content/background_woodStretched.png");
	background-repeat: repeat;
	background-size: 1920px 20000px;
	
	padding:0px;
	margin:0px;
	max-width: 100%;
}

div.edge_fade{
	position:fixed;
	background-image:url('content/edge_fade.png');
	background-repeat:repeat-y;
	background-size:100% 100%;
	width:100%;
	height:100%;
	z-index:64;
	pointer-events:none;
	user-select:none;
}

div.header{
    display:inline-block;
    width:100%;
    background-color:#646464;

    /* background-image:
        linear-gradient(#1a2e24, #192e23);

    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover; */

	background-image:url('content/header_wood.png');
	background-repeat:repeat-x;
	background-size:100% 100%;

    box-shadow: 0px 16px 16px rgba(0,0,0,0.3);

    user-select:none;
}


div.wood{
	background-color:#2a1f18;
	background-image:url('content/wood.png');
	background-repeat: repeat-x repeat-y;
}

div.menu{
	display:inline-block;
	position:relative;
	height:50px;
	width:100%;
	min-width:500px;
}

div.thumbnail{
	display:inline-block;
	width:100%;
	background-color:#050505;
	border-radius: 5px;
	transition: transform .2s, outline-color .2s, box-shadow .2s;
	outline:1px solid rgba(255, 255, 255, 0);
	outline-offset:-1px;
	box-shadow:8px 16px 16px rgba(0,0,0,.64);
}

div.thumbnail:hover{
	outline:1px solid rgba(255, 255, 255, 0.678);
	box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.4);
	transform: scale(1.064);
}

div.thumbnail_noGlow{
	display:inline-block;
	width:100%;
	background-color:#050505;
	border-radius: 5px;
	
	box-shadow:0px 16px 32px rgba(0,0,0,.64);
}


div.section{
	display:inline-block;
	outline:0px solid #646464;
	width:80%;
	max-width:1000px;
	height:page-height;
	padding-left:16px;
	padding-right:16px;
	padding-bottom:8px;
	color:#000000;
	margin-top:64px;
	margin-bottom:10px;
	border-radius:8px;
	min-width:500px;
	background-color:#181818;
	box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.7);
	background-image:url('content/section.png');
	background-size: 100% 100%;
}

div.sidebar{
	position: sticky;
	top:16px;
	bottom:16px;
	display:inline-block;
	outline:0px solid #646464;
	width:50%;
	max-width:1000px;
	height:100%;
	padding-left:16px;
	padding-right:16px;
	padding-bottom:8px;
	color:#000000;
	margin-right:32px;
	border-radius:8px;
	min-width:100px;
	background-color:#181818;
	box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.7);
	background-image:url('content/section.png');
	background-size: 100% 100%;
}

div.section_header{
	width:100%;
	font-weight:bold;
	overflow:auto;
	margin-top:24px;
	overflow-x: hidden;
}

div.scroller{
	overflow-x: scroll;
	overflow-y: hidden;
	width: 98%;
	float:top;
	height:auto;
	padding-bottom:4%;
	white-space:nowrap;
}

div.logo_overlay{
	background-size:100% 100%;
	background-repeat:no-repeat;
	width:72px;
	height:72px;
	position:absolute;
	right:40px;
	bottom:24px;
	pointer-events:none;
	opacity:0.2;
}

div.bar_overlay{
	background-size:100% 100%;
	background-repeat:no-repeat;
	width:160px;
	height:40px;
	position:absolute;
	left:18px;
	bottom:20px;
	pointer-events:none;
	opacity:0.64;
}

div.link_text{
	position:absolute;
	left:0px;
	width:100%;
	height:64px;

	top:16px;
	pointer-events:none;
	padding-bottom:32px;
	
	overflow-wrap:normal;
	white-space:normal;
	
	text-align:center;
	
	font-family:Lexend;
	font-size:100%;
	letter-spacing:2px;
	color:#cccccc;
	/*text-shadow: 1px 1px 3px #000000, 2px 2px 2px #000000;*/
	
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */

}

div.breaker{
	height:200px;
}

div.breaker_half{
	height:100px;
}

div.footer{
	display:inline-block;
	position:relative;
	border-top: 2px solid #513d29;
	height:64px;
	width:100%;
	color:#ccad80;
	padding-top:8px;
	padding-bottom:8px;
	font-family:sans-serif;
	font-size:14px;
	line-height:25px;
	letter-spacing:1px;
}

div.video_preview{
	background-size:100% 100%;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	pointer-events:none;
}

div.icon{
	position:relative;
	top:6px;
	height:32px;
	width:32px;
	background-size:100% 100%;
	background-repeat:no-repeat;
	display:inline-block;
}



a {
   outline: 0;
}

a.title{
	text-decoration:none;
}

a.thumbnail{
	display: inline-block;
	
	margin-right:2%;
	margin-left:2%;
	margin-top:2%;
	margin-bottom:2%;
	
	text-decoration: none;
}

a.menu{
	position:relative;
	display:inline-block;
	color:#cccccc;
	font-family:Lexend;
	font-size:15px;
	letter-spacing:2px;
	height:32px;
	padding-top:0px;
	padding-left:10px;
	padding-right:10px;
	margin:12px;
	background-size:100% 100%;
	text-decoration:none;
	white-space: nowrap;
}

a.link{
	text-align:center;
	
	font-family:sans-serif;
	font-weight:bold;
	font-size: calc(24px - .4vw);
	letter-spacing:2px;
	color:#fcddb0;
	text-shadow: 1px 1px 3px #000000, 2px 2px 2px #000000;
	
	text-decoration:none;
}

a.link:hover{
	color:#ffffff;
}

a.button{
	color:#ffffff;
	padding:10px;
	padding-left:40px;
	padding-right:40px;
	display:inline-block;
	overflow: auto;
	text-decoration:none;
	background-color:#0090ff;
	border:1px solid #000000;
	box-shadow: 0px 0px 15px #000000;
	border-radius:5px;
}

a.button:hover{
	border:1px solid #a89c8a;
	box-shadow: 0px 0px 15px #907651;
}

a.open:hover{
	color:#907651;
}

a.closed{
	color:#907651;
	background-position: center; 
	background-repeat:no-repeat;
	background-size:120px 100%;
}

a.video_preview{
	overflow:auto;
	display:inline;
	overflow:hidden;
	margin-bottom:20px;
	position:relative;
	text-decoration:none;
	
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

p{

    white-space: normal;
}

p.dividerLine{
	width:auto;
	height:auto;
	padding-top:0px;
	padding-bottom:0px;
	border-bottom:2px solid #646464;
	margin-bottom:30px;
}

p.title{
	font-size:calc(48px - .8vw);
	width:50%;
	height:auto;
	font-family:Lexend;
	font-weight: 200;
	letter-spacing:8px;
	color:#cccccc;
	margin-top:10px;
	margin-bottom:10px;
}

p.title2{
	font-size:calc(32px - .4vw);
	width:50%;
	height:auto;
	font-family:Lexend;
	font-weight: 200;
	letter-spacing:8px;
	color:#cccccc;
	margin-top:10px;
	margin-bottom:10px;
}

p.header{
	width:auto;
	height:auto;
	padding-top:0px;
	padding-bottom:0px;
	/*font-size:calc(34px - .8vw);*/
	font-size: 150%;
	line-height: 150%;
	font-family:Lexend;
	letter-spacing:2px;
	color:#cccccc;
}

p.header2{
	width:auto;
	height:auto;
	padding-top:0px;
	padding-bottom:0px;
	/*font-size:calc(34px - .8vw);*/
	font-size: 130%;
	line-height: 150%;
	font-family:Lexend;
	letter-spacing:2px;
	color:#cccccc;
}

p.sidebar_title{
	font-size:calc(48px - .4vw);
	height:auto;
	font-family:Lexend;
	font-weight: 150;
	letter-spacing:4px;
	color:#c7a97c;
	margin:0;
}

p.section{
	width:30%;
	padding:10px;
	font-size:calc(36px - .8vw);
	font-family:Lexend;
	letter-spacing:2px;
	color:#cccccc;
	border-bottom:1px solid #ac8d60;
	margin-bottom:30px;
}

p.description{
	width:40%;
	font-size:calc(32px - .8vw);
	
	font-family:Lexend;
	letter-spacing:1px;
	color:#cccccc;
	margin-top:20px;
	margin-bottom:20px;
	line-height: 150%;
	border-radius:4px;
}

p.info{
	width:80%;
	padding:10px;
	/*font-size:calc(26px - .64vw);*/
	font-size:100%;
	font-family:Lexend;
	font-weight: 200;
	letter-spacing:1px;
	color:#cccccc;
	margin-top:0px;
	margin-bottom:0px;
	border-radius:4px;
}


/* Build-A-<P> */
p.fill{
	background-color:#1d1714;
}

p.fill_blue{
	background-color:#14191d;
}

p.text_dark{
	color:#736146;
}

p.text_blue{
	color:#5d8499;
}

p.text_lightBlue{
	color:#85bddb;
}

p.text_darkBlue{
	color:#475a64;
}

p.outline{
	padding:20px;
	outline:1px solid #6e5a40;
}

p.outline_blue{
	padding:20px;
	outline:1px solid #475a64;
}

p.leftAlign{
	text-align:left;
}


span.text_lightBlue{
	color:#85bddb;
}


p.button_big{
	height:auto;
	color:inherit;
	font-family:sans-serif;
	font-size:22px;
	font-weight:bold;
	letter-spacing:2px;
	margin:0px;
}

p.button_small{
	color:#888888;
	height:auto;
	font-family:sans-serif;
	font-size:12px;
	letter-spacing:1px;
	margin:0px;
}





img.image{
	width:800px;
	box-shadow: 0px 0px 15px rgba(0,0,0,.4);
	border-radius:4px;
	
	margin-right:2%;
	margin-left:2%;
	margin-top:1%;
	margin-bottom:1%;
}

img.logo{
	height:auto;
	width:10%;
	margin:8px;
	box-shadow: 0px 0px 15px rgba(0,0,0,.4);
}

img.link{
	width:800px;
	margin:1%;
	box-shadow: 0px 0px 15px rgba(0,0,0,.5);
}

img.link:hover{
	box-shadow: 0px 0px 15px rgba(100,100,100,.5);
}




video.loop{
	margin-right:2%;
	margin-left:2%;
	margin-top:1%;
	margin-bottom:1%;
	height:auto;
	border-radius:4px;
	box-shadow: 0px 16px 32px rgba(0,0,0,.64);
}

video.link{
	border-radius:4px;
	box-shadow: 0px 16px 32px rgba(0,0,0,.64);
	margin-top:44px;
}

video.link:hover{
	box-shadow: 0px 0px 15px rgba(255,223,223,.4);
}

video.outline_blue{
	outline:1px solid #475a64;
}

video.thumbnail{
	height:auto;
	width:100%;
	margin-bottom:-5px;
	border-radius: 5px;
	outline: 1px solid rgba(255, 255, 255, 0);
	outline-offset: -64px;
	transition: outline .2s, outline-offset .2s;
}

video.thumbnail:hover{
	outline: 1px solid rgba(255, 255, 255, 0.281);
	outline-offset: -30px;
}




::-webkit-scrollbar {
	width:20px;
}

::-webkit-scrollbar-track {
	background: #3a3227;
	border-radius:10px;
}

::-webkit-scrollbar-thumb {
	background: #fcddb0;
	border-radius:10px;
}