@font-face  { font-family: Multicolore; src: url("/static/Multicolore.otf") format("opentype");}

body {font-size: 16px;}
h1, h2, h3, h4, h5, h6 {font-family: "Bitter"; color: #635454;}
.container {font-family: "Roboto";}

#search {background-color: #f0f0f0;}
.list-item {margin-bottom: 20px; position: relative; box-shadow: 2px 2px 50px rgba(0, 0, 0, .1); overflow: hidden; display: block;}
.list-item:hover {box-shadow: 2px 2px 30px rgba(0, 0, 0, .3);}
.list-item:hover a {text-decoration: none;}
.list-item .image {position: relative; height: 160px; background-size: cover; background-position: center center;}
.list-item .tag {color: white; font-family: Bitter; font-size: 20px; display: inline-block; margin: 0 0 0 0; padding: 0em; text-decoration: none; font-size: 1.5em; position: absolute; right: 0px; bottom: 0px; box-shadow: 0px 0px 30px rgba(0,0,0,.5);}

.list-item h2 {font-size: 22px; margin: 0 0 0.1em 0; padding: 10px 10px 5px 10px;}
.list-item p {color: #635454; line-height: 120%; font-size: 16px; padding: 0px 10px 5px 10px; margin: 0 0 .5em 0;}

.list-item:nth-child(6n+0) h2 {color: #e73b13;}
.list-item:nth-child(6n+1) h2 {color: #fbba00;}
.list-item:nth-child(6n+2) h2 {color: #17b7d1;}
.list-item:nth-child(6n+3) h2 {color: #ca17d1;}
.list-item:nth-child(6n+4) h2 {color: #20bc41;}
.list-item:nth-child(6n+5) h2 {color: #e48437;}


.list-item .tag {padding: 5px; font-size: 13px;}
.list-item:nth-child(6n+0) .tag {background-color: #e73b13;}
.list-item:nth-child(6n+1) .tag {background-color: #fbba00;}
.list-item:nth-child(6n+2) .tag {background-color: #17b7d1;}
.list-item:nth-child(6n+3) .tag {background-color: #ca17d1;}
.list-item:nth-child(6n+4) .tag {background-color: #20bc41;}
.list-item:nth-child(6n+5) .tag {background-color: #e48437;}

.filter {display: inline-block; font-family: 'Bitter'; color: #635454; font-size: 22px; padding: 2px 5px;}
.filter:hover {color: #635454;}
.filter.active {background-color: white;}

.article blockquote {font-size: 16px; margin: 20px 0px; padding: 0px 10px;}
h1 {
  color: #635454;
  margin-bottom: 10px;
}

h2 { font-size: 2em; margin-bottom: 5px; }
h3 { font-size: 1.5em; }

/*
	article styling
*/
.article 			{background-color: white; padding: 20px 50px 50px 15px; margin-bottom: 50px;}
.article img 		{max-width: 100%; margin: 0px 0px;}
.article video 		{max-width: 100%; margin: 0px 0px;}
.article h1 		{color: #635454; margin: 0px 0px 10px 0px;}
.article h2 		{color: #635454; margin: 30px 0px 10px 0px;}
.article h3 		{color: #635454; margin: 30px 0px 10px 0px;}
.article h4 		{color: #635454; margin: 30px 0px 10px 0px;}
.article p 			{line-height: 130%; margin: 20px 0;}
code 				{background-color: #e7e8e2; color: #635454;}
pre 				{background-color: #272822; border: 0px; color: white; }
code .err 			{background-color: transparent !important; color: white;}

h2 { font-size: 2em; margin-bottom: 5px; }
h3 { font-size: 1.5em; }

/*
	common top banner brand navigation
*/
#banner-nav 					{position: fixed; left: 0px; top: 0px; right: 0px; z-index: 100; background-color: #312f3e; font-family: 'Multicolore'; box-shadow: 0px 0px 20px rgba(0, 0, 0, .4); overflow: hidden;}
#banner-nav a 					{float: right; display: inline-block; padding: 5px 10px; color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, .2)}
#banner-nav a:nth-of-type(1) 	{float: none; background-color: transparent !important; box-shadow: none;}
#banner-nav a:nth-of-type(4n+0) {background-color: #f05425;}
#banner-nav a:nth-of-type(4n+1) {background-color: #e9660a;}
#banner-nav a:nth-of-type(4n+2) {background-color: #f6a500;}
#banner-nav a:nth-of-type(4n+3) {background-color: #48aa98;}
#banner-nav a:nth-of-type(4n+4) {background-color: #54abbb;}

/*
	footer
*/

/* ####################################################
Footer
####################################################### */
footer 				{margin: 0px; bottom: 0px; background-color: rgba(40, 52, 61, 0.6); width: 100%; font-size: 9pt; margin-top: 30px; padding: 10px 60px; padding-bottom: 150px; line-height: 150%;}
footer p 			{color:#dcd1d6;}
footer ul  			{margin: 0px; padding: 0px;}
footer ul li 		{list-style: none; margin: 0px; padding: 0px;}
footer>div>div>div 	{padding: 20px 50px !important; font-size: 15px; color: #dce1e6;}
footer a 			{color: white; text-decoration: underline;}
footer a:hover 		{color: white;}

/*
	salvatore grid system used for article lists
*/
#grid[data-columns]::before 	{content: '3 .column.size-1of3';}

.column:first-child 			{padding-left: 0px;}
.column:last-child 				{padding-right: 0px;}
.column 						{float: left; padding: 0px 10px;}

.size-1of3 						{width: 33.333%;}
.size-1of2 						{width: 50%;}
.size-1of1 						{width: 100%;}

/* Custom, iPhone Retina */ 
@media only screen and (max-width: 567px) {
	#grid[data-columns]::before {content: '1 .column.size-1of1';}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 568px) and (max-width: 1199px) {
	#grid[data-columns]::before {content: '2 .column.size-1of2';}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	#grid[data-columns]::before {content: '3 .column.size-1of3';}
}