/* 
┌─────────┐
│         │
│         │
│     x128│ / consultores de tecnologia&design
└─────────┘ / www.x128.com.br
            / contato@x128.com.br
*/
/* =============================================================================
font: Rajdhani, weights: 300,400 (normal),500,700 (bold)
yelllow:  #FFCC00 , hsl(48,100%,50%)  , rgba(255,204,0,1)
error:    #FF4000 , hsl(15,100%,50%)  , rgba(255,64,0,1)
inverted: #0033FF , hsl(228,100%,50%) , rgba(0,51,255,1)
============================================================================= */


/* =============================================================================
   Main
============================================================================= */
/* Non-standart media queries to change font-size almost smoothly */
@media (max-width: 1250px){  body, table, textarea, input, select, button{ font-size:21px; }  }
@media (max-width: 1000px){  body, table, textarea, input, select, button{ font-size:20px; }  }
@media (max-width:  750px){  body, table, textarea, input, select, button{ font-size:19px; }  }
@media (max-width:  500px){  body, table, textarea, input, select, button{ font-size:18px; }  }
@media (max-width:  400px){  body, table, textarea, input, select, button{ font-size:17px; }  }

html{ height:100%; }
body{ height:100%; }
main{
	margin:0;
	padding:0;
	
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 250px); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(250px,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 250px); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 250px); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 250px); /* IE10+ */
	background: linear-gradient(top bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 250px); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	
	height:100%;
	overflow:auto;
}

/* backslash before title */
h1::before { content: "/ "; font-weight:700; color:hsl( 48,100%, 50%); }
h2::before { content: "/ "; font-weight:700; color:hsl( 48,100%, 50%); }
h3::before { content: "/ "; font-weight:700; color:hsl( 48,100%, 50%); }
h4::before {  }
h5::before {  }
h6::before {  }

/* no backslash for centered title */
h1.center::before { content: ""; }
h2.center::before { content: ""; }
h3.center::before { content: ""; }

/* left-indentation for titles */
.h1Indented{ margin-left:2em; }
.h2Indented{ margin-left:1.5em; }
.h3Indented{ margin-left:1em; }

/* =============================================================================
   Header
============================================================================= */
header{ white-space:nowrap; }
@media all                {  header{ margin:25px; }  }
@media (max-width: 1200px){  header{ margin:20px; }  }
@media (max-width: 750px) {  header{ margin:15px; }  }
@media (max-width: 400px) {  header{ margin:10px; }  }
	
	#logo-wrapper{
		display:inline;
		margin:0px 5px 0px 0px;
	}
		#logo{
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
		}
	#slogan{
		display:inline;
		margin:0 0 0 0;
		font-weight:500;
		color:#ffcc00;
		text-shadow: 0 0 5px rgba(0, 0, 0, 1);
	} 
		#slogan::before {
			content: "/ ";
			font-weight:700;
			color:hsl(0,0%,75%);
		}
header~*{ clear:both; }

@media all{
	header        {  }
	#logo-wrapper {  }
	#logo         { width:230px; height:230px; }
	#slogan       { vertical-align: 12px; font-size:27px; } 
}
@media (max-width: 1200px){
	header        {  }
	#logo-wrapper {  }
	#logo         { width:170px; height:170px; }
	#slogan       { vertical-align:9px; font-size:20px; } 
}
@media (max-width: 750px){
	header        {  }
	#logo-wrapper {  }
	#logo         { width:110px; height:110px; }
	#slogan       { vertical-align:6px; font-size:12px; } 
}
@media (max-width: 400px){
	header        {  }
	#logo-wrapper {  }
	#logo         { width:50px; height:50px; }
	#slogan       { vertical-align:2px; font-size:10px; } 
}


/* =============================================================================
   Loading
============================================================================= */
#loading-wrapper{ 
	height:20px; 
	overflow:hidden; 
}
#loading{ 
	height:20px; 
	overflow:hidden; 
	
	background-image:url("../media/loading.ani.gif");
	background-repeat:repeat-x;
}
@media all                {  #loading-wrapper{ margin-bottom:25px; }  }
@media (max-width: 1200px){  #loading-wrapper{ margin-bottom:20px; }  }
@media (max-width: 750px) {  #loading-wrapper{ margin-bottom:15px; }  }
@media (max-width: 400px) {  #loading-wrapper{ margin-bottom:10px; }  }


/* =============================================================================
   Message
============================================================================= */
/* error messages */
/*#error-msg::before{ content: "// "; font-weight:700; color:#ff4000; }*/
#message{
	min-height:1em;
	margin:0 0 2em 0;
	padding:0 1em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	background-color: hsl(48,100%,50%);
	border-style: solid none;
	border-width:1px 0;
	border-color:rgba(0,0,0,0.75);
	background-image: url("../media/zebra-45d-bw-20px-005a.png");
}
#message.error{
	background-color: hsl(15,100%,50%);
}
	#message .message-contents{
		color:hsl(0,0%,15%);
	}
	a.message-close        { float:right; font-size:75%; }
	a.message-close        { color:hsl(0,0%,10%); }
	a.message-close:link   { color:hsl(0,0%,10%); }
	a.message-close:visited{ color:hsl(0,0%,10%); }
	a.message-close:active { color:hsl(0,0%,10%); }
	a.message-close:hover  { color:hsl(0,0%, 0%); }


/* =============================================================================
   Contents
============================================================================= */
#contents{}

#titles{ /* almost same as H2 */
	margin-top:30px;
	padding:0.5em 0em; 
}

#titles dl{
	/*font-size:1.5em;*/
	line-height:1em;
	/*font-weight:200;*/
	font-style:italic;
	/*color:hsl(228,100%,20%); */
	/*color:hsl(48,100%,50%);*/
	color:rgba(0,0,0,0.5);
	/*text-shadow:  1px 1px 4px rgba(0,0,0,0.75);*/
	letter-spacing:0ex;
	word-spacing:0ex;
}
@media all                {  #titles dl{font-size:2.5em;   }  }
@media (max-width: 1200px){  #titles dl{font-size:2em;   }  }
@media (max-width: 750px) {  #titles dl{font-size:1.5em; }  }
@media (max-width: 400px) {  #titles dl{font-size:1.25em;}  }

#titles dl dt,
#titles dl dd{
	font-weight:200;
	white-space:normal;
}
#titles dl dt{
	margin:0 0.66ex 0.5ex 0;
}
#titles dl dd{
	margin:0 0ex 0.5ex 0;
}

#titles .highlight , #titles dl dd{
	/*color:#fff;*/
	/*color:rgba(0,0,0,0.5);*/
	/*color:hsl(48,100%,50%);*/
	color:rgba(255,204,0,0.75);
}

#titles .smaller{
	font-size:0.5em;
	line-height:2.5em;
	/*color:rgba(0,0,0,0.75);*/
	text-shadow:none;
	color:hsl(228,75%,15%);
}

/* -----------------------------------------------------------------------------
   Navigation
----------------------------------------------------------------------------- */
/* breadcrumbs */
nav{
	font-size:66%;
	font-weight:500;
	color:rgba(0,0,0,0.33);
	text-align:right;
	text-transform: uppercase;
}
	nav ol    {
		display:inline-block;
		margin:0;
		list-style-type:none;
	}
	nav ol li { color:hsl(48,0%,10%); display:inline; margin:0 0 0 0.25ex; }
		/* home */
		nav ol li:first-child a,
		nav ol li:first-child a:link,
		nav ol li:first-child a:visited{
			color:rgba(0,0,0,0.33);
			background-color: rgba(255,204,0,0.15);
		}
		/* home hover */
		nav ol li:first-child a:active,
		nav ol li:first-child a:hover{
			color:rgba(0,0,0,1);
			background-color: rgba(255,204,0,0.5);
		}
		/* ordinary page */
		nav a,
		nav a:link,
		nav a:visited{
			/*padding:0.15em 0.5em 0 0.5em;*/
			padding:0.5ex 0.75ex 0ex 0.75ex;
			background-color: rgba(255,204,0,0.25);
			color:rgba(0,0,0,0.5);
			line-height: 2em;
			white-space: nowrap;
			text-decoration:none;
			box-shadow: 0px 0px 3px rgba(0,0,0,0.5)
		}
		/* ordinary hover */
		nav a:active,
		nav a:hover{
			color:rgba(0,0,0,1);
			background-color: rgba(255,204,0,0.5);
		}
		/* current */
		nav ol li:last-child a,
		nav ol li:last-child a:link,
		nav ol li:last-child a:visited{
			color:rgba(0,0,0,0.66);
			background-color: rgba(255,204,0,0.33);
		}
		/* current hover */
		nav ol li:last-child a:active,
		nav ol li:last-child a:hover{
			color:rgba(0,0,0,1);
			background-color: rgba(255,204,0,0.5);
		}

@media all                { nav{ margin:0px 25px 25px 25px; } }
@media (max-width: 1200px){ nav{ margin:0px 20px 20px 20px; } }
@media (max-width: 750px) { nav{ margin:0px 15px 15px 15px; } }
@media (max-width: 400px) { nav{ margin:0px 10px 10px 10px; display:none; } }


/* -----------------------------------------------------------------------------
   Article and sections
----------------------------------------------------------------------------- */
article{ margin:0px 10px 0px 10px; }
section{ margin:0px 10px 0px 10px; }

@media all                { article, section { margin-left:267px ; margin-right: 25px; } }
@media (max-width: 1200px){ article, section { margin-left:200px;  margin-right: 20px; } }
@media (max-width: 750px) { article, section { margin-left:10px;   margin-right: 15px; } }
@media (max-width: 400px) { article, section { margin-left:10px;   margin-right: 10px; } }

@media all                {  article.full-width, section.full-width{ margin-left:25px; margin-right:25px; }  }
@media (max-width: 1200px){  article.full-width, section.full-width{ margin-left:20px; margin-right:20px; }  }
@media (max-width: 750px) {  article.full-width, section.full-width{ margin-left:15px; margin-right:15px; }  }
@media (max-width: 400px) {  article.full-width, section.full-width{ margin-left:10px; margin-right:10px; }  }


/* -----------------------------------------------------------------------------
   Infinite scrool (home showcase)
----------------------------------------------------------------------------- */
.inifinite-scroll{
	position:relative;
	margin:0;
	padding:0;
	overflow:hidden;
	display:block;
	width:100%;
}

	.inifinite-scroll a{
		position:relative;
		float: left;
		width:auto;
		
		/*border:1px solid rgba(0,0,0,0.25);*/
		margin:5px 5px;
		box-shadow:0 0 5px rgba(0,0,0,1);
		/* alternate style: all glued together
		border-style:none;
		margin:5px 0px;
		box-shadow: 5px 0 5px rgba(0, 0, 0, 0.75);
		*/
		
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	.inifinite-scroll img{
		width:auto;
	}

@media all                {  .inifinite-scroll{ height:240px; }  .inifinite-scroll a, .inifinite-scroll img{ height:230px; }  }
@media (max-width: 1200px){  .inifinite-scroll{ height:180px; }  .inifinite-scroll a, .inifinite-scroll img{ height:170px; }  }
@media (max-width: 750px) {  .inifinite-scroll{ height:120px; }  .inifinite-scroll a, .inifinite-scroll img{ height:110px; }  }
@media (max-width: 400px) {  .inifinite-scroll{ height:60px;  }  .inifinite-scroll a, .inifinite-scroll img{ height:50px;  }  }


/* -----------------------------------------------------------------------------
   Showcase
----------------------------------------------------------------------------- */
/* Settings refers to the controls at the top, like filter and search */
ol.showcase.settings                                        { margin-bottom:2.5em; list-style-type:none; }
	ol.showcase.settings li                                 { display:inline-block; margin:5px; vertical-align:top; text-align:center; font-weight:300; background-color:rgba(0,0,0,0.20); border: 1px solid rgba(0, 0, 0, 0.10); }
	ol.showcase.settings li.double                          {  }
	ol.showcase.settings li.search                          { text-align:left; }
	ol.showcase.settings li.active                          { border:1px solid rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.5); }
		ol.showcase.settings li input[type=text]            { margin:0; padding:0 1ex 0 1ex; background-color:transparent; border-style:none; color:hsl(0,0%,80%); }
		ol.showcase.settings li input[type=submit]          { margin:0; padding:0 1ex 0 1ex; background-color:transparent; border-style:none; color:hsl(0,0%,80%); width:32px; float:right; background-image:url('../media/search.svg'); background-repeat:no-repeat; }
		ol.showcase.settings li[role="option-group"]        {  }

/* Options are the child of settings, like expertise or industry checkbox list */
ol.showcase.options                                         { line-height:1em; margin:1em 0 0.5em 0; }
	ol.showcase.options li                                  { width:auto; margin:0.5ex 0; padding:0; background-color:transparent; white-space:nowrap; text-align:left; font-size:80%; border-style:none; }
		ol.showcase.options li input[type=checkbox]         { display:inline-block; vertical-align:top; float:left; white-space:normal; }
		ol.showcase.options li label                        { display:inline-block; vertical-align:top; padding-right: 1.5em; white-space:normal; }
		ol.showcase.options li input[type=checkbox][data-range-group-last-selection="true"]{ box-shadow: 0px 0px 2px rgba(0,0,0,1); }
		ol.showcase.options li label[data-range-group-last-selection="true"]               { color:rgba(255,255,255,1); font-weight:500; }

/* Works is the list of each project and its details (both thumbnails and list view) */
ol.showcase.works                                           { list-style-type:none; }
	ol.showcase.works li                                    { vertical-align:top; }
		ol.showcase.works li figure                         {  }
			ol.showcase.works li figure                     {  }
			ol.showcase.works li figure img                 { box-shadow:0 0 5px rgba(0,0,0,0.75); /* same as ".inifinite-scroll a" */ }
				ol.showcase.works li figure figcaption      { font-weight: 500; }
		ol.showcase.works li table                          { margin:0px 0 2em 0; }
			ol.showcase.works li table caption              {  }
			ol.showcase.works li table thead th             { font-size:125%; }

/* Thumbnail view */
ol.showcase.thumbnails                                      {  }
	ol.showcase.thumbnails li                               { display:inline-block; margin:5px;  }
		ol.showcase.thumbnails li figure                    {  }
			ol.showcase.thumbnails li figure                {  }
			ol.showcase.thumbnails li figure img            { margin:5px 5px 0 5px; }
				ol.showcase.thumbnails li figure figcaption { text-align:center; /*display:none;*/ }
		ol.showcase.thumbnails li table                     { display:none; }
			ol.showcase.thumbnails li table caption         {  }
				ol.showcase.thumbnails li table caption     {  }

/* List view */
ol.showcase.list                                            {  }
	ol.showcase.list li                                     { display:block; margin:5px 5px 5em 5px; }
		ol.showcase.list li figure                          { clear:both; }
			ol.showcase.list li figure                      {  }
			ol.showcase.list li figure img                  { margin:10px 20px 5px 5px; }
				ol.showcase.list li figure figcaption       { padding-top:5px; }
		ol.showcase.list li table                           {  }
			ol.showcase.list li table caption               { text-align:left; }

/* Responsive for all above */
@media all{
	ol.showcase.settings li                                 { width:235px; }
	ol.showcase.settings li.double                          { width:485px; }
		ol.showcase.settings li.double input[type=text]     { width:415px; height:33px; }
		ol.showcase.settings li.double input[type=submit]   { height:33px; background-size:20px 20px; background-position:5px 5px; }
	ol.showcase.works li                                    {  }
		ol.showcase.works li figure img                     { width:230px; height:230px; }
		ol.showcase.works li figure figcaption              {  }
	ol.showcase.thumbnails li                               { width:240px;  }
		ol.showcase.thumbnails li figure img                {  }
		ol.showcase.thumbnails li figure figcaption         {  }
	ol.showcase.list li                                     {  }
		ol.showcase.list li figure img                      { float:left;  }
		ol.showcase.list li figure figcaption               {  }
}
@media (max-width: 1200px){                               
	ol.showcase.settings li                                 { width:175px; }
	ol.showcase.settings li.double                          { width:365px; }
		ol.showcase.settings li.double input[type=text]     { width:300px; height:30px; }
		ol.showcase.settings li.double input[type=submit]   { height:30px; background-size:20px 20px; background-position:5px 5px;  }
	ol.showcase.works li                                    {  }
		ol.showcase.works li figure img                     { width:170px; height:170px; }
		ol.showcase.works li figure figcaption              {  }
	ol.showcase.thumbnails li                               { width:180px;  }
		ol.showcase.thumbnails li figure img                {  }
		ol.showcase.thumbnails li figure figcaption         {  }
	ol.showcase.list li                                     {  }
		ol.showcase.list li figure img                      { float:left;  }
		ol.showcase.list li figure figcaption               {  }
}
@media (max-width: 750px) {                               
	ol.showcase.settings li                                 { width:115px; font-size:80%; line-height:1.5em; }
	ol.showcase.settings li.double                          { width:245px;  }
		ol.showcase.settings li.double input[type=text]     { width:190px; height:20px; font-size:80%; }
		ol.showcase.settings li.double input[type=submit]   { height:20px; font-size:80%; background-size:10px 10px; background-position:17px 5px; }
	ol.showcase.works li                                    {  }
		ol.showcase.works li figure img                     { width:110px; height:110px; }
		ol.showcase.works li figure figcaption              { font-size:80%; line-height:1em; }
	ol.showcase.thumbnails li                               { width:120px; }
		ol.showcase.thumbnails li figure img                {  }
		ol.showcase.thumbnails li figure figcaption         {  }
	ol.showcase.list li                                     {  }
		ol.showcase.list li figure img                      { float:left; }
		ol.showcase.list li figure figcaption               { padding-top:10px; }
}
@media (max-width: 400px) {
	ol.showcase.settings li                                 { width:120px; font-size:80%; line-height:1.5em; }
	ol.showcase.settings li.double                          { width:255px;  }
		ol.showcase.settings li.double input[type=text]     { width:190px; height:20px; font-size:80%; }
		ol.showcase.settings li.double input[type=submit]   { height:20px; font-size:80%; background-size:10px 10px; background-position:17px 5px; }
	ol.showcase.works li                                    {  }
		ol.showcase.works li figure img                     { width:110px; height:110px; }
		ol.showcase.works li figure figcaption              { font-size:120%; line-height:1em; }
	ol.showcase.thumbnails li                               { width:120px; }
		ol.showcase.thumbnails li figure img                {  }
		ol.showcase.thumbnails li figure figcaption         {  }
	ol.showcase.list li                                     {  }
		ol.showcase.list li figure img                      { float:none; }
		ol.showcase.list li figure figcaption               { padding-top:10px; }
}

.noResults{ padding: 0.1em 0.5em; background-color: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.5); font-size: 0.8em; text-align: center; }


/* -----------------------------------------------------------------------------
   Single case page
----------------------------------------------------------------------------- */
section.featured                                           {  }
	section.featured aside                                 { margin-bottom:2em; }
		#olFeatured                                        { list-style:none; }
			#olFeatured li                                 {  }
				#olFeatured li figure                      { margin:0px 10px 0px 0px; }
					#olFeatured li figure a                {  }
						#olFeatured img.featured           { box-shadow:0 0 5px rgba(0,0,0,0.75); /* same as ".inifinite-scroll a" */ }
	section.featured article                               {  }
		section.featured article p                         {  }
			section.featured article table.depthInfo       {  }

/* Responsive for all above */
@media all                {
	section.featured                                       { margin-left:25px; margin-right:25px; } /* same as .full-width */
		section.featured aside                             { display:inline; float:left; margin-top:10px; }
			#olFeatured li                                 {  }
				#olFeatured li figure                      {  }
					#olFeatured li figure a                {  }
			#olFeatured img.featured                       { width:230px; height:230px; }
		section.featured article                           {  }
			section.featured article p                     { margin-left:2em; }
				section.featured article table.depthInfo   { margin-left:2em; }
}
@media (max-width: 1200px){
	section.featured                                       { margin-left:20px; margin-right:20px; } /* same as .full-width */
		section.featured aside                             { display:inline; float:left; margin-top:8px; }
			#olFeatured li                                 {  }
				#olFeatured li figure                      {  }
					#olFeatured li figure a                {  }
			#olFeatured img.featured                       { width:170px; height:170px; }
		section.featured article                           {  }
			section.featured article p                     { margin-left:2em; }
				section.featured article table.depthInfo   { margin-left:2em; }
}
@media (max-width: 750px) {
	section.featured                                       { margin-left:15px; margin-right:15px; } /* same as .full-width */
		section.featured aside                             { display:inline; float:left; margin-top:7px; }
			#olFeatured li                                 {  }
				#olFeatured li figure                      {  }
					#olFeatured li figure a                {  }
			#olFeatured img.featured                       { width:110px; height:110px; }
		section.featured article                           {  }
			section.featured article p                     { margin-left:0em; }
				section.featured article table.depthInfo   { margin-left:0em; }
}
@media (max-width: 400px) {
	section.featured                                       { margin-left:10px; margin-right:10px; } /* same as .full-width */
		section.featured aside                             { display:block; float:none; /*margin-top:6px;*/ }
			#olFeatured li                                 { display:inline-block; }
				#olFeatured li figure                      {  }
					#olFeatured li figure a                {  }
			#olFeatured img.featured                       { width:50px; height:50px; }
		section.featured article                           {  }
			section.featured article p                     { margin-left:0em; }
				section.featured article table.depthInfo   { margin-left:0em; }
}


/* -----------------------------------------------------------------------------
   Movie end credits
----------------------------------------------------------------------------- */
.movie-end-credits                   { margin: 1.75em 0 1em 0; }
	.movie-end-credits dl            { margin-right:1ex;  }
		.movie-end-credits dt,dd     { white-space:nowrap; font-weight:400; }
		.movie-end-credits dt        { float:left; clear:both; width:50%; text-align:right; margin-right:1ex; }
		.movie-end-credits dd        { }
		.movie-end-credits.b-left  dt{ font-weight:600; }
		.movie-end-credits.b-right dd{ font-weight:600; }


/* -----------------------------------------------------------------------------
   Light table
----------------------------------------------------------------------------- */
table.light                         { font-size:75%; }
/* simple table */
	table.light tr                  {  }
	table.light tr th               { background-color:rgba(0,0,0,0.3); color:rgba(255,255,255,0.5); }
	table.light tr td               { background-color:rgba(0,0,0,0.15); }
/* complex table */
	table.light>caption             { background-color:rgba(0,0,0,0.15); }
	table.light>thead               {  }
		table.light>thead>tr        {  }
			table.light>thead>tr>th {  }
	table.light>tfoot               {  }
		table.light>tfoot>tr        {  }
		table.light>tfoot>tr>th     {  }
	table.light>tbody               {  }
		table.light>tbody>tr        {  }
			tbody>tr>th             {  }
			tbody>tr>td             {  }
/* bordered */
table.light[border]{             border:solid 1px rgba(0,0,0,0.25); }
	table.light[border] tr th{   border:solid 1px rgba(0,0,0,0.25); }
	table.light[border] tr td{   border:solid 1px rgba(0,0,0,0.25);  }
	table.light[border]>caption{ border:solid 1px rgba(0,0,0,0.25); }


/* -----------------------------------------------------------------------------
   Matrix table
----------------------------------------------------------------------------- */
table.matrix *                       {  }
table.matrix                         { /*font-size:50%;*/ /*font-size:65%;*/ /*font-size:70%;*/ /* suit yourself */ }
	table.matrix tr                  {  }
	table.matrix tr th               { font-weight:500; }
	table.matrix tr td               { font-weight:500; }
	table.matrix>caption             {  }
	table.matrix>thead               {  }
		table.matrix>thead>tr        {  }
			table.matrix>thead>tr>th {  }
	table.matrix>tfoot               {  }
		table.matrix>tfoot>tr        {  }
		table.matrix>tfoot>tr>th     {  }
	table.matrix>tbody               {  }
		table.matrix>tbody>tr        {  }
			table.matrix>tbody>tr>th {  }
			table.matrix>tbody>tr>td { text-align:center; }
	/* special table headers */
	table.matrix tr th.stronger                            { padding:4px; font-weight:500; background-color:rgba(0,0,0,0.66); }
	table.matrix tr th.non-rotated-header                  { padding:0; background-color:transparent; vertical-align:bottom; }
		table.matrix tr th.non-rotated-header>div          { padding:4px; background-color:rgba(0,0,0,0.5); }
		table.matrix tr th.non-rotated-header.stronger>div { background-color:rgba(0,0,0,0.66); }
	table.matrix tr th.rotated-header                      {  }
		table.matrix tr th.rotated-header>div              { height:37ex; width:2ex; }
			table.matrix tr th.rotated-header>div>div      { 
				text-align:left;
				white-space:nowrap;
				transform:         translate(0px, 33.5ex) rotate(270deg);
				-ms-transform:     translate(0px, 33.5ex) rotate(270deg);
				-webkit-transform: translate(0px, 33.5ex) rotate(270deg);
			}
	/* custom layout */
	table.matrix tr th.experience { font-weight:400; }
	table.matrix tr th.skill      { font-weight:400; }
	table.matrix tr th.company    { text-align:left; white-space:nowrap; }
	table.matrix tr th.project    { text-align:left; white-space:nowrap; font-weight:400; }
	table.matrix tr th.year       { text-align:center; white-space:nowrap; font-weight:400; }
	table.matrix tr td.resource   {  }
	/* foot notes */
	table.matrix tfoot.footnotes tr td { padding-top:1em; background-color:transparent; font-weight:300; color:rgba(255,255,255,0.5); text-align:right; }
	/* links */
	table.matrix a, 
	table.matrix a:link, 
	table.matrix a:visited, 
	table.matrix a:active, 
	table.matrix a:hover   { color:hsl(48, 25%, 80%); }
	table.matrix a         { color:hsl(48, 25%, 80%); }
	table.matrix a:link    { color:hsl(48, 25%, 80%); }
	table.matrix a:visited { color:hsl(48, 25%, 80%); }
	table.matrix a:active  { color:hsl(48, 25%,100%); }
	table.matrix a:hover   { color:hsl(48, 25%,100%); }

@media all                {
	table.matrix { font-size:80%; }
}
@media (max-width: 1200px){
	table.matrix { font-size:70%; }

}
@media (max-width: 750px) {
	table.matrix { font-size:60%; }

}
@media (max-width: 400px) {
	table.matrix { font-size:50%; }

}

table.details{ font-size:80%; }
	table.details th{ white-space: nowrap; text-align:left; }
		table.details .ordinal{ font-weight:300; color:rgba(255,255,255,0.85); }


/* =============================================================================
   Footer
============================================================================= */
footer{
	margin:5em 0 1ex 0;
	text-align:center;
	display: block;
	/*border-top:2px solid rgba(0,0,0,0.1);*/
	/*background-color:rgba(0,0,0,0.1);*/
}
footer .contacts{
	padding:1em 1em 0.25em 1em;
	color:hsl(48,100%,50%);
	/*text-transform: uppercase;*/
	font-size:75%;
	line-height:1em;
	font-weight:500;
}


/* =============================================================================
   Etc
============================================================================= */
.slash::before        { content: "/ "; font-weight:700; }
.slash.yellow::before { color:hsl( 48,100%, 50%); }
.slash.white::before  { color:hsl( 48,100%, 100%); }
.slash.black::before  { color:hsl( 48,100%, 0%); }

.rotate{
	-ms-transform: rotate(270deg); /* IE 9 */
	-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
	transform: rotate(270deg);
}

.innerShadow{
	background-color:rgba(51,51,51,0.5);
	padding: 5px 0;
	box-shadow:0 0 10px rgba(0,0,0,1) inset;
}

/* default media queries */
@media all                {}
@media (max-width: 1200px){}
@media (max-width: 750px) {}
@media (max-width: 400px) {}


/* =============================================================================
   Debug
============================================================================= */
@media all{
	body.debug{
		border-top:5px solid hsl(0,0%,100%);
	}
}
@media (max-width: 1200px){
	body.debug{
		border-top:5px solid hsl(0,0%,50%);
	}
}
@media (max-width: 750px){
	body.debug{
		border-top:5px solid hsl(0,0%,25%);
	}
}
@media (max-width: 400px){
	body.debug{
		border-top:5px solid hsl(0,0%,00%);
	}
}