body {
	background: #fff;
}

.cc {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2%;
	display: flex;
	justify-content: space-between;
}

header {
	border-bottom: 1px solid #4cafe1;
	padding: 16px 0;
}


#logo img {
	max-width: 143px;
	height: auto;
}

h1 {
	color: #4cafe1;
	font-size: 200%;
	font-weight: 700;
	align-self: center;
}

h2 {
	color: #4cafe1;
	font-size: 150%;
	font-weight: 700;
	padding-bottom: 10px;
}

h3 {
	color: #4cafe1;
	font-size: 125%;
	padding: 10px 0;
}

h4 {
	font-weight: 700;
	font-size: 16px;
	padding: 20px 0 5px;
}

h5 {
	padding-bottom: 3px;
}

p + p {
	padding-top: 10px;
}

nav {
	border-right: 1px solid #4cafe1;
	padding: 60px 16px 16px 12px;
	width: 250px;
}

nav li {
	list-style: none;
	padding-bottom: 2px;
}

nav a {
	text-decoration: none;
	font-size: 14px;
}

nav > ul > li {
	padding-bottom: 12px;
}

nav > ul > li > a {
	font-weight:700;
	padding-bottom: 4px;
	display: inline-block;
}

main {
	padding: 0px 0 30px 30px;
	width: calc(100% - 251px);
}

section {
	padding-top: 60px;
}

.text-code {
	display: flex;
	justify-content: space-between;
}

.text-code .text {
	flex: 0 0 auto;
	width: 55%;
}

.text-code .code {
	flex: 0 0 auto;
	width: 41%;
}

.codeblock {
	margin-top: 40px;
	font-size: 14px;
}

.codeblock .header {
	background: rgb(227,231,235);
	padding: 11px 12px;
	border-radius: 8px 8px 0 0;
}

.codeblock .header strong {
	padding-right:4px;
}

.codeblock pre {
	background: #FAFAFA;
	border-radius: 0 0 8px 8px;
	color:rgb(144, 164, 174);
	overflow: scroll;
}

.codeblock code {
	padding: 14px 12px;
	display: inline-block;
	line-height: 1.3;
}

.param {
	border-top: 1px solid #ccc;
	margin: 5px 0 0;
	padding: 10px 0 7px;
}

.param h5 code {
	padding-right: 10px;
}

.param h5 span {
	font-size: 14px;
	vertical-align: text-bottom;
}

.param h5 span:not([class*="color"]) {
	color: #4cafe1;
}


.param .values {
	padding-left: 10px;
	color: rgb(144, 164, 174);
}

.param > .param {
	padding-left: 20px;
}



footer {
	background: #4cafe1;
	padding: 30px 0;
	color: #fff;
}

footer a {
	color: #fff !important;
	text-decoration: none;
}



@media only screen and (max-width:800px) {
	#logo img {
		max-width: 100px;
	}
	
	h1 {
		text-align: right;
		font-size: 125%;
	}
	
	#content .cc {
		display: block;
	}
	
	nav {
		width:100%;
		padding: 20px 0 5px;
		border-right: none;
		border-bottom: 1px solid #4cafe1;
	}
	
	main {
		width:100%;
		padding: 0 0 40px;
	}
	
	section {
		padding-top: 30px;
	}
}


@media only screen and (max-width:550px) {
	.text-code {
		display: block;
	}
	
	.text-code .text {
		width:100%;
	}
	
	.text-code .code {
		width:100%;
	}
	
	.codeblock {
		margin: 20px 0;
	}
}