/* Font faces */
@font-face 								{ font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(/fonts/source-sans-pro.woff2) format('woff2');	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
@font-face 								{ font-family: 'icons'; src:  url('/fonts/icons/icons.eot?imsawx'); src:  url('/fonts/icons/icons.eot?imsawx#iefix') format('embedded-opentype'), url('/fonts/icons/icons.ttf?imsawx') format('truetype'), url('/fonts/icons/icons.woff?imsawx') format('woff'), url('/fonts/icons/icons.svg?imsawx#icons') format('svg'); font-weight: normal; font-style: normal; }

/* Defaults */
* 										{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; outline: none; text-decoration: none; }
body 									{ font-family: "Source Sans Pro", "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: normal; color: #404040; font-size: 15px; }
a 										{ color: #ec4b3b; }
a:hover									{ text-decoration: underline; }
a:visited 								{ color: #ec4b3b; }


/* Wrappers */
.outer 									{ width: 100%; }
.outer:after 							{ content: ""; display: table; clear: both; }
.inner 									{ max-width: 1500px; width: 100%; margin: auto; position: relative; padding: 0 5%; clear: both; }
.container 								{ margin-top: 100px; }


/* Navigation */
.main-nav ul li							{ float:left; font-size: 14px; padding: 0 15px; line-height: 70px; height: 70px; }
.main-nav 								{ height: 70px; }
.main-nav ul 							{ float:right; }
.main-nav a 							{ color: #404040; display: block; }

.menu 									{ padding: 5px 10px; border: 1px solid #ccc; border-radius: 6px; }
.menu li 								{ line-height:25px; }
.menu ul 								{ margin-left: 20px; }
#menu-burger							{ display: none; }
#menu-burger:checked + ul li 			{ display: block; }


/* Header */
header 									{ height: 70px; box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); background: #fff; margin-bottom: 30px; position: fixed; z-index: 1; top: 0; }
header .logo 							{ height: 65px; padding-top: 5px; float: left; }
header .logo img 						{ max-height: 100%; }
header .title 							{ float: left; height: 70px; font-size: 33px; line-height: 70px; margin-left: 20px; }


/* Footer */
footer 									{ background: #ec4b3b; height: 75px; color: #fff; line-height: 75px; text-align: center; margin-top: 50px; box-shadow: 0px -3px 15px 0px rgba(0,0,0,0.1); }


/* Articles */
.article h1 							{ font-size: 38px; font-weight: 300; line-height: 42px; margin-bottom: 11px; }
.article h2 							{ font-size: 30px; font-weight: 300; line-height: 33px; }
.article h3 							{ font-size: 24px; font-weight: 300; line-height: 27px; margin-top: 80px; color: #ec4b3b; }
.article h4 							{ font-size: 18px; font-weight: 600; line-height: 20px; margin-top: 60px; margin-bottom: 5px;}
.article h5 							{ font-size: 15px; font-weight: 600; line-height: 18px; margin-top: 35px; }
.article p 								{ font-size: 15px; line-height: 26px; margin-bottom: 10px; margin-top: 10px; }
.article code 							{ color: #c7254e; background-color: #f9f2f4; border-radius: 4px; padding: 2px 4px; font-family: "Courier New", Courier, monospacemonospace; }
.article pre code						{ margin: 5px 0 25px 0; border:1px solid #ccc; border-radius: 3px; background: #f8f8f8; padding: 10px; display: block; word-break: break-all; word-wrap: break-word; color: #333; line-height: 1.4; font-size: 13px; max-width: 100%; overflow-y: auto; }
.article ul 							{ width: 100%; margin-bottom: 10px; }
.article li 							{ width: 100%; list-style-type: square; line-height: 26px; margin-left: 16px; }
.article em 							{ color: #af4141; }
.article table 							{ margin-top: 10px; }
.article table, 
.article td, 
.article th								{ border: 1px solid #e2e2e2; text-align: left; padding: 6px 15px; border-collapse: collapse;  width: 100%; white-space: nowrap; }
.article th,
.article tr:nth-child(even) 			{ background: #f8f8f8; }
.article td:last-child					{ width:1%; }


/* Columns */
[class*='col-'] 						{ float: left; }
.col-md-1  								{ width: 20%; }
.col-md-2  								{ width: 25%; }
.col-md-3  								{ width: 33.33%; }
.col-md-4  								{ width: 40%; }
.col-md-5  								{ width: 50%; }
.col-md-6  								{ width: 60%; }
.col-md-7  								{ width: 66.66%; }
.col-md-8  								{ width: 70%; }
.col-md-9  								{ width: 80%; }
.col-md-10 								{ width: 90%; }
.col-md-11 								{ width: 100%; }


/* Icons */
[class*="icon-"] 						{ font-family: 'icons' !important; text-decoration: none; position: relative; speak: none; text-align: center; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-menu:before 						{ content: "\e001"; }
.icon-sad:before 						{ content: "\e9e5"; }


.error-page 							{ text-align: center; }
.error-page div							{ font-size: 14vw; margin-bottom: 10px; }
.error-page h1							{ font-size: 6vw; }
.error-page h3							{ font-size: 3vw; }
.error-page p							{ font-size: 2vw; margin-top: 20px; }


/* Mobile */
@media screen and (max-width: 825px) 	{
	
	.documentation-nav 					{ width: 100%; margin-bottom: 50px; }
	.documentation-nav .menu			{ width: 100%; max-height: 144px; overflow-y: scroll; overflow-x: hidden; }
	.content 							{ width: 100%; }
	.content .article 					{ width: 100%; }

	/* Navigation */
	.main-nav ul 						{ position: absolute; background: #f8f8f8; left: 0; right: 0px; top: 0; z-index: 99999; box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); }
	.main-nav ul li						{ float: none; display: none; }
	.main-nav ul li.menu-icon			{ position: absolute; top: 0; right: 0; display: block; }
	.main-nav .icon-menu				{ cursor: pointer; font-size: 20px; }

	header .title 						{ font-size: 4vw; }

	/* Error page */
	.error-page div						{ font-size: 20vw; }
	.error-page h1						{ font-size: 8vw; }
	.error-page h3						{ font-size: 6vw; }
	.error-page p						{ margin-top: 20px; font-size: 4vw; }
}

/* Desktop */
@media screen and (min-width: 825px) {
	.main-nav ul li.menu-icon 			{ display: none; }
}