/*--------------------------
RESET
---------------------------*/
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, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video{margin:0; padding:0}
article, aside, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section{display:block}

table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, dfn, th, var{font-style:normal; font-weight:normal}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}
abbr, acronym{border:0}


/*--------------------------
GLOBAL
---------------------------*/
html { overflow-y:scroll;  }
body { font-family: 'Open Sans', sans-serif; font-size:.8em; width:auto; height:auto; color:#5e5d5d; line-height:22px; background:#ffffff; }

.clearfix:after{ content:"";  display:block;  clear:both;  visibility:hidden;  line-height:0;  height:0}
.clearfix{ display:inline-block }
html[xmlns] .clearfix{ display:block}
* html .clearfix{ height:1%}
.fl{ float:left; }
.fr{ float:right; }
.icon_left{ float:left; margin-right:10px;}

a img {border: 0;}
a, a:link{ color:#121212; text-decoration:none;  }
a:hover{ color:#7f7f7f; text-decoration:underline; }
::selection {background: rgb(0,0,0); color:#ffed00; padding: 5px; border-radius: 15px; width: 280px;}
::-moz-selection {background: rgb(255,247,0); color:#000000;}
img::selection {background: transparent;}
img::-moz-selection	{background: transparent;}

h1, h2, h3, h4, h5, h6, p { margin-left:20px; font-weight:400; color:#717171; font-family: 'Open Sans', sans-serif; }
h1{ font-size:26px; line-height:30px; }
h2{ font-size:24px; line-height:28px; margin-top: 20px;}
h3{ font-size:18px; line-height:22px;}
h4{ font-size:16px; }
h5{ font-size:12px; }
h6{ font-size:10px; }

p, ul, ol{ margin-bottom:20px; }
ul, ol{ margin-left:20px; }

figure, img {max-width:100%; height:auto;}
img.left {margin:0 20px 0 0; float:left; }
img.right {margin:0 0 0 20px; float:right;}
img.center {  display: block; margin-left: auto; margin-right: auto; }
object, embed, video{max-width:100%; height:auto}

/*--------------------------
HEADER
---------------------------*/
#header { margin-top:40px; float:left; position:fixed; z-index:1; width:100%; background-color:#ffffff; opacity:0.9;}
#header #logo { text-indent: -900em; width:415px; height:101px; }
#header #logo a { display:block; background:url(../images/HG.jpg) no-repeat; width:415px; height:101px; }
#header #main-nav{ margin-bottom:40px; background: url(../images/top_bar.jpg) repeat-y; width:980px; max-width:100%; height:128px;}
#header #main-nav, #header .widget { position:relative; }
#header .widget{ margin-bottom:20px; clear:both; float:left; width:100%; }
#header .widget h4{ font-size:11px; text-transform:uppercase; font-weight:normal; letter-spacing:2px; margin:10px 0; }

#header #main-nav ul li { list-style:none; line-height:30px; float: left; margin-top: 7px; }
#header #main-nav ul li a{
	display:inline;
	-moz-transition: all .7s; 
	-webkit-transition: all .7s; 
	-o-transition: all .7s; 
	transition: all .7s;
	width:90%;
	background:transparent;
    font-size: 1.05em;
    *font-size: 2em;
	font-weight:400;
	font-weight:300\9;
    line-height: .95em;
	color:#000000;
	display:block;
	text-decoration:none;
	padding:10px 7px 4px 7px;
	}
	
#header #main-nav ul li a:hover{
	-moz-transition: all 0.2s; 
	-webkit-transition: all 0.2s; 
	-o-transition: all 0.2s; 
	transition: all 0.2s;
	color:#000;
	width:75%;
	padding-left:15px;
	font-weight:300\9;
	text-decoration: line-through;
	}
	
/*#header #main-nav ul li .current {

	color:#000000;
	text-decoration:line-through;

}*/

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	border:1px solid #888;
	margin-bottom:20px;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.aligncenter{ text-align:left; }
.alignleft{ text-align:left; }
.alignright{ text-align:right; }
blockquote{ font-family: 'Open Sans', sans-serif; font-style:italic; background:url(../images/quote_left.png) no-repeat left .4em; margin-bottom:30px; }
blockquote p{ color:#; padding-left:26px; font-size:1.4em; line-height:1.5em; }
blockquote p cite{ font-style:italic; color:#9e9e9e; }

#services .columns .excerpt{ float:right; width:74%; }
#services .columns .img{ float:left; }
#services .columns .img img{ max-width:100%; }
/*--------------------------
LAYOUT
---------------------------*/
#page{ width:100%; max-width:980px; margin:0 auto; }

div.columns{height: 1%;}
div.one-half{width:48.5%}
div.one-third{width:31.3%}
div.two-third{width:65.64%}
div.one-fourth{width:22.7%;}
div.three-fourth{width:48.5%}
div.one-half, div.one-third, div.two-third, div.three-fourth, div.one-fourth{position:relative; margin-left:3%; float:left; margin-bottom:1.55em}
div.one-half:first-child, div.one-third:first-child, div.two-third:first-child, div.three-fourth:first-child, div.one-fourth:first-child, .first{margin-left:0 !important; clear:left;}


/*--------------------------
CONTENT
---------------------------*/
#main { width:100%; float:right; }
#main .content, #main .last-content{ min-height:700px; padding-top: 380px; clear:both; }

#main .content .page_title h2, #main .last-content .page_title h2, .title_underline{ font-size:11px; text-transform:uppercase; border-bottom:1px solid #ccc; letter-spacing:3px; margin-bottom:30px; float:left; width:100%; }
#main .content .page_title h2 span{ position:absolute; right:0; }
#main .divider{ border:none; border-top:1px solid #bebebe; clear:both; width:100%;  margin-bottom:20px; }
.copyright{ margin-bottom:70px; float:left; width:100%; border-top:1px solid #ccc; padding-top:10px; font-size:12px; line-height: 17px; color: #000000;}
a.bottom_logo {padding-top:10px;}

.intro{ font-family: 'Open Sans', sans-serif; font-size:2.5em; font-weight:300; line-height:1.4em; text-align:center; margin-bottom:60px; }
.intro a{ background:#65caa6; color:#f9fffd;}
.intro a:hover{ text-decoration:none; background:#1a1a1a; }

#filters{ padding:0; margin:0 0 20px -10px;}
#filters li{ list-style:none; display:inline; color:#999; }
#filters li a{ text-decoration:none; }
#filters li a.selected{ color:#000; text-decoration:none;}
#works-container{ margin-left:-6px; width:106%; float:left; }
#works-container .element {
  float: left;
  overflow: hidden;
  position: relative;
  width:162px;
  height:165px;
  background: #ededed;
}

p.caption {
	background: #ededed;
	height: 230px;
	color: #3e3e3e;
	line-height: 1.24em;
	font-weight: 500;
	padding-top: 5px;
}

/* Start: Recommended Isotope styles */

/*--------------------------
about me
---------------------------*/
.about_bg { max-width:100%; margin-bottom:20px; background:url(../images/about_main.png) no-repeat;}
.section-wrapper {
}

p.breadcrumbs {
	color:#ffed00; 
	font-size:15px; 
	padding-top: 40px;
	padding-left: 90px;
	}

p.bread {
	color:#ffffff; 
	font-size:1.8em; 
	line-height: 1.4em;
	padding: 40px 90px 100px 90px;
	margin-top: 10px;
	border-style:solid;
	border-width:1px;
	border-style:solid;
	border-bottom: #ff0000;

}

/*--------------------------
Exhibtion
---------------------------*/
.exhibition_events { max-width:100%; margin-bottom:20px; background:url(../images/exhibition_bg.jpg);}

p.sustainability {
	color:#000000; 
	font-size:2.0em; 
	padding: 40px 90px 0px 90px; 
	line-height: 37px;
}

p.quote { color:#0078ff; 
		  font-size:1.2em; 
		  padding: 0px 90px 0px 90px; 
		  font-style: italic;
}

p.align {
	color:#ec008c; 
	font-size:1.3em; 
	padding: 40px 20px 0px 20px; 
	line-height: 35px;
	width: 80%;	

}

p.text{
	color:#000000; 
	font-size:1.8em; 
	padding: 40px 20px 0px 20px; 
	margin-left: -130px;
	line-height: 35px;	
	width: 100%;	
	}
	
.displayed {
	margin: 0 auto;
}
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;
}


/*blog*/
#blog .post{ float:left; width:100%; margin-bottom:40px; padding-bottom:40px;}
#blog .post .post-aside{ float:left; width:27.3%;}
#blog .post .post-aside .post-meta{ text-align:right; padding-right:20px; border-right:1px solid #ccd0c8; }
#blog .post .post-aside .post-meta > span,
#blog .post .post-aside .post-meta .share span{ display:block; }
#blog .post .post-aside .post-meta .share{ margin-top:20px; }
#blog .post .hentry{ float:right; width:67%; }
#blog .post .hentry .category a{ text-transform:uppercase; font-size:12px; letter-spacing:2px; color:#5a5d57; }
#blog .post .more-button{ font-style:italic; }

/*--------------------------------
COMMENTS
--------------------------------*/
#commentsBox{position:relative; margin:30px 0 30px 0px; width:100%; padding:30px 0 0 0; clear:both;}
#commentsBox ul{list-style:none; margin:0 0 30px 0}
#trackbacks{margin:30px 0 0 40px}
#commentslist{margin:0 0 0 0px; list-style:none; padding:none; padding:0}
#commentslist li{ list-style:none; }
#commentslist .children li{padding:15px 0 0 30px; background:transparent url("../images/comment_marker.gif") no-repeat 0px 40px; border-left:1px solid #e3e3e3}
.comment{position:relative; margin:0 0 0 0; padding:0 0 20px 0}
.comment .avatar{position:absolute; left:0; top:0; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; }
#commentform h3{font-size:19px}
#commentform label{padding-left:20px}
.comment h5{font-size:16px; margin:0 0 0 80px; padding:0}
.comment .date{margin:0 0 10px 80px; display:block; color:#a5a5a2; font-style:italic}
.comment p{margin:0 0 10px 80px}
.comment-reply-link, 
.comment-reply-login{margin:0 0 0 80px}
.comment-reply{display:inline-block!important; padding:0 0 0 10px}
#comment-add{position:absolute; top:-5px; right:0px}
.moderation{margin:0px; padding:0 0 10px 25px}
#trackbacks ul{margin:-5px 0 15px}
#trackbacks ul li{padding:5px 0 5px 20px}

/* Comment Form */

#commentform{position:relative; margin:30px 0 30px 0px; clear:both; }
#comments #respond{position:relative; padding:0 0 0; margin:0}
#respond { padding-bottom:20px; }
#respond div{ padding-bottom:10px; }
#respond .form-allowed-tags{display:none}
#respond form{margin:none; padding:none; position:relative}
.cancel-comment-reply{float:right; margin:5px 90px 0 0; z-index:9999;}
#commentform textarea{width:97% !important}
#commentform input[type="text"],#commentform textarea{width:50%; background:none; border:none; padding:7px; margin-right:20px;-webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; border:1px solid #d9d9d9;  }
#commentform input[type="text"]:focus,#commentform textarea:focus{border:1px solid #8a8a8a;}

/*pagination*/
.pagination{ float:left; width:100%; text-align:center; margin-bottom:40px; }
.pagination a, .pagination span{ padding:4px 10px; margin-right:4px; }
.pagination span, .pagination a:hover{-webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:#dfe2dd;}
.pagination a:hover{ text-decoration:none; }


/*form*/
:focus{ outline:none; }
.form > div{ margin-bottom:10px; width:100%; position:relative; float: left;}
.form > div > label{ width:100px; float:left; margin-left:20px; }
.form #name, .form #email, .form #subject, .form #comments, .inputtext, .form select, #commentform textarea {padding:10px; border:1px solid #d9d9d9;  font-family: 'Open Sans', sans-serif; font-size:13px; }
.form #name:focus, .form #email:focus, .form #subject:focus, .form #comments:focus, .inputtext:focus, .form select:focus{border:1px solid #8a8a8a;}
.form #name, .form #email, .form #subject, .form #comments, .inputtext, .form select { width:40%;  -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:none; }
.form #comments{ width:40%; max-width:40%; }

#about .staff > h4{ margin-bottom:0px; color:#333; }
#about .staff > h5{ text-align:center; }

.form #submit, #commentform #submit{  
   background-image: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
   background-image:         linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
   -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
      -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
           box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
   border: solid 1px #5E5E5E;
   border-color: #5E5E5E #888888 #696969 #888888;
   -webkit-border-radius: 16px;
      -moz-border-radius: 16px;
           border-radius: 16px;
   padding: 0px 24px 0px 24px;
   display: inline-block;
   font-size: 15px;
   line-height: 32px;
   color: rgba(51,51,51,1); }
   
.gallery{ margin-left:0px; }
.gallery-item{ float:left; margin:0; padding:0; }
.gallery br{ margin:0; padding:0; border:1px solid red; float:left; }
.gallery-item .gallery-icon { margin:0; padding:0;}
.gallery-item .gallery-icon img{ float:left; }

#contact input[type="submit"][disabled] { background:#888; cursor: default; }
#contact legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #eee; -moz-border-radius:5px; -webkit-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; }
#contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */
img.right {float: right;}
.left {float: left;}
#message { margin: 10px 0; padding: 0; }

.error_message { display: block; line-height: 22px; background: #FBE3E4 url(../images/error.gif) no-repeat 7px .8em; padding: 7px 10px 7px 35px; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius:5px; -webkit-border-radius:5px; }

ul.error_messages { margin: 0 0 0 15px; padding: 0; }
ul.error_messages li { height: 22px; line-height: 22px; color:#333; }

.loader { padding: 0 10px; margin-bottom:-2px; }

#contact #success_page h1 { background: url(../images/success.gif) left no-repeat; padding-left:22px; }

acronym { border-bottom:1px dotted #ccc; }

#header #main-nav ul{ display:block; }
#header #main-nav select{ display:none; }

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 767px)  {
body{ background:; padding:0 20px;}	
/*#page{ padding:0 20px;}*/
#header { position:fixed; width:100%; float:none; margin-top:40px; text-align:center;  }
#header #logo { text-indent:-9999999px; width:123px; height:123px; margin:0 auto 30px auto; }
#header #logo a { display:block; background:url(../images/logo.png) no-repeat; width:123px; height:123px; }
#header #main-nav{ margin-bottom:40px;}

#header .widget{ clear:both; float:right; }
#header .widget h4{ font-size:11px; text-transform:uppercase; font-weight:normal; letter-spacing:2px; margin:-15px 60px 0 60px; font-family: 'Arvo', serif; margin-left: -10px;}

#header #main-nav{ position:fixed; top:0; z-index:99999; background:#f1f6ed; padding:10px 0; width:100%; margin-left:-20px; }
#header #main-nav ul{ display:none; }
#header #main-nav select{ display:block; width:200px; margin:0 auto; }


#header #main-nav ul li { list-style:none; line-height:30px; display:inline; }
#header #main-nav ul li a { color:#8d8c8c; font-size:16px; padding:4px 20px; }
#header #main-nav ul li.external a { background-image:url(../images/external_link.gif); background-position:80% 50%; background-repeat:no-repeat; }
#header #main-nav ul li a:hover { text-decoration:none; color:#63c8a4; }
#header #main-nav ul li.selected a { background:none; color:#63c8a4; text-shadow:none; padding:4px 20px }
#header #main-nav ul li.selected a:hover { color:#63c8a4; }
#header .widget{ margin-bottom:0px; clear:none; float:none; width:100%; margin-left:0; }
#header .social{ margin:0 auto 40px auto; float:none!important; width:100%!important; text-align:center;padding-bottom:0!important; clear:none!important;}
#header .social li{ position:relative;}
#header .social li a img{ margin-bottom:-8px; }
#header .social li.twitter a,
#header .social li.facebook a,
#header .social li.dribbble a,
#header .social li.flickr a,
#header .social li.skype a{ width:26px; height:26px; display:inline; float:none; margin:0 -60px;}

#main{ width:100%; float:none; clear:both; }

/*viewing*/
#header .view{ text-align:center; margin:0 auto;}
#header .view .view_holder{ width:60px; margin:0 auto; }
#header .view h4{ float:none;  margin-right:10px; text-align:center; width:100%; margin-bottom:0; padding-bottom:0; }
#header .view .monitor{ background:url(../images/monitor.png) no-repeat top left; width:15px; height:15px;}
#header .view .ipad{ background:url(../images/ipad.png) no-repeat bottom left; width:13px; height:15px;}
#header .view .iphone{ background:url(../images/iphone.png) no-repeat top left; width:9px; height:16px; }
#header .view .monitor,
#header .view .ipad,
#header .view .iphone{ margin-top:13px; margin-right:10px; display:block; }
#header .view .iphone{ margin-right:0;}

#services .columns .excerpt{ float:right; width:74%; }
#services .columns .img{ float:left; }
#services .columns .img img{ max-width:100%; }
	
}

@media handheld and (max-width: 479px), screen and (max-device-width: 479px), screen and (max-width: 479px)  {

/*viewing*/
#header .view{ text-align:center; margin:0 auto;}
#header .view .view_holder{ width:60px; margin:0 auto; }
#header .view h4{ float:none;  margin-right:10px; text-align:center; width:100%; margin-bottom:0; padding-bottom:0; }
#header .view .monitor{ background:url(../images/monitor.png) no-repeat top left; width:15px; height:15px;}
#header .view .ipad{ background:url(../images/ipad.png) no-repeat top left; width:13px; height:15px;}
#header .view .iphone{ background:url(../images/iphone.png) no-repeat bottom left; width:9px; height:16px; }
#header .view .monitor,
#header .view .ipad,
#header .view .iphone{ margin-top:13px; margin-right:10px; display:block; }
#header .view .iphone{ margin-right:0;}

#header #main-nav{ text-align:center; position:fixed;  z-index:99999;  }
#header #main-nav ul{ display:none; }
#header #main-nav select{ display:block; }

div.one-half,
div.one-third,
div.two-third,
div.one-fourth,
div.three-fourth{ width:100%; float:none; margin-left:0; line-height: 70px; font-size: 12px;}
#services .columns > div{ clear:both; }


#services .columns .excerpt{ float:right; width:75%; }
#services .columns img{ float:left;  }

.form > div > label, .form #name, .form #email, .form #subject, .form #comments, .inputtext, .form select{ width:90%; }
.form #comments{ width:100%!important; max-width:90%;}

#blog .post .post-aside, #blog .post .hentry{ width:100%; }
#blog .post .post-aside .post-meta{ text-align:left; padding-right:0; border-right:none; }
#blog .post .post-aside .post-meta > span,
#blog .post .post-aside .post-meta .share span{ display:block; }
#blog .post .post-aside .post-meta .share{ margin-top:0px; margin-bottom:20px; }

#commentform label{ display:block; padding:0; }
.intro{ font-size:2em; }

.pagination a, .pagination span{ display:none; }
.pagination .previous, .pagination .next{ display:block; float:left; }
.pagination .next{ float:right; }