/*
Theme Name:         Align
Theme URI:          http://www.90four.com/themes/align
Description:        Align is a responsive and minimal wordpress theme. Align can be used as a magazine site, news site or just as your personal blog.
Version:            0.5
Author:             Haziq Hadi
Author URI:         http://www.90four.com
Tags: flexible-width, threaded-comments, microformats, translation-ready, rtl-language-support, one-column, three-columns
License:            MIT License
License URI:        http://www.opensource.org/licenses/mit-license.php
*/

@import "http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700";

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Adjustments
:: Styling Basic WordPress Outputs
:: Posts
:: Main Stylings
*/

/* ---------------------------------------------------
    Adjustments
--------------------------------------------------- */
	
	/* Auto Height for Images for Responsive Design */
	img { height: auto; }
	li { margin-bottom: 2%!important; }
 
	/* Foundation-specific presentation CSS by ZURB */
	body { padding-bottom: 60px; }

/* -----------------------------------------
   Styling Basic WordPress Outputs
----------------------------------------- */
	
	/* Resizing the Blog Post */
	.post-box p { line-height: 2em!important; }
	.post-box { font-size: 16px; margin-bottom: 50px; }
	.post-box h1 { font-weight: bold; font-size: 30px; line-height: 1; margin-bottom: 2px; }
	.post-box h2 { font-weight: bold; font-size: 26px; line-height: 1; margin-bottom: 2px; }
	.post-box h2 p {line-height: inherit!important;}

	.post-box h3 { font-size: 22px;	}
	.post-box h4 { font-size: 18px;	}
	.post-box h5 { font-size: 16px;	}

        .row .fix.columns { width: 100%; }
	
	/* Add HTML5 Caption Class for Images */
	figure.figure {	background: #EEE; margin: 0 0 18px;	-webkit-border-radius: 3px;	-moz-border-radius: 3px; display: inline-block; }
	figure.figure figcaption { display: block; padding: 8px 10px; font-size: 13px; line-height: 18px; color: #555; }
	figure.alignright.figure { float: right; margin: 0 0 18px 18px; }
	figure.alignleft.figure { float: left; margin: 0 18px 18px 0; }
	
	/* Footer Nav */
	.footer-section { padding-bottom: 10px; padding-top: 20px; font-size: 1.3rem; font-weight: normal; }
	.footer-nav li { display: block; float: right; padding-left: 3%; margin-bottom: 0; }

/*  --------------------------
    Posts
    ----------------------- */

.alignnone { margin: 0 0 20px; }
.aligncenter, div.aligncenter { display:block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float:left; margin: 5px 20px 20px 0; }
.aligncenter { display: block; text-align:center; margin: 5px auto 5px auto; }
a img.alignright { float:right; margin: 0 0 20px; }
a img.alignnone { margin: 0 0 20px; }
a img.alignleft { float:left; margin: 5px 20px 15px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto }
em { font-style:italic; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin:0; max-width: 98.5%; padding:0; width: auto; }
.wp-caption p.wp-caption-text, .gallery-caption { font-size:11px; line-height:17px; margin:0; padding:5px 4px 0; }
.sticky {}
.bypostauthor { border:3px; }


/*  --------------------------
    Main Stylings
    ----------------------- */

.sidebar-box { border-top: 1px solid #DDDDDD; }
.sidebar-section h6 { font-size: 11px; margin-bottom: 10px; text-transform: uppercase;  font-weight: bold; }
.sidebar-section li a { border-bottom: 1px solid #DDDDDD; display: block; padding: 10px 0; }
.sidebar-section li:first-child a { padding-top: 0; }
.sidebar-section .textwidget, .sidebar-section .tagcloud { border-bottom: 1px solid #DDDDDD; padding-bottom: 20px; }
.sidebar-section { font-size: 11px; padding: 20px 0 0; }
.sidebar-section ul { margin: 0; }
.sidebar-box input { background: #FFFFFF !important; width: auto !important; max-width: 100%; }

.meta h2 { font-size: 12px; padding: 20px 0; border-bottom: 1px solid #DDDDDD;}
#header { text-align: center; max-width: none; margin-bottom: 34px; }
.tagl h1, .tagl h2 { font-weight: normal; margin: 0; text-transform: uppercase; font-family: "hypatia-sans-pro-1","hypatia-sans-pro-2",sans-serif; font-style: normal; font-weight: 600;}
.tagl h4 { font-size: 13px; font-weight: normal; }

.catmet { border-bottom: 1px solid #DDDDDD; padding: 10px 0 0; }
.catmet p { font-size: 11px; }
.catmet h6 { font-size: 11px; font-weight: bold; margin-bottom: 10px; }
.catmet a { color: #666666; }

#post-nav { border-top: 1px solid #DDDDDD; padding: 20px 0 0;}
#post-nav a, #post-nav .current { display: block; float: left; margin-right: 5px; padding: 0 5px 5px; }
#post-nav a:hover, #post-nav .current { border-bottom: 1px solid #000000; }
.menu-bar { margin: 0; padding: 8px 0; text-align: center; background: #DE5A51; font-family: "brandon-grotesque-1", "brandon-grotesque-2",sans-serif; font-style: normal; font-weight: 600; z-index: 100; position: relative; }
.menu-bar li { display: inline; font-size: 12px; margin: 0 10px; text-transform: uppercase; letter-spacing: 1px; }
.menu-bar li:first-child span { display: none; }
#dotn { margin-right: 15px; display: none; }
.menu-bar a:hover { text-decoration: underline; }
.menu-bar li a { color: #fff; }
#menu { position: fixed;
width: 100%;
z-index: 100; }

#footer { border-top: 1px solid #DDDDDD; font-size: 12px; margin-top: 20px; padding: 20px 0 5px; clear: both; max-width: none; background: rgb(168, 215, 218); color: #F2F1ED;}
#footer a { font-weight: bold; }
#footer ul { margin-bottom: 0; }

#comment { border: none; margin: 10px 0 0; width: 85%; max-width: 500px; }
#s { margin-bottom: 10px; }
#respond {}
#reply-title { font-size: 14px; margin: 0 0 20px; text-decoration: underline; }
.required { color: #CC4D22; }
.form-allowed-tags { display: none; }
.comment-notes { display: none; }
#commentlist p { margin-left: 52px; }
#commentlist { margin: 20px 0 40px; }
#commentlist li { list-style: none; }
#commentlist li ul li { border-left: 1px solid #EEEEEE; border-top: 1px solid #EEEEEE; list-style: none; margin: 15px; padding: 10px; }
#commentlist li.bypostauthor {}
.comment-author a {}
.comment-form-comment label { display: none !important; }
#commentform input { border: none; padding: 5px; display: block; float: left; margin-right: 12px; }
.comment-meta, #commentlist cite { color: #444444; }
#commentform label { font-size: 11px; display: inline; }
.reply a { color: #000000; text-decoration: underline; }
.avatar { float: left; margin-right: 20px; }
.reply a:hover { text-decoration: none; }
.form-submit #submit:hover { background: #FFFFFF; }
.nocom p { background: #F2F2F2; padding: 10px; }

.post-author p { line-height: 1.5em !important; margin: 0; }
.post-author { border-bottom: 1px solid #DDDDDD; border-top: 2px solid #000000; margin-bottom: 20px; padding: 15px 0; }
.post-author h6 { font-size: 14px; margin-bottom: 5px; }
.post-author-image { display: block; float: left; margin: 0; }


.row .nine.columns.fullPage { width: 100%; }
.container, #container { padding: 0; }

body { background: #F2F1ED!important; font-family: "brandon-grotesque-1", "brandon-grotesque-2",sans-serif!important; font-style: normal; }

#content-info { padding: 0!important; }

.intro { position: relative; text-align: center; color: #F2F1ED; margin: 0 auto; background: rgb(168, 215, 218); padding-bottom: 30px; overflow:hidden; }
.intro img { max-width: 1000px;
width: 80%; height: auto;}
.intro .introContent { position:absolute; top:47%; left: 10%; right: 10%; font-family: "brandon-grotesque-1", "brandon-grotesque-2",sans-serif; font-style: normal; height: 40px; z-index: 98; text-shadow: 2px 4px 3px rgba(0,0,0,0.05);}
.home .intro .introContent h1 { text-align: center; text-transform: uppercase; font-weight: 800; color: #F2F1ED!important; margin: 0; }
.home .intro .introContent h2 { padding: 0; font-style: italic; font-weight: 300; color: #F2F1ED!important; font-family: "hypatia-sans-pro-1", "hypatia-sans-pro-2" ; }

#header .tagl img { max-width: 250px;
width: 40%; height: auto; max-height: 140px; }

.tagl {
position: relative;
top: 34px;
z-index: 1;
background: url(/images/stripey.png) repeat-x;
}

.home .tagl {
position: absolute;
width:100%;
}

.footerContent {
width: 980px;
color: #F2F1ED;
margin: 0 auto 60px;
}

/*#portfolio li {
float: left;
width: 23%;
margin: 0 1%;
}*/

a { color: #DE5A51; font-weight: 500;}
h2 a { font-weight: 500!important;}

.flexslider .slides > li {
max-height: 340px;
}

/*#portfolio li img {
border: 1px solid rgb(219, 219, 219);
}*/

#portfolio h3 {
font-size: 10px;
text-align: center;
font-weight: 300;
border-top: medium double #B4E0E2;
border-bottom: medium double #B4E0E2;
padding: 4px 0 2px 0;
text-transform: uppercase;
font-family: "brandon-grotesque-1", "brandon-grotesque-2",sans-serif;
margin: 5px 0;
}

.logos {
text-align:center;
clear: both;
padding: 40px 0 20px;
}
.logos img {
height: 35px;
margin: 1%;
}
.slider {
overflow: hidden;
}

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}
 
.video-container iframe, 
.video-container object, 
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#arrow1, #arrow2, #arrow3 {
position: absolute;
z-index: 99;
opacity: 0;
}

#arrow1 { top:5%; left: 15%; }
#arrow2 { z-index: 97; top: 8%; left: 10%; }
#arrow3 { top: 15%; left: 10%; }

.desk, .cta {
width:45%; float: left; margin: 0 1%;
}

.desk img { 
width: 100%;
max-width: 700px;
}

.single h1, .page h1 {
text-align: center;
text-transform: uppercase;
font-size: 40px;
margin-top: 15px;
}

.single h2 , .page h2 {
border-top: 3px solid;
margin-top: 10px;
font-family: "hypatia-sans-pro-1","hypatia-sans-pro-2",sans-serif; 
font-style: normal; 
font-weight: 300;
padding: 20px 0;
line-height: initial;
}

.home.page h2 {
border-top: none;
}

.home.page h1 {
text-align: left;
}

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.fade:hover {
   opacity: 0.7;
   }

footer h3 {
	text-transform: uppercase;
	color: #F5F5F5;
	border-bottom: medium double;
	text-align: center;
	font-size: 24px;
	margin-bottom: 10px;
}

footer a {
color: #F5F5F5;
text-transform: uppercase;
}

footer em {
font-family: "hypatia-sans-pro-1","hypatia-sans-pro-2",sans-serif;
margin-left: 2%;
text-transform: none;
font-weight: 400;
}

footer .thirds {
	width: 31%;
	margin: 1%;
	float: left;
	font-size: 16px;
}

footer .thirds li {
text-align: left;
}

.thirds .social span {
font-size: 18px;
margin: 0 0 2px 5px;
vertical-align: top;
}

.thirds .social img {
width: 6%;
margin: 0 0.5%;
max-width: 38px;
}

.thirds .contactUs {
position: relative;
}

.thirds .contactUs .contactLink {
position: absolute;
text-align: center;
color: rgb(168, 215, 218);
top: 45%;
font-size: 31px;
font-weight: 900!important;
width: 100%;
display: block;
}

.projectDetails {
	width: 32%;
	float: left;
	margin-right: 2%;

 	

}
.projectDetails h3 {
	font-family: "brandon-grotesque-1", "brandon-grotesque-2",sans-serif!important; font-style: normal;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: -4px;
	border-bottom: 1px solid;
}
.projectDetailContainer div:nth-child(3) {
	margin-right: 0;

}
.projectDetailContainer div:nth-child(6) {
	margin-right: 0;

}

.projectDetails p {
	text-transform: capitalize;
	font-family: "brandon-grotesque-1", "brandon-grotesque-2",sans-serif!important; font-style: normal;
}
footer .social a {
	text-transform: capitalize;
}
.clear {
	clear: both;
}
.bulletLeft {
  float: left;
  width: 50%;
}
.bulletRight {
  float: right;
  width: 50%;
}


/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.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;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-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;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, 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;
      -ms-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;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, 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;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  padding: 20px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7em;
  background: #1F1E1D;
  color: #FFF;
}

h1, h2, h3, p, ul, ol, pre, dl {
  margin-bottom: 1.0em;
}

h1, h2, #super-list, .workCategory, .tagline, #index-list, 
.super-list .link {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 { font-weight: bold; }

h1 {
  font-size: 32px;
  line-height: 1.1em;
}

h2 {
  font-size: 24px;
  line-height: 1.1em;
}

ul, ol {
  margin-left: 1.5em;
}

a,
a code {
  color: #FB4;
  text-decoration: none;
}

a:hover,
a:hover code { 
  color: #4BF; 
}

a:active,
a:active code {
  color: #1FB;
}

a img { border: none; }

em { font-style: italic; }
strong { font-weight: bold; }

blockquote {
  padding-left: 1.0em;
  margin-left: 1.0em;
  border-left: 1px solid #333;
  font-style: italic;
}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */


.workCategory {
  width: 240px;
  height: 232px;
  margin: 5px;
  float: left;

  -webkit-border-top-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
          border-top-right-radius: 1.2em;
}



.variable-sizes .workCategory.width2 { width: 230px; }

.variable-sizes .workCategory.height2 { height: 230px; }

.variable-sizes .workCategory.width2.height2 {
  font-size: 2.0em;
}

.workCategory.large,
.variable-sizes .workCategory.large,
.variable-sizes .workCategory.large.width2.height2 {
  font-size: 3.0em;
  width: 350px;
  height: 350px;
  z-index: 100;
}

.clickable .workCategory:hover {
  cursor: pointer;
}

.clickable .workCategory:hover h3 {
  text-shadow:
    0 0 10px white,
    0 0 10px white
  ;
}

.clickable .workCategory:hover h2 {
  color: white;
}

/**** Example Options ****/

#options {
  padding-bottom: 1.0em;
}

#options h3 {
  margin-bottom: 0.2em;
  font-size: 15px;
}

#options h4 { 
  font-weight: bold;
}

#options ul {
  margin: 0;
  list-style: none;
}

#options ul ul {
  margin-left: 1.5em;
}

#options li {
  margin: 0 5px 0 5px;
  float: left;
  margin-bottom: 0.2em;
}

#options li a {
  text-transform: uppercase;
  font-family: "brandon-grotesque-1", "brandon-grotesque-2",sans-serif;
  font-size: 12px;
  display: block;
  padding: 0.4em 0.5em;
  font-weight: bold;
  text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
  
}

#options li a:hover {
  color: #DE5A51;
  border: 1px solid #DE5A51;
}

#options li a:active {
color: #DE5A51;

}

#options li a {
 border: 1px solid transparent;

}

#options li:first-child a {
 
}

#options li:last-child a {
}

#options li a.selected {
  color: #DE5A51;
   border: 1px solid #DE5A51;
}

/* Combination filter options*/

#options .option-combo {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

#options .option-combo ul {
  margin-right: 20px;
  display: inline-block;
}

#options .option-combo h2,
#options .option-combo h4 {
  line-height: 34px;
  margin-bottom: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
}

/* Color shapes */

.color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}
 
.color-shape.round {
  -webkit-border-radius: 35px;
     -moz-border-radius: 35px;
          border-radius: 35px;
}
 
.color-shape.big.round {
  -webkit-border-radius: 75px;
     -moz-border-radius: 75px;
          border-radius: 75px;
}
 
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
 
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }

.color-shape a {
  display: block;
  height: 100%;
}

.color-shape a:hover {
  background: white;
  background: hsla( 0, 0%, 100%, 0.5 );
}

/**** Horizontal ****/

.horizontal #container {
  height: 80%;
}

#copy {
  max-width: 640px;
}

/**** Photo demo ****/

.photos .photo {
  width: 320px;
  margin: 5px;
  float: left;
}

.photos .photo img {
  display: block;
  width: 100%;
}



.demos #content {
  height: 100%;
}

/**** Docs ****/

.docs #content {
  max-width: 640px;
}

.docs #content a:hover {
  border-bottom: 1px dotted;
}

/**** Doc page nav ****/



#site-nav {
  width: 200px;
  position: absolute;
  left: 10px;
  top: 0px;
  padding-top: 20px;
  font-size: 12px;
}

#site-nav h1 {
  font-size: 24px;
  margin-bottom: 0.5em;
  margin-top: 0;
  font-weight: bold;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#site-nav h2 {
  font-size: 17px;
  font-weight: normal;
  margin: 0 0 0.3em;
  border-top: none;
}

#site-nav h1 a { color: #4FB; }
#site-nav h1 a:hover { color: #4BF; }

#site-nav ul {
  list-style: none;
  margin: 0 0 1.0em;
  font-weight: bold;
}

#site-nav ul ul { margin-bottom: 0; }

#site-nav ul a {
  display: block;
  border: none;
  padding: 1px 5px;
}

#site-nav ul .current a {
  background: hsla( 0, 0%, 0%, 0.3 );
  color: #1BF;
}
#site-nav ul a:hover,
#site-nav ul .current a:hover { color: white; }
  
#site-nav ul .current .toc a {
  font-size: 12px;
  padding-left: 1.2em;
  font-weight: normal;
}

/**** Doc content ****/

.docs #content h2 {
  border-top: 1px solid #333;
  padding-top: 0.8em;
  margin-bottom: 0.8em;
}

.docs #content h2:target { 
  padding: 10px;
  background: white;
  color: #222;
}

.docs #content h3 {
  color: #FEC;
  background: hsla( 0, 0%, 75%, 0.05 );
  padding: 2px 0.5em;
  margin-bottom: 0.5em;
  font-size: 1.15em;
}

.docs #content h4 {
  margin-bottom: 0.5em;
  font-size: 14px;
}


footer {
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid #333;
  padding: 0.8em 0;
}

pre {
  padding: 10px;
}

pre, code {
  background: black;
  color: white;
  font-family: 'Monaco', monospace, sans-serif;
}

#content code {
  font-size: 12px;
}

#content pre {
  line-height: 1.6em;
}

h3#options {
  padding-bottom: 0;
}

.option-def dl dt,
.option-def dl dd {
  float: left;
  padding: 0 1.2em;;
  background: #161616;
  line-height: 36px;
  height: 36px;
}

.option-def dl.header dt,
.option-def dl.header dd {
  background: #444;
}

.option-def dl .option-type {
  font-size: 13px;
  color: #AAA;
  font-style: italic;
}

.option-def dl dd {
  border-left: 1px solid #222;
}

/* Tagline */

.docs .tagline {
  font-size: 22px;
  font-weight: 300;
}

/* as-is from MIT */

.docs .as-is {
  font-size: 95%;
}

/* Commercial license blurb */

.docs #commercial {
  background: white;
  padding: 10px;
  font-size: 14px;
  color: #1F1F1D;
}

.docs #commercial a { font-weight: bold;}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */



/**** Super list ****/


/**** Sites using Isotope ****/

#sites h2 {
  display: none;
  padding: 0.4em;
  line-height: 32px;
  margin-bottom: 0.4em;
  -webkit-transition: background-color 0.8s;
     -moz-transition: background-color 0.8s;
       -o-transition: background-color 0.8s;
          transition: background-color 0.8s;
}

#sites h2 img {
  display: inline-block;
  margin-right: 0.4em;
  vertical-align: bottom;
}

#sites h2.loading {
  background: white;
  color: #222;
}
#sites h2.error {
  background: red;
  color: #222;
}


#sites ul {
  margin: 0;
}

.super-list .example {
  list-style: none;
  float: left;
  width: 230px;
  margin: 5px;
}

.super-list .example a,
.super-list .example b,
.super-list .example img {
  display: block;
}

.super-list .example img { width: 100%; }

.super-list .example a {
  background: #1F1E1D;
}

.super-list .example a:hover {
  background: white;
  color: #111;
}

.super-list .example b { 
  font-weight: bold;
  line-height: 1.3em;
  padding: 3px;
  padding-top: 8px;
}

.super-list .link {
  float: left;
  position: relative;
  font-size: 24px;
  line-height: 1.2em;
  font-weight: 300;
  margin: 5px;
}

.super-list .link {
  width: 230px;
  height: 110px;
}

.super-list .link a {
  display: block;
  padding: 10px;
  padding-left: 65px;
  height: 90px;
  background: #1F1E1D;
  color: #FE5;
  -webkit-border-radius: 14px;
     -moz-border-radius: 14px;
          border-radius: 14px;
}

.super-list .link a:before {
  content: '➔';
  font-size: 70px;
  position: absolute;
  top: 30px;
  left: 5px;
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

.super-list .link.away a:before {
  top: 25px;
  left: 0px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.super-list .link a:hover {
  background: #E58;
  color: white;
}

.super-list .feature .name {
  bottom: auto;
  top: 140px;
  left: 18px;
  font-size: 20px;
}

/**** BIG Graph ****/

.big-graph {
  background: white;
  height: 600px;
  margin: 20px auto;
}

.big-graph .project {
  width: 45px;
  height: 45px;
  float: left;
}

.big-graph .project .icon {
  pointer-events: none;
  width: 31px;
  height: 31px;
  background: white;
  margin-left: 7px;
  -webkit-transition: -webkit-transform 0.25s;
     -moz-transition: -moz-transform    0.25s;
      -ms-transition: -ms-transform     0.25s;
       -o-transition: -o-transform      0.25s;
          transition: transform         0.25s;
}

.big-graph .project:hover {
  z-index: 5;
  
}

.big-graph .project:hover .icon {
  -webkit-transform: scale(3);
     -moz-transform: scale(3);
      -ms-transform: scale(3);
       -o-transform: scale(3);
          transform: scale(3);
}

.big-graph .project.commercial .icon { background: #6B6B6B; }
.big-graph .project.urbanism .icon { background: #00CF00; }
.big-graph .project.public-space .icon { background: #FF8D00; }
.big-graph .project.culture .icon { background: #D61919; }
.big-graph .project.body-culture .icon { background: #00ECFF; }
.big-graph .project.health .icon { background: #FF2251; }
.big-graph .project.education .icon { background: #00A700; }
.big-graph .project.housing .icon { background: #FF02FF; }
.big-graph .project.hotel .icon { background: #0000C3; }
.big-graph .project.media .icon { background: #292929; }

.big-graph .project p {
  line-height: 14px;
  font-size: 10.5px;
  color: black;
  margin-left: 7px;
}

/**** Infinite Scroll ****/

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 30px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

#byline {
font-family: "brandon-grotesque-1", "brandon-grotesque-2",sans-serif!important;
text-transform: uppercase;
width: 100%;
font-size: 14px;
text-align: center;
margin: 0 auto;
margin-top: -138px;
font-style: normal;
font-weight: 600;
color: #ada698;

}
#byline p {
margin-top: -29px;}



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
img#wpstats{display:none}