* {
	 box-sizing: border-box;
}

body {
 	background-color: #474e5d;
 	font-family: Helvetica, sans-serif;
	margin:0;
	padding:24px 0;
}

timeline {
	position: relative;
 	max-width: 1200px;
 	margin: 0 auto;
}

timeline::after {
 	content: '';
 	position: absolute;
 	width: 6px;
 	background-color: white;
 	top: 0;
 	bottom: 0;
 	left: 50%;
 	margin-left: -3px;
}

container {
	padding: 10px 40px;
 	position: relative;
 	background-color: inherit;
 	width: 50%;
}

container::after {
 	content: '';
 	position: absolute;
 	width: 25px;
 	height: 25px;
 	right: -17px;
 	background-color: white;
 	border: 4px solid #FF9F55;
 	top: 15px;
 	border-radius: 50%;
 	z-index: 1;
}

left {
 	left: 0;
}

right {
 	left: 50%;
}

left::before {
 	content: " ";
 	height: 0;
 	position: absolute;
 	top: 22px;
 	width: 0;
 	z-index: 1;
 	right: 30px;
 	border: medium solid white;
 	border-width: 10px 0 10px 10px;
 	border-color: transparent transparent transparent white;
}

right::before {
 	content: " ";
 	height: 0;
 	position: absolute;
 	top: 22px;
 	width: 0;
 	z-index: 1;
 	left: 30px;
 	border: medium solid white;
 	border-width: 10px 10px 10px 0;
 	border-color: transparent white transparent transparent;
}

right::after {
 	left: -16px;
}

content {
 	padding: 20px 30px;
 	background-color: white;
 	position: relative;
 	border-radius: 6px;
}

@media screen and (max-width: 600px) {
 .timeline::after {
   	left: 31px;
 }

 .container {
   	width: 100%;
   	padding-left: 70px;
   	padding-right: 25px;
 }

 .container::before {
   	left: 60px;
   	border: medium solid white;
   	border-width: 10px 10px 10px 0;
   	border-color: transparent white transparent transparent;
 }

 .left::after, .right::after {
   	left: 15px;
 }

 .right {
   	left: 0%;
 }
}

html{
	font-family:Arial, Helvetica, sans-serif;
	scroll-behavior: smooth;
}

#page{
	background-color: lightblue;
	height:auto;
	max-width:960px;
	width:100%;
	margin:0 auto;
	padding:0 0 24px;
	outline:1px solid #e0e0e0;
}

img{
	border:0;
}

/*------------------------------ HEADER ------------------------------*/
#header{
	display:inline-block;
	padding:0 0 16px;
}

/** Logo **/
#logo{
	float:left;
	display:block;
	height:86px;
	max-width:230px;
	margin:24px 80px 24px 10px;
}

/** Connect **/
#connect{
	float:right;
	margin-right:30px;
}

#connect a{
	display:inline-block;
	height:66px;
	max-width:41px;
	width:auto;
}

/** Navigation **/
#navigation{
	float:right;
	display:inline-block;
	height:26px;
	max-width:600px;
	width:100%;
	list-style:none;
	margin:15px 20px 12px 0;
	padding:4px 0 0;
}

#navigation li{
	float:left;
	font-size:14px;
	line-height:26px;
	margin:0 10px;
	text-align:center;
}

#navigation a{
	color:#393939;
	font-weight:bold;
	padding:5px 10px;
	text-decoration:none;
}

#navigation a:hover, #navigation li.selected a{
	background-color:#a6e5f6;
	color:#1b6d9d;
	border-radius:3px;
}

#navigation li.about a{
	background-color:#fffeca;
	color:#8d5226;
}

#navigation li.blog a{
	background-color:#ffd4e9;
	color:#ac366a;
}

#navigation li.contact a{
	background-color:#ffe3b4;
	color:#bc773c;
}

#navigation li.gallery a{
	background-color:#ddffac;
	color:#315400;
}

#navigation li.news a{
	background-color:#e8d4ff;
	color:#4d1bb2;
}

/*------------------------------ BODY ------------------------------*/
#body{
	display:inline-block;
	text-align:left;
}

span.author{
	color:#989898;
	display:block;
	font-family:'Times New Roman';
	font-size:12px;
}

/** MAIN **/
#main{
	float:left;
	width:65%;
	max-width:680px;
	line-height:24px;
	position:relative;
	box-sizing:border-box;
}

#main div.details{
	border-right:1px solid #d3d3d3;
	height:312px;
	margin:15px 0 24px 220px;
}

#main div.details h3{
	color:#0193ff;
	font-family:'Times New Roman';
	font-size:21px;
	margin:0 0 21px;
	padding:0 30px 0 40px;
	text-align:center;
}

#main h3 a{
	color:#0193ff;
	font-size:38px;
	line-height:40px;
	text-decoration:none;
}

#main h3 span.author{
	font-size:14px;
	text-align:left;
}

#main p{
	color:#6d6d6d;
	font-size:14px;
	padding:0 40px;
	text-align:justify;
}

#main p a{
	color:#6d6d6d;
}

#main p a:hover{
	color:#b38957;
}

/*------------------------------ Inner Pages ------------------------------*/
#body hr{
	border-width:2px;
	border-style:solid;
	width:180px;
	margin:0;
	text-align:left;
}

#body h1{
	font-family:'Times New Roman';
	font-size:36px;
	margin:9px 0 34px 29px;
}

/** Page Header color variations **/
#body .about{
	color:#893b0a;
	border-color:#893b0a;
}

#body .gallery{
	color:#3a5208;
	border-color:#3c5619;
}

/**-----------------------------**/
#contents{
	min-height:900px;
	padding:0 30px;
}

#contents h3{
	color:#3a3a3a;
	font-family:'Times New Roman';
	margin:0;
}

#contents p{
	color:#6d6d6d;
	font-size:14px;
	line-height:24px;
	margin:0;
	padding:0 0 24px;
	text-align:justify;
}

#contents p b{
	display:block;
	width:500px;
}

#contents p a{
	color:#6d6d6d;
}

#contents p a:hover{
	color:#893b0a;
}

#contents div.blog{
	width:900px;
}

#contents div.blog div{
	width:600px;
}

#contents div.blog div h3{
	margin:0 0 24px;
}

#contents ul.lists{
	float:right;
	list-style:none;
	width:260px;
	margin:0;
}

#contents ul.lists li b{
	font-family:'Time New Roman';
	font-size:15px;
	width:260px;
}

/*------------------------------ Gallery Page ------------------------------*/
#contents div.view{
	width:608px;
	margin:0 auto;
}

#contents div.view ul{
	list-style:none;
	margin:14px 0;
	padding:0;
}

#contents div.view ul li{
	float:left;
	width:121px;
	text-align:center;
}

/*------------------------------ FOOTER ------------------------------*/
#footer{
	color:#6d6d6d;
	font-size:12px;
	line-height:24px;
	padding-top:24px;
	text-align:center;
}

#footer a{
	color:#6d6d6d;
	text-decoration:none;
}

/* Responsive layout tweaks */
@media (max-width: 992px) {
	#page{ padding:0 12px 24px; }
	#main, #sidebar, #blogs, #news, #updates, #favorites { float:none; width:100%; max-width:none; margin:0 0 20px; position:static; }
	#favorites{ background-position:center top; min-height:150px; }
	#navigation{ width:100%; text-align:center; float:none; margin:10px 0; }
	#updates ul.navigation li{ width:auto; display:inline-block; margin:0 6px; }
	#contents div.blog, #contents div.blog div, #contents div.view, #contents div.view ul li { width:100%; max-width:none; }
}

@media (max-width: 480px) {
	.featured-thumb, .main-photo, .fav-small, .fav-medium, .blog-author { max-width:100%; height:auto; }
	h1{ font-size:1.2rem; }
	#logo{ margin:12px; height:auto; }
	#navigation .nav-item{ display:inline-block; }
}