/*
Theme Name: Arnon on Technology
Theme URI: https://github.com/arnonerba/arnon-on-technology
Author: Arnon Erba
Author URI: https://www.arnonerba.com/
Description: Custom WordPress theme designed for Arnon on Technology
Version: 2.7.1
*/

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: rgba(255,255,255,0.87);
	background-color: #212121;
	-webkit-text-size-adjust: none;
	   -moz-text-size-adjust: none;
	    -ms-text-size-adjust: none;
	        text-size-adjust: none;
}
body.noscroll {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

main, nav, article, section {
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
}

p, figure, form {
	margin: 0 0 16px 0;
}

a {
	text-decoration: none;
	color: #76FF03;
}

pre, code, textarea {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-family: 'Roboto Mono', monospace;
	font-size: inherit;
	border-radius: 4px;
	color: inherit;
	background-color: rgba(0,0,0,0.87) !important;
	overflow: auto;
	border: none;
}
pre {
	display: block;
	white-space: pre;
	margin: 0 0 16px 0;
	padding: 8px !important;
	overflow: auto;
}
code {
	padding: 1px 3px;
	line-height: 24px;
}
textarea {
	display: block;
	white-space: pre-wrap;
	margin: 0 0 16px 0;
	padding: 8px;
	width: 100%;
	resize: none;
}

blockquote, .comment {
	margin: 0 0 16px 0;
	padding: 8px;
	border-left: 4px solid #76FF03;
	border-radius: 4px;
	font-style: italic;
	font-size: inherit;
	background-color: rgba(0,0,0,0.87);
}
blockquote p {
	margin: 0;
}
.comment p {
	margin: 0 0 8px 0;
}
.comment cite {
	font-weight: 700;
}

li pre, li blockquote {
	margin: 8px 0;
}

#navmenubutton, #menubutton {
	padding: 12px;
	cursor: pointer;
	color: #000;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
#navmenubutton {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}
#menubutton {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 6;
}

#navdrawer {
	visibility: hidden;
	position: fixed;
	z-index: 8;
	top: 0;
	bottom: 0;
	left: -256px;
	width: 256px;
	padding-top: 48px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	overflow: auto;
	color: #000;
	background-color: #76FF03;
	font-size: 15px;
	-webkit-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
	-webkit-overflow-scrolling: touch;
}
#navdrawer.navdraweropen {
	visibility: visible;
	-webkit-transform: translate(256px,0);
	    -ms-transform: translate(256px,0);
	        transform: translate(256px,0);
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#navdrawer ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#navdrawer ul:last-child {
	padding-bottom: 12px;
}
#navdrawer ul li {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 38px;
	margin: 6px;
}
#navdrawer ul li i.material-icons {
	padding-left: 6px;
}
#navdrawer ul li a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	background: 0 0;
	border: none;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	line-height: 18px;
	padding: 10px 10px 10px 56px;
	font-weight: 700;
	color: #000;
	-webkit-transition: background-color 150ms ease;
	-o-transition: background-color 150ms ease;
	transition: background-color 150ms ease;
}
#navdrawer ul li a:hover {
	background-color: rgba(158,158,158,0.2);
}
#navdrawer ul li a:active {
	background-color: rgba(158,158,158,0.4);
}
#navdrawer span {
	display: block;
	margin: 6px;
	padding: 10px 6px;
	font-weight: 400;
	color: rgba(0,0,0,0.87);
}
#navdrawer hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid rgba(0,0,0,0.2);
	margin: 8px 0;
	padding: 0;
}

#scrim {
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	-webkit-transition: opacity 150ms linear;
	-o-transition: opacity 150ms linear;
	transition: opacity 150ms linear;
}
#scrim.visible {
	opacity: 1;
	visibility: visible;
	z-index: 7;
}

#wrapper {
	position: absolute;
	right: 0;
	left: 0;
	min-height: 100%;
	overflow: hidden;
}

.container {
	max-width: 840px;
	margin: auto;
	padding: 48px 0 64px 0;
}

#header {
	position: fixed;
	z-index: 5;
	left: 0;
	right: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 48px;
	color: #000;
	background-color: #76FF03;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 0 48px;
	overflow: hidden;
	-webkit-box-shadow: none;
	        box-shadow: none;
	-webkit-transition: -webkit-box-shadow 150ms ease-in-out;
	transition: -webkit-box-shadow 150ms ease-in-out;
	-o-transition: box-shadow 150ms ease-in-out;
	transition: box-shadow 150ms ease-in-out;
	transition: box-shadow 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out;
}
#header.scrolled {
	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.26);
	        box-shadow: 0 2px 5px rgba(0,0,0,0.26);
}

.headerpic {
	height: 36px;
	width: 36px;
	margin-right: 16px;
	border-radius: 50%;
	overflow: hidden;
}
.headerpic img {
	height: 100%;
}

.headertitle span a {
	color: inherit;
	font-size: 24px;
}

.headertext {
	margin-left: auto;
	font-size: 14px;
	text-transform: uppercase;
}

.card {
	text-align: left;
	margin: 20px;
	background-color: #121212;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.2);
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
	        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
}

.cardimage {
	height: 169px;
	background-color: #454545;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.cardtitle {
	margin: 18px 16px 8px 16px;
	font-size: 24px;
}
.cardtitle a {
	color: inherit;
}
.cardtitle a:hover {
	color: #76FF03;
}

.cardsubtitle {
	margin: 8px 16px 16px 16px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}

.modified-date {
	margin: 0 2px 0 0;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 14px;
	text-transform: uppercase;
	color: #121212;
	background-color: rgba(255,255,255,0.87);
}

.cardtext {
	position: relative;
	max-height: 255px;
	overflow: hidden;
	margin: 16px 16px 0 16px;
	font-size: 16px;
	line-height: 24px;
}
.cardtext::after {
	content: '';
	height: 48px;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(18,18,18,0)), to(rgba(18,18,18,1)));
	background: -o-linear-gradient(rgba(18,18,18,0), rgba(18,18,18,1));
	background: linear-gradient(rgba(18,18,18,0), rgba(18,18,18,1));
}
.cardtext.full {
	max-height: none;
	overflow: visible;
	margin-bottom: 16px;
}
.cardtext.full:after {
	display: none;
}
.cardtext.smallfont {
	font-size: 14px;
}
.cardtext img {
	height: auto;
	max-width: 100%;
}
.cardtext h2 {
	display: block;
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px 0;
}
.cardtext h3 {
	display: inline-block;
	font-size: 20px;
	font-style: italic;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	margin: 0 0 16px 0;
}
.cardtext h4 {
	display: block;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px 0;
}

.cardactions {
	padding: 16px;
	border-top: 1px solid rgba(255,255,255,0.2);
}

.cardtags {
	font-size: 16px;
	line-height: 24px;
}

#footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background-color: #121212;
	height: 64px;
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 10px 48px;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 1px solid rgba(255,255,255,0.2);
}

.footertext {
	font-size: 14px;
	text-transform: uppercase;
}

input[type='search'] {
	border: none;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: inherit;
	width: 190px;
	margin: 0;
	padding: 4px 0;
	background: 0 0;
	text-align: left;
	color: #000;
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
input[type='search']:focus {
	border-bottom: 2px solid #000;
	margin-bottom: -1px;
}

input[type='text'] {
	display: block;
	white-space: pre-wrap;
	margin: 0;
	padding: 8px;
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border: none;
	resize: none;
	font-family: 'Roboto Mono', monospace;
	font-size: inherit;
	border-radius: 4px;
	color: inherit;
	background-color: rgba(0,0,0,0.87) !important;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.button, #page_navigation a, input[type='submit'] {
	position: relative;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background: 0 0;
	border: 1px solid #76FF03;
	border-radius: 4px;
	height: 36px;
	margin: 0;
	padding: 0 15px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: #76FF03;
	-webkit-transition: background-color 150ms ease, -webkit-box-shadow 150ms ease;
	transition: background-color 150ms ease, -webkit-box-shadow 150ms ease;
	-o-transition: background-color 150ms ease, box-shadow 150ms ease;
	transition: background-color 150ms ease, box-shadow 150ms ease;
	transition: background-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
.button:hover, input[type='submit']:hover {
	background-color: rgba(158,158,158,0.2);
}
.button:active, input[type='submit']:active {
	background-color: rgba(158,158,158,0.4);
}
.button.iconbutton {
	border: none;
	border-radius: 50%;
	font-size: 24px;
	height: 32px;
	margin-left: 0;
	margin-right: 0;
	min-width: 32px;
	width: 32px;
	padding: 0;
	overflow: hidden;
	color: inherit;
	line-height: normal;
}
.button.raised, #page_navigation a {
	margin: 4px;
	background-color: #121212;
	-webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
	        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
.button.raised:hover, #page_navigation a:hover {
	background-color: #121212;
	-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
	        box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
.button.raised:active, #page_navigation a:active {
	background-color: #121212;
	-webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
	        box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}
.button .material-icons {
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-12px,-12px);
	    -ms-transform: translate(-12px,-12px);
	        transform: translate(-12px,-12px);
	line-height: 24px;
	width: 24px;
}

#searchform {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row nowrap;
	        flex-flow: row nowrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: 16px;
}

#page_navigation {
	margin: 20px;
	text-align: center;
}

ol.comment-list {
	margin: 0 0 16px 0;
	padding: 0;
	list-style-type: none;
}
ol.children {
	margin: 16px 8px;
	padding: 0;
	list-style-type: none;
}
.comment-form textarea, .comment-form input[type='text'] {
	margin: 4px 0;
	border: 1px solid rgba(255,255,255,0.2);
}

.error {
	margin: 96px 0;
	text-align: center;
}
.error span {
	display: block;
	margin: 0 0 24px 0;
	font-size: 112px;
	line-height: 100%;
	white-space: nowrap;
}
.error p {
	font-weight: 700;
}

.highlight {
	color: #FF3D00;
}

::-webkit-input-placeholder {
	opacity: 1;
	color: rgba(0,0,0,0.4);
}

::-moz-placeholder {
	opacity: 1;
	color: rgba(0,0,0,0.4);
}

:-ms-input-placeholder {
	opacity: 1;
	color: rgba(0,0,0,0.4);
}

::-ms-input-placeholder {
	opacity: 1;
	color: rgba(0,0,0,0.4);
}

::placeholder {
	opacity: 1;
	color: rgba(0,0,0,0.4);
}

@media screen and (max-width: 768px) {
	#header {
		position: static;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		height: auto;
		padding: 10px;
		-webkit-box-shadow: none;
		        box-shadow: none;
	}
	#header.scrolled {
		-webkit-box-shadow: none;
		        box-shadow: none;
	}
	.headerpic {
		margin: 8px 0 0 0;
	}
	.headertitle {
		margin: 8px;
		text-align: center;
	}
	.headertext {
		margin: 0 0 8px 0;
		text-align: center;
	}
	#menubutton {
		position: absolute;
	}
	.container {
		padding: 0 0 64px 0;
	}
	.card {
		margin: 10px;
	}
	.error span {
		font-size: 72px;
	}
	.cardimage {
		height: 130px;
	}
	#page_navigation {
		margin: 10px;
	}
}