/* -------------------------------- 

Primary style

-------------------------------- */
	html * {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	*,
	*:after,
	*:before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	body {
		font-size: 100%;
		font-family: "Droid Serif", serif;
		color: #7f8c97;
		background-color: #e9f0f5;
	}
	
	a {
		color: #acb7c0;
		text-decoration: none;
		font-family: "Open Sans", sans-serif;
	}
	
	img {
		max-width: 100%;
	}
	
	h1,
	h2 {
		font-family: "Open Sans", sans-serif;
		font-weight: bold;
	}
	/* --------------------------------
Modules - reusable parts of our design

-------------------------------- */
	
	.cd-container {
		/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
		width: 90%;
		max-width: 1170px;
		margin: 0 auto;
	}
	
	.cd-container::after {
		/* clearfix */
		content: '';
		display: table;
		clear: both;
	}
	/* -------------------------------- 

Main components 

-------------------------------- */
	
	header {
		height: 200px;
		line-height: 200px;
		text-align: center;
		background: #303e49;
	}
	
	header h1 {
		color: white;
		font-size: 18px;
		font-size: 1.125rem;
	}
	
	@media only screen and (min-width: 1170px) {
		header {
			height: 300px;
			line-height: 300px;
		}
		header h1 {
			font-size: 24px;
			font-size: 1.5rem;
		}
	}
	
	#cd-timeline {
		position: relative;
		padding: 2em 0;
		margin-top: 2em;
		margin-bottom: 2em;
	}
	
	#cd-timeline::before {
		/* this is the vertical line */
		content: '';
		position: absolute;
		top: 0;
		left: 18px;
		height: 100%;
		width: 7px;
		background-color: #094845;
	}
	
	@media only screen and (min-width: 1170px) {
		#cd-timeline {
			margin-top: 3em;
			margin-bottom: 3em;
		}
		#cd-timeline::before {
			left: 50%;
			margin-left: -7px;
			width: 14px;
		}
	}
	
	.cd-timeline-block {
		position: relative;
		margin: 2em 0;
	}
	
	.cd-timeline-block:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.cd-timeline-block:first-child {
		margin-top: 0;
	}
	
	.cd-timeline-block:last-child {
		margin-bottom: 0;
	}
	
	@media only screen and (min-width: 1170px) {
		.cd-timeline-block {
			margin: 4em 0;
		}
		.cd-timeline-block:first-child {
			margin-top: 0;
		}
		.cd-timeline-block:last-child {
			margin-bottom: 0;
		}
	}
	
	.cd-timeline-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #e9f0f5;
		box-shadow: 0 0 0 8px #094845, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
	}
	
	.cd-timeline-img img {
		display: block;
		width: 24px;
		height: 24px;
		position: relative;
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -12px;
	}
	
	@media only screen and (min-width: 1170px) {
		.cd-timeline-img {
			width: 60px;
			height: 60px;
			left: 50%;
			margin-left: -30px;
			background-color: #e9f0f5;
			/* Force Hardware Acceleration in WebKit */
			-webkit-transform: translateZ(0);
			-webkit-backface-visibility: hidden;
		}
		.cssanimations .cd-timeline-img.is-hidden {
			visibility: hidden;
		}
		.cssanimations .cd-timeline-img.bounce-in {
			visibility: visible;
			-webkit-animation: cd-bounce-1 0.6s;
			-moz-animation: cd-bounce-1 0.6s;
			animation: cd-bounce-1 0.6s;
		}
	}
	
	@-webkit-keyframes cd-bounce-1 {
		0% {
			opacity: 0;
			-webkit-transform: scale(0.5);
		}
		60% {
			opacity: 1;
			-webkit-transform: scale(1.2);
		}
		100% {
			-webkit-transform: scale(1);
		}
	}
	
	@-moz-keyframes cd-bounce-1 {
		0% {
			opacity: 0;
			-moz-transform: scale(0.5);
		}
		60% {
			opacity: 1;
			-moz-transform: scale(1.2);
		}
		100% {
			-moz-transform: scale(1);
		}
	}
	
	@keyframes cd-bounce-1 {
		0% {
			opacity: 0;
			-webkit-transform: scale(0.5);
			-moz-transform: scale(0.5);
			-ms-transform: scale(0.5);
			-o-transform: scale(0.5);
			transform: scale(0.5);
		}
		60% {
			opacity: 1;
			-webkit-transform: scale(1.2);
			-moz-transform: scale(1.2);
			-ms-transform: scale(1.2);
			-o-transform: scale(1.2);
			transform: scale(1.2);
		}
		100% {
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}
	}
	
	.cd-timeline-content {
		position: relative;
		margin-left: 60px;
		background: white;
		border-radius: 0.25em;
		padding: 1em;
		box-shadow: 0 3px 0 #d7e4ed;
	}
	
	.cd-timeline-content:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.cd-timeline-content h2 {
		color: #303e49;
	}
	
	.cd-timeline-content p,
	.cd-timeline-content .cd-read-more,
	.cd-timeline-content .cd-date {
		font-size: 13px;
		font-size: 0.8125rem;
	}
	
	.cd-timeline-content .cd-read-more,
	.cd-timeline-content .cd-date {
		display: inline-block;
	}
	
	.cd-timeline-content p {
		margin: 1em 0;
		line-height: 1.6;
	}
	
	.cd-timeline-content .cd-read-more {
		float: right;
		padding: .8em 1em;
		background: #acb7c0;
		color: white;
		border-radius: 0.25em;
	}
	
	.no-touch .cd-timeline-content .cd-read-more:hover {
		background-color: #bac4cb;
	}
	
	.cd-timeline-content .cd-date {
		float: left;
		padding: .8em 0;
		opacity: .7;
	}
	
	.cd-timeline-content::before {
		content: '';
		position: absolute;
		top: 16px;
		right: 100%;
		height: 0;
		width: 0;
		border: 7px solid transparent;
		border-right: 7px solid white;
	}
	
	@media only screen and (min-width: 350px) {
		.cd-timeline-content h2 {
			font-size: 20px;
			font-size: 1.25rem;
		}
		.cd-timeline-content p {
			font-size: 16px;
			font-size: 1rem;
		}
		.cd-timeline-content .cd-read-more,
		.cd-timeline-content .cd-date {
			font-size: 25px;
			opacity: 1;
		}
		.cd-timeline-content .cd-date {
			padding: .8em 0;
			opacity: 1;
			float: none;
		}
		h2 {
			margin-top: 0px;
		}
	}
	
	@media only screen and (min-width: 768px) {
		.cd-timeline-content h2 {
			font-size: 20px;
			font-size: 1.25rem;
		}
		.cd-timeline-content p {
			font-size: 16px;
			font-size: 1rem;
		}
		.cd-timeline-content .cd-read-more,
		.cd-timeline-content .cd-date {
			font-size: 25px;
			opacity: 1;
		}
		.cd-timeline-content .cd-date {
			padding: .8em 0;
			opacity: 1;
			float: none;
		}
		h2 {
			margin-top: 0px;
		}
	}
	
	@media only screen and (min-width: 1170px) {
		.cd-timeline-content {
			margin-left: 0;
			padding: 1.6em;
			width: 45%;
		}
		.cd-timeline-content::before {
			top: 24px;
			left: 100%;
			border-color: transparent;
			border-left-color: white;
		}
		.cd-timeline-content .cd-read-more {
			float: left;
		}
		.cd-timeline-content .cd-date {
			position: absolute;
			width: 120%;
			left: 122%;
			top: -86px;
			font-size: 75px;
		}
		.cd-timeline-block:nth-child(even) .cd-timeline-content {
			float: right;
		}
		.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
			top: 24px;
			left: auto;
			right: 100%;
			border-color: transparent;
			border-right-color: white;
		}
		.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
			float: right;
		}
		.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
			left: auto;
			right: 122%;
			text-align: right;
		}
		.cssanimations .cd-timeline-content.is-hidden {
			visibility: hidden;
		}
		.cssanimations .cd-timeline-content.bounce-in {
			visibility: visible;
			-webkit-animation: cd-bounce-2 0.6s;
			-moz-animation: cd-bounce-2 0.6s;
			animation: cd-bounce-2 0.6s;
		}
	}
	
	@media only screen and (min-width: 1170px) {
		/* inverse bounce effect on even content blocks */
		.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
			-webkit-animation: cd-bounce-2-inverse 0.6s;
			-moz-animation: cd-bounce-2-inverse 0.6s;
			animation: cd-bounce-2-inverse 0.6s;
		}
	}
	
	@-webkit-keyframes cd-bounce-2 {
		0% {
			opacity: 0;
			-webkit-transform: translateX(-100px);
		}
		60% {
			opacity: 1;
			-webkit-transform: translateX(20px);
		}
		100% {
			-webkit-transform: translateX(0);
		}
	}
	
	@-moz-keyframes cd-bounce-2 {
		0% {
			opacity: 0;
			-moz-transform: translateX(-100px);
		}
		60% {
			opacity: 1;
			-moz-transform: translateX(20px);
		}
		100% {
			-moz-transform: translateX(0);
		}
	}
	
	@keyframes cd-bounce-2 {
		0% {
			opacity: 0;
			-webkit-transform: translateX(-100px);
			-moz-transform: translateX(-100px);
			-ms-transform: translateX(-100px);
			-o-transform: translateX(-100px);
			transform: translateX(-100px);
		}
		60% {
			opacity: 1;
			-webkit-transform: translateX(20px);
			-moz-transform: translateX(20px);
			-ms-transform: translateX(20px);
			-o-transform: translateX(20px);
			transform: translateX(20px);
		}
		100% {
			-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			-ms-transform: translateX(0);
			-o-transform: translateX(0);
			transform: translateX(0);
		}
	}
	
	@-webkit-keyframes cd-bounce-2-inverse {
		0% {
			opacity: 0;
			-webkit-transform: translateX(100px);
		}
		60% {
			opacity: 1;
			-webkit-transform: translateX(-20px);
		}
		100% {
			-webkit-transform: translateX(0);
		}
	}
	
	@-moz-keyframes cd-bounce-2-inverse {
		0% {
			opacity: 0;
			-moz-transform: translateX(100px);
		}
		60% {
			opacity: 1;
			-moz-transform: translateX(-20px);
		}
		100% {
			-moz-transform: translateX(0);
		}
	}
	
	@keyframes cd-bounce-2-inverse {
		0% {
			opacity: 0;
			-webkit-transform: translateX(100px);
			-moz-transform: translateX(100px);
			-ms-transform: translateX(100px);
			-o-transform: translateX(100px);
			transform: translateX(100px);
		}
		60% {
			opacity: 1;
			-webkit-transform: translateX(-20px);
			-moz-transform: translateX(-20px);
			-ms-transform: translateX(-20px);
			-o-transform: translateX(-20px);
			transform: translateX(-20px);
		}
		100% {
			-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			-ms-transform: translateX(0);
			-o-transform: translateX(0);
			transform: translateX(0);
		}
	}
	
	.meses p {
		font-size: 20px;
		color: #094845;
	}
	
	.cd-date {
		color: #548686;
		font-style: italic;
	}
	
	.cd-date>span {
		color: #9e8e55;
		font-style: italic;
	}