/*  Terry Barth Design www.terrybarthdesign.com  */

@media all{

/* CSS Document */
@charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{ margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline;
font-size: 16px; font: inherit normal 100% inherit; color: #444; 
font-family: "lft-etica",sans-serif;
font-style: normal;
font-weight: 400;}

/* remember to define focus styles! */
:focus { 	outline: 0; }
body {	line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal; }
	
/* blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; } */

	*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}	

  body {font-size: 16px; margin:0; width:100%; color:#444444; }
  
  p, a, li, .accordionheading, .slide-caption,
  #logo-name {line-height: 1.5em; font-size: 1em;
  font-family: "lft-etica",sans-serif; font-style: normal; font-weight: 400;} 
  
  #page11 p {font-size: 1.25em;}
  h1, h2, h3, h4 {line-height: 1.1em; color: #999; 
  font-family: "futura-pt",sans-serif; font-style: normal; font-weight: 400;}
  
    
	
	#contact-info {font-family: "futura-pt";}
	a {color:#466087; text-decoration:none; }
	a:hover { color: #666; text-decoration:none;}
	section, header,footer,nav { display:block;}
	img {border:0; vertical-align:top; max-width:100%; }
	form,
	fieldset {border:0; padding:0; margin:0; }
	h1 {font-size: 2em; margin:0 0 0.15em; }
	h2 {font-size: 2em; margin:0 0 0.15em; }
	h3 {font-size: 1em; margin:0 0 0.15em; }
	ol, ul {padding:0; margin:0; list-style:none; }
  ul li {list-style-type: disc; }
  ol li {list-style-type: decimal; }
  li {padding:0 0 0.5em 1.5em;}
	p  {margin:0 0 1em;}
  hr {color:#ccc; background-color:#ccc; height:1px; border:none; margin: 1em 0; }

  .more    {float: right; display: inline-block;}
  .imageright {float: right; margin: 5px  0 5px 10px; border: 1px solid #eee;}
  .imageleft  {float: left;  margin: 5px 10px 5px 0;  border: 1px solid #eee;}
  .readmore {text-align: right; text-decoration: underline;}

	.image50 {width: 50%;}
	.image33 {width: 33%;}
	.imageshadow {
		-moz-box-shadow: 3px 3px 5px #aaa;
    	-webkit-box-shadow: 3px 3px 5px #aaa;
    	box-shadow: 3px 3px 5px #aaa;}
  .readmore {text-align: right; text-decoration: underline;}	
	
  .justifyright {text-align: right;}
  .justifyleft {text-align: left;}
	.hidden {display:none;}
	.box-main:after,
	.center:after {content:""; clear:both; display:block; }
	.right {float:right;} 
	.left {float:left;}
	.alignLeft {float:left; margin-right:1em; }
	.alignRight {float:right; margin-left:1em; }
	.fullWidth{width:100%;}
	.fullWidth img{width:100%;}
	.row {width:100%; padding: 0; }
	.row:after {content:""; display:block; clear:both; }

	
	.columns {width:100%	}
	.columns:after {content:""; display:block; clear:both; }
	.columns > div  {float:left; vertical-align:top; }
	.columns h2 {text-align:left;}
	.half {width: 48.0%; margin-right: 1%; float: left;}
	.oneThird {width:31.5%; margin:1%; }
	.twoThird {width:64%; margin:1%; }
	.columns > div:first-child,
	.columns > article:first-child {margin-left:0;}
	.oneThird +.oneThird +.oneThird,
	.threeForth + .oneForth,
	.oneForth + .half,
	.half + .oneForth + .oneForth,
	.last {float:right; margin-right:0; }     
	.oneForth {width:23%; margin-right: 2%;}
	.threeForth{width:74.5%;}

	.imgHolder {display:inline-block; padding:1px; margin-bottom:1em; max-width:100%;
		overflow:hidden;  }
	* +html .imgHolder {max-width:93.5%; border-width:3%; padding:0; }
	.imgHolder img {display:block;}

    .lazy {
    display: block;
    height: auto;
    max-width: 100%;
    }

	.video-wrapper {width: 33%;	max-width: 100%;}	
	.video-container {position: relative; padding-bottom: 61.15%; padding-top: 0px; height: 0; overflow: hidden;}
	.video-container iframe,  
	.video-container object,  
	.video-container embed {position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important;}		
	
/* forms */	

	form,
	fieldset {padding:0; margin:0; border:0; }
	input:focus, textarea:focus, select:focus {border:0px solid #fafafa; outline: none; 
	background-color: #9F9F9F; color: #fff;}
	textarea:hover, input:hover {background-color: #9F9F9F;}
	input, select, textarea, label  {background:#838282; font:1em/1.214em Arial, Helvetica, sans-serif; 
		color:#444; resize:none; float: left; display: block; width: 100%; margin-right: 1%; }
	input, select, textarea {border:0px solid #aaa; padding:0.75em 1.5em;  }
	textarea {overflow:auto; height:10.812em; }
	
	#city, #state, #zip {float: left; margin-right: 10px; width: 30%;}
	label {margin-top: 1em;}
	.error {color: #fff; padding: 2px 5px;}
#workemail {margin-left: -10000px;}
	.form-buttons input {width: 25%; background-color: #838282;}
	.form-buttons input:hover {color: #fff;}
	.form  input[type="checkbox"] {width: 30px; display: inline-block; border: 0; padding: 0; clear: left; }
	input[type=submit] {padding: .75em 2em; color: #5e5d5d; float: right; margin-top: 2em; border: 0; width: auto;

	-webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background-color: #fbbf18;}
	input[type=submit]:hover {cursor: pointer; background-color: #EAB30B; color: #5e5d5d; } 


	::-webkit-input-placeholder { color: #444; }
	:-moz-placeholder {color:    #444; }
	
	/* -webkit-box-shadow:0 0 6px #666; -moz-box-shadow:0 0 5px #666; box-shadow:0 0 5px #666; */	
	/*-webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;   */
	/* background: #aaa url(../../assets/sitegraphics/file.png) repeat-x scroll 0px 0px; */
	
/*main styles*/
.pagewidth {width:100%;}
.center {max-width:1200px; width: 90%;	margin:0 auto; }
	
header {width:100%; padding:1.143em 0; margin-bottom: 50px; }
#tagline {float: left; margin: 5%;}

#logo {float: left; width: 105px; /*width: 15%; */ padding: 0; margin: 0 10px 0 0;}
#logo img {  width: 100%;}
#logo-name {font-size: 1.25em; line-height: 1.15em; width: 75px; text-transform: uppercase; padding-top: 30px;
float: left; color: #999; }

a.social .icon-hover {display: none;}
a.social:hover .icon {display: none;;}
a.social:hover .icon-hover {display: inline-block;}

.social img {width: 20px;  margin: 3px 0 0 0; width: 24px;}

#page39 #content .center p {display: block; }
#page39 #content img { height: auto!important; width: auto!important; max-width: 300px; 
vertical-align: middle; padding: 0 3%;}

#bio-photo {width: 25%;}

/**************  Drop Down Menu Style **************/
	
.slicknav_menu {display:none; }
.slicknav_menu li.last {float: none;}	
	
.dropdownmenu    {padding-left: 0px; clear: none; margin-top: 51px; float: right; display: inline-block; }
.dropdownmenu ul {padding:0; position: relative; z-index: 500; display: inline-block; }
.dropdownmenu ul li   { padding: 0; margin: 0 50px 0 0; color:#FDBE13; display: inline-block; float: left; border: 0;}
.dropdownmenu ul li.last { margin-right:0;  }
.dropdownmenu ul li a {color:#999; height:1.5em; line-height:1.75em; font-size: 1.25em; text-transform: uppercase;  
  padding: 0 25% 0 0; margin: 0;}
.dropdownmenu ul li ul { color:#fff; }

.dropdownmenu ul li.active,
.dropdownmenu ul li:hover {border-bottom: 2px solid #FDBE13;}




#slideshow-overlay {position: relative; margin-bottom: 2em; margin-top: 5px; overflow: hidden; max-width: 1000px;
margin: auto;}
#slideshow-overlay img.overlay { position: relative; z-index: 1000; width: 60%; max-width: 600px;}
#slideshow-overlay .cycle-slideshow {position: absolute; top: 0; left: 0; z-index: 900; width: 99%; }

#header-slideshow  {}
#header-slideshow .cycle-slide { padding: 1.5% 0 0 2%; margin: 0; width: 58.5%; max-width: 595px; }
#header-slideshow .slide-caption {position: absolute; top: 5%; left: 105%; width: 62%; text-align: left;
margin-right: 0;}
.slide-caption h2 {color: #fbbf18; font-size: 1.5em;  text-transform: uppercase; font-weight: normal;}
.slide-caption p {color: #999; font-size: 1.25em;  line-height: 1.25; margin-top: 15px;}
.slide-caption p.designed-by {font-size: .85em; text-transform: uppercase;}
.cycle-slide .slide-caption a {background-color: #fbbf18; padding: 5px 20px; line-height: 1em; text-align: left;
display: inline-block;
	-webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; }

#key-messages .captions .line1 {padding: 0 5%; font-size: 2em; line-height: 1em; width: 100%; 
font-family: "lft-etica",sans-serif;
font-style: italic;
font-weight: 400;

}
#key-messages .captions  {width: 100%;
background: url(../../assets/site-graphics/caption.png) repeat-x scroll 0px 0px; }
#key-messages {margin-top: 30px; margin-bottom: -6px; 
	background: #fbbf18 url(../../assets/site-graphics/caption.png) repeat-x scroll 0px 0px; 
	-webkit-box-shadow:0 6px 4px #444; -moz-box-shadow:0 6px 4px #444; box-shadow:0 6px 4px #444; 	}

#key-messages .cycle-slide {width: 100%; margin: 0; padding: 0;}

/* Cycle2 Slideshow */

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; }
.cycle-slideshow { width: 100%; min-width: 200px;  margin: 10px auto; padding: 0;
position: relative; border-bottom: 0px solid #606fab; } /* background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat; */
.cycle-slideshow img {z-index: -100; position: absolute; top: 0; left: 0; width: 100%; padding: 0; display:
block;}
/* some of these styles will be set by the plugin (by default) but setting them here helps avoid flash-of-unstyled-content in case script does not load */
.cycle-slideshow img,
.cycle-slideshow img:first-child { position: static; z-index: 100; }
.----slide img {width: auto; float: left; margin-right: 5%;}
.cycle-slide {width: 100%; position: relative; 
padding: 0 50px;}

.cycle-slide .logo {float: right; margin: 10% 5% 0 0; max-width: 20%;}	
	
/* pager */
.cycle-pager { margin-top: 0px; text-align: center; width: 100%; z-index: 1500; position: relative; bottom: 50px; overflow: hidden; }
.cycle-pager span { font-size: 0; width: 11px; height: 11px; margin:0 3px; display: inline-block; cursor: pointer; border: 1px solid #000;
background-color: #ddd; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px }
.cycle-pager span.cycle-pager-active { background-color:  blue; }
.cycle-pager > * { cursor: pointer; }

/* caption */
.--captions { position: absolute; top: 15px; right: 15px; z-index: 700; width: 33%;  }

.cycle {width: 100%;}
.cycle-slide a { display: block; padding: 30px 0px 3px 10px;
text-decoration: none; text-align: right; color: #444; text-transform: uppercase; font-size: 90%; line-height: 1;
font-weight: 300; z-index: 2000;}

.cycle-slide {width: 90%; margin: 0 5%;}

.cycle-slide .iphone-overlay {width: 32%; margin-right: 1%;  position: relative!important; float: left!important; z-index: 110; }	

#slideshow-overlay {position: relative;}
#slideshow-overlay #prev,
#slideshow-overlay #next {position: absolute; bottom: 50px; z-index: 1000; font-size: 4em; padding: 10px 20px; font-weight: 300;
color: #ddd; cursor: pointer;}
#slideshow-overlay #prev {right: 20%; }
#slideshow-overlay #next {right: 10%; }


img.desktop {width: 76%; margin: 4.2% 12% 0;}
img.phone    {width: 30%; position: absolute; padding: 12% 0 0 3%;  }	
img.two {left: 33%;}
img.three {left: 66%; top: 400-px;}


.desktop .phone-image,
.desktop .iphone-overlay,
.desktop .two,
.desktop .three,
.phone .desktop-image,
.phone .macbook-overlay {display: none}

img.desktop,
img.phone {position: absolute;}

.image-container {max-width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; margin-bottom: 3em; position: relative;}
.image-container img.macbook-overlay {position: absolute; z-index: 500;}
.image-container img.desktop-image {width: 80%; margin: 4% 10% 0;}
.slide-caption {font-size: 1.35em; line-height: 1.1em; position: absolute; z-index: 700; text-align: center; width: 80%; margin: 0 5%;
 bottom: 0; font-weight: 400; color: #000; }



#page3 #content .columns {position: relative;}
/* .portfolio-grid-item {width: 21%; margin: 0 2% 2% 0; float: left;}   */
/* .thumb-large {position: absolute; left: 0; top: 50px;  width: 100%!important; text-align: center;
z----index: 10000;} */
.thumb-large img {max-width: 85%!important; margin: auto;}

#portfolio {width: 90%; margin: 0 auto;}
.portfolio-item {position: relative; }
.portfolio-grid-item {width--: 21%; padding: 1%; float: left; position: relative;
  border-bottom: 0px solid #eee; margin: 2% 0; }
.portfolio-grid-item img {border: 0px solid #aaa; }
.thumb {width: 100%; float: left; margin-right: 1%;}
.thumb > img {}

.popup-content .prev, 
.popup-content .next, 
.accordioncontent .prev, 
.accordioncontent .next {position: absolute; top: 30%;  z-index: 1000; }
.prev:hover, .next:hover {cursor: pointer; color: #ccc;}
.prev {left:  0; }
.next {right: 0;}

.slide-right-side {float: left; max-width: 40%; margin-left: 5%;}
.cycle-slide div.features {font-size: 100%; width: 25%; }

.popup-content,
#small-dialog {background: white;
        padding: 20px 30px; text-align: left;
        max-width: 900px; width: 80%; margin: 40px auto; position: relative;}


.popup.item {width: 30%; cursor: pointer; padding: 0 20px; margin: 0 0 20px 0; 
height: 350px; overflow: hidden;}


.popup.item:hover h3 {color: #fdbe13; border-bottom-color: #fdbe13;}
.popup .thumb-container {float: none; width: 100%; margin: 1em auto; overflow: hidden;}
.popup h3 {clear: left; text-align: center; font-size: 1.25em; color: #999; /* height: 40px; */
padding-bottom: .25em; margin: 2em 0 .5em; border-bottom: 1px solid #dedede;
	height: 2.5em; display: table-cell; vertical-align: bottom; width: 1%;}

.popup-content { display:none; width: 80%; background-color: #fff;}
.popup-content h2 {text-align: left;}
.popup-image {width: 65%; float: left; margin-right: 1%; padding: 1%;}

/*
.--slide  {
	-webkit-transition: 1s ease-in-out; 
	-moz-transition: 1s ease-in-out; 
	-o-transition: 1s ease-in-out; 
	transition: 1s ease-in-out;}
.--slide:hover {transform: scale(2);}
*/

/*
ul.utility {width: 15%; float: left;}
ul.utility span {display: none;}
ul.designer {width: 85%; float: left;}
ul.designer {padding-left: 100px;}
ul.designer span {float: left; margin-left: -100px; color: #999; font-weight: bold;}

	#options ul.utility {float: none; width: 100%; margin-bottom: 1em;}
	ul.utility span {display: inline-block; padding: 0 0 .5em 0; margin-left: 1.5em; color: #999; 
	font-weight: bold; line-height: 1.5em;}
	#options #filters,
	#options #filters span {display: block; width: 100%; padding-left: 0;}
	#options #filters span {margin-bottom: 0;}
	#options #-filters span {display: none;}

#options #filters li a {padding: 0 1em 0 0; text-align: left; }
#options #filters li  {}
#options #filters + #filters li { padding: 0 1em; margin: 0 1em 1em 0; 
 display: inline-block;}
#options #filters + #filters li a {background-color: #ddd;
-webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }

#options #filters li {text-align: left; padding: 0; margin: 0 1em 0 0;}
#options #filters + #filters li a {text-align: center; line-height: 2em;}

#options #filters:first-child  li a:hover { border-bottom: 2px solid #fdbe13; padding-bottom: 0;}
#options #filters:first-child  li a:active {border-bottom: 2px solid #fdbe13;}
#options #filters:first-child  li a.selected { border-bottom: 2px solid #fdbe13; padding-bottom: 0;}

#options #filters:last-child  li a:hover {background-color: #eee;}
#options #filters:last-child  li a:active {background-color: #eee;}
#options #filters:last-child  li a.selected {background-color: #eee;}

*/

#options {padding-left: 20px;}
#options ul {margin: 0 0 2em; list-style: none;}
#options ul ul {margin-left: 1.5em;}

#options li { text-align: center; float: left; margin: 0 1em 1em 0; padding: 0; list-style-type: none;}
#options span { text-decoration: none; display: block; padding: 0 1em 1px; line-height: 1.5em; 
font-size: 1em; color: #bbb; font-weight: 400;}
#options li a { text-decoration: none; display: block; padding: 0 1em 1px; line-height: 1.5em; 
font-size: 1em; color: #bbb; font-weight: 400;}

#options span.accordionheading {color: #999; padding: 0 1em 0 0; }

#options span.accordionheading.open:after { content: " -"; }
#options span.accordionheading.closed:after { content: " +"; }
#options .accordioncontent li a {font-size: .9em;}

--#options span.accordionheading.open {color: #FDBE13;}
#options li.utility {margin-right: 2em;}
#options li.utility a {padding-left: 0; text-align: left; background-color: transparent; color: #999;
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0; padding-bottom: 1px;}
#options li.utility a:hover    {background-color: transparent; color: #FDBE13;}
--#options li.utility a:active   {background-color: transparent; color: #999;}
#options li.utility a.selected {padding-bottom: 0; background-color: transparent; color: #FDBE13;}
#options li.utility a.selected:hover {color: #FDBE13;} 

#options li a {background-color: #fff; border: 1px solid #cdcdcd; padding-top: 1px;
-webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; }

#options li a:hover,
#options li a.selected {background-color: #cdcdcd; color: #fff;}
.accordionheading {float: left; cursor: pointer;}


/* Accordion *

.accordionheading,
.accordionheading h2 {cursor: pointer; margin: 0;}
.accordioncontent span,
.accordionheading span {display: block; line-height: 1.3em; margin-bottom: .5em;  font-size: 1.25em;}

.heading-right p {font-size: 1.25em; line-height: 1.3em;}
.heading-right p strong {font-size: 1em;}

.accordioncontent  {width: 100%; position: absolute; top: 50px; left: 0; padding: 15%;
background-color: #efefef; }


.accordionheading {line-height: 8em; width: 80%; margin: 40px auto 0; }

.accordionheading h2 {text-align: left; line-height: 1.4em; clear: none; margin-bottom: 0em; }
.accordionheading.closed h2 {margin-bottom: .5em;}
.accordionheading .half {width: 30%; margin-right: 5%; }
.accordionheading .half + .half {width: 35%; }


.thumb-container {width: 20%; max-height: 200px; overflow: hidden; margin-right: 2%; float: left;}
.accordion-thumb { height: 150px; width: 200px;  width: 100%; }

.open .accordion-thumb, .open .description,
.open span {display: none;}
.accordioncontent {width: 80%;  margin: auto; position: relative; top: 0; padding:0; }
.accordioncontent .description {float: right; width: 50%; margin-left: 2%; font-size: 1.25em; }
.accordioncontent span.location,
.accordioncontent span.industry,
.accordioncontent span.designed-by {margin-left: 10%; }
.accordioncontent .description p {line-height: 1.2em; margin-bottom: .5em;}
*/

.popup-content {width: 90%;  margin: auto; position: relative; top: 0; padding:2%; }
.popup-content .description {float: right; width: 33%; margin-left: 2%; font-size: 1.em; }
.popup-content .classification {float: left; width: 60%; margin-left: 5%;}
.popup-content span.label {width: 85px; display: inline-block; line-height: .9em; 
font-size: .9em; font-weight: 700;  float: left; margin-left: -105px;}
.popup-content p.data {  display: inline-block; line-height: 1.3em; margin: 0;
font-size: 1em; float: left; clear: left; padding-left: 85px; }
.popup-content .description p strong,
.popup-content h4 {font-size: 1em;}
.popup-content strong {font-weight: 700;}

#container {}

.popup-content .description p {line-height: 1.3em; margin-bottom: .5em;}

.accordioncontent h2 {display: none;}

.accordioncontent h4 {width: 75%; margin: 1em 0;}


.accordionheading {background--color: #d6d6d6; padding: 1em;}

/* for grid layout */

.--accordionheading {width: 48.5%; margin-right: 3%; float: left; min-height: 225px;}

--.item {width: 48.5%; margin-right: 3%; float: left; }

.item,
.accordionheading.odd {margin-right: 0; }

.open .accordion-thumb {display: block;}
.open span {display:block;}
--.thumb-container {width: 40%;  min-height: 300px;  max-height: 300px; }
.accordionheading .heading-left {width: 52.5%;}
.heading-right {display: none;}
.accordionheading.open { margin-bottom: 2em;}
.accordioncontent {clear: left;}


.grow {-webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;}

.grow:hover{opacity: 1; 
  -webkit-transform: scale(1.1, 1.1) translate(0, 10px);
  -moz-transform: scale(1.1, 1.1) translate(0, 10px);
  transform: scale(1.1, 1.1) translate(0, 10px);
}





/* portfolio with no scroller *

.phone-container img:first-child,
.desktop-container img:first-child { position: relative; }	

.desktop-container {width: 60%; position: relative; float: left; z-index: 200;}
.cycle-slideshow .desktop-container .desktop {z-index:200;}	
.desktop-container .image-holder {width: 95%; margin: 5% 0 0 4%; max-height: 325px; overflow: hidden;
position: absolute; top: 0; z-index: 100;}	

.phone-container {width: 10%; position: relative; float: right; clear: right; margin: 5% 10% 0 0; z-index: 200;  }
.cycle-slideshow .phone-container .phone {z-index:200;}	
.phone-container .image-holder {width: 80%; margin: 35% 0 0 10%; max-height: 150px; overflow: hidden;
position: absolute; top: 0; z-index: 100;}	
	
/* vertical align content */

.vertical-align { display: table; height: 97px;}
.vertical-align-inner {display: table-cell; vertical-align: middle; max-width: 1200px; margin: auto;  }

.closed .down-triangle  {display: none;}
.closed .right-triangle {display: inline-block;}
.open   .down-triangle  {display: inline-block;}
.open   .right-triangle {display: none;}

.right-triangle {width: 0px; float: left; margin: 8px 4px 0 0;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent #000 transparent }

.down-triangle {width: 0px;  float: left; margin: 8px 4px 0 0;
height: 0px;
border-style: solid;
border-width: 7px 5px 0 5px;
border-color: #000 transparent transparent }

/* http://apps.eky.hk/css-triangle-generator/ */

/* boxes *
	.boxes > div {border:1px solid #505a68; position:relative; padding:10px; margin:0 0 30px;
		height:1%; }
	.boxes > div:after {content:""; display:block; clear:both; }
	.boxes h3 {font-size:1.714em; line-height:2.583em; text-align:center; margin:-10px -10px 10px -10px;
		border-top:0px solid #909eb2; border-bottom:0px solid #545b65; background:#666;}
	.boxes h3 a {display:block; text-decoration:none; color: #fff; }
	.boxes .content {width:83%; overflow:hidden; margin:0 auto; }
	.boxes .readMore {position:absolute; top:100%; margin:-2.143em 0 0; width:100%; text-align:center; }


	/* Quotes *
	
	.quote-author,
	.quote {display: inline-block; font-size: 1.5em; line-height: 1.25em; padding: 3%;
	width: 80%; margin: 2em auto 0;}
	.quote .quote-left {margin-top: -5px;}
	.quote .quote-right {bottom: -17px; display: inline-block; vertical-align: bottom;}
	.quote-author {font-size: 1em; font-style: italic; text-align: right; margin-top: 0;}
	*/

	footer {width:100%; background-color: #5e5d5d; padding: 2em 0; margin-top: 8em;}
	#page1 footer {margin: 0; padding: 2em 15em;}
	footer .row {max-width: 1200px; width: 90%; margin: auto;}
	footer a {color:#fff; }
	footer a:hover {color: #aaa;}
	footer h2 {color: #fff;}
	footer #form_container {width: 50%; float: left; padding-right: 30px;}
	#contact-info {float: left; margin-left: 0; color: #fff; font-size: 1.5em; line-height: 1.5em; margin-top: 21px;}
	p#copyright {padding: 0; color: #777; margin: 0; float: right; font-size: 1em;}
	footer p {color: #aaa; font-size: 1.5em;}

#page47 h1 {font-size: 3em;}	
.docnotfound li {float: none; list-style-type: none; font-size: 2em; margin-left: 1em; color: #999;}

/* clearing */
  .stretch,  .clear {  clear: both;  height: 1px;  margin: 0;  padding: 0;  font-size: 15px;
  line-height: 1px;  }
  .clearfix:after {  clear: both;  height: 0;  display: block;  visibility: hidden;  content: ".";  }
  .clearfix {display:inline-block;}
  /* Hide from IE Mac \*/
  .clearfix {display:block;}
  /* End hide from IE Mac */
/* end clearing */

} /* End Media Query */

@media all and (max-width: 1185px){
	
	.-popup.item {width: 325px; padding: 0 20px; overflow: hidden;}	
	
}

@media all and (max-width: 1100px){
	.-popup.item {width: 300px; }
	#page1 footer {padding: 2em 10%; }
}

@media all and (max-width: 1020px){
	.--popup.item {width: 275px; padding: 0 15px; }
}

@media all and (max-width: 934px){
	.-popup.item {width: 250px; }
}


@media all and (max-width: 960px){
	
	.dropdownmenu ul li {margin-right: 25px;}
	.dropdownmenu ul li a {padding-right: 15%;}
	.popup.item {width--: 225px;  max-height--: 275px; }
	.thumb-container {min-height: 205px; max-height: 205px; }	

.slide-caption h2 {font-size: 1.25em;}
.slide-caption p  {font-size: 1.05em;}

}

@media all and (max-width: 850px){
	
}

@media all and (max-width: 780px){
	.dropdownmenu ul li {margin-right: 20px; height: 4--em;}
	.dropdownmenu ul li a {padding-right: 15px; line-height: 1.25em; max-width:  125px;}
	.popup.item {width--: 200px; }
	#header-slideshow .slide-caption {top: 0;}
#slideshow-overlay #prev,
#slideshow-overlay #next {bottom: 10px;}	
#contat-info {float: none;}
footer #form_container {width: 90%; padding-right: 0;}	
}

@media all and (max-width: 766px){
	.-popup.item {width: 200px; }
}

@media all and (max-width: 685px){
	.-popup.item {width: 260px; }
	.slide-caption h2 {font-size: 1.05em;}
    .slide-caption p  {font-size: .85em;}
	.slide-caption p  {line-height: 1.15em;}
	#key-messages .captions .line1 {font-size: 1.5em;}
}


@media all and (max-width: 600px){

	.columns > div {float:none; margin:0; width:100%; }
	#template9 .center {width: 100%;}
	.center {width: 95%;}
  
	.js #menu {display:none;}
	.js .slicknav_menu {display:block;}
	header {margin-bottom: 15px;}
	header .center {text-align: center; }
	#logo, #logo-name {float: none; display: inline-block;}
	#logo-name {vertical-align: top; }
	.cycle-slide {padding: 10px;}
	#options ul {margin-bottom: 0;}
	.popup h3 {margin-top: 1em;}
	#container {width: 300px; margin: auto;}
	
	#options span {line-height: 1.75em;}
	#options li a {line-height: 1.75em; padding-left: .5em; padding-right: .5em;}
	#options li {margin-bottom: .5em; margin-right: .5em;}


#slideshow-overlay #prev,
#slideshow-overlay #next {bottom: 140px;}	
#slideshow-overlay #prev {left:  10px;}
#slideshow-overlay #next {right: 20px;}

#slideshow-overlay {margin: auto; width: 90%; position: relative; top: auto; left: auto; overflow: visible;}

#header-slideshow .cycle-slide {padding-bottom: 285px;}
#slideshow-overlay {padding-bottom: 160px;}

#slideshow--overlay {padding-bottom: 200px; margin-bottom: 00px;}
    #slideshow-overlay img.overlay {width: 100%}
	#header-slideshow .cycle-slide {width: 98%; }
	
	#header-slideshow .slide-caption {width: 100%;  left: 0; padding: 40px 0 20px 0; 
	margin: 0 0; position: absolute; top: auto; right: auto; left: auto; bottom: 0;}
	#header-slideshow .slide-caption h2,
	#header-slideshow .slide-caption p {text-align: center;}
	
.popup-content .description,
.popup-content .classification {width: 98%; margin: auto; float: none;}
.popup-content .description {text-align: center;}
.popup-content p.data {padding: 0; width: 100%; padding: 0 0 0 40%; font-size: 1.1em;}
.popup-content span.label {text-align: right; width: 50%; padding: 0 4% 0 0; margin: 0 0 0 -80px;}
.popup-content p.site-url span {display: none;}
.popup-content p.site-url {padding-left: 0; text-align: center;}
.popup-content .prev, .popup-content .next, 
.accordioncontent .prev, .accordioncontent .next {top: 25%; }

#page1 footer {padding: 2em 5%; }

}

@media all and (max-width: 537){
	
}



@media all and (max-width: 504px){
.cycle-slide {padding-bottom: 30px;}
.popup-content .prev, .popup-content .next, 
.accordioncontent .prev, .accordioncontent .next {top: 25%; width: 40px; display: inline-block;}
#key-messages .captions .line1 {font-size: 1.5em;}
}

@media all and (max-width: 400px){
.popup-content .prev, .popup-content .next, 
.accordioncontent .prev, .accordioncontent .next {top: 20%; width: 40px; display: inline-block;}
}

@media all and (max-width: 305px){
#key-messages .captions .line1 {font-size: 1.5em; }
.popup-content .prev, .popup-content .next, 
.accordioncontent .prev, .accordioncontent .next {top: 17%; width: 30px; display: inline-block;}
}

@media all
	and (min-device-width: 768px)
	and (max-device-width: 1024px){
	#content{padding:0;}
	
}