@charset "UTF-8";

body {
	margin: 0px;
	padding: 0px;
	background: #fff;
}
a:link, a:active, a:visited {
	text-decoration: none;
	color: #336;
	font-weight: bold;
}
a:hover {
	text-decoration: none;
	color: #f90;
}
.sep {
	border-right: 4px solid #39c;
	padding-right:10px;
}
/* IE 6 hack- make entire button clickable */
* html #botNav a { width: 1px; }
.hdrcon {
	text-decoration: none;
	clear: both;
	height: 30px;
	z-index: 20;
	margin: 20px 20px 20px 50px;
}
h1, h2, h3, ul {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4 {
	font: bold Helvetica, Arial, sans-serif;
	text-decoration: none;
}
h1 {
	font-size: 6em;
	color: #336;
	padding-top: 180px;
	font-weight: bolder;
	text-decoration: none;
	padding-bottom: 72px;
}
h2 {
	font-size: 1.5em;
	color: #336;
}
h3 {
	font-size: 6em;
	color: #fff;
	padding-top: 144px;
	font-weight: bolder;
	text-decoration: none;
	padding-bottom: 72px;
}
h4 {
	font-size: 1.1em;
	color: #fff;
	text-align: left;
	margin-top: 40px;
}
.boldTxt {
	font-weight: bold;
	text-decoration: none;
}
hr {
	color: #fff;
	font-size: 4px;
}
#navit {
	width: 100%;
	position: fixed;
	left: 0px;
	background: #36c;
	color: #36c;
	text-align: center;
	top: 0px;
	color: #336;
	border-bottom: 4px solid #336;
	font-weight: bold;
	z-index: 010;
}
#harlNav {
	font: bold 1.2em Helvetica, Arial, sans-serif;
	bottom: 0px;
	left: 0px;
	text-decoration: none;
	background: #fff;
	color: #336;
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 0;
	position: relative;
	margin-left: 0px;
}
#harlNav ul {
	margin: 0;
	padding: 0;
}

#harlNav li {
	display: inline;
	margin: 0;
	padding: 0;
}

#harlNav li a, #harlNav li a:link {
	color: #336;
	text-decoration: none;
	padding: 0.5em 0.5em;
	display: inline-block;
	font: bold 1.2em Verdana, Geneva, sans-serif;
}

#harlNav li a:hover {
	color: #f90;
	text-decoration: none;
}
.structure { padding:0.1em 64px 5em }
.marg {
	margin:16px!important
}
.margT {
	margin-top:16px!important
}
.margB {
	margin-bottom:16px!important
}
.margL {
	margin-left:16px!important
}
.margR {
	margin-right:16px!important
}
.white {
	background: #fff;
	color: #336;
	padding-top: 40px;
	padding-bottom: 40px;
}
.backer336 {
	background: #336;
	color: #fff;
	clear: both;
}
.backerFff { background: #fff; }

#collected {
	font: 1.2em/1.4em Verdana, Arial, Helvetica, sans-serif;
	color: #336;
	height: auto;
	float: left;
	width: 100%;
	background: #fff;
}
#collection {
	font: 1.2em/1.4em Verdana, Arial, Helvetica, sans-serif;
	color: #336;
	height: auto;
	float: left;
	width: 100%;
}
#mainPort {
	text-decoration: none;
	margin-top: 100px;
	height: 740px;
	width: 100%;
	border-bottom: 4px solid #336;
	background: #336 url(images/hHands.gif) no-repeat center;
	border-top: 4px solid #336;
}
#cont {
	font-family: Verdana, Geneva, sans-serif;
	color: #336;
	text-decoration: none;
	margin: 60px 60px 40px;
	border-bottom: 4px solid #336;
	padding-bottom: 40px;
}
#contNon {
	font-family: Arial, Helvetica, sans-serif;
	color: #336;
	text-decoration: none;
	margin: 60px 60px 40px;
	padding-bottom: 40px;
}
.formInputs {
	color: #336;
	text-decoration: none;
	padding-left: 2px;
	letter-spacing: 0.1em;
	height: 16px;
	font: 12px Arial, Helvetica, sans-serif;
	border: 1px solid #336;
}
.formInputsTextField {
	color: #336;
	text-decoration: none;
	border: 1px solid #336;
	letter-spacing: 0.1em;
	height: 50px;
	font: 12px Arial, Helvetica, sans-serif;
}
.help {
	font: bold 16px Arial, Helvetica, sans-serif;
	color: #609;
	letter-spacing: 0.1em;
	clear: none;
	text-align: center;
}
.input-buttonC {
	text-decoration: none;
	height: 20px;
	width: 80px;
	border-style: none;
	background: url(images/bClearOff.png);
	cursor: pointer;
}
.input-buttonC:hover {
	text-decoration: none;
	height: 20px;
	width: 80px;
	border-style: none;
	background: url(images/bClearOn.png);
}
.input-button {
	text-decoration: none;
	height: 20px;
	width: 80px;
	border-style: none;
	background: url(images/bSubOff.png);
	cursor: pointer;
}
.input-button:hover {
	text-decoration: none;
	height: 20px;
	width: 80px;
	border-style: none;
	background: url(images/bSubOn.png);
}
.input-buttonP {
	text-decoration: none;
	height: 20px;
	width: 80px;
	border-style: none;
	background: url(images/bPrevOff.png);
	cursor: pointer;
}
.input-buttonP:hover {
	text-decoration: none;
	background: url(images/bPrevOn.png);
}
.input-buttonN {
	text-decoration: none;
	height: 20px;
	width: 80px;
	border-style: none;
	background: url(images/bNextOff.png);
	cursor: pointer;
}
.input-buttonN:hover {
	text-decoration: none;
	background: url(images/bNextOn.png);
}
.errorL {
	color: #609;
	text-decoration: none;
	font: bold 21px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	margin-bottom: 20px;
}
.portfolio {
	clear: both;
	margin-bottom: 25px;
	border: 1px solid #336;
	background-color: #39c;
	padding: 10px;
}
#accordion {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
	border-top: 4px none #336;
}
#accordion  div {
	padding: 0;
	margin: 20 0 0;
	border-bottom: 4px solid #336;
	border-top: 4px solid #336;
}
#accordion p {
	margin: 0px;
	padding: 4px 10px 20px;
}
#accordion  h2  {
	text-decoration: none;
	padding: 20px 10px 20px;
	border-bottom: 4px solid #fff;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	color: #336;
	margin: 0;
	cursor: pointer;
}
#accordion h2.ui-state-active { background: #fff; }
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{
	margin:0;
	background: #fff;
}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
mark{
	background:#ff0;
	color:#69c
}
a img{
	left: auto;
	right: auto;
	border: 6px solid #336;
}
a img:hover{ border: 6px solid #f90; }
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}.vImg {
	text-align: center;
	margin-right: 65%;
	margin-left: 35%;
}
hr{
	box-sizing:content-box;
	height:0;
	overflow:visible;
}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #fff;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
.col,.half,.third,.twothird,.threequarter,.quarter {
	float:left;
	width:100%
}

.cols,.w3-half,.shard,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.cols.s1{width:8.33333%}.cols.s2{width:16.66666%}.cols.s3{width:24.99999%}.cols.s4{width:33.33333%}
.cols.s5{width:41.66666%}.cols.s6{width:49.99999%}.cols.s7{width:58.33333%}.cols.s8{width:66.66666%}
.cols.s9{width:74.99999%}.cols.s10{width:83.33333%}.cols.s11{width:91.66666%}.cols.s12{width:99.99999%}
@media (min-width:601px){.cols.m1{width:8.33333%}.cols.m2{width:16.66666%}.cols.m3,.w3-quarter{width:24.99999%}.cols.m4,.shard{width:33.33333%}
.cols.m5{width:41.66666%}.cols.m6,.w3-half{width:49.99999%}.cols.m7{width:58.33333%}.cols.m8,.w3-twothird{width:66.66666%}
.cols.m9,.w3-threequarter{width:74.99999%}.cols.m10{width:83.33333%}.cols.m11{width:91.66666%}.cols.m12{width:99.99999%}}
@media (min-width:993px){.cols.l1{width:8.33333%}.cols.l2{width:16.66666%}.cols.l3{width:24.99999%}.cols.l4{width:33.33333%}
.cols.l5{width:41.66666%}.cols.l6{width:49.99999%}.cols.l7{width:58.33333%}.cols.l8{width:66.66666%}
.cols.l9{width:74.99999%}.cols.l10{width:83.33333%}.cols.l11{width:91.66666%}.cols.l12{width:99.99999%}}
.contPadd,.contPadd>.w3-half,.contPadd>.shard,.contPadd>.w3-twothird,.contPadd>.w3-threequarter,.contPadd>.w3-quarter,.contPadd>.cols{ padding:0 36px 36 }
.shardBar {
	padding-top: 16px;
	padding-bottom: 16px;
	clear: both;
}
.padBarBottom { padding-bottom: 36px; }
.whole { margin-top: 48px; }
.contPadd, .contPadd>.w3-half, .contPadd>.shard, .contPadd>.w3-twothird, .contPadd>.w3-threequarter, .contPadd>.w3-quarter, .contPadd>.cols, .contPadd>.w3-half, .contPadd>.shard, .contPadd>.w3-twothird, .contPadd>.w3-threequarter, .contPadd>.w3-quarter, .contPadd>.cols {
	padding:0 8px
}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.colslapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.colslapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}

/* Extra small devices (phones, 600px and down; vert iPhone) */
@media only screen and (max-width: 600px) {#harlNav {
	font: bold .7em Helvetica, Arial, sans-serif;
	bottom: 0px;
	left: 0px;
	text-decoration: none;
	background: #fff;
	color: #336;
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 0;
	position: relative;
	margin-left: 0px;
}
#harlNav ul {
	margin: 0;
	padding: 0;
}
#harlNav li {
	display: inline;
	margin: 0;
	padding: 0;
}
#harlNav li a, #harlNav li a:link {
	color: #336;
	text-decoration: none;
	padding: 0.5em 0.5em;
	display: inline-block;
	font: bold .7em Verdana, Geneva, sans-serif;
}
.structure { padding:0.1em 16px 2em }
h1 {
	font-size: 2em;
	color: #336;
	padding-top: 180px;
	font-weight: bolder;
	text-decoration: none;
	padding-bottom: 36px;
}
h2 {
	font-size: 1em;
	color: #336;
}
h3 {
	font-size: 2em;
	color: #fff;
	padding-top: 144px;
	font-weight: bolder;
	text-decoration: none;
	padding-bottom: 36px;
}
.whole { margin-top: 24px; }
.pbtn {
	font: bold .5em Helvetica, Arial, sans-serif;
	border: 1px solid #336;
	outline: none;
	/* padding: 12px 16px; */
	background-color: white;
	cursor: pointer;
	width: 10%;
	margin-bottom: 18px;
	padding-bottom: 2px;
	margin-top: 18px;
}
.pbtn:hover {
	background-color: #f90;
	border: 1px solid #f90;
}
.bullet, .bullt, .blet {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 1px;
  background-color: #999;
  border-radius: 50%;
  display: inline-block;
  /* transition: background-color 0.6s ease; */
}
#theH {
  background: url(images/images/retVp.png) no-repeat center;
  width: 100%;
}


} 

/* Extra small devices (phones, 600px and down; vert iPhone) */
@media only screen and (max-width: 1400px) and (min-width:601px) {#harlNav {
	font: bold .9em Helvetica, Arial, sans-serif;
	bottom: 0px;
	left: 0px;
	text-decoration: none;
	background: #fff;
	color: #336;
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 0;
	position: relative;
	margin-left: 0px;
}
#harlNav ul {
	margin: 0;
	padding: 0;
}
#harlNav li {
	display: inline;
	margin: 0;
	padding: 0;
}
#harlNav li a, #harlNav li a:link {
	color: #336;
	text-decoration: none;
	padding: 0.5em 0.5em;
	display: inline-block;
	font: bold .9em Verdana, Geneva, sans-serif;
}
.structure { padding:0.1em 16px 3em }
h1 {
	font-size: 4em;
	color: #336;
	padding-top: 180px;
	font-weight: bolder;
	text-decoration: none;
	padding-bottom: 72px;
}
h2 {
	font-size: 1.5em;
	color: #336;
}
h3 {
	font-size: 4em;
	color: #fff;
	padding-top: 144px;
	font-weight: bolder;
	text-decoration: none;
	padding-bottom: 72px;
}
.whole { margin-top: 36px; }
} 

/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {#harlNav {
	font: bold 1.2em Helvetica, Arial, sans-serif;
	bottom: 0px;
	left: 0px;
	text-decoration: none;
	background: #fff;
	color: #336;
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 0;
	position: relative;
	margin-left: 0px;
}
#harlNav ul {
	margin: 0;
	padding: 0;
}

#harlNav li {
	display: inline;
	margin: 0;
	padding: 0;
}

#harlNav li a, #harlNav li a:link {
	color: #336;
	text-decoration: none;
	padding: 0.5em 0.5em;
	display: inline-block;
	font: bold 1.2em Verdana, Geneva, sans-serif;
}

#harlNav li a:hover {
	color: #f90;
	text-decoration: none;
}} */

/* Medium devices (landscape tablets, 768px and up; messes up horiz iPhone) 
@media only screen and (min-width: 768px) {#harlNav {
	font: bold .9em Helvetica, Arial, sans-serif;
	bottom: 0px;
	left: 0px;
	text-decoration: none;
	background: #fff;
	color: #336;
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 0;
	position: relative;
	margin-left: 0px;
}
#harlNav ul {
	margin: 0;
	padding: 0;
}

#harlNav li {
	display: inline;
	margin: 0;
	padding: 0;
}

#harlNav li a, #harlNav li a:link {
	color: #336;
	text-decoration: none;
	padding: 0.5em 0.5em;
	display: inline-block;
	font: bold .9em Verdana, Geneva, sans-serif;
}

#harlNav li a:hover {
	color: #f90;
	text-decoration: none;
}} 
*/
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (min-width:1500px) {#harlNav {
	font: bold 1.9em Helvetica, Arial, sans-serif;
	bottom: 0px;
	left: 0px;
	text-decoration: none;
	background: #fff;
	color: #336;
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 0;
	position: relative;
	margin-left: 0px;
}
#harlNav ul {
	margin: 0;
	padding: 0;
}

#harlNav li {
	display: inline;
	margin: 0;
	padding: 0;
}

#harlNav li a, #harlNav li a:link {
	color: #336;
	text-decoration: none;
	padding: 0.5em 0.5em;
	display: inline-block;
	font: bold .9em Verdana, Geneva, sans-serif;
}

#harlNav li a:hover {
	color: #f90;
	text-decoration: none;
}} 

/* Extra large devices (large laptops and desktops, 1200px and up)  */
@media only screen and (min-width: 1200px) and (min-width:2000px) {#harlNav {
	font: bold 1.2em Helvetica, Arial, sans-serif;
	bottom: 0px;
	left: 0px;
	text-decoration: none;
	background: #fff;
	color: #336;
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 0;
	position: relative;
	margin-left: 0px;
}
#harlNav ul {
	margin: 0;
	padding: 0;
}
#harlNav li {
	display: inline;
	margin: 0;
	padding: 0;
}
#harlNav li a, #harlNav li a:link {
	color: #336;
	text-decoration: none;
	padding: 0.5em 0.5em;
	display: inline-block;
	font: bold 1.2em Verdana, Geneva, sans-serif;
}}

.sFrames, .sRames, .sFames {display: none}
.framenav {
	text-decoration: none;
	clear: both;
	height: 20px;
	padding-bottom: 20px;
}
.prevframe {
	text-decoration: none;
	text-align: left;
	float: left;
	width: 49%;
	clear: left;
	font: bold 14px Arial, Helvetica, sans-serif;
}
.nextframe {
	text-decoration: none;
	text-align: right;
	float: right;
	width: 49%;
	clear: right;
	font: bold 14px Arial, Helvetica, sans-serif;
}
.prevframe a {
	text-align: left;
}
.nextframe a {
	text-align: right;
}
.prevframe a:link, .prevframe a:visited, .nextframe a:link, .nextframe a:visited {
	color: #336;
	text-decoration: none;
}
.prevframe a:hover, .prevframe a:active, .nextframe a:hover, .nextframe a:active {
	color: #f90;
	text-decoration: none;
}
.bullet, .bullt, .blet {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	border-radius: 50%;
	display: inline-block;
	background: #999;  /* transition: background-color 0.6s ease; */
}

.live, .bullet:hover, .bullt:hover, .blet:hover { background-color: #336; }
.frameText {
	color: #336;
	position: relative;
	width: 100%;
	text-align: left;
	height: 240px;
}

/* The portfolio case */
.case {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #336;
}

/* Modal Content */
.case-content {
	position: relative;
	background-color: #336;
	margin: 48px auto auto;
	padding: 0;
	width: 90%;
	max-width: 1200px;
}

/* The Close Button */
.closer {
	color: #fff;
	position: absolute;
	top: 100px;
	right: 25px;
	font-size: 3em;
	font-weight: bold;
}

.closer:hover, .closer:focus {
  color: #f90;
  text-decoration: none;
  cursor: pointer;
}

.thePieces {
	display: none;
	margin-top: 80px;
	margin-right: auto;
	margin-left: auto;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 2em;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "left button" to the left */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
	color: #fff;
	font-size: 1em;
	padding: 8px 12px;
	position: absolute;
	top: 45;
	left: 25px;
}

img {
	vertical-align: middle;
	margin-right: auto;
	margin-left: auto;
}
/*
.caption-container {
	text-align: center;
	background-color: #336;
	padding: 2px 16px;
	color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
*/
img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.column {
  display: none; /* Hide all elements by default */
}
.exhbt {
  display: block;
}

/* Style the buttons */
.pbtn {
	border: 2px solid #336;
	outline: none;
	/* padding: 12px 16px; */
	background-color: white;
	cursor: pointer;
	width: 24%;
	margin-bottom: 36px;
	padding-bottom: 4px;
	margin-top: 36px;
}
.pbtn:hover {
	background-color: #f90;
	border: 2px solid #f90;
}
.pbtn:active {
  background-color: #336;
  color: white;
}
#imgFl {
	float: left;
	padding-right: 50px;
	text-align: left;
	padding-top: 24px;
	padding-bottom: 16px;
}
#imgFr {
	float: right;
	padding-right: 50px;
	text-align: left;
	padding-top: 24px;
	padding-bottom: 16px;
}