.block-date {
  background-color:#0e1555;
  color: #fff;
  float:right;
  margin-left:10px;
  padding:45px 5px 0;
  position:relative;

}
.block-date .day {
  font-size:45px;
  left:5px;
  line-height:45px;
  position:absolute;
  top:0;
  font-weight:500;
}
.block-date .month {
  font-size:25px;
  text-transform:uppercase;
font-weight:400;
}
.block-date .year {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display:block;
  position:absolute;
  right:-5px;
  top:15px;
font-weight:500;
color:#e3ea23;
}

.altbq {
  width: 90%;
  max-width: 95%;
  margin: 0 auto;
  padding: 5px;
  border-left: 5px solid #5ef9ff;
  background: none;
  font-size: 11pt;
  color:#0e1555
  align: left;
}
.altbq:hover {
border-left: 5px solid #f45c04;
color: #f45c04;
}
.altbq:before {
  display: none;
}
.altbq:not(:first-of-type) {
  margin-top: .5em;
}
.altbq .ltime {
  color: #600904;
  font-size: 11pt;
margin-bottom: .2em;
}
.altbq p {
  color: #555;
  font-size: 12pt;
}
.altbq footer {
  margin-top: .2em;
  padding: 0;
  color: #1a4c1a;
  font-size: 11pt;
  text-align: left;
}
.altbq footer:before {
  content: '- ';
}
.altbq:nth-of-type(even) {
  text-align: right;
  border-left: none;
  border-right: 5px solid #5ef9ff;
}
.altbq:nth-of-type(even):hover {
border-right: 5px solid #f45c04;
}
.altbq:nth-of-type(even) footer {
  text-align: right;
}
.altbq:nth-of-type(even) footer:before {
  content: '- ';
}
.altbq:nth-of-type(even) footer:after {
  content: '';
}
@element .altbq and (min-width: 300px) {
  .altbq {
    padding: 1em 20% 1em 1em;
  }
  .altbq p {
    font-size: 11pt;
  }
  .altbq:nth-of-type(even) {
    padding: 1em 1em 1em 20%;
  }
}

/* Some vars */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Sanchez:400italic,400);
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
.brooks {
  position: relative;
  font-family: 'Sanchez', serif;
  font-size: 2.4em;
  line-height: 1.5em;
  font-style: italic;
}
.brooks:before {
  content: '\201C';
  position: absolute;
  top: 0.25em;
  left: -0.15em;
  color: #e7e6e4;
  font-size: 6em;
  z-index: -1;
}

.ludwig {
  position: relative;
  padding-left: 1em;
  border-left: 0.2em solid #4d91b3;
  font-family: 'Roboto', serif;
  font-size: 2.4em;
  line-height: 1.5em;
  font-weight: 100;
}
.ludwig:before, .ludwig:after {
  content: '\201C';
  font-family: 'Sanchez';
  color: #4d91b3;
}
.ludwig:after {
  content: '\201D';
}

.groucho {
  position: relative;
  font-family: 'Sanchez', serif;
  font-size: 2.4em;
  line-height: 1.5em;
}
.groucho footer {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.6em;
  font-weight: 700;
  color: #d3d3cf;
  float: right;
}
.groucho footer:before {
  content: '\2015';
}
.groucho:after {
  content: '\201D';
  position: absolute;
  top: 0.28em;
  right: 0;
  font-size: 6em;
  font-style: italic;
  color: #e7e6e4;
  z-index: -1;
}

.demo-2 .main h2 {
	margin: 1em 0 0.5em 0;
	font-weight: normal;
	position: relative;
	text-shadow: 0 -1px rgba(0,0,0,0.6);
	font-size: 28px;
	line-height: 40px;
	background: #355681;
	background: rgba(53,86,129, 0.8);
	border: 1px solid #fff;
	padding: 5px 15px;
	color: white;
	border-radius: 0 10px 0 10px;
	box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
	font-family: 'Muli', sans-serif;
}

.demo-2 .main h3 {
	margin: 1em 0 0.5em 0;
	font-weight: 600;
	font-family: 'Titillium Web', sans-serif;
	position: relative;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
	font-size: 22px;
	line-height: 40px;
	color: #355681;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(53,86,129, 0.3);
}

.demo-4 .main h2:after 
 {
	width: 100%; 
	position: absolute;
	content: "";
	height: 1px;
	border-radius: 2px;
	left: 0;
	bottom: 0;
	box-shadow: 
		0 -1px 0 rgba(0,0,0,0.1), 
		0 1px 0 rgba(255,255,255,0.6);
}

.demo-4 .main h2 {
	margin: 1em 0 0.75em;
	padding: 0 0 5px 0;
	color: #6B5344;
	font-weight: normal;
	font-family: 'Scada', sans-serif;
	position: relative;
	text-shadow: 0 2px 0 rgba(255,255,255,0.5);
	font-size: 30px;
	line-height: 40px;
}


/*
<div class="block-date">
  <span class="day">31</span>
  <span class="month">July</span>
  <span class="year">2009</span>
</div>
*/

/*
<blockquote class="altbq">
  <p><q>The U.S. is fast approaching $19,000,000,000,000.00 in national debt. This is mathematically impossible to ever pay back &hellip; even if every American was taxed at 100%.</q></p>
  <footer>Charles Goyette, The Dollar Meltdown</footer>
</blockquote>
<blockquote>
  <p><q>79 million Baby Boomers are about to retire, pull their money out of the economy, and demand their $35 Trillion Dollars in Social Security &amp; Medicare. Think that through&hellip;</q></p>
  <footer>Robert Kiyosaki</footer>
</blockquote>
*/

/*
<blockquote class="brooks">
    Tragedy is when I cut my finger. Comedy is when you walk into an open sewer and die.
  </blockquote>
  
  <blockquote class="ludwig">
    I don't know why we are here, but I'm pretty sure that it is not in order to enjoy ourselves.
  </blockquote>
  
  <blockquote class="groucho">
    I don't have a photograph. I'd give you my footprints, but they're upstairs in my socks.
    <footer>Groucho Marx</footer>
  </blockquote>
*/