.home .pagewidth {
    width: 1120px;
}
.topic-hero {
  display: flex;
  max-width: 1120px;
  width: 100%;
  text-align: center;
  position: relative;
  flex-direction: row;
}
.topic-hero .hero-photo {
  width: 280px;
  min-width: 280px;
  padding: 0;
  display: block;
}
.topic-hero .hero-photo img {
    width: auto;
	max-height: 100%;
	display: inline-block;
	height: auto;
}
.hero-legend {
	display: flex;
	background-color: #fff;
	flex-direction: row;
	justify-content:space-between;
	padding:20px;
	margin-bottom: 20px;
}
.topic-hero .hero-legend {
	margin-bottom: 0px;
}
.hero-text {
	font-size:0.95em;
	width: 100%;
    margin-left: 10px;
}
.hero-text p {padding: 10px 20px; text-align: justify;margin-bottom: 1em;hyphens: auto;}
.hero-h1 {position:relative;width: 50%; min-width: 200px; display: flex;vertical-align: middle;justify-content: center;flex-direction: column; background-color: #ffffffab;border-radius: 0 10px 10px 0;}
.hero-h1 .start-here {display: inline-block;margin-top: 8px;text-align: center;padding: 12px;background-color: #a8ff22; color: #555;margin: 8px auto;width: 160px;text-decoration: none;border-radius: 40px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);}
.home .hero-h1 h1 {font-size: 1.6em;margin-top: 16px;display: inline-block;}
.hero-h1 .start-here:hover {
  background-color: #2ef212cc;
}
.hero-h1::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: repeating-linear-gradient( to bottom, #a4f923, #a4f923 4px, transparent 4px, transparent 10px );
}
.order1 {order:1;}
.order2 {order:2;}
.order3 {order:3;}
.topics-container {
	width: 100%;
	display: flex;
	margin-bottom: 20px;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: space-between;
}
.topic-image-text .label, .topic-list .label, .topic-image-text .label, .topic-full-image .label, .single-topic .label, .latest-posts-list .label, .topic-popular-list .label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
    font-size: 0.75em;
}
.topic-popular-list {
	position: relative;
	padding:12px 20px 12px 26px;
	display: inline-block;
	width: 45%;
	background-color: #fff;
}

.topic-popular-list::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: repeating-linear-gradient( to bottom, #a4f923, #a4f923 4px, transparent 4px, transparent 10px );

}
.topic-popular-list .label {
	background-color: greenyellow;
  padding: 4px;
  color: #555;
}
.topic-list {
	padding:12px 20px;
	display: inline-block;
	width: 250px;
	max-width: 250px;
	background-color: #fff;
}

.topic-list ol {
	counter-reset: my-counter;
	display: flex;
  	flex-wrap: wrap;
 	margin: 12px 0 0 0;
  	padding: 0;
}

.topic-list ol li {
	counter-increment: my-counter;
	list-style: none;
	display: flex;
	font-size: 0.9em;
    margin-bottom: 0.8rem;
    line-height: 1.3em;
    width: 100%;
}

.topic-list ol li:before {
	content: counter(my-counter) ".";
  	font-size: 2.0rem;
  	margin-right: 0.5rem;
  	line-height: 1;
}

.topic-list a{
	color:#333;
	border-bottom: 2px solid white;
}

.topic-list a:hover, .topic-list a:active {
	color: #0057a9;
  	border-bottom: 2px solid greenyellow;
  	text-decoration: none;
}

.topic-list .label {
	background-color: greenyellow;
  	padding: 4px;
  	color: #484848;
}

.topic-full-image {
	display: block;
	max-width: 480px;
	width: 100%;
	text-align: center;
	position: relative;
}

.width-320 {
	max-width: 320px;
}

.topic-full-image .caption, .topic-full-image .caption a{
	color:#fff;
	text-transform: uppercase;
}

.topic-full-image .caption {
	margin-top: 5px;
	font-size: 1.6em;
}

.topic-full-image .caption a:before {
	background: none;
}

.topic-full-image .label {
	color:#fff;
}

.topic-full-image a {
	display: block;
}

.topic-full-image a:before {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    content: "";
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZC11Y2dnLWdlbmVyYXRlZCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMCUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.7) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.7) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.7) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.7) 100%);
    -webkit-transition: background 0.3s 0.1s ease;
    -moz-transition: background 0.3s 0.1s ease;
    transition: background 0.3s 0.1s ease;
}

.topic-full-image:hover, .topic-image-text:hover, .topic-list:hover, .latest-post:hover, .latest-posts-list:hover {
	-webkit-box-shadow: 0px 11px 19px 0px rgba(60, 60, 60, 0.39);
    -moz-box-shadow: 0px 11px 19px 0px rgba(60, 60, 60, 0.39);
    box-shadow: 0px 11px 19px 0px rgba(60, 60, 60, 0.39);
}

.topic-full-image img {
	display: block;
}

.topic-full-image .text {
	position: absolute;
    left: 10%;
    bottom: 20px;
    width: 80%;
    text-align: center;
    z-index: 10;
}

.width-320 .text {
	top:20px;
	border-bottom:none;
}

.topic-image-text {
	display: inline-block;
	max-width: 320px;
	text-align: center;
}

.topic-image-text .label {
	color: #868686;
	margin-top: 7px;
    display: inline-block;
}

.topic-image-text .caption {
	text-transform: uppercase;
	color: #333;
	margin-top:3px;
	padding: 0px 20px;
}
.topic-image-text a {
	text-decoration: none;
	border: 0px;
}
.topic-image-text .caption:hover {
    color: #f7a900;
    transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s ease;
}

.topic-image-text:hover {
    background-color: #ffffff6b;
}
.topic-full-image a:hover, .topic-image-text a:hover {
	text-decoration: none;
}
.single-topic, .topic-text {
	padding:20px;
	margin-bottom: 20px;
}

.topic-text {
	text-align: center;
}
.topic-text ul {
	max-width: 500px;margin: 0px auto;text-align: left;background-color: #8f948717;padding: 2% 4%;border-radius: 8px;
}
.single-topic {
	background-color: #f8f8f8;
}

.single-topic .label {
	color: #636363;
}

.single-topic .caption {
	text-align: center;
	font-size: 1.05em;
	line-height: 28px;
	font-weight: normal;
}

.single-topic .popular-guides-container, .topic-popular-list .popular-guides-container{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.single-topic .popular-guides-container .first-list, .single-topic .popular-guides-container .second-list{
	width: 45%;
}
.single-topic .popular-guides-container .first-list {
	margin-right: 20px;
}

.single-topic .popular-guides-container .first-list ul, .single-topic .popular-guides-container .second-list ul {
	padding:0px;
	margin: 1em 0 1.4em 0em;
	list-style-type: none;
}
.topic-popular-list .popular-guides-container ul{
	margin: 1em 0 0em 0em;
	list-style-type: none;
	padding:0px;
}
.first-list ul li, .second-list ul li, .topic-popular-list .popular-guides-container ul li{
	padding:0px;
	margin-bottom:16px;
}

.popular-guides-container a, .latest-posts-list a {
	color: #0057a9;
  text-decoration: none;
  border-bottom: white solid 2px;
}

.popular-guides-container a:hover, .popular-guides-container a:focus, .popular-guides-container a:active, .latest-posts-list a:hover, .latest-posts-list a:focus, .latest-posts-list a:active {
  color: #0057a9;
  border-bottom: greenyellow solid 2px;
  text-decoration: none;
}

.blog-updates-container {
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: stretch;
}
.latest-post {
	max-width: 390px;
	width: 100%;
	margin-right: 20px;
}

.latest-posts-list {
	background-color: #fff;
	
	width: 100%;
	padding: 12px 20px;
}
.latest-posts-list .latest-posts {
	padding:0px;
	margin: 1em 0 1.4em 0em;
	list-style-type: none;
}
.latest-posts-list .latest-posts li{
	padding:0px;
	margin-bottom:16px;
}
.latest-posts-list .label {
	color:#636363;
	text-align: left;
}

@media screen and (max-width:1120px) {
	.topics-container {
		align-items: stretch;
    	justify-content: center;
	}
	.topic-list, .topic-image-text, .topic-full-image { margin-bottom: 20px }
	.topic-full-image.order3 { margin-right: 10px }
	.topic-full-image.order2 { margin-left: 10px }
	.topic-list { order:1;  margin-right: 0px; max-width: 780px; width: 780px; flex-grow: 2;}
	.topic-image-text { order:2;margin-right: 20px}
	.topic-full-image { order:3;}
	.latest-post {margin-right: 20px;}
	.single-topic {
		max-width: 780px;
    	margin: 0px auto 20px;
	}
	.blog-updates-container {
		max-width: 820px;
    	margin: 0px auto 20px;
	}
	.topic-list ol li::before {font-size: 1.8rem;}
	.topic-list ol li {font-size: 1.1em; line-height: 1.6em;}
	.topic-popular-list {width: 42%;}

}

@media screen and (max-width:900px) {
	.topic-hero { flex-direction: column; align-items: center; }
	.hero-h1 {margin-top:20px; width:460px;margin-left: 0px; padding: 20px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);}
	.hero-h1::before {left:8px;}
	.topic-popular-list {width:42%}
}

@media screen and (max-width:840px) {
	
	.latest-posts-list {order:1; max-width: 700px; width: auto; margin-bottom: 20px;}
	.latest-post {order:2; margin: 0px auto !important;}
	.blog-updates-container {flex-direction: column;}
	.single-topic{
		max-width: 700px;
	}
	.single-topic .popular-guides-container {
		flex-direction: column;
		justify-content: center;
	}
	.blog-updates-container {
		max-width: 740px;
	}
	.single-topic .popular-guides-container .first-list, .single-topic .popular-guides-container .second-list{
		width: 100%;
	}
	.single-topic .popular-guides-container .first-list {
		margin-right: 0px;
	}
	.topic-popular-list {
		width: 100%;
		margin: 12px;
	}
	.topic-text {
		max-width: 600px;
		margin: 0 auto 20px;
	}
	.topic-text ul {
		padding:2% 6%;
	}
	.topic-full-image.order3 { margin-right: 0px }
}

@media screen and (max-width:645px) {
	.topics-container {
		align-items: flex-start;
	}
	.topic-list, .topic-image-text, .topic-full-image { margin-bottom: 20px }
	.topic-list { order:1;  margin-right: 0px; max-width: 480px; min-width: 280px;}
	.topic-image-text { order:2; margin-right:0px;}
	.topic-full-image { order:3;}
	.hero-legend {flex-direction: column; justify-content: center;}
	.hero-photo {margin: 0 auto 5px auto; display: block;}
	.topic-list ol li { font-size:0.97em; }
	.hero-text {margin-left:0px;}
	.hero-text p { padding: 4px !important; }
	.topic-popular-list {
		width:100%;
	}
	.hero-h1 { width: 80%; }
	.topic-full-image.order2 { margin-left: 0px }
	.topic-text ul {padding: 2% 6% 2% 28px;}
	.topic-text p {padding: 0px !important;}
}