* {
	font-family: 'Noto Sans';
	box-sizing: border-box;


}

a {
	text-decoration:none;
	color:black;
}

body {
	background:#1D3642;
	margin:0;
}
main {
	display:grid;
	grid-template-areas: 
	'header header'
	'content aside'
	'footer footer';
	grid-template-columns: 1fr 300px;
	grid-template-rows:100px 1fr 1fr;
	max-width:1200px;
	margin:0 auto;
	height:100vh;

}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.no-aside {
	display:grid;
	grid-template-areas: 
	'header header'
	'content content'
	'footer footer';
	grid-template-columns: 1fr 300px;
	grid-template-rows:100px 1fr 1fr;
	max-width:1200px;
	margin:0 auto;
	height:100vh;

}

.header {
	/*background: #315082;*/
	grid-area:header;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	
}

.menu-button {
	display: none;
}

.menu-button svg {
	fill: white;
	width:25px;
	height:25px;
}

.menu {
	display:flex;
	flex-wrap: wrap;
	list-style: none;
	
}

.menu a {
	color:white;
	text-decoration:none;
	display:flex;
	align-items: flex-start;
	padding: 0 10px;
	text-transform: uppercase;
}

.logo {
	display:flex;
}

.content {
	background:#f8f8f8;
	grid-area:content;
}

.aside {
	background: #f8f8f8;
	grid-area:aside;

}

.aside .latest-title {
	margin:10px 10px;
	font-size:1.4rem;
	text-transform: uppercase;
	

}

.aside .latest-posts {
	display:flex;
	padding: 10px 10px;
	border-bottom:1px solid #ddd;

}

.aside .latest-posts a {
	font-size:0.85rem;
}

.aside .latest-posts img {
	flex-shrink: 0;
	width: 75px;
    height: 75px; 
    object-fit: cover;

}

.footer {
	color:white;
	grid-area:footer;
	display:flex;
	font-family:'Noto Sans';
	justify-content: space-between;
	padding:20px;

}

.footer .footer-left {
	font-size:0.9rem;
	line-height: 1.5rem;
	margin:10px 0;
	width: calc(100% - 150px);
	
}

.footer .footer-right {
	width:150px;
	line-height: 1.5rem;

}

.footer .footer-right li {
	list-style:none;
	
	}
.footer .footer-right a {
	color:white;
}


.index-content {
	padding:15px 25px;
	display:flex;
	flex: 0 1 auto;
	flex-flow: row wrap;
	justify-content: space-between;
	background: #eee;
}

.index-content .item {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	width: 23%;
	margin: 1%;
	background:white;
	border-radius: 15px;
	overflow: hidden;
}

.index-content .item .category a {
	display:block;
	text-decoration: none;
	text-transform: uppercase;
	color: #2a9cd6;
	margin:5px 0;
	padding: 0 5px;
	font-size: 0.9rem;
}

.index-content .item img {
	width: 100%;
	height: 200px;
	object-fit: cover;

} 

.index-content .item .title {
	line-height: 1.4rem;
	padding:0 5px;
	
}

.index-content .item .meta {
	color:rgba(0,0,0,0.6);
	flex:0;
	padding:5px;
	font-size: 0.8rem;

}

.index-content .latest-item {
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	width: 48%;
	max-height: 130px;
	margin: 10px 1%;
	padding: 0;
	background: white;
	border-radius: 15px; 
}

.index-content .latest-item {
	border:1px solid #ddd;
}

.index-content .latest-item .left {
	width: calc(100% - 200px);
	padding: 10px;
}

.index-content .latest-item .image {
	width:200px;
	/*height:150px;*/
	
}

.index-content .latest-item .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}


.author-description p {
	width:100%;
	margin:10px;
}

.index-content .latest-item .meta {
	color:rgba(0,0,0,0.6);
	line-height: 2rem;
	font-size:0.8rem;
}

.index-content h1 {
	width:100%;
	margin:10px;
}

.article {
	color:#4C4C4C;
	font-size: 1.15rem;
	position: relative;
	z-index:2;
}

.article-content {
	padding:0 30px;
}

.article p, .article li, .article blockquote, .article p a {
	font-family: 'PT Serif';

}

.article li {
	margin:10px 0;
}

.article blockquote {
	border-left:5px solid #1D3642;
	margin-left:0;
	padding-left:50px;
	background-image: url(/icons/quotes.svg);
	background-repeat: no-repeat;
	background-position: 8px top;

}

.article h1 {
	font-size: 2.5rem;
	font-family: 'Raleway';
	font-weight: 300;
	color:white;
	z-index:2;
	position:relative;

}

.article .article-meta {
	position:relative;
	color:white;
	z-index:2;
	margin-top:100px;
}

.article-info {
	background-size: cover;
	background-repeat: no-repeat;
    margin-top: 0;
    padding: 30px 30px 20px 30px;
    position:relative;
    background-position: center center;
    
}

.article-info:before {
	content: "";
    position: absolute;
    z-index:1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0, 0, 0, 0.65);
} 


 .article h2 {
 	font-family:Raleway;
 	font-weight: 300;
 	font-size:2rem;
 }

.article p {
	line-height: 2rem;
	margin:40px 0;

}

.article pre {
	font-family: monospace;
	background: #1D3642;
	color: white;
	padding:5px;
	white-space: pre;
}

.article table tr td {
	border: 1px solid #ddd;
}

.article code {
	background: rgba(22,38,46,0.1);
	font-family: monospace;
}

.article a {
	text-decoration: none;
	color: #2a9cd6;
}

.article img {
	max-width: 100%;

}

.article figure {
	margin:0;
	text-align: center;
	
}

.article iframe {
	display:block;
	margin:0 auto;
}

.comments {
	margin:0 30px 20px 30px; 
	font-family:'Noto Sans';
	border-top:1px solid #ddd;
	padding-top:10px;
	
}

.comment-author {
	color:#2a9cd6;
}

.article .cmt {
	margin-top:10px;
	padding: 10px 10px;
	border: 0.8px solid #ddd;
    border-radius: 10px;
}

.article .child-comment {
    border-radius: 10px;
    margin-left:10px;
    padding:15px;
}


.comment .comment-content p {
	margin:0;
}

.comments .comment-date {
	font-size: 0.8rem;

}

.comments .icon-reply {
	width:0.9rem;
	height:0.8rem;
}

.comments .reply-button{
	margin-left:0;
	cursor:pointer;
	width:65px;
}

.reply-comment {
	color:#888;
	font-size: 0.9rem;
}

.comments .comment-form {
	display:flex;
	flex-wrap: wrap;
}

.comments .comment-form [type=text] {
	width:200px;
	padding:10px;
	margin:10px 20px 10px 0;
	border:1px solid #ddd;
}

.comments .comment-form textarea {
	width:100%;
	height:200px;
	border:1px solid #ddd;
}

.comment-form button {
	color: white;
    border: 0;
    background: #2a9cd6;
    width: 100px;
    margin: 10px 20px 5px 0;
    padding: 5px;
    text-transform: uppercase;
    cursor:pointer;
}

.checkbox {
	display: none;
}

.fail {
	color:#de1b1b;
}

.errors {
	width:100%;
}

.errors p {
	margin:0;
}

.success {
	color:#;
}


@media all and (max-width: 1200px) {
	.logo {
		padding:0 10px;

	}
}

@media all and (max-width: 900px) {
	main {
	grid-template-areas: 
	'header'
	'content'
	'aside'
	'footer';
	grid-template-columns: 1fr;
	max-width:100%;
		}

	.index-content .item {
		width: 45%;
		margin: 2.5%;
	}

	.index-content .latest-item {
		width:100%;
	}
}

@media all and (max-width: 600px) {

	.menu {
		display: none;
		background: #1D3642;
	    z-index: 3;
	    order: 3;
	    flex: 1 0 100%;
	    margin:0;
	    padding:0;
	}

	.menu li {
		display: block;
	    margin: 10px auto;
	    text-align: center;
	    flex: 1 0 100%;
	    justify-content: center;
	}

	.menu-button {
	display: block;
	margin:30px;
	}


	.article h1 {
		font-size: 2rem;
		margin: 0;
		padding: 20px 0;
	}

	.article h2 {
		font-size:1.5rem;
	}

	.article-info {
		padding: 0 30px 20px 30px;

	}

	.article .article-meta {
		margin-top: 20px;
	}

	.article-content {
		padding:0 10px;
	}

	.index-content {
		background: #f8f8f8;
		padding:10px;
	}

	.index-content .item {
		width: 100%;
		margin: 2.5%;
	}

	.index-content .latest-item {
		height:120px;
		margin:2% 0;
		border:1px solid #eee;
	}

	.index-content .latest-item .left {
		font-size: 0.85rem;
		width:60%;
	}

	.index-content .latest-item .image {
		width:40%;
	}

	.article p, .article li, .article blockquote {
		font-size: 1.05rem;
	}

	.comments {
		margin:0 10px;
	}

	.article .child-comment {
		margin-left:0;
		padding:10px;
	}

	.article ul, .article ol {
		padding:0 20px;
	}

	.footer {
		flex-wrap: wrap;
	}

	.footer .footer-left {
		width: 100%;
	}

	.footer .footer-right {
		width:100%;

	}

	.footer .footer-right ul {
		display:flex;
		flex-wrap: wrap;
		padding:0;
		justify-content: space-between;
	}
}