/* CSS Reset */

*
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;  
	padding: 0;
	margin: 0;
}

html {
	/* Stop mobile browsers from resizing type on rotation */
    -webkit-text-size-adjust: 100%;	
    -ms-text-size-adjust: 100%;
}

a,
a:active,
a:hover
{
    outline: 0;
    color: inherit;
    text-decoration: none;
}

b, strong
{
    font-weight: bold;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

pre
{
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

small
{
    font-size: 80%;
}

sub,
sup
{
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup
{
    top: -0.5em;
}
sub
{
    bottom: -0.25em;
}

img
{
    border: 0;
}

/* Forms */

button,
input,
select,
textarea
{
    font-size: 100%; 
    margin: 0; 
    vertical-align: baseline;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"]
{
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled]
{
    cursor:		#edefault;
}

input[type="search"]
{
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration
{
    -webkit-appearance: none;
}

p
{
	margin: 1em 0;
}
p:last-child
{
	margin-bottom: 0;
}

h2+p
{
	margin-top: .5em;
}

ul
{
	list-style-type: none;
	padding: 0;
}


 
/* Page Styles */
/* Assuming mobile device with a screen under 480px first */

/* Page padding */
header,
footer,
li
{
	padding-left: 1em;	
	padding-right: 1em;	
}

/* Max content width */
header h1,
header p,
footer p,
li h2,
li p,
li div
{
	margin-left: auto;
	margin-right: auto;
	max-width: 90rem;
}

*
{
	font-family: 'Montserrat';
	font-size: 1em;
	line-height: 1.4em;
}

body
{
	margin: 0;
	padding: 0;
}

main, header, footer
{
	max-width: 100rem;
	margin-left: auto;
	margin-right: auto;
}

.fullWidth main,
.fullWidth header,
.fullWidth footer
{
	max-width: 100%;
}

header
{
	margin-top: 0;
	margin-bottom: 0;
	padding-top: .25em;
	padding-bottom: .25em;
}

h2, li, p
{
	color: rgba(0,0,0,.8);
/* 	mix-blend-mode: multiply; */
}

h1
{
	font-size: 2em;
	font-weight: 700;	
	line-height: 1.2em;
	letter-spacing: -.01em;
	margin-top: .5em;
	margin-bottom: .5em;
}
h1 span
{
	font-weight: 700;
	line-height: 1em;
}

h2
{
	font-size: 1.5em;
	line-height: 1.2;
	font-weight: 700;
}
h2 a
{
	border-bottom-width: 0;
}
h2 a:hover
{
	border-bottom-width: .1em;
	border-bottom-color: rgba(0,0,0,.3);
}
h2 em
{
	font-style: normal;
	font-size: 75%;
	color: rgba(0,0,0,.3);
	vertical-align: .1em;
}
h2 a:hover em
{
	color: rgba(0,0,0,.5);	
}

ul
{

}

li
{
	padding-top: 1em;
	padding-bottom: 1em;
}

a,
a:active,
a:hover
{
 	border-bottom: .1em solid rgba(0,0,0,.3);
}
a:hover
{
	color: rgba(0,0,0,1);
	border-bottom-color: rgba(0,0,0,.8);
}

/* Tags */

p.tags
{
	font-size: .8em;
	line-height: 2.5em;
	margin-top: -.5em;
	margin-bottom: -.25em;
}
.tags a,
.tag
{
	display: inline-block;
	border: 0;
	padding: .25em .5em;
	border-radius: .25em;
	margin-right: .5em;
	white-space: nowrap;
	background: rgba(0,0,0,.3);
	color: rgba(255,255,255,.7);
}
.tags a:last-child
{
	margin-right: 0;
}
.tags a:hover
{
	color: rgba(255,255,255,.9);
	background-color: rgba(0,0,0,.5);
}
.tags a em,
.tag em
{
	font-style: normal;
	font-size: .6em;
}


/* Photos */

li.photo
{
	padding-left: 0;
}
/* Assume left alignment, no repeat */
li.photo div
{
	background-repeat: no-repeat;
	background-position-x: 0;
	background-position-y: 0;
	background-size: 4em;
	padding-left: 5em; 
}

li.photoLeft div
{
	padding-left: 5em;
}

li.photoRight
{
	padding-right: 0;
}

li.photoRight div
{
	background-position-x: right;
	padding-left: 1em;
	padding-right: 5em;
}

li.photoRepeat
{
	padding-top: 0;
	padding-bottom: 0;
}

li.photoRepeat div
{
	padding-top: 1em;
	padding-bottom: 1em;
	background-repeat: repeat-y;
}

li.photoBlendMultiply div	{ background-blend-mode: multiply }
li.photoBlendSoftLight div	{ background-blend-mode: soft-light }

ul.ruled li
{	
	border-top: .01em solid rgba(0,0,0,.2);
}
ul.ruled li:last-child
{
	border-bottom: .01em solid rgba(0,0,0,.2);
}

footer
{
	margin-bottom: 0;  
	margin-top: 0;  
	padding-bottom: 2em;
	padding-top: .5em;
}

p.signature
{
	text-indent: -99999e,;
	color: transparent;
	height: 4em;
	background: url(images/signature.png) right top no-repeat;
	background-size: 189px 30px;
}

/* Color Theme */

:root
{
	
--cWhite:		#f1f5f3;	--bgWhite:		#f1f5f3;
--cLightGray:	#d2d8d5;	--bgLightGray:	#d2d8d5;
--cMidGray:		#9aa39e;	--bgMidGray:	#9aa39e;
--cDarkGray:	#6b706d;	--bgDarkGray:	#6b706d;
--cBlack:		#000000;	--bgBlack: 		#000000;
--cRed:			#ed5b3e;	--bgRed:		#ed5b3e;
--cOrange:		#f76e00;	--bgOrange:		#f08026;
--cGold:		#ff9c00;	--bgGold:		#f5b929;
--cYellow:		#e3bf14;	--bgYellow:		#f9f4c2;
--cLime:		#8db115;	--bgLime:		#95bb1a;
--cGreen:		#28a422;	--bgGreen:		#50b833;
--cTeal:		#00c0c2;	--bgTeal:		#00c0c2;
--cBlue:		#216dbe;	--bgBlue:		#64a5eb;
--cPurple:		#854fbb;	--bgPurple:		#b997db;
--cPink:		#e56bbe;	--bgPink:		#f79ad9;
--cDarkPurple:	#cc2044;	--bgDarkPurple:	#db3d5e;
--cBrown:		#cc6520;	--bgBrown:		#d1783d;
--cMaroon:		#cd4632;	--bgMaroon:		#cd4632;

.cWhite		{ color: var(--cWhite) }		.bgWhite	 { background-color: var(--bgWhite) }
.cLightGray	{ color: var(--cLightGray) }	.bgLightGray { background-color: var(--bgLightGray) }
.cMidGray	{ color: var(--cMidGray) }		.bgMidGray	 { background-color: var(--bgMidGray) }
.cDarkGray	{ color: var(--cDarkGray) }		.bgDarkGray	 { background-color: var(--bgDarkGray) }
.cBlack		{ color: var(--cBlack) }		.bgBlack 	 { background-color: var(--bgBlack) }	
.cRed		{ color: var(--cRed) }			.bgRed		 { background-color: var(--bgRed) }
.cOrange	{ color: var(--cOrange) }		.bgOrange	 { background-color: var(--bgOrange) }
.cGold		{ color: var(--cGold) }			.bgGold		 { background-color: var(--bgGold) }
.cYellow	{ color: var(--cYellow) }		.bgYellow	 { background-color: var(--bgYellow) }
.cLime		{ color: var(--cLime) }			.bgLime		 { background-color: var(--bgLime) }
.cGreen		{ color: var(--cGreen) }		.bgGreen	 { background-color: var(--bgGreen) }
.cTeal		{ color: var(--cTeal) }			.bgTeal		 { background-color: var(--bgTeal) }
.cBlue		{ color: var(--cBlue) }			.bgBlue		 { background-color: var(--bgBlue) }
.cPurple	{ color: var(--cPurple) }		.bgPurple	 { background-color: var(--bgPurple) }
.cPink		{ color: var(--cPink) }			.bgPink		 { background-color: var(--bgPink) }
.cDarkPurple{ color: var(--cDarkPurple)} 	.bgDarkPurple{ background-color: var(--bgDarkPurple) }
.cBrown		{ color: var(--cBrown) }		.bgBrown	 { background-color: var(--bgBrown) }
.cMaroon	{ color: var(--cMaroon) }		.bgMaroon	 { background-color: var(--bgMaroon) }

}

/* Large mobile devices */
@media only screen and (min-width: 481px)
{
	
} 

/* Tablets */
@media only screen and (min-width: 768px)
{
	li.photo
	{
		padding-left: 1em;
	}
	li.photo div
	{
		background-size: 6em;
		padding-left: 7em; 
	}
	
	li.photoLeft div
	{
		padding-left: 7em;
	}
	
	li.photoRight
	{
		padding-left: 0;
	}
	
	li.photoRight div
	{
		padding-left: 0;
		padding-right: 7em;
	}
}

/* Desktop */
@media only screen and (min-width: 1024px)
{


} 

/* Full screen desktop */
@media only screen and (min-width: 1240px)
{
	
} 

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5)
{
	
}