/*--------------------------------------------------------------------------
|  RESETS
--------------------------------------------------------------------------*/

/* ================= Normalize CSS ==================== */

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

 html {
 	line-height: 1.15; /* 1 */
 	-ms-text-size-adjust: 100%; /* 2 */
 	-webkit-text-size-adjust: 100%; /* 2 */
 }

/* Sections
========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

 body {
 	margin: 0;
 }

/**
 * Add the correct display in IE 9-.
 */

 article,
 aside,
 footer,
 header,
 nav,
 section {
 	display: block;
 }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

 h1 {
 	font-size: 2em;
 	margin: 0.67em 0;
 }

/* Grouping content
========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

 figcaption,
 figure,
 main { /* 1 */
 	display: block;
 }

/**
 * Add the correct margin in IE 8.
 */

 figure {
 	margin: 1em 40px;
 }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

 hr {
 	box-sizing: content-box; /* 1 */
 	height: 0; /* 1 */
 	overflow: visible; /* 2 */
 }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

 pre {
 	font-family: monospace, monospace; /* 1 */
 	font-size: 1em; /* 2 */
 }

/* Text-level semantics
========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

 a {
 	background-color: transparent; /* 1 */
 	-webkit-text-decoration-skip: objects; /* 2 */
 }

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

 abbr[title] {
 	border-bottom: none; /* 1 */
 	text-decoration: underline; /* 2 */
 	text-decoration: underline dotted; /* 2 */
 }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

 b,
 strong {
 	font-weight: inherit;
 }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

 b,
 strong {
 	font-weight: bolder;
 }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

 code,
 kbd,
 samp {
 	font-family: monospace, monospace; /* 1 */
 	font-size: 1em; /* 2 */
 }

/**
 * Add the correct font style in Android 4.3-.
 */

 dfn {
 	font-style: italic;
 }

/**
 * Add the correct background and color in IE 9-.
 */

 mark {
 	background-color: #ff0;
 	color: #000;
 }

/**
 * Add the correct font size in all browsers.
 */

 small {
 	font-size: 80%;
 }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

 sub,
 sup {
 	font-size: 75%;
 	line-height: 0;
 	position: relative;
 	vertical-align: baseline;
 }

 sub {
 	bottom: -0.25em;
 }

 sup {
 	top: -0.5em;
 }

/* Embedded content
========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

 audio,
 video {
 	display: inline-block;
 }

/**
 * Add the correct display in iOS 4-7.
 */

 audio:not([controls]) {
 	display: none;
 	height: 0;
 }

/**
 * Remove the border on images inside links in IE 10-.
 */

 img {
 	border-style: none;
 }

/**
 * Hide the overflow in IE.
 */

 svg:not(:root) {
 	overflow: hidden;
 }

/* Forms
========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

 button,
 input,
 optgroup,
 select,
 textarea {
 	font-family: sans-serif; /* 1 */
 	font-size: 100%; /* 1 */
 	line-height: 1.15; /* 1 */
 	margin: 0; /* 2 */
 }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

 button,
 input { /* 1 */
 	overflow: visible;
 }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

 button,
 select { /* 1 */
 	text-transform: none;
 }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

 button,
 html [type="button"], /* 1 */
 [type="reset"],
 [type="submit"] {
 	-webkit-appearance: button; /* 2 */
 }

/**
 * Remove the inner border and padding in Firefox.
 */

 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
 	border-style: none;
 	padding: 0;
 }

/**
 * Restore the focus styles unset by the previous rule.
 */

 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
 	outline: 1px dotted ButtonText;
 }

/**
 * Correct the padding in Firefox.
 */

 fieldset {
 	padding: 0.35em 0.75em 0.625em;
 }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

 legend {
 	box-sizing: border-box; /* 1 */
 	color: inherit; /* 2 */
 	display: table; /* 1 */
 	max-width: 100%; /* 1 */
 	padding: 0; /* 3 */
 	white-space: normal; /* 1 */
 }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

 progress {
 	display: inline-block; /* 1 */
 	vertical-align: baseline; /* 2 */
 }

/**
 * Remove the default vertical scrollbar in IE.
 */

 textarea {
 	overflow: auto;
 }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

 [type="checkbox"],
 [type="radio"] {
 	box-sizing: border-box; /* 1 */
 	padding: 0; /* 2 */
 }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
 	height: auto;
 }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

 [type="search"] {
 	-webkit-appearance: textfield; /* 1 */
 	outline-offset: -2px; /* 2 */
 }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
 	-webkit-appearance: none;
 }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

 ::-webkit-file-upload-button {
 	-webkit-appearance: button; /* 1 */
 	font: inherit; /* 2 */
 }

/* Interactive
========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

 details, /* 1 */
 menu {
 	display: block;
 }

/*
 * Add the correct display in all browsers.
 */

 summary {
 	display: list-item;
 }

/* Scripting
========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

 canvas {
 	display: inline-block;
 }

/**
 * Add the correct display in IE.
 */

 template {
 	display: none;
 }

/* Hidden
========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

 [hidden] {
 	display: none;
 }


 /* ================= Reset CSS ==================== */

 html, body, div, span, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strong, sub, sup, var,
 b, u, i,
 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, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, menu, nav, section {
 	display: block;
 }
 body {
 	line-height: 1;
 }
 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;
 }

 a {
 	text-decoration: none;
 }

/*--------------------------------------------------------------------------
|  GENERAL STYLES 
--------------------------------------------------------------------------*/

body {
	font-family: 'Roboto', sans-serif;
}

.container {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	margin: 1rem 0.7rem;
}

h1 {
	font-size: 28px;
}

h2 {
	font-size: 26px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 22px;
}

h5 {
	font-size: 20px;
}

h6 {
	font-size: 18px;
}

p {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.7px;
	margin: 1.2rem 0.7rem 2rem 0.7rem;
}

section {
	padding-bottom: 50px;
	padding-top: 50px;
}

section:last-child {
	border-bottom: 0;
}

article.border {
	border-bottom: 1px solid #c0392b;
	margin-bottom: 25px;
	margin-top: 25px;
}

/*--------------------------------------------------------------------------
|  HEADER STYLES 
--------------------------------------------------------------------------*/

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 250px;
	background: #e74c3c;
	padding: 50px;
	background: -moz-linear-gradient(top, #e74c3c 1%, #f44336 100%);
	background: -webkit-linear-gradient(top, #e74c3c 1%,#f44336 100%);
	background: linear-gradient(to bottom, #e74c3c 1%,#f44336 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e74c3c', endColorstr='#f44336',GradientType=0 );
}

header h1 {
	color: #ecf0f1;
	letter-spacing: 5px;
	margin-bottom: 25px;
	text-shadow: 2px 2px 2px #c0392b;
}

header mark {
	background: #FFC107;
	padding: 20px;
	font-weight: bold;
	color: #ecf0f1;
	margin-bottom: 50px;
	box-shadow: 2px 2px 2px #c0392b;
}

header .autohor-contact ul {
	display: flex;
	color: #ecf0f1;
	border-top: 1px solid #c0392b;
	border-bottom: 1px solid #c0392b;
}

header .autohor-contact ul li {
	margin-left: 5px;
	margin-right: 5px;
}
header .autohor-contact ul li:last-child {
	margin-right: 0;
}


header .autohor-contact ul li a {
	padding: 20px;
	color: #ecf0f1;
	display: inline-block;
	transition: all 500ms ease;
}

header .autohor-contact ul li a:hover {
	background: #c0392b;
}

header nav {
	position: fixed;
	top: 0;
	background: #e74c3c;
	height: 50px;
	width: 100%;
	z-index: 1;
}

header nav ul {
	display: flex;
	justify-content: center;
}

header nav ul li a {
	display: inline-block;
	line-height: 50px;
	padding: 0 15px;
	color: #ecf0f1;
}

header nav ul li a:hover {
	background: #c0392b;
}

#menu-toggle {
	display: none;
}

/*--------------------------------------------------------------------------
|  Main & Footer STYLES 
--------------------------------------------------------------------------*/

#wrapper ,footer{
	padding: 40px;
}

/*--------------------------------------------------------------------------
| Code Editor 
--------------------------------------------------------------------------*/
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+coffeescript+handlebars+jade+less+markdown+php+scss+stylus&plugins=line-highlight+line-numbers+show-language */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

 code[class*="language-"],
 pre[class*="language-"] {
 	color: black;
 	text-shadow: 0 1px white;
 	font-family: Consolas, Monaco, 'Andale Mono', monospace;
 	direction: ltr;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
 	word-break: normal;
 	line-height: 1.5;

 	-moz-tab-size: 4;
 	-o-tab-size: 4;
 	tab-size: 4;

 	-webkit-hyphens: none;
 	-moz-hyphens: none;
 	-ms-hyphens: none;
 	hyphens: none;
 }

 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 	text-shadow: none;
 	background: #b3d4fc;
 }

 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
 	text-shadow: none;
 	background: #b3d4fc;
 }

 @media print {
 	code[class*="language-"],
 	pre[class*="language-"] {
 		text-shadow: none;
 	}
 }

 /* Code blocks */
 pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
 }

 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
 	background: #f5f2f0;
 }

 /* Inline code */
 :not(pre) > code[class*="language-"] {
 	padding: .1em;
 	border-radius: .3em;
 }

 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
 	color: slategray;
 }

 .token.punctuation {
 	color: #999;
 }

 .namespace {
 	opacity: .7;
 }

 .token.property,
 .token.tag,
 .token.boolean,
 .token.number,
 .token.constant,
 .token.symbol,
 .token.deleted {
 	color: #905;
 }

 .token.selector,
 .token.attr-name,
 .token.string,
 .token.char,
 .token.builtin,
 .token.inserted {
 	color: #690;
 }

 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string {
 	color: #a67f59;
 	background: hsla(0, 0%, 100%, .5);
 }

 .token.atrule,
 .token.attr-value,
 .token.keyword {
 	color: #07a;
 }

 .token.function {
 	color: #DD4A68;
 }

 .token.regex,
 .token.important,
 .token.variable {
 	color: #e90;
 }

 .token.important,
 .token.bold {
 	font-weight: bold;
 }
 .token.italic {
 	font-style: italic;
 }

 .token.entity {
 	cursor: help;
 }

 pre[data-line] {
 	position: relative;
 	padding: 1em 0 1em 3em;
 }

 .line-highlight {
 	position: absolute;
 	left: 0;
 	right: 0;
 	padding: inherit 0;
 	margin-top: 1em; /* Same as .prism’s padding-top */

 	background: hsla(24, 20%, 50%,.08);
 	background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
 	background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
 	background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
 	background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));

 	pointer-events: none;

 	line-height: inherit;
 	white-space: pre;
 }

 .line-highlight:before,
 .line-highlight[data-end]:after {
 	content: attr(data-start);
 	position: absolute;
 	top: .4em;
 	left: .6em;
 	min-width: 1em;
 	padding: 0 .5em;
 	background-color: hsla(24, 20%, 50%,.4);
 	color: hsl(24, 20%, 95%);
 	font: bold 65%/1.5 sans-serif;
 	text-align: center;
 	vertical-align: .3em;
 	border-radius: 999px;
 	text-shadow: none;
 	box-shadow: 0 1px white;
 }

 .line-highlight[data-end]:after {
 	content: attr(data-end);
 	top: auto;
 	bottom: .4em;
 }
 pre.line-numbers {
 	position: relative;
 	padding-left: 3.8em;
 	counter-reset: linenumber;
 }

 pre.line-numbers > code {
 	position: relative;
 }

 .line-numbers .line-numbers-rows {
 	position: absolute;
 	pointer-events: none;
 	top: 0;
 	font-size: 100%;
 	left: -3.8em;
 	width: 3em; /* works for line-numbers below 1000 lines */
 	letter-spacing: -1px;
 	border-right: 1px solid #999;

 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;

 }

 .line-numbers-rows > span {
 	pointer-events: none;
 	display: block;
 	counter-increment: linenumber;
 }

 .line-numbers-rows > span:before {
 	content: counter(linenumber);
 	color: #999;
 	display: block;
 	padding-right: 0.8em;
 	text-align: right;
 }
 pre[class*='language-'] {
 	position: relative;
 }
 pre[class*='language-'][data-language]::before {
 	content: attr(data-language);
 	color: black;
 	background-color: #CFCFCF;
 	display: inline-block;
 	position: absolute;
 	top: 0;
 	right: 0;
 	font-size: 0.9em;
 	border-radius: 0 0 0 5px;
 	padding: 0 0.5em;
 	text-shadow: none;
 }


/*--------------------------------------------------------------------------
|  RESPONSIVE STYLES 
--------------------------------------------------------------------------*/

@media only screen and (max-width: 991px) {

	header {
		height: 500px;
		text-align: center;
		line-height: 1.1;
	}

	header .autohor-contact ul {
		flex-direction: column;
		border-bottom: 0;
		border-top: 0;
	}

	header .autohor-contact ul li {
		margin: 5px 0;

	}

	header .autohor-contact ul li:last-child {
		margin-right: 0;

	}

	header nav {
		height: 350px;
		width: 100%;
		visibility: hidden;
		transition: all 750ms;
		transform: translateY(-350px);
	}

	header nav ul {
		display: flex;
		flex-direction: column;
	}


	header nav ul li a {
		width: 100%;
	}

	header nav ul li:last-child a {
		border-bottom: 1px solid #c0392b;
	}


	#menu-toggle {
		border-radius: 0;
		appearance:none;
		-webkit-appearance:none;
		background: #c0392b;
		color: #ecf0f1;
		outline: 0;
		position: fixed;
		top: 0;
		right: 0;
		height: 50px;
		width: 100%;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	#menu-toggle:before {
		content: 'Menu Toggle';
		margin-right: 10px;
	}	

	#menu-toggle:after {
		content: '';
		width: 1em;
		height: 0.125em;
		border-top: 0.375em double #ecf0f1;
		border-bottom: 0.125em solid #ecf0f1;
	}

	#menu-toggle:checked + nav  {
		visibility: visible;
		transition: all 750ms;
		transform: translateY(0);
	}
}