:root {
  --color-black: #333;
  --color-accent: #A53F31; /*red*/
  --color-main: #0B3d53; /*deep sea blue*/
  --color-main-light: #A4B6BF; /*grey blue*/
  --color-white: #E9E9E9;
  --standard-padding: 15px;
  --navbar-width: 120px;
  --navbar-height: 10vh;
  --navbar-min-height: 63px;
  --homelabel-height: 100px;
  --wrapper-padding: 6vh 5vw 2vh 5vw;
  --content-padding: 8vh 0 3vh 0;
  --paragraph-padding: 3vh 0;
  --index-padd-width: 6vw;
  --logo-nav-width: 410px;
  --homelink-nav-width: 60%;
  
}
.green {
	--color-main: #97A531; /*green*/
}
.blue {
	--color-main: #3197A5; /*blue*/
}
* {
	box-sizing: border-box;
	}
html {
	height: 100%;
	background-color: var(--color-black);
	overflow: scroll;}
body {	
	font-family: myDefaultFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: var(--color-black);
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 0;
	font-size: 24px;
	overflow: hidden;
}
body.dark {
	color: var(--color-white);
	background: var(--color-black);
}
nav {
	
}
a div {
  	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease; /* Safari */
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
h1 {
	font-family: myHeaderFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 3vh 0;
}
h2 {
	font-family: myHeaderFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: var(--color-main);
	font-size: 1.5em;
	margin: 0;
	padding: var(--paragraph-padding);
}
h3 {}
label {
	cursor: pointer;
}
p {
	margin: 0;
	padding: var(--paragraph-padding);
	line-height: 1.5;}
footer {
	flex-shrink: 0;
	padding: var(--content-padding);
}
footer a {
	text-decoration: none;
	color: var(--color-main);
}
footer a:hover {
	color: var(--color-black);
}
footer p {
	font-size:0.8em;
}
footer span {
	color: var(--color-black);
	padding: 0 1vw;
	font-size: 1.1em;
}

@font-face {
	font-family: myDefaultFont;
	src: url(fonts/Arvin/Arvin.ttf);}
@font-face {
	font-family: myHeaderFont;
	src: url(fonts/Kiona/Kiona.ttf);}


/* width */
::-webkit-scrollbar {
  	width: 10px; 
	background: transparent;}
/* Track */
::-webkit-scrollbar-track {
	background: var(--color-white);
}
/* Handle */
::-webkit-scrollbar-thumb {
  	background: var(--color-main);}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  	background: var(--color-black); }


/*dev temp*/
#dev {
	height: 50%;
	width: 100%;
	padding: 6%;
}
#dev img {
	width: 46%;
	float: left;
	padding: 0 6% 6% 0;
	max-width: 600px;
}
#dev h1,
#dev h2,
#dev a {
	color: var(--color-main-light);
}
#dev h1,
#dev h2 {
	margin: 0;
}
#dev p {
	padding: 0;
}

/* Mobile */
@media screen and (max-width: 660px) {
  	ul#homenav{
		padding: 0;
		margin: var(--navbar-height) 0 0 0;
		width: 100vw;
	}
	ul#homenav li {
		display: block;
		padding: 3vh 3vw;
		font-size: 2em;
	}
	#nav-bar {
		height: var(--navbar-height);
		min-height: var(--navbar-min-height);
		width: 100%;
		border-bottom: 1px solid var(--color-main);
	}
	a#nav-homelink {
		width: calc(100vw - var(--navbar-height));
		height: calc(var(--navbar-height));
		min-height: calc(var(--navbar-min-height));
		position: fixed;
		background: url(images/logo-header-expanded.png) left no-repeat;
		background-size: contain;
		background-color: var(--color-main);
		top: 0;
		left: 0;
	}
	a#nav-homelink:hover {
		background-color: var(--color-black);
	}
	#label-home {
		height: var(--navbar-height);
		min-height: var(--navbar-min-height);
		width: var(--navbar-height);
		min-width: var(--navbar-min-height);
		background: url(images/icon-menu-ham.png) top right no-repeat;
		background-size: contain;
		background-color: var(--color-main);
		right: 0;
	}
	#label-home:hover {
		background: url(images/icon-menu-ham-hover.png) top right no-repeat;
		background-size: contain;
		background-color: var(--color-black);
	}
	#input-home:checked ~ #nav-bar {
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: var(--color-main);
	}
	#input-home:checked ~ #nav-bar nav {
		display: block;
	}
	#input-home:checked ~ #nav-bar a#nav-homelink {
		height: var(--navbar-height);
	}
	#input-home:checked ~ #nav-bar #nav-home {
		display: block;
	}
	#input-home:checked ~ #nav-bar ul#homenav {
		display: block;
		position: fixed;
	}
	#input-home:checked + #label-home {
		background: url(images/icon-close.png) top right no-repeat;
		background-size: 10vh auto;
		background-color: var(--color-main);
		width: va(--navbar-height);
		height: var(--navbar-height);
	}
	#input-home:checked + #label-home:hover {
		background: url(images/icon-close-hover.png) top right no-repeat;
		background-size: 10vh auto;
		background-color: var(--color-black);
	}
	#nav-left {
		display: none;
		font-family: myHeaderFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size: 2em;
		margin-top: var(--navbar-height);
		width: 100%;
		background-color: var(--color-black);
	}
	#nav-left a {
		text-decoration: none;
		color: var(--color-black);
		display: block;
		background-color: var(--color-main);
	}
	#nav-left li {
		width: 100%;
		text-align: center;
		padding: 3vh 3vw;
		margin-top: 3vh;
		font-size: 1.2em;
	}
	#nav-home {
		margin: var(--homelabel-height) 0 0 0;
		padding: 0 6vw;
	}
	#wrapper {
		margin: var(--navbar-height) 0 0 0;
		font-size: 1em; 
	}
	footer p.left {
		text-align: right;
		padding: 1vh 5vw 5vh 5vw;
	}
	footer p.right {
		text-align: right;
		padding: 5vh 5vw 1vh 5vw;
	}
}
/*DESKTOP SITE*/
@media screen and (min-width: 661px) {
	h1 {
		font-size: 2em;
	}
	ul#homenav {
		display: none;
		width: 75%;
		position: fixed;
		left: 25%;
		padding: 0;
		margin: 0;
	}
	ul#homenav li {
		float: left;
		height: var(--homelabel-height);
		width: calc(100% / 3);
		padding: 6vh 6vw;
		font-size: calc(100vw / 20);
	}
	#nav-bar {
		height: 100%;
		width: var(--navbar-width);
		left: 0;
	}
	#label-home {
		height: var(--homelabel-height);
		width: var(--navbar-width);
		background: url(images/logo-white.png) top left no-repeat;
		background-size: auto 75%;
		background-position: center;
		background-color: var(--color-main);
		left: 0;
	}
	#label-home:hover {
		background-color: var(--color-black);
	}
	#input-home:checked ~ #nav-bar {
		width: 100%;
		max-width: 100%;
		max-height: 100%;
		overflow: auto;
	}
	#input-home:checked ~ #nav-bar #nav-home,
	#input-home:checked ~ #nav-bar ul#homenav	{
		display: block;
	}
	a#nav-homelink {
		display:none;
	}
		
	/*
	a#nav-homelink {
		height: var(--homelabel-height);
		-webkit-transition: width 0.5s ease-in-out;
		-moz-transition: width 0.5s ease-in-out;
		-o-transition: width 0.5s ease-in-out;
		transition: width 0.5s ease-in-out;
	}
	#input-home:checked ~ #nav-bar a#nav-homelink {
		position: fixed;
		right: 0;
		width: 25%;
	}
	#input-home:checked ~ #nav-bar a#nav-homelink:hover {
		background: url(images/logo-header-hover.png) top left no-repeat;
		background-size: auto 66%;
		background-color: var(--color-black);
		background-position: 6%;
	}
*/
	#input-home:checked + #label-home {
		background: unset;
		background-color: var(--color-black);
		width: 25%;
		left: 0;
		height: var(--homelabel-height);
	}
	#input-home:checked + #label-home:hover,
	#input-home:checked ~ #nav-bar a#nav-homelink:hover	{
		background-color: var(--color-black);
	}
	/*may not need
	#input-home:checked ~ #nav-bar a#nav-homelink:hover::before {
		content: "HOME";
		font-size: 1.1em;
		color: var(--color-white);
		margin-right: 26%;
		margin-top: 58px;
		float: right;
		width: 34px;
		height: 34px;
	}
	*/
	#label-home::before,
	#label-home::after {
		color: var(--color-white);
		font-size: 2em;
	}
	#label-home:hover::before {
		content: "\00BB";
		top: calc(var(--homelabel-height) - 60px);
		left: var(--navbar-width);
		position: absolute;
	}
	#input-home:checked + #label-home::before {
		content: "\00AB";
		float: right;
		margin: 40px 20px 0 10px;
	}
	#input-home:checked + #label-home:hover::after {
		content: "CLOSE";
		float: right;
		font-size: 1.1em;
		margin: 60px 0;
	}
	#input-home:checked + #label-home:hover::after,
	#input-home:checked + #label-home:hover::before,
	#label-home:hover::after	{
		color: var(--color-white);
		position: initial;
	}
	#input-home:checked ~ #nav-bar #nav-left,
	#input-home:checked ~ #nav-bar #sharebar {
		display: none;
	}
	#nav-left {
		position: fixed;
		font-family: myHeaderFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size: 1em;
		margin-top: var(--homelabel-height);
		width: var(--navbar-width);
	}
	#nav-left li {
		padding: 8px 16px 8px 6px;
		margin: 12px 0;
	}
	#sharebar {
		margin: var(--content-padding);
		width: 100%;
		position: absolute;
		padding: 0;
		bottom: 3%;
		left: 0;
		list-style: none;
		text-align: right;
	}
	#sharebar:hover::before {
		content: "SHARE";
		color: var(--color-white);
		font-size: 0.6em;
		padding-right: 12%;
	    top: 8px;
		position: relative;
	}
	#sharebar li {
		height: 32px;
		margin: 6% 3%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 90%;
	}
	#sharebar li:hover {
	}
	#sharebar li.social-1 {
		background-image: url(../images/icon-facebook.png);
	}
	#sharebar li.social-1:hover {
		background-image: url(../images/icon-facebook-hover.png);
	}
	#sharebar li.social-2 {
		background-image: url(../images/icon-twitter.png);
	}
	#sharebar li.social-2:hover {
		background-image: url(../images/icon-twitter-hover.png);
	}	
	#sharebar li.social-3 {
		background-image: url(../images/icon-pinterest.png);
	}
	#sharebar li.social-3:hover {
		background-image: url(../images/icon-pinterest-hover.png);
	}	
	#nav-home {
		margin: var(--homelabel-height) 0 0 0;
		padding: var(--wrapper-padding);
	}
	#wrapper {
		margin: 0 0 0 var(--navbar-width);
	}
	#wrapper .index {
		margin: 0;
		padding: 0;
	}
	footer {
		
	}
	footer p.left {
		float: left;
	}
	footer p.right {
		float: right;
	}
}
/*SQUAT WINDOW*/
@media screen and (max-height: 470px) {
	#sharebar {
		display:none;
	}
}

/* HOME */
#index {
	overflow-x: hidden;
	overflow-y: auto;
	padding: 6vh var(--index-padd-width);
}
#header {
	display: block;
}
#header img {
	width: 88vw;
	max-width: 245px;
}
#header h1 {
	font-family: myHeaderFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: var(--color-main);
	text-align: right;
}
ul#homenav {
	list-style: none;
	font-family: myHeaderFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul#homenav.index {
	display: block;
    width: 100vw;
    padding: 0;
    margin: 0;
    position: relative;
    height: var(--homelabel-height);
    left: calc(-1*var(--index-padd-width));
}
ul#homenav.index li {
	float: left;
    height: var(--homelabel-height);
    padding: 6vh 6vw;
    font-size: 5vw;
    width: 50vw;
}
ul#homenav li {
	text-align: center;
	background-color: var(--color-main);
}
ul#homenav li:hover {
	background-color: var(--color-black);
}
ul#homenav a {
	text-decoration: none;
	color: var(--color-white);
	line-height: 1.1em;
}
#wrapper {
	overflow-y: scroll;
	padding: var(--wrapper-padding);
}


		
/*HOME PAGE*/	
#input-home {
	display: none;
}
#label-home {
	position: fixed;
	background-color: var(--color-main);
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	top: 0;
	z-index: 2;
}
#nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	color: var(--color-black);
	background-color: var(--color-main);
	overflow: hidden;
	margin: 0;
	padding: 0;
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	z-index: 1;
}
#nav-left a {
	color: var(--color-white);
  	text-decoration: none;
  	display: block;
	border-style: solid;
	border-color: transparent;
}
#nav-left a.selected {
	background-color: var(--color-white);
	color: var(--color-black);
    font-weight: bold;
	border-left: 12px solid var(--color-black);
}
#nav-left a:hover,
#nav-left a.selected:hover  {
	color: var(--color-white);
	background-color: var(--color-black);
}
#nav-left {
	padding: 0;
	list-style: none;
	text-align: right;
	width: 100%;
    right: 0;
    position: absolute;
	z-index: 2;
}
#nav-home {
	display: none;
	background-color: var(--color-white);
	overflow: auto;
}


#content {
	flex: 1 0 auto;
	top: 0;
	overflow: auto;
}
#content img {
	width: 100%;
}
#input-home:checked ~ #wrapper {
	display: none;
}
.post {
	max-width: 580px;
}
.postimg {
	width: 100%;
	margin-right: 0;
	padding: var(--wrapper-padding;}
	

/*FORMAT CLASSES*/
.clear {clear: both;}
.floatright {float: right;}
.floatleft {float: left;}
.hide {display: none;}