/* global button-masher.net settings  */

* {	margin: 0px; padding: 0px; }

body {	
	font-family: 'Segoe UI', Tahoma, sans-serif;
	font-size: 10pt;
	color: #202020;;
	background: #ffffff;
	margin-top: 0px;
	}

a {
	color: #000000;
}
	
a span	{
	display: none;
	}
	
	a:hover {
		text-decoration: none;
	}
	
	a:hover	span{
		text-decoration: none;
		display: inline-block;
		}
		
	a.external	{
		padding-right: 18px;
		margin-right: 2px;
		background: url('external_link.png') no-repeat right;
		background-size: contain;
	}

	/*
	a.externalNoImage	{
		/*normal external link w/out image
	}
	*/
	a.download	{
		padding-right: 14px;
		margin-left: 2px;
		background: url('icons/download.gif') no-repeat right;
	}

	a.video	{
		padding-right: 14px;
		margin-left: 2px;
		background: url('icons/video.gif') no-repeat right;
	}
	
p	{
	font-weight: lighter;
	margin-bottom: 16px;
	line-height: 12px;
}

	p a	{
		font-variant-caps: all-small-caps;
		font-weight: 600;
		}

p.date {
	text-transform: uppercase;
	font-size: 9pt;
	letter-spacing: 1px;
	word-spacing: 2px;
	}

.textBlock {
	line-height: 1.5;
    text-align: justify;
	}

	p.footnote {
		font-size: 8pt;
		padding-left: 24px;
		line-height: 1.25;
		text-align: justify;
		}

p a	{
	font-variant-caps: all-small-caps;
	font-weight: 600;
	}

img.creditTitle {
	vertical-align: middle;
	width: 104px;
	margin-left: 16px;
	margin-bottom: 16px;
	box-shadow: 0px 0px 4px #404040;
}

img.contact {
	margin-left: 8px;
	margin-right: 8px;
	transition: all .1s ease-in-out;
}

img.contact:hover {
	opacity: 40%;
	transition: all .1s ease-in-out;
}
	
h1	{
	font-size: 32pt;
	font-variant-caps: all-small-caps;
	font-weight: lighter;
	letter-spacing: 4px;
	word-spacing: 4px;
	}
	
	h1 a	{
		text-decoration: none;
	}
	
h2	{
	font-family: 'Arial Black';
	font-size: 24pt;
	line-height: 32px;
	text-transform: uppercase;
	letter-spacing: 6px;
	word-spacing: 8px;
	}
		
h3	{
	font-size: 20pt;
	font-weight: normal;
	font-variant-caps: all-small-caps;
	letter-spacing: 2px;
	line-height: 32px;
	}

h4	{
	font-family: 'Arial Black';
	font-size: 14pt;
	letter-spacing: 2px;
	text-transform: uppercase;

	}

h5 {
	font-family: 'Arial Black';
	font-size: 12pt;
	font-weight: 600;
	letter-spacing: 2px;
	font-variant-caps: all-small-caps;
	}

ul	{
	list-style-position: inside;
	list-style-type: none;
	margin-bottom: 12px;
	}

		ul li {
			text-indent: 24px;
			letter-spacing: 1px;
			font-weight: 300;
		}
	
ol	{
	font-weight: lighter;
	margin-bottom: 16px;
	line-height: 12px;
	text-indent: 16px;
	list-style-position: inside;
	}		
	
li span	{
	display: none;
	}
	
	li:hover	span{
		text-decoration: none;
		display: inline;
		}

hr {
	border: none;
	border-top: 1px solid #d0d0d0;
	margin-bottom: 16px;
	margin-left: 64px;
	margin-right: 64px;
}

div.singleColumn	{
	display: inline-block;
	width: 896px;
	margin-left: 64px;
	text-align: center;
}

div.pageContainer	{
	margin: auto;
	margin-top: 96px;
	width: 1024px;
	}

/* end global settings */
			

#script	{
	float: left;
	display: none;
}

.topBar	{
	position: fixed;
	height: 96px;
	width: 100%;
	margin: auto;
	left: 0;
	right: 0;
	top: 0px;
	background-color: #ffffff;
	z-index: 10;
}
	
	div.header {
		position: fixed;
		display: inline-block;
		width: 384px;
		margin-right: 64px;
		margin: auto;
		top: 0;
		left: 512px;
        right: 0;
		height: 84px;
		line-height: 84px;
		text-align: center;
		z-index: 11;
	}

	div.footer {
		border-top: 1px solid #c0c0c0;
	}


	input.headerMenuInput {
		position: fixed;
		height: 64px;
		width: 514px;
		margin: auto;
		top: 16px;
		left: 512px;
		right: 0;
		opacity: 0;
		cursor: pointer;
		z-index: 12;
	  }
	  
	div.hamburger-lines {
		position: fixed;
		height: 26px;
		width: 32px;
		margin: auto;
		top: 35px;
		left: 968px;
		right: 0;
		z-index: 11;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	  }
	  
	.hamburger-lines .line {
		display: block;
		height: 4px;
		width: 100%;
		border-radius: 10px;
		background: #000000;
	  }
	  
	.hamburger-lines .line1 {
		transform-origin: 0% 0%;
		transition: transform 0.3s ease-in-out;
	  }
	  
	.hamburger-lines .line2 {
		transition: transform 0.15s ease-in-out;
	  }
	  
	.hamburger-lines .line3 {
		transform-origin: 0% 100%;
		transition: transform 0.3s ease-in-out;
	  }

	input[type="checkbox"]:checked ~ .headerMenu {
		transform: translateY(100%);
	  }

	  input[type="checkbox"]:checked ~ .headerMenuBackground {
		transform: translateY(100%);
	  }
	  
	input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
		transform: rotate(45deg);
	  }
	  
	input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
		transform: scaleY(0);
	  }
	  
	input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
		transform: rotate(-45deg);
	  }

	div.headerMenuBackground {
		position: fixed;
		height: 100%;
		width: 100%;
		opacity: 80%;
		margin: auto;
		top: -100%;
		left: 0;
		right: 0;
		z-index: 7;
		transition: transform 0.3s ease-in-out;
		background-color: #101010;
	  }
	
	div.headerMenu {
		position: fixed;
		display: block;
		height: 100%;
		width: 100%;
		top: -100%;
	
		transition: transform 0.3s ease-in-out;
		transform-origin: top;

		z-index: 8;

	  }

	div.headerMenuContent{

		position: relative;
		display: block;
		width: 352px;
		padding: 16px;
		font-size: 12pt;
		height: fit-content;
		background-color: #ffffff;
		top: 112px;
		left: 256px;
		margin-top: 96px;
		
		margin: auto;
	  }

	  div.headerMenuContact{
		height: fit-content;
		width: 100%;
		margin: auto;
		text-align: center;
		position: absolute;
		display: inline;
		left: 0;
		right: 0;
		bottom: -80px;
	  }

	div.headerCategoryContainer	{
		margin: auto;
		width: 1024px;
		height: 24px;
		}

	div.headerCategory	{
		float: left;
		padding-top: 2px;
		height: 100%;
		width: 256px;
		}

		div.headerCategory:hover h4	{
			font-weight: bold;
		}

	div.headerCategory div	{
		text-align: center;
		position: relative;
		height: fit-content;
		display: none;
		transition: all .15s ease-in-out;
		}

		div.headerCategory:hover div{
			display: inline;
			transition: all .15s ease-in-out;
			}
	
#footer {
	margin-left: 576px;
	height: 64px;
	float: left;
	width: 368px;
	padding-top: 8px;
	/*background: url('hex_background.png');*/
	background-position: top right;
	text-align: right;
	}

/*------------------------------------------------------------------------------*/	

div.columnLeft	{
	float: left;
	width: 480px;
	height: fit-content;
	padding: 16px;
	padding-left: 0px;
	margin-top: 16px;
	margin-left: 64px;
	margin-right: 16px;
	}

div.columnLeft img.inlineImage{
	width: 480px;
	margin-bottom: 16px;
}

div.columnRight {
	display: inline-block;
	width: 384px;
	margin-top: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

div.columnRightSingle {
	display: inline-block;
	width: 352px;
	right: 0;
	padding: 16px;
	margin-left: 576px;
}

.alignLeft {
	text-align: left;
}

.alignRight {
	text-align: right;
}

.alignCenter{
	text-align: center;
}

.genericBackground {
	background-color: #f0f0f0;
}

div.pageHeader {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 384px;
}

.categoryImage{
	position: relative;
	right: 0;
	vertical-align: middle;
}

.categoryImage img {
	width: 100%;
}

.categoryText {
	position: relative;
	bottom: 0px;
	/*border-right: 1px solid #d0d0d0;*/
}



/*portfolio styles */ 

div.categoryDesc	{
	float: left;
	padding-top: 16px;
	padding-left: 64px;
	padding-right: 32px;
	width: 480px;
	text-align: justify;
	}

div.categoryInfo	{
	float: left;
	margin-left: 64px;
	width: 352px;
	padding: 16px;
	text-align: right;
	background-color: #f0f0f0;
}

div.itemWrapper	{
	margin: 0px;
	}

div.contentItemTitle	{
	display: inline-block;
	width: 864px;
	margin-left: 64px;
	margin-right: 64px;
	height: 32px;
	padding: 16px;
	}

div.itemScreens	{
	
	display: inline-block;
	height: 384px;
	position: relative;
	margin: 0px;
	padding: 0px;
	}

	.itemScreens img {
		background-color: #ffffff;
		opacity: 1;
		transition: all .15s ease-in-out;
		z-index: 1;
	}
		
	.itemScreens img:hover	{
		opacity: .9;
		transition: all .15s ease-in-out;
		z-index: 1;
		}

div.contentItemSubTitle {
	height: 48px;
	margin-top: 12px;
	margin-bottom: 12px;
}

.contentItemDescription	{
	border-right: none;
	}

div.contentItemDetails	{
	text-align: center;
}

div.contentItemDetails span	{
	display: inline-block;
	text-align: left;
	vertical-align: text-top;
	width: 160px;
}

div.contentItemSpacer	{
	display: inline-block;
	height: 16px;
	width: 896px;
	margin-left: 64px;
}

div.itemInfo img	{
		width: 352px;
		box-shadow: 4px 4px 4px #404040;
		margin: auto;
	}
	
a.screens	{
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	margin: 0px;
}

/* end portfolio */