/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	color: #fff;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body
{
	background: linear-gradient(270deg, rgba(177,201,205,1) -14%, rgba(29,96,105,1) 38%);
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	/*font-family: Verdana, sans-serif;*/
	font-family: 'Nunito Sans', sans-serif;
	font-size: 14px;
}

	h1, h2, h3, p 
	{
		margin-bottom: 8px;
	}

header
{
	background: url("images/banner.jpg");
	background-size: cover; 
	max-width: 100%; 
	height: 116px;
	opacity: 0.4;
	padding: 20px 30px;
}

	header a#logo
	{
		font-family: 'Square Peg', cursive;
		font-size: 76px;
		text-decoration: none;
		color: #fff;
	}

nav
{
	background: #fff;
	opacity: 0.5;
	padding: 10px 30px;
}

	nav ul
	{
	}

		nav ul li 
		{
			display: inline-block;
    		padding-right: 20px;
		}

			nav a
			{
				color: #000;
				text-decoration: none;
			}

			nav a:hover
			{
				text-decoration: underline;
			}

.wrapper 
{
	display: flex;
	justify-content: center;
	padding: 30px;
	flex-direction: column;
}

	.grid 
	{
		display: grid;
		max-width: 1800px;
		width: 100%;
		grid-template-columns: 3fr 1fr;
		grid-gap: 20px;
		margin: 0 auto;
	}

	main 
	{
		color: #b1c8cd;
	}

	.wrapper aside
	{
		background-color: rgba(0, 0, 0, .05);
		padding: 30px;
		border: 1px solid black;
	}

		.wrapper aside h2
		{
			font-family: 'Square Peg', cursive;
			font-size: 34px;
			color: #000;
		}

		.wrapper aside ul li h2
		{
			color: #000;
		}

		.wrapper aside ul li:last-child
		{
			margin-bottom: 24px;
		}

		.wrapper aside a
		{
			color: #000;
			padding: 8px 12px;
			display: block;
		}

		.wrapper aside a:hover
		{
			opacity: 0.5;
			background: #fff;
		}

		.wrapper aside article
		{
			padding: 0;
			border-bottom: 3px solid #fff;
			margin-bottom: 32px;
		}

		.wrapper aside article img
		{
			max-width: 80px;
			border-radius: 68px;
			margin-top: -52px;
			float: right;
		}

		.wrapper aside article p
		{
			font-size: 14px;
			line-height: 1.2em;
		}

	article
	{
		padding: 30px;
		color: #b1c8cd;
	}

		.wrapper h2, .wrapper h2 a, h1
		{
			color: #fff;
			text-decoration: none;
			font-size: 32px;
    		line-height: 1.6;
    		border-bottom: 3px solid #fff;
		}

		.wrapper p, 
		main p,
		.wrapper ul,
		.wrapper div,
		.wrapper table,
		.wrapper a,
		.ck.ck-content,
		.ck.ck-content p,
		.ck.ck-content div,
		.ck.ck-content table,
		.ck.ck-content a
		{
			font-size: 18px;
    		line-height: 1.6;
		}

		.wrapper main h2,
		.wrapper main h3,
		.ck.ck-content h2,
		.ck.ck-content h3
		{
			font-size: 20px;
			text-transform: uppercase;
			margin-bottom: 12px;
			font-weight: bold;
		}

		.wrapper main h4,
		.ck.ck-content h4
		{
			font-size: 16px;
			text-transform: uppercase;
			margin-bottom: 12px;
			font-weight: bold;
		}

		.wrapper main strong,
		.ck.ck-content strong 
		{
			font-weight: bold;
		}

		.wrapper main i,
		.wrapper main em,
		.ck.ck-content i,
		.ck.ck-content em
		{
			font-style: italic;
		}

		.wrapper main a,
		.ck.ck-content a
		{
			color: #b1c8cd;
		}

			.wrapper main a:hover,
			.ck.ck-content a:hover
			{
				background: #fff;
				color: #000;
				opacity: 0.5;
				cursor: pointer;
			}

		.wrapper main ul,
		.wrapper main ol,
		.ck.ck-content ul,
		.ck.ck-content ol
		{
			padding-left: 4%;
			margin-bottom: 20px;
		}

			.wrapper main ul li,
			.ck.ck-content ul li
			{
				list-style: circle;
			}

			.wrapper main ol li,
			.ck.ck-content ol li
			{
				list-style: decimal;
			}

		article img
		{
			max-width: 80%;
			border: 3px solid #fff;
		}

		.wrapper img
		{
			max-width: 100%;
			border: 3px solid #fff;
		}

		.under_title
		{
			margin-bottom: 4px;
		}

#skills
{
	max-width: 100%; 
	display:inline-grid; 
	grid-template-columns: auto auto auto;
}	

	#skills article img
	{
		max-width: 100%;
	}	


#contact, 
#newcomment
{
	margin: 0 auto;
}

	#contact .error,
	#newcomment .error
	{
		display: none;
		text-align: right;
		padding-right: 6px;
	}

	#contact ul,
	#newcomment ul
	{
		padding-left: 0;
	}

	#contact li,
	#newcomment li
	{
		margin-bottom: 12px;
		list-style: none;
	}

	#contact label,
	#newcomment label
	{
		display: block;
	}

	#contact input,
	#newcomment input
	{
		width: 96%;
		padding: 4px 8px;
		margin-bottom: 6px;
	}

	#contact textarea, 
	#newcomment textarea
	{
		color: #000;
		width: 96%;
		padding: 4px 8px;
		margin-bottom: 10px!important;
	}

	#editcomments .active
	{
		background: #a1bc8d;
		margin-left:  5px;
	}

	#editcomments .inactive
	{
		background: #bc8d8d;
		margin-left:  5px;
	}

		.ck.ck-content
		{
			min-height: 120px;
			background: #347078!important;
			margin-bottom: 10px;
			border: 2px solid #ccc;
		}

		#post .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused),
		#post .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable)
		{
			border: 2px solid #fff;
		}

		#contact input:focus,
		#contact textarea:focus,
		#newcomment input:focus,
		#newcomment textarea:focus,
		.ck-editor:focus
		{
			background: #e2cdcd;
		}

	button
	{
		background: #b1c8cd;
    	padding: 12px 10px;
    	cursor: pointer;
    	text-transform: uppercase;
	}

		#contact #submit,
		#post #submit,
		#newcomment #submit
		{
			width: 100%;
		}

		button:hover
		{
			background: #779da2;
		}

a.add_new
{
	float: right;
	background: #fff;
	padding: 12px;
	border-radius: 8px;
	color: #000;
	text-decoration: none;
	margin-left: 4px;
}

	a.add_new:hover
	{
		color: #fff;
		background: #2d6b74;
	}

	.wrapper main .add_link
	{
		float: right;
		padding: 5px;
		background: #84a9af;
		border-radius: 10px;
		color: #fff !important;
		text-transform: uppercase;
		text-decoration: none;
		border: 2px solid #fff;
	}

		.wrapper main .add_link:hover
		{
			color: #fff !important;
			background: #1d6069;
			border: 2px solid #84a9af;
		}

	select
	{
		padding: 8px;
		border-radius: 8px;
		margin-left: 4px;
	}

	select.dropdown
	{
		display: block;
		margin-bottom: 10px;
		margin-left: 0px;
		width: 100%;
		padding: 8px;
		border-radius: 8px;
	}

	a.editLink, .caption
	{
		font-size: 12px;
	}

	input[type="checkbox"]
	{
		margin-right: 8px!important;
		width: 12px;
	}

	input:checked 
	{
		outline: 2px solid #b1c8cd;
	}

	input:disabled
	{
		background: #bbcfd2;
		color: #55696c;
	}

	hr 
	{
		background: none;
		border-top: none;
		border-bottom: 2px dotted #84a9ae;
	}

	.right
	{
		float: right;
	}

figure
{
	position: relative;
}

figure #remove_image
{
	position: absolute;
	top: 10px;
	left: 10px;
}

#editcomments label
{
	float: right;
	background: #7d9699;
	border-radius: 10px;
	padding: 3px 10px 3px 6px;
	font-size: 12px;
}

#editcomments label:hover
	{
   	background: #779da2;
   	cursor: pointer;
	}

form {
	margin-bottom:  20px;
}

form input,
form textarea,
.ck-editor
{
	width:  100%;
	margin-bottom: 10px;
}

form input 
{
	border-radius: 8px;
	padding: 8px;
	width: 98%;
}

	#post button#update
	{
		width: 90%;
	}

	#post button#delete
	{
		width: 9%;
	}

	.published
	{
		background: #80a573;
		color: #000;
		padding: 0px 6px;
	}

	.unpublished
	{
		background: #a57373;
		color: #000;
		padding: 0px 6px;
	}

	.comment_block
	{
		background:#c0d8dc; 
		color:#000;
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 12px;
	}

		.comment_block .username, 
		.comment_block .date 
		{
			width: 50%;
			float: left;
			font-size: 14px;
		}

		.comment_block .username
		{

		}

		.comment_block .date 
		{
			text-align: right;
		}

		.comment_block .message
		{
			clear: both;
			width: 100%;
		}

		.clear
		{
			clear: both;
		}

#newcomment 
{
	background: #70959a;
   border-radius: 10px;
	padding: 30px;
	color: #000;
}

.error
{
	background: #de8b8b;
	font-size: 12px!important;
	line-height: 1em!important;
	color: #000;
	padding: 6px 20px;
	border-radius: 8px;
	margin-bottom: 18px;
}

.message
{
	background: #afb42b;
	padding: 12px 20px;
	border-radius: 8px;
	margin-bottom: 18px;
}

footer
{
	background: #9bb9bd;
	color: #3c5f64;
	max-width: 100%;
   text-align: center;
   padding: 2px;
}

	footer nav 
	{
		background: none;
		opacity: 1;
	}

	footer a
	{
		color: #3c5f64;
	}

.pagination 
{
	margin: 0 auto;
	text-align: center;
}

	.pagination span,
	.pagination a
	{
		padding: 4px;
	}

#pagination_limit button
{
	border-radius: 16px;
}

	#pagination_limit #category
	{
		width: 242px;
	}

	#pagination_limit .keyword
	{
		width: 120px;
	}

.right
{
	float: right;
}

.left
{
	float: left;
}

.clear
{
	clear: both;
}

form#search
{
	width: 400px;
	float: right;
}

	form#search input
	{
		width: 72%;
		float: left;
	}

	form#search button
	{
		width: 20%;
		float: right;
		border-radius: 10px;
    	padding: 8px;
	}

@media screen and (max-width: 800px) 
{
	.wrapper
	{
		padding: 20px;
    	max-width: 100%;
    	display: inline-flex;
	}

	.grid 
	{
		grid-template-columns: 1fr;
	}

	#contact input,
	#contact textarea,
	.ck-editor
	{
		width: 100%;
	}

	#contact #submit
	{
		width: 100%;
	}

	article img
	{
		max-width: 100%;
	}

	#skills
	{
		grid-template-columns: 1fr;
	}
}